/*
 * Section Chiffres clés — Figma node 2644:67485.
 *
 * Cadrage de la maquette : panneau sur toute la largeur du conteneur (1792), padding
 * vertical 96px, gap 64px entre en-tête, chiffres et bouton. En-tête bridé à 888px,
 * rangée de chiffres à 1490px (largeur de contenu) avec des blocs de 288px répartis par
 * justify-between.
 */

.section-key-figures {
    padding-block: var(--section-space);
}

.section-key-figures__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-hero);
    /* min() plutôt que max-width + padding : combinés, le panneau ne faisait que
       1792 - 128 = 1664 au lieu de la largeur pleine du conteneur de la maquette. */
    width: min(var(--container-max-width), 100% - 2 * var(--container-gutter));
    margin-inline: auto;
    /* Le padding horizontal ne sert que sur écran étroit : à pleine largeur, la rangée de
       chiffres (1490) est déjà en retrait de 151 dans le panneau (1792), donc il ne change
       rien au rendu de la maquette — il empêche seulement le contenu de toucher les bords
       quand le panneau se réduit. */
    padding: var(--space-big-hero) var(--space-bloc);
    border-radius: var(--radius-xxs);
    background-color: var(--color-primary);
}

/* ---- En-tête ---- */

.section-key-figures__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-list);
    /* 888px dans la maquette : une ligne d'intro reste lisible, on ne l'étale pas sur
       toute la largeur du panneau. */
    max-width: 888px;
    text-align: center;
}

.section-key-figures__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2);
    font-weight: 700;
    /* 61px sur 49px */
    line-height: 1.245;
    color: var(--color-primary-50);
}

.section-key-figures__intro {
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-neutral-50);
}

/* ---- Chiffres ---- */

.section-key-figures__list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    /* justify-between reproduit la répartition de la maquette : 4 blocs de 288 étalés sur
       1490, soit ~113px d'écart. Le gap ne sert donc qu'aux rangées supplémentaires si le
       nombre de chiffres augmentait un jour au-delà de ce que la maquette prévoit. */
    justify-content: space-between;
    gap: var(--space-xl) var(--space-bloc);
    width: 100%;
    max-width: var(--container-content-width);
    margin: 0;
}

.section-key-figures__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Largeur de la maquette, sans grandir : c'est l'écart entre blocs qui absorbe la
       largeur restante, pas les blocs eux-mêmes. */
    flex: 0 1 288px;
    min-width: 0;
}

.section-key-figures__value {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h3);
    font-weight: 700;
    /* 51px sur 39px */
    line-height: 1.308;
    color: var(--color-primary-50);
}

.section-key-figures__label {
    /* dd porte une marge gauche par défaut dans les navigateurs, à neutraliser. */
    margin: 0;
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-neutral-50);
}

/*
 * Deux ou trois chiffres : justify-between les collerait aux extrémités du panneau, avec
 * un vide au milieu qui n'a rien à voir avec l'intention de la maquette. On les centre
 * avec un écart régulier à la place.
 */
.section-key-figures__list--2,
.section-key-figures__list--3 {
    justify-content: center;
    gap: var(--space-xl) var(--space-big-hero);
}

/* ---- Adaptations ---- */

@media (max-width: 1200px) {
    .section-key-figures {
        --container-gutter: var(--space-bloc);
    }

    .section-key-figures__panel {
        gap: var(--space-xl);
        padding-block: var(--space-large);
    }

    /* Les blocs ne tiennent plus à quatre : deux par rangée, écart régulier. */
    .section-key-figures__list,
    .section-key-figures__list--2,
    .section-key-figures__list--3 {
        justify-content: flex-start;
        gap: var(--space-xl) var(--space-bloc);
    }

    .section-key-figures__item {
        flex: 1 1 240px;
    }
}

@media (max-width: 768px) {
    .section-key-figures {
        --container-gutter: var(--space-m);
        padding-block: var(--section-space);
    }

    .section-key-figures__panel {
        padding-block: var(--space-xl);
    }

    .section-key-figures__item {
        flex-basis: 100%;
    }
}