/* ==========================================================================
   Stash & Go — Tunnel de réservation
   Valeurs extraites des frames Figma « Réservation 1/2/5/4 » et « Réservation »
   (fileKey QDn1rzdp3zrrgTofUPGBEy — 136:2406, 136:2751, 139:2044, 136:3138,
   136:3431 — 1440 × 1711).
   À charger APRÈS components.css et AVANT responsive.css.
   ========================================================================== */

:root {
  /* Couleurs propres au tunnel */
  --c-bg-resa:        #F6F6FE;  /* fond de page des frames Réservation */
  --c-input-border:   #E0E0E0;  /* champs date / heure                 */
  --c-card-border:    #E5E5FF;  /* cartes bagage & récapitulatif       */
  --c-icon-bg:        #F5F5FF;  /* pastille d'icône                    */
  --c-qty-border:     #F0F0FF;  /* boutons +/-                         */
  --c-round-border:   #F4F4F4;  /* pastille de quantité                */
  --c-desc:           #39465B;  /* description d'un bagage             */
  --c-ink-3:          #262626;  /* libellé de paiement sélectionné     */
  --c-radio-off:      #5D5D5D;  /* libellé de paiement non choisi      */
  --c-date-muted:     #6B7280;  /* dates du récapitulatif              */
  --c-marker-ink:     #37414F;  /* étiquette de marqueur inactive      */
  --c-info:           #313842;  /* coordonnées du récapitulatif        */
  --c-map-ctrl:       #F5F5F5;  /* contour des boutons de la carte     */
  --c-qr-border:      #EBECF0;
  --c-qr-ref:         #454A53;

  --pill-price:       rgba(129, 140, 248, .07);
  --pill-modifier:    rgba(129, 140, 248, .06);
  --pill-login:       rgba(129, 140, 248, .05);
}

[hidden] { display: none !important; }

.page-reservation { background: var(--c-bg-resa); }

/* --------------------------------------------------------------------------
   Ossature de page  (contenu à y = 193 sous l'en-tête flottant)
   -------------------------------------------------------------------------- */
.resa {
  padding-top: 193px;
  padding-bottom: 128px;
}
.resa__tunnel {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* ---------- Titre de l'étape (Frame 50 — 792 px centré) ---------- */
.resa__head {
  width: 792px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.resa__head-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}
/* Le titre déborde du bloc de 792 px plutôt que de passer à la ligne : dans
   Figma il est en sizing HUG et atteint 845 px à l'étape 4 (« Vérifiez les
   détails de votre réservation »). Le bloc étant centré, le débordement est
   symétrique. Plafonné à la largeur du conteneur ; au-delà, le titre revient
   à la ligne comme n'importe quel texte. */
.resa__title {
  width: max-content;
  max-width: 1200px;
  font-family: var(--f-display);
  font-size: var(--t-h2);
  line-height: var(--t-h2-lh);
  font-weight: 800;
  color: var(--c-ink);
}
/* Comme le titre, le chapô est en sizing HUG dans Figma et déborde du bloc de
   792 px : 807 px à l'étape 1, 726 à la 2, 673 à la 3. À l'étape 4 il remplit
   les 846 px du bloc de titre et passe sur deux lignes — d'où le plafond à
   846 px, qui reproduit exactement cette césure. */
.resa__lead {
  width: max-content;
  max-width: 846px;
  font-family: var(--f-body);
  font-size: var(--t-lead);
  line-height: var(--t-lead-lh);
  font-weight: 400;
  color: var(--c-body);
}

/* --------------------------------------------------------------------------
   Fil des étapes  (4 × 288 px, gouttière 16 px)
   -------------------------------------------------------------------------- */
.stepper {
  display: flex;
  gap: 16px;
  list-style: none;
}
.stepper__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  opacity: .32;
  transition: opacity var(--dur) var(--ease);
}
.stepper__item.is-current,
.stepper__item.is-done { opacity: 1; }

.stepper__bar {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--c-primary);
}
.stepper__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stepper__dot {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: var(--c-indigo-300);
  display: grid;
  place-items: center;
}
.stepper__dot::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-white);
}
.stepper__dot img { display: none; }
.stepper__item.is-done .stepper__dot::after { display: none; }
.stepper__item.is-done .stepper__dot img { display: block; }

.stepper__label {
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 22.5px;
  font-weight: 500;
  color: var(--c-ink);
  white-space: nowrap;
}
.stepper__item.is-current .stepper__label,
.stepper__item.is-done .stepper__label { font-weight: 600; }

/* --------------------------------------------------------------------------
   Grille principale : panneau 777 + récapitulatif 391 (gouttière 32)
   -------------------------------------------------------------------------- */
.resa__grid {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}
.resa__panels { flex: 0 0 777px; width: 777px; }

