/* ==========================================================================
   SECTION "NOS ENGAGEMENTS" (#engagements / data-id="22ee484")
   Grille en croix 2x2 avec lignes de séparation pointillées,
   emblème central centré, titres/icônes blancs et photos au survol.
   ========================================================================== */

/* 1. Conteneur principal de la grille des 4 engagements */
.elementor-element-c27f185,
[data-id="c27f185"] {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Ligne pointillée horizontale GAUCHE (centrée verticalement au niveau du logo) */
.elementor-element-c27f185::before,
[data-id="c27f185"]::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: calc(50% - 28px) !important;
    height: 0 !important;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.28) !important;
    pointer-events: none !important;
    z-index: 2 !important;
    transform: translateY(-50%) !important;
}

/* Ligne pointillée horizontale DROITE (centrée verticalement au niveau du logo) */
.elementor-element-c27f185::after,
[data-id="c27f185"]::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    width: calc(50% - 28px) !important;
    height: 0 !important;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.28) !important;
    pointer-events: none !important;
    z-index: 2 !important;
    transform: translateY(-50%) !important;
}

/* 2. Les 2 rangées horizontales (Ligne 1 & Ligne 2) */
.elementor-element-7961bae,
.elementor-element-789a1b8,
[data-id="7961bae"],
[data-id="789a1b8"] {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-bottom: none !important;
}

/* Ligne pointillée verticale HAUTE (s'arrête à exactement 28px au-dessus du logo, identique à l'horizontale) */
.elementor-element-7961bae::after,
[data-id="7961bae"]::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 28px !important;
    left: 50% !important;
    width: 0 !important;
    height: auto !important;
    border-right: 1px dotted rgba(255, 255, 255, 0.28) !important;
    pointer-events: none !important;
    z-index: 2 !important;
    transform: translateX(-50%) !important;
}

/* Ligne pointillée verticale BASSE (commence à exactement 28px sous le logo, identique à l'horizontale) */
.elementor-element-789a1b8::before,
[data-id="789a1b8"]::before {
    content: '' !important;
    position: absolute !important;
    top: 28px !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 0 !important;
    height: auto !important;
    border-right: 1px dotted rgba(255, 255, 255, 0.28) !important;
    pointer-events: none !important;
    z-index: 2 !important;
    transform: translateX(-50%) !important;
}

[data-id="7961bae"] > .e-con-inner,
[data-id="789a1b8"] > .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Ligne 1 : Espacement bas au-dessus du centre */
.elementor-element-7961bae,
[data-id="7961bae"] {
    padding-bottom: 50px !important;
    margin-bottom: 0 !important;
}

