/* =============================================================================
   NS DIGITAL SERVICES — Prendre rendez-vous
   -----------------------------------------------------------------------------
   Chargée par views/public/rendez-vous.php et rendez-vous-suivi.php seules.
   Toutes les règles sont préfixées .rv : aucune autre page ne peut être
   atteinte, aucun style global n'est redéfini. Couleurs, rayons et espacements
   viennent des variables de main.css — bleu #1878F8, blanc, corail #F84000.
   ============================================================================= */

.rv {
  --rv-h: clamp(470px, 64vh, 610px);   /* hauteur d'une étape               */
  --rv-coral: #F84000;
  --rv-ease: cubic-bezier(.22, .8, .3, 1);
}

/* ── Disposition ─────────────────────────────────────────────────────────── */
.rv__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 350px);
  gap: var(--ns-space-7, 40px);
  align-items: start;
}
.rv__main { min-width: 0; }

/* La carte de résumé reste visible pendant que les étapes défilent. */
.rv__aside { min-width: 0; position: sticky; top: 96px; }

@media (max-width: 1020px) {
  .rv__grid { grid-template-columns: minmax(0, 1fr); gap: var(--ns-space-6, 30px); }
  /* Téléphone et tablette : le résumé passe sous le formulaire — il n'a rien
     à dire avant que le visiteur n'ait choisi quoi que ce soit. */
  .rv__aside { position: static; }
}

/* ── Progression ─────────────────────────────────────────────────────────── */
.rv-prog { margin-bottom: var(--ns-space-5, 22px); }
.rv-prog__txt {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
  margin: 0 0 10px;
  font-family: var(--ns-font-mono, monospace);
  font-size: 11.5px; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ns-ink-muted, #8A93A3);
}
/* Chaque mention reste d'un bloc : sans cela, « Étape 1 sur 7 » se coupe et
   sa deuxieme ligne vient chevaucher la barre de progression. */