.resa-card {
  background: var(--c-white);
  border-radius: 44px;
  padding: 40px;
}
.resa-card__body {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.resa-card__contenu {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ---------- Blocs de titre ---------- */
.resa-block { display: flex; flex-direction: column; gap: 24px; }
.resa-block--32 { gap: 32px; }
.resa-block__head { display: flex; flex-direction: column; gap: 10px; }
.resa-block__title {
  font-family: var(--f-display);
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  color: var(--c-ink);
}
.resa-block__text {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  color: var(--c-body);
}

/* --------------------------------------------------------------------------
   Champs de formulaire
   -------------------------------------------------------------------------- */
.resa-fields { display: flex; flex-direction: column; gap: 24px; }
.resa-fields--32 { gap: 32px; }

.resa-field { display: flex; flex-direction: column; gap: 12px; }
.resa-field__label {
  font-family: var(--f-display);
  font-size: 14px;
  line-height: 16.8px;
  font-weight: 500;
  color: var(--c-label);
}
.resa-field__row { display: flex; align-items: center; gap: 16px; }

.resa-input {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  border: .5px solid var(--c-input-border);
  border-radius: var(--r-pill);
  background: var(--c-white);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.resa-input:focus-within {
  border-color: var(--c-indigo-300);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, .16);
}
.resa-input--grow { flex: 1 1 auto; min-width: 0; }
.resa-input--time { flex: 0 0 154px; width: 154px; justify-content: center; }
.resa-input__icon { flex: 0 0 auto; }

.resa-input__control {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  background: none;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 16.8px;
  font-weight: 400;
  color: var(--c-body);
}
.resa-input__control:focus { outline: none; }
.resa-input__control::placeholder { color: var(--c-body); opacity: .65; }
.resa-input--time .resa-input__control { flex: 0 0 auto; width: auto; }

/* Champs date / heure : on masque le sélecteur natif et on rend
   toute la surface cliquable (l'icône Figma est déjà affichée à gauche). */
.resa-input__control[type="date"],
.resa-input__control[type="time"] { appearance: none; }
.resa-input__control::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.resa-input__control::-webkit-date-and-time-value { text-align: left; }

/* Heures : <select> à créneaux de 30 minutes, même habillage discret que
   les anciens champs time (l'icône horloge reste le repère visuel).
   color-scheme: light — sans lui, la LISTE NATIVE s'affiche en sombre sur
   les téléphones en mode sombre, en rupture avec le site (vu le
   2026-08-10 sur Android). */
select.resa-input__control {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  color-scheme: light;
}
/* Toute la pilule ouvre le menu : le select s'étire sur la hauteur et
   recouvre l'icône (marge négative = padding gauche 20 + icône 15 +
   gouttière 10), qui reste visible à travers son fond transparent. */
.resa-input--time select.resa-input__control {
  flex: 1 1 auto;
  align-self: stretch;
  margin-left: -45px;
  padding-left: 45px;
  margin-right: -20px;
  padding-right: 20px;
}
.resa-input__control[type="date"] { color-scheme: light; }

/* --------------------------------------------------------------------------
   Pilules de date (2026-08-25) — « Aujourd'hui / Demain / Autre date » pour
   le dépôt, « Même jour / Lendemain / Autre date » pour la récupération.
   Les libellés vivent dans le HTML de chaque langue, les dates sont posées
   par reservation.js (majPilules). La 3e pilule contient le <input type=date>
   natif, invisible mais étalé sur toute sa surface : la logique existante
   (créneaux, recalage, validation) continue de s'appuyer sur ce champ.
   -------------------------------------------------------------------------- */
.datepills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.datepill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  height: 44px;
  padding: 0 16px;
  border: .5px solid var(--c-input-border);
  border-radius: var(--r-pill);
  background: var(--c-white);
  font-family: var(--f-display);
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  color: var(--c-body);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
              color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.datepill__label,
.datepill__date { overflow: hidden; text-overflow: ellipsis; }
.datepill__date:empty { display: none; }
.datepill__date::before { content: "–\00a0"; }
.datepill:hover:not(:disabled):not(.is-active) {
  border-color: var(--c-indigo-300);
  background: var(--c-bg-ghost-4);
}
.datepill:focus-visible,
.datepill--autre:focus-within {
  outline: none;
  border-color: var(--c-indigo-300);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, .16);
}
.datepill.is-active {
  border-color: transparent;
  background: var(--grad-brand);
  color: var(--c-white);
  font-weight: 700;
  box-shadow: var(--sh-btn);
}
.datepill:disabled { opacity: .45; cursor: not-allowed; }
/* « Autre date » : icône calendrier à droite, en couleur courante (masque
   alpha du SVG — il passe en blanc sur la pilule active). Une fois une date
   choisie, la pilule affiche cette date à la place du libellé. */
.datepill--autre { padding-right: 44px; }
.datepill__icone {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  background: currentColor;
  -webkit-mask: url(/assets/icons/ui-calendrier.svg) center / contain no-repeat;
  mask: url(/assets/icons/ui-calendrier.svg) center / contain no-repeat;
  pointer-events: none;
}
.datepill--autre.is-active .datepill__label { display: none; }
.datepill--autre.is-active .datepill__date::before { content: none; }
.datepill__control {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: light;
  font-size: 16px; /* évite le zoom iOS à la prise de focus */
}
.datepill__control::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.datepills.is-error .datepill { border-color: #D93B3B; }
.datepills.is-error .datepill--autre { box-shadow: 0 0 0 3px rgba(217, 59, 59, .12); }

/* Ligne « remise partenaire » du récapitulatif : plus discrète que le
   total, en vert gain. */
.recap__remise { margin-bottom: 6px; }
.recap__remise .recap__total-label,
.recap__remise .recap__total-valeur { font-size: 14px; color: #12784A; }

/* Mention du fuseau sous les champs date/heure. */
.resa-fuseau {
  margin-top: 10px;
  font-family: var(--f-body);
  font-size: 12.5px;
  line-height: 17px;
  color: var(--c-body-2);
}


.resa-erreur {
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 20px;
  color: #D93B3B;
}
.resa-cgv {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--c-ink);
  cursor: pointer;
}
.resa-cgv input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--c-primary);
  cursor: pointer;
}
.resa-cgv a { color: var(--c-primary); text-decoration: underline; }
.resa-input.is-error { border-color: #D93B3B; box-shadow: 0 0 0 3px rgba(217, 59, 59, .12); }

/* --------------------------------------------------------------------------
   Étape 1 — cartes bagage
   -------------------------------------------------------------------------- */
.bagages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}
.bagage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px;
  border: .75px solid var(--c-card-border);
  border-radius: var(--r-24);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bagage.is-selected {
  border-color: var(--c-indigo-300);
  box-shadow: 0 3px 20px rgba(68, 76, 237, .06);
}
.bagage__info {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 0 0 auto;
}
.bagage__icone {
  flex: 0 0 66px;
  width: 66px;
  height: 66px;
  border-radius: var(--r-16);
  background: var(--c-icon-bg);
  display: grid;
  place-items: center;
}
.bagage__texte { display: flex; flex-direction: column; gap: 10px; }
.bagage__nom {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: var(--c-ink);
}
.bagage__desc {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--c-desc);
  white-space: nowrap;
}
.bagage__actions { display: flex; align-items: center; gap: 95px; }

