/*
 * La réservation et ses composants — refonte du 11.10.2026, demande de
 * Déo : « revoir le formulaire de réservation, plus joli en design et
 * réactif ». Il a aimé l'application chauffeur (chauffeur/app.css,
 * inscriptionChauffeur.css) : on en reprend les codes — cartes arrondies à
 * grande ombre douce, surtitres en capitales bleues, grands champs à fond
 * gris clair avec anneau bleu au focus, tuiles à choisir, grand bouton bleu
 * — avec les couleurs de site.css et Inter, la police du logo, servie par
 * nous (aucune requête vers un tiers).
 *
 * Chargée par la page de réservation, et par l'accueil, dont le formulaire
 * de trajet a pris le dessin de l'étape 1 le 16.10.2026 (section
 * « L'accueil » plus bas) : suggestions d'adresse (adresses.js), choix de la
 * date (calendrier.js), compteur (compteurs.js). Déclarée dans
 * le <head>, après site.css (champ « feuilles » de la page, construirePages
 * .mjs) : chargée dans le corps, elle arrivait après le premier affichage et
 * le haut de la page sautait (relecture du 11.10.2026).
 *
 * Téléphone d'abord (375 px) : champs à 16 px (pas de zoom sur iPhone),
 * cibles de 44 px au moins ; l'ordinateur ensuite.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/inter-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --r-encre: #0f1729;
  --r-doux: #4b5563;
  --r-tres-doux: #6b7280;
  --r-bleu: #1a56db;
  --r-bleu-sombre: #1442ab;
  --r-bleu-pale: #eef2ff;
  --r-anneau: rgba(26, 86, 219, 0.16);
  --r-bord: #e5e7eb;
  --r-bord-fort: #d3d9e3;
  --r-fond-doux: #f7f8fa;
  --r-fond-page: #f2f4f9;
  --r-vert: #047857;
  --r-vert-pale: #ecfdf5;
  --r-alerte: #b91c1c;
  --r-alerte-pale: #fee2e2;
  --r-ambre: #7a4b00;
  --r-ambre-pale: #fff4d6;
  --r-ombre: 0 12px 32px rgba(15, 23, 41, 0.08), 0 1px 3px rgba(15, 23, 41, 0.06);
  --r-ombre-forte: 0 24px 60px -12px rgba(15, 23, 41, 0.3), 0 2px 8px rgba(15, 23, 41, 0.08);
  --r-police: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Les blocs montrés et cachés par les scripts : une règle d'affichage
   (grid, flex) ne doit jamais l'emporter sur l'attribut hidden. */
[hidden] { display: none !important; }

.as-statut {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ================================================================
   LA PAGE DE RÉSERVATION
   ================================================================ */

/* Un en-tête plus court : sur téléphone, le formulaire doit apparaître
   sans avoir à faire défiler. */
body:has(#reservation) .hero {
  padding: 1.4rem 0 1.1rem;
  background: linear-gradient(180deg, var(--r-bleu-pale), var(--r-fond-page));
  border-bottom: 0;
}
body:has(#reservation) .hero h1 {
  font-family: var(--r-police);
  font-weight: 800;
  font-size: clamp(1.7rem, 4.4vw, 2.5rem);
  margin-bottom: 0.4rem;
}
body:has(#reservation) .hero .chapeau { font-size: 0.98rem; line-height: 1.5; }
body:has(#reservation) .contenu { background: var(--r-fond-page); padding: 0.25rem 0 3rem; }
body:has(#reservation) .site-pied { margin-top: 0; }
body:has(#reservation) .prose { max-width: none; }

@media (min-width: 720px) {
  body:has(#reservation) .hero { padding: 2.4rem 0 1.8rem; }
  body:has(#reservation) .hero .chapeau { font-size: 1.08rem; }
}

.reservation-page {
  display: grid;
  gap: 20px;
}

/* La police et l'encre du formulaire : la page de réservation, et le même
   formulaire en tête de l'accueil (16.10.2026). */
.reservation-page,
.accueil-reservation {
  font-family: var(--r-police);
  font-feature-settings: "cv11", "ss01";
  letter-spacing: -0.006em;
  color: var(--r-encre);
}

@media (min-width: 980px) {
  .reservation-page {
    grid-template-columns: minmax(0, 660px) 300px;
    gap: 32px;
    align-items: start;
  }
  .reservation-atouts { position: sticky; top: 92px; }
}

.reservation { gap: 16px; min-width: 0; }

/* Une colonne (téléphone, tablette) : le formulaire garde une largeur de
   formulaire, il ne s'étire pas sur tout l'écran. */
.reservation-page > * { width: 100%; max-width: 660px; }

/* ── Les cartes d'étape ───────────────────────────────────────────── */
.reservation .resa-carte {
  margin: 0;
  padding: 22px 18px 20px;
  background: #fff;
  border: 0;
  border-radius: 22px;
  box-shadow: var(--r-ombre);
}
@media (min-width: 560px) {
  .reservation .resa-carte { padding: 28px 28px 26px; }
}

.reservation .resa-surtitre {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--r-bleu);
}

.reservation .resa-carte h2 {
  margin: 4px 0 18px;
  padding: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--r-encre);
}

.reservation .resa-bloc {
  min-width: 0;
  margin: 22px 0 0;
  padding: 0;
  border: 0;
}
.reservation .resa-bloc > legend,
.reservation .resa-sous-titre {
  float: left;
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--r-tres-doux);
}
.reservation .resa-sous-titre { float: none; }
.reservation .resa-bloc > legend + * { clear: both; }

/* ── Les champs ───────────────────────────────────────────────────── */
.reservation input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.reservation textarea {
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--r-encre);
  background: var(--r-fond-doux);
  border: 1.5px solid var(--r-bord);
  border-radius: 14px;
  appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.reservation textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
/* #667085 au moins (relecture du 11.10.2026) : 4,7:1 sur le fond gris
   clair des champs ; #7c8596 n'y donnait que 3,5:1. Les champs à
   suggestions de l'accueil (site.css) aussi. */
.reservation input::placeholder,
.reservation textarea::placeholder,
.recherche input[data-suggestions]::placeholder { color: #667085; font-weight: 400; opacity: 1; }
.reservation input:not([type="checkbox"]):not([type="radio"]):focus,
.reservation textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--r-bleu);
  box-shadow: 0 0 0 4px var(--r-anneau);
}
.reservation input:disabled { opacity: 0.7; }

.reservation .resa-carte > label:not(.case) {
  display: block;
  margin: 16px 0 6px;
  font-size: 14px;
  font-weight: 650;
  color: var(--r-encre);
}

.reservation .aide {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--r-doux);
}

/* ── Le trajet : A, B, une ligne entre les deux ───────────────────── */
.trajet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.trajet-etapes { display: grid; gap: 14px; min-width: 0; }

.trajet-champ {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-areas: ". etiquette" "pastille champ";
  column-gap: 10px;
}

.reservation .trajet-champ > label {
  grid-area: etiquette;
  display: block;
  height: 18px;
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--r-tres-doux);
}

.trajet-champ > .as-zone,
.trajet-champ > input { grid-area: champ; min-width: 0; }

.reservation .trajet-champ input:not([type="hidden"]) { min-height: 52px; font-weight: 600; }

.trajet-pastille {
  grid-area: pastille;
  position: relative;
  z-index: 1;
  align-self: start;
  width: 30px;
  height: 30px;
  margin-top: 11px; /* centrée sur le champ de 52 px */
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: var(--r-bleu);
  box-shadow: 0 0 0 4px #fff;
}
.trajet-b .trajet-pastille { background: var(--r-encre); }

/* La ligne pointillée de A à B : du centre de A (étiquette 24 px + moitié du
   champ) jusqu'au centre de B, quelle que soit la note sous A. */
.trajet-a::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 50px;
  bottom: -64px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--r-bord-fort) 0 4px, transparent 4px 8px);
}

