/**
 * Bloc apropos_chiffres — présentation courte + chiffres clés
 *
 * Contenu : 1. Mise en page  2. Texte  3. Chiffres  4. Responsive
 *
 * Nombre de chiffres libre (1 à 4 conseillés). Les chiffres sont présentés comme
 * les mentions d'une étiquette de sachet (valeur en grand, libellé en mono dessous).
 */

/* 1. Mise en page ---------------------------------------------------------- */
.apropos-chiffres__inner {
    display: grid; gap: var(--space-xl);
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center;
}

/* 2. Texte ----------------------------------------------------------------- */
.apropos-chiffres__text { display: grid; gap: var(--space-md); justify-items: start; }
.apropos-chiffres__text .body-lg { max-width: 34rem; }
.apropos-chiffres__lead { max-width: 14ch; }
/* R20 : rôle à l'Agence K2 — en capitales mono, comme les surtitres */
.apropos-chiffres__role {
    font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--color-text-muted);
}
.apropos-chiffres__role a {
    color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-primary);
    text-underline-offset: 4px; padding-block: 0.75rem; /* cible tactile ≥ 44 px */
}
@media (hover: hover) {
    .apropos-chiffres__role a:hover { color: var(--color-primary); }
}

/* 3. Chiffres -------------------------------------------------------------- */
.apropos-chiffres__stats { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--color-text); }
/* dt avant dd dans le HTML (sémantique), valeur affichée au-dessus */
.apropos-chiffres__stat {
    display: flex; flex-direction: column-reverse; gap: var(--space-2xs);
    padding-block: var(--space-md); border-bottom: 1px solid var(--color-text);
}
.apropos-chiffres__stat dd {
    margin: 0; font-family: var(--font-display); font-size: var(--fs-stat); font-weight: 600;
    line-height: 0.9; letter-spacing: -0.03em; color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}
.apropos-chiffres__stat dt {
    font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--color-text-muted);
}

/* 4. Responsive ------------------------------------------------------------ */
@media (max-width: 1024px) {
    .apropos-chiffres__inner { grid-template-columns: 1fr; }
    .apropos-chiffres__stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); column-gap: var(--space-lg); }
}