.prix-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  background: var(--pill-price);
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--c-navy);
  white-space: nowrap;
}

.qte { display: flex; align-items: center; gap: 18px; }
.qte__btn {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  border: .47px solid var(--c-qty-border);
  background: var(--c-white);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.qte__btn:hover { background: var(--c-bg-ghost-4); }
.qte__btn:active { transform: scale(.94); }
.qte__btn[disabled] { opacity: .4; cursor: not-allowed; }
.qte__valeur {
  min-width: 10px;
  text-align: center;
  font-family: var(--f-body);
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: .4px;
  color: #2F2E41;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Barre d'actions (Figma : 686 px de large)
   -------------------------------------------------------------------------- */
.resa-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 686px;
  max-width: 100%;
}
.resa-actions__arrow {
  flex: 0 0 auto;
  width: 12px;
  height: 9px;
  transition: transform var(--dur) var(--ease-out);
}
.resa-actions__next { width: 226px; }
.resa-actions__next:hover .resa-actions__arrow { transform: translateX(3px); }
.resa-actions__back:hover .resa-actions__arrow { transform: translateX(-3px); }
.resa-actions__confirm { width: 294px; gap: 14px; }

/* --------------------------------------------------------------------------
   Récapitulatif latéral
   -------------------------------------------------------------------------- */
.recap {
  flex: 0 0 391px;
  width: 391px;
  border-radius: var(--r-32);
  overflow: hidden;
  position: sticky;
  top: 169px;
}

/* Colonne latérale : le récapitulatif et, dessous, la note « paiement
   sécurisé » (déplacée du panneau 3 le 2026-08-21). C'est la colonne qui
   est sticky, pour que les deux blocs défilent d'un seul tenant. */
.resa__cote {
  flex: 0 0 391px;
  width: 391px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 169px;
  align-self: flex-start;
}
.resa__cote .recap { flex: none; width: 100%; position: static; top: auto; }
/* Sous le récap, la note prend le même fond blanc que les autres blocs ;
   les pastilles d'icônes passent en teinte claire pour rester lisibles. */
.resa__cote .paiement__redirection { background: var(--c-white); }
.resa__cote .paiement-note__icone { background: var(--c-icon-bg); box-shadow: none; }
.recap__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 73px;
  padding: 24px;
  background: var(--c-indigo-300);
}
.recap__title {
  font-family: var(--f-display);
  font-size: 20px;
  line-height: 25px;
  font-weight: 700;
  color: var(--c-white);
}
.recap__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 30px 24px 24px;
  background: var(--c-white);
}
.recap__items { display: flex; flex-direction: column; gap: 16px; list-style: none; }
.recap__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 44px;
}
.recap__gauche { display: flex; align-items: center; gap: 10px; min-width: 0; }
.recap__icone {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--c-icon-bg);
  display: grid;
  place-items: center;
}
.recap__nom {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--c-ink);
}
.recap__droite { display: flex; align-items: center; gap: 48px; }
.recap__prix {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--pill-price);
  font-family: var(--f-body);
  font-size: 12px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--c-navy);
  white-space: nowrap;
}
.recap__qte {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: .75px solid var(--c-round-border);
  display: grid;
  place-items: center;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: #2F2E41;
}
.recap__vide {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--c-muted);
}
.recap__rule {
  border: 0;
  border-top: .75px solid var(--c-border-5);
  margin: 0;
}
.recap__ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}
.recap__texte { display: flex; flex-direction: column; gap: 4px; }
.recap__label {
  font-family: var(--f-display);
  font-size: 10px;
  line-height: 12.5px;
  font-weight: 500;
  color: var(--c-indigo-300);
}
.recap__valeur {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: var(--c-ink);
}
.recap__dates {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-body);
  font-size: 12px;
  line-height: 15.6px;
  font-weight: 400;
  color: var(--c-date-muted);
  white-space: nowrap;
}
.recap__dates > span { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.recap__dates small { font-size: 11px; line-height: 13px; }
.recap__point { display: flex; flex-direction: column; gap: 24px; }
.recap__total { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.recap__total-label {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: var(--c-ink);
}
.recap__total-valeur {
  font-family: var(--f-body);
  font-size: 22px;
  line-height: 20px;
  font-weight: 700;
  color: var(--c-primary);
  white-space: nowrap;
}

/* ---------- Sélecteur de devise (ajout hors maquette) ---------- */
.devise {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .18);
}
.devise__btn {
  height: 21px;
  padding: 0 9px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  font-family: var(--f-body);
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  color: var(--c-white);
  opacity: .8;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.devise__btn:hover { opacity: 1; }
.devise__btn.is-active {
  background: var(--c-white);
  color: var(--c-primary);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Étape 2 — carte des points de dépôt
   -------------------------------------------------------------------------- */
.carte {
  position: relative;
  width: 697px;
  max-width: 100%;
  aspect-ratio: 697 / 974;
  border-radius: var(--r-24);
  overflow: hidden;
  background: var(--c-bg-ghost-3);
}
.carte__fond {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Vraie carte (Leaflet, 2026-09-14). Tant qu'elle n'est pas créée, le
   conteneur est vide et l'image reste visible ; une fois créée, l'image,
   les marqueurs dessinés et les faux boutons disparaissent. Le z-index 0
   enferme les calques Leaflet (400 à 1000) sous l'adresse et les repères. */
.carte__vivante { position: absolute; inset: 0; z-index: 0; }
.carte--vivante .carte__vivante { background: #F2EFE9; font-family: var(--f-body); }
.carte--vivante picture,
.carte--vivante .carte__points,
.carte--vivante .carte__controls { display: none; }
/* Astuce « deux doigts » : affichée par reservation.js quand un seul doigt
   glisse sur la carte (qui laisse alors défiler la page). */
.carte--vivante .carte__vivante::after {
  content: attr(data-deux-doigts);
  position: absolute;
  inset: 0;
  z-index: 1001;
  display: grid;
  place-items: center;
  padding: 0 32px;
  background: rgba(20, 22, 60, .45);
  font-family: var(--f-display);
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: var(--c-white);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.carte--astuce .carte__vivante::after { opacity: 1; }
/* Écran tactile : le navigateur garde le défilement à un doigt ; le geste à
   deux doigts est lu par reservation.js (pas de zoom de la page sur la carte). */
.carte--tactile .carte__vivante { touch-action: pan-x pan-y; }
.carte__marqueur-vivant { background: none; border: 0; }
.carte__marqueur-vivant .carte__point { position: absolute; left: 0; top: 0; }
/* Boutons calés à droite : sans flex, ils s'alignaient à gauche d'un bloc
   aussi large que la ligne d'attribution. */
.carte--vivante .leaflet-bottom.leaflet-right { right: 16px; bottom: 18px; display: flex; flex-direction: column; align-items: flex-end; }
.carte--vivante .leaflet-bottom .leaflet-control { margin: 12px 0 0; float: none; }
.carte--vivante .leaflet-control-attribution { margin: 8px 0 0 !important; font-size: 10px; border-radius: 4px; }
.carte--vivante .leaflet-bar { border: 0; border-radius: 6px; box-shadow: 0 0 19px rgba(0, 0, 0, .14); }
.carte--vivante .leaflet-bar a { width: 41px; height: 41px; line-height: 41px; font-size: 20px; color: var(--c-body-3); }
.carte__recentrer {
  display: grid;
  place-items: center;
  width: 41px;
  height: 41px;
  padding: 0;
  background: var(--c-white);
  cursor: pointer;
}
.carte__recentrer:hover { background: #F4F4F4; }
/* Le haut de la carte empile l'adresse et les repères de proximité ; c'est
   ce conteneur qui est positionné, pour que les puces suivent une adresse
   passée à deux lignes au lieu de la recouvrir. Il laisse passer les gestes
   vers la carte en dehors des pilules elles-mêmes. */
.carte__haut { z-index: 1; pointer-events: none; }
.carte__haut > * { pointer-events: auto; }
.carte__haut {
  position: absolute;
  left: 28px;
  top: 28px;
  right: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.carte__adresse {
  align-self: stretch;
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 8px 24px;
  border-radius: var(--r-pill);
  background: var(--c-white);
  box-shadow: 0 8px 23px rgba(0, 0, 0, .15);
  font-family: var(--f-display);
  font-size: 14px;
  line-height: 18.2px;
  font-weight: 700;
  color: var(--c-body-3);
}
/* Une adresse courte tient sur une ligne (pilule de 50 px, comme la maquette) ;
   une adresse longue passe à deux lignes plutôt que d'être tronquée. */
.carte__adresse-texte { display: block; }
.carte__proches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.carte__proche {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--c-white);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  font-family: var(--f-display);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--c-body-3);
  white-space: nowrap;
}
.carte__proche strong { font-weight: 700; }
.carte__points { position: absolute; inset: 0; list-style: none; }
.carte__point { position: absolute; }
.carte__point--1 { left: 40.32%; top: 42.35%; }
.carte__point--2 { left: 74.46%; top: 45.74%; }
.carte__point--3 { left: 37.30%; top: 75.92%; }

.carte__pin {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}
.carte__dot {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-primary);
  box-shadow: 0 0 0 6px rgba(129, 140, 248, .5);
}
.carte__point.is-active .carte__dot { background: var(--c-white); }

.carte__marque {
  position: absolute;
  left: 50%;
  bottom: 10.5px;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 16px rgba(0, 0, 0, .14));
  transition: transform var(--dur) var(--ease-out);
}
.carte__point.is-active .carte__marque {
  filter: drop-shadow(0 3px 40px rgba(68, 76, 237, .46));
}
.carte__pin:hover .carte__marque { transform: translate(-50%, -3px); }

.carte__etiquette {
  position: relative;
  display: block;
  height: 44px;
  padding: 0 23px;
  border-radius: var(--r-pill);
  background: var(--c-white);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 44px;
  font-weight: 500;
  color: var(--c-marker-ink);
  white-space: nowrap;
}
.carte__etiquette::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 22px;
  height: 18px;
  transform: translateX(-50%);
  background: var(--c-white);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.carte__point.is-active .carte__etiquette {
  background: var(--c-primary);
  color: var(--c-white);
  font-weight: 600;
}
.carte__point.is-active .carte__etiquette::after { background: var(--c-primary); }

.carte__controls {
  position: absolute;
  left: 28px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 41px;
}
.carte__ctrl {
  width: 41px;
  height: 41px;
  background: var(--c-white);
  border: 1.05px solid var(--c-map-ctrl);
  display: grid;
  place-items: center;
}
.carte__ctrl--seul { border-radius: 6px; box-shadow: 0 0 19px rgba(0, 0, 0, .14); }
.carte__zoom {
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  box-shadow: 0 0 19px rgba(0, 0, 0, .14);
}
.carte__ctrl--haut { height: 39px; border-radius: 6px 6px 0 0; }
.carte__ctrl--bas  { height: 39px; border-radius: 0 0 6px 6px; border-top: 0; }

/* --------------------------------------------------------------------------
   Étape 3 — coordonnées & paiement
   -------------------------------------------------------------------------- */
.resa-login {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  padding: 8px 24px;
  border: .75px solid var(--c-border-soft);
  border-radius: var(--r-pill);
  background: var(--pill-login);
}
.resa-login__text {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--c-navy);
}
.resa-login__text strong { font-weight: 600; }
.resa-login__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 4px;
  border-radius: 4px;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--c-primary);
  white-space: nowrap;
}
.resa-login__link:hover { text-decoration: underline; }

.resa-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 16px;
}
.resa-grid2 .resa-field { gap: 10px; }
.resa-grid2 .resa-input {
  gap: 8px;
  padding: 0 17px;
  border-color: var(--c-border-4);
}
.resa-input--tel { gap: 10px; }
.resa-indicatif {
  position: relative;   /* ancre le <select> invisible qui rend le badge cliquable */
  display: flex;
  align-items: center;
  gap: 5px;
  padding-right: 16px;
  margin-right: 6px;
  border-right: .5px solid #DBDBDB;
  cursor: pointer;
}
/* Le vrai contrôle : transparent au-dessus du badge, donc natif au clavier,
   au tactile et aux lecteurs d'écran sans réinventer de menu déroulant. */
