/* ============================================================================
   rendez-vous — la prise de rendez-vous en ligne (IV Manager, lot E, 25/10/2026).

   Même famille que la proposition, le règlement et l'espace client : la page
   charge d'abord css/proposition.css et réutilise ses pièces (bandeau,
   étapes, cartes, champs, rappels, cartes d'état, squelette). Cette feuille
   n'ajoute que ce qui est propre au rendez-vous : les cartes de motif et de
   mode, le calendrier des jours, les heures, et le « billet » de la
   confirmation — la même tuile de calendrier que « Vos rendez-vous » dans
   l'espace client.

   Téléphone d'abord : une colonne, des cibles de 44 px au moins, aucune
   image, aucune police de plus que celles du site. Un jour ou une heure
   choisis se REMPLISSENT de rouge (l'idiome du calendrier) ; une carte de
   motif choisie se teinte, comme les formules de la proposition.

   Les jours : une bande qui défile au téléphone, les mêmes cases en semaines
   sur ordinateur. Une case indisponible se hachure ET porte son mot : le
   grisé ne repose jamais sur la couleur seule.

   Toutes les couleurs passent par les variables de la charte : le thème
   nuit les redéfinit, et cette feuille suit sans un mot de plus.
   ============================================================================ */

.rv-page ::selection { background: color-mix(in srgb, var(--red) 22%, transparent); color: inherit; }

/* ---------- Bandeau : le nom de l'agence ramène à l'accueil ---------- */
.rv-marque { min-height: 44px; border-radius: var(--r-sm); color: inherit; text-decoration: none; }
.rv-marque[href]:hover .pr-marque-nom { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.rv-marque.est-neutre { cursor: default; }

/* ---------- En-tête ---------- */
.rv-chapeau { margin-top: var(--sp-3); max-width: 54ch; font-size: var(--fs-md); line-height: 1.55; color: var(--muted); text-wrap: pretty; }
/* Quatre temps au lieu des trois de la proposition. */
.rv-etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Les sections ----------
   Comme le règlement : chaque étape garde son souffle sous l'en-tête, même
   quand une section cachée la précède ; seule l'aide reste collée. */
.rv-page .pr-bloc + .pr-bloc:not(#rvAide) { padding-top: var(--sp-7); }
/* Un libellé de bouton qui passe sur deux lignes reste centré. */
.rv-page .pr-btn { text-align: center; }
.rv-rappel { margin-top: var(--sp-4); }
.rv-rappel .pr-rappel-texte { gap: 1px; }
.rv-rappel b { font-size: var(--fs-sm); }
.rv-note-envoi { margin-top: var(--sp-4); }
.rv-delais { margin-top: var(--sp-4); max-width: 60ch; }
/* Une bonne nouvelle, pas une alerte : l'adresse est confirmée. */
.rv-info { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r); background: var(--teal-light);
  border: 1px solid color-mix(in srgb, var(--teal) 35%, transparent); color: var(--teal-ink); font-size: var(--fs-sm); line-height: 1.5; text-wrap: pretty; }

/* ---------- Les groupes de choix ---------- */
.rv-champ { border: 0; margin: 0; padding: 0; min-width: 0; }
/* Une légende flottante obéit à ses marges, partout. */
.rv-champ legend { float: left; width: 100%; padding: 0; margin-bottom: var(--sp-3);
  font-family: 'Sora', 'Inter', sans-serif; font-size: var(--fs-md); font-weight: 700; line-height: 1.35; color: var(--navy-dark); }
/* TOUT ce qui suit passe sous la légende : une grille placée à côté d'un
   flottant large de 100 % serait écrasée à zéro, puis déborderait. */
.rv-champ > :not(legend) { clear: both; }
.rv-legende-note { display: block; margin-top: 2px; font-family: 'Inter', sans-serif; font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }

/* Les cartes de motif et de mode : tout le cadre se touche. */
.rv-options { display: grid; gap: var(--sp-3); }
.rv-option { display: flex; align-items: flex-start; gap: var(--sp-3); min-height: 56px; padding: var(--sp-4);
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--white); color: var(--ink); cursor: pointer;
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
/* Le rond et la case sont dessinés : les contrôles natifs du thème nuit restent
   gris, hors de la palette. Le geste, le clavier et le lecteur d'écran ne changent pas. */
.rv-option input, .rv-case input { appearance: none; display: grid; place-items: center; width: 22px; height: 22px; margin: 1px 0 0; flex: none;
  border: 2px solid var(--muted); background: var(--white); cursor: pointer; transition: border-color .15s var(--ease-out), background-color .15s var(--ease-out); }
.rv-option input { border-radius: 50%; }
.rv-case input { border-radius: var(--r-sm); }
.rv-option input::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--red-fond); transform: scale(0); transition: transform .15s var(--ease-out); }
.rv-case input::before { content: ''; width: 12px; height: 12px; background: var(--sur-couleur); transform: scale(0); transition: transform .15s var(--ease-out);
  clip-path: polygon(14% 44%, 0 58%, 38% 96%, 100% 22%, 86% 8%, 38% 68%); }