.trajet-echanger {
  width: 44px;
  height: 44px;
  margin-top: 24px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--r-bord);
  border-radius: 50%;
  background: #fff;
  color: var(--r-bleu);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 23, 41, 0.06);
  transition: border-color 0.15s, background 0.15s;
  touch-action: manipulation;
}
.trajet-echanger svg { width: 20px; height: 20px; transition: transform 0.3s ease; }
.trajet-echanger.echange svg { transform: rotate(180deg); }
.trajet-echanger:hover:not(:disabled) { border-color: var(--r-bleu); background: var(--r-bleu-pale); }
.trajet-echanger:focus-visible { outline: none; border-color: var(--r-bleu); box-shadow: 0 0 0 4px var(--r-anneau); }
.trajet-echanger:disabled { color: #b8c0cc; cursor: default; }

/* La liste couvre toute la largeur du bloc trajet, pastilles comprises. */
.trajet .as-liste { left: -40px; right: -54px; }

/* Téléphone : le bouton d'échange se pose sur la ligne pointillée, entre A
   et B, et les champs prennent toute la largeur — à 375 px, une adresse
   coupée à « Gare de Sion, Place de » ne se relit pas (11.10.2026). La zone
   tactile reste de 44 px. */
@media (max-width: 560px) {
  .trajet { grid-template-columns: minmax(0, 1fr); position: relative; }
  .trajet-echanger {
    position: absolute;
    z-index: 2;
    left: -3px;
    top: 77px; /* milieu de la ligne : centre de A (50 px) et de B (140 px) */
    width: 36px;
    height: 36px;
    margin: 0;
  }
  .trajet-echanger::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
  .trajet-echanger svg { width: 17px; height: 17px; }
  .trajet .as-liste { right: 0; }
}

/* ── « Quand ? » : Maintenant | Plus tard ─────────────────────────── */
.segments {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: #eceff5;
  border-radius: 16px;
}
.reservation .segment {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}
.reservation .segment input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.segment > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--r-doux);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.segment > span svg { width: 18px; height: 18px; flex: none; }
.segment input:checked + span {
  background: #fff;
  color: var(--r-bleu);
  box-shadow: 0 1px 2px rgba(15, 23, 41, 0.08), 0 4px 12px rgba(15, 23, 41, 0.08);
}
.segment input:focus-visible + span { outline: 2px solid var(--r-bleu); outline-offset: 2px; }
.segment input:disabled + span { opacity: 0.6; cursor: default; }

.quand-pastille {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  margin: 10px 0 0;
  padding: 8px 14px 8px 8px;
  font: inherit;
  text-align: left;
  color: var(--r-encre);
  background: var(--r-bleu-pale);
  border: 1.5px solid var(--r-bleu);
  border-radius: 16px;
  cursor: pointer;
  animation: resa-apparait 0.18s ease-out;
}
.quand-pastille-icone {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--r-bleu);
  color: #fff;
}
.quand-pastille-icone svg { width: 20px; height: 20px; }
.quand-pastille-texte { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.quand-pastille-modifier { flex: none; font-size: 14px; font-weight: 700; color: var(--r-bleu); }
.quand-pastille:hover:not(:disabled) { background: #e3eaff; }
/* Le focus clavier se voit nettement (relecture du 11.10.2026) : l'anneau
   pâle seul se confondait avec le fond bleu clair de la pastille. */
.quand-pastille:focus-visible { outline: 2px solid var(--r-bleu); outline-offset: 2px; box-shadow: 0 0 0 4px var(--r-anneau); }
.quand-pastille--vide { background: #fff; border-style: dashed; }
.quand-pastille--vide .quand-pastille-texte { color: var(--r-doux); font-weight: 600; }
.quand-pastille:disabled { cursor: default; opacity: 0.75; }

/* ── Passagers et bagages : une ligne, dépliée à la demande ─────────
   Demande de Déo du 11.10.2026 : sur téléphone, les trois compteurs
   occupaient l'écran au-dessus du clavier pendant qu'on tapait l'adresse. */
.options-trajet { margin-top: 18px; }
/* La même carte porte, sur l'accueil, le seul compteur des passagers
   (.compteur-carte, 16.10.2026) : la ligne repliée d'ici, sans rien à
   déplier. */
.options-resume,
.compteur-carte {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  color: var(--r-encre);
  background: var(--r-fond-doux, #f7f8fa);
  border: 1.5px solid var(--r-bord);
  border-radius: 14px;
}
.options-resume {
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.options-resume:hover:not(:disabled) { border-color: var(--r-bleu); }
.options-resume:focus-visible { outline: 2px solid var(--r-bleu); outline-offset: 2px; }
.options-resume:disabled { cursor: default; opacity: 0.75; }
.options-icone { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--r-bleu); background: var(--r-bleu-pale); }
.options-icone svg { width: 18px; height: 18px; }
.options-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.options-titre { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--r-tres-doux); }
.options-valeur { font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.options-modifier { flex: none; font-size: 14px; font-weight: 700; color: var(--r-bleu); }
.options-resume[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-color: var(--r-bleu); }
.options-resume[aria-expanded="true"] .options-modifier { font-size: 0; }
.options-resume[aria-expanded="true"] .options-modifier::after { content: "OK"; font-size: 14px; }
.options-trajet > .compteurs {
  min-width: 0;
  margin: 0;
  padding: 2px 14px 4px;
  border: 1.5px solid var(--r-bleu);
  border-top: 0;
  border-radius: 0 0 14px 14px;
}
.options-trajet .compteur { padding: 8px 0; }
.options-trajet .compteurs > legend + .compteur { padding-top: 8px; }
.options-trajet .compteur-nom { font-size: 15px; }
.options-trajet .compteur-aide { font-size: 12.5px; }
.options-trajet .compteur-valeur { min-width: 58px; font-size: 17px; }

/* ── Passagers, valises, sièges : des compteurs ───────────────────── */
.compteur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--r-bord);
}
.compteurs > legend + .compteur { border-top: 0; padding-top: 2px; }
.compteur-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.compteur-nom { font-size: 16px; font-weight: 700; }
.compteur-aide { font-size: 13px; color: var(--r-tres-doux); }
.compteur-commandes { display: flex; align-items: center; gap: 4px; flex: none; }
.compteur-bouton {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--r-bord-fort);
  border-radius: 50%;
  background: #fff;
  color: var(--r-bleu);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.08s;
  touch-action: manipulation;
}
.compteur-bouton svg { width: 18px; height: 18px; }
.compteur-bouton:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--r-bleu); background: var(--r-bleu-pale); }
.compteur-bouton:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(0.93); }
.compteur-bouton:focus-visible { outline: none; border-color: var(--r-bleu); box-shadow: 0 0 0 4px var(--r-anneau); }
/* À la borne : grisé par aria-disabled (reserver.js), le bouton garde le
   focus clavier ; :disabled reste pour l'étape 1 figée après l'étape 2. */
