/* ============================================================
   Lightworker Collective - Composants (components.css)
   Page « Réservation » : UN SEUL ÉCRAN (pas une landing).
   Le formulaire EST la page : logo + titre + carte de parcours en
   verre liquide sur photo sombre, le tout dans 100 svh. AUCUN
   défilement de page - les étapes hautes (séances) défilent À
   L'INTÉRIEUR de la carte. Toutes les couleurs/polices viennent
   de brand.css.

   STRATÉGIE RESPONSIVE (charte §8) :
   • un seul seuil qui compte : 900px ;
   • tout en clamp() fluide + échelle :root indexée sur la HAUTEUR
     (bloc en fin de fichier) ;
   • le bloc @media (min-width:900px) reste EN FIN DE FICHIER.
   ============================================================ */

/* Rouge d'erreur - exception assumée HORS palette, héritée du formulaire
   de la page Aide (lwf-erreur). Défini UNE fois ici (brand.css est gelé).
   --ok-ink : vert sourd, exception assumée AUSSI (demande cliente : crochet
   vert / croix rouge sur l'étape de préparation). Teintes feutrées pour
   rester dans le registre premium de la marque. */
:root {
  --erreur-ink: #b4453f;
  --ok-ink: #3f7a5f;
}

/* ------------------------------------------------------------
   VERROU DE DÉFILEMENT - la page ne défile JAMAIS.
   Le fond charcoal du body évite toute bande claire si un viewport
   mobile redimensionne (barre d'URL, clavier virtuel).
   ------------------------------------------------------------ */
html, body { height: 100%; }
body {
  overflow: hidden;
  background: var(--charcoal);
}

/* ------------------------------------------------------------
   ÉCRAN UNIQUE - photo + voile charcoal (recette du hero Aide),
   contenu empilé et centré : logo · titre · carte · micro-ligne.
   ------------------------------------------------------------ */

.rsv-ecran {
  position: relative;
  overflow: hidden;               /* borne les blooms et le canvas */
  height: 100vh;
  height: 100dvh;                 /* suit la barre d'URL mobile ; repli vh */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.7rem, 1.9vh, 1.4rem);
  padding: clamp(0.8rem, 2.4vh, 2rem) clamp(1rem, 4vw, 2.5rem);
  /* CIEL ASTRAL - profondeur cosmique en dégradés radiaux bleus (Mermaid +
     Celestial) sur un noir bleuté très profond. Aucune photo. */
  background-color: #04070a;
  background-image:
    radial-gradient(120% 85% at 50% -12%,
      color-mix(in srgb, var(--color-mermaid-blue) 62%, transparent) 0%, transparent 55%),
    radial-gradient(95% 80% at 86% 16%,
      color-mix(in srgb, var(--color-celestial-tides) 34%, transparent) 0%, transparent 55%),
    radial-gradient(100% 90% at 8% 108%,
      color-mix(in srgb, var(--color-mermaid-blue) 48%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, #060c12 0%, #04070c 58%, #030405 100%);
}

/* Tout le contenu au-dessus du fond astral. */
.rsv-ecran > * { position: relative; z-index: 1; }
.rsv-ecran > .bloom { z-index: 0; }

/* Canvas galaxie : étoiles PAR-DESSUS les nébuleuses (blooms), sous le contenu. */
.rsv-ecran > .galaxy {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* En-tête : le logotype seul, discret. */
.rsv-entete { flex: 0 0 auto; text-align: center; }

/* Titre compact (Royal majuscules - mais bien plus petit qu'un hero). */
.rsv-titre {
  flex: 0 0 auto;
  margin: 0;
  font-size: clamp(1.15rem, 2.6vh, 1.6rem);
  color: var(--cream);
  text-align: center;
  text-shadow: 0 2px 18px color-mix(in srgb, var(--charcoal) 62%, transparent);
}

/* Micro-ligne sous la carte : réassurance + porte de sortie douce. */
.rsv-micro {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin: 0;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 78%, transparent);
  text-shadow: 0 1px 10px color-mix(in srgb, var(--charcoal) 60%, transparent);
}
.rsv-micro svg { width: 13px; height: 13px; flex: 0 0 auto; }
.rsv-micro a {
  color: var(--color-celestial-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rsv-micro a:hover { color: var(--cream); }

/* ------------------------------------------------------------
   Logo image (logo-lightworker.webp, fourni par la cliente).
   Hauteur bornée en vh : ne gruge jamais l'écran unique.
   ------------------------------------------------------------ */

.rsv-logo { display: inline-block; line-height: 0; }
.rsv-logo img {
  /* Mot-symbole très LARGE (1057×136) : on borne la LARGEUR (jamais
     plus large que l'écran mobile, jamais envahissant en hauteur). */
  width: min(400px, 84vw, 52vh);
  height: auto;
  filter: drop-shadow(0 2px 14px color-mix(in srgb, var(--charcoal) 55%, transparent));
}

/* ------------------------------------------------------------
   Boutons (recettes charte §6.2 - variante douce .btn--call,
   utilisée par le panneau « parcours doux »)
   ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-display);   /* Royal - parité avec la page Aide en ligne */
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.7px;
  line-height: 1;
  text-decoration: none;
  padding: 0.78em 1.75em;
  border-radius: var(--radius-btn);
  background: var(--btn-bg, var(--charcoal));
  color: var(--btn-ink, var(--cream));
  transition: transform 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft);
}

.btn-arrow { display: inline-block; transition: transform 0.35s var(--ease-soft); }

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--powder-blue) 45%, transparent);
}

.btn:hover .btn-arrow,
.btn:focus-visible .btn-arrow { transform: translateX(3px); }

.btn--call {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding-block: 1.05em;
  background: color-mix(in srgb, var(--color-celestial-tides) 9%, var(--white));
  color: var(--color-celestial-tides);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-celestial-tides) 28%, transparent);
  transition: color 0.35s var(--ease-soft), transform 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft);
}
.btn--call::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-celestial-tides);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-soft);
}
.btn--call .btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: var(--color-celestial-tides);
  color: var(--white);
  font-size: 0.82em;
  line-height: 1;
  transition: background-color 0.35s var(--ease-soft), color 0.35s var(--ease-soft);
}
.btn--call .btn-arrow svg { width: 0.95em; height: 0.95em; display: block; }
.btn--call:hover,
.btn--call:focus-visible {
  color: #fff;
  box-shadow: inset 0 0 0 1.5px transparent;
}
.btn--call:hover::before,
.btn--call:focus-visible::before { transform: scaleX(1); }
.btn--call:hover .btn-arrow,
.btn--call:focus-visible .btn-arrow {
  background: #fff;
  color: var(--color-celestial-tides);
}

/* ============================================================
   CARTE DE PARCOURS (.rsv-carte) - LIQUID GLASS de marque.
   Recette charte §6.1 : le flou vit dans ::before (parent
   overflow:hidden + isolation:isolate -> pas de tache d'angle).
   FLEX COLONNE bornée à l'écran : tête et pied fixes, la SCÈNE
   défile à l'intérieur quand une étape est plus haute que l'écran.
   ============================================================ */

.rsv-carte {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;                 /* autorise la scène à rétrécir + défiler */
  width: 100%;
  max-width: 780px;
  border-radius: 26px;
  padding: clamp(1.1rem, 2.6vh, 2rem) clamp(1.1rem, 3vw, 2.2rem);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--white) 72%, transparent);
  box-shadow:
    0 44px 100px rgba(0, 0, 0, 0.34),
    0 10px 26px rgba(0, 0, 0, 0.16),
    inset 0 2px 1px rgba(255, 255, 255, 0.95),
    inset 0 -2px 4px color-mix(in srgb, var(--color-celestial-tides) 12%, transparent);
}
.rsv-carte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(152deg,
      color-mix(in srgb, var(--white) 88%, transparent),
      color-mix(in srgb, var(--color-celestial-light) 10%, color-mix(in srgb, var(--white) 76%, transparent)) 52%,
      color-mix(in srgb, var(--white) 82%, transparent));
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
}
.rsv-carte::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 68% at 18% -8%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 26%);
}

/* Tête : barre de progression + compteur d'étape */
.rsv-tete {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: clamp(0.9rem, 2vh, 1.6rem);
}
.rsv-tete[hidden] { display: none; }   /* [hidden] vs display:flex (piège §12.3) */
.rsv-progres {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--color-celestial-tides) 16%, transparent);
  overflow: hidden;
}
.rsv-progres-barre {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--color-celestial-tides);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.45s var(--ease-soft);
}
.rsv-compteur {
  font-family: var(--font-title);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--charcoal) 64%, var(--white));   /* ≥4,5:1 (AA) */
  white-space: nowrap;
}

/* Scène : l'étape COURANTE est en flux ; la SORTANTE passe en absolu
   le temps de son fondu. C'est ICI que ça défile quand l'étape est
   plus haute que l'écran (la page, elle, ne bouge jamais). */
