/* =============================================================================
   Chiffres clés
   Avec une image de fond (.key_nbs__background), la section bascule en rendu
   inversé : voile sombre, texte clair, cartes translucides.
   ============================================================================= */

.key_nbs {
    position: relative;
    overflow: hidden;

    .container {
        position: relative;
        z-index: 2;
    }

    /* Le bloc titre est aligné à gauche et limité, comme dans la maquette */
    .section__title {
        max-width: 768px;
        margin-left: 0;
        margin-right: 0;
    }

    .chiffres {
        margin-top: var(--space-3xl);
    }

    .chiffre {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var(--space-md);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-xl);
        background: var(--color-white);
    }

    .chiffre__picto {
        display: flex;
        width: 56px;
        height: 56px;
        border-radius: var(--border-radius);
        background-color: var(--color-primary);
        margin-bottom: var(--space-md);
    }

    .chiffre__picto::before {
        content: '';
        display: block;
        width: 28px;
        height: 28px;
        margin: auto;
        background-color: var(--color-white);
        -webkit-mask: var(--picto-url) no-repeat center / contain;
        mask: var(--picto-url) no-repeat center / contain;
    }

    .top {
        font-family: var(--font-display);
        font-size: var(--fs-3xl);
        line-height: 1;
        font-weight: var(--regular);
        letter-spacing: var(--tracking-tight);
        color: var(--color-ink);
    }

    .chiffre__prefix,
    .chiffre__suffix {
        font-size: 0.75em;
    }

    .chiffre__label {
        margin: var(--space-2xs) 0 0;
        color: var(--color-text-muted);
    }

    /* Le fond en image (.key_nbs__background) est désormais commun à toutes
       les sections du builder : ses règles vivent dans css/base/section.css,
       qui est chargé partout — cette feuille-ci ne l'est que si une section
       « chiffres clés » figure sur la page. */
}

/* Rendu inversé dès qu'une image de fond est posée sous un voile sombre :
   sans data-color (voile encre par défaut), sur l'encre ou sur le vert.
   Sous un voile blanc ou crème, les chiffres gardent leur rendu clair. */
.key_nbs:has(.key_nbs__background):not([data-color]),
.key_nbs:has(.key_nbs__background)[data-color="#001020"],
.key_nbs:has(.key_nbs__background)[data-color="#008865"] {

    .section__title h1,
    .section__title h2,
    .section__title h3,
    .section__title p,
    .top,
    .chiffre__label {
        color: var(--color-text-invert);
    }

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

    .chiffre__label {
        color: hsl(var(--hsl-white) / 0.8);
    }

    .chiffre {
        border-color: hsl(var(--hsl-white) / 0.1);
        background: hsl(var(--hsl-white) / 0.05);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
}

/* La maquette garde deux colonnes dès le mobile, quatre à partir du desktop */
.key_nbs .chiffres.grid_layout {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

@media (min-width: 576px) {
    .key_nbs {
        .chiffre {
            padding: var(--space-lg);
        }

        .chiffre__label {
            font-size: var(--fs-lg);
        }
    }
}

@media (min-width: 992px) {
    .key_nbs {
        .top {
            font-size: 2.15rem;
        }

        .chiffres.grid_layout {
            gap: var(--space-lg);
        }

        .chiffres.grid_layout.nb_cols_3 {
            grid-template-columns: repeat(3, 1fr);
        }

        .chiffres.grid_layout.nb_cols_4 {
            grid-template-columns: repeat(4, 1fr);
        }

        .chiffres.grid_layout.nb_cols_5 {
            grid-template-columns: repeat(5, 1fr);
        }
    }
}