/* ============================================================
   TULIPE PALETTES - STEPPER DU TUNNEL DE COMMANDE (4 étapes)
   Composant unique pour panier / coordonnées et paiement / vérification / confirmation.
   États : --done (lien de retour), --active (aria-current="step"), à venir.
   Modificateur de l'étape courante sur la racine : .stepper--step-1|2|3|4
   (alimente la piste de progression affichée en mobile).
   Variables locales scopées à .stepper (jamais sur :root).
   ============================================================ */
.stepper { --st-track: 25%; width: 100%; }
.stepper--step-2 { --st-track: 50%; }
.stepper--step-3 { --st-track: 75%; }
.stepper--step-4 { --st-track: 100%; }

.stepper__list { display: flex; align-items: center; width: 100%; }
.stepper__item { display: flex; align-items: center; gap: 8px; flex-shrink: 0; color: var(--color-text-muted); }
/* Trait de liaison entre deux étapes */
.stepper__item:not(:last-child)::after { content: ""; display: block; flex-grow: 1; height: 1px; min-width: 24px; margin: 0 12px; background: var(--color-border); }
.stepper__item:not(:last-child) { flex-grow: 1; }

.stepper__index {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 26px; height: 26px; border: 1.5px solid var(--color-border-field); border-radius: 50%;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1; color: var(--color-text-muted); background: var(--color-paper);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.stepper__label { font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; padding-block: 5px 3px; border-bottom: 2px solid transparent; }
.stepper__link { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; border-radius: var(--r-control); }
.stepper__link:hover .stepper__label { border-bottom-color: currentColor; }
.stepper__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* Étape courante */
.stepper__item--active { color: var(--color-ink); }
.stepper__item--active .stepper__index { background: var(--color-ember); border-color: var(--color-ember); color: var(--color-paper); }
.stepper__item--active .stepper__label { font-weight: 600; border-bottom-color: var(--color-ember); }

/* Étape terminée : pastille verte avec coche (le chiffre reste dans le DOM, masqué visuellement par la coche) */
.stepper__item--done { color: var(--color-ink); }
.stepper__item--done .stepper__index { background: var(--color-forest); border-color: var(--color-forest); color: var(--color-paper); }
.stepper__item--done::after { background: var(--color-forest); }
.stepper__index svg { display: block; width: 14px; height: 14px; }

/* ---------- Mobile : seule l'étape courante reste lisible + piste de progression ---------- */
@media (max-width: 768px) {
  .stepper { display: flex; flex-direction: column; gap: 12px; }
  .stepper__item:not(.stepper__item--active) { display: none; }
  .stepper__item--active:not(:last-child)::after { display: none; }
  /* Pas de soulignement sous le libellé : la piste de progression juste en dessous dit déjà
     « où j'en suis » (double trait sinon). Le padding asymétrique (5px / 3px) ne servait qu'à loger ce trait :
     sans lui, le libellé se centre exactement sur la pastille numérotée. */
  .stepper__item .stepper__label { font-size: var(--fs-base); padding-block: 0; border-bottom: 0; }
  .stepper::after {
    content: ""; display: block; height: 4px; border-radius: var(--r-badge); background-color: var(--color-border);
    background-image: linear-gradient(var(--color-ember), var(--color-ember)); background-repeat: no-repeat;
    background-size: var(--st-track) 100%;
  }
}