.rsv-scene {
  position: relative;
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;   /* le défilement interne ne « fuit » pas */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-celestial-tides) 45%, transparent) transparent;
}

/* Le temps du changement d'étape seulement : la hauteur se rend d'une
   étape à l'autre au lieu de sauter. `overflow: hidden` empêche la
   barre de défilement d'apparaître puis de disparaître pendant le
   trajet — c'est elle qui faisait vaciller la largeur des cartes. */
.rsv-scene.anime-hauteur {
  transition: height 0.34s var(--ease-soft);
  overflow: hidden;
}

.rsv-etape {
  position: relative;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity 0.34s var(--ease-soft), transform 0.34s var(--ease-soft);
}
.rsv-etape.part-gauche,
.rsv-etape.part-droite { position: absolute; inset: 0; justify-content: flex-start; }
.rsv-etape.vient-droite { opacity: 0; transform: translateX(36px); }
.rsv-etape.vient-gauche { opacity: 0; transform: translateX(-36px); }
.rsv-etape.part-gauche  { opacity: 0; transform: translateX(-36px); }
.rsv-etape.part-droite  { opacity: 0; transform: translateX(36px); }

.rsv-question {
  margin: 0;
  font-family: var(--font-display);   /* Royal, MAJUSCULES (signature) */
  font-weight: 500;
  font-size: clamp(1.28rem, 3vw, 1.6rem);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--charcoal);
}
.rsv-requis {
  margin-left: 0.28em;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.62em;
  vertical-align: super;
  color: var(--erreur-ink);
}

.rsv-aide {
  margin: 0.6rem 0 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--charcoal) 60%, var(--white));
}

/* Sous-question (étapes à plusieurs questions) */
.rsv-bloc { margin-top: clamp(1.2rem, 2.6vh, 1.9rem); }
.rsv-bloc:first-of-type { margin-top: clamp(1rem, 2.2vh, 1.6rem); }
.rsv-sous-question {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--charcoal) 78%, var(--white));
}
.rsv-sous-question .rsv-requis { vertical-align: baseline; }

/* Champs - trait de soulignement signature */
.rsv-libelle {
  display: block;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--charcoal) 62%, var(--white));
}
.rsv-champ {
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.62em 0.1em;
  font: inherit;
  font-size: 1.04rem;
  color: var(--charcoal);
  background: transparent;
  border: 0;
  border-bottom: 2px solid color-mix(in srgb, var(--charcoal) 16%, transparent);
  border-radius: 0;
  transition: border-color 0.3s var(--ease-soft);
}
.rsv-champ:focus { outline: none; border-bottom-color: var(--color-celestial-tides); }
.rsv-champ::placeholder { color: color-mix(in srgb, var(--charcoal) 52%, var(--white)); opacity: 1; }
/* Zone de texte (intention, message) : une VRAIE boîte encadrée, pas un
   simple trait. Sans cadre, on ne comprend pas que c'est là qu'on écrit. */
textarea.rsv-champ {
  resize: vertical;
  min-height: 5.4em;
  margin-top: 0.55rem;
  padding: 0.8em 1em;
  font-size: 1rem;
  line-height: 1.5;
  background: color-mix(in srgb, var(--white) 74%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--color-celestial-tides) 30%, transparent);
  border-radius: 14px;
  box-shadow: inset 0 1px 3px color-mix(in srgb, var(--charcoal) 6%, transparent);
  transition: border-color 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft);
}
textarea.rsv-champ:focus {
  outline: none;
  border-color: var(--color-celestial-tides);
  box-shadow: inset 0 1px 3px color-mix(in srgb, var(--charcoal) 6%, transparent),
              0 0 0 3px color-mix(in srgb, var(--color-celestial-tides) 16%, transparent);
}

/* « Autre » coché : la zone de texte S'ILLUMINE (halo qui pulse 3 fois puis
   reste mis en avant) pour dire « c'est ici qu'on précise ». */
textarea.rsv-champ.is-attente {
  border-color: var(--color-celestial-tides);
  background: color-mix(in srgb, var(--color-celestial-tides) 8%, var(--white));
  animation: rsv-brille 1.5s var(--ease-soft) 3;
}
@keyframes rsv-brille {
  0%, 100% {
    box-shadow: inset 0 1px 3px color-mix(in srgb, var(--charcoal) 6%, transparent),
                0 0 0 0 color-mix(in srgb, var(--color-celestial-tides) 40%, transparent);
  }
  50% {
    box-shadow: inset 0 1px 3px color-mix(in srgb, var(--charcoal) 6%, transparent),
                0 0 0 7px color-mix(in srgb, var(--color-celestial-tides) 0%, transparent),
                0 0 22px 2px color-mix(in srgb, var(--color-celestial-tides) 45%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  textarea.rsv-champ.is-attente { animation: none; }
}

/* Grille de coordonnées : 2 colonnes dès 620px */
.rsv-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem 1.5rem;
  margin-top: clamp(1rem, 2.2vh, 1.6rem);
}
@media (min-width: 620px) {
  .rsv-grille { grid-template-columns: 1fr 1fr; }
  .rsv-plein { grid-column: 1 / -1; }
}

/* Choix en pilules (mono ou multi) */
.rsv-choix { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.85rem; }
.rsv-option {
  flex: 0 1 auto;
  padding: 0.8em 1.3em;
  border-radius: 14px;
  font-family: var(--font-title);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--color-celestial-tides);
  background: color-mix(in srgb, var(--color-celestial-tides) 6%, var(--white));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-celestial-tides) 26%, transparent);
  transition: background 0.3s var(--ease-soft), color 0.3s var(--ease-soft),
              box-shadow 0.3s var(--ease-soft), transform 0.3s var(--ease-soft);
}
.rsv-option:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--color-celestial-tides); }
.rsv-option.is-choisi { background: var(--color-celestial-tides); color: var(--cream); box-shadow: none; }

/* --- RETRAITE : cartes d'options (occupation, VIP, versements) -----
   Pleine largeur, empilées, avec nom + prix + note « payable en 3 versements ». */
.rtr-choix { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1rem; }
.rtr-opt {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  padding: 1em 1.2em;
  border-radius: 16px;
  text-align: left;
  color: var(--color-celestial-tides);
  background: color-mix(in srgb, var(--color-celestial-tides) 6%, var(--white));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-celestial-tides) 26%, transparent);
  transition: background 0.3s var(--ease-soft), color 0.3s var(--ease-soft),
              box-shadow 0.3s var(--ease-soft), transform 0.3s var(--ease-soft);
}
.rtr-opt:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--color-celestial-tides); }
.rtr-opt.is-choisi { background: var(--color-celestial-tides); color: var(--cream); box-shadow: none; }
.rtr-opt-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
}
.rtr-opt-nom {
  font-family: var(--font-title);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rtr-opt-prix {
  font-family: var(--font-title);
  font-size: 1.02rem;
  font-weight: 700;
  white-space: nowrap;
}
.rtr-opt-prix small { font-size: 0.66em; font-weight: 600; opacity: 0.82; }
.rtr-opt-desc { font-size: 0.85rem; line-height: 1.4; opacity: 0.82; }
.rtr-opt-note {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.72;
}
.rtr-opt.is-choisi .rtr-opt-desc,
.rtr-opt.is-choisi .rtr-opt-note { opacity: 0.92; }

/* Champ « partenaire de lit » : révélé pour l'occupation double. */
.rtr-partenaire {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: max-height 0.4s var(--ease-soft), opacity 0.3s var(--ease-soft),
              margin-top 0.3s var(--ease-soft);
}
.rtr-partenaire.is-visible { max-height: 220px; opacity: 1; margin-top: 0.9rem; }
.rtr-partenaire .rsv-libelle { display: block; margin-bottom: 0.4rem; }

.rsv-erreur {
  margin: 0.8rem 0 0;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: var(--erreur-ink);
}

/* Pied : retour / suivant */
.rsv-pied[hidden] { display: none; }
.rsv-pied {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  margin-top: clamp(0.9rem, 2vh, 1.5rem);
}
.rsv-prec {
  font-family: var(--font-title);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--charcoal) 55%, var(--white));
  padding: 0.6em 0.2em;
  transition: color 0.3s var(--ease-soft);
}
.rsv-prec:hover { color: var(--charcoal); }
.rsv-prec[hidden] { display: none; }
.rsv-suiv {
  margin-left: auto;
  padding: 0.85em 1.9em;
  border-radius: 14px;
  background: var(--color-celestial-tides);
  color: var(--cream);
  font-family: var(--font-title);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.3s var(--ease-soft), transform 0.3s var(--ease-soft),
              box-shadow 0.3s var(--ease-soft);
}
.rsv-suiv:hover {
  background: var(--color-celestial-light);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--color-celestial-tides) 40%, transparent);
}
.rsv-suiv[hidden] { display: none; }

/* ------------------------------------------------------------
   Étape 1 - CHOIX DU SERVICE : 4 cartes-boutons
   ------------------------------------------------------------ */

