#brochure .basic_2cols__content {
    gap: 0;
    border: 6px solid var(--color-primary-tint);
    border-radius: var(--border-radius);
    overflow: hidden;

    .basic_2cols__para {
        padding: 20px;
        height: fit-content;
        margin: auto 0;

        @media (min-width: 992px) {
            padding: 48px;
        }
    }
}

.basic_2cols {
    overflow: hidden;

    .basic_2cols__content {
        display: flex;
        position: relative;
        flex-direction: column;
        align-items: stretch;

        &:not(:has(>.basic_2cols__para--dark)) {
            gap: 60px;
        }

        &.reverse {
            flex-direction: column-reverse;
        }

        &+.basic_2cols__content {
            margin-top: 80px;
        }

        @media (min-width: 992px) {
            flex-direction: row;

            &.reverse {
                flex-direction: row-reverse;
            }
        }

        .basic_2cols__para {
            position: relative;
            z-index: 3;
            flex: 1;

            >*:first-child {
                margin-top: 0;
            }

            h2,
            h3,
            h4 {
                margin: 16px 0 20px 0;
            }

            p {
                margin-bottom: 20px;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }

        .basic_2cols__media {
            position: relative;
            margin-top: 16px;
            flex: 1;
            display: flex;

            @media (min-width: 768px) {
                margin-top: 0;
            }

            &.cover {
                img {
                    -o-object-fit: cover;
                    object-fit: cover;
                }
            }

            &:not(.cover) {
                height: 100%;
            }

            img {
                display: block;
                height: 100%;
                -o-object-fit: contain;
                object-fit: contain;
                -o-object-position: center;
                object-position: center;
                width: 100%;
                border-radius: var(--border-radius);

                @media (max-width: 991px) {
                    max-height: 400px;
                }
            }

            p {
                position: absolute;
                bottom: 0;
                background: var(--grey);
                left: 50%;
                transform: translate(-50%);
                font-family: var(--title-font);
                color: var(--color-primary);
                min-width: 80%;
                border-radius: var(--border-radius) var(--border-radius) 0 0;
                margin: 0;
                font-size: 16px;
                line-height: normal;
                padding: 20px 20px 0 20px;

                @media (min-width: 992px) {
                    font-size: 24px;
                    line-height: 32px;
                    padding: 40px 40px 0 40px;
                }
            }
        }
    }
}

/* Liste à puces (titre + texte) sous le paragraphe, cf. basic_twocols_liste */
.basic_2cols__liste {
    list-style: none;
    margin: 24px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.basic_2cols__liste_item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.basic_2cols__liste_picto {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: var(--border-radius-full);
    border: 1px solid var(--color-primary);
    background-color: var(--color-primary-tint);
    position: relative;
}

.basic_2cols__liste_picto::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    background-color: var(--color-primary);
    -webkit-mask: url('../../img/naturea-thick.svg') center / contain no-repeat;
    mask: url('../../img/naturea-thick.svg') center / contain no-repeat;
}

.basic_2cols__liste_text {
    strong {
        display: block;
        font-family: var(--title-font);
        font-style: italic;
        font-weight: var(--regular);
        color: var(--color-secondary);
        margin-bottom: 4px;
    }

    p {
        margin: 0;
    }
}

/* Variante "puces numérotées" (champ ACF basic_twocols_liste_style) :
   badge numéroté (au lieu du picto coche) + ligne de connexion verticale
   entre les items. */
.basic_2cols__liste--numbered {
    counter-reset: etape;

    .basic_2cols__liste_item {
        position: relative;
        padding-bottom: 20px;

        &:not(:last-child)::after {
            content: '';
            position: absolute;
            left: 13px;
            top: 35px;
            bottom: 0;
            width: 1px;
            background: color-mix(in srgb, var(--color-primary) 40%, transparent);
        }
    }

    .basic_2cols__liste_picto {
        counter-increment: etape;
        background-color: var(--color-primary-tint);
        border-color: var(--color-primary);
        color: var(--color-primary);
        font-family: var(--main-font);
        font-size: 12px;
        font-weight: var(--semibold);
        display: flex;
        align-items: center;
        justify-content: center;

        &::before {
            content: counter(etape, decimal-leading-zero);
            position: static;
            width: auto;
            height: auto;
            background: none;
            -webkit-mask: none;
            mask: none;
            color: var(--color-primary);
        }
    }

    /* Le titre de chaque étape reste blanc (cf. bloc "fond sombre" plus bas,
       qui s'applique aussi dans ce cas puisque la variante numérotée n'est
       utilisée que sur fond sombre dans la maquette). */
    .basic_2cols__liste_text strong {
        color: var(--white);
    }
}

/* =====================================================================
   MODE "FOND SOMBRE" — déduit automatiquement de la couleur de fond de
   section (layout_settings.bg, icône Réglages du bloc), PAS d'un champ
   ACF dédié : cf. builder/basic_2cols.php ($fond_sombre = $settings['bg']
   === '#192811'), même couleur que celle qui pilote déjà data-color sur
   la balise <section> (css/base/section.css). Couleurs calquées sur
   lovable/src/components/home/SupportSection.tsx et StepsSection.tsx
   (relevé le 2026-09-09).
   ===================================================================== */

/* section.css applique déjà un fond vert foncé + texte blanc à TOUTE la
   section quand data-color="#192811" (mécanisme générique, correct pour
   les layouts pleine largeur). Pour basic_2cols, seul le panneau texte
   (.basic_2cols__para) doit être sombre -- le volet image doit rester sur
   fond neutre, comme dans la source Lovable (section sans fond, seul le
   bloc "bg-dark-green" interne est sombre). On neutralise donc le fond
   large ici. */
section.basic_2cols[data-color="#192811"] {
    background-color: transparent !important;

    .basic_2cols__content {

        &:not(.reverse) {
            .basic_2cols__media img {
                border-bottom-left-radius: 0;

                @media (min-width: 992px) {
                    border-top-left-radius: 0;
                }
            }

            .basic_2cols__para--dark {
                border-top-right-radius: 0;

                @media (min-width: 992px) {
                    border-bottom-right-radius: 0;
                }
            }
        }

        &.reverse {

            .basic_2cols__media img {
                border-bottom-right-radius: 0;

                @media (min-width: 992px) {
                    border-top-right-radius: 0;
                }
            }

            .basic_2cols__para--dark {
                border-top-left-radius: 0;

                @media (min-width: 992px) {
                    border-bottom-left-radius: 0;
                }
            }
        }
    }
}

.basic_2cols__para--dark {
    background-color: var(--color-secondary);
    /* Texture décorative fixe (pas un champ ACF -- comme bg_hdp.jpg pour
       le hero) : s'affiche automatiquement dès que le panneau passe en
       mode sombre, cf. lovable/src/components/home/SupportSection.tsx. */
    background-image: url('../../img/naturea-texture-1.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: var(--border-radius);
    padding: 32px;
    color: var(--white);

    @media (min-width: 992px) {
        padding: 80px;
    }

    h2,
    h3,
    h4 {
        color: var(--white);
    }

    h2 span,
    h3 span,
    h4 span {
        color: var(--color-primary);
    }

    /* Texte des étapes/avantages : crème (lovable "text-cream"), pas blanc pur. */
    p {
        color: var(--color-bg);
    }
}

/* Sur fond sombre, le titre de chaque item de liste doit rester blanc
   (lovable "text-white") -- l'emporte sur la couleur par défaut du texte
   crème et sur celle, vert foncé, de .basic_2cols__liste_text strong. */
.basic_2cols__content .basic_2cols__para--dark .basic_2cols__liste_text strong {
    color: var(--white);
    font-size: 20px;
}

/* Spécificité : section.css cible déjà `section[data-color="#192811"] p`
   (2 éléments + 1 classe) pour mettre tout paragraphe en blanc -- plus
   spécifique qu'un simple `.basic_2cols__para--dark p`. On passe par
   l'ancêtre structurel réel pour regagner la priorité sans !important. */
.basic_2cols__content .basic_2cols__para--dark p {
    color: var(--color-bg);
}