/* Écran Réservation : la carte de confirmation (DESIGN.md « Carte de confirmation avec coche »). Visible à l'état « confirme » seulement. */

.confirmation {
  position: relative;
  display: none;
  padding: var(--e5);
  background: var(--surface);
  border: var(--trait) solid var(--succes);
  border-radius: var(--rayon-l);
}
html[data-etat="confirme"] .confirmation { display: block; }
.confirmation__badge { position: absolute; inset-block-start: var(--e4); inset-inline-end: var(--e4); }

.confirmation__coche {
  display: grid;
  place-items: center;
  inline-size: var(--cercle-coche);
  block-size: var(--cercle-coche);
  border: var(--trait-fort) solid var(--succes);
  border-radius: 50%;
  color: var(--succes);
}
.confirmation__coche .coche { display: block; inline-size: calc(var(--cercle-coche) / 2); block-size: calc(var(--cercle-coche) / 2); }
.confirmation__titre { margin-block: var(--e4) var(--e2); font-size: var(--t-h3); line-height: 1.2; }
.confirmation__sous { color: var(--sourdine); }

.recap { display: grid; margin: var(--e4) 0 0; }
.recap li { display: flex; align-items: center; gap: var(--e3); min-block-size: var(--ligne-devis); border-block-end: var(--filet-trait); font-weight: 600; }
.recap__coche { display: grid; place-items: center; flex: none; inline-size: var(--case); block-size: var(--case); border-radius: 50%; background: var(--succes); color: var(--surface); }
.recap__coche .coche { display: block; inline-size: var(--icone-s); block-size: var(--icone-s); }

.confirmation__bloc { margin-block-start: var(--e5); }
.confirmation__sous-titre { margin-block-end: var(--e2); font-family: var(--police-texte); font-size: var(--t-h4); font-weight: 600; line-height: 1.3; }

.etapes { display: grid; gap: var(--e3); margin: var(--e3) 0 0; padding: 0; list-style: none; counter-reset: etape; }
.etapes li { display: grid; grid-template-columns: var(--case) minmax(0, 72ch); align-items: start; column-gap: var(--e3); font-variant-numeric: tabular-nums; counter-increment: etape; text-wrap: pretty; }
.etapes li::before {
  content: counter(etape);
  display: grid;
  place-items: center;
  inline-size: var(--case);
  block-size: var(--case);
  border: var(--trait-champ) solid var(--dominante);
  border-radius: 50%;
  color: var(--dominante);
  font-size: var(--t-micro);
  font-weight: 600;
}

.confirmation__pied { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e3); margin-block-start: var(--e5); }
.confirmation__revoir { display: inline-flex; align-items: center; min-block-size: var(--cible); padding-inline: var(--e2); color: var(--sourdine); font-size: var(--t-corps); }

@media (max-width: 759px) {
  .confirmation { padding: var(--e4); }
  .confirmation__badge { position: static; display: flex; justify-content: center; margin-block-end: var(--e3); }
  .confirmation__pied .btn { inline-size: 100%; }
  .confirmation__revoir { margin-inline: auto; }
}