.rsv-services {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin-top: clamp(1rem, 2.2vh, 1.6rem);
}
@media (min-width: 620px) { .rsv-services { grid-template-columns: 1fr 1fr; } }

.rsv-service {
  position: relative;   /* ancre le badge « À venir » */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  text-align: left;
  padding: 1.15rem 1.25rem;
  border-radius: 18px;
  background: color-mix(in srgb, var(--white) 66%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--color-celestial-tides) 22%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: transform 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft),
              background 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft);
}
.rsv-service:hover {
  transform: translateY(-3px);
  border-color: var(--color-celestial-tides);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 16px 36px color-mix(in srgb, var(--charcoal) 10%, transparent);
}
.rsv-service.is-choisi {
  background: var(--color-celestial-tides);
  border-color: var(--color-celestial-tides);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--color-celestial-tides) 35%, transparent);
}
.rsv-service.is-choisi .rsv-service-nom,
.rsv-service.is-choisi .rsv-service-desc { color: var(--cream); }
.rsv-service.is-choisi .rsv-service-icone {
  color: var(--cream);
  background: color-mix(in srgb, var(--cream) 14%, transparent);
  border-color: color-mix(in srgb, var(--cream) 30%, transparent);
}

.rsv-service-icone {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: var(--color-celestial-tides);
  background: color-mix(in srgb, var(--color-celestial-tides) 12%, var(--white));
  border: 1px solid color-mix(in srgb, var(--color-celestial-tides) 26%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: background 0.35s var(--ease-soft), color 0.35s var(--ease-soft),
              border-color 0.35s var(--ease-soft);
}
.rsv-service-icone svg { width: 22px; height: 22px; }

.rsv-service-nom {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--charcoal);
  transition: color 0.35s var(--ease-soft);
}
.rsv-service-desc {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--charcoal) 66%, var(--white));
  transition: color 0.35s var(--ease-soft);
}

/* --- Service « À venir » : visible, mais pas encore réservable ------- */
.rsv-service-badge {
  position: absolute;
  top: 0.9rem;
  right: 0.95rem;
  padding: 0.28em 0.72em;
  border-radius: 999px;
  font-family: var(--font-title);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-celestial-tides);
  background: color-mix(in srgb, var(--color-celestial-tides) 13%, var(--white));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-celestial-tides) 32%, transparent);
}
.rsv-service.is-avenir { cursor: default; }
/* Pas d'effet de survol « cliquable » sur un service à venir. */
.rsv-service.is-avenir:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--color-celestial-tides) 22%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.rsv-service.is-avenir .rsv-service-icone,
.rsv-service.is-avenir .rsv-service-nom,
.rsv-service.is-avenir .rsv-service-desc { opacity: 0.5; }

/* Mot doux affiché quand on tape un service encore à venir. */
.rsv-avenir-note {
  margin: 0.9rem 0 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--charcoal) 66%, var(--white));
}
.rsv-avenir-note[hidden] { display: none; }

/* ------------------------------------------------------------
   Étape sécurité - rangées à cocher (contre-indications)
   ------------------------------------------------------------ */

.rsv-secu {
  display: grid;
  gap: 0.55rem;
  margin-top: clamp(1rem, 2.2vh, 1.6rem);
}
.rsv-coche-ligne {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  text-align: left;
  padding: 0.78rem 1rem;
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 0.94rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--charcoal) 84%, var(--white));
  background: color-mix(in srgb, var(--white) 55%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--color-celestial-tides) 18%, transparent);
  transition: border-color 0.3s var(--ease-soft), background 0.3s var(--ease-soft);
}
.rsv-coche-ligne:hover { border-color: var(--color-celestial-tides); }
.rsv-coche-ligne.is-choisi {
  background: color-mix(in srgb, var(--color-celestial-tides) 10%, var(--white));
  border-color: var(--color-celestial-tides);
}
.rsv-coche-case {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  color: transparent;
  background: var(--white);
  border: 1.5px solid color-mix(in srgb, var(--color-celestial-tides) 40%, transparent);
  transition: background 0.3s var(--ease-soft), color 0.3s var(--ease-soft),
              border-color 0.3s var(--ease-soft);
}
.rsv-coche-case svg { width: 13px; height: 13px; }
.rsv-coche-ligne.is-choisi .rsv-coche-case {
  background: var(--color-celestial-tides);
  border-color: var(--color-celestial-tides);
  color: var(--cream);
}
/* La rangée « aucune de ces situations » se détache légèrement. */
.rsv-coche-ligne--aucune { margin-top: 0.5rem; font-weight: 600; }

.rsv-confidentiel {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--charcoal) 62%, var(--white));   /* ≥4,5:1 (AA) */
}
.rsv-confidentiel svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* Panneau « profil non éligible » - doux, jamais un refus. */
.rsv-bloque {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
  padding-block: 0.5rem;
}
.rsv-bloque-icone {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: var(--cream);
  background: var(--color-celestial-tides);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--color-celestial-tides) 38%, transparent);
}
.rsv-bloque-icone svg { width: 26px; height: 26px; }
.rsv-bloque .rsv-aide { max-width: 34rem; }
.rsv-bloque .btn--call { margin-top: 0.6rem; }
.rsv-bloque .link-btn {
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--charcoal) 55%, var(--white));
}

/* Écran « Est-ce que c'est actuel ? ». Le lien de retour touchait
   presque la seconde case : on l'écarte pour qu'il se lise comme une
   sortie de secours, et non comme un troisième choix. */
.rsv-anciennete .link-btn {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--charcoal) 55%, var(--white));
}

/* ------------------------------------------------------------
   Étape séances - recherche par code postal + liste
   ------------------------------------------------------------ */

.rsv-cp-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: clamp(1rem, 2vh, 1.5rem);
}
.rsv-cp-champ {
  flex: 1 1 180px;
  padding: 0.72em 1.1em;
  font: inherit;
  font-size: 1.04rem;   /* ≥16px rendus sur mobile : évite le zoom auto iOS */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--charcoal);
  background: color-mix(in srgb, var(--white) 74%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--color-celestial-tides) 26%, transparent);
  border-radius: 14px;
  transition: border-color 0.3s var(--ease-soft);
}
.rsv-cp-champ:focus { outline: none; border-color: var(--color-celestial-tides); }
.rsv-cp-champ::placeholder { text-transform: none; letter-spacing: 0; color: color-mix(in srgb, var(--charcoal) 52%, var(--white)); opacity: 1; }
.rsv-cp-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.72em 1.4em;
  border-radius: 14px;
  background: var(--color-celestial-tides);
  color: var(--cream);
  font-family: var(--font-title);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.3s var(--ease-soft), transform 0.3s var(--ease-soft);
}
.rsv-cp-btn:hover { background: var(--color-celestial-light); transform: translateY(-2px); }
.rsv-cp-btn svg { width: 15px; height: 15px; }
.rsv-cp-note {
  margin: 0.55rem 0 0;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--charcoal) 62%, var(--white));   /* ≥4,5:1 (AA) */
}

.sess-liste {
  display: grid;
  gap: 0.75rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}

.sess-carte {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2.4vw, 1.2rem);
  width: 100%;
  text-align: left;
  padding: 0.9rem 1.05rem;
  border-radius: 18px;
  background: color-mix(in srgb, var(--white) 66%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--color-celestial-tides) 20%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: transform 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft),
              box-shadow 0.35s var(--ease-soft), background 0.35s var(--ease-soft);
}
.sess-carte:hover:not(.is-complet) {
  transform: translateY(-2px);
  border-color: var(--color-celestial-tides);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 32px color-mix(in srgb, var(--charcoal) 9%, transparent);
}
/* (La seance choisie est traitee en FIN DE FEUILLE : elle doit
   l'emporter sur les regles « week-end », de meme specificite.) */
/* Séance complète : atténuée par le FOND (pas par l'opacité du texte,
   qui deviendrait illisible) ; reste dans l'ordre de tabulation avec
   aria-disabled (le clic est ignoré côté JS). */
.sess-carte.is-complet {
  cursor: not-allowed;
  background: color-mix(in srgb, var(--white) 34%, transparent);
  border-style: dashed;
  box-shadow: none;
}

/* Bloc date (jour en Royal, mois en petites capitales) */
.sess-date {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 58px;
  padding: 0.5rem 0.2rem;
  border-radius: 13px;
  background: color-mix(in srgb, var(--color-celestial-tides) 10%, var(--white));
  border: 1px solid color-mix(in srgb, var(--color-celestial-tides) 22%, transparent);
}
.sess-jour {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.45rem;
  line-height: 1;
  color: var(--charcoal);
}
.sess-mois {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-celestial-tides);
  margin-top: 0.25em;
}

.sess-infos { flex: 1 1 auto; min-width: 0; }
.sess-titre {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.98rem;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--charcoal);
}
.sess-lieu {
  margin: 0.15rem 0 0;
  font-size: 0.84rem;
  color: color-mix(in srgb, var(--charcoal) 62%, var(--white));
}
/* ---- Barre d'ordre + actualisation ------------------------------
   Les bascules d'ordre à gauche, l'action d'actualisation à droite.
   Elles se replient l'une sous l'autre quand la carte devient étroite. */