.rv-option input:checked, .rv-case input:checked { border-color: var(--red-fond); }
.rv-case input:checked { background: var(--red-fond); }
.rv-option input:checked::before, .rv-case input:checked::before { transform: scale(1); }
.rv-option input:focus-visible, .rv-case input:focus-visible { outline: 2px solid var(--red-dark); outline-offset: 2px; }
.rv-option.est-choisi { border-color: var(--red-dark); background: var(--blush); box-shadow: var(--ring); }
.rv-option-corps { display: grid; gap: 2px; flex: 1; min-width: 0; }
/* Le nom et le prix partagent la ligne ; l'explication prend toute la
   largeur dessous (au téléphone, à côté du prix, elle s'écrasait en colonne). */
.rv-option-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--sp-3); }
.rv-option-nom { font-weight: 700; line-height: 1.35; color: var(--navy-dark); overflow-wrap: anywhere; }
.rv-option-texte { font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.rv-option-ico { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: var(--r); background: var(--blush); color: var(--red-ink); }
.rv-option.est-choisi .rv-option-ico { background: var(--white); }
.rv-option-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Le prix : le chiffre que l'on compare, net, en chiffres alignés. */
/* Pas de « margin-left: auto » : passé à la ligne au téléphone, le prix
   reste au bord gauche, sous le nom, au lieu de flotter seul à droite. */
.rv-prix { flex: none; font-family: 'Sora', 'Inter', sans-serif; font-size: var(--fs-md); font-weight: 700;
  line-height: 1.3; color: var(--navy-dark); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-title); }
.rv-prix.est-gratuit { padding: 2px var(--sp-3); border-radius: var(--r-pill); background: var(--teal-light); color: var(--teal-ink);
  font-family: 'Inter', sans-serif; font-size: var(--fs-sm); letter-spacing: 0; }

/* ---------- Le calendrier : des jours, puis des heures ----------
   Le rond natif est caché (mais reste au clavier : flèches, Tab) ; c'est la
   pastille qui se touche et qui dit le choix. */
.rv-semaine { display: none; }
.rv-jours { display: flex; gap: var(--sp-2); margin-inline: calc(var(--sp-4) * -1); padding: 2px var(--sp-4) var(--sp-3);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--sp-4);
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; -webkit-overflow-scrolling: touch; }
.rv-jour-vide { display: none; }
.rv-jours .rv-jour { flex: 0 0 4.5rem; scroll-snap-align: start; }
/* La bande continue à droite : la dernière case visible s'efface dans la carte.
   Collé au bord tant qu'il reste des jours, ce voile retombe après le dernier
   jour : au bout de la bande, plus rien n'est voilé. Il laisse passer le toucher. */
