/* ═══════════════════════════════════════════════════════════
   COMPONENT — kpi-row
   Bande KPI canonique posée sous le header de chaque page de
   module. 4 à 5 cards uniformes maximum. Toutes les cards ont
   la même hauteur, le même padding, la même typo.
   ───────────────────────────────────────────────────────────
   RÈGLE STRICTE (gravée 2026-05-10 par Maxime) :
   - **Tous les chiffres en NOIR**. Lato 900.
   - **Pas d'italique Lora**. Pas de variante éditoriale.
   - **Pas de couleur sémantique sur le chiffre**. Ni vert, ni
     rouge, ni jaune, ni navy.
   - Le vert et le rouge sont RÉSERVÉS aux pills d'action
     (composant .row-actions — Go/No-go dans les tableaux).
   ───────────────────────────────────────────────────────────
   Pourquoi : éviter que la bande KPI parte en mosaïque de
   couleurs (anti-Commercial actuel à 7 KPI colorés). Garder
   le vert et le rouge pour les rares moments où une décision
   est demandée à l'utilisateur. Hiérarchie de l'œil : un seul
   « point chaud » par écran.
   ───────────────────────────────────────────────────────────
   HTML attendu :
     <div class="kpi-row">
       <article class="kpi-card">
         <span class="kpi-card__label">LABEL</span>
         <span class="kpi-card__value">VALEUR</span>
         <span class="kpi-card__hint">sous-titre</span>
       </article>
       ...
     </div>
   ───────────────────────────────────────────────────────────
   Seul modificateur autorisé : .is-zero
   → atténue le chiffre à 35 % d'opacité quand la valeur est 0.
   Évite qu'un « 0 » attire l'œil alors qu'il n'y a rien à
   signaler. Ne change PAS la couleur, juste l'opacité.
   ───────────────────────────────────────────────────────────
   Tokens : --soma-card, --soma-r-lg, --soma-sh-xs, --soma-text,
            --soma-muted, --soma-font-body, --soma-text-sm,
            --soma-text-md, --soma-weight-*, --soma-s-*
   ═══════════════════════════════════════════════════════════ */

.kpi-row {
  /* Token local : taille du chiffre KPI hero.
     48px > --soma-text-4xl (36px) mais nécessaire pour la
     hiérarchie visuelle d'une bande KPI principale. Encapsulé
     ici pour ne pas polluer le global. */
  --kpi-value-size: 48px;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--soma-s-7);
  margin: var(--soma-s-9) 0;
}

.kpi-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--soma-s-3);
  padding: var(--soma-s-9) var(--soma-s-8);
  background: var(--soma-card);
  border-radius: var(--soma-r-lg);
  box-shadow: var(--soma-sh-xs);
  min-height: 156px;
}

.kpi-card__label {
  color: var(--soma-muted);
  font-family: var(--soma-font-body);
  font-size: var(--soma-text-sm);
  font-weight: var(--soma-weight-bold);
  letter-spacing: 0.8px;
  line-height: 1;
  text-transform: uppercase;
}

.kpi-card__value {
  color: var(--soma-text);             /* TOUJOURS noir, jamais de variante couleur */
  font-family: var(--soma-font-body);   /* TOUJOURS Lato, jamais Lora italic */
  font-size: var(--kpi-value-size);
  font-weight: var(--soma-weight-black);
  letter-spacing: -1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.kpi-card__hint {
  color: var(--soma-muted);
  font-family: var(--soma-font-body);
  font-size: var(--soma-text-md);
  font-weight: var(--soma-weight-regular);
  line-height: 1.4;
}

/* ── Seul modificateur autorisé : .is-zero ───────────────── */
/* Atténue le chiffre quand la valeur est 0. Ne le colore pas. */

.kpi-card.is-zero .kpi-card__value {
  opacity: 0.35;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 720px) {
  .kpi-row {
    --kpi-value-size: 36px;
    gap: var(--soma-s-5);
  }
  .kpi-card {
    min-height: 120px;
    padding: var(--soma-s-7);
  }
}