.sess-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin: 0.85rem 0 0.15rem;
}
.sess-tri {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.35rem;
  min-width: 0;
}
.sess-tri-titre {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--charcoal) 52%, var(--white));
  margin-right: 0.15rem;
}
.sess-tri-btn {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  padding: 0.4em 0.85em;
  border-radius: var(--radius-btn);
  cursor: pointer;
  color: var(--color-celestial-tides);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-celestial-tides) 26%, transparent);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.sess-tri-btn:hover:not(:disabled):not(.is-actif) {
  background: color-mix(in srgb, var(--color-celestial-tides) 8%, var(--white));
  border-color: color-mix(in srgb, var(--color-celestial-tides) 42%, transparent);
}
/* L'ordre actif est plein : au premier coup d'œil on sait lequel s'applique. */
.sess-tri-btn.is-actif {
  color: var(--white);
  background: var(--color-celestial-tides);
  border-color: var(--color-celestial-tides);
}
.sess-tri-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.sess-maj {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  flex: 0 0 auto;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  padding: 0.4em 0.8em;
  border-radius: var(--radius-btn);
  cursor: pointer;
  color: color-mix(in srgb, var(--charcoal) 62%, var(--white));
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--color-celestial-tides) 20%, transparent);
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.sess-maj svg { width: 13px; height: 13px; }
/* Au survol, la pastille se remplit de bleu : l'action se signale
   franchement, alors qu'au repos elle reste discrète - actualiser est
   utile, mais ce n'est pas ce qu'on vient faire sur cette étape. */
.sess-maj:hover:not(:disabled),
.sess-maj:focus-visible:not(:disabled) {
  color: var(--white);
  background: var(--color-celestial-tides);
  border-color: var(--color-celestial-tides);
}
.sess-maj:disabled { cursor: progress; opacity: 0.7; }
/* Pendant le chargement, seule l'icône tourne : le libellé doit rester
   lisible, un bouton entier qui pivote serait illisible et agité. */
.sess-maj.is-charge svg { animation: sess-maj-tourne 0.9s linear infinite; }
@keyframes sess-maj-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .sess-maj.is-charge svg { animation: none; opacity: 0.55; }
}
/* Attente pendant la lecture des disponibilités dans GoHighLevel. */
.sess-attente {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
}

/* Sur mobile, la barre repoussait la première séance sous la ligne de
   flottaison. On resserre et on retire le mot « Afficher » : le groupe
   porte déjà son aria-label, les lecteurs d'écran ne perdent rien. */
@media (max-width: 480px) {
  .sess-barre { gap: 0.4rem 0.5rem; }
  .sess-tri-titre { display: none; }
  .sess-tri-btn,
  .sess-maj { font-size: 0.63rem; padding: 0.36em 0.68em; }
}

/* Adresse complète (rue, ville, province, code postal), telle que GHL la
   fournit. Un cran plus discrète que la ligne date/salle : c'est une
   information de repérage, pas un argument de choix. */
.sess-adresse {
  margin: 0.1rem 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--charcoal) 48%, var(--white));
}
.sess-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.45rem;
  margin-top: 0.45rem;
}
.sess-puce {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.32em 0.75em;
  border-radius: var(--radius-btn);
  color: var(--color-celestial-tides);
  background: color-mix(in srgb, var(--color-celestial-tides) 9%, var(--white));
  border: 1px solid color-mix(in srgb, var(--color-celestial-tides) 22%, transparent);
}
.sess-puce svg { width: 11px; height: 11px; }
/* Alerte (« Complet », « Plus que X places ») : on reste dans l'accent
   bleu unique (l'or est dormant, charte §2) - la distinction passe par
   le poids et une bordure plus présente. */
.sess-puce--alerte {
  color: var(--color-celestial-tides);
  background: color-mix(in srgb, var(--color-celestial-tides) 16%, var(--white));
  border-color: color-mix(in srgb, var(--color-celestial-tides) 48%, transparent);
  font-weight: 700;
}

.sess-cote {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}
.sess-choisir {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-celestial-tides);
  white-space: nowrap;
}
.sess-carte.is-choisi .sess-choisir { color: var(--charcoal); }

/* Puce de durée d'une retraite (« Immersion 3 jours ») - un peu plus affirmée. */
.sess-puce--duree {
  color: var(--cream);
  background: var(--color-celestial-tides);
  border-color: transparent;
  font-weight: 700;
}

/* ------------------------------------------------------------
   FILE D'ATTENTE (retraites complètes) - carte d'invitation +
   panneau de consentement.
   ------------------------------------------------------------ */

.rsv-attente:empty { display: none; }

.rsv-attente-carte {
  margin-top: 1rem;
  padding: 1.1rem 1.2rem 1.2rem;
  border-radius: 18px;
  text-align: center;
  background: color-mix(in srgb, var(--color-celestial-tides) 9%, var(--white));
  border: 1.5px dashed color-mix(in srgb, var(--color-celestial-tides) 42%, transparent);
}
.rsv-attente-titre {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: var(--charcoal);
}
.rsv-attente-titre > span[aria-hidden] { color: var(--color-celestial-tides); }
.rsv-attente-txt {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--charcoal) 66%, var(--white));
}
.rsv-attente-btn {
  margin-top: 0.95rem;
  padding: 0.8em 1.6em;
  border-radius: 14px;
  background: var(--color-celestial-tides);
  color: var(--cream);
  font-family: var(--font-title);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.3s var(--ease-soft), transform 0.3s var(--ease-soft),
              box-shadow 0.3s var(--ease-soft);
}
.rsv-attente-btn:hover {
  background: var(--color-celestial-light);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--color-celestial-tides) 40%, transparent);
}

/* VARIANTE DISCRÈTE - des places sont ENCORE LIBRES.
   La file d'attente reste offerte (on peut viser une date pas encore
   annoncée). La carte reste sans cadre ni aplat ; son BOUTON, lui, est
   devenu un rectangle bleu qui sautille (demande d'Alexy, 7 oct. 2026)
   — voir « LE BOUTON DE LA FILE D'ATTENTE » en fin de feuille. */
.rsv-attente-carte--discret {
  margin-top: 0.9rem;
  padding: 0;
  background: none;
  border: 0;
}
.rsv-attente-carte--discret .rsv-attente-txt {
  margin-top: 0;
  font-size: 0.86rem;
}
.rsv-attente-carte--discret .rsv-attente-btn {
  margin-top: 0.25rem;
  padding: 0.2em 0;
  border-radius: 0;
  background: none;
  color: var(--color-celestial-tides);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rsv-attente-carte--discret .rsv-attente-btn:hover {
  background: none;
  transform: none;
  box-shadow: none;
  color: var(--color-celestial-light);
}

/* Pied de panneau autonome (file d'attente) : même rythme que .rsv-pied. */
.rsv-pied-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  margin-top: clamp(0.9rem, 2vh, 1.5rem);
}

/* Lignes de consentement autonomes (file d'attente, paiement) : le texte
   court sur plusieurs lignes, la case reste alignée en haut. */
.rsv-etape > .rsv-coche-ligne[data-attente-consent],
.rsv-etape > .rsv-consent {
  align-items: flex-start;
  margin-top: clamp(1rem, 2.2vh, 1.5rem);
}
.rsv-coche-ligne[data-attente-consent] .rsv-coche-case,
.rsv-consent .rsv-coche-case { margin-top: 0.1rem; }
/* Mention légale : un cran plus discret que les questions du parcours. */
.rsv-consent { font-size: 0.86rem; line-height: 1.45; }

/* Consentement éclairé (activation Kundalini) : le texte complet, juste
   au-dessus de sa case. Il défile dans sa propre zone pour que le bouton
   de paiement reste à portée, même sur un téléphone. */
.rsv-consent-doc {
  margin-top: clamp(1rem, 2.2vh, 1.5rem);
  max-height: min(17rem, 42vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-celestial-tides) 45%, transparent) transparent;
  padding: 0.95rem 1.1rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--white) 55%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--color-celestial-tides) 18%, transparent);
  font-size: 0.84rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--charcoal) 84%, var(--white));
}
.rsv-consent-doc:focus-visible {
  outline: 2px solid var(--color-celestial-tides);
  outline-offset: 2px;
}
.rsv-consent-doc p { margin: 0 0 0.6rem; }
.rsv-consent-doc p:last-child { margin-bottom: 0; }
.rsv-consent-doc .rsv-consent-doc-titre {
  margin-bottom: 0.1rem;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.rsv-consent-doc .rsv-consent-doc-sig {
  margin-bottom: 0.85rem;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--charcoal) 64%, var(--white));   /* ≥4,5:1 (AA) */
}
.rsv-consent-doc .rsv-consent-doc-section {
  margin: 0.95rem 0 0.3rem;
  font-weight: 600;
  color: var(--charcoal);
}
/* La case suit son texte de près : c'est le même engagement. */
.rsv-etape > .rsv-consent-doc + .rsv-consent { margin-top: 0.7rem; }

