/* ==========================================================================
   rdv.css : réservation en ligne (e05). Module propre à la fonction (fusionné dans lessard.css à la fin).
   Gabarit : .mise-formulaire + .carte-formulaire + .carte-appui de lessard.css. Tout ce qui suit est préfixé « rdv- ».

   .rdv                    carte du parcours (conteneur : les requêtes @container « rdv » s'adaptent à sa largeur)
   .rdv-progres            ol des 4 étapes ; .rdv-pas (--fait, --courant, --a-venir) > .rdv-pas__bouton > __num + __nom
   .rdv-progres__texte     « Étape 2 sur 4 · Date et heure » (carte étroite et mobile : la barre remplace les noms)
   .rdv-etape              panneau d'une étape (pile de 28) ; .rdv-etape__intro ; .rdv-actions (Retour / Continuer)
   .rdv-localiser          « Me localiser » + aide ; .rdv-localiser__etat (succès, refus) ; .rdv-chargement, .rdv-rouet
   .rdv-cliniques          liste par région : .rdv-region > .rdv-region__liste > label.choix.rdv-clinique
                           (__texte, __nom, __dist ; « La plus proche » = .pastille)
   .rdv-date               calendrier à gauche, créneaux à droite (une colonne dans une carte étroite)
   .rdv-cal                __tete (mois, flèches), __table, __legende, __heures ; .rdv-cle (légende)
   .rdv-jour               bouton d'un jour : .est-dispo (en relief), .est-aujourdhui, aria-pressed (choisi),
                           aria-disabled (aucune disponibilité, grisé)
   .rdv-creneaux           __tete (date), __groupe (matin, après-midi, soir) > __liste > .rdv-creneau (pastille de 44)
   .rdv-vide / .rdv-invite « Aucune disponibilité ce mois-ci » / « Choisissez une date »
   .rdv-recap              récapitulatif de la colonne d'appui (dt/dd, « À choisir » en gris)
   .rdv-numero             numéro de confirmation (étape 4)
   ========================================================================== */

[data-rdv] [hidden] { display: none !important; }
.rdv { container: rdv / inline-size; position: relative; }
.rdv-sr { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; clip-path: inset(50%); white-space: nowrap; }   /* annonces pour lecteur d'écran */