.rv-prog__txt > span { white-space: nowrap; }
.rv-prog__tz { letter-spacing: .06em; text-transform: none; }
.rv-prog__track {
  height: 5px; border-radius: 999px;
  background: var(--ns-line, #E7E8EC); overflow: hidden;
}
.rv-prog__bar {
  display: block; height: 100%; width: 14.2857%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ns-blue, #1878F8), var(--rv-coral));
  transition: width .5s var(--rv-ease);
}

/* ── Conteneur des étapes ────────────────────────────────────────────────── */
/* Sans JavaScript, les sept étapes s'empilent : le formulaire reste complet et
   s'envoie normalement. C'est le script qui pose .is-ready. */
.rv-steps {
  display: flex; flex-direction: column;
  gap: var(--ns-space-5, 22px);
  background: var(--ns-paper, #FFF);
  border: 1px solid var(--ns-line, #E7E8EC);
  border-radius: var(--ns-radius-xl, 26px);
  box-shadow: var(--ns-shadow-sm, 0 1px 2px rgba(16, 24, 40, .06));
  padding: var(--ns-space-6, 30px);
}

.rv-steps.is-ready {
  display: block;
  height: var(--rv-h);
  padding: 0;
  overflow: hidden;                    /* la page défile, pas le conteneur   */
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  position: relative;
}

.rv-steps.is-ready .rv-step {
  height: var(--rv-h);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex; align-items: center;
  padding: var(--ns-space-6, 30px);
}

/* Une étape inactive n'est PAS masquée par « visibility ». Le spécification du
   Scroll Snap ne retient comme cible qu'un élément visible : masquer les autres
   les retirait de la liste des cibles, et un défilement « mandatory » refusait
   alors tout déplacement programmé — le conteneur restait bloqué sur la
   première étape. Les étapes inactives sont donc simplement hors du cadre,
   comme dans n'importe quel carrousel à défilement aligné.

   Elles sortent quand même du parcours de tabulation et des lecteurs d'écran,
   par l'attribut « inert » que le script leur pose : cela ne touche ni à la
   visibilité, ni à la géométrie, donc le défilement reste intact. */
.rv-steps.is-ready .rv-step[inert] { opacity: .25; transition: opacity .3s var(--rv-ease); }
.rv-steps.is-ready .rv-step.is-on { opacity: 1; transition: opacity .3s var(--rv-ease); }

/* Repli. Certains contextes refusent de faire défiler un conteneur — une page
   embarquée dont l'hôte fige les positions de défilement, un moteur qui bride
   le défilement programmé. Le script s'en aperçoit (l'étape d'arrivée n'est pas
   là où elle devrait être) et pose « is-fallback » : seule l'étape active est
   alors rendue. Le parcours reste entier, il perd le glissement.
   Le Scroll Snap reste le mode normal ; ceci n'est qu'un filet. */
.rv-steps.is-fallback { height: auto; min-height: var(--rv-h); scroll-snap-type: none; }
.rv-steps.is-fallback .rv-step { display: none; height: auto; min-height: var(--rv-h); }
.rv-steps.is-fallback .rv-step.is-on { display: flex; opacity: 1; }

.rv-step__in { width: 100%; min-width: 0; }

/* Filet de sécurité : sur un écran bas, ou avec une police agrandie, le
   contenu d'une étape défile dans sa propre boîte au lieu de déborder. */
.rv-steps.is-ready .rv-step__in {
  max-height: 100%;
  overflow-y: auto;
  /* overflow-x explicite : quand un seul axe vaut « auto », l'autre passe de
     « visible » a « auto » et fait apparaitre une barre horizontale fantome,
     qui vole de la hauteur et declenche a son tour la barre verticale. */
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

/* ── Contenu d'une étape ─────────────────────────────────────────────────── */
.rv-step__num {
  margin: 0 0 10px;
  font-family: var(--ns-font-mono, monospace);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rv-coral);
}
.rv-step__t {
  margin: 0 0 8px;
  font-size: clamp(20px, 2.4vw, 27px); line-height: 1.25;
  color: var(--ns-ink, #101828); text-wrap: pretty;
}
.rv-step__t:focus-visible { outline: 2px solid var(--ns-blue, #1878F8); outline-offset: 4px; border-radius: 6px; }
.rv-step__lead {
  margin: 0 0 var(--ns-space-5, 22px);
  font-size: 14.5px; line-height: 1.6;
  color: var(--ns-ink-soft, #4B5563); text-wrap: pretty;
}

/* Apparition légère à l'arrivée sur l'étape. */
.rv-steps.is-ready .rv-step.is-on .rv-step__num,
.rv-steps.is-ready .rv-step.is-on .rv-step__t,
.rv-steps.is-ready .rv-step.is-on .rv-step__lead,
.rv-steps.is-ready .rv-step.is-on .ns-field,
.rv-steps.is-ready .rv-step.is-on .rv-modes,
.rv-steps.is-ready .rv-step.is-on .rv-cal,
.rv-steps.is-ready .rv-step.is-on .rv-heures,
.rv-steps.is-ready .rv-step.is-on .rv-recap,
.rv-steps.is-ready .rv-step.is-on .rv-nav {
  animation: rv-rise .42s var(--rv-ease) both;
}
.rv-steps.is-ready .rv-step.is-on .rv-step__t    { animation-delay: .04s; }
.rv-steps.is-ready .rv-step.is-on .rv-step__lead { animation-delay: .08s; }
.rv-steps.is-ready .rv-step.is-on .ns-field,
.rv-steps.is-ready .rv-step.is-on .rv-modes,
.rv-steps.is-ready .rv-step.is-on .rv-cal,
.rv-steps.is-ready .rv-step.is-on .rv-heures,
.rv-steps.is-ready .rv-step.is-on .rv-recap     { animation-delay: .12s; }
.rv-steps.is-ready .rv-step.is-on .rv-nav        { animation-delay: .18s; }

@keyframes rv-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rv-pop {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: none; }
}

/* ── Champs ──────────────────────────────────────────────────────────────── */
.rv-step .ns-field { margin-bottom: var(--ns-space-4, 16px); }
.rv-step .ns-input,
.rv-step .ns-select,
.rv-step .ns-textarea { width: 100%; max-width: 100%; }
.rv-textarea { min-height: 120px; max-height: 34vh; }

.rv-opt {
  margin-left: 6px;
  font-family: var(--ns-font-mono, monospace);
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 400; color: var(--ns-ink-muted, #8A93A3);
}
.rv-hint {
  margin: 6px 0 0;
  font-family: var(--ns-font-mono, monospace);
  font-size: 11px; color: var(--ns-ink-muted, #8A93A3);
}
.rv-err {
  margin: 6px 0 0;
  font-size: 13px; font-weight: 500; line-height: 1.45;
  color: var(--ns-red-dark, #B30000);
}
.rv-err:empty { display: none; }

.rv-step .ns-input[aria-invalid="true"],
.rv-step .ns-select[aria-invalid="true"],
.rv-step .ns-textarea[aria-invalid="true"] {
  border-color: var(--ns-red, #F80000);
  box-shadow: 0 0 0 3px rgba(248, 0, 0, .10);
}

.rv-consent {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.55;
  color: var(--ns-ink-soft, #4B5563); cursor: pointer;
}
.rv-consent input { margin-top: 3px; width: 17px; height: 17px; flex: 0 0 17px; accent-color: var(--ns-blue, #1878F8); }

.rv-note {
  margin: 0 0 var(--ns-space-4, 16px);
  padding: 11px 13px;
  background: #FFF6E8; border-radius: var(--ns-radius-md, 12px);
  font-size: 13px; line-height: 1.55; color: #6B4A12; text-wrap: pretty;
}

/* Taille imposée en largeur ET en hauteur : une règle générale du type
   « svg { height: auto } » ne peut plus déformer ces icônes. */
.rv-ico { width: 19px; height: 19px; min-width: 19px; max-width: none; display: block; flex: 0 0 auto; }

/* ── Étape 2 : les quatre modes ──────────────────────────────────────────── */
.rv-modes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px; border: 0; padding: 0; margin: 0 0 var(--ns-space-4, 16px);
}
@media (max-width: 620px) { .rv-modes { grid-template-columns: minmax(0, 1fr); } }

.rv-mode {
  display: flex; gap: 12px; align-items: flex-start;
  min-width: 0; padding: 15px;
  border: 1px solid var(--ns-line, #E7E8EC);
  border-radius: var(--ns-radius-lg, 18px);
  cursor: pointer;
  transition: border-color .2s var(--rv-ease), background .2s var(--rv-ease), box-shadow .2s var(--rv-ease);
}
.rv-mode:hover { border-color: #C9D3E0; background: var(--ns-paper-soft, #F7F8FA); }
.rv-mode input { position: absolute; opacity: 0; width: 0; height: 0; }
.rv-mode:has(input:checked) {
  border-color: var(--ns-blue, #1878F8);
  background: var(--ns-blue-tint, #E8F2FE);
  box-shadow: 0 0 0 3px rgba(24, 120, 248, .12);
}
.rv-mode:has(input:focus-visible) { outline: 2px solid var(--ns-blue, #1878F8); outline-offset: 3px; }

.rv-mode__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; min-width: 36px; flex: 0 0 36px;
  aspect-ratio: 1 / 1; border-radius: var(--ns-radius-md, 12px);
  background: var(--ns-blue-tint, #E8F2FE);
  color: var(--ns-blue-dark, #1156B3);
  transition: background .2s var(--rv-ease), color .2s var(--rv-ease);
}
.rv-mode:has(input:checked) .rv-mode__ic { background: var(--ns-blue, #1878F8); color: #FFFFFF; }

.rv-mode__tx { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rv-mode__t { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--ns-ink, #101828); }
.rv-mode__d { font-size: 12.5px; line-height: 1.45; color: var(--ns-ink-soft, #4B5563); }

/* ── Étape 3 : le calendrier ─────────────────────────────────────────────── */
.rv-cal { margin-bottom: var(--ns-space-3, 12px); }
.rv-cal__titre {
  margin: 0 0 10px;
  font-size: 15px; font-weight: 600; text-transform: capitalize;
  color: var(--ns-ink, #101828);
}
.rv-cal__entete,
.rv-cal__grille {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px;
}
.rv-cal__entete {
  margin-bottom: 6px;
  font-family: var(--ns-font-mono, monospace);
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ns-ink-muted, #8A93A3); text-align: center;
}

.rv-jour {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  /* Carré parfait à toute largeur, et jamais sous 44 px : la cible reste
     confortable au doigt. */
  aspect-ratio: 1 / 1; min-height: 44px;
  padding: 0; border: 1px solid var(--ns-line, #E7E8EC);
  border-radius: var(--ns-radius-md, 12px);
  background: var(--ns-paper, #FFF);
  font: inherit; font-size: 14px; font-weight: 500;
  color: var(--ns-ink, #101828);
  cursor: pointer;
  transition: border-color .18s var(--rv-ease), background .18s var(--rv-ease), color .18s var(--rv-ease);
}
.rv-jour:hover:not(:disabled) { border-color: var(--ns-blue, #1878F8); background: var(--ns-blue-tint, #E8F2FE); }
.rv-jour:focus-visible { outline: 2px solid var(--ns-blue, #1878F8); outline-offset: 2px; }

.rv-jour.is-on {
  border-color: var(--ns-blue, #1878F8);
  background: var(--ns-blue, #1878F8);
  color: #FFFFFF;
}
.rv-jour.is-on .rv-jour__p { background: #FFFFFF; }

.rv-jour--off {
  color: var(--ns-ink-muted, #B4BAC5);
  background: var(--ns-paper-soft, #F7F8FA);
  border-color: var(--ns-line-soft, #F0F1F4);
  cursor: not-allowed;
}
.rv-jour--vide { border: 0; background: none; pointer-events: none; }

.rv-jour__n { line-height: 1; }
.rv-jour__p {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--rv-coral);
}

.rv-cal__nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; }
.rv-cal__b { padding: 7px 13px; font-size: 13px; }
.rv-cal__b:disabled { opacity: .4; cursor: not-allowed; }

.rv-legende {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin: 0 0 var(--ns-space-4, 16px);
  font-size: 12px; color: var(--ns-ink-muted, #8A93A3);
}
.rv-legende__i { display: inline-flex; align-items: center; gap: 6px; }
.rv-pastille { width: 6px; height: 6px; border-radius: 50%; background: var(--rv-coral); }
.rv-pastille--off { background: var(--ns-line, #E7E8EC); }

/* ── Étape 4 : les heures ────────────────────────────────────────────────── */
.rv-heures {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
  gap: 9px; margin-bottom: var(--ns-space-4, 16px);
  min-height: 52px;
}
.rv-heures__vide,
.rv-heures__msg {
  grid-column: 1 / -1; margin: 0;
  padding: 13px 15px;
  background: var(--ns-paper-soft, #F7F8FA);
  border-radius: var(--ns-radius-md, 12px);
  font-size: 13.5px; line-height: 1.55; color: var(--ns-ink-soft, #4B5563);
  text-wrap: pretty;
}

.rv-heure {
  min-height: 46px; padding: 11px 8px;
  border: 1px solid var(--ns-line, #E7E8EC);
  border-radius: var(--ns-radius-md, 12px);
  background: var(--ns-paper, #FFF);
  font: inherit; font-family: var(--ns-font-mono, monospace);
  font-size: 14px; font-weight: 500;
  color: var(--ns-ink, #101828);
  cursor: pointer; text-align: center;
  transition: border-color .18s var(--rv-ease), background .18s var(--rv-ease), color .18s var(--rv-ease);
}
.rv-heure:hover:not(:disabled) { border-color: var(--ns-blue, #1878F8); background: var(--ns-blue-tint, #E8F2FE); }
.rv-heure:focus-visible { outline: 2px solid var(--ns-blue, #1878F8); outline-offset: 2px; }
.rv-heure.is-on { border-color: var(--ns-blue, #1878F8); background: var(--ns-blue, #1878F8); color: #FFFFFF; }
.rv-heure:disabled {
  color: var(--ns-ink-muted, #B4BAC5);
  background: var(--ns-paper-soft, #F7F8FA);
  border-color: var(--ns-line-soft, #F0F1F4);
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ── Récapitulatif ───────────────────────────────────────────────────────── */
.rv-recap {
  margin: 0 0 var(--ns-space-4, 16px);
  border: 1px solid var(--ns-line, #E7E8EC);
  border-radius: var(--ns-radius-md, 12px);
  overflow: hidden;
}
.rv-recap__row {
  display: grid; grid-template-columns: 118px minmax(0, 1fr);
  gap: 12px; padding: 8px 14px;
  border-bottom: 1px solid var(--ns-line-soft, #F0F1F4);
}
.rv-recap__row:last-child { border-bottom: 0; }
.rv-recap dt {
  font-family: var(--ns-font-mono, monospace);
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ns-ink-muted, #8A93A3); padding-top: 2px;
}
.rv-recap dd {
  margin: 0; font-size: 13.5px; line-height: 1.5;
  color: var(--ns-ink, #101828);
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rv-recap--done { margin: var(--ns-space-5, 22px) auto; max-width: 460px; text-align: left; }
@media (max-width: 460px) {
  .rv-recap__row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 7px 12px; }
  .rv-recap dd { -webkit-line-clamp: 2; font-size: 13px; }
}

.rv-tz {
  display: block;
  font-family: var(--ns-font-mono, monospace);
  font-size: 10.5px; letter-spacing: .04em;
  color: var(--ns-ink-muted, #8A93A3); font-weight: 400;
}

/* ── Navigation ──────────────────────────────────────────────────────────── */
.rv-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--ns-space-2, 8px); }
.rv-nav .ns-btn { flex: 0 0 auto; }
.rv-next { min-width: 148px; }

@media (max-width: 640px) {
  /* Champs et boutons sur toute la largeur disponible. */
  .rv-nav { flex-direction: column-reverse; gap: 10px; }
  .rv-nav .ns-btn { width: 100%; }
}

/* ── Carte latérale ──────────────────────────────────────────────────────── */
.rv-side {
  background: var(--ns-paper, #FFF);
  border: 1px solid var(--ns-line, #E7E8EC);
  border-radius: var(--ns-radius-xl, 26px);
  box-shadow: var(--ns-shadow-sm, 0 1px 2px rgba(16, 24, 40, .06));
  padding: var(--ns-space-6, 30px);
  transition: box-shadow .28s var(--rv-ease), border-color .28s var(--rv-ease);
}
.rv-side:hover { box-shadow: 0 10px 30px rgba(16, 24, 40, .09); border-color: #D8DCE3; }
.rv-side__t { margin: 0 0 5px; font-size: 17px; line-height: 1.3; color: var(--ns-ink, #101828); }
.rv-side__lead { margin: 0 0 var(--ns-space-5, 22px); font-size: 13px; line-height: 1.55; color: var(--ns-ink-soft, #4B5563); }

.rv-side__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rv-side__list li { display: flex; gap: 12px; align-items: flex-start; }
.rv-side__ic {
  flex: 0 0 34px; width: 34px; height: 34px; aspect-ratio: 1 / 1;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ns-radius-md, 12px);
  background: var(--ns-blue-tint, #E8F2FE);
  color: var(--ns-blue-dark, #1156B3);
}
.rv-side__tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 14px; line-height: 1.45; color: var(--ns-ink, #101828); }
.rv-side__k {
  font-family: var(--ns-font-mono, monospace);
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ns-ink-muted, #8A93A3);
}
.rv-side__tx > span:not(.rv-side__k):not(.rv-tz) { overflow-wrap: anywhere; }

.rv-side__foot { margin-top: var(--ns-space-6, 30px); padding-top: var(--ns-space-5, 22px); border-top: 1px solid var(--ns-line-soft, #F0F1F4); }
.rv-side__q { margin: 0 0 12px; font-size: 13px; color: var(--ns-ink-soft, #4B5563); }
.rv-side__tel {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 10px; font-size: 14px; font-weight: 500;
}

.rv-btn--wa { background: #25D366; color: #0B2E1C; border-color: #25D366; gap: 9px; }
.rv-btn--wa:hover { background: #128C7E; border-color: #128C7E; color: #FFFFFF; }
.rv-btn--wa .rv-ico { width: 17px; height: 17px; min-width: 17px; }

/* ── Confirmation et page de suivi ───────────────────────────────────────── */
.rv-done {
  background: var(--ns-paper, #FFF);
  border: 1px solid var(--ns-line, #E7E8EC);
  border-radius: var(--ns-radius-xl, 26px);
  box-shadow: var(--ns-shadow-sm, 0 1px 2px rgba(16, 24, 40, .06));
  padding: clamp(26px, 5vw, 46px);
  text-align: center;
  animation: rv-rise .5s var(--rv-ease) both;
}
.rv-done__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; min-width: 64px; aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--ns-success-tint, #E7F8EE);
  color: var(--ns-success, #12805C);
  margin-bottom: var(--ns-space-5, 22px);
  animation: rv-pop .5s var(--rv-ease) both;
}
.rv-done__mark--warn { background: #FFF6E8; color: #B4700A; }
.rv-done__mark .rv-ico { width: 30px; height: 30px; min-width: 30px; }

.rv-done__t {
  margin: 0 0 12px;
  font-size: clamp(21px, 3vw, 30px); line-height: 1.2;
  color: var(--ns-ink, #101828); text-wrap: pretty;
  animation: rv-rise .5s var(--rv-ease) .06s both;
}
.rv-done__lead {
  margin: 0 auto 14px; max-width: 54ch;
  font-size: 15.5px; line-height: 1.65;
  color: var(--ns-ink, #101828); text-wrap: pretty;
  animation: rv-rise .5s var(--rv-ease) .12s both;
}
.rv-done__warn {
  margin: 0 auto; max-width: 56ch;
  padding: 12px 15px;
  background: #FFF6E8; border-radius: var(--ns-radius-md, 12px);
  font-size: 14px; line-height: 1.6; color: #6B4A12; text-wrap: pretty;
  animation: rv-rise .5s var(--rv-ease) .18s both;
}
.rv-done__sub { margin: 14px auto 0; max-width: 56ch; font-size: 14px; line-height: 1.6; color: var(--ns-ink-soft, #4B5563); }

.rv-done__ref {
  display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; justify-content: center;
  margin: var(--ns-space-5, 22px) 0 0;
  padding: 10px 18px;
  background: var(--ns-paper-soft, #F7F8FA);
  border: 1px dashed var(--ns-line, #E7E8EC);
  border-radius: 999px;
}
.rv-done__ref span {
  font-family: var(--ns-font-mono, monospace);
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ns-ink-muted, #8A93A3);
}
.rv-done__ref strong { font-family: var(--ns-font-mono, monospace); font-size: 15px; letter-spacing: .02em; }

.rv-done__acts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: var(--ns-space-6, 30px); }
.rv-done__foot { margin: var(--ns-space-6, 30px) 0 0; font-size: 14px; }
@media (max-width: 560px) {
  .rv-done__acts { flex-direction: column; }
  .rv-done__acts .ns-btn { width: 100%; }
}

/* ── Trois cartes de la confirmation ─────────────────────────────────────── */
.rv-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; margin-top: var(--ns-space-6, 30px);
  text-align: left;
  animation: rv-rise .5s var(--rv-ease) .24s both;
}
@media (max-width: 860px) { .rv-cards { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); } }
@media (max-width: 520px) { .rv-cards { grid-template-columns: minmax(0, 1fr); } }

.rv-card2 {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  min-width: 0; height: 100%; padding: 20px;
  background: var(--ns-paper, #FFF);
  border: 1px solid var(--ns-line, #E7E8EC);
  border-radius: var(--ns-radius-lg, 18px);
  color: var(--ns-ink, #101828); text-decoration: none;
  transition: transform .24s var(--rv-ease), box-shadow .24s var(--rv-ease), border-color .24s var(--rv-ease);
}
.rv-card2:hover, .rv-card2:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(16, 24, 40, .10);
  border-color: var(--ns-blue, #1878F8);
  color: var(--ns-ink, #101828);
}
.rv-card2__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; min-width: 40px; flex: 0 0 40px;
  aspect-ratio: 1 / 1; border-radius: var(--ns-radius-md, 12px);
  background: var(--ns-blue-tint, #E8F2FE);
  color: var(--ns-blue-dark, #1156B3);
  transition: background .24s var(--rv-ease), color .24s var(--rv-ease);
}
.rv-card2:hover .rv-card2__ic { background: var(--ns-blue, #1878F8); color: #FFFFFF; }
.rv-card2--wa .rv-card2__ic { background: #E7F8EE; color: #128C7E; }
.rv-card2--wa:hover .rv-card2__ic { background: #128C7E; color: #FFFFFF; }
.rv-card2--wa:hover, .rv-card2--wa:focus-visible { border-color: #128C7E; }

.rv-card2__t { display: block; width: 100%; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.rv-card2__d {
  display: block; width: 100%;
  font-size: 13.5px; line-height: 1.55;
  color: var(--ns-ink-soft, #4B5563);
  flex: 1 1 auto; text-wrap: pretty;
}
.rv-card2__go {
  display: block; width: 100%; margin-top: 2px;
  font-family: var(--ns-font-mono, monospace);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ns-blue-dark, #1156B3);
}
.rv-card2--wa .rv-card2__go { color: #0F7A6C; }

/* ── Page de suivi ───────────────────────────────────────────────────────── */
.rv-suivi { max-width: 720px; margin: 0 auto; }
.rv-suivi__head { text-align: center; margin-bottom: var(--ns-space-6, 30px); }
.rv-suivi__ref {
  margin: 0 0 8px;
  font-family: var(--ns-font-mono, monospace);
  font-size: 12px; letter-spacing: .08em;
  color: var(--ns-ink-muted, #8A93A3);
}
.rv-suivi__t { margin: 0 0 14px; font-size: clamp(22px, 3vw, 30px); line-height: 1.2; }
.rv-suivi__lead { margin: 12px auto 0; max-width: 52ch; font-size: 14.5px; line-height: 1.6; color: var(--ns-ink-soft, #4B5563); text-wrap: pretty; }

.rv-etat {
  display: inline-block; margin: 0;
  padding: 6px 15px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
}
.rv-etat--ok   { background: var(--ns-success-tint, #E7F8EE); color: var(--ns-success, #12805C); }
.rv-etat--warn { background: #FFF6E8; color: #8A5A08; }
.rv-etat--off  { background: var(--ns-paper-soft, #F7F8FA); color: var(--ns-ink-soft, #4B5563); }

.rv-meet {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  padding: 18px 20px; margin-bottom: var(--ns-space-5, 22px);
  background: var(--ns-blue-tint, #E8F2FE);
  border: 1px solid #BFD8FB;
  border-radius: var(--ns-radius-lg, 18px);
}
.rv-meet__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; min-width: 42px; aspect-ratio: 1 / 1;
  border-radius: var(--ns-radius-md, 12px);
  background: #FFFFFF; color: var(--ns-blue-dark, #1156B3);
}
.rv-meet__tx { flex: 1 1 200px; min-width: 0; }
.rv-meet__t { margin: 0 0 3px; font-size: 15px; font-weight: 600; }
.rv-meet__d { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ns-ink-soft, #4B5563); }

.rv-suivi__acts { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; margin-top: var(--ns-space-6, 30px); }
@media (max-width: 560px) {
  .rv-suivi__acts { flex-direction: column; }
  .rv-suivi__acts .ns-btn { width: 100%; }
}

/* ── Aucun débordement horizontal, quelle que soit la largeur ────────────── */
.rv, .rv__grid, .rv__main, .rv__aside, .rv-steps, .rv-step,
.rv-side, .rv-done, .rv-cards, .rv-card2, .rv-suivi, .rv-meet { max-width: 100%; }
.rv-step__t, .rv-step__lead, .rv-side__t, .rv-card2__t, .rv-card2__d { overflow-wrap: break-word; }

/* ── Pièces réservées à l'affichage téléphone ────────────────────────────── */
/* Elles existent dans le balisage à toute largeur, mais ne servent que dans le
   bloc « max-width: 780px » plus bas : sur ordinateur, la grille du calendrier
   reste exactement celle d'aujourd'hui. */
.rv-jour__m, .rv-jour__c, .rv-cal__aucun { display: none; }

/* ── Heures : distinguer fermé et déjà réservé ───────────────────────────── */
/* « Déjà réservé » garde le texte barré. « Fermé » ne l'est pas barré : rien
   n'a été pris, la plage n'est simplement pas ouverte. */
.rv-heure--bloque:disabled,
.rv-heure--complet:disabled {
  text-decoration: none;
  border-style: dashed;
  border-color: var(--ns-line, #E7E8EC);
}

/* =============================================================================
   TÉLÉPHONE ET PETITE TABLETTE — jusqu'à 780 px
   -----------------------------------------------------------------------------
   Rien de la logique n'est touché ici : ni les données, ni les règles de
   disponibilité, ni les routes. Seule la mise en page change.

   Le point de départ, et la cause de presque tous les défauts constatés : sur
   ordinateur, une étape vit dans une boîte de hauteur fixe (--rv-h) qui défile
   par alignement (Scroll Snap). Sur un téléphone, cette hauteur est plus petite
   que le contenu — le calendrier, sa légende et deux boutons ne tiennent pas
   dans 470 px. Le contenu se retrouvait alors dans une boîte à défilement
   interne : textes serrés, boutons repoussés hors du cadre, bouton final
   introuvable. Ici, la boîte reprend sa hauteur naturelle et c'est LA PAGE qui
   défile, comme un formulaire normal.
   ============================================================================= */

@media (max-width: 780px) {

  /* ── 1. En-tête de page ───────────────────────────────────────────────── */
  /* Portée limitée à cette page par la classe .rv-head, posée sur le bloc de
     titre du seul gabarit rendez-vous. Aucune autre page n'est touchée. */
  .rv-head { overflow: hidden; }
  .rv-head h1 {
    font-size: clamp(21px, 6.4vw, 30px);
    line-height: 1.14;
    overflow-wrap: break-word;
    word-break: normal;
  }
  .rv-head .ns-lead,
  .rv-head p { max-width: 100%; }
  .rv-head .ns-lead { font-size: 14.5px; line-height: 1.6; }

  /* ── 2. Une étape à la fois, la page défile ───────────────────────────── */
  .rv-steps { padding: 18px 16px; border-radius: 20px; }

  .rv-steps.is-ready {
    display: block;
    height: auto;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .rv-steps.is-ready .rv-step,
  .rv-steps.is-fallback .rv-step {
    display: none;
    height: auto;
    min-height: 0;
    padding: 20px 16px 24px;
    scroll-snap-align: none;
  }
  .rv-steps.is-ready .rv-step.is-on,
  .rv-steps.is-fallback .rv-step.is-on {
    display: block;
    opacity: 1;
  }
  /* Plus de boîte à défilement interne : c'est elle qui écrasait tout. */
  .rv-steps.is-ready .rv-step__in {
    max-height: none;
    overflow: visible;
    scrollbar-gutter: auto;
  }

  .rv-step__t { font-size: clamp(18px, 5.4vw, 23px); }
  .rv-step__lead { font-size: 14px; margin-bottom: 16px; }
  .rv-textarea { max-height: none; min-height: 130px; }

  /* ── 3. Calendrier : une liste verticale, plus une grille comprimée ───── */
  /* Sept colonnes dans 250 px donnent des cases de 30 px : le numéro, la
     pastille et le libellé se chevauchaient. La grille devient donc une liste
     d'un jour par ligne, avec le jour, la date et le nombre de créneaux. */
  .rv-cal__entete { display: none; }
  .rv-cal__titre { font-size: 14px; margin-bottom: 8px; text-transform: none; }

  .rv-cal__grille { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  /* Les jours fermés sortent de la liste — les afficher tous rendrait la liste
     interminable. Les journées COMPLÈTES restent, en grisé : l'information est
     utile. Un mois sans aucune date ouverte affiche sa propre phrase. */
  .rv-jour--vide { display: none; }
  .rv-jour--off:not(.rv-jour--full) { display: none; }
  .rv-cal__aucun {
    display: block;
    margin: 4px 0 0;
    padding: 14px 15px;
    background: var(--ns-paper-soft, #F7F8FA);
    border-radius: var(--ns-radius-md, 12px);
    font-size: 13.5px; line-height: 1.55;
    color: var(--ns-ink-soft, #4B5563);
    text-wrap: pretty;
  }

  .rv-jour {
    aspect-ratio: auto;
    min-height: 56px;               /* bien au-delà des 44 px exigés */
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 14px;
    text-align: left;
    font-size: 15px;
  }
  .rv-jour__n, .rv-jour__p { display: none; }

  .rv-jour__m {
    display: flex; flex-direction: column; gap: 1px;
    min-width: 0; flex: 1 1 auto;
  }
  .rv-jour__j {
    font-family: var(--ns-font-mono, monospace);
    font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ns-ink-muted, #8A93A3);
  }
  .rv-jour__d { font-size: 15.5px; font-weight: 600; line-height: 1.2; }

  .rv-jour__c {
    display: block; flex: 0 0 auto;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--ns-blue-tint, #E8F2FE);
    font-family: var(--ns-font-mono, monospace);
    font-size: 11px; letter-spacing: .04em;
    color: var(--ns-blue-dark, #1156B3);
    white-space: nowrap;
  }

  /* Le jour choisi se reconnaît d'un coup d'œil : fond bleu plein. */
  .rv-jour.is-on .rv-jour__j { color: rgba(255, 255, 255, .8); }
  .rv-jour.is-on .rv-jour__c { background: rgba(255, 255, 255, .18); color: #FFFFFF; }
  .rv-jour--off .rv-jour__c {
    background: var(--ns-line-soft, #F0F1F4);
    color: var(--ns-ink-muted, #8A93A3);
  }

  /* ── 4. Navigation des mois : deux boutons, nettement séparés ─────────── */
  .rv-cal__nav {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px; margin-top: 14px;
  }
  .rv-cal__b {
    min-height: 48px; padding: 10px 12px;
    font-size: 13px; text-align: center;
  }
  .rv-legende { font-size: 12px; margin-bottom: 14px; }

  /* ── 5. Heures : deux colonnes régulières, cibles confortables ────────── */
  .rv-heures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .rv-heure { min-height: 52px; padding: 13px 8px; font-size: 15px; }

  /* ── 6. Navigation entre les étapes ───────────────────────────────────── */
  /* « column-reverse » avec l'ordre Précédent puis Suivant du balisage : le
     bouton principal se retrouve EN HAUT, le secondaire dessous. Un seul jeu de
     boutons par étape, jamais deux. */
  .rv-nav {
    flex-direction: column-reverse;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--ns-line-soft, #F0F1F4);
  }
  .rv-nav .ns-btn { width: 100%; min-height: 50px; }
  .rv-next { min-width: 0; }
  /* Un « Suivant » désactivé le dit clairement, sans disparaître. */
  .rv-nav .ns-btn[disabled] { opacity: .45; cursor: not-allowed; }

  /* ── 7. Étape finale : récapitulatif entier, bouton atteignable ────────── */
  .rv-recap__row { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 10px 14px; }
  .rv-recap dt { font-size: 10px; }
  /* Plus aucune coupure : la valeur s'affiche en entier, sur autant de lignes
     qu'il faut, et une adresse e-mail longue revient à la ligne proprement. */
  .rv-recap dd {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
    font-size: 14px; line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .rv-note { font-size: 13.5px; padding: 13px 14px; }

  .rv-send { min-height: 56px; font-size: 16px; }
  /* De l'air sous le bouton : le bouton WhatsApp flottant survole cet espace,
     jamais le bouton d'envoi. */
  .rv-steps.is-ready .rv-step[data-rv-step="7"],
  .rv-steps.is-fallback .rv-step[data-rv-step="7"] { padding-bottom: 96px; }

  /* ── 8. Bouton WhatsApp flottant ──────────────────────────────────────── */
  /* Portée stricte : uniquement les pages qui contiennent le formulaire de
     rendez-vous. Aucune autre page n'est modifiée, et le bouton reste celui
     du site — seule sa marge basse change, pour rester au-dessus de la barre
     de navigation des téléphones. */
  body:has(.rv-form) .ns-whatsapp-fab {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    right: 14px;
    z-index: 35;
  }

  /* ── 9. Progression ──────────────────────────────────────────────────── */
  .rv-prog { margin-bottom: 16px; }
  .rv-prog__txt { font-size: 10.5px; gap: 3px 10px; }

  /* ── 10. Carte de résumé ─────────────────────────────────────────────── */
  .rv-side { padding: 20px 18px; border-radius: 20px; }
}

/* Très petits écrans : 320 px. Les deux colonnes d'heures tiennent encore. */
@media (max-width: 359px) {
  .rv-steps.is-ready .rv-step,
  .rv-steps.is-fallback .rv-step { padding: 16px 13px 20px; }
  .rv-jour { padding: 10px 11px; gap: 8px; }
  .rv-jour__d { font-size: 14.5px; }
  .rv-jour__c { padding: 4px 8px; font-size: 10px; }
  .rv-heures { gap: 8px; }
  .rv-heure { font-size: 14px; }
}

/* ── Animations désactivées à la demande du visiteur ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rv-steps.is-ready { scroll-behavior: auto; }
  .rv-steps.is-ready .rv-step,
  .rv-steps.is-ready .rv-step[inert],
  .rv-steps.is-ready .rv-step.is-on,
  .rv-steps.is-ready .rv-step.is-on * { animation: none !important; transition: none !important; }
  .rv-steps.is-ready .rv-step[inert] { opacity: 1; }
  .rv-prog__bar { transition: none; }
  .rv-side, .rv-mode, .rv-mode__ic, .rv-jour, .rv-heure { transition: none; }
  .rv-done, .rv-done__mark, .rv-done__t, .rv-done__lead, .rv-done__warn, .rv-cards { animation: none; }
  .rv-card2, .rv-card2__ic { transition: none; }
  .rv-card2:hover, .rv-card2:focus-visible { transform: none; }
}