.sess-vide {
  margin: 1.4rem 0 0;
  padding: 1.2rem 1.3rem;
  border-radius: 16px;
  font-size: 0.94rem;
  color: color-mix(in srgb, var(--charcoal) 66%, var(--white));
  background: color-mix(in srgb, var(--white) 55%, transparent);
  border: 1.5px dashed color-mix(in srgb, var(--color-celestial-tides) 32%, transparent);
}

/* ------------------------------------------------------------
   Étape « Comment ça se passe » (services SUR RENDEZ-VOUS) -
   les 3 jalons du rappel sous 24 h, numérotés.
   ------------------------------------------------------------ */

.rdv-liste {
  display: grid;
  gap: 0.65rem;
  margin: clamp(1rem, 2.2vh, 1.6rem) 0 0;
  padding: 0;
  list-style: none;
}
.rdv-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.9rem 1.05rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--white) 60%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--color-celestial-tides) 20%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.rdv-num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-celestial-tides);
  color: var(--cream);
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  line-height: 1;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-celestial-tides) 35%, transparent);
}
.rdv-txt { display: grid; gap: 0.22rem; }
.rdv-txt strong {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.rdv-txt > span {
  font-size: 0.88rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--charcoal) 66%, var(--white));
}

/* ------------------------------------------------------------
   Étape PRÉPARATION - deux colonnes : à faire (crochet vert) /
   à ne pas faire (croix rouge). Empilées sous 620px.
   ------------------------------------------------------------ */

.prep-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin-top: clamp(1rem, 2.2vh, 1.6rem);
}
@media (min-width: 620px) { .prep-grille { grid-template-columns: 1fr 1fr; } }

.prep-col {
  padding: 1.05rem 1.15rem 1.15rem;
  border-radius: 18px;
  background: color-mix(in srgb, var(--white) 62%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--charcoal) 10%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.prep-col--faire {
  background: color-mix(in srgb, var(--ok-ink) 6%, var(--white));
  border-color: color-mix(in srgb, var(--ok-ink) 30%, transparent);
}
.prep-col--eviter {
  background: color-mix(in srgb, var(--erreur-ink) 5%, var(--white));
  border-color: color-mix(in srgb, var(--erreur-ink) 26%, transparent);
}

.prep-titre {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin: 0 0 0.8rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: var(--charcoal);
}
.prep-badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--white);
}
.prep-badge svg { width: 13px; height: 13px; }
.prep-badge--ok  { background: var(--ok-ink);     box-shadow: 0 6px 14px color-mix(in srgb, var(--ok-ink) 35%, transparent); }
.prep-badge--non { background: var(--erreur-ink); box-shadow: 0 6px 14px color-mix(in srgb, var(--erreur-ink) 32%, transparent); }

.prep-liste {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.prep-liste li {
  display: flex;
  align-items: flex-start;
  gap: 0.55em;
  font-size: 0.88rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--charcoal) 82%, var(--white));
}
.prep-puce { flex: 0 0 auto; margin-top: 0.15em; }
.prep-puce svg { display: block; width: 14px; height: 14px; }
.prep-puce--ok  { color: var(--ok-ink); }
.prep-puce--non { color: var(--erreur-ink); }

/* ------------------------------------------------------------
   Étape récapitulatif + paiement
   ------------------------------------------------------------ */

.rsv-recap {
  margin-top: clamp(1rem, 2.2vh, 1.6rem);
  border-radius: 18px;
  padding: 0.4rem 1.2rem;
  background: color-mix(in srgb, var(--white) 60%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--color-celestial-tides) 18%, transparent);
}
.rsv-recap-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid color-mix(in srgb, var(--charcoal) 9%, transparent);
  font-size: 0.94rem;
}
.rsv-recap-ligne:last-child { border-bottom: 0; }
.rsv-recap-cle {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--charcoal) 55%, var(--white));
  white-space: nowrap;
}
.rsv-recap-val { text-align: right; color: var(--charcoal); }
.rsv-recap-total .rsv-recap-cle { color: var(--charcoal); }
.rsv-recap-total .rsv-recap-val {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.5rem;
  letter-spacing: 0.5px;
}
/* Mention « payable aussi en 3 versements » sous le total de la retraite. */
.rsv-recap-note {
  margin: 0.7rem 0 0;
  text-align: center;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--charcoal) 62%, var(--white));
}

/* Ventilation des taxes, sous le total du récapitulatif. Discrète : c'est
   une mention légale, pas un argument de vente. Elle porte les numéros
   d'inscription TPS/TVQ, d'où la césure autorisée sur les longues lignes. */
.rsv-taxes {
  margin: 0.45rem 0 0;
  padding-top: 0.45rem;
  border-top: 1px solid color-mix(in srgb, var(--charcoal) 10%, transparent);
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--charcoal) 52%, var(--white));
  overflow-wrap: anywhere;
}

/* Bouton Stripe (démo visuelle - voir main.js pour le point d'intégration)
   et son jumeau « Envoyer ma demande » (parcours sur rendez-vous). */
.rsv-stripe,
.rsv-envoyer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  width: 100%;
  margin-top: 1.2rem;
  padding: 1.05em 1.4em;
  border-radius: 16px;
  background: var(--color-celestial-tides);
  color: var(--cream);
  font-family: var(--font-title);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;   /* le bouton retraite est un <a> (lien Stripe) */
  transition: background 0.3s var(--ease-soft), transform 0.3s var(--ease-soft),
              box-shadow 0.3s var(--ease-soft);
}
.rsv-stripe:hover,
.rsv-envoyer:hover {
  background: var(--color-celestial-light);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--color-celestial-tides) 40%, transparent);
}
.rsv-stripe svg,
.rsv-envoyer svg { width: 16px; height: 16px; flex: 0 0 auto; }
.rsv-stripe-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4em 0.55em;
  margin: 0.85rem 0 0;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--charcoal) 62%, var(--white));   /* ≥4,5:1 (AA) */
}
.rsv-stripe-note > svg { width: 13px; height: 13px; flex: 0 0 auto; }   /* cadenas */
.rsv-secu-txt { white-space: nowrap; }

/* Rangée de logos de paiement en pastilles blanches. */
.rsv-cartes { display: inline-flex; align-items: center; gap: 0.3em; }
.rsv-carte-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 4px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(0, 0, 0, 0.07);
}
/* Dimensions portées par les attributs width/height des SVG (les <text>
   et cercles n'ont pas de largeur intrinsèque -> width:auto s'effondrerait). */
.rsv-carte-logo svg { display: block; }

/* ------------------------------------------------------------
   SIMULATION DE PAIEMENT (en attendant le vrai Stripe)
   ------------------------------------------------------------ */

.stripe-sim-banniere {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  padding: 0.7em 1em;
  border-radius: 12px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #8a5a20;
  background: color-mix(in srgb, #CC9C54 16%, var(--white));
  border: 1.5px dashed color-mix(in srgb, #CC9C54 55%, transparent);
}

.stripe-sim-boite {
  margin-top: clamp(1rem, 2.2vh, 1.6rem);
  padding: clamp(1.2rem, 3vh, 1.9rem) 1.2rem;
  border-radius: 18px;
  text-align: center;
  background: color-mix(in srgb, var(--white) 70%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--charcoal) 10%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.stripe-sim-marque { display: inline-flex; }
.stripe-sim-libelle {
  margin: 0.8rem 0 0;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--charcoal) 58%, var(--white));
}
.stripe-sim-montant {
  margin: 0.25rem 0 0;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 2rem;
  line-height: 1.1;
  color: var(--charcoal);
}
.stripe-sim-detail {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--charcoal) 62%, var(--white));
}
.stripe-sim-cartes { display: flex; justify-content: center; gap: 0.3em; margin-top: 1rem; }

/* ------------------------------------------------------------
   FORMULAIRE DE CONSENTEMENT (après paiement)
   ------------------------------------------------------------ */

.csn-facultatif {
  margin-left: 0.6em;
  padding: 0.3em 0.7em;
  border-radius: var(--radius-btn);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.52em;
  letter-spacing: 0.12em;
  vertical-align: middle;
  color: var(--color-celestial-tides);
  background: color-mix(in srgb, var(--color-celestial-tides) 12%, var(--white));
}

.csn-liste {
  display: grid;
  gap: 0.5rem;
  margin: clamp(0.9rem, 2vh, 1.3rem) 0 0;
  padding: 0;
  list-style: none;
}
.csn-liste li {
  display: flex;
  align-items: flex-start;
  gap: 0.55em;
  font-size: 0.9rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--charcoal) 78%, var(--white));
}
.csn-puce { flex: 0 0 auto; margin-top: 0.2em; color: var(--color-celestial-tides); }
.csn-puce svg { display: block; width: 13px; height: 13px; }