.compteur-bouton:disabled,
.compteur-bouton[aria-disabled="true"] { color: #c3c9d4; border-color: var(--r-bord); cursor: default; }
.compteur-bouton[aria-disabled="true"]:focus-visible { border-color: var(--r-bleu); }
.compteur-valeur {
  min-width: 66px;
  text-align: center;
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.compteur-valeur.zero { font-size: 15px; font-weight: 650; color: var(--r-doux); }

/* ── Le bouton principal ──────────────────────────────────────────── */
.reservation .bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 58px;
  margin-top: 22px;
  padding: 0 20px;
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: #fff;
  background: var(--r-bleu);
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 10px 22px -10px rgba(26, 86, 219, 0.7);
  transition: background 0.15s, transform 0.05s, box-shadow 0.15s;
}
.reservation .bouton:hover { background: var(--r-bleu-sombre); color: #fff; }
.reservation .bouton:active { transform: translateY(1px); }
.reservation .bouton:focus-visible { outline: 3px solid rgba(26, 86, 219, 0.35); outline-offset: 3px; }
.reservation .bouton:disabled { opacity: 0.6; cursor: wait; transform: none; }
/* « Voir le prix » touché pendant que l'adresse complète arrive : l'envoi
   attend (adresses.js), le bouton le montre. */
.reservation .bouton.as-envoi-attente,
.recherche .bouton.as-envoi-attente { opacity: 0.75; cursor: progress; }
.reservation form .bouton[type="submit"]::after {
  content: "";
  width: 20px;
  height: 20px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
}
.reservation form .bouton[type="submit"]:disabled::after { display: none; }
.reservation .bouton.secondaire {
  min-height: 52px;
  font-size: 16px;
  color: var(--r-bleu);
  background: #fff;
  border: 1.5px solid var(--r-bord-fort);
  box-shadow: none;
}
.reservation .bouton.secondaire:hover { color: var(--r-bleu-sombre); background: var(--r-bleu-pale); border-color: var(--r-bleu); }

/* ── Messages d'erreur ────────────────────────────────────────────── */
.reservation .message-erreur {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 16px 0 0;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--r-alerte);
  background: var(--r-alerte-pale);
  border-radius: 14px;
}
.reservation .message-erreur::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7.5v5.5M12 16.5h.01'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7.5v5.5M12 16.5h.01'/></svg>") center / contain no-repeat;
}

/* ── Les véhicules et le prix ─────────────────────────────────────── */
.reservation #r-prix { margin-top: 24px; outline: none; scroll-margin-top: 96px; }
.reservation .choix-categories { display: grid; gap: 10px; margin: 0; }
.reservation .choix-categorie {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 14px 12px 12px;
  font-size: 16px;
  font-weight: 400;
  background: var(--r-fond-doux);
  border: 1.5px solid var(--r-bord);
  border-radius: 18px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.reservation .choix-categorie input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.reservation .choix-categorie:hover { border-color: var(--r-bleu); }
.reservation .choix-categorie:has(input:focus-visible) { outline: 2px solid var(--r-bleu); outline-offset: 2px; }
.choix-categorie-icone {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--r-encre);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--r-bord);
  transition: background 0.15s, color 0.15s;
}
.choix-categorie-icone svg { width: 30px; height: 30px; }
.reservation .choix-categorie-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.reservation .choix-categorie-texte strong { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.reservation .choix-categorie-detail { font-size: 13px; color: var(--r-doux); }
.reservation .choix-categorie-prix {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.reservation .choix-categorie-prix .prix-barre { font-size: 13px; font-weight: 500; color: var(--r-tres-doux); }
.reservation .choix-categorie.choisie {
  background: var(--r-bleu-pale);
  border-color: var(--r-bleu);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.12);
}
.reservation .choix-categorie.choisie .choix-categorie-icone { background: var(--r-bleu); color: #fff; box-shadow: none; }
.reservation .choix-categorie.choisie strong { color: var(--r-bleu); }
.reservation .choix-categorie.indisponible { opacity: 0.5; cursor: not-allowed; }
.reservation .choix-categorie.indisponible:hover { border-color: var(--r-bord); }

.reservation .resa-prix-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin: 16px 0 0;
  padding: 16px 18px;
  color: #fff;
  border-radius: 18px;
  background: linear-gradient(135deg, #0f1729 0%, #1b2f6b 65%, #1a56db 140%);
  box-shadow: 0 12px 28px -14px rgba(15, 23, 41, 0.6);
}
.resa-prix-libelle {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.resa-prix-montant { color: #fff; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.reservation #r-prix > .aide { margin-top: 10px; }

/* ── Coordonnées : les cases à cocher en cartes ───────────────────── */
.reservation .case {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 12px 0 0;
  padding: 13px 14px;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.45;
  background: var(--r-fond-doux);
  border: 1.5px solid var(--r-bord);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.reservation .case + .case { margin-top: 10px; }
.reservation .aide + .case { margin-top: 20px; }
.reservation .case input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--r-bleu); }
.reservation .case:has(input:checked) { background: var(--r-bleu-pale); border-color: rgba(26, 86, 219, 0.45); }

/* ── La carte ─────────────────────────────────────────────────────── */
.reservation .resa-rassurance {
  margin: 0 0 16px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.5;
  color: #065f46;
  background: var(--r-vert-pale);
  border-radius: 16px;
}
.reservation #r-carte-recap {
  margin: 0 0 14px;
  padding: 11px 14px;
  font-weight: 600;
  color: var(--r-encre);
  background: var(--r-fond-doux);
  border-radius: 12px;
}
.reservation #r-element-carte { margin: 0; }
.reservation .resa-securite {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  text-align: center;
}
.reservation .resa-securite svg { width: 15px; height: 15px; flex: none; }

/* ── Le suivi ─────────────────────────────────────────────────────── */
.reservation .resa-suivi h2 { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.reservation .resa-suivi h2::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--r-bleu);
  animation: resa-pulsation 1.8s ease-out infinite;
}
#etape-suivi[data-statut="chauffeur-trouve"] h2::before,
#etape-suivi[data-statut="chauffeur-arrive"] h2::before,
#etape-suivi[data-statut="en-cours"] h2::before { background: #059669; }
#etape-suivi[data-statut="terminee"] h2::before { background: #059669; animation: none; }
#etape-suivi[data-statut="programmee"] h2::before { animation: none; }
/* Chauffeur confirmé, pas encore parti (course programmée, 11.10.2026) :
   le témoin vert ne bat pas — rien ne bouge encore. */
#etape-suivi[data-confirme] h2::before { animation: none; }
#etape-suivi[data-statut="annulee"] h2::before { background: #9ca3af; animation: none; }
#etape-suivi[data-statut="aucun-chauffeur"] h2::before,
#etape-suivi[data-statut="attente-carte"] h2::before { background: #f59e0b; animation: none; }

.reservation #r-suivi-texte { margin: 0; font-size: 16px; line-height: 1.5; color: var(--r-doux); }

/* ── Le suivi en direct — 11.10.2026, demande de Déo ──────────────────
   « Il faut mettre en confiance le client qui va attendre 20 ou 40
   minutes » : l'heure d'arrivée en très grand, la carte avec la voiture,
   les étapes, puis le chauffeur et sa plaque. Téléphone d'abord : sur
   375 px, rien ne déborde, la carte fait 260 px de haut. */

/* Pendant le suivi, le chapeau du formulaire (« Le prix fixe avant de
   monter à bord… ») ne sert plus : la carte remonte d'autant. */
body:has(#etape-suivi:not([hidden])) .hero .chapeau { display: none; }

/* Le grand titre : « Arrive dans 12 min », « Votre chauffeur est arrivé ». */
#etape-suivi[data-direct] h2 {
  font-size: 30px;
  letter-spacing: -0.03em;
  line-height: 1.12;
}
@media (min-width: 560px) {
  #etape-suivi[data-direct] h2 { font-size: 34px; }
}
#etape-suivi[data-statut="chauffeur-arrive"] h2 { color: var(--r-vert); }

/* « vers 14:32 · à 4,2 km », « Arrivée à destination vers 14:50 ». */
.reservation .suivi-heure {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--r-bleu);
  font-variant-numeric: tabular-nums;
}
#etape-suivi[data-statut="chauffeur-arrive"] .suivi-heure,
#etape-suivi[data-statut="en-cours"] .suivi-heure { color: var(--r-vert); }