.resa-indicatif__select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  font-size: 16px;   /* < 16px = zoom automatique d'iOS Safari à l'ouverture */
}
/* SVG et non emoji 🇲🇦 : Windows n'affiche aucun drapeau emoji. */
.resa-indicatif__drapeau { display: block; width: 17px; height: 11px; border-radius: 1px; }
.resa-indicatif__code {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--c-body);
}
.resa-indicatif__caret { width: 5px; height: 8px; }

/* Liste d'indicatifs avec recherche (2026-09-18) — voir recherchePays() dans
   reservation.js. Le bouton recouvre le badge comme le faisait le <select>. */
.resa-indicatif__bouton {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.resa-indicatif__bouton:focus-visible { outline: 2px solid var(--c-body); outline-offset: 4px; border-radius: 4px; }
.resa-field--pays { position: relative; }
.resa-pays {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: .5px solid #DBDBDB;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
  overflow: hidden;
}
.resa-pays[hidden] { display: none; }
.resa-pays__saisie {
  margin: 10px;
  padding: 10px 12px;
  border: .5px solid #DBDBDB;
  border-radius: 8px;
  font-family: var(--f-body);
  font-size: 16px;   /* < 16px = zoom automatique d'iOS Safari au focus */
  color: var(--c-body);
  outline: none;
}
.resa-pays__saisie:focus { border-color: var(--c-indigo-300); box-shadow: 0 0 0 3px rgba(129, 140, 248, .16); }
.resa-pays__liste {
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.resa-pays__titre {
  padding: 8px 14px 4px;
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8A8A8A;
}
.resa-pays__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--c-body);
  cursor: pointer;
}
.resa-pays__option img { flex: none; width: 17px; height: 11px; border-radius: 1px; }
.resa-pays__nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resa-pays__code { flex: none; color: #8A8A8A; }
.resa-pays__option.est-actif,
.resa-pays__option:hover { background: var(--c-icon-bg); }
.resa-pays__option[aria-selected="true"] { font-weight: 600; }
.resa-pays__vide {
  padding: 12px 14px;
  font-family: var(--f-body);
  font-size: 14px;
  color: #8A8A8A;
}

.paiement { display: flex; flex-direction: column; gap: 32px; }
.paiement__liste { display: flex; flex-direction: column; gap: 14px; list-style: none; }
.paiement__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 20px;
  border: .75px solid var(--c-border-4);
  border-radius: var(--r-pill);
  background: var(--c-white);
  opacity: .8;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.paiement__option:hover { opacity: 1; }
.paiement__option.is-active { opacity: 1; border-color: var(--c-indigo-300); }
.paiement__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.paiement__radio {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--c-radio-off);
  display: grid;
  place-items: center;
}
.paiement__radio::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-primary);
  transform: scale(0);
  transition: transform var(--dur) var(--ease-out);
}
.paiement__option.is-active .paiement__radio { border-color: var(--c-indigo-300); }
.paiement__option.is-active .paiement__radio::after { transform: scale(1); }
.paiement__option input:focus-visible + .paiement__radio {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.paiement__nom {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 18.2px;
  font-weight: 500;
  color: var(--c-radio-off);
}
.paiement__option.is-active .paiement__nom { font-weight: 600; color: var(--c-ink-3); }
.paiement__logo { margin-left: auto; flex: 0 0 auto; }

/* Marques acceptées sur l'option carte : réassurance visuelle pour encourager
   le paiement en ligne. Sur petit écran, seules Visa et Mastercard restent. */
.paiement__logos { margin-left: auto; display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.paiement__logos img { display: block; }
@media (max-width: 520px) {
  .paiement__logos img:nth-child(n+3) { display: none; }
}

.paiement__rule {
  border: 0;
  height: 1px;
  border-radius: var(--r-pill);
  background: rgba(129, 140, 248, .5);
  margin: 0;
}

/* Avis de retour de paiement — vit entre le titre et le fil des étapes,
   donc visible quelle que soit l'étape affichée. */
.resa-avis {
  max-width: 792px;
  margin-inline: auto;
  padding: 14px 20px;
  border-radius: var(--r-24);
  border: .75px solid rgba(217, 59, 59, .35);
  background: rgba(217, 59, 59, .06);
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 21px;
  color: #A32B2B;
  text-align: center;
}

/* Remplace la saisie de carte quand un prestataire de paiement est branché. */
.paiement__redirection {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--r-24);
  background: var(--pill-login);
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 21px;
  color: var(--c-body);
}
.paiement-note { display: flex; align-items: flex-start; gap: 12px; margin: 0; }
.paiement-note strong { color: var(--c-ink); font-weight: 600; }
.paiement-note__icone {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(28, 31, 84, .08);
}
.paiement-note__icone--euro {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--c-primary);
}
.paiement__carte { display: flex; flex-direction: column; gap: 24px; }
.resa-input--carte {
  gap: 10px;
  padding: 0 20px;
  border: .75px solid var(--c-border-7);
}
.resa-input--carte .resa-input__control {
  font-size: 12px;
  line-height: 15.6px;
  color: var(--c-radio-off);
}
.resa-input--carte .resa-input__control::placeholder { color: var(--c-radio-off); opacity: 1; }
.resa-input__marques {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.resa-input__marques img { opacity: .5; }

/* --------------------------------------------------------------------------
   Étape 4 & 5 — récapitulatif détaillé
   -------------------------------------------------------------------------- */
.recap-detail { display: flex; flex-direction: column; gap: 32px; }
.recap-detail__bloc { display: flex; flex-direction: column; gap: 16px; }

.recap-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
}
.recap-ligne__gauche { display: flex; align-items: center; gap: 10px; }
.recap-ligne__icone {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--c-icon-bg);
  display: grid;
  place-items: center;
}
.recap-ligne__texte { display: flex; flex-direction: column; gap: 4px; }
.recap-ligne__label {
  font-family: var(--f-display);
  font-size: 10px;
  line-height: 12.5px;
  font-weight: 500;
  color: var(--c-indigo-300);
}
.recap-ligne__valeur {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: var(--c-ink);
}
.recap-modifier {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--pill-modifier);
  font-family: var(--f-body);
  font-size: 12px;
  line-height: 15.6px;
  font-weight: 600;
  color: var(--c-navy);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.recap-modifier:hover { background: rgba(129, 140, 248, .16); }