/* Ligne 2 : Espacement haut sous le centre */
.elementor-element-789a1b8,
[data-id="789a1b8"] {
    padding-top: 50px !important;
    margin-top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 3. Colonne Gauche (Santé et sécurité & Qualité et performance) */
.elementor-element-f3c9578,
.elementor-element-82ea90d,
[data-id="f3c9578"],
[data-id="82ea90d"] {
    flex: 1 1 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    border-right: none !important; /* Remplacé par la ligne centrale pseudo-élément */
    padding-right: 45px !important;
    padding-left: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    min-height: 315px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: padding-left 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                padding-right 0.75s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Au survol : Colonne Gauche */
.elementor-element-f3c9578:hover,
.elementor-element-82ea90d:hover,
[data-id="f3c9578"]:hover,
[data-id="82ea90d"]:hover {
    padding-left: 226px !important;
    padding-right: 10px !important;
}

/* 4. Colonne Droite (Traçabilité et transparence & Durabilité et éthique) */
.elementor-element-61d2952,
.elementor-element-c47f23b,
[data-id="61d2952"],
[data-id="c47f23b"] {
    flex: 1 1 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    padding-left: 45px !important;
    padding-right: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    min-height: 315px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: padding-left 0.75s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Au survol : Colonne Droite */
.elementor-element-61d2952:hover,
.elementor-element-c47f23b:hover,
[data-id="61d2952"]:hover,
[data-id="c47f23b"]:hover {
    padding-left: 271px !important;
}

/* 5. Photos au survol (Dimensions exactes de la maquette : 212px x 309px) */

/* Photos Colonne Gauche */
.elementor-element-f3c9578::before,
.elementor-element-82ea90d::before,
[data-id="f3c9578"]::before,
[data-id="82ea90d"]::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 309px !important;
    min-height: 309px !important;
    max-height: 309px !important;
    border-radius: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 0 !important;
    transform: scale(0.98) !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transition: width 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.elementor-element-f3c9578:hover::before,
.elementor-element-82ea90d:hover::before,
[data-id="f3c9578"]:hover::before,
[data-id="82ea90d"]:hover::before {
    width: 212px !important;
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* Photos Colonne Droite (calées après la séparation centrale de 45px) */
.elementor-element-61d2952::before,
.elementor-element-c47f23b::before,
[data-id="61d2952"]::before,
[data-id="c47f23b"]::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 45px !important;
    width: 0 !important;
    height: 309px !important;
    min-height: 309px !important;
    max-height: 309px !important;
    border-radius: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 0 !important;
    transform: scale(0.98) !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transition: width 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.elementor-element-61d2952:hover::before,
.elementor-element-c47f23b:hover::before,
[data-id="61d2952"]:hover::before,
[data-id="c47f23b"]:hover::before {
    width: 212px !important;
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* Icônes personnalisées insérées via widget image Elementor */
[data-id="f3c9578"] .elementor-widget-image,
[data-id="82ea90d"] .elementor-widget-image,
[data-id="61d2952"] .elementor-widget-image,
[data-id="c47f23b"] .elementor-widget-image,
.elementor-element-f3c9578 .elementor-widget-image,
.elementor-element-82ea90d .elementor-widget-image,
.elementor-element-61d2952 .elementor-widget-image,
.elementor-element-c47f23b .elementor-widget-image {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
}

[data-id="f3c9578"] .elementor-widget-image img,
[data-id="82ea90d"] .elementor-widget-image img,
[data-id="61d2952"] .elementor-widget-image img,
[data-id="c47f23b"] .elementor-widget-image img,
.elementor-element-f3c9578 .elementor-widget-image img,
.elementor-element-82ea90d .elementor-widget-image img,
.elementor-element-61d2952 .elementor-widget-image img,
.elementor-element-c47f23b .elementor-widget-image img {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 0 !important;
    /* Teinte exacte en #949E9D */
    filter: brightness(0) saturate(100%) invert(68%) sepia(5%) saturate(302%) hue-rotate(124deg) brightness(92%) contrast(87%) !important;
}

/* 6. Emblème vert central au croisement de la croix */
.elementor-element-d6a80a9,
[data-id="d6a80a9"] {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 32px !important;
    height: 32px !important;
    background-color: transparent !important; /* Aucun fond noir */
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    pointer-events: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.elementor-element-d6a80a9 .elementor-widget-container,
[data-id="d6a80a9"] .elementor-widget-container,
[data-id="3ec1817"],
.elementor-element-3ec1817 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

[data-id="3ec1817"] img,
.elementor-element-3ec1817 img,
[data-id="d6a80a9"] img {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* 7. Typographie & Couleurs : Titres en blanc, Icônes en #949E9D */
[data-id="d288a3f"] svg,
[data-id="277e6a6"] svg,
[data-id="5e27dd9"] svg,
[data-id="3b65d3e"] svg,
[data-id="d288a3f"] i,
[data-id="277e6a6"] i,
[data-id="5e27dd9"] i,
[data-id="3b65d3e"] i,
[data-id="c27f185"] .elementor-widget-icon svg,
[data-id="c27f185"] .elementor-widget-icon i {
    width: 24px !important;
    height: 24px !important;
    font-size: 24px !important;
    fill: #949E9D !important;
    color: #949E9D !important;
    stroke: #949E9D !important;
    display: block !important;
}

[data-id="d288a3f"] svg *,
[data-id="277e6a6"] svg *,
[data-id="5e27dd9"] svg *,
[data-id="3b65d3e"] svg *,
[data-id="c27f185"] .elementor-widget-icon svg * {
    stroke: #949E9D !important;
    color: #949E9D !important;
}

[data-id="cdd44e2"],
[data-id="66dad15"],
[data-id="d490d45"],
[data-id="2b47d9e"] {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
}

[data-id="cdd44e2"] .elementor-heading-title,
[data-id="66dad15"] .elementor-heading-title,
[data-id="d490d45"] .elementor-heading-title,
[data-id="2b47d9e"] .elementor-heading-title {
    font-family: "Space Grotesk", Sans-serif !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #ffffff !important; /* Titre en BLANC */
    letter-spacing: -0.01em !important;
    margin: 0 !important;
}

[data-id="f7e1764"] p,
[data-id="8ae5fbb"] p,
[data-id="42edad5"] p,
[data-id="dff8e12"] p {
    font-family: "Inter", Sans-serif !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    color: #8FA89E !important; /* Texte clair lisible sur fond sombre */
    margin: 0 !important;
}

/* 8. Images spécifiques des 4 engagements */

/* Engagement 1 : Santé et sécurité */
.elementor-element-f3c9578::before,
[data-id="f3c9578"]::before {
    background-image: url('https://bkb.goavana.com/wp-content/uploads/2026/09/iStock-170455194-scaled.jpg') !important;
}

/* Engagement 2 : Traçabilité et transparence */
.elementor-element-61d2952::before,
[data-id="61d2952"]::before {
    background-image: url('https://bkb.goavana.com/wp-content/uploads/2026/09/iStock-1519355686.jpg') !important;
}

/* Engagement 3 : Qualité et performance */
.elementor-element-82ea90d::before,
[data-id="82ea90d"]::before {
    background-image: url('https://bkb.goavana.com/wp-content/uploads/2026/09/iStock-1354172647.jpg') !important;
}

/* Engagement 4 : Durabilité et éthique */
.elementor-element-c47f23b::before,
[data-id="c47f23b"]::before {
    background-image: url('https://bkb.goavana.com/wp-content/uploads/2026/09/iStock-904559406.jpg') !important;
}

/* ==========================================================================
   9. Responsive Mobile & Tablette (< 900px) : Option 1 - Photos intégrées
   Mise en page en cartes verticales élégantes avec photos visibles en permanence,
   suppression des bugs de survol tactile et espacements réguliers.
   ========================================================================== */
@media (max-width: 900px) {

    /* 1. Réinitialisation des rangées horizontales en colonne */
    .elementor-element-7961bae,
    .elementor-element-789a1b8,
    [data-id="7961bae"],
    [data-id="789a1b8"] {
        flex-direction: column !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
    }

    /* Masquage des lignes en croix et de l'emblème central */
    .elementor-element-c27f185::before,
    .elementor-element-c27f185::after,
    [data-id="c27f185"]::before,
    [data-id="c27f185"]::after,
    .elementor-element-7961bae::after,
    [data-id="7961bae"]::after,
    .elementor-element-789a1b8::before,
    [data-id="789a1b8"]::before,
    .elementor-element-d6a80a9,
    [data-id="d6a80a9"] {
        display: none !important;
    }

    /* 2. Cartes des 4 engagements : Pleine largeur et espacement vertical régulier */
    .elementor-element-f3c9578,
    .elementor-element-82ea90d,
    .elementor-element-61d2952,
    .elementor-element-c47f23b,
    [data-id="f3c9578"],
    [data-id="82ea90d"],
    [data-id="61d2952"],
    [data-id="c47f23b"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        min-height: auto !important;
        border-right: none !important;
        padding: 28px 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-bottom: 1px dotted rgba(255, 255, 255, 0.2) !important;
        cursor: default !important;
        transition: none !important;
    }

    /* Le premier élément n'a pas de padding-top excessif */
    .elementor-element-f3c9578,
    [data-id="f3c9578"] {
        padding-top: 0 !important;
    }

    /* Le dernier élément n'a pas de bordure inférieure */
    .elementor-element-c47f23b,
    [data-id="c47f23b"] {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    /* Désactivation totale des décalages au survol sur mobile */
    .elementor-element-f3c9578:hover,
    .elementor-element-82ea90d:hover,
    .elementor-element-61d2952:hover,
    .elementor-element-c47f23b:hover,
    [data-id="f3c9578"]:hover,
    [data-id="82ea90d"]:hover,
    [data-id="61d2952"]:hover,
    [data-id="c47f23b"]:hover {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 3. Photos d'engagements : Bannières toujours visibles au-dessus du texte */
    .elementor-element-f3c9578::before,
    .elementor-element-82ea90d::before,
    .elementor-element-61d2952::before,
    .elementor-element-c47f23b::before,
    [data-id="f3c9578"]::before,
    [data-id="82ea90d"]::before,
    [data-id="61d2952"]::before,
    [data-id="c47f23b"]::before {
        content: '' !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
        border-radius: 2px !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        margin-bottom: 18px !important;
        overflow: hidden !important;
        pointer-events: auto !important;
        transition: transform 0.4s ease, filter 0.4s ease !important;
    }

    /* Neutralisation du survol bureau pour conserver la photo à 100% */
    .elementor-element-f3c9578:hover::before,
    .elementor-element-82ea90d:hover::before,
    .elementor-element-61d2952:hover::before,
    .elementor-element-c47f23b:hover::before,
    [data-id="f3c9578"]:hover::before,
    [data-id="82ea90d"]:hover::before,
    [data-id="61d2952"]:hover::before,
    [data-id="c47f23b"]:hover::before {
        width: 100% !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* 4. Alignement Icônes, Titres et Descriptions */
    [data-id="f3c9578"] .elementor-widget-image,
    [data-id="82ea90d"] .elementor-widget-image,
    [data-id="61d2952"] .elementor-widget-image,
    [data-id="c47f23b"] .elementor-widget-image,
    .elementor-element-f3c9578 .elementor-widget-image,
    .elementor-element-82ea90d .elementor-widget-image,
    .elementor-element-61d2952 .elementor-widget-image,
    .elementor-element-c47f23b .elementor-widget-image {
        margin: 0 0 8px 0 !important;
    }

    [data-id="cdd44e2"] .elementor-heading-title,
    [data-id="66dad15"] .elementor-heading-title,
    [data-id="d490d45"] .elementor-heading-title,
    [data-id="2b47d9e"] .elementor-heading-title {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }

    [data-id="f7e1764"] p,
    [data-id="8ae5fbb"] p,
    [data-id="42edad5"] p,
    [data-id="dff8e12"] p {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
    }
}

/* Ajustement pour les petits smartphones (≤ 480px) */
@media (max-width: 480px) {
    .elementor-element-f3c9578::before,
    .elementor-element-82ea90d::before,
    .elementor-element-61d2952::before,
    .elementor-element-c47f23b::before,
    [data-id="f3c9578"]::before,
    [data-id="82ea90d"]::before,
    [data-id="61d2952"]::before,
    [data-id="c47f23b"]::before {
        height: 160px !important;
        min-height: 160px !important;
        max-height: 160px !important;
        margin-bottom: 14px !important;
    }

    .elementor-element-f3c9578,
    .elementor-element-82ea90d,
    .elementor-element-61d2952,
    .elementor-element-c47f23b,
    [data-id="f3c9578"],
    [data-id="82ea90d"],
    [data-id="61d2952"],
    [data-id="c47f23b"] {
        padding: 22px 0 !important;
    }
}