/* docs/DESIGN.md #8.4 — fil d'étapes d'une réservation. */
@layer components {
  .steps {
    display: flex;
    gap: var(--space-3);
  }

  .steps__step {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .steps__bar {
    height: .5rem;
    background: var(--cream-deep);
  }

  .steps__step--done .steps__bar {
    background: var(--forest);
  }

  .steps__step--current .steps__bar {
    background: var(--cream);
    border: 2px solid var(--forest);
  }

  .steps__name {
    font-size: .8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-align: center;
  }
}