/* =============================================================================
   Sections du builder — rythme vertical et fonds
   Les fonds sont pilotés par layout_settings > bg (ACF), rendu en data-color
   par builder/builder.php. Palette autorisée : admin/admin.php > $cmfy_custom_colors
   ============================================================================= */

section:not(.cartes) {

    h1:has(+p),
    .h1_like:has(+.p),
    h2:has(+p),
    .h2_like:has(+.p),
    h3:has(+p),
    .h3_like:has(+.p),
    h4:has(+p),
    .h4_like:has(+p) {
        margin-bottom: var(--space-md);
    }
}

section {

    .section__title:has(h1+p),
    .section__title:has(.h1_like+p),
    .section__title:has(h2+p),
    .section__title:has(.h2_like+p),
    .section__title:has(h3+p),
    .section__title:has(.h3_like+p),
    .section__title:has(h4+p),
    .section__title:has(.h4_like+p) {
        margin-bottom: var(--space-2xl);
    }
}

section {
    .section__title {
        display: flex;
        flex-direction: column;
        margin: 0 auto var(--space-2xl) auto;

        &>* {
            margin-bottom: var(--space-xs);
        }

        &.text-center {
            text-align: center;

            * {
                text-align: center;
            }
        }

        &.text-end {
            text-align: end;

            * {
                text-align: end;
            }
        }

        &.text-start {
            text-align: start;

            * {
                text-align: start;
            }
        }

        p:not(.section__eyebrow) {
            max-width: 720px;
            color: var(--color-text-muted);
        }

        /* Surtitre — champ « surtitre » du groupe Titre section */
        .section__eyebrow {
            margin: 0 0 var(--space-sm);
            color: var(--color-primary);
            font-size: var(--fs-sm);
            font-weight: var(--semibold);
            line-height: var(--lh-snug);
            text-transform: uppercase;
            letter-spacing: 0.2em;
            max-width: none;
        }
    }
}

/* Sur fond sombre, le surtitre passe en clair */
section[data-color="#001020"] .section__eyebrow,
section[data-color="#008865"] .section__eyebrow {
    color: hsl(var(--hsl-white) / 0.6);
}

section:not(.galerie, .form) {
    .section__title {

        /* Le surtitre est exclu : il garde sa marge basse et son alignement,
           sinon cette règle (plus spécifique) le colle au titre. */
        p:not(.section__eyebrow) {
            margin: 0 auto;
        }
    }
}

/* Deux sections consécutives sans fond : on ne double pas le padding */
section:not(.hdp, [data-color]) {
    +section:not([data-color], .form, .cpt) {
        padding-top: 0 !important;
    }
}

section {
    &.pb-0 {
        padding-bottom: 0px;
    }

    &.pt-0 {
        padding-top: 0px;
    }
}

/* ------------------------------ Rythme vertical --------------------------- */
section {
    padding: var(--space-xl) 0;
}

@media (min-width: 768px) {
    section {
        padding: var(--space-3xl) 0;
    }
}

@media (min-width: 992px) {
    section {
        padding: var(--space-4xl) 0;
    }
}

@media (min-width: 1200px) {
    section {
        padding: var(--space-5xl) 0;
    }
}