.csn-citation {
  margin: clamp(0.9rem, 2vh, 1.3rem) 0 0;
  padding: 0.9rem 1.1rem;
  border-radius: 14px;
  border-left: 3px solid var(--color-celestial-tides);
  font-family: var(--font-editorial);
  font-size: 0.92rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--charcoal) 82%, var(--white));
  background: color-mix(in srgb, var(--color-celestial-tides) 7%, var(--white));
}

.csn-precision { display: block; margin-top: clamp(1rem, 2.2vh, 1.5rem); }

/* Bloc signature */
.csn-signature { margin-top: clamp(1rem, 2.2vh, 1.5rem); }
.csn-champ { display: block; }
.csn-date {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  margin: 1.1rem 0 0;
  font-size: 0.94rem;
  color: var(--charcoal);
}
.csn-sig-titre { margin: 1.2rem 0 0.45rem; }
.csn-pad {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--white) 82%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--color-celestial-tides) 32%, transparent);
  box-shadow: inset 0 1px 3px color-mix(in srgb, var(--charcoal) 7%, transparent);
}
.csn-pad canvas {
  display: block;
  width: 100%;
  height: 150px;
  touch-action: none;   /* le doigt dessine, il ne fait pas défiler */
  cursor: crosshair;
}
.csn-effacer {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.42em 0.9em;
  border-radius: var(--radius-btn);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-celestial-tides);
  background: color-mix(in srgb, var(--white) 88%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-celestial-tides) 26%, transparent);
}
.csn-effacer:hover { box-shadow: inset 0 0 0 1.5px var(--color-celestial-tides); }
.csn-sig-aide { font-size: 0.82rem; }

/* États (envoi, succès, blocage) - centrés */
.rsv-etat { align-items: center; text-align: center; }
.rsv-etat .rsv-aide { margin-top: 0.7rem; max-width: 32rem; }
.rsv-etat .rsv-suiv { margin: 1.4rem auto 0; }

/* Écrans finaux : « Nouvelle réservation » (plein) + « Revenir au site »
   (bouton SECONDAIRE contouré - même gabarit, hiérarchie claire). */
.rsv-etat-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1.5rem;
}
.rsv-etat-actions .rsv-suiv { margin: 0; }

.rsv-secondaire {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85em 1.9em;
  border-radius: 14px;
  font-family: var(--font-title);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-celestial-tides);
  background: color-mix(in srgb, var(--color-celestial-tides) 6%, var(--white));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-celestial-tides) 30%, transparent);
  transition: background 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft),
              transform 0.3s var(--ease-soft);
}
.rsv-secondaire:hover,
.rsv-secondaire:focus-visible {
  background: color-mix(in srgb, var(--color-celestial-tides) 13%, var(--white));
  box-shadow: inset 0 0 0 1.5px var(--color-celestial-tides);
  transform: translateY(-2px);
}
/* « J'ai besoin de plus d'info avant de réserver », dans le PIED de la
   carte, en face de « Retour » — là où « Suivant » laisse une place
   vide sur le récapitulatif. Le pied ne défile jamais : le bouton se
   voit donc sans aller le chercher, sur n'importe quelle hauteur
   d'écran. (Sous le bouton de paiement, il fallait défiler.)

   Un cran plus discret que la base : il ne doit pas concurrencer
   « Payer », juste au-dessus. Et le droit de passer à la ligne — la
   phrase est longue, le « nowrap » de la base la ferait déborder. */
.rsv-pied-infos[hidden] { display: none; }
.rsv-pied-infos {
  padding: 0.75em 1.35em;
  font-size: 0.74rem;
  line-height: 1.3;
  white-space: normal;
  text-align: center;
}
/* SUR TÉLÉPHONE, le bouton change de place : il quitte le pied et va
   sous « Payer », dans la partie qui défile (.rsv-recap-infos).

   Le pied d'un téléphone est petit et toujours à l'écran. Y épingler
   « plus d'info » pendant que « Payer », lui, demande de défiler, ce
   serait montrer la sortie avant la caisse — et rogner d'autant la
   place laissée au récapitulatif. Sur un écran large, le problème
   n'existe pas : « Payer » et le pied tiennent ensemble. */
.rsv-recap-infos {
  display: none;
  width: 100%;
  margin-top: 1rem;
  white-space: normal;
  text-align: center;
  line-height: 1.35;
}
@media (max-width: 560px) {
  .rsv-pied-infos { display: none; }
  .rsv-recap-infos { display: flex; }
}
.rsv-spin {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--color-celestial-tides) 22%, transparent);
  border-top-color: var(--color-celestial-tides);
  animation: rsv-tourne 0.75s linear infinite;
}
@keyframes rsv-tourne { to { transform: rotate(360deg); } }
.rsv-coche {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 0.3rem;
  border-radius: 50%;
  color: var(--cream);
  background: var(--color-celestial-tides);
}
.rsv-coche svg { width: 25px; height: 25px; }

.link-btn { text-decoration: underline; text-underline-offset: 3px; color: inherit; cursor: pointer; }

/* ============================================================
   VERSANT MOBILE - @media (max-width: 899px)
   On ne redéfinit JAMAIS une taille globale : on relève des
   planchers de clamp() et on compacte les composants.
   ============================================================ */
@media (max-width: 899px) {
  /* Écran unique compacté. */
  .rsv-ecran { padding-inline: 0.85rem; gap: clamp(0.55rem, 1.6vh, 1rem); }
  .rsv-titre { font-size: clamp(1.05rem, 2.4vh, 1.35rem); }
  .logo-light { font-size: 1.3rem; }
  .logo-worker { font-size: 0.88rem; }
  .rsv-micro { font-size: 0.62rem; }

  /* Carte de parcours compactée. */
  .rsv-carte { padding: 1rem 0.95rem 1.1rem; border-radius: 20px; }

  /* Séances : la carte passe en 2 rangées (date+infos / prix à droite). */
  .sess-carte { flex-wrap: wrap; padding: 0.85rem 0.95rem; }
  .sess-cote {
    flex: 1 1 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.55rem;
    margin-top: 0.25rem;
    border-top: 1px solid color-mix(in srgb, var(--charcoal) 8%, transparent);
  }

  /* Flou ALLÉGÉ sur mobile (charte §6.1/§10 : backdrop-filter coûteux GPU,
     garder ≤ 8px) - la carte de parcours est la plus grande
     surface floutée de la page. */
  .rsv-carte::before {
    -webkit-backdrop-filter: blur(8px) saturate(1.4);
    backdrop-filter: blur(8px) saturate(1.4);
  }
}

/* ============================================================
   ÉCHELLE PILOTÉE PAR LA HAUTEUR - le correctif « laptop »
   (charte §8.1). 16px au-dessus de ~900px de haut, descend à
   12,5px sur un laptop bas. Réservé au desktop.
   ============================================================ */
@media (min-width: 900px) {
  :root { font-size: clamp(12.5px, 1.78vh, 16px); }
}

/* ============================================================
   VOILE D'ACTUALISATION — « Actualiser » les disponibilités.

   Relire GoHighLevel prend quelques secondes : une vingtaine
   d'appels réseau. Sans rien à l'écran, la personne cliquait deux
   fois, ou croyait le bouton cassé. Ce voile occupe l'attente et,
   surtout, se ferme quand la lecture est VRAIMENT finie.

   La jauge n'annonce pas une durée qu'on ne connaît pas : elle
   progresse en ralentissant vers 92 %, puis saute à 100 % à
   l'arrivée des données. Elle dit « ça avance », jamais « il reste
   trois secondes ».
   ============================================================ */
.rsv-voile {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: color-mix(in srgb, var(--color-ocean-deep) 62%, transparent);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  backdrop-filter: blur(6px) saturate(1.2);
  /* PAS de fill-mode : l'etat normal est VISIBLE. Une animation qui ne
     tourne jamais (onglet en arriere-plan, moteur qui la refuse) laisserait
     sinon le voile invisible et la personne devant un ecran fige. */
  animation: rsv-voile-entre 0.22s ease-out;
}
/* La sortie, elle, DOIT tenir sur 0 : sans « forwards » le voile
   reapparaitrait le temps du retrait du DOM. */
.rsv-voile[data-ferme="1"] { animation: rsv-voile-sort 0.28s ease-in forwards; }

@keyframes rsv-voile-entre { from { opacity: 0; } to { opacity: 1; } }
@keyframes rsv-voile-sort  { to   { opacity: 0; } }

.rsv-voile-carte {
  width: min(23rem, 100%);
  padding: 1.6rem 1.5rem 1.5rem;
  border-radius: var(--radius-soft);
  text-align: center;
  background: var(--color-divine-veil);
  border: 1px solid color-mix(in srgb, var(--color-celestial-tides) 26%, transparent);
  box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--color-ocean-deep) 70%, transparent);
  animation: rsv-voile-monte 0.32s cubic-bezier(.2,.8,.3,1);
}
@keyframes rsv-voile-monte {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.rsv-voile-titre {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.06rem;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--charcoal);
}
.rsv-voile-txt {
  margin: 0.55rem 0 0;
  font-size: 0.89rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--charcoal) 64%, var(--white));
  min-height: 2.7em;               /* le texte change : pas de saut de hauteur */
}