.rv-jours::after { content: ''; position: sticky; right: calc(var(--sp-4) * -1); flex: 0 0 3.5rem; margin-right: calc(var(--sp-4) * -1); margin-left: calc(var(--sp-2) * -1);
  align-self: stretch; pointer-events: none; background: linear-gradient(to right, transparent, var(--white)); }
.rv-heures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
/* En grille : la pastille remplit sa case, une case indisponible (qui porte un
   mot de plus) et sa voisine gardent la même hauteur. */
.rv-jour, .rv-heure { position: relative; display: grid; min-width: 0; }
.rv-radio { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.rv-puce { display: grid; place-items: center; align-content: center; gap: 1px; min-height: 48px; padding: var(--sp-2) var(--sp-1);
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--white); color: var(--ink);
  text-align: center; cursor: pointer; user-select: none;
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.rv-jour .rv-puce { min-height: 78px; }
.rv-jour-sem, .rv-jour-mois { font-size: var(--fs-xs); font-weight: 600; line-height: 1.2; color: var(--muted); }
.rv-jour-num { font-family: 'Sora', 'Inter', sans-serif; font-size: var(--fs-xl); font-weight: 700; line-height: 1.1; color: var(--navy-dark);
  font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-title); }
.rv-heure-val { font-family: 'Sora', 'Inter', sans-serif; font-size: var(--fs-md); font-weight: 600; line-height: 1.2;
  font-variant-numeric: tabular-nums; color: var(--navy-dark); }
.rv-heure-etat, .rv-jour-etat { font-size: var(--fs-xs); font-weight: 600; line-height: 1.2; color: var(--muted); }
.rv-duree { margin-bottom: var(--sp-3); font-size: var(--fs-sm); font-weight: 600; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
/* Indisponible : hachuré, plus le mot. Le chiffre reste lisible, le mot le dit. */
.est-grise .rv-puce { border-style: dashed; border-color: var(--line-strong); cursor: not-allowed; box-shadow: none;
  background: repeating-linear-gradient(135deg, var(--bg) 0 6px, color-mix(in srgb, var(--line-strong) 45%, var(--bg)) 6px 7px); }
.est-grise .rv-jour-num, .est-grise .rv-heure-val { color: var(--muted); }
.est-grise .rv-heure-val { text-decoration: line-through; text-decoration-thickness: 1px; }
.est-grise .rv-jour-mois { display: none; }
.rv-radio:checked + .rv-puce { border-color: var(--red-fond); background: var(--red-fond); color: var(--sur-couleur); box-shadow: var(--shadow-sm); }
.rv-radio:checked + .rv-puce > * { color: inherit; }
.rv-radio:focus-visible + .rv-puce { outline: 2px solid var(--red-dark); outline-offset: 2px; }
@media (hover: hover) {
  .rv-option:hover:not(.est-choisi), .rv-radio:not(:checked):not(:disabled) + .rv-puce:hover { border-color: var(--navy-dark); }
}
/* Un visiteur de la diaspora : son téléphone n'est pas à l'heure de Douala. */
.rv-fuseau { margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--amber-light);
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); color: var(--amber-ink); font-size: var(--fs-sm); line-height: 1.45; text-wrap: pretty; }

/* ---------- Le compte : demandé au moment de confirmer ---------- */
.rv-compte-intro { font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.rv-onglets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); }
.rv-onglets button { min-height: 44px; padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--r-sm); background: none; color: var(--muted);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background-color .2s var(--ease-out), color .2s var(--ease-out); }
.rv-onglets button[aria-selected="true"] { background: var(--white); color: var(--navy-dark); box-shadow: var(--shadow-sm); }
.rv-onglets button:focus-visible { outline: 2px solid var(--red-dark); outline-offset: 2px; }
.rv-oubli { font-size: var(--fs-sm); }
.rv-oubli a { display: inline-block; padding-block: 13px; margin-block: -13px; font-weight: 600; color: var(--red-dark);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rv-case { display: flex; align-items: flex-start; gap: var(--sp-3); min-height: 44px; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink); cursor: pointer; }
.rv-case a { display: inline-block; padding-block: 13px; margin-block: -13px; font-weight: 600; color: var(--red-dark);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rv-attente { display: grid; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--r); background: var(--blush); line-height: 1.55; text-wrap: pretty; }
.rv-attente h3:focus { outline: none; }