/* Progression ---------------------------------------------------------------- */
.rdv-progres { display: flex; align-items: center; gap: 8px; margin-bottom: 32px; padding: 0; list-style: none; }
.rdv-pas { display: flex; align-items: center; flex: 1 1 0; min-width: 0; gap: 8px; }
.rdv-pas:last-child { flex: 0 0 auto; }
.rdv-pas::after { content: ""; flex: 1 1 16px; min-width: 16px; height: 2px; border-radius: 2px; background: var(--filet); }
.rdv-pas:last-child::after { display: none; }
.rdv-pas--fait::after { background: var(--accent); }
.rdv-pas__bouton {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px 0 0; border: 0; background: none;
  font: 500 14px/20px var(--police-texte); color: var(--encre3); text-align: left; white-space: nowrap;
}
.rdv-pas__num {
  width: 36px; height: 36px; flex: none; border-radius: var(--r-pilule); display: grid; place-items: center;
  background: var(--ciel); color: var(--encre3); font: 600 14px/1 var(--police-titre); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.rdv-pas__num .ico { width: 16px; height: 16px; stroke-width: 2.5; }
.rdv-pas--courant .rdv-pas__num { background: var(--accent); color: var(--sur-accent); }
.rdv-pas--courant .rdv-pas__bouton { color: var(--encre1); font-weight: 600; cursor: default; }
.rdv-pas--fait .rdv-pas__num { background: var(--accent); color: #fff; }
.rdv-pas--fait .rdv-pas__bouton { color: var(--encre1); }
.rdv-pas--fait .rdv-pas__bouton:hover .rdv-pas__nom { text-decoration: underline; text-underline-offset: 3px; }
.rdv-pas__bouton:disabled { cursor: default; }
.rdv-progres__texte { display: none; margin: -16px 0 24px; font: 500 14px/20px var(--police-texte); color: var(--encre1); }

/* Étapes --------------------------------------------------------------------- */
.rdv-etape { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.rdv-etape__intro { margin-top: -14px; color: var(--encre2); }
.rdv-etape__intro .lien-action { margin-left: 4px; }
.rdv-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.rdv-actions--fin { justify-content: flex-end; }
.rdv-etape > .resume-erreurs { margin: 0; }
.rdv-pris__texte { margin-top: 4px; font: 400 14px/1.5 var(--police-texte); }
.rdv .formulaire__rangee { margin: 0; }
.rdv-consentement__lien { padding-left: 38px; font: 400 14px/1.5 var(--police-texte); color: var(--encre3); }

/* Étape 1 : « Me localiser » et cliniques ---------------------------------------- */
.rdv-localiser { display: flex; align-items: center; flex-wrap: wrap; gap: 0 16px; margin-top: -8px; }
.rdv-localiser__etat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.rdv-localiser__etat:empty { display: none; }
.rdv-localiser__etat > .champ__succes, .rdv-localiser__etat > .champ__erreur { align-self: stretch; }
.rdv-chargement { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.rdv-rouet { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2.5px solid var(--accent-pale); border-top-color: var(--accent-fonce); animation: rouet .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .rdv-rouet { animation-duration: 2.4s; } }
.rdv .btn--chargement:disabled { opacity: 1; box-shadow: var(--o-bleue); }
.rdv-cliniques { display: flex; flex-direction: column; gap: 24px; }
.rdv-region { display: flex; flex-direction: column; gap: 12px; }
.rdv-region__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rdv-clinique { align-items: center; }
.rdv-clinique__texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.rdv-clinique__nom { font: 500 16px/1.4 var(--police-texte); color: var(--encre1); }
.rdv-clinique__dist { flex: none; font: 600 14px/1.4 var(--police-texte); color: var(--encre2); white-space: nowrap; }
.rdv-clinique .pastille { margin-bottom: 4px; }
.rdv-clinique .choix__sous { overflow-wrap: anywhere; }

/* Étape 2 : calendrier et créneaux ------------------------------------------------ */
.rdv-date { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.rdv-cal { min-width: 0; }
.rdv-cal__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.rdv-cal__mois { flex: 1; text-align: center; }
.rdv-cal__mois::first-letter { text-transform: uppercase; }
.rdv-cal__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.rdv-cal__table th { padding: 8px 0; font: 500 13px/16px var(--police-texte); color: var(--encre3); text-align: center; }
.rdv-cal__table td { padding: 0; text-align: center; }
.rdv-jour {
  position: relative; display: block; width: 100%; min-height: 48px; padding: 0; border: 0; background: none;
  font: 400 15px/1 var(--police-texte); color: var(--encre3); cursor: default;
}
.rdv-jour::before { content: ""; position: absolute; inset: 2px; border-radius: 12px; }
.rdv-jour > span { position: relative; }
.rdv-jour.est-dispo { color: var(--encre1); font-weight: 600; cursor: pointer; }
.rdv-jour.est-dispo::before { background: var(--ciel); }
.rdv-jour.est-dispo:hover::before { box-shadow: inset 0 0 0 1.5px var(--accent-fonce); }
.rdv-jour.est-aujourdhui::before { box-shadow: inset 0 0 0 2px var(--encre1); }
.rdv-jour[aria-pressed="true"] { color: var(--sur-accent); font-weight: 600; }
.rdv-jour[aria-pressed="true"]::before { background: var(--accent); box-shadow: none; }
.rdv-jour:focus-visible { outline-offset: -2px; border-radius: 14px; }
.rdv-cal__legende { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 12px; padding: 0; list-style: none; font: 400 13px/1.4 var(--police-texte); color: var(--encre2); }
.rdv-cal__legende li { display: inline-flex; align-items: center; gap: 8px; }
.rdv-cle { width: 16px; height: 16px; flex: none; border-radius: 5px; }
.rdv-cle--dispo { background: var(--ciel); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.rdv-cle--aucun { background: #fff; box-shadow: inset 0 0 0 1.5px var(--filet); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.rdv-cle--aujourdhui { background: #fff; box-shadow: inset 0 0 0 2px var(--encre1); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.rdv-cal__heures { margin-top: 12px; }

.rdv-creneaux { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.rdv-creneaux__tete .titre-4::first-letter { text-transform: uppercase; }
.rdv-creneaux__tete .second { margin-top: 4px; }
.rdv-creneaux__groupe { display: flex; flex-direction: column; gap: 8px; }
.rdv-creneaux__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.rdv-creneau {
  min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-pilule); background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--contour); font: 500 15px/1 var(--police-texte); color: var(--encre1); white-space: nowrap; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.rdv-creneau:hover { box-shadow: inset 0 0 0 1.5px var(--accent-fonce); }
.rdv-creneau[aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); box-shadow: none; font-weight: 600; }
.rdv-invite, .rdv-vide { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 20px; border-radius: var(--r-carte); background: var(--ciel); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); box-shadow: var(--o-carte); }
.rdv-invite .corps { color: var(--encre2); }
.rdv-vide .orbe { background: #fff; color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.rdv-vide__actions { display: flex; flex-direction: column; gap: 12px; align-self: stretch; margin-top: 4px; }
.rdv-vide__actions .btn { justify-content: space-between; }
#rdv-erreur-2 { align-self: stretch; }

/* Colonne d'appui : récapitulatif ------------------------------------------------- */
.rdv-recap { display: flex; flex-direction: column; gap: 14px; }
.rdv-recap__ligne { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; font: 400 15px/1.5 var(--police-texte); }
.rdv-recap dt { color: var(--encre3); }
.rdv-recap dd { margin: 0; color: var(--encre1); font-weight: 500; overflow-wrap: anywhere; }
.rdv-recap__vide { color: var(--encre3); font-weight: 400; }

/* Étape 4 : confirmation ---------------------------------------------------------- */
.rdv-numero { font: 400 16px/1.5 var(--police-texte); color: var(--encre2); margin-top: -12px; }
.rdv-numero strong { white-space: nowrap; font: 600 16px/1.5 var(--police-titre); color: var(--encre1); letter-spacing: .5px; }
.confirmation > .banniere { align-self: stretch; }
.confirmation > .actions { align-items: center; }
.rdv-ics-etat { margin-top: -8px; }
.rdv-ics-etat:empty { display: none; }

/* Carte large : calendrier à gauche, créneaux à droite -------------------------------- */
@container rdv (min-width: 640px) {
  .rdv-date { grid-template-columns: minmax(0, 1fr) 280px; }
}
/* Carte étroite : la barre remplace les noms d'étapes */
@container rdv (max-width: 619px) {
  .rdv-progres { gap: 6px; margin-bottom: 20px; }
  .rdv-pas, .rdv-pas:last-child { flex: 1 1 0; }
  .rdv-pas::after { display: none; }
  .rdv-pas__bouton { position: relative; width: 100%; justify-content: center; padding: 0; }
  .rdv-pas__bouton::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; translate: 0 -50%; border-radius: 6px; background: var(--filet); }
  .rdv-pas--fait .rdv-pas__bouton::before { background: var(--accent-fonce); }
  .rdv-pas--courant .rdv-pas__bouton::before { background: var(--accent); }
  .rdv-pas__num, .rdv-pas__nom { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* masqués à l'écran, lus par les lecteurs d'écran : ils forment le nom du bouton */
  .rdv-progres__texte { display: block; margin: 0 0 24px; }
  .rdv-region__liste { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .rdv-etape { gap: 24px; }
  .rdv-actions { flex-direction: column-reverse; align-items: stretch; }
  .rdv-actions .btn { width: 100%; }
  .rdv-cal__tete { margin-bottom: 4px; }
  .confirmation > .actions { flex-direction: column; align-items: stretch; }
  .confirmation > .actions .btn { width: 100%; }
  .confirmation > .actions .lien-action { justify-content: center; }
  .rdv-creneaux__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tablette : seule l'étape courante garde son nom, les autres se lisent par leur numéro */
@media (max-width: 1023px) {
  .rdv-pas:not(.rdv-pas--courant) .rdv-pas__nom { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}