/* Les étapes : quatre pastilles reliées, le libellé dessous. */
.reservation .suivi-etapes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 18px 0 16px;
  padding: 0;
  list-style: none;
}
.reservation .suivi-etapes li {
  position: relative;
  margin: 0;
  padding: 24px 2px 0;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  color: var(--r-tres-doux);
  overflow-wrap: anywhere;
}
/* La pastille. */
.reservation .suivi-etapes li::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--r-bord-fort);
}
/* Le trait qui la relie à la précédente. */
.reservation .suivi-etapes li + li::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--r-bord-fort);
}
.reservation .suivi-etapes li.faite { color: var(--r-doux); }
.reservation .suivi-etapes li.faite::before {
  background: var(--r-vert) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 12.5 4 4 8-9'/></svg>") center / 12px no-repeat;
  box-shadow: none;
}
.reservation .suivi-etapes li.faite::after,
.reservation .suivi-etapes li.actuelle::after { background: var(--r-vert); }
.reservation .suivi-etapes li.actuelle { color: var(--r-encre); font-weight: 800; }
.reservation .suivi-etapes li.actuelle::before {
  background: var(--r-bleu);
  box-shadow: 0 0 0 4px var(--r-anneau);
}

/* La carte. isolation : les calques de Leaflet (z-index jusqu'à 1000)
   restent dans le cadre et ne passent jamais par-dessus l'en-tête du
   site ni la feuille du calendrier. */
.reservation .suivi-carte {
  position: relative;
  isolation: isolate;
  height: 260px;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #e9edf2;
  box-shadow: inset 0 0 0 1px var(--r-bord);
}
@media (min-width: 560px) {
  .reservation .suivi-carte { height: 320px; }
}
.reservation .suivi-carte-fond {
  position: absolute;
  z-index: 0; /* ses calques restent sous « Recentrer » */
  inset: 0;
  font: 12px/1.4 var(--r-police);
  background: #e9edf2;
}
.reservation .suivi-carte-fond:focus-visible { outline: 3px solid rgba(26, 86, 219, 0.45); outline-offset: -3px; }
.reservation .suivi-carte .leaflet-control-attribution {
  font-size: 10.5px;
  color: var(--r-doux);
  background: rgba(255, 255, 255, 0.82);
}
.reservation .suivi-carte .leaflet-bar {
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px -4px rgba(15, 23, 41, 0.35);
}

/* « Recentrer » : en haut à droite, au-dessus de la carte. */
.reservation .suivi-recentrer {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 750;
  color: var(--r-bleu);
  background: #fff;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(15, 23, 41, 0.45);
}
.reservation .suivi-recentrer:hover { color: var(--r-bleu-sombre); background: var(--r-bleu-pale); }
.reservation .suivi-recentrer:focus-visible { outline: 3px solid rgba(26, 86, 219, 0.45); outline-offset: 2px; }
.reservation .suivi-recentrer svg { width: 18px; height: 18px; flex: none; }

/* La voiture : une pastille bleue, une onde tant que la position est
   fraîche ; grise et immobile quand elle date de plus de deux minutes. */
.suivi-marqueur { background: none; border: 0; }
.suivi-voiture {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #fff;
  background: var(--r-bleu);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 6px 16px -4px rgba(15, 23, 41, 0.5);
}
.suivi-voiture svg { width: 24px; height: 24px; }
.suivi-voiture::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  animation: suivi-onde 2s ease-out infinite;
}
.suivi-marqueur-voiture.perimee .suivi-voiture { background: #9ca3af; box-shadow: 0 4px 10px -4px rgba(15, 23, 41, 0.4); }
.suivi-marqueur-voiture.perimee .suivi-voiture::after { animation: none; }
@keyframes suivi-onde {
  0% { box-shadow: 0 0 0 0 rgba(26, 86, 219, 0.5); }
  100% { box-shadow: 0 0 0 16px rgba(26, 86, 219, 0); }
}

/* La cible : une goutte A (bleue, le départ) ou B (encre, l'arrivée),
   comme les pastilles du formulaire. Sa pointe touche le lieu. */
.suivi-cible {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--r-bleu);
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: -2px 4px 10px -3px rgba(15, 23, 41, 0.5);
}
.suivi-cible > span {
  transform: rotate(45deg);
  font: 800 14px/1 var(--r-police);
  color: #fff;
}
.suivi-marqueur-b .suivi-cible { background: var(--r-encre); }

