/* SITE DE RÉSERVATION — feuille autonome.
   Elle ne partage rien avec styles.css : la page publique n'a ni barre d'application, ni dialogues,
   ni grille de planning, et lui imposer 60 ko de règles inutiles serait la ralentir pour rien.
   Un client la charge sur un téléphone, souvent en itinérance. */

:root {
  --sd-deep: #0e2f3b;
  --sd-sea: #173f4d;
  --sd-lagoon: #2f7d8c;
  --sd-sand: #f6f2ea;
  --sd-paper: #ffffff;
  --sd-ink: #16232a;
  --sd-muted: #5d6f77;
  --sd-line: #dfd8cc;
  --sd-coral: #c9512f;
  --sd-radius: 14px;
  --sd-shadow: 0 1px 2px rgba(14, 47, 59, .06), 0 8px 24px rgba(14, 47, 59, .07);
}

* { box-sizing: border-box; }

.booking-body {
  margin: 0;
  background: var(--sd-sand);
  color: var(--sd-ink);
  font: 16px/1.55 "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* --- En-tête ------------------------------------------------------------------------------- */

.booking-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px;
  background: var(--sd-deep);
  color: #fff;
}
.booking-brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.booking-mark {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--sd-lagoon); font-weight: 700; letter-spacing: .04em;
}
.booking-brand strong { display: block; font-size: 15px; letter-spacing: .06em; }
.booking-brand small { display: block; font-size: 12px; opacity: .72; }
.booking-lang {
  color: #fff; text-decoration: none; font-size: 14px;
  padding: 7px 13px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px;
}
.booking-lang:hover, .booking-lang:focus-visible { background: rgba(255, 255, 255, .12); }

/* --- Corps --------------------------------------------------------------------------------- */

.booking-main { max-width: 780px; margin: 0 auto; padding: 28px 20px 40px; }
.booking-eyebrow { margin: 0; font-size: 12px; letter-spacing: .14em; color: var(--sd-lagoon); font-weight: 600; }
.booking-main h1 { margin: 6px 0 10px; font-size: 30px; line-height: 1.15; color: var(--sd-deep); }
.booking-intro { margin: 0 0 22px; color: var(--sd-muted); max-width: 58ch; }

/* --- Filtres ------------------------------------------------------------------------------- */

.booking-filters { margin: 0 0 26px; }
.booking-filters fieldset {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
  margin: 0; padding: 16px 18px 18px;
  border: 1px solid var(--sd-line); border-radius: var(--sd-radius);
  background: var(--sd-paper); box-shadow: var(--sd-shadow);
}
.booking-filters legend { padding: 0 6px; font-size: 12px; letter-spacing: .12em; color: var(--sd-muted); font-weight: 600; }
.booking-filters label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--sd-muted); flex: 1 1 150px; }
.booking-filters input, .booking-filters select {
  min-height: 42px; padding: 8px 10px; font: inherit; color: var(--sd-ink);
  border: 1px solid var(--sd-line); border-radius: 9px; background: #fff;
}
/* La période couverte et la borne de vente, sous le bandeau : un client qui cherche février doit
   le lire, pas le deviner en tâtonnant. */
.booking-range {
  margin: 9px 4px 0; font-size: 13px; color: var(--sd-muted);
  display: flex; flex-wrap: wrap; gap: 4px 10px;
}
.booking-range span { opacity: .8; }
.booking-submit {
  min-height: 42px; padding: 0 20px; font: inherit; font-weight: 600;
  color: #fff; background: var(--sd-sea); border: 0; border-radius: 9px; cursor: pointer;
}
.booking-submit:hover, .booking-submit:focus-visible { background: var(--sd-lagoon); }

/* --- La barre de dates (0.32.207) : une journée à la fois ------------------------------------ */