.recap-bagages { display: flex; flex-direction: column; gap: 10px; list-style: none; }
.recap-bagage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px;
  border: .75px solid var(--c-card-border);
  border-radius: var(--r-16);
}
.recap-bagage__info { display: flex; align-items: center; gap: 15px; }
.recap-bagage__icone {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--c-icon-bg);
  display: grid;
  place-items: center;
}
.recap-bagage__icone img { max-width: 34px; height: auto; }
.recap-bagage__nom {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: var(--c-ink);
}
.recap-bagage__desc {
  font-family: var(--f-body);
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: var(--c-desc);
}
.recap-bagage__qte {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: .75px solid var(--c-round-border);
  display: grid;
  place-items: center;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: #2F2E41;
}

/* Encadré des dates — hauteur fixe (frame FIXED 116 px dans Figma) */
.recap-dates {
  height: 116px;
  padding: 16px;
  border: .75px solid var(--c-card-border);
  border-radius: var(--r-16);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
}
.recap-dates__item {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  color: var(--c-ink);
}
.recap-dates__item strong { font-weight: 700; }
.recap-dates__fleche { width: 8px; height: 37px; margin-left: 0; }

.recap-carte {
  position: relative;
  width: 100%;
  aspect-ratio: 697 / 153;
  border-radius: var(--r-18);
  overflow: hidden;
}
.recap-carte__fond { width: 100%; height: 100%; object-fit: cover; display: block; }
.recap-carte__marqueur {
  position: absolute;
  left: 37.8%;
  top: 33.7%;
  transform: translate(-50%, -100%) translateY(-10px);
  padding: 6px 11px;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  font-family: var(--f-body);
  font-size: 7.9px;
  line-height: 9.9px;
  font-weight: 600;
  color: var(--c-white);
  white-space: nowrap;
  box-shadow: 0 1px 20px rgba(68, 76, 237, .46);
}
.recap-carte__marqueur::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 11px;
  height: 9px;
  transform: translateX(-50%);
  background: var(--c-primary);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.recap-carte__adresse {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--c-white);
  box-shadow: 0 8px 23px rgba(0, 0, 0, .15);
  font-family: var(--f-display);
  font-size: 10px;
  line-height: 13px;
  font-weight: 700;
  color: var(--c-body-3);
  white-space: nowrap;
  overflow: hidden;
}
/* Sur un conteneur inline-flex, text-overflow ne s'applique pas : c'est la rue
   — le seul élément vraiment compressible — qui porte les points de suspension. */