/* ---------- Les coordonnées ---------- */
.rv-connecte { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--sp-3); font-size: var(--fs-sm); color: var(--muted); }
.rv-connecte strong { color: var(--navy-dark); overflow-wrap: anywhere; }
.rv-connecte .pr-lien { padding-inline: 0; }
.rv-whatsapp-aide { margin-top: calc(var(--sp-3) * -1); text-wrap: pretty; }
.rv-obligatoire { margin-top: 0; }
/* La règle se lit AVANT de réserver : prix, heure gardée, remboursement. */
.rv-regle { padding: var(--sp-3) var(--sp-4); border-radius: var(--r); background: var(--amber-light);
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); color: var(--amber-ink); font-size: var(--fs-sm); line-height: 1.5; text-wrap: pretty; }
.rv-deux { display: grid; gap: var(--sp-5); }
.rv-mention { font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); text-wrap: pretty; }
/* Un lien dans la phrase, mais une cible de doigt : la zone sensible monte
   à ~47 px sans rien déplacer (la marge négative rend la place prise). */
.rv-mention a { display: inline-block; min-width: 44px; padding-block: 13px; margin-block: -13px; font-weight: 600; color: var(--red-dark);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rv-mention a:hover { text-decoration-thickness: 2px; }
/* « Terms » fait 41 px de large : la cible du doigt reste à 44 px. */
.rv-page .pr-pied a { min-width: 44px; }
.rv-envoi-souci { display: grid; gap: var(--sp-3); }
.rv-envoi-souci .pr-actions { justify-content: flex-start; margin-top: 0; }

/* ---------- La confirmation ----------
   La carte sœur centre son texte et donne une marge à TOUT paragraphe et
   bouton : le billet, le récapitulatif et le paiement reprennent la main. */
/* Rien n'est acquis tant que ce n'est pas payé : pas de bord vert. */
.rv-confirme[data-genre="attente"] { border-color: var(--line); }
.rv-confirme .pr-h2 { margin-top: var(--sp-3); }
/* Avant le paiement, pas de coche : le titre ouvre la carte. */
.rv-confirme .pr-ico[hidden] + .pr-h2 { margin-top: 0; }
.rv-confirme .rv-billet p, .rv-confirme .rv-payer p, .rv-confirme .rv-changer p { margin: 0; max-width: none; }
.rv-confirme .rv-payer .btn, .rv-confirme .rv-changer .btn, .rv-confirme .rv-fini-actions .btn { margin-top: 0; }
.rv-billet, .rv-recap, .rv-payer { max-width: 26rem; margin-inline: auto; }
.rv-confirme .rv-note { max-width: 26rem; margin: var(--sp-4) auto 0; color: var(--amber-ink); }
.rv-confirme .rv-fini-actions { max-width: none; margin: var(--sp-5) 0 0; }
.rv-confirme .rv-changer .pr-texte-discret { color: var(--muted); }

/* Le billet : la tuile de calendrier, le jour en toutes lettres, l'heure. */
.rv-billet { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-5); padding: var(--sp-4);
  border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--line); text-align: left; }
.rv-tuile { flex: none; display: grid; width: 64px; overflow: hidden; border-radius: var(--r); background: var(--white);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm); text-align: center; }
.rv-tuile span { display: block; padding: 3px 0; background: var(--red-fond); color: var(--sur-couleur);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.3; }
.rv-tuile strong { display: block; padding: 6px 0 8px; font-family: 'Sora', 'Inter', sans-serif; font-size: var(--fs-xl); font-weight: 700;
  line-height: 1; color: var(--navy-dark); font-variant-numeric: tabular-nums; }
