/* Velyx Management — styles des pages Statistiques et Performances (variables et classes du socle uniquement). */

/* Capacité estimée : chiffre clé + jauges « budget » (barre fine, couleur selon le remplissage). */
.perf-cap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.perf-cap-num { display: grid; gap: 2px; min-width: 120px; }
.perf-cap-num b { font-size: 30px; font-weight: 800; color: var(--inv-ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.perf-cap-num span { font-size: 12px; }
.perf-gauges { display: grid; gap: 12px; padding: 4px 16px 16px; }
.perf-gauge { display: grid; gap: 6px; }
.perf-gauge-top { display: flex; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 600; color: var(--inv-ink-2); }
.perf-gauge-top b { margin-left: auto; color: var(--inv-ink); font-variant-numeric: tabular-nums; }
.perf-gauge-track { height: 6px; background: var(--inv-gauge); overflow: hidden; }
.perf-gauge-track i { display: block; height: 100%; animation: bar-grow .6s var(--v-ease) both; transform-origin: left; transition: width .4s var(--v-ease); }
.page.quiet .perf-gauge-track i { animation: none; }

@media (max-width: 640px) {
  .perf-cap { grid-template-columns: 1fr; }
}