.recap-carte__adresse > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recap-coordonnees {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  min-height: 50px;
  padding: 8px 16px;
  border: .75px solid var(--c-card-border);
  border-radius: var(--r-16);
}
.recap-coordonnees > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 16.8px;
  font-weight: 500;
  color: var(--c-info);
}

/* --------------------------------------------------------------------------
   Étape 5 — confirmation
   -------------------------------------------------------------------------- */
.confirmation {
  width: 921px;
  max-width: 100%;
  margin: 8px auto 0;
  padding: 8px;
  border-radius: var(--r-32);
  background: var(--c-white);
  box-shadow: var(--sh-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.confirmation__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 32px;
  border-radius: var(--r-26);
  background: var(--grad-brand);
}
.confirmation__logo { width: 124px; height: 57px; }
.confirmation__panel {
  width: 699px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 20px;
  border-radius: var(--r-32);
  background: rgba(255, 255, 255, .03);
}
.confirmation__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.confirmation__title {
  font-family: var(--f-display);
  font-size: 34px;
  line-height: 44.2px;
  font-weight: 800;
  color: var(--c-white);
  text-align: center;
}
.confirmation__text {
  width: 659px;
  max-width: 100%;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 23.2px;
  font-weight: 400;
  color: var(--c-white);
  text-align: center;
}
.confirmation__check {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--c-white);
  display: grid;
  place-items: center;
}
.confirmation__corps {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 14px;
}