/* Sous la carte : « Position d'il y a 4 min », « Position du chauffeur
   bientôt disponible ». */
.reservation .suivi-position {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--r-doux);
}
.reservation .suivi-position::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--r-tres-doux);
}
.reservation .suivi-position.perimee { color: var(--r-ambre); }
.reservation .suivi-position.perimee::before { background: #f59e0b; }

/* Le chauffeur : prénom, véhicule, plaque, et le bouton Appeler. */
.reservation #r-suivi-chauffeur {
  margin: 16px 0;
  padding: 16px;
  color: #fff;
  border-radius: 18px;
  background: linear-gradient(140deg, #064e3b 0%, #047857 60%, #10b981 140%);
  box-shadow: 0 12px 28px -14px rgba(4, 120, 87, 0.7);
}
.reservation #r-suivi-chauffeur p { margin: 0; color: rgba(255, 255, 255, 0.88); }
.reservation .chauffeur-ligne {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.reservation .chauffeur-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}
.reservation .chauffeur-infos { flex: 1; min-width: 0; }
.reservation #r-suivi-chauffeur .chauffeur-nom { margin: 0 0 1px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: #fff; overflow-wrap: break-word; }
.reservation #r-suivi-chauffeur .chauffeur-vehicule { font-size: 15px; line-height: 1.35; overflow-wrap: break-word; }
/* La plaque, comme sur la voiture : c'est elle qu'on cherche des yeux. */
.reservation #r-suivi-chauffeur .chauffeur-plaque {
  display: inline-block;
  max-width: 100%;
  margin-top: 8px;
  padding: 4px 10px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.05em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--r-encre);
  background: #fff;
  border: 2px solid var(--r-encre);
  border-radius: 8px;
}
.reservation #r-suivi-chauffeur .bouton { margin-top: 14px; color: #047857; background: #fff; box-shadow: none; }
.reservation #r-suivi-chauffeur .bouton:hover { background: #ecfdf5; color: #065f46; }
.reservation #r-suivi-recap {
  margin: 16px 0 0;
  padding: 12px 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--r-encre);
  background: var(--r-fond-doux);
  border-radius: 14px;
}
.reservation #r-suivi-recap:empty { display: none; }
.reservation #r-suivi-annuler .bouton { margin-top: 14px; }

/* ── Le bandeau d'un établissement qui recommande ─────────────────── */
.reservation .bandeau-recommandation {
  margin: 0;
  color: var(--r-bleu-sombre);
  padding: 13px 16px;
  font-size: 15px;
  line-height: 1.4;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(26, 86, 219, 0.18);
}

/* ── Bon à savoir (à droite sur ordinateur, dessous sur téléphone) ── */
.reservation-atouts {
  padding: 20px;
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--r-ombre);
}
.reservation-atouts ul { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.reservation-atouts li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--r-doux);
}
.reservation-atouts strong { display: block; font-size: 15.5px; color: var(--r-encre); }
.resa-avantage-icone {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--r-bleu);
  background: var(--r-bleu-pale);
}
.resa-avantage-icone svg { width: 20px; height: 20px; }
.reservation-atouts .resa-aide {
  margin: 18px 0 0;
  padding-top: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--r-doux);
  border-top: 1px solid var(--r-bord);
}
.reservation-atouts .resa-aide a { font-weight: 700; white-space: nowrap; }

/* ================================================================
   L'ACCUEIL : LE FORMULAIRE DE TRAJET — 16.10.2026, demande de Déo
   « Laisser comme elle mais avec ce design » : les champs de l'accueil
   (départ, arrivée, date et heure, passagers) dans l'habit de l'étape 1
   ci-dessus. Le bloc porte .reservation et le formulaire .resa-carte :
   tout le reste vient des règles de la page de réservation. Ici, seulement
   ce qui tient à sa place sur la photo, la carte du compteur, et la
   disposition en deux colonnes sur ordinateur (bouton au-dessus du pli).
   ================================================================ */
.accueil-reservation {
  max-width: 620px;
  margin: 2rem 0 0;
  /* .reservation est une grille (site.css) : sa colonne implicite (auto) ne
     descendait pas sous la largeur minimale du compteur, et à 360 px la
     carte dépassait de 9 px à droite en anglais (relecture du 16.10.2026). */
  grid-template-columns: minmax(0, 1fr);
}
/* Sur la photo du quai, une ombre plus franche détache la carte. */
.accueil-reservation .resa-carte { box-shadow: var(--r-ombre-forte); }

/* Le compteur des passagers dans sa carte : le texte prend la place, les
   boutons − et + restent au bord droit. Les tailles des compteurs dépliés
   (.options-trajet, plus haut) : à 390 px, « Enfants compris » tient sur
   une ligne à côté de l'icône et des deux boutons. */
.compteur-carte { gap: 10px; padding: 8px 8px 8px 12px; }
.compteur-carte .compteur-texte { flex: 1; }
.compteur-carte .compteur-nom { font-size: 15px; }
.compteur-carte .compteur-aide { font-size: 12.5px; }
.compteur-carte .compteur-valeur { min-width: 36px; font-size: 18px; }

/* Petits téléphones (360 px, courants sous Android) : « Passengers » tient à
   côté des boutons, qui gardent leurs 44 px ; on reprend sur les écarts.
   Sous 340 px, l'icône cède sa place au texte. */
@media (max-width: 380px) {
  .compteur-carte { gap: 6px; padding-left: 10px; }
  .compteur-carte .compteur-valeur { min-width: 30px; }
}
@media (max-width: 340px) {
  .compteur-carte .options-icone { display: none; }
}

/* Ordinateur (860 px et plus) : le trajet à gauche, « Quand ? » et les
   passagers à droite, le grand bouton dessous. Copiée en une colonne,
   l'étape 1 poussait « Continuer » sous le bas de l'écran (946 px à
   1280 × 900, hors de vue à 1366 × 768) ; l'ancien formulaire, lui, tenait
   au-dessus (731 px). Mêmes pièces, même ordre de lecture : A, B, quand,
   combien, Continuer (relecture du 16.10.2026). Le bouton d'échange se pose
   sur la ligne pointillée, comme à l'étape 1 sur téléphone : il laisse aux
   adresses presque toute la largeur de leur colonne.

   640 px au plus, comme l'ancien formulaire : à 700 px, la carte cachait
   l'arrière de la voiture et la plaque VS sur tous les écrans d'ordinateur
   (bord droit à 863 px à 1366 × 768, la voiture commence à 816 ; à 1920,
   la carte doit s'arrêter avant 1080 px). Pour tenir dans 640, la carte
   prend 24 px de marge sur les côtés (28 sur la page de réservation), 16 px
   entre les colonnes, et la colonne de droite 290 px : « Maintenant » y
   demande 134 px par bouton, « Children included » 102 px à côté de l'icône
   et de − 1 + (écarts du compteur resserrés plus bas). Les adresses gardent
   246 px (relecture du 16.10.2026). */
