.key_nbs {
    .chiffres {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
        text-align: center;

        @media (min-width: 992px) {
            gap: 80px;
            justify-content: center;
        }
    }

    .chiffre {
        position: relative;
        padding-left: 40px;

        &:first-child {
            padding-left: 0;

            &::before {
                display: none;
            }
        }

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1px;
            height: 60px;
            background: color-mix(in srgb, var(--color-secondary) 16%, transparent);
        }

        @media (max-width: 767px) {
            padding-left: 0;

            &::before {
                display: none;
            }
        }
    }

    .top {
        /* display:block (pas flex) : le ::before (bloc décoratif) s'empile
           naturellement au-dessus, tandis que prefix/valeur/suffix (span
           inline) restent sur une seule ligne -- le suffixe est ensuite
           relevé au-dessus de la ligne de base via vertical-align (règle
           .chiffre__suffix ci-dessous), au lieu de rester "au même niveau"
           que le chiffre comme signalé. */
        position: relative;
        display: block;
        color: var(--color-secondary);
        font-family: var(--main-font);
        font-size: 36px;
        line-height: 1;
        margin-bottom: 8px;
        font-weight: var(--regular);
        width: fit-content;
        display: flex;
        align-items: center;

        &::before {
            content: '';
            display: block;
            width: 40px;
            height: 4px;
            margin-bottom: 8px;
            border-radius: var(--border-radius-full);
            background: var(--color-primary);
            position: absolute;
            top: -10px;
        }

        @media (min-width: 1200px) {
            font-size: 60px;
        }
    }

    .chiffre__label {
        margin: 0;
        color: var(--color-secondary-muted);
    }

    .chiffre__prefix,
    .chiffre__suffix {
        font-size: 0.5em;
        vertical-align: super;
    }

    /* Variante "grille" (champ ACF chiffres_disposition_grille) : sans
       séparateurs verticaux, texte aligné à gauche, chiffre à taille fixe
       60px -- cf. lovable/src/components/home/Numbers.tsx (prop grid=true),
       utilisée sur "Pourquoi Naturéa" (nombre_de_colonnes=3).
       Le NOMBRE de colonnes n'est volontairement pas fixé ici : ce bloc ne
       pilote que l'habillage visuel (ligne vs grille). Les colonnes réelles
       viennent du mécanisme générique .grid_layout.nb_cols_N (défini dans
       css/base/container.css, piloté par le champ ACF "Nombre de colonnes"
       / $layout_class), déjà présent sur le même élément .chiffres -- ne
       jamais réintroduire de grid-template-columns codé en dur ici (bug
       corrigé : ça empêchait nb_cols_N de s'appliquer). */
    /* Légende optionnelle sous la grille (champ chiffres_legende) -- cf.
       lovable/src/components/home/Numbers.tsx, prop "caption" (mode grid). */
    .chiffres__legende {
        margin: 32px 0 0;
        text-align: center;
        font-size: 14px;
        line-height: 1.4;
        color: var(--color-secondary-muted);
        opacity: .6;
    }

    .chiffres--grid {
        display: grid;
        /* gap: 32px; */
        text-align: left;

        /* @media (min-width: 992px) {
            gap: 24px;
        } */

        .chiffre {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding-left: 0;

            &::before {
                display: none;
            }
        }

        .top {
            align-items: flex-start;
            font-size: 60px;
        }
    }
}