.qr { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.qr__carte {
  width: 230px;
  padding: 16px;
  border: .5px solid var(--c-qr-border);
  border-radius: 25px;
  background: var(--c-white);
  box-shadow: 0 4px 11px -4px rgba(0, 0, 0, .05), 0 10px 26px -3px rgba(0, 0, 0, .04);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.qr__entete { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.qr__titre {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--c-navy);
}
.qr__sous-titre {
  font-family: var(--f-body);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--c-date-muted);
  text-align: center;
}
/* Le QR est un SVG généré à la volée : il doit rester CARRÉ (la maquette
   posait 160×146 sur une image décorative, un QR déformé ne se scanne plus)
   et sur fond blanc, sinon le contraste tombe sous le seuil de lecture. */
.qr__image {
  width: 146px;
  height: 146px;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.qr__image svg { display: block; width: 100%; height: 100%; }
/* Code de retrait en toutes lettres, sous le QR : lu à voix haute si la
   caméra de l'agent refuse de démarrer. */
.qr__code-retrait {
  font-family: var(--f-body);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--c-navy);
  text-align: center;
}
.qr__ref {
  font-family: var(--f-body);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--c-qr-ref);
  text-align: center;
  letter-spacing: .4px;
}
.qr__aide {
  width: 349px;
  max-width: 100%;
  text-align: center;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  color: var(--c-date-muted);
}

