@charset "utf-8";
/* ─── Essai design du 26/09 : barre d'étapes nommées (Romain) ───
   Cinq segments sous le logo : fait (encre), en cours (citron), à venir (gris clair). Le libellé suit la même couleur.
   Pour revenir en arrière : retirer progress.css et progress.js de index.html (branche essai-design). */
.pg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;width:100%;max-width:620px;margin:0 0 4px}
.pg[hidden]{display:none}
.pg-s{display:flex;flex-direction:column;gap:8px;min-width:0}
.pg-s i{display:block;height:3px;border-radius:3px;background:var(--light);transition:background .35s ease}
/* 29/09 (Romain) : le libellé passe dans la police de la page, plus dans la police à chasse fixe */
.pg-s b{font-family:var(--font);font-size:12px;font-weight:500;letter-spacing:0;color:var(--grey-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .35s ease}
/* 28/09 (Romain) : plus discret, tout en gris. Fait : gris clair ; en cours : gris foncé, plus de citron ; à venir : très clair. */
.pg-s.done i{background:var(--grey-2)}
.pg-s.done b{color:var(--grey)}
.pg-s.on i{background:var(--grey)}
.pg-s.on b{color:var(--black);font-weight:600}
@media (max-width:600px){.pg{gap:6px;margin:4px 0 12px}.pg-s b{font-size:10px;letter-spacing:0}}
@media (prefers-reduced-motion:reduce){.pg-s i,.pg-s b{transition:none}}