@media (min-width: 860px) {
  .accueil-reservation { max-width: 640px; }
  .accueil-reservation .resa-carte {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    grid-template-rows: auto 1fr;
    column-gap: 16px;
    padding: 24px 24px 26px;
  }
  .accueil-reservation .resa-carte > * { grid-column: 1 / -1; }
  .accueil-reservation .trajet {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    grid-template-columns: minmax(0, 1fr);
    position: relative;
  }
  .accueil-reservation .trajet-echanger {
    position: absolute;
    z-index: 2;
    left: -3px;
    top: 77px; /* milieu de la ligne, entre A et B : voir plus haut */
    width: 36px;
    height: 36px;
    margin: 0;
  }
  .accueil-reservation .trajet-echanger::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
  .accueil-reservation .trajet-echanger svg { width: 17px; height: 17px; }
  .accueil-reservation .trajet .as-liste { right: 0; }

  /* « Quand ? » en face de A, les passagers en face de B : l'étiquette au
     niveau de « Départ », les deux boutons à la hauteur du champ (52 px),
     la carte du compteur posée sur le bas du champ B. */
  .accueil-reservation .resa-quand { grid-column: 2; grid-row: 1; margin: 0; }
  .accueil-reservation .resa-quand > legend { margin-bottom: 6px; line-height: 18px; }
  .accueil-reservation .segment > span { min-height: 44px; }
  .accueil-reservation .resa-passagers { grid-column: 2; grid-row: 2; align-self: end; margin: 12px 0 0; }
  .accueil-reservation .compteur-carte { min-height: 52px; gap: 4px; padding: 2px 8px 2px 10px; }
  .accueil-reservation .compteur-carte .compteur-valeur { min-width: 26px; }

  .accueil-reservation .resa-carte > .bouton { margin-top: 20px; }
}

.accueil-reservation .recherche-note {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  text-align: center;
  /* Sur ordinateur, sans ça, « eu lieu. » restait seul sur la seconde ligne. */
  text-wrap: balance;
  color: var(--r-doux);
}

/* Le prix calculé sur place (devis.js), aux arrondis du formulaire. Son
   lien « Poursuivre la réservation » garde la largeur de son texte : étiré
   sur toute la largeur du prix, il se lisait mal (constat du 24.09.2026,
   site.css) ; et un second grand bouton sous « Continuer » ferait hésiter. */
.accueil-reservation .devis { border-radius: 16px; }
.accueil-reservation .devis-montant { margin: 0 0 0.35rem; font-size: inherit; }
.accueil-reservation .devis .bouton {
  display: inline-flex;
  width: auto;
  min-height: 48px;
  margin-top: 10px;
  font-size: 16px;
  border-radius: 14px;
}

/* ================================================================
   SUGGESTIONS D'ADRESSE (adresses.js) — réservation et accueil
   ================================================================ */
.as-zone { position: relative; width: 100%; min-width: 0; }

.as-liste {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  padding: 6px;
  font-family: var(--r-police);
  letter-spacing: -0.006em;
  text-align: left;
  color: var(--r-encre);
  background: #fff;
  border: 1px solid var(--r-bord);
  border-radius: 18px;
  box-shadow: var(--r-ombre-forte);
  animation: resa-apparait 0.14s ease-out;
}
.as-liste ul {
  max-height: min(340px, 52vh);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}
.as-liste .as-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--r-encre);
  -webkit-tap-highlight-color: transparent;
}
.as-liste .as-option:hover { background: var(--r-fond-doux); }
/* L'option surlignée au clavier : un trait bleu à gauche et un fin cadre,
   en plus du fond — le fond bleu très pâle seul ne se voyait presque pas
   (relecture du 11.10.2026). */