.booking-days { display: flex; align-items: stretch; gap: 6px; margin: 0 0 18px; }
.booking-days-list {
  flex: 1 1 auto; display: flex; gap: 6px; margin: 0; padding: 2px; list-style: none;
  overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.booking-days-list li { flex: 0 0 auto; scroll-snap-align: start; }
.booking-day-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 62px; min-height: 64px; padding: 7px 8px;
  border: 1px solid var(--sd-line); border-radius: 12px; background: var(--sd-paper);
  color: var(--sd-ink); text-decoration: none; text-align: center; line-height: 1.15;
}
.booking-day-chip-name { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--sd-muted); }
.booking-day-chip b { font-size: 19px; font-weight: 800; color: var(--sd-deep); }
.booking-day-chip small { font-size: 10.5px; color: var(--sd-muted); white-space: nowrap; }
.booking-day-chip.is-full small, .booking-day-chip.is-closed small { font-style: italic; }
.booking-day-chip.is-closed { background: transparent; border-style: dashed; }
.booking-day-chip.is-closed b, .booking-day-chip.is-full b { color: var(--sd-muted); font-weight: 600; }
.booking-day-chip.is-current { background: var(--sd-sea); border-color: var(--sd-sea); }
.booking-day-chip.is-current .booking-day-chip-name, .booking-day-chip.is-current b, .booking-day-chip.is-current small { color: #fff; }
.booking-day-chip:hover, .booking-day-chip:focus-visible { border-color: var(--sd-sea); outline: none; }
.booking-days-arrow {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 34px;
  border: 1px solid var(--sd-line); border-radius: 12px; background: var(--sd-paper);
  color: var(--sd-deep); font-size: 24px; text-decoration: none; margin: 2px 0;
}
.booking-days-arrow.is-off { opacity: .35; }
.booking-days-arrow:hover, .booking-days-arrow:focus-visible { border-color: var(--sd-sea); outline: none; }

/* --- Journées ------------------------------------------------------------------------------ */

.booking-day { margin: 0 0 26px; }
.booking-day h2 {
  margin: 0 0 10px; font-size: 15px; font-weight: 600; letter-spacing: .02em;
  color: var(--sd-deep);
  padding-bottom: 7px; border-bottom: 1px solid var(--sd-line);
}
.booking-day-message { margin: 0; color: var(--sd-muted); font-size: 14px; font-style: italic; }
.booking-empty {
  margin: 30px 0; padding: 22px; text-align: center; color: var(--sd-muted);
  background: var(--sd-paper); border: 1px dashed var(--sd-line); border-radius: var(--sd-radius);
}

/* --- Un créneau : l'heure à gauche, ce qui s'y vend à droite -------------------------------- */

.booking-slot { display: grid; grid-template-columns: 64px 1fr; gap: 14px; margin-bottom: 14px; }
.booking-slot-body { min-width: 0; }
.booking-time {
  margin: 16px 0 0; font-size: 19px; font-weight: 700; color: var(--sd-deep);
  font-variant-numeric: tabular-nums;
}

.booking-departure {
  display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 14px;
  padding: 14px 16px; margin-bottom: 8px;
  background: var(--sd-paper); border: 1px solid var(--sd-line); border-radius: var(--sd-radius);
  box-shadow: var(--sd-shadow);
}
.booking-departure-main { min-width: 0; }
.booking-departure h3 { margin: 0 0 3px; font-size: 16px; line-height: 1.3; color: var(--sd-ink); }
.booking-meta { margin: 0 0 8px; font-size: 13px; color: var(--sd-muted); }
.booking-price { margin: 0; font-size: 15px; }
.booking-price strong { font-size: 19px; color: var(--sd-deep); }
.booking-price span { font-size: 13px; color: var(--sd-muted); }
.booking-price-was { margin-right: 7px; color: var(--sd-muted); font-size: inherit; font-weight: 400; }
.booking-price .booking-price-was { font-size: 14px; }
.booking-price-quote { color: var(--sd-muted); font-style: italic; }

.booking-products { margin: 9px 0 0; padding: 9px 0 0; list-style: none; border-top: 1px dotted var(--sd-line); }
.booking-products li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--sd-muted); }
.booking-products b { color: var(--sd-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.booking-seats { margin: 0; text-align: center; min-width: 58px; }
.booking-seats b {
  display: block; font-size: 21px; color: var(--sd-coral);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.booking-seats span { font-size: 11px; letter-spacing: .06em; color: var(--sd-muted); text-transform: uppercase; }

/* --- Pied ---------------------------------------------------------------------------------- */

.booking-footer {
  padding: 20px; text-align: center; font-size: 13px; color: var(--sd-muted);
  border-top: 1px solid var(--sd-line);
}
.booking-footer p { margin: 0; }

/* --- Privatisations, repliées -------------------------------------------------------------- */

.booking-private {
  margin-bottom: 8px; padding: 0;
  background: var(--sd-paper); border: 1px solid var(--sd-line); border-radius: var(--sd-radius);
  border-left: 3px solid var(--sd-lagoon);
}
.booking-private > summary {
  padding: 11px 16px; cursor: pointer; font-size: 14px; color: var(--sd-ink);
  list-style-position: inside;
}
.booking-private > summary::marker { color: var(--sd-lagoon); }
.booking-private > summary b { color: var(--sd-deep); }
.booking-private > summary small { color: var(--sd-muted); }
.booking-private[open] > summary { border-bottom: 1px dotted var(--sd-line); }
.booking-private-list { margin: 0; padding: 6px 16px 12px; list-style: none; }
.booking-private-list li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline;
  padding: 6px 0; font-size: 14px;
}
.booking-private-list li + li { border-top: 1px dotted var(--sd-line); }
.booking-private-boat { font-weight: 600; color: var(--sd-ink); }
.booking-private-seats { font-size: 12px; color: var(--sd-muted); text-align: right; }
.booking-private-price { text-align: right; font-variant-numeric: tabular-nums; }
.booking-private-price s { color: var(--sd-muted); font-size: 12px; }
.booking-private-price b { color: var(--sd-deep); }

/* --- Téléphone ----------------------------------------------------------------------------- */

@media (max-width: 560px) {
  .booking-main { padding: 22px 14px 32px; }
  .booking-main h1 { font-size: 25px; }
  /* On resserre ce qui precede la liste : sur un telephone, chaque respiration au-dessus du
     premier depart est un depart de moins qu on voit sans faire defiler. */
  .booking-intro { margin-bottom: 14px; }
  .booking-filters { margin-bottom: 16px; }
  /* DEUX COLONNES PLUTOT QUE QUATRE LIGNES. Empilés, les quatre champs faisaient 494 px : le
     client ouvrait la page et ne voyait pas un seul départ avant de faire défiler. Or ce qu il
     vient chercher, ce sont les départs — le filtre ne sert qu à ceux qui veulent changer la
     période. En 2 × 2, il tient en 230 px et le premier départ passe au-dessus de la ligne de
     flottaison. */
  .booking-filters fieldset { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .booking-filters legend { grid-column: 1 / -1; }
  .booking-submit { grid-column: 1 / -1; }
  /* LE PIÈGE DU FLEX-BASIS QUI CHANGE D AXE. En ligne, « flex: 1 1 150px » donne une LARGEUR de
     départ aux champs — c est ce qu on veut sur un écran large. Passé en colonne, la même valeur
     devient une HAUTEUR : chaque libellé se retrouvait haut de 150 px, et la barre de filtres
     occupait 825 px sur un écran de 812. Le client ouvrait la page et ne voyait pas un seul
     départ avant de faire défiler. */
  .booking-filters label, .booking-submit { width: 100%; flex: none; }
  /* L'heure passe au-dessus : sur 360 px, une colonne de 64 px vole la moitié du texte. */
  .booking-slot { grid-template-columns: 1fr; gap: 4px; }
  .booking-time { margin: 10px 0 0; }
  .booking-private-list li { grid-template-columns: 1fr auto; }
  .booking-private-seats { grid-column: 1; text-align: left; }
}

/* --- LE TUNNEL ------------------------------------------------------------------------------ */
/* Panier, identité, confirmation. Même coquille que le tableau des départs, et la même contrainte :
   tout doit rester utilisable sans JavaScript, au pouce, sur un téléphone au bout d'un quai. */

.booking-departure-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

/* Le bouton de réservation est la seule couleur pleine de la carte : sur une page qui aligne vingt
   départs, ce qui est cliquable doit se voir sans être cherché. */
.booking-book {
  display: inline-block; padding: 9px 16px; border-radius: 8px;
  background: var(--sd-deep); color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
.booking-book:hover, .booking-book:focus-visible { background: var(--sd-lagoon); }

.booking-tunnel { max-width: 720px; }

/* Le fil d'étapes. Il ne sert pas à naviguer — il sert à savoir combien il en reste, ce qui est la
   question qu'on se pose au milieu d'un formulaire. */
.booking-steps {
  display: flex; gap: 6px; margin: 0 0 22px; padding: 0; list-style: none;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
}
.booking-step { flex: 1; display: flex; align-items: center; gap: 7px; color: var(--sd-muted); }
.booking-step b {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--sd-line); border-radius: 50%; font-size: 11px; font-weight: 700;
}
.booking-step.is-current { color: var(--sd-deep); font-weight: 700; }
.booking-step.is-current b { border-color: var(--sd-deep); background: var(--sd-deep); color: #fff; }
.booking-step.is-done b { border-color: var(--sd-lagoon); color: var(--sd-lagoon); }

/* Le rappel du départ choisi, présent sur les trois pages : un client qui saisit six noms doit
   pouvoir vérifier qu'il est sur le bon bateau sans revenir en arrière et tout reperdre. */
.booking-recap {
  margin: 0 0 18px; padding: 14px 16px;
  border-left: 3px solid var(--sd-lagoon); background: #f2f8f8; border-radius: 0 10px 10px 0;
}
.booking-recap p { margin: 0; }
.booking-recap-day { font-size: 12px; color: var(--sd-muted); }
.booking-recap-time { margin-top: 3px !important; font-size: 16px; }
.booking-recap-time b { color: var(--sd-deep); }
.booking-recap-boat { margin-top: 3px !important; font-size: 12px; color: var(--sd-muted); }

.booking-hold { margin: 0 0 14px; font-size: 12px; color: var(--sd-lagoon); font-weight: 600; }
.booking-seats-left { margin: 0 0 14px; font-size: 12px; color: var(--sd-muted); }

/* Les erreurs. Elles sont EN HAUT du formulaire et énumérées : sur six participants, un message
   unique en bas de page laisse chercher lequel. */
.booking-error {
  margin: 0 0 18px; padding: 13px 16px;
  border-left: 3px solid var(--sd-coral); background: #fff4f1; border-radius: 0 10px 10px 0;
}
.booking-error ul { margin: 0; padding-left: 18px; font-size: 13px; color: #8f3a2c; }

.booking-lines { margin: 0 0 18px; padding: 0; list-style: none; }
.booking-line {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--sd-line);
}
.booking-line-label strong { display: block; font-size: 15px; }
.booking-line-label span { font-size: 12px; color: var(--sd-muted); }
/* Le prix a payer se detache du prix public barre qui le precede : meme ligne, deux roles. */
.booking-line-price { color: var(--sd-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
/* 72 px : assez large pour deux chiffres et les flèches natives, assez étroit pour ne pas suggérer
   qu'on attend un nombre à trois chiffres. */
.booking-line-qty input {
  width: 72px; padding: 9px 10px; border: 1px solid var(--sd-line); border-radius: 8px;
  font-size: 16px; text-align: center;
}

.booking-quote { margin: 0 0 10px; padding: 0; list-style: none; }
.booking-quote li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; font-size: 14px;
}
.booking-quote b { font-variant-numeric: tabular-nums; }
.booking-quote-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 0 0 20px; padding-top: 12px; border-top: 2px solid var(--sd-deep);
  font-size: 15px;
}
.booking-quote-total b { font-size: 22px; color: var(--sd-deep); font-variant-numeric: tabular-nums; }
.booking-quote-total .booking-price-was { font-size: 15px; }

.booking-participant {
  margin: 0 0 16px; padding: 14px 16px 16px;
  border: 1px solid var(--sd-line); border-radius: 12px; background: #fff;
}
.booking-participant legend {
  padding: 0 7px; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sd-lagoon);
}
.booking-participant label { display: block; margin-top: 11px; font-size: 12px; color: var(--sd-muted); }
.booking-participant input {
  width: 100%; margin-top: 5px; padding: 11px 12px;
  border: 1px solid var(--sd-line); border-radius: 8px;
  /* 16 px minimum : en dessous, Safari sur iPhone zoome à la mise au point et casse la page. */
  font-size: 16px; background: #fdfefe;
}
.booking-participant input:focus-visible { outline: 2px solid var(--sd-lagoon); outline-offset: 1px; }

/* L'ACCEPTATION DES CONDITIONS. La case reste à gauche du texte et ne rétrécit jamais : une case à
   cocher qu'on rate au pouce fait abandonner la vente à la dernière seconde. */
.booking-conditions {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 0 0 20px; padding: 14px 16px;
  border: 1px solid var(--sd-line); border-radius: 12px; background: #f2f8f8;
  font-size: 13px; line-height: 1.5;
}
.booking-conditions input { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.booking-conditions a { color: var(--sd-deep); }

.booking-pay { margin: 22px 0; }
.booking-pay .booking-submit { display: inline-block; text-decoration: none; }
.booking-tunnel-back { margin-top: 22px; font-size: 13px; }
.booking-tunnel-back a { color: var(--sd-muted); }

.booking-done-intro { font-size: 16px; }
.booking-reference {
  display: flex; align-items: baseline; gap: 12px; margin: 0 0 20px;
  font-size: 13px; color: var(--sd-muted);
}
.booking-reference b { font-size: 20px; color: var(--sd-deep); letter-spacing: .04em; }
.booking-done-mail { font-size: 13px; color: var(--sd-muted); }
.booking-done-minor {
  margin-top: 14px; padding: 12px 14px;
  border-left: 3px solid var(--sd-coral); background: #fff4f1; border-radius: 0 10px 10px 0;
  font-size: 13px;
}

/* Visible pour les lecteurs d'écran, invisible à l'œil : les champs de quantité ont un intitulé
   court à l'écran, mais une synthèse vocale doit entendre de quelle prestation il s'agit. */
.booking-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 560px) {
  .booking-departure-side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .booking-steps { gap: 3px; font-size: 0; }
  .booking-step span { display: none; }
  .booking-step.is-current { font-size: 11px; }
  .booking-step.is-current span { display: inline; }
  .booking-line { flex-wrap: wrap; }
  .booking-submit { width: 100%; }
}

/* --- LE PANIER A PLUSIEURS JOURNEES ------------------------------------------------------------ */
/* Une commande peut porter plusieurs sorties. Chaque journee est une carte : le client doit pouvoir
   compter ses journees d'un coup d'oeil, et retirer la bonne sans se tromper de ligne. */

.booking-journees { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 12px; }
.booking-journee {
  padding: 14px 16px; border: 1px solid var(--sd-line); border-radius: 12px; background: #fff;
}
.booking-journee-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.booking-journee-tete strong { display: block; font-size: 15px; color: var(--sd-ink); }
.booking-journee-tete span { display: block; margin-top: 2px; font-size: 12px; color: var(--sd-muted); }
.booking-journee-actions { display: flex; gap: 12px; align-items: center; flex: none; }
.booking-journee-actions a, .booking-journee-retirer {
  padding: 0; border: 0; background: none; font: inherit; font-size: 12px;
  color: var(--sd-deep); text-decoration: underline; cursor: pointer;
}
.booking-journee-retirer { color: #a14339; }
.booking-journee-lignes { margin: 10px 0 0; padding: 10px 0 0; list-style: none; border-top: 1px dotted var(--sd-line); }
.booking-journee-lignes li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.booking-journee-lignes b { font-variant-numeric: tabular-nums; }

/* UNE JOURNEE DEVENUE IMPOSSIBLE NE DISPARAIT PAS : elle se signale. Un panier qui retrecit tout
   seul entre deux ecrans est plus inquietant qu'un panier qui explique. */
.booking-journee-empechee { border-color: #d8a49c; background: #fff7f5; }
.booking-journee-refus { margin: 10px 0 0; font-size: 13px; color: #8f3d33; }

.booking-multi-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.booking-add-day { font-size: 14px; color: var(--sd-deep); }
.booking-multi-bloque { margin: 0; font-size: 13px; color: #8f3d33; }
.booking-allornothing { margin: 16px 0 0; font-size: 12px; color: var(--sd-muted); }

/* Le rappel de ce qui est deja au panier, pendant qu'on compose une journee de plus. */
.booking-panier-rappel {
  margin: 22px 0 0; padding: 14px 16px; border: 1px dashed var(--sd-line); border-radius: 12px;
}
.booking-panier-rappel h2 { margin: 0 0 10px; font-size: 13px; color: var(--sd-muted); font-weight: 700; }
.booking-panier-rappel ul { margin: 0; padding: 0; list-style: none; }
.booking-panier-rappel li, .booking-panier-rappel p {
  display: flex; justify-content: space-between; gap: 12px; margin: 0 0 5px; font-size: 13px;
}
.booking-panier-rappel p { margin: 8px 0 10px; padding-top: 8px; border-top: 1px solid var(--sd-line); font-weight: 700; }
.booking-panier-rappel b { font-variant-numeric: tabular-nums; }

/* Le programme, en tete des etapes suivantes quand le panier porte plusieurs journees. */
.booking-programme { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 6px; }
.booking-programme li { display: flex; gap: 10px; font-size: 13px; }
.booking-programme b { color: var(--sd-ink); }
.booking-programme span { color: var(--sd-muted); }

/* La date rappelee sur chaque ligne du recapitulatif, quand il en melange plusieurs. */
.booking-quote i, .booking-journee-lignes i {
  display: block; margin-top: 2px; font-style: normal; font-size: 11px; color: var(--sd-muted);
}

@media (max-width: 560px) {
  .booking-journee-tete { flex-direction: column; gap: 8px; }
  .booking-multi-actions { flex-direction: column; align-items: stretch; }
  .booking-multi-actions .booking-submit { width: 100%; }
}

/* --- LE LIEU D'EMBARQUEMENT ET LES INFORMATIONS DU PARTICIPANT --------------------------------- */
/* Le lieu vient EN TETE du formulaire, et ce n'est pas cosmetique : c'est lui qui decide si l'on
   demande a chacun sa taille de combinaison. Le poser apres aurait fait apparaitre des champs
   au-dessus de ce que le client venait de remplir. */

.booking-meeting { background: var(--sd-tint, #f6f3ee); }
.booking-check { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; font-size: 14px; }
.booking-check input { width: 20px; height: 20px; flex: none; margin: 0; }
.booking-meeting-boat { display: grid; gap: 12px; margin-top: 10px; }

.booking-field-hint { margin: 4px 0 12px; font-size: 12px; color: var(--sd-muted); }
/* L'avertissement sur la carte de certification : la Direction l'a signale comme un point critique.
   Sans la carte le jour de l'embarquement, l'organisation de la sortie change completement. */
.booking-card-warning {
  padding: 9px 11px; border-left: 3px solid var(--sd-deep); border-radius: 0 8px 8px 0;
  background: #f2f7f7; color: var(--sd-ink);
}
.booking-afloat-hint {
  margin: 0 0 16px; padding: 10px 12px; border-radius: 10px;
  background: #f2f7f7; color: var(--sd-ink); font-size: 13px;
}

.booking-equipment { margin: 12px 0 0; padding: 12px; border: 1px solid var(--sd-line); border-radius: 10px; }
.booking-equipment legend { padding: 0 6px; font-size: 12px; color: var(--sd-muted); font-weight: 700; }

@media (max-width: 560px) {
  .booking-meeting-boat { grid-template-columns: 1fr; }
}


/* --- UNE CARTE PAR HEURE (0.32.205) ------------------------------------------------------------ */
/* L'heure et les places en tete ; chaque produit est une ligne qui mene droit au panier de son
   depart. Le client choisit ce qu'il achete, pas une carte parmi des cartes. */
.booking-hour { display: block; }
.booking-hour-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.booking-hour-head .booking-time { margin: 0; font-size: 22px; font-weight: 800; color: var(--sd-deep); }
.booking-hour-products { margin: 0; padding: 0; list-style: none; border: 1px solid var(--sd-line); border-radius: 12px; background: #fff; overflow: hidden; }
.booking-hour-products li + li { border-top: 1px solid var(--sd-line); }
.booking-hour-product {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
  padding: 13px 14px; color: inherit; text-decoration: none; min-height: 48px;
}
a.booking-hour-product:hover, a.booking-hour-product:focus-visible { background: #f2f7f7; outline: none; }
.booking-hour-label { font-size: 15px; color: var(--sd-ink); }
.booking-hour-price { font-size: 15px; color: var(--sd-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.booking-hour-cta { font-size: 13px; color: var(--sd-deep); white-space: nowrap; }
@media (max-width: 560px) {
  .booking-hour-product { grid-template-columns: 1fr auto; }
  .booking-hour-cta { display: none; }
}

/* Le pied de page qui remplace trente cartes de privatisation. */
/* 0.32.206 — la privatisation vendue en ligne, ligne d'une carte-heure */
.booking-hour-private .booking-hour-label { display: flex; flex-direction: column; gap: 2px; }
.booking-hour-private .booking-hour-label small { font-size: 12px; color: var(--sd-muted); }
.booking-hour-private .booking-hour-price small { font-size: 12px; font-weight: 400; color: var(--sd-muted); margin-left: 4px; }
.booking-seats-private { margin: 0; font-size: 13px; font-weight: 700; color: var(--sd-deep); letter-spacing: .04em; text-transform: uppercase; }
.booking-privatise-ask { margin: 22px 0 0; padding: 14px 16px; border: 1px dashed var(--sd-line); border-radius: 12px; font-size: 14px; color: var(--sd-muted); }
.booking-privatise-ask a { color: var(--sd-deep); }

/* La fiche d'embarquement : ce qui est deja su se lit, ce qui manque se remplit. */
.booking-known { display: block; margin: -6px 0 10px; font-size: 12px; color: var(--sd-muted); }

/* --- 0.32.208 : descriptifs des prestations, journée fermée -------------------------------- */
.booking-line-more { margin-top: 6px; font-size: 13px; color: var(--sd-muted); }
.booking-line-more > summary { cursor: pointer; color: var(--sd-deep); font-weight: 600; }
.booking-line-more p, .booking-products-about p { margin: 8px 0; line-height: 1.45; }
.booking-line-summary { margin: 6px 0; padding-left: 18px; }
.booking-line-summary li { margin: 2px 0; }
.booking-products-about {
  margin: 18px 0 0; padding: 12px 16px; border: 1px solid var(--sd-line); border-radius: 12px;
  background: var(--sd-paper); font-size: 14px; color: var(--sd-ink);
}
.booking-products-about > summary { cursor: pointer; font-weight: 600; color: var(--sd-deep); }
.booking-product-about { margin: 12px 0 0; padding-top: 10px; border-top: 1px dotted var(--sd-line); }
.booking-product-about h3 { margin: 0 0 4px; font-size: 15px; color: var(--sd-deep); }
.booking-product-about ul { padding-left: 18px; margin: 6px 0; }

/* --- 0.32.210 : catégories dans la carte-heure, fiche de l'article choisi ------------------- */
.booking-hour-products li.booking-hour-category {
  padding: 9px 14px 5px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sd-muted); background: #f4f8f8;
}
.booking-product-sheet { margin: 0 0 16px; font-size: 14px; color: var(--sd-ink); }
.booking-product-sheet p { margin: 8px 0; line-height: 1.5; }
.booking-other-products { margin: 0 0 14px; font-size: 13px; }
.booking-other-products a { color: var(--sd-deep); }

/* 0.32.215 — la barre du panier en tete du tableau, et le rappel de la journee courante. */
.booking-cart-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 16px;
  padding: 12px 16px; border: 1px solid var(--sd-line); border-radius: 12px; background: var(--sd-soft, #eef6f7);
  color: inherit; text-decoration: none; font-size: 14px;
}
.booking-cart-bar b { white-space: nowrap; }
.booking-cart-bar:hover { border-color: var(--sd-accent, #173f4d); }
.booking-panier-courante { margin: 0 0 8px; font-size: 13px; color: var(--sd-muted); }

/* 0.32.216 — le nombre de personnes sur le panier ; les journees de chaque personne sur l'identite. */
.booking-people-field { margin: 14px 0 4px; padding: 12px 16px; border: 1px dashed var(--sd-line); border-radius: 12px; }
.booking-people-field label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; }
.booking-people-field select { min-width: 84px; }
.booking-people-field .booking-field-hint { margin: 8px 0 0; }
.booking-person-programme { margin: 0 0 10px; font-size: 13px; color: var(--sd-muted); }
.booking-person-programme span { font-weight: 700; }

/* 0.32.218 — la photo d'accueil, en tete du tableau des departs. */
.booking-hero { margin: 0 auto 18px; max-width: 1080px; padding: 0 16px; }
.booking-hero img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: cover; border-radius: 16px; }
@media (max-width: 600px) { .booking-hero img { max-height: 200px; border-radius: 12px; } }

/* La zone « Code promo » (0.32.223) : bon cadeau ou ticket hôtel, avant le paiement. */
.booking-promo-row { display: flex; gap: 8px; margin-top: 10px; }
.booking-promo-row input { flex: 1 1 auto; min-width: 0; margin-top: 0 !important; text-transform: uppercase; }
.booking-promo-apply, .booking-promo-remove {
  flex: none; padding: 10px 14px; border: 1px solid var(--sd-deep); border-radius: 8px;
  background: var(--sd-deep); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.booking-promo-apply:hover, .booking-promo-apply:focus-visible { background: var(--sd-lagoon); border-color: var(--sd-lagoon); }
.booking-promo-remove { padding: 4px 9px; border-color: var(--sd-line); background: #fff; color: #a14339; font-size: 12px; }
.booking-promo-list { margin: 8px 0 0; padding: 0; list-style: none; }
.booking-promo-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px dotted var(--sd-line); font-size: 14px; }
.booking-promo-list li span { flex: 1 1 auto; min-width: 0; }
.booking-promo-list li b { font-variant-numeric: tabular-nums; color: var(--sd-lagoon); white-space: nowrap; }
.booking-promo-ok { margin: 8px 0 0; font-size: 13px; color: #26694f; }
.booking-quote-codes li b { color: var(--sd-lagoon); white-space: nowrap; }
.booking-quote-brut { margin-bottom: 8px; border-top-width: 1px; }
.booking-quote-brut b { font-size: 16px; color: var(--sd-muted); }
.booking-quote-net { margin-top: 0; }

/* ==========================================================================================
   (0.32.272) LA MER, PAS LE BUREAU. La Direction : « les ecrans de reservation en ligne sont un
   peu austeres, il faudrait quelque chose de plus fun, de plus dynamique et sympa, en rapport
   avec l'activite de plongee ». Un degrade d'eau profonde a lagon en tete, une vague sous le
   bandeau, quelques bulles qui montent, des cartes qui se soulevent, des prix en etiquette, des
   boutons qui brillent. Tout en feuille de style : la page reste la meme, lisible sans script.
   ========================================================================================== */
:root { --sd-aqua: #35b8c9; --sd-foam: #e6f5f7; --sd-sun: #f2b64b; --sd-sunlight: #fff5e0; --sd-shadow-lift: 0 12px 28px rgba(14, 47, 59, .13); }
.booking-body { background: linear-gradient(180deg, var(--sd-foam) 0, var(--sd-sand) 460px); }

/* Le bandeau : l'eau profonde qui devient lagon, des bulles, et la surface en vague. */
.booking-header {
  position: relative; overflow: hidden; padding-bottom: 30px;
  background: linear-gradient(120deg, #0b2733 0%, #173f4d 48%, #2f7d8c 100%);
}
.booking-header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 12% 40%, rgba(255,255,255,.16) 0 3px, transparent 4px),
    radial-gradient(circle at 68% 70%, rgba(255,255,255,.12) 0 5px, transparent 6px),
    radial-gradient(circle at 86% 25%, rgba(255,255,255,.10) 0 2px, transparent 3px),
    radial-gradient(circle at 42% 85%, rgba(255,255,255,.10) 0 4px, transparent 5px),
    radial-gradient(circle at 55% 30%, rgba(255,255,255,.08) 0 6px, transparent 7px);
  animation: sd-bubbles 16s linear infinite;
}
.booking-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'><path d='M0 9 C 20 0 40 0 60 9 S 100 18 120 9 V18 H0 Z' fill='%23e6f5f7'/></svg>") repeat-x bottom / 120px 18px;
}
@keyframes sd-bubbles {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 0 -70px, 0 -110px, 0 -50px, 0 -90px, 0 -60px; }
}
@media (prefers-reduced-motion: reduce) { .booking-header::before { animation: none; } }
.booking-header > * { position: relative; }
.booking-mark {
  border-color: rgba(255,255,255,.75);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.04));
  box-shadow: 0 0 0 4px rgba(53,184,201,.28);
}
.booking-lang { border-color: rgba(255,255,255,.35); }

/* Le titre : une ligne d'eau sous le mot. */
.booking-eyebrow::before { content: "🤿 "; }
.booking-main h1 {
  font-family: Georgia, "Times New Roman", serif; font-size: 34px; letter-spacing: .01em;
  background: linear-gradient(90deg, var(--sd-deep), var(--sd-lagoon) 70%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.booking-hero { position: relative; }
.booking-hero img { max-height: 380px; box-shadow: var(--sd-shadow-lift); }

/* Les journees : des galets qui se soulevent, la journee choisie en lagon. */
.booking-day-chip { border-radius: 14px; border-color: #cfe6ea; background: #fff; transition: transform .15s, box-shadow .15s, border-color .15s; }
.booking-day-chip:hover, .booking-day-chip:focus-visible { transform: translateY(-2px); box-shadow: var(--sd-shadow); border-color: var(--sd-aqua); }
.booking-day-chip.is-current { background: linear-gradient(135deg, var(--sd-sea), var(--sd-lagoon)); border-color: transparent; box-shadow: 0 8px 18px rgba(47,125,140,.35); }
.booking-days-arrow { border-radius: 14px; border-color: #cfe6ea; background: #fff; }
.booking-days-arrow:hover, .booking-days-arrow:focus-visible { border-color: var(--sd-aqua); background: var(--sd-foam); }
.booking-day h2 { font-family: Georgia, "Times New Roman", serif; font-size: 22px; color: var(--sd-deep); border: 0; padding: 0; }
.booking-day h2::after { content: ""; display: block; width: 72px; height: 4px; margin-top: 6px; border-radius: 2px; background: linear-gradient(90deg, var(--sd-aqua), transparent); }

/* Les filtres et le panier : des surfaces douces, plus de gris. */
.booking-filters fieldset { border-radius: 18px; border-color: #dbe9ec; background: #fff; box-shadow: var(--sd-shadow); }
.booking-filters input, .booking-filters select { border-radius: 10px; border-color: #cfe6ea; }
.booking-filters input:focus, .booking-filters select:focus { border-color: var(--sd-aqua); box-shadow: 0 0 0 3px rgba(53,184,201,.2); outline: none; }
.booking-cart-bar { border-radius: 14px; border-color: #f2d59b; background: linear-gradient(135deg, var(--sd-sunlight), #ffe9c2); box-shadow: var(--sd-shadow); }

/* Les departs d'une heure : une carte qui se souleve, une barre d'eau a gauche, les places en bulle. */
.booking-hour {
  position: relative; padding: 14px 16px 16px; margin-bottom: 16px;
  border: 1px solid #e3eef0; border-radius: 18px; background: #fff; box-shadow: var(--sd-shadow);
  transition: transform .15s, box-shadow .15s;
}
.booking-hour:hover { transform: translateY(-2px); box-shadow: var(--sd-shadow-lift); }
.booking-hour::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 5px; border-radius: 0 6px 6px 0; background: linear-gradient(180deg, var(--sd-aqua), var(--sd-lagoon)); }
.booking-hour-head { align-items: center; }
.booking-hour-head .booking-time { font-family: Georgia, "Times New Roman", serif; font-size: 27px; color: var(--sd-sea); }
.booking-seats { min-width: 64px; padding: 6px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--sd-foam), #d5eef2); }
.booking-seats b { color: var(--sd-lagoon); }
.booking-seats-private { padding: 6px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--sd-sunlight), #ffe9c2); color: #8a5a15; }
.booking-hour-products { border: 0; background: transparent; overflow: visible; }
.booking-hour-products li + li { border-top: 1px dashed #dbe9ec; }
.booking-hour-product { border-radius: 12px; transition: background .15s, transform .15s; }
.booking-hour-product:hover, .booking-hour-product:focus-visible { background: var(--sd-foam); transform: translateX(3px); outline: none; }
.booking-hour-price { padding: 4px 11px; border-radius: 999px; background: var(--sd-sunlight); color: #8a5a15; font-weight: 800; }
.booking-hour-cta { color: var(--sd-lagoon); font-weight: 700; }
.booking-hour-products li.booking-hour-category { color: var(--sd-lagoon); letter-spacing: .1em; }
.booking-private { border-radius: 14px; }
.booking-private > summary { border-radius: 14px; }
.booking-private[open] > summary { background: var(--sd-foam); }

/* Les boutons : un degrade d'eau, un leger soulevement. */
.booking-submit, .booking-book {
  border: 0; background: linear-gradient(135deg, var(--sd-sea), var(--sd-lagoon));
  box-shadow: 0 8px 18px rgba(47,125,140,.3); transition: transform .15s, box-shadow .15s;
}
.booking-submit:hover, .booking-submit:focus-visible, .booking-book:hover, .booking-book:focus-visible {
  background: linear-gradient(135deg, var(--sd-lagoon), var(--sd-aqua)); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(47,125,140,.4);
}

/* Les journees vides et fermees : un poisson, pas un mur. */
.booking-empty, .booking-day-message {
  padding: 26px 20px; border: 1px dashed #cfe6ea; border-radius: 18px; background: #fff; text-align: center; color: var(--sd-muted);
}
.booking-empty::before, .booking-day-message::before { content: "🐠"; display: block; margin-bottom: 6px; font-size: 34px; }
.booking-footer { background: linear-gradient(180deg, transparent, var(--sd-foam)); }
@media (max-width: 560px) {
  .booking-main h1 { font-size: 28px; }
  .booking-hour { padding: 12px 12px 14px; border-radius: 16px; }
  .booking-hour-head .booking-time { font-size: 23px; }
}

/* ---------------------------------------------------------------------------------------------
   LES CARTES DES PRESTATIONS (0.50.073) — une carte par prestation : la photo à gauche sur
   ordinateur, au-dessus sur téléphone ; le titre, la durée et la capacité, le résumé en deux
   lignes, « Lire la suite » qui déplie en place, le prix et « Choisir » en pied de carte.
   --------------------------------------------------------------------------------------------- */
.booking-cards { display: grid; gap: 16px; }
.booking-category { display: grid; gap: 16px; }
.booking-category-title { margin: 8px 0 -4px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--sd-lagoon); font-weight: 700; }
.booking-card {
  display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; grid-template-areas: "photo body foot";
  border: 1px solid #e3eef0; border-radius: 18px; background: #fff; box-shadow: var(--sd-shadow); overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.booking-card:hover { transform: translateY(-2px); box-shadow: var(--sd-shadow-lift); }
.booking-card-photo { grid-area: photo; margin: 0; min-height: 190px; background: linear-gradient(160deg, var(--sd-sea), var(--sd-lagoon)); }
.booking-card-photo img { display: block; width: 100%; height: 100%; min-height: 190px; object-fit: cover; }
.booking-card-body { grid-area: body; padding: 18px 20px 16px; min-width: 0; }
.booking-card-title { margin: 0 0 6px; font-family: Georgia, "Times New Roman", serif; font-size: 22px; line-height: 1.2; color: var(--sd-sea); }
.booking-card-meta { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--sd-lagoon); }
.booking-card-summary { margin: 0; color: var(--sd-ink); line-height: 1.5; font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.booking-card-more { margin-top: 8px; }
.booking-card-more > summary { list-style: none; cursor: pointer; display: inline-block; min-height: 44px; line-height: 44px; padding: 0 2px; color: var(--sd-lagoon); font-weight: 700; font-size: 14px; }
.booking-card-more > summary::-webkit-details-marker { display: none; }
.booking-card-more > summary:focus-visible { outline: 2px solid var(--sd-aqua); outline-offset: 2px; border-radius: 6px; }
.booking-card-more > summary .booking-more-close { display: none; }
.booking-card-more[open] > summary .booking-more-open { display: none; }
.booking-card-more[open] > summary .booking-more-close { display: inline; }
.booking-card-description { color: var(--sd-ink); font-size: 15px; line-height: 1.55; }
.booking-card-description p { margin: 0 0 10px; }
.booking-card-description ul { margin: 0 0 10px; padding-left: 20px; }
.booking-card-description .booking-line-summary { margin: 0 0 12px; padding: 0; list-style: none; }
.booking-card-description .booking-line-summary li { padding: 3px 0 3px 22px; position: relative; }
.booking-card-description .booking-line-summary li::before { content: "✓"; position: absolute; left: 0; color: var(--sd-lagoon); font-weight: 800; }
.booking-card-foot {
  grid-area: foot; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 10px;
  padding: 18px 20px; border-left: 1px dashed #dbe9ec; min-width: 190px;
}
.booking-card-foot .booking-price { margin: 0; text-align: right; line-height: 1.2; }
.booking-card-foot .booking-price strong { font-size: 24px; color: var(--sd-deep); }
.booking-card-foot .booking-price span { display: block; font-size: 12px; color: var(--sd-muted); }
.booking-card-foot .booking-price .booking-from { display: block; font-size: 12px; color: var(--sd-muted); font-weight: 400; }
.booking-card-choose { display: flex; flex-direction: column; gap: 8px; align-items: stretch; width: 100%; }
.booking-card-book { display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 44px; padding: 7px 16px; text-align: center; }
.booking-card-book small { font-size: 11px; font-weight: 500; opacity: .85; }
.booking-card-private .booking-card-photo { background: linear-gradient(160deg, #8a5a15, var(--sd-sunlight)); }
@media (max-width: 767px) {
  .booking-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "body" "foot"; }
  .booking-card-photo, .booking-card-photo img { min-height: 170px; height: 170px; }
  .booking-card-body { padding: 16px 16px 8px; }
  .booking-card-title { font-size: 20px; }
  .booking-card-foot { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; border-left: 0; border-top: 1px dashed #dbe9ec; padding: 12px 16px 16px; min-width: 0; }
  .booking-card-foot .booking-price { text-align: left; }
  .booking-card-foot .booking-price span, .booking-card-foot .booking-price .booking-from { display: inline; margin-left: 4px; }
  .booking-card-choose { width: auto; flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; }
  .booking-card-book { flex: 1 1 130px; }
}

/* (0.50.074) Retours de la Direction sur les cartes : le résumé ENTIER en puces sur la carte, rien de la
   description ; sur la page de l'article, une photo réduite, le résumé, le début de la description et
   « Lire la suite », pour que « Ajouter au panier » tienne dans le premier écran. */
.booking-card-summary { display: block; -webkit-line-clamp: none; overflow: visible; }
ul.booking-card-summary { margin: 0; padding: 0; list-style: none; }
ul.booking-card-summary li { position: relative; padding: 2px 0 2px 22px; line-height: 1.45; }
ul.booking-card-summary li::before { content: "✓"; position: absolute; left: 0; color: var(--sd-lagoon); font-weight: 800; }
.booking-product-sheet { margin: 4px 0 14px; }
.booking-product-sheet.has-photo { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.booking-sheet-photo { margin: 0; }
.booking-sheet-photo img { display: block; width: 100%; height: 200px; max-height: 200px; object-fit: cover; border-radius: 12px; background: var(--sd-paper); }
.booking-sheet-text .booking-line-summary { margin: 0 0 8px; padding: 0; list-style: none; }
.booking-sheet-text .booking-line-summary li { position: relative; margin: 0; padding: 2px 0 2px 22px; line-height: 1.45; }
.booking-sheet-text .booking-line-summary li::before { content: "✓"; position: absolute; left: 0; color: var(--sd-lagoon); font-weight: 800; }
.booking-sheet-excerpt p, .booking-sheet-excerpt ul { margin: 0 0 6px; }
.booking-sheet-more { margin-top: 0; }
.booking-sheet-more > summary { min-height: 36px; line-height: 36px; }
.booking-product-sheet:has(.booking-sheet-more[open]) .booking-sheet-excerpt { display: none; }
@media (max-width: 767px) {
  .booking-product-sheet.has-photo { display: block; }
  .booking-sheet-photo { margin: 0 0 10px; }
  .booking-sheet-photo img { height: 160px; max-height: 160px; }
  .booking-card-body { padding-bottom: 12px; }
}
@media (max-width: 767px) {
  /* (0.50.074) La page de l'article au téléphone : des marges plus serrées pour que « Ajouter au panier » tienne dans l'écran. */
  .booking-tunnel .booking-steps { margin-bottom: 12px; }
  .booking-tunnel h1 { margin: 0 0 6px; font-size: 24px; }
  .booking-tunnel .booking-recap { padding: 10px 14px; margin-bottom: 10px; }
  .booking-tunnel .booking-seats-left { margin: 0 0 8px; }
  .booking-tunnel .booking-lines { margin-bottom: 8px; }
  .booking-product-sheet { margin: 0 0 8px; }
  .booking-sheet-more > summary { min-height: 32px; line-height: 32px; }
}

/* ---------------------------------------------------------------------------------------------
   (0.50.075) « QUI PARTICIPE ? » au niveau des cartes — retour de la Direction du 20/09 : les tuiles du
   lieu d'embarquement, un bloc par participant, prénom et nom côte à côte, les champs et les listes
   dans le style du tunnel. Aucun champ nouveau : la présentation seulement.
   --------------------------------------------------------------------------------------------- */
.booking-identity-cards .booking-participant {
  margin: 0 0 14px; padding: 16px 18px 18px; border: 1px solid #e3eef0; border-radius: 16px; background: #fff; box-shadow: var(--sd-shadow);
}
.booking-identity-cards .booking-participant legend {
  padding: 0 8px; font-size: 12px; letter-spacing: .1em; color: var(--sd-lagoon);
}
.booking-identity-cards .booking-participant label { font-size: 13px; font-weight: 600; color: var(--sd-muted); }
.booking-identity-cards .booking-participant input,
.booking-identity-cards .booking-participant select {
  display: block; width: 100%; margin-top: 6px; padding: 11px 12px; min-height: 44px;
  border: 1px solid #cfe6ea; border-radius: 10px; background: #fdfefe; color: var(--sd-ink); font: inherit; font-size: 16px;
}
.booking-identity-cards .booking-participant select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--sd-lagoon) 50%), linear-gradient(135deg, var(--sd-lagoon) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.booking-identity-cards .booking-participant input:focus,
.booking-identity-cards .booking-participant select:focus { border-color: var(--sd-aqua); box-shadow: 0 0 0 3px rgba(53,184,201,.2); outline: none; }
.booking-identity-cards .booking-participant input:focus-visible { outline: none; }
.booking-name-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.booking-identity-cards .booking-field-hint { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--sd-foam); font-size: 13px; line-height: 1.45; color: var(--sd-ink); }
.booking-identity-cards .booking-card-warning { border-left: 3px solid var(--sd-sun); background: var(--sd-sunlight); }
.booking-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.booking-tile {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 12px;
  border: 1px solid #cfe6ea; border-radius: 12px; background: #fdfefe; text-align: center; cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--sd-sea); transition: border-color .15s, background .15s, box-shadow .15s;
}
.booking-identity-cards .booking-participant .booking-tile { margin-top: 0; }
.booking-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.booking-tile:hover { border-color: var(--sd-aqua); }
.booking-tile:has(input:checked) { border-color: var(--sd-lagoon); background: var(--sd-foam); box-shadow: inset 0 0 0 1px var(--sd-lagoon); }
.booking-tile:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(53,184,201,.3); }
.booking-tile:has(input:checked)::before { content: "✓ "; color: var(--sd-lagoon); }
.booking-identity-cards .booking-submit { width: 100%; min-height: 48px; margin-top: 6px; }
@media (max-width: 767px) {
  .booking-name-row { grid-template-columns: minmax(0, 1fr); }
  .booking-tiles { grid-template-columns: minmax(0, 1fr); }
  .booking-tile { justify-content: flex-start; text-align: left; }
  .booking-identity-cards .booking-participant { padding: 14px 14px 16px; }
}

/* (0.50.075) LES AUTRES PRESTATIONS DU DÉPART : des cartes compactes (photo miniature, titre, prix, quantité), groupées par catégorie. */
.booking-cards-compact { margin: 0 0 16px; }
.booking-card-compact {
  grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "photo body qty"; align-items: center; border-radius: 14px;
}
.booking-card-compact .booking-card-photo, .booking-card-compact .booking-card-photo img { min-height: 84px; height: 84px; }
.booking-card-compact .booking-card-body { padding: 12px 14px; }
.booking-card-compact .booking-card-title { margin: 0 0 4px; font-size: 17px; }
.booking-card-compact .booking-price { margin: 0; font-size: 13px; }
.booking-card-compact .booking-price b { font-size: 16px; color: var(--sd-deep); }
.booking-card-compact .booking-price span { color: var(--sd-muted); }
.booking-card-qty { grid-area: qty; display: block; padding: 12px 14px 12px 0; }
.booking-card-qty input { width: 72px; min-height: 44px; padding: 9px 10px; border: 1px solid #cfe6ea; border-radius: 10px; font-size: 16px; text-align: center; }
.booking-card-qty input:focus { border-color: var(--sd-aqua); box-shadow: 0 0 0 3px rgba(53,184,201,.2); outline: none; }
.booking-cards-compact .booking-category { margin-bottom: 14px; }
@media (max-width: 767px) {
  .booking-card-compact { grid-template-columns: 84px minmax(0, 1fr) auto; grid-template-areas: "photo body qty"; }
  .booking-card-compact .booking-card-photo, .booking-card-compact .booking-card-photo img { min-height: 76px; height: 76px; }
  .booking-card-compact .booking-card-body { padding: 10px 10px; }
  .booking-card-compact .booking-card-title { font-size: 15px; }
  .booking-card-qty { padding-right: 10px; }
  .booking-card-qty input { width: 60px; }
}
/* (0.50.091) Après la clôture de la veille : la journée dit que la remise en ligne ne s'applique plus ; le rendez-vous et son prix ; l'essentiel des conditions d'annulation */
.booking-day-notice { margin: 4px 0 12px; padding: 8px 12px; border-left: 3px solid var(--sd-accent, #d98b3a); border-radius: 6px; background: #fff7ec; color: #7a4a14; font-size: 14px; }
.booking-meeting-note { margin: 8px 0 0; font-size: 14px; color: var(--sd-muted); }
.booking-meeting-note strong { color: inherit; }
.booking-meeting-time { display: block; margin-top: 4px; font-size: 13px; color: var(--sd-muted); }
/* (0.50.093) L'encart d'annulation replié derrière ses deux titres (FR · EN) ; un clic déroule les deux colonnes ensemble */
.policy-fold.booking-policy { margin: 18px 0; border: 1px solid #d8e4e6; border-radius: 12px; background: #f8fbfb; }
.policy-fold > summary { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; font-weight: 600; font-size: 15px; line-height: 1.35; }
.policy-fold > summary::-webkit-details-marker { display: none; }
.policy-fold > summary:focus-visible { outline: 2px solid var(--sd-accent, #0f7c8c); outline-offset: 2px; border-radius: 10px; }
.policy-fold-chevron { flex: none; width: 8px; height: 8px; margin-top: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; }
.policy-fold[open] .policy-fold-chevron { transform: rotate(45deg); }
.policy-fold-sep { color: var(--sd-muted); font-weight: 400; }
.policy-fold-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 0 16px 14px; }
.policy-fold-column ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; line-height: 1.45; }
@media (max-width: 600px) { .policy-fold-columns { grid-template-columns: 1fr; } }
.booking-product-difference { display: block; font-size: 13px; color: var(--sd-muted); }
.booking-meeting-note.is-active { color: #7a4a14; font-weight: 600; }
.booking-meeting-repriced { margin: -6px 0 16px; padding: 10px 12px; border-left: 3px solid var(--sd-accent, #d98b3a); border-radius: 6px; background: #fff7ec; color: #7a4a14; font-size: 14px; font-weight: 600; }
/* (0.50.100) LE DÉPART SOUS CONDITION : la règle, le prix indicatif, la demande sans paiement (nom, courriel, téléphone). */
.booking-conditional-rule { margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid var(--sd-accent, #d89b34); border-radius: 8px; background: #fff7e6; color: #5a4300; font-size: 14px; }
.booking-conditional-request { display: grid; gap: 10px; margin-top: 12px; }
.booking-conditional-request .booking-field { display: grid; gap: 4px; font-size: 14px; }
.booking-conditional-request .booking-field input { min-height: 44px; padding: 8px 10px; border: 1px solid #c9d8db; border-radius: 8px; font-size: 16px; width: 100%; }