/* ==========================================================
   Étapes (Ipedis)
   Fond transparent, fonds de page clairs uniquement.
   Container queries : s'adapte à la largeur de la colonne.
   ========================================================== */

.etapes-wrap {
  container-type: inline-size;
  container-name: etapes;
}

.etapes {
  --et-bleu: #001730;
  --et-beige: #FFFDED;
  --et-jaune: #FFCC02;
  --et-mauve: #E6D4FF;
  --et-ciel: #B9E9FF;
  --et-description: rgba(0, 23, 48, 0.8);   /* 80 % : ne pas descendre en dessous */
  --et-sep: rgba(0, 23, 48, 0.18);
  --et-police: "Urbanist", system-ui, sans-serif;

  display: grid;
  grid-template-columns: max-content 1fr;   /* pastilles alignées sur la plus large */
  align-content: start;                     /* les lignes ne s'étirent jamais */
  column-gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent;
  color: var(--et-bleu);
  font-family: var(--et-police);
}

.etapes .etapes__item {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: start;
  margin: 0;
  padding: 24px 0;
  min-height: 0;
}
.etapes--separateurs .etapes__item { border-bottom: 1px solid var(--et-sep); }

/* ---------- Pastille ---------- */
.etapes__pastille {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--et-jaune);
  color: var(--et-bleu);
  font: 500 20px/1 var(--et-police);
  white-space: nowrap;
}
.etapes__pastille--jaune { background: var(--et-jaune); }
.etapes__pastille--mauve { background: var(--et-mauve); }
.etapes__pastille--ciel  { background: var(--et-ciel); }
.etapes__pastille--bleu  { background: var(--et-bleu); color: var(--et-beige); }

/* ---------- Contenu ---------- */
.etapes__contenu { grid-column: 2; min-width: 0; }

.etapes .etapes__titre {
  margin: 0;
  color: var(--et-bleu);
  font: 600 24px/32px var(--et-police);   /* hauteur de ligne = hauteur de pastille */
  letter-spacing: 0;
  text-transform: none;
}

.etapes .etapes__description {
  margin-top: 8px;
  color: var(--et-description);
  font: 500 16px/1.5 var(--et-police);
}
.etapes .etapes__description > * { margin: 0 0 8px; }
.etapes .etapes__description > *:last-child { margin-bottom: 0; }
.etapes .etapes__description p:empty { display: none; }
.etapes .etapes__description ul,
.etapes .etapes__description ol { padding-left: 20px; }
.etapes .etapes__description a {
  color: var(--et-bleu);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.etapes .etapes__description a:focus-visible {
  outline: 3px solid var(--et-bleu);
  outline-offset: 3px;
}

/* Texte masqué visuellement (pastille lue avec le titre) */
.etapes .etapes__sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Navigateurs sans subgrid */
@supports not (grid-template-columns: subgrid) {
  .etapes { display: block; }
  .etapes .etapes__item { display: flex; gap: 16px; }
}

/* ---------- Colonne étroite (< 420 px) ---------- */
@container etapes (max-width: 419.98px) {
  .etapes { column-gap: 12px; }
  .etapes .etapes__item { padding: 20px 0; }
  .etapes__pastille { min-width: 28px; height: 28px; font-size: 18px; }
  .etapes .etapes__titre { font-size: 20px; line-height: 28px; }

  /* Chaque étape garde sa propre largeur de pastille */
  .etapes { display: block; }
  .etapes .etapes__item { display: flex; gap: 12px; }

  /* Texte libre (horaires) : pastille au-dessus du titre */
  .etapes--libre .etapes__item { flex-direction: column; gap: 8px; }
}

/* ---------- Contraste forcé (Windows) ---------- */
@media (forced-colors: active) {
  .etapes__pastille { border: 1px solid CanvasText; }
  .etapes--separateurs .etapes__item { border-bottom-color: CanvasText; }
}