/* --- La jauge --- */
.rsv-jauge {
  margin-top: 1.15rem;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-celestial-tides) 18%, transparent);
}
.rsv-jauge-barre {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  /* Le CLAIR à gauche, le FONCÉ à droite : la pointe qui avance doit
     trancher sur la piste. Dans l'autre sens, une barre pleine se
     fondait dans le fond et se lisait comme une barre à 80 %. */
  background: linear-gradient(
    90deg,
    var(--color-celestial-light),
    var(--color-mermaid-blue)
  );
  transition: width 0.4s cubic-bezier(.25,.9,.35,1);
}
/* Le reflet qui glisse : c'est lui qui dit « ça travaille » pendant
   que la jauge ralentit. Il disparaît une fois la barre pleine. */
.rsv-jauge-barre::after {
  content: '';
  display: block;
  height: 100%;
  width: 45%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--white) 55%, transparent),
    transparent
  );
  animation: rsv-jauge-reflet 1.35s ease-in-out infinite;
}
.rsv-jauge[data-fini="1"] .rsv-jauge-barre::after { animation: none; opacity: 0; }

@keyframes rsv-jauge-reflet {
  from { transform: translateX(-100%); }
  to   { transform: translateX(320%); }
}

.rsv-voile-pourcent {
  margin: 0.6rem 0 0;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--color-celestial-tides);
}

/* Écran qui n'aime pas le mouvement : on garde le voile et la
   progression (l'information), on retire le glissement (l'effet). */
@media (prefers-reduced-motion: reduce) {
  .rsv-voile,
  .rsv-voile[data-ferme="1"],
  .rsv-voile-carte { animation: none; }
  .rsv-jauge-barre { transition: none; }
  .rsv-jauge-barre::after { animation: none; opacity: 0; }
}

/* ============================================================
   « CE WEEK-END » — la seance qui a lieu dans les jours qui viennent.

   Une personne qui parcourt une liste de vingt dates cherche d'abord
   « quand puis-je y aller ». Une seance samedi prochain merite donc
   d'etre vue AVANT d'etre lue : d'ou le halo bleu et la puce pleine,
   les deux seuls elements de la liste qui portent la couleur d'accent
   a pleine saturation.

   Rien d'autre ne change : meme taille, meme place dans l'ordre. On
   attire l'oeil, on ne rearrange pas la liste sous les pieds de la
   personne.
   ============================================================ */
.sess-carte.is-weekend {
  /* Fond plus clair, bordure franche, halo bleu : les trois ensemble.
     Une seule de ces marques se perd dans une liste de vingt cartes. */
  background: color-mix(in srgb, var(--white) 92%, transparent);
  border-color: var(--color-celestial-light);
  border-width: 2px;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--color-celestial-light) 24%, transparent),
    0 10px 30px -14px color-mix(in srgb, var(--color-mermaid-blue) 70%, transparent);
}
.sess-carte.is-weekend:hover,
.sess-carte.is-weekend:focus-visible {
  border-color: color-mix(in srgb, var(--color-celestial-light) 82%, transparent);
}

/* La date, a gauche, prend l'accent elle aussi : c'est elle qu'on
   cherche du regard quand on balaie une liste de dates. */
/* Le bloc de date passe en bleu plein : c'est lui qu'on balaie du
   regard dans une liste de dates, autant qu'il porte le signal. */
.sess-carte.is-weekend .sess-date {
  background: var(--color-mermaid-blue);
  border-color: var(--color-mermaid-blue);
  color: var(--color-divine-veil);
}
.sess-carte.is-weekend .sess-jour,
.sess-carte.is-weekend .sess-mois { color: var(--color-divine-veil); }

.sess-puce--weekend {
  background: var(--color-mermaid-blue);
  border-color: var(--color-mermaid-blue);
  color: var(--color-divine-veil);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Deux choix cote a cote — le sas « prete a reserver ? ». La grille des
   services est prevue pour quatre cartes ; a deux, sans cette variante,
   elles s'etirent sur toute la largeur et perdent leur allure de choix. */
.rsv-services--duo {
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

/* ---- PAGE PUB : la carte mise en avant -----------------------------
   Sur la page d'atterrissage publicitaire, une reponse est deja la
   bonne : « oui, je reserve ». Elle ne change pas de fond — elle
   s'ENTOURE d'or. Un aplat de couleur aurait eu l'air d'un bouton deja
   presse ; un contour dit « c'est par ici » sans rien decider a la
   place de la personne.

   L'or ne touche pas au texte : sur une carte claire, l'encre sombre
   reste la plus lisible, et l'or n'a pas besoin d'etre partout pour se
   faire voir. */
[data-parcours="pub"] .rsv-service--phare {
  border-color: var(--color-sand-gold);
  border-width: 2px;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--color-sand-gold) 26%, transparent),
    0 14px 32px -12px color-mix(in srgb, var(--color-sand-gold) 55%, transparent);
}
[data-parcours="pub"] .rsv-service--phare:hover {
  border-color: var(--color-sand-gold);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--color-sand-gold) 34%, transparent),
    0 16px 36px -12px color-mix(in srgb, var(--color-sand-gold) 60%, transparent);
}
/* La pastille d'icone prend l'or, elle aussi : c'est le seul aplat, et
   il suffit a faire chanter le contour. */
[data-parcours="pub"] .rsv-service--phare .rsv-service-icone {
  color: var(--charcoal);
  background: var(--color-sand-gold);
  border-color: var(--color-sand-gold);
}

/* Le prix, a la suite du nom de ville. Volontairement DISCRET : c'est
   une information de contexte, pas l'argument de vente. Sans casse
   forcee ni interlettrage — le nom de ville garde son allure de titre,
   le prix reste une mention. */
.sess-prix {
  margin-left: 0.5em;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.82em;
  text-transform: none;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--charcoal) 58%, var(--white));
  white-space: nowrap;
}

/* Les deux consentements de l'etape « Faisons connaissance ». Serres
   l'un contre l'autre et detaches de la grille au-dessus : on lit qu'ils
   forment un bloc a part, celui ou l'on donne un accord. */
.rsv-consentements {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 1.4rem;
}
.rsv-consentements .rsv-consent { align-items: flex-start; }

/* ================================================================
   LA SÉANCE CHOISIE — le signal le plus fort de la liste.

   Placée EN FIN DE FEUILLE volontairement : les règles « week-end »
   plus haut ont la même spécificité et l'emportaient donc sur la
   sélection. Une séance de fin de semaine choisie gardait l'allure
   d'une séance de fin de semaine, sans qu'on voie qu'elle était
   retenue. Ici, la sélection gagne toujours.

   Le fond reste BLANC : c'est une liste qu'on relit, pas un choix
   définitif, et une carte remplie écrasait les autres. Ce qui bascule,
   c'est tout ce qui entoure : le contour, le halo, le bloc de date, les
   pastilles et le mot « choisie » passent à l'or de sélection.

   Sur l'or (#c9a46a, clair), l'encre est TOUJOURS sombre : du blanc
   dessus tomberait à 2 pour 1, illisible. L'encre sombre monte à 8.
   ================================================================ */
.sess-carte.is-choisi {
  background: var(--white);
  border-color: var(--color-sand-gold);
  border-width: 2px;
  transform: translateY(-2px);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--color-sand-gold) 30%, transparent),
    0 16px 36px -12px color-mix(in srgb, var(--color-sand-gold) 60%, transparent);
}
.sess-carte.is-choisi:hover,
.sess-carte.is-choisi:focus-visible {
  border-color: var(--color-sand-gold);
  transform: translateY(-3px);
}

/* Le bloc de date : le seul aplat d'or plein. C'est lui qu'on balaie du
   regard dans une liste de dates, il porte donc la sélection. */
.sess-carte.is-choisi .sess-date {
  background: var(--color-sand-gold);
  border-color: var(--color-sand-gold);
  color: var(--charcoal);
}
.sess-carte.is-choisi .sess-jour,
.sess-carte.is-choisi .sess-mois { color: var(--charcoal); }

/* Les pastilles passent toutes au même or pâle, y compris « ce
   week-end » et la durée d'une retraite, qui sont pleines ailleurs
   dans la liste. C'est voulu : le bloc de date est déjà un aplat d'or,
   une deuxième pastille pleine juste à côté ferait tache. Et sur la
   carte retenue, la hiérarchie entre pastilles ne sert plus à rien —
   c'est la carte entière qu'on a choisie.

   Ces trois règles sont regroupées à dessein : elles ont la même
   spécificité, donc seul leur ORDRE les départage. La variante pleine
   écrite après la générique reprendrait le dessus sans qu'on l'ait
   voulu. */
