/*
 * 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 pour ses deux seuls
 * composants partagés : la liste de suggestions d'adresse (adresses.js) et
 * le choix de la date (calendrier.js). site.css reste intact. 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;
  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; }
.options-resume {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  font: inherit;
  text-align: left;
  color: var(--r-encre);
  background: var(--r-fond-doux, #f7f8fa);
  border: 1.5px solid var(--r-bord);
  border-radius: 14px;
  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; }
.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="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; }
#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); }
.reservation #r-suivi-chauffeur {
  margin: 18px 0;
  padding: 18px;
  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.86); }
.reservation #r-suivi-chauffeur .chauffeur-nom { margin: 0 0 2px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.reservation #r-suivi-chauffeur .bouton { margin-top: 16px; 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; }

/* ================================================================
   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 : la liste dépasse un champ étroit plutôt que de s'y tasser. */
.recherche .as-liste { min-width: min(320px, calc(100vw - 40px)); }

/* Accueil entre 860 et 999 px : le formulaire tient sur une ligne au bas du
   bandeau, dont l'overflow: hidden (site.css) coupait la liste ouverte et
   la mention Google (relecture du 11.10.2026). 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)
   ================================================================ */

/* Accueil : le bouton reprend l'allure des champs voisins (site.css). */
.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); }
.cal-nav:disabled { color: #c9ced8; cursor: default; }
.cal-nav svg { width: 20px; height: 20px; }

.cal-grille { width: 100%; margin: 0; border-collapse: collapse; table-layout: fixed; }
.cal-grille th { padding: 4px 0 6px; font-size: 12px; font-weight: 700; text-align: center; color: var(--r-tres-doux); border: 0; }
.cal-grille td { padding: 2px 0; 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; 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,
  .as-note--attente .as-note-icone,
  .as-chargement { animation: none !important; }
  .compteur-bouton:active:not(:disabled),
  .reservation .bouton:active { transform: none; }
}