.as-liste .as-option[aria-selected="true"] {
  background: var(--r-bleu-pale);
  box-shadow: inset 3px 0 0 var(--r-bleu), inset 0 0 0 1px rgba(26, 86, 219, 0.35);
}
.as-icone {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--r-doux);
  background: #f1f3f7;
}
.as-icone svg { width: 19px; height: 19px; }
.as-icone--gare { color: #1a56db; background: #e8efff; }
.as-icone--avion { color: #0369a1; background: #e0f2fe; }
.as-icone--hopital { color: #dc2626; background: #fee2e2; }
.as-icone--hotel { color: #b45309; background: #fef3c7; }
.as-icone--montagne { color: #047857; background: #dcfce7; }
.as-icone--position { color: #fff; background: var(--r-bleu); }
.as-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.as-principal { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.as-secondaire { font-size: 13px; color: var(--r-tres-doux); overflow-wrap: anywhere; }
/* Sur le fond bleu pâle, le gris doux tombait à 4,3:1 : un gris plus
   foncé (6,8:1). */
.as-option[aria-selected="true"] .as-secondaire { color: var(--r-doux); }
.as-liste .as-mention { margin: 4px 10px 2px; font-size: 11.5px; text-align: right; color: var(--r-tres-doux); }
.as-google { font-weight: 600; color: #5f6368; }

.as-zone .as-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 8px 0 0;
  padding: 9px 12px;
  font-family: var(--r-police);
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  color: var(--r-bleu-sombre);
  background: var(--r-bleu-pale);
  border-radius: 12px;
}
.as-zone .as-note--erreur { color: var(--r-ambre); background: var(--r-ambre-pale); }
.as-zone .as-note--attente { color: var(--r-doux); background: var(--r-fond-doux); }
.as-note-icone { flex: none; display: grid; margin-top: 1px; }
.as-note-icone svg { width: 18px; height: 18px; }
.as-note--attente .as-note-icone {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: resa-tourne 0.8s linear infinite;
}

/* L'adresse complète d'une suggestion Google en route (adresses.js) : une
   roue dans le champ, à droite ; « top » est posé par le script, au milieu
   du champ. Le texte ne passe pas dessous. */
.as-chargement {
  position: absolute;
  z-index: 2;
  right: 14px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  color: var(--r-bleu);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  pointer-events: none;
  animation: resa-tourne 0.8s linear infinite;
}
.as-zone--attente > input { padding-right: 44px !important; }

/* Accueil : le bandeau a overflow: hidden (site.css), qui coupait la liste
   ouverte et la mention Google quand le formulaire tenait sur une ligne au
   bas du bandeau (relecture du 11.10.2026) ; la liste de l'arrivée peut
   encore y descendre sur un écran bas. Liste ouverte, le bandeau
   laisse dépasser et passe devant la section suivante ; son fond (photo,
   vidéo, voile) est peint dans sa propre boîte et ne bouge pas. Sans :has,
   adresses.js borne la hauteur de la liste à la place laissée par le
   bandeau. */
.accueil-hero:has(.as-liste:not([hidden])) { overflow: visible; z-index: 2; }

/* ================================================================
   LE CHOIX DE LA DATE (calendrier.js)
   ================================================================ */

/* Le bouton seul, sans « Maintenant | Plus tard » : celui de l'encadré
   « Basculer une course » du tableau de bord (apport.css l'habille).
   L'accueil a pris les deux boutons de la réservation le 16.10.2026. */
.quand-champ { position: relative; width: 100%; }
.quand-bouton {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin: 0;
  padding: 0.7rem 0.8rem;
  font: inherit;
  text-align: left;
  color: var(--encre, #0f1729);
  background: var(--fond, #fff);
  border: 1px solid var(--bord, #e5e7eb);
  border-radius: 8px;
  cursor: pointer;
}
.quand-bouton:hover { border-color: #c7cfdb; }
.quand-bouton:focus-visible { outline: 2px solid var(--accent, #1a56db); outline-offset: 1px; border-color: var(--accent, #1a56db); }
.quand-bouton-icone { display: grid; flex: none; color: var(--accent, #1a56db); }
.quand-bouton-icone svg { width: 18px; height: 18px; }
.quand-bouton-texte { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.quand-bouton-fleche { display: grid; flex: none; color: var(--encre-douce, #4b5563); }
.quand-bouton-fleche svg { width: 16px; height: 16px; }
/* La croix fait 44 × 44 px, la cible minimale de ce formulaire (40 px
   jusqu'à la relecture du 11.10.2026) ; le texte s'arrête avant elle. */
.quand-champ--choisi .quand-bouton { padding-right: 3.25rem; font-weight: 600; }
.quand-champ--choisi .quand-bouton-fleche { display: none; }
.quand-effacer {
  position: absolute;
  top: 50%;
  right: 2px;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--encre-douce, #4b5563);
  background: transparent;
  transform: translateY(-50%);
  cursor: pointer;
}
.quand-effacer:hover { background: var(--fond-doux, #f7f8fa); color: var(--encre, #0f1729); }
.quand-effacer:focus-visible { outline: 2px solid var(--accent, #1a56db); outline-offset: -2px; }
.quand-effacer svg { width: 18px; height: 18px; }

/* Le panneau : feuille du bas (téléphone) ou fenêtre ancrée (ordinateur). */
@media (max-width: 719px) {
  html.cal-ouvert,
  html.cal-ouvert body { overflow: hidden; }
}

.cal-voile {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 23, 41, 0.45);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cal-voile.cal-visible { opacity: 1; }
.cal-voile--transparent { background: transparent; }

.cal-panneau {
  z-index: 1001;
  display: flex;
  flex-direction: column;
  font-family: var(--r-police);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.006em;
  text-align: left;
  color: var(--r-encre);
  background: #fff;
  box-shadow: var(--r-ombre-forte);
}

/* La feuille ne dépasse jamais l'écran : le titre et le pied y restent
   fixes, seul .cal-defile (le milieu) défile — voir plus bas. */
.cal-feuille {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 92vh;
  max-height: 92dvh;
  padding: 8px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border-radius: 24px 24px 0 0;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cal-feuille.cal-visible { transform: none; }

.cal-ancre {
  position: absolute;
  width: min(680px, calc(100vw - 32px));
  padding: 18px 22px;
  border: 1px solid var(--r-bord);
  border-radius: 22px;
  opacity: 0;
  transform: translateY(-6px) scale(0.985);
  transform-origin: top left;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.cal-ancre.cal-visible { opacity: 1; transform: none; }

.cal-poignee { flex: none; width: 40px; height: 5px; margin: 2px auto 8px; border-radius: 3px; background: #d6dbe4; }
.cal-ancre .cal-poignee { display: none; }

.cal-tete { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cal-titre { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; color: var(--r-encre); }
.cal-fermer {
  flex: none;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--r-doux);
  background: transparent;
  cursor: pointer;
}
.cal-fermer:hover { background: var(--r-fond-doux); color: var(--r-encre); }
.cal-fermer svg { width: 22px; height: 22px; }

.cal-raccourcis {
  flex: none;
  display: flex;
  gap: 8px;
  margin: 0 -16px;
  padding: 10px 16px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cal-raccourcis::-webkit-scrollbar { display: none; }
.cal-ancre .cal-raccourcis { flex-wrap: wrap; margin: 0; padding: 10px 0 0; }
.cal-puce {
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--r-encre);
  background: #fff;
  border: 1.5px solid var(--r-bord);
  border-radius: 999px;
  cursor: pointer;
}
.cal-puce:hover { color: var(--r-bleu); background: var(--r-bleu-pale); border-color: var(--r-bleu); }

.cal-onglets { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 2px; }
.cal-ancre .cal-onglets { display: none; }
.cal-onglet {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 12px;
  font: inherit;
  text-align: left;
  color: var(--r-doux);
  background: var(--r-fond-doux);
  border: 1.5px solid var(--r-bord);
  border-radius: 14px;
  cursor: pointer;
}
.cal-onglet svg { width: 20px; height: 20px; flex: none; }
.cal-onglet-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.cal-onglet-nom { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.cal-onglet-valeur { overflow: hidden; font-size: 16px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; color: var(--r-encre); }
.cal-onglet[aria-selected="true"] { color: var(--r-bleu); background: var(--r-bleu-pale); border-color: var(--r-bleu); }

/* Le milieu de la feuille — raccourcis, onglets, calendrier, heures — est
   le seul à défiler (relecture du 11.10.2026) : il prend la place que le
   titre et le pied laissent, et rétrécit sans jamais les pousser hors de
   l'écran. Ses marges négatives et son padding de 16 px rendent aux
   raccourcis leur défilement bord à bord, sans défilement horizontal. */
.cal-defile { flex: 1 1 auto; min-height: 0; }
.cal-feuille .cal-defile {
  margin: 0 -16px;
  padding: 0 16px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cal-corps { padding: 8px 0 4px; }
.cal-ancre .cal-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; padding-top: 14px; }

.cal-mois { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cal-mois-titre { margin: 0; font-size: 16px; font-weight: 800; color: var(--r-encre); }
.cal-nav {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--r-encre);
  background: transparent;
  cursor: pointer;
}
.cal-nav:hover:not(:disabled) { background: var(--r-fond-doux); }
/* Les fonds remis à zéro ici et sur la grille : le tableau de bord des
   entreprises charge aussi ce calendrier (12.10.2026), à côté de style.css
   et de ses règles générales — button:disabled { background: #999 },
   table { ombre ; overflow: hidden }, th { fond gris }. */
.cal-nav:disabled { color: #c9ced8; background: transparent; cursor: default; }
.cal-nav svg { width: 20px; height: 20px; }

.cal-grille { width: 100%; margin: 0; border-collapse: collapse; table-layout: fixed; background: transparent; border-radius: 0; box-shadow: none; overflow: visible; }
.cal-grille th { padding: 4px 0 6px; font-size: 12px; font-weight: 700; text-align: center; color: var(--r-tres-doux); background: transparent; border: 0; }
.cal-grille td { padding: 2px 0; font-size: inherit; text-align: center; border: 0; }
.cal-jour {
  position: relative;
  width: 100%;
  max-width: 44px;
  aspect-ratio: 1;
  padding: 0;
  display: inline-grid;
  place-items: center;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--r-encre);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.cal-jour:hover:not(:disabled) { background: var(--r-bleu-pale); }
.cal-jour[aria-current="date"] { color: var(--r-bleu); font-weight: 800; }
.cal-jour[aria-current="date"]::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: currentColor;
}
.cal-jour[aria-pressed="true"] { color: #fff; background: var(--r-bleu); box-shadow: 0 4px 10px -2px rgba(26, 86, 219, 0.5); }
.cal-jour:disabled { font-weight: 500; color: #c3c9d4; background: transparent; cursor: default; }

.cal-sous-titre { margin: 4px 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--r-tres-doux); }
.cal-ancre .cal-sous-titre:first-child { margin-top: 12px; }
.cal-heures { margin-bottom: 14px; }
.cal-heures,
.cal-minutes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.cal-case {
  min-height: 44px;
  padding: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--r-encre);
  background: var(--r-fond-doux);
  border: 1.5px solid transparent;
  border-radius: 12px;
  cursor: pointer;
}
.cal-case:hover:not(:disabled) { border-color: var(--r-bleu); }
.cal-case[aria-pressed="true"] { color: #fff; background: var(--r-bleu); }
.cal-case:disabled { font-weight: 500; color: #c9ced8; background: transparent; cursor: default; }

.cal-jour:focus-visible,
.cal-case:focus-visible,
.cal-nav:focus-visible,
.cal-puce:focus-visible,
.cal-onglet:focus-visible,
.cal-fermer:focus-visible,
.cal-annuler:focus-visible,
.cal-valider:focus-visible { outline: 2px solid var(--r-bleu); outline-offset: 2px; }

.cal-pied { flex: none; margin: 8px -16px 0; padding: 12px 16px 0; border-top: 1px solid var(--r-bord); }
.cal-ancre .cal-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 16px -22px 0;
  padding: 14px 22px 0;
}
.cal-resume { min-height: 22px; margin: 0 0 10px; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: var(--r-encre); }
.cal-ancre .cal-resume { margin: 0; }
.cal-resume--alerte { color: var(--r-alerte); }
.cal-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }
.cal-ancre .cal-actions { display: flex; flex: none; }
.cal-annuler,
.cal-valider {
  min-height: 52px;
  padding: 0 22px;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  border-radius: 14px;
  cursor: pointer;
}
.cal-annuler { color: var(--r-encre); background: #fff; border: 1.5px solid var(--r-bord-fort); }
.cal-annuler:hover { background: var(--r-fond-doux); }
.cal-valider { color: #fff; background: var(--r-bleu); border: 0; box-shadow: 0 8px 18px -8px rgba(26, 86, 219, 0.7); }
.cal-valider:hover:not(:disabled) { background: var(--r-bleu-sombre); }
.cal-valider:disabled { background: #b9c6e6; box-shadow: none; cursor: not-allowed; }

/* Écran bas (iPhone SE : environ 550 px visibles ; tout téléphone en
   paysage ; zoom) — relecture du 11.10.2026. La feuille monte presque en
   haut ; la poignée passe dans la ligne du titre ; les raccourcis ne
   restent que sur la vue Date ; les onglets descendent à 44 px ; marges
   resserrées. Les cibles gardent 44 px. */
@media (max-height: 760px) {
  .cal-feuille { max-height: 96vh; max-height: 96dvh; padding-top: 6px; }
  .cal-feuille .cal-poignee { position: absolute; top: 5px; left: 50%; margin: 0 0 0 -20px; }
  .cal-feuille .cal-titre { font-size: 16px; }
  .cal-feuille .cal-raccourcis { padding-top: 4px; padding-bottom: 2px; }
  .cal-feuille[data-vue="heure"] .cal-raccourcis { display: none; }
  .cal-feuille .cal-onglets { margin: 6px 0 0; }
  .cal-feuille .cal-onglet { min-height: 44px; padding: 4px 12px; }
  .cal-feuille .cal-onglet-nom { font-size: 11px; }
  .cal-feuille .cal-onglet-valeur { font-size: 15px; }
  .cal-feuille .cal-corps { padding: 6px 0 2px; }
  .cal-feuille .cal-mois { margin-bottom: 0; }
  .cal-feuille .cal-grille th { padding: 2px 0 4px; }
  .cal-feuille .cal-grille td { padding: 1px 0; }
  .cal-feuille .cal-sous-titre { margin: 2px 0 6px; }
  .cal-feuille .cal-heures { margin-bottom: 10px; }
  .cal-feuille .cal-pied { margin-top: 4px; padding-top: 10px; }
  .cal-feuille .cal-resume { margin-bottom: 8px; }
  .cal-feuille .cal-annuler,
  .cal-feuille .cal-valider { min-height: 48px; }
}

/* Paysage sur téléphone : le résumé et les deux boutons sur une ligne,
   pour laisser au milieu ce que la hauteur permet. */
@media (max-height: 480px) {
  .cal-feuille .cal-pied { display: flex; align-items: center; gap: 12px; }
  .cal-feuille .cal-resume { flex: 1; min-width: 0; margin: 0; font-size: 15px; }
  .cal-feuille .cal-actions { display: flex; flex: none; }
}

/* ================================================================
   MOUVEMENTS
   ================================================================ */
@keyframes resa-apparait {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@keyframes resa-tourne { to { transform: rotate(360deg); } }
@keyframes resa-pulsation {
  0% { box-shadow: 0 0 0 0 rgba(26, 86, 219, 0.45); }
  100% { box-shadow: 0 0 0 10px rgba(26, 86, 219, 0); }
}

@media (prefers-reduced-motion: reduce) {
  /* site.css fait glisser tout défilement (html { scroll-behavior: smooth }),
     même ceux que les scripts demandent « auto » pour respecter ce réglage
     (relecture du 11.10.2026). */
  html { scroll-behavior: auto !important; }
  .cal-voile,
  .cal-panneau,
  .as-liste,
  .quand-pastille,
  .segment > span,
  .compteur-bouton,
  .trajet-echanger svg,
  .choix-categorie-icone,
  .reservation .bouton,
  .reservation .choix-categorie,
  .reservation input,
  .reservation textarea { transition: none !important; animation: none !important; }
  .cal-feuille,
  .cal-ancre { transform: none; }
  .reservation .resa-suivi h2::before,
  .suivi-voiture::after,
  .as-note--attente .as-note-icone,
  .as-chargement { animation: none !important; }
  .compteur-bouton:active:not(:disabled),
  .reservation .bouton:active { transform: none; }
}