/* =============================================================
   Socle · Progression (.sc-progress)
   Piste + barre. Le HTML porte role="progressbar" et
   aria-valuenow/min/max ; la largeur de la barre est posée en
   style inline (width: 64%).
   Variantes : --success, --warning, --danger (défaut : accent)
   Taille : --s · Mode : --indeterminate
   En-tête optionnel hors piste : .sc-progress-header
   ============================================================= */

.sc-progress {
  /* Tokens de composant : les variantes ne font que réassigner ceci. */
  --_progress-height: var(--space-8);
  /* La piste est une gouttière : elle contient la barre au lieu de la
     remplacer, et doit se lire à 0 % comme à 100 % sur n'importe quelle
     surface hôte. Pas --color-bg-subtle, qui partage sa primitive avec
     --color-bg-hover : la gouttière s'effacerait sur un fond déjà adouci.
     D'où le cran suivant. Le squelette, lui, remplace un contenu au lieu
     de le contenir, et prend bien le gris adouci. */
  --_progress-track: var(--color-bg-active);
  --_progress-bar: var(--color-accent);
  /* Durée d'un aller du mode indéterminé. Ce que la progression partage
     avec le squelette est le rythme, rien d'autre : deux attentes
     affichées ensemble battent ensemble, mais leurs gris disent deux
     choses différentes. */
  --_progress-cycle: var(--motion-duration-loop);

  width: 100%;
  height: var(--_progress-height);
  background: var(--_progress-track);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.sc-progress__bar {
  height: 100%;
  background: var(--_progress-bar);
  border-radius: var(--radius-pill);
  transition: width var(--motion-slow);
}

/* ---- Variantes de statut ---- */

.sc-progress--success {
  --_progress-bar: var(--color-success);
}

.sc-progress--warning {
  --_progress-bar: var(--color-warning);
}

.sc-progress--danger {
  --_progress-bar: var(--color-danger);
}

/* ---- Taille ---- */

.sc-progress--s {
  --_progress-height: var(--space-4);
}

/* ---- Indéterminée ----
   Barre à 40 % en va-et-vient dans la piste. En HTML : retirer
   aria-valuenow et garder un aria-label explicite. */

.sc-progress--indeterminate .sc-progress__bar {
  width: 40%;
  transition: none;
  animation: sc-progress-shuttle var(--_progress-cycle) var(--motion-ease-loop) infinite alternate;
}

@keyframes sc-progress-shuttle {
  from {
    transform: translateX(0);
  }
  to {
    /* 150 % de sa propre largeur : la barre vient buter à droite. */
    transform: translateX(150%);
  }
}

/* ---- En-tête optionnel (libellé + valeur, hors piste) ---- */

.sc-progress-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-s);
  margin-block-end: var(--gap-xs);
  font-family: var(--font-body);
  font-size: var(--text-caption-size);
  line-height: var(--leading-snug);
}

.sc-progress-header__label {
  color: var(--color-text-secondary);
  font-weight: var(--text-label-weight);
}

.sc-progress-header__value {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}