/* ---------------------------------- Fonds ---------------------------------- */
section {

    /* Fond par défaut, sans data-color */

    &[data-color="#ffffff"] {
        background-color: var(--color-white);
        position: relative;
    }

    &[data-color="#fff5f0"] {
        background-color: var(--color-cream-light);
        position: relative;
    }

    &[data-color="#fae8d6"] {
        background-color: var(--color-cream);
        position: relative;
    }

    &[data-color="#001020"] {
        background-color: var(--color-ink);
        position: relative;
    }

    &[data-color="#008865"] {
        background-color: var(--color-primary);
        position: relative;
    }

    /* Empilement : deux sections de même fond qui se suivent partagent leur marge */
    &[data-color="#ffffff"]:has(+ [data-color="#ffffff"]),
    &[data-color="#fff5f0"]:has(+ [data-color="#fff5f0"]),
    &[data-color="#fae8d6"]:has(+ [data-color="#fae8d6"]),
    &[data-color="#001020"]:has(+ [data-color="#001020"]),
    &[data-color="#008865"]:has(+ [data-color="#008865"]) {
        padding-bottom: var(--space-xl);
    }

    &[data-color="#ffffff"]+section[data-color="#ffffff"],
    &[data-color="#fff5f0"]+section[data-color="#fff5f0"],
    &[data-color="#fae8d6"]+section[data-color="#fae8d6"],
    &[data-color="#001020"]+section[data-color="#001020"],
    &[data-color="#008865"]+section[data-color="#008865"] {
        padding-top: var(--space-xl);
    }

    /* Fonds sombres : tout le texte passe en blanc */
    &[data-color="#001020"],
    &[data-color="#008865"] {

        color: var(--color-text-invert);

        .section__title,
        &.etapes,
        &.columns {

            h1,
            h2,
            h3,
            h4,
            h5,
            p,
            li {
                color: var(--color-text-invert);
            }
        }

        .wrapper_slider .splide__arrows .splide__arrow--prev,
        .wrapper_slider .splide__arrows .splide__arrow--next {
            &:not(:hover) {
                border: 1px solid var(--color-text-invert) !important;
            }
        }

        .wrapper_slider .splide__arrows .splide__arrow--prev::after,
        .wrapper_slider .splide__arrows .splide__arrow--next::before {
            color: var(--color-text-invert) !important;
        }
    }
}


/* ---------------------- Image de fond de section --------------------------
   Champ key_nbs_image_fond, cloné dans les dispositions actives du builder et
   rendu par builder/builder.php. La photo occupe tout le fond, un voile encre
   passe par-dessus pour la lisibilité.

   Ces règles vivent ici et non dans css/sections_builder/key_nbs.css : cette
   feuille-là n'est chargée que si une section « chiffres clés » est présente,
   alors que le champ existe maintenant sur sept dispositions.
   -------------------------------------------------------------------------- */

section.builder:has(.key_nbs__background) {
    position: relative;
    overflow: hidden;

    /* Tout ce qui n'est pas le fond repasse au-dessus. Le sélecteur vise les
       enfants directs sans les nommer : chaque gabarit a son propre conteneur
       (.container, .container post, wrapper de slider…). */
    &>*:not(.key_nbs__background) {
        position: relative;
        z-index: 1;
    }
}

.key_nbs__background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.key_nbs__background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Le voile prend la couleur choisie pour la section. Sans data-color, il reste
   encre — c'est la valeur de repli de la variable. L'opacité ne bouge jamais.

   Les teintes sont déclarées en canaux HSL (cf. css/_variables.css) pour
   pouvoir y appliquer l'alpha ; --hsl-voile est posée sur la section et héritée
   par le pseudo-voile. */
section.builder[data-color="#ffffff"] {
    --hsl-voile: var(--hsl-white);
}

section.builder[data-color="#fff5f0"] {
    --hsl-voile: var(--hsl-cream-light);
}

section.builder[data-color="#fae8d6"] {
    --hsl-voile: var(--hsl-cream);
}

section.builder[data-color="#001020"] {
    --hsl-voile: var(--hsl-ink);
}

section.builder[data-color="#008865"] {
    --hsl-voile: var(--hsl-primary);
}

.key_nbs__overlay {
    position: absolute;
    inset: 0;
    background: hsl(var(--hsl-voile, var(--hsl-ink)) / 0.8);
}

/* Texte clair sur le voile, même périmètre que pour les fonds sombres plus
   haut : le bloc titre uniquement. Les listes de contenus posent des cartes
   blanches dont le texte doit rester foncé.

   Réservé aux voiles sombres : sans data-color (voile encre par défaut), sur
   l'encre et sur le vert. Sous un voile blanc ou crème, le texte doit au
   contraire garder sa couleur normale — d'où l'absence de règle pour ces
   trois teintes, la valeur héritée convient. */
section.builder:has(.key_nbs__background):not([data-color]),
section.builder:has(.key_nbs__background)[data-color="#001020"],
section.builder:has(.key_nbs__background)[data-color="#008865"] {

    color: var(--color-text-invert);

    .section__title {

        h1,
        h2,
        h3,
        h4,
        h5,
        p,
        li,
        .h1_like,
        .h2_like,
        .h3_like {
            color: var(--color-text-invert);
        }
    }

    /* Sur ce fond, la maquette passe le surtitre en corail */
    .section__eyebrow {
        color: var(--color-accent);
    }
}