/* Écran Réservation : mise en page (bandeau, indicateur d'étapes, colonne « Votre séjour »). Spec : 03-SPEC-reservation.md sections 2 et 3.
   Valeurs : jetons seulement (tokens.css). Dérivés locaux construits sur des jetons, jamais une valeur brute. */

.reservation {
  --reservation-coche: calc(var(--cible) - var(--e1));
  --reservation-coche-grande: var(--cercle-coche);
  --reservation-ligne-resume: calc(var(--champ-h) + var(--e3));
  --reservation-signature-retrait: calc(var(--e3) + var(--e2)); /* la ligne de signature part à 24 unités du bord du dessin */
  padding-block-end: var(--e7);
}

.exemple {
  display: inline-block;
  padding-inline: var(--e2);
  background: var(--attention-pale);
  color: var(--attention);
  border: var(--trait) solid var(--attention);
  border-radius: var(--rayon-s);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.sourdine { color: var(--sourdine); }

/* Bandeau de page */
.bandeau { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3); padding-block: var(--e3); }
.bandeau__titre { font-size: var(--t-h3); line-height: 1.2; }
.bandeau__sejour { margin-block-start: var(--e2); color: var(--sourdine); font-variant-numeric: tabular-nums; }

/* Grille : 8 colonnes de parcours, 4 colonnes de séjour (12 colonnes, gouttière du conteneur) */
.page {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  grid-template-rows: auto 1fr;
  row-gap: var(--e4);
  align-items: start;
}
.parcours { grid-column: 1 / span 8; grid-row: 1; }
.cartes { grid-column: 1 / span 8; grid-row: 2; display: grid; gap: var(--e4); min-inline-size: 0; }
.sejour { grid-column: 9 / span 4; grid-row: 1 / span 2; position: sticky; inset-block-start: calc(var(--entete-h) + var(--e4)); }

/* Indicateur d'étapes */
.parcours { display: flex; align-items: center; min-block-size: var(--socle-h); margin: 0; padding: 0; list-style: none; }
.etape { position: relative; display: flex; align-items: center; gap: var(--e2); }
.etape:not(:last-child) { flex: 1; }
.etape:not(:last-child)::after { content: ""; flex: 1; block-size: var(--trait); margin-inline: var(--e3); background: var(--filet-fort); }
.etape__libelle { font-weight: 600; color: var(--sourdine); }
.etape[data-statut="terminee"] .etape__libelle, .etape[data-statut="en-cours"] .etape__libelle { color: var(--encre); }
.etape__pastille, .pastille {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--taille-picto);
  block-size: var(--taille-picto);
  border: var(--trait-champ) solid var(--filet-fort);
  border-radius: 50%;
  background: var(--surface);
  color: var(--sourdine);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1;
}
.coche { display: none; inline-size: var(--icone-m); block-size: var(--icone-m); }
.coche path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.etape[data-statut="en-cours"] .etape__pastille { background: var(--dominante); border-color: var(--dominante); color: var(--surface); }
.etape[data-statut="terminee"] .etape__pastille { background: var(--dominante); border-color: var(--dominante); color: var(--surface); }
.etape[data-statut="terminee"] .etape__numero { display: none; }
.etape[data-statut="terminee"] .coche { display: block; }

/* Colonne « Votre séjour » */
.sejour { background: var(--surface); border: var(--filet-trait); border-radius: var(--rayon-m); padding: var(--e4); }
.sejour__resume { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2); list-style: none; cursor: default; }
.sejour__resume::-webkit-details-marker { display: none; }
.sejour__titre { font-family: var(--police-texte); font-size: var(--t-h4); font-weight: 600; line-height: 1.3; }
.sejour__resume-total { display: none; font-weight: 600; }
.sejour__corps { display: grid; gap: var(--e3); margin-block-start: var(--e3); }
.sejour__villa { display: flex; align-items: center; gap: var(--e3); }
.sejour__nom { font-family: var(--police-titre); font-weight: 500; font-size: var(--t-h3); line-height: 1.2; }
.sejour__dates { display: grid; gap: var(--e2); }
.sejour__dates dt { font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--sourdine); }
.sejour__dates dd { display: grid; font-variant-numeric: tabular-nums; }
/* Repère de temps : un point d'accent en fin de la ligne de la date d'arrivée et de départ, nulle part ailleurs (DESIGN.md §2, liste fermée n° 2) */
.sejour__dates .sejour__jour dd > :first-child::after { content: ""; display: inline-block; inline-size: var(--e2); block-size: var(--e2); margin-inline-start: var(--e2); vertical-align: middle; border-radius: 50%; background: var(--accent); }
.sejour__heure { font-size: var(--t-micro); color: var(--sourdine); }
.lignes { display: grid; margin: 0; }
.lignes > div { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); min-block-size: var(--ligne-devis); padding-block: var(--e2); border-block-end: var(--filet-trait); }
.lignes dt { display: grid; }
.lignes dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lignes__detail { font-size: var(--t-micro); color: var(--sourdine); }
.total {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2);
  min-block-size: var(--ligne-devis);
  padding-inline: var(--e3);
  background: var(--dominante-douce);
  border-radius: var(--rayon-s);
  font-size: var(--t-total);
  font-weight: 600;
}
.total__libelle { margin-inline-end: auto; }
.total__montant { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sejour__note { font-size: var(--t-micro); color: var(--sourdine); }

@media (max-width: 759px) {
  .bandeau { flex-direction: column; padding-block: var(--e4); }
  .bandeau .badge { display: flex; inline-size: 100%; justify-content: center; }
  .page { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .parcours, .cartes, .sejour { grid-column: 1; grid-row: auto; }
  .sejour { position: static; }
  .parcours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .etape, .etape:not(:last-child) { flex-direction: column; gap: var(--e1); }
  .etape:not(:last-child)::after {
    position: absolute;
    inset-block-start: calc(var(--taille-picto) / 2);
    inset-inline-start: calc(50% + var(--taille-picto) / 2 + var(--e1));
    inline-size: calc(100% - var(--taille-picto) - var(--e2));
    margin: 0;
  }
  .etape__libelle { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--ls-micro); }
  .sejour__resume { min-block-size: var(--champ-h); align-items: center; cursor: pointer; }
  .sejour__resume-total { display: inline-flex; align-items: center; gap: var(--e2); }
  html[data-etat="confirme"] .sejour { order: 1; }
}