.confirmation__actions { display: flex; gap: 24px; }
.confirmation__pdf,
.confirmation__retour { flex: 1 1 0; }
.confirmation__pdf {
  background: var(--c-success);
  color: var(--c-white);
  font-weight: 500;
  box-shadow: var(--sh-btn-ghost);
  border: 0;
}
.confirmation__pdf:hover { background: #16A34A; transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   Billet imprimable — invisible à l'écran, seul contenu rendu par
   « Télécharger PDF » (impression navigateur → Enregistrer en PDF).
   -------------------------------------------------------------------------- */
.billet { display: none; }

@media print {
  @page { size: A4 portrait; margin: 14mm; }
  body > *:not(.billet) { display: none !important; }

  .billet {
    display: block !important;
    font-family: var(--f-body), Arial, sans-serif;
    color: #111;
    max-width: 640px;
    margin: 0 auto;
  }
  .billet__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 14px;
    margin-bottom: 20px;
    border-bottom: 2px solid #444CED;
  }
  .billet__titre-bloc { text-align: right; }
  .billet__titre {
    margin: 0;
    font-family: var(--f-display), Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #111;
  }
  .billet__ref {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #444CED;
  }
  .billet__qr { margin: 0 0 20px; }
  .billet__qr svg { display: block; width: 130px; height: 130px; margin: 0 auto; }
  .billet__table { width: 100%; border-collapse: collapse; }
  .billet__table th,
  .billet__table td {
    padding: 9px 10px;
    border-bottom: 1px solid #ddd;
    text-align: left;
    vertical-align: top;
    font-size: 13px;
    line-height: 1.4;
  }
  .billet__table th { width: 140px; font-weight: 600; color: #555; }
  .billet__note { margin: 18px 0 0; font-size: 12px; line-height: 1.5; color: #333; }
  .billet__pied {
    margin: 14px 0 0;
    padding-top: 10px;
    border-top: 1px solid #ddd;
    text-align: center;
    font-size: 11px;
    color: #777;
  }
}

/* Mention « (facultatif) » — la pièce d'identité n'est plus exigée
   (décision client du 2026-08-05 : nom, e-mail et téléphone seulement). */
.resa-field__option {
  font-weight: 400;
  color: var(--c-caption);
}

/* Bandeau légal du tunnel — remplace le grand pied de page du site, retiré
   des cinq pages /reservation/ le 2026-08-30 : ses ~1 800 px de contenu
   marketing s'empilaient sous la barre de prix fixe sur mobile. Les deux
   liens obligatoires restent, la page collectant des données personnelles. */
.resa-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 20px 40px;
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--c-muted);
}
.resa-legal a {
  color: var(--c-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.resa-legal a:hover,
.resa-legal a:focus-visible { color: var(--c-primary); }

/* La barre de prix fixe recouvrirait le bandeau : on le pousse au-dessus.
   `--h-barre` est mesurée par reservation.js après chaque rendu. */
@media (max-width: 767px) {
  body.a-barre .resa-legal { padding-bottom: calc(var(--h-barre, 104px) + 24px); }
}

/* ==========================================================================
   Taxi vers l'aéroport, en option (2026-09-19) — étape 3, récapitulatif,
   écran de confirmation. Même langage que les options de paiement : pilule
   blanche, bord indigo quand elle est active.
   ========================================================================== */
.taxi__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 20px;
  border: .75px solid var(--c-border-4);
  border-radius: 20px;
  background: var(--c-white);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.taxi__option.is-active { border-color: var(--c-indigo-300); }
.taxi__option input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.taxi__case {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid var(--c-radio-off);
  display: grid;
  place-items: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.taxi__case::after {
  content: "";
  width: 9px;
  height: 5px;
  margin-top: -2px;
  border-left: 2px solid var(--c-white);
  border-bottom: 2px solid var(--c-white);
  transform: rotate(-45deg) scale(0);
  transition: transform var(--dur) var(--ease-out);
}
.taxi__option.is-active .taxi__case { background: var(--c-primary); border-color: var(--c-primary); }
.taxi__option.is-active .taxi__case::after { transform: rotate(-45deg) scale(1); }
.taxi__option input:focus-visible + .taxi__case { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.taxi__icone { flex: 0 0 auto; }
.taxi__texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-family: var(--f-body); }
.taxi__texte strong { font-size: 14px; line-height: 18.2px; font-weight: 600; color: var(--c-ink-3); }
.taxi__texte small { font-size: 12px; line-height: 16px; color: var(--c-radio-off); }
.taxi__prix { flex: 0 0 auto; margin-left: auto; font-family: var(--f-body); font-size: 15px; font-weight: 700; color: var(--c-primary); white-space: nowrap; }

.taxi__details { margin-top: 16px; }
.taxi__champs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.taxi__champs .resa-input__control { width: 100%; min-width: 0; }
.taxi__note {
  margin: 14px 0 0;
  padding: 12px 16px;
  border-radius: 14px;
  background: #FFF8E6;
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 19px;
  color: #6B4E00;
}
.taxi__note strong { font-weight: 600; }
.taxi__note--garanti { background: #E8F7EE; color: #12603B; }

.recap__taxi-prix { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-family: var(--f-body); white-space: nowrap; }
.recap__taxi-prix strong { font-size: 14px; font-weight: 600; color: var(--c-ink-3); }
.recap__taxi-prix small { font-size: 11px; line-height: 14px; color: var(--c-radio-off); }

@media (max-width: 640px) {
  .taxi__option { padding: 10px 14px; gap: 10px; border-radius: 16px; }
  .taxi__champs { gap: 12px; }
}

/* Bloc taxi sur fond teinté (demande client du 2026-09-19) : c'est une option
   payante, elle doit se détacher des coordonnées et du paiement qui
   l'entourent. Le fond passe à l'indigo plus soutenu une fois le taxi coché. */
.taxi {
  padding: 24px;
  border-radius: 24px;
  background: var(--c-bg-hero);
  border: 1px solid #E3E7FF;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.taxi:has(.taxi__option.is-active) { background: #EEF0FF; border-color: var(--c-indigo-200); }
@media (max-width: 640px) {
  .taxi { padding: 18px 14px; border-radius: 20px; }
}

/* Bloc taxi resserré (demande client du 2026-09-19) : c'est une option, pas
   une section — moins d'air que les blocs « coordonnées » et « paiement ». */
.resa-block--32.taxi { gap: 14px; padding: 16px 18px; border-radius: 20px; }
.taxi .resa-block__head { gap: 4px; }
.taxi .resa-block__title { font-size: 20px; line-height: 26px; }
.taxi .resa-block__text { font-size: 13px; line-height: 18px; }
.taxi__option { min-height: 48px; padding: 8px 16px; border-radius: 16px; }
.taxi__details { margin-top: 0; }
.taxi__champs { gap: 12px; }
.taxi__champs .resa-field { gap: 6px; }
.taxi__note { margin-top: 10px; padding: 9px 14px; border-radius: 12px; }
@media (max-width: 640px) {
  .resa-block--32.taxi { gap: 12px; padding: 14px 12px; border-radius: 18px; }
  .taxi .resa-block__title { font-size: 18px; line-height: 24px; }
  .taxi__option { padding: 8px 12px; gap: 8px; }
}
@media (max-width: 640px) {
  /* Sur mobile, l'icône cède sa place au texte : le sous-titre tenait sur cinq lignes. */
  .taxi__icone { display: none; }
  .taxi__texte small { font-size: 11.5px; line-height: 15px; }
}

/* Logo taxi jaune / noir / blanc (demande client du 2026-09-20 : l'icône au
   trait indigo de 22 px « ne se voyait pas trop », et elle était masquée sur
   mobile). Bureau : badge de 40 px dans l'option, à la place de l'icône.
   Mobile : l'option n'a pas la place (règle ci-dessus) — le même badge passe
   devant le titre du bloc, en pur CSS : rien à reporter dans les cinq pages. */
.taxi__icone { width: 40px; height: 40px; }
/* Le badge prend 18 px de plus que l'icône : le sous-titre passe sur deux
   lignes, qu'on équilibre plutôt que de laisser un mot seul. */
.taxi__texte small { text-wrap: balance; }
@media (max-width: 640px) {
  .taxi .resa-block__title::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: -4px 10px 0 0;
    vertical-align: middle;
    background: url("/assets/icons/ui-taxi-logo.svg?v=1") center / contain no-repeat;
  }
}

/* Ligne taxi du récapitulatif : même respiration que « Point de dépôt » — sans
   ce gap, elle était collée au filet du dessus (signalé par le client). */
.recap__taxi { display: flex; flex-direction: column; gap: 24px; }
.recap__taxi[hidden] { display: none; }

/* Filet en face des titres de section (demande client du 2026-09-19) :
   « Dépôt et récupération », « Combien de bagages ? », « Vos coordonnées »,
   « Choisissez votre mode de paiement ». Le bloc taxi, sur fond teinté, n'en
   a pas besoin. Pur CSS : rien à reporter dans les cinq pages. */
.resa-block:not(.taxi) > .resa-block__head > .resa-block__title {
  display: flex;
  align-items: center;
  gap: 18px;
}
.resa-block:not(.taxi) > .resa-block__head > .resa-block__title::after {
  content: "";
  flex: 1 1 32px;
  min-width: 24px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--c-indigo-200), rgba(168, 176, 250, 0));
}
@media (max-width: 640px) {
  /* Sur mobile un titre long passe sur deux lignes et ne laissait au filet
     qu'un moignon de 24 px : il passe SOUS le titre, pleine largeur. */
  .resa-block:not(.taxi) > .resa-block__head > .resa-block__title { display: block; }
  .resa-block:not(.taxi) > .resa-block__head > .resa-block__title::after {
    display: block;
    width: 100%;
    min-width: 0;
    margin-top: 10px;
  }
}