.sess-carte.is-choisi .sess-puce,
.sess-carte.is-choisi .sess-puce--weekend,
.sess-carte.is-choisi .sess-puce--duree {
  background: color-mix(in srgb, var(--color-sand-gold) 16%, var(--white));
  border-color: color-mix(in srgb, var(--color-sand-gold) 55%, transparent);
  /* L'or pur sur blanc ne fait que 2,2 pour 1 : on l'assombrit pour le
     texte, il reste or mais devient lisible. */
  color: color-mix(in srgb, var(--color-sand-gold) 52%, var(--charcoal));
  font-weight: 600;
}
/* « Complet », « Plus que 2 places » : même or, plus d'insistance. */
.sess-carte.is-choisi .sess-puce--alerte {
  background: color-mix(in srgb, var(--color-sand-gold) 30%, var(--white));
  border-color: var(--color-sand-gold);
  color: color-mix(in srgb, var(--color-sand-gold) 42%, var(--charcoal));
  font-weight: 700;
}

/* « Choisir » devient une confirmation, pas une invitation. */
.sess-carte.is-choisi .sess-choisir {
  color: color-mix(in srgb, var(--color-sand-gold) 52%, var(--charcoal));
  font-weight: 700;
}

/* ================================================================
   LA CONFIRMATION DU COURRIEL.

   Ajoutée après l'incident du 4 septembre 2026 : une cliente avait payé
   avec une adresse dont le domaine n'existait pas, et n'a rien reçu.

   Le bloc s'ouvre sous la grille, en pleine largeur, une fois la
   première adresse écrite. Il est volontairement DISCRET : ce n'est pas
   une alerte, c'est une seconde case à remplir.
   ================================================================ */
.rsv-confirme {
  margin-top: .9rem;
}

.rsv-confirme > label {
  display: block;
}

/* Le verdict, juste sous le champ. Vert quand ça concorde — la
   récompense compte autant que l'avertissement : elle dit « tu peux
   continuer » sans avoir à cliquer pour le découvrir. */
.rsv-confirme-avis {
  margin: .4rem 0 0;
  font-size: .84rem;
  line-height: 1.4;
}
.rsv-confirme-avis.est-bon {
  color: var(--color-mermaid-blue);
}
.rsv-confirme-avis.est-erreur {
  color: #b3453f;
  font-weight: 600;
}

/* ================================================================
   LE RABAIS — 15 % sur l'Activation Kundalini, durée indéterminée.

   Trois endroits : la pastille « −15 % » et l'ancien prix barré sur
   chaque carte de séance, la ligne « Rabais » du récapitulatif, et le
   pop-up d'accueil. Les montants viennent du serveur (voir
   lw_rabais_par_service dans ghl-lib.php) : ce qui s'affiche ici est
   exactement ce que Stripe débitera.

   La pastille est BLEUE, pleine, texte blanc : l'accent de la charte,
   et la seule pastille pleine de la ligne du titre — elle se voit sans
   crier. Sur la carte choisie, elle passe à l'or pâle comme toutes les
   autres (voir « LA SÉANCE CHOISIE » plus haut) : c'est la carte
   entière qui porte alors la sélection.

   Placé EN FIN DE FEUILLE : même raison que la séance choisie, l'ordre
   départage des règles de même spécificité.
   ================================================================ */
.sess-rabais {
  display: inline-block;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.8em;
  letter-spacing: 0.04em;
  line-height: 1.35;
  padding: 0.12em 0.55em;
  border-radius: var(--radius-btn);
  background: var(--color-celestial-tides);
  color: var(--white);
  white-space: nowrap;
  vertical-align: 0.06em;
}
.sess-prix-avant {
  margin: 0 0.3em 0 0.45em;
  color: color-mix(in srgb, var(--charcoal) 42%, var(--white));
  text-decoration-thickness: 1px;
}
.sess-prix-apres {
  color: var(--charcoal);
  font-weight: 600;
}

.sess-carte.is-choisi .sess-rabais {
  background: color-mix(in srgb, var(--color-sand-gold) 30%, var(--white));
  color: color-mix(in srgb, var(--color-sand-gold) 42%, var(--charcoal));
  box-shadow: inset 0 0 0 1px var(--color-sand-gold);
}

/* Récapitulatif : la pastille et le prix régulier barré, au-dessus du
   total — même vocabulaire que sur la carte. */
.rsv-recap-rabais .rsv-recap-val {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-size: 0.9rem;
}
.rsv-recap-rabais .rsv-recap-val s {
  color: color-mix(in srgb, var(--charcoal) 48%, var(--white));
}

/* ---- Le pop-up ----------------------------------------------------
   Le voile et la carte sont ceux de l'actualisation (.rsv-voile) : même
   fond flouté, même entrée. Ce qui change : un contour d'or — celui
   que la cliente a choisi pour la séance retenue — et le chiffre en
   grand, dans la police des titres. */
.rsv-promo-carte {
  position: relative;
  width: min(24rem, 100%);
  padding: 2.1rem 1.6rem 1.5rem;
  border: 1.5px solid var(--color-sand-gold);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--color-sand-gold) 22%, transparent),
    0 24px 60px -24px color-mix(in srgb, var(--color-ocean-deep) 70%, transparent);
}
.rsv-promo-fermer {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: color-mix(in srgb, var(--charcoal) 55%, var(--white));
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.rsv-promo-fermer:hover {
  background: color-mix(in srgb, var(--charcoal) 7%, transparent);
  color: var(--charcoal);
}
.rsv-promo-titre {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--charcoal);
  text-wrap: balance;
}
.rsv-promo-chiffre {
  font-size: clamp(2.6rem, 11vw, 3.4rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-mermaid-blue);
}
.rsv-promo-sur {
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: 0.05em;
}
.rsv-promo-txt {
  margin: 0.9rem 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--charcoal) 72%, var(--white));
}
.rsv-promo-txt strong { color: var(--charcoal); font-weight: 600; white-space: nowrap; }
.rsv-promo-txt s { white-space: nowrap; }
.rsv-promo-duree {
  margin: 0.55rem 0 0;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 0.92rem;
  color: color-mix(in srgb, var(--color-sand-gold) 48%, var(--charcoal));
}
.rsv-promo-ok {
  width: 100%;
  margin-top: 1.25rem;
  padding: 0.9rem 1rem;
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--charcoal);
  color: var(--cream);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease;
}
.rsv-promo-ok:hover { background: var(--color-mermaid-blue); }

@media (prefers-reduced-motion: reduce) {
  .rsv-promo-fermer, .rsv-promo-ok { transition: none; }
}

/* ================================================================
   ATELIERS EN LIGNE (1er octobre 2026).

   UNE CINQUIÈME CARTE DE SERVICE. La grille en a deux par rangée :
   seule sur la sienne, la carte « Atelier en ligne » paraissait
   oubliée. Elle prend donc toute la largeur — une rangée à elle, qui
   se lit comme une offre à part, ce qu'elle est.

   SA PRÉSENTATION, sur la carte de date : là où une séance en salle
   montre son adresse. Deux lignes au plus — c'est un avant-goût, la
   carte ne doit pas devenir une page.
   ================================================================ */
@media (min-width: 620px) {
  .rsv-services:not(.rsv-services--duo) > .rsv-service:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.sess-resume {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ================================================================
   LE BOUTON DE LA FILE D'ATTENTE — « Être prévenu des prochaines dates ».

   Demande d'Alexy, 7 oct. 2026 : beaucoup plus visible. Un rectangle
   bleu plein, texte blanc, qui sautille LENTEMENT — un rebond de
   quelques pixels toutes les trois secondes, assez pour attirer l'œil
   sans s'agiter. Il remplace le lien souligné de la variante discrète.

   Placé EN FIN DE FEUILLE : même spécificité que la règle discrète plus
   haut, c'est l'ordre qui tranche.

   prefers-reduced-motion : le rectangle reste, le mouvement s'arrête.
   ================================================================ */
.rsv-attente-carte--discret .rsv-attente-btn {
  display: inline-block;
  margin-top: 0.8rem;
  padding: 0.85em 1.5em;
  border-radius: 10px;
  background: var(--color-celestial-tides);
  color: var(--white);
  font-family: var(--font-title);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--color-celestial-tides) 75%, transparent);
  animation: rsv-sautille 3s ease-in-out infinite;
}
.rsv-attente-carte--discret .rsv-attente-btn:hover,
.rsv-attente-carte--discret .rsv-attente-btn:focus-visible {
  background: var(--color-mermaid-blue);
  color: var(--white);
  box-shadow: 0 14px 28px -10px color-mix(in srgb, var(--color-mermaid-blue) 75%, transparent);
  animation-play-state: paused;
}

@keyframes rsv-sautille {
  0%, 70%, 100% { transform: translateY(0); }
  80%           { transform: translateY(-6px); }
  90%           { transform: translateY(0); }
  95%           { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .rsv-attente-carte--discret .rsv-attente-btn { animation: none; }
}