.rv-billet-corps { display: grid; gap: 2px; min-width: 0; }
.rv-confirme .rv-billet-date { font-family: 'Sora', 'Inter', sans-serif; font-size: var(--fs-lg); font-weight: 700; line-height: 1.3;
  color: var(--navy-dark); letter-spacing: -.01em; overflow-wrap: anywhere; }
.rv-confirme .rv-billet-heure { font-size: var(--fs-sm); color: var(--muted); }
.rv-billet-heure strong { font-size: var(--fs-md); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.rv-recap { display: grid; margin-top: var(--sp-3); text-align: left; font-size: var(--fs-sm); }
.rv-recap div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-2) var(--sp-1);
  border-bottom: 1px dashed var(--line-strong); }
.rv-recap dt { color: var(--muted); }
.rv-recap dd { margin: 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; text-wrap: pretty; }

/* Le paiement de la consultation : le montant, l'échéance, la règle, un seul bouton. */
.rv-payer { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg);
  background: var(--blush); border: 1px solid color-mix(in srgb, var(--red) 28%, transparent); text-align: left; }
.rv-payer .pr-a-payer { padding-bottom: 0; border-bottom: 0; }
.rv-payer .pr-a-payer em { margin-top: var(--sp-1); line-height: 1.5; text-wrap: pretty; }
.rv-payer .pr-btn { width: 100%; min-width: 0; }
.rv-payer-regle { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.rv-note { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r); background: var(--amber-light);
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); font-size: var(--fs-sm); line-height: 1.5;
  color: var(--amber-ink); text-align: left; text-wrap: pretty; }
.rv-changer { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.rv-changer .pr-actions { margin-top: 0; }
.rv-confirme > p:last-child { margin-top: var(--sp-3); }

/* Le seul mouvement de la page : à l'envoi, la coche se trace comme un trait
   de stylo, puis le billet se pose. Sans animation, tout est déjà là. */
@media (prefers-reduced-motion: no-preference) {
  .rv-vient-de-reserver .pr-trace path { stroke-dasharray: 24; animation: pr-trace .6s var(--ease-out) .15s backwards; }
  .rv-vient-de-reserver .rv-billet { animation: rv-pose .5s var(--ease-out) .35s backwards; }
}
@keyframes rv-pose { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Petits écrans ---------- */
@media (max-width: 30em) {
  .rv-option { padding: var(--sp-3) var(--sp-4); }
  .rv-billet { gap: var(--sp-3); padding: var(--sp-3); }
  .rv-payer { padding: var(--sp-4); }
  .rv-changer .pr-actions { flex-direction: row; }
  .rv-changer .pr-actions .btn { width: auto; flex: 1 1 8rem; }
}

/* ---------- Grand écran ---------- */
@media (min-width: 40em) {
  /* Une seule chose à faire : tout tient dans la colonne de 640 px, centrée,
     au lieu de laisser vide la moitié droite de l'écran. */
  .rv-page .pr-col { max-width: calc(640px + 2 * var(--sp-5)); }
  .rv-page .pr-etroit > * { max-width: none; }
  .rv-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .rv-heures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Sur ordinateur, les mêmes cases, en semaines : lundi en tête. */
  .rv-semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-2);
    font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-align: center; }
  .rv-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-inline: 0; padding: 0; overflow: visible; }
  .rv-jours::after { display: none; }
  .rv-jour-vide { display: block; }
  .rv-jour .rv-puce { min-height: 64px; padding-inline: 2px; }
  .rv-jour-sem { display: none; }
  .rv-jour-mois { display: none; }
  .rv-jour.est-repere .rv-jour-mois { display: block; }
  .est-grise .rv-jour-num { font-size: var(--fs-lg); }
}
@media (min-width: 60em) {
  .rv-chapeau { font-size: var(--fs-lg); }
  .rv-page .pr-bloc + .pr-bloc:not(#rvAide) { padding-top: var(--sp-8); }
}