/* ═══════════════════════════════════════════════════════════════════
   La section de réservation (#contact de l'accueil et des tarifs) et le
   calendrier qu'elle porte (calendrier.js).

   Refonte du 01/10/2026 (Léon : « elle porte à confusion, ça devrait
   être une page de passage à l'action »). Un seul geste : réserver.
   • le titre dit le geste ;
   • le billet, à gauche, dit ce qu'on réserve : avec qui, combien de
     temps, comment, combien ;
   • le calendrier, à droite, montre ses trois étapes dès le départ, et
     les jours à côté des heures : tout le choix tient dans un écran ;
   • le reste (assistant, adresse) tient en une ligne sous le bloc.

   Deuxième passe, le même jour (Léon : « on voit beaucoup certains
   contours, c'est bizarre ») : plus aucun cadre autour des jours et des
   heures. Un jour ou une heure qu'on peut choisir est une pastille
   teintée ; ce qu'on ne peut pas choisir n'a pas de fond ; ce qu'on a
   choisi prend le dégradé. Les seuls traits qui restent ont un sens :
   le bord du bloc, le pointillé du billet, les champs du formulaire.

   Tout le style de la section est ici, et non dans les pages : l'accueil
   et les tarifs le partagent. Les champs et le bouton gardent les
   classes du site (.field, .btn-primary) ; leurs corrections téléphone
   restent dans mobile.css (champs à 16px).
   ═══════════════════════════════════════════════════════════════════ */

.rdv {
  --cal-teinte: rgba(106, 92, 255, 0.075);   /* ce qu'on peut choisir */
  --cal-survol: rgba(106, 92, 255, 0.15);    /* sous la souris */
  --cal-encre: #4b3fd9;                      /* texte sur la teinte, 4,5:1 et plus */
  --cal-trait: #e6e4f3;                      /* les rares traits du bloc */
  --cal-ressort: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── L'en-tête de la section ── */
.rdv-tete { max-width: 760px; margin-bottom: 52px; }
.rdv-titre { font-size: clamp(2.1rem, 4.4vw, 3.5rem); margin-bottom: 22px; }
.rdv-lead {
  max-width: 620px;
  color: var(--muted);
  font-size: clamp(15px, 1.2vw, 17px); line-height: 1.75; font-weight: 300;
}

/* ── Le bloc : le billet, puis le calendrier ── */
.rdv {
  position: relative;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  border: 1px solid var(--cal-trait);
  border-radius: 18px;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(13, 13, 18, 0.04),
    0 28px 60px -30px rgba(106, 92, 255, 0.38),
    0 12px 28px -18px rgba(0, 178, 255, 0.22);
  text-align: left;
}
/* Le liseré dégradé, signature du site, en haut du bloc. */
.rdv::before {
  content: ''; position: absolute; top: -1px; left: 36px; right: 36px; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--accent) 22%, var(--accent-2) 78%, transparent);
  pointer-events: none;
}

/* Le billet : un talon teinté, séparé par un pointillé. */
.rdv-billet {
  display: flex; flex-direction: column; gap: 30px;
  padding: 38px 32px 32px;
  border-right: 1.5px dashed #dcd9ef;
  border-radius: 17px 0 0 17px;
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(106, 92, 255, 0.10), transparent 70%),
    radial-gradient(90% 60% at 100% 100%, rgba(0, 178, 255, 0.08), transparent 70%),
    #fbfbff;
}

.rdv-qui { display: flex; align-items: center; gap: 14px; }
.rdv-qui p { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rdv-qui b {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 16px;
  letter-spacing: -0.01em; color: var(--text);
}
.rdv-qui span:not(.rdv-av) { font-size: 13px; color: var(--muted); }
.rdv-av { display: flex; flex-shrink: 0; }
/* Les visages sont recadrés dans leurs fichiers (144 x 144, yeux à la
   même hauteur), comme dans le constat de l'accueil. */
.rdv-av img {
  display: block;
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #eeecff, #e6f6ff);
  border: 2px solid #fff;
  box-shadow: 0 6px 14px -6px rgba(13, 13, 18, 0.32);
}
.rdv-av img + img { margin-left: -14px; }

.rdv-faits { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
.rdv-faits li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 15px; line-height: 1.45; color: var(--text);
}
.rdv-faits svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent); }

.rdv-lab {
  margin-bottom: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.005em;
  color: var(--text);
}
.rdv-pendant p:not(.rdv-lab) {
  font-size: 14px; line-height: 1.65; font-weight: 300;
  color: #4b5160;
}
/* Le prix de l'audit reste écrit, mais en dernier : ce n'est pas ce que
   le visiteur réserve ici. */
.rdv-apres {
  margin-top: auto;
  font-size: 13px; line-height: 1.65;
  color: var(--muted);
}
.rdv-apres b { font-weight: 600; color: var(--text); }

/* La sortie de secours, en une ligne sous le bloc. */
.rdv-autre {
  margin-top: 26px;
  font-size: 14px; line-height: 1.7;
  color: var(--muted);
}
.rdv-lien {
  padding: 0;
  border: 0;
  background: none;
  font: inherit; color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(106, 92, 255, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
.rdv-lien:hover { color: var(--accent); text-decoration-color: currentColor; }
.rdv-lien:active { color: var(--cal-encre); }
.rdv-lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* Tablette : le billet passe au-dessus du calendrier, en deux colonnes,
   pour que le calendrier arrive vite. */
@media (max-width: 960px) {
  .rdv { grid-template-columns: minmax(0, 1fr); }
  .rdv-billet {
    display: grid; gap: 22px 40px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "qui faits" "pendant faits" "apres apres";
    padding: 30px 32px 26px;
    border-right: 0; border-bottom: 1.5px dashed #dcd9ef;
    border-radius: 17px 17px 0 0;
  }
  .rdv-qui { grid-area: qui; }
  .rdv-faits { grid-area: faits; align-self: center; }
  .rdv-pendant { grid-area: pendant; }
  .rdv-apres { grid-area: apres; margin-top: 0; }
}

/* Le curseur du site (un point et un rond qui suit la souris) laisse la
   place au curseur normal au-dessus du bloc : le rond se posait sur les
   petits boutons et doublait leurs contours. calendrier.js pose la classe. */
@media (pointer: fine) {
  body.cursor-natif #cursor-dot,
  body.cursor-natif #cursor-orb { opacity: 0 !important; }
  .rdv { cursor: auto; }
  .rdv a, .rdv button, .rdv label[for] { cursor: pointer !important; }
  .rdv button:disabled { cursor: default !important; }
  .rdv .btn-primary:disabled { cursor: progress !important; }
}

/* ═══════════════════ Le calendrier (calendrier.js) ═══════════════════ */

.cal {
  min-width: 0;
  padding: 32px 40px 28px;
  min-height: 470px;
  container-type: inline-size;
  /* La question qui glisse ne doit pas élargir la page sur téléphone. */
  overflow-x: clip;
}
.cal-sous { color: var(--muted); font-size: 14px; line-height: 1.7; }
.cal-sous a { color: var(--accent); }
.cal-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Les trois étapes ── */
.cal-etapes {
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 30px; padding: 0;
}
.cal-etape {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 500; letter-spacing: 0.005em;
  color: var(--muted);
}
.cal-etape + .cal-etape::before {
  content: ''; flex-shrink: 0;
  width: 32px; height: 2px; margin-right: 1px; border-radius: 2px;
  background: var(--cal-trait);
}
.cal-etape-n {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: #f1f0f8;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 12.5px;
  color: var(--muted);
}
.cal-etape[data-etat="ici"] { color: var(--text); }
.cal-etape[data-etat="ici"] .cal-etape-n {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 5px 14px -4px rgba(106, 92, 255, 0.55);
}
.cal-etape[data-etat="fait"] .cal-etape-n {
  background: var(--cal-teinte);
  color: var(--accent);
}
.cal-etape[data-etat="fait"] + .cal-etape::before { background: var(--grad); }

/* ── Étape 1 : les jours à gauche, les heures à droite ── */
.cal-choix { display: grid; gap: 30px; }
/* Les jours prennent ce qu'il faut à cinq cases ; les heures, le reste,
   pour tenir sur quatre colonnes et ne pas creuser un vide sous les jours. */
@container (min-width: 600px) {
  .cal-choix { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 0 44px; }
}

.cal-mois, .cal-jour-choisi {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  min-height: 24px;
  margin-bottom: 14px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.cal-fuseau {
  font-family: 'Inter', sans-serif; font-weight: 400; font-size: 12.5px; letter-spacing: 0.005em;
  color: var(--muted);
  white-space: nowrap;
}

/* Les jours et les heures : des pastilles, jamais de cadre. */
.cal-grille {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.cal-entete {
  padding-bottom: 4px;
  text-align: center;
  font-size: 11.5px; color: var(--muted);
}
.cal-jour, .cal-heure {
  border: 0;
  background: var(--cal-teinte);
  color: var(--cal-encre);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.2s ease,
              transform 0.22s var(--cal-ressort);
}
.cal-jour {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 52px;
  border-radius: 12px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 16px;
}
.cal-jour small {
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11px;
  color: inherit; opacity: 0.75;
}
.cal-heure {
  min-height: 46px;
  border-radius: 10px;
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}
.cal-jour:hover, .cal-heure:hover { background: var(--cal-survol); }
.cal-jour:active, .cal-heure:active { transform: scale(0.95); }
.cal-jour:focus-visible, .cal-heure:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* Ce qu'on a choisi : le dégradé de la marque. */
.cal-jour[aria-pressed="true"], .cal-heure[aria-pressed="true"] {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(106, 92, 255, 0.55);
}
/* Un jour sans créneau reste à sa place, sans fond : la semaine garde sa
   forme, et rien n'invite à cliquer. */
.cal-jour:disabled {
  background: transparent;
  color: #b8bbc6;
  font-weight: 500;
  cursor: default;
}
.cal-jour:disabled:active { transform: none; }

.cal-moment {
  margin: 0 0 8px;
  font-size: 12px; letter-spacing: 0.005em;
  color: var(--muted);
}
.cal-heures + .cal-moment { margin-top: 18px; }
.cal-legende {
  margin-top: 14px;
  font-size: 12.5px; line-height: 1.6;
  color: var(--muted);
}
.cal-heures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px;
}

/* ── Étape 2 : les coordonnées ── */
.cal-recap {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 22px;
  padding: 6px 6px 6px 16px;
  border-radius: 12px;
  background: var(--cal-teinte);
  font-size: 14px; line-height: 1.5;
  color: var(--text);
}
.cal-recap span { min-width: 0; }
.cal-recap b { font-weight: 600; }
.cal-changer {
  flex-shrink: 0;
  min-height: 44px; padding: 0 14px;
  border: 0; border-radius: 9px;
  background: transparent;
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 13px;
  color: var(--cal-encre);
  cursor: pointer;
  transition: background-color 0.16s ease;
}
.cal-changer:hover { background: rgba(106, 92, 255, 0.10); }
.cal-changer:active { background: rgba(106, 92, 255, 0.18); }
.cal-changer:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cal .btn-primary { width: 100%; justify-content: center; font-size: 15px; padding: 17px 31px; border-radius: 10px; }
.cal .btn-primary:disabled { opacity: 0.6; }

/* Les trois questions, une par écran, comme Typeform (Léon, 01/10/2026 :
   « c'est bizarrement fait »). Un compteur, la question en grand, les
   réponses en tuiles, puis « Retour » et « Continuer ». */
.cal-q { min-width: 0; }
.cal-q-compte {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px;
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.005em;
  color: var(--cal-encre);
}
.cal-q-traits { display: flex; gap: 4px; }
.cal-q-traits i { width: 18px; height: 4px; border-radius: 2px; background: var(--cal-trait); }
.cal-q-traits i[data-fait] { background: var(--grad); }
.cal-q-titre {
  margin: 0 0 6px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: 23px; line-height: 1.25; letter-spacing: -0.02em;
  color: var(--text);
  outline: none;
}
.cal-q-aide { margin: 0 0 20px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* Les réponses : de grandes tuiles teintées, sans cadre, comme les jours
   et les heures. Ce qu'on a choisi prend le dégradé. */
.cal-reps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cal-rep {
  display: flex; align-items: center; gap: 12px;
  min-height: 54px; padding: 12px 16px;
  border: 0; border-radius: 12px;
  background: var(--cal-teinte);
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14.5px; line-height: 1.35;
  color: var(--cal-encre);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.2s ease,
              transform 0.22s var(--cal-ressort);
}
.cal-rep:hover { background: var(--cal-survol); }
.cal-rep:active { transform: scale(0.97); }
.cal-rep:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cal-rep[aria-pressed="true"] {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(106, 92, 255, 0.55);
}
/* La marque dit la règle : un carré, on peut en cocher plusieurs ; un
   rond, une seule réponse. Pleine et cochée quand c'est choisi. */
.cal-rep-marque {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 6px;
  background: rgba(106, 92, 255, 0.16);
  color: transparent;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.cal-reps--une .cal-rep-marque { border-radius: 50%; }
.cal-rep[aria-pressed="true"] .cal-rep-marque { background: #fff; color: var(--accent); }

/* « Autre » ouvre son champ juste sous les tuiles. */
.cal-autre { margin: 14px 0 0; }
.cal-autre[hidden] { display: none; }

/* Retour à gauche, la suite à droite. */
.cal-nav { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 26px; }
.cal-nav .btn-primary { width: auto; min-width: 220px; }
.cal-nav .btn-primary svg { flex-shrink: 0; }
/* Sous le dernier champ, le même écart que sous les tuiles. */
.cal-q .field-row + .field-row .field { margin-bottom: 0; }
.cal-retour {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  min-height: 44px; margin-right: auto; padding: 0 14px 0 10px;
  border: 0; border-radius: 9px;
  background: transparent;
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.cal-retour:hover { background: rgba(106, 92, 255, 0.08); color: var(--cal-encre); }
.cal-retour:active { background: rgba(106, 92, 255, 0.16); }
.cal-retour:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* D'une question à l'autre, seule la question glisse : vers la gauche
   quand on avance, vers la droite quand on revient. */
.cal-q-avant { animation: cal-avant 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.cal-q-arriere { animation: cal-arriere 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes cal-avant { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes cal-arriere { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

/* Les champs : mêmes coins que les pastilles et le bouton, un trait doux
   qui fonce au survol. Le focus (bord indigo et halo) vient de la page. */
.cal .field input {
  border-color: #dcd9ef;
  border-radius: 10px;
}
.cal .field input:hover { border-color: #c4bfe6; }
.cal .field input:focus { border-color: var(--accent); }
.cal-champ-faux { border-color: #e5484d !important; }
.cal-piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* La note de bas de calendrier, pareille sur les deux pages. */
.cal .form-note { margin-top: 20px; text-align: center; font-size: 12px; line-height: 1.7; color: var(--muted); }
.cal .form-note a {
  color: var(--muted);
  text-decoration: underline; text-decoration-color: var(--cal-trait); text-underline-offset: 3px;
  border: 0;
  transition: color 0.16s ease, text-decoration-color 0.16s ease;
}
.cal .form-note a:hover { color: var(--accent); text-decoration-color: currentColor; }
.cal .form-note a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* ── Messages : attente, rien de libre, panne, erreur ── */
.cal-statut {
  margin-top: 16px;
  font-size: 13px; line-height: 1.6; letter-spacing: 0.005em;
  color: #c62f35;
}
.cal-statut:empty { display: none; }
.cal-statut a { color: inherit; }
.cal-vide {
  padding: 90px 10px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px; line-height: 1.7; font-weight: 300;
}
.cal-vide strong { display: block; margin-bottom: 6px; color: var(--text); font-weight: 500; }
.cal-vide a { color: var(--accent); }
.cal-vide .btn-ghost { margin-top: 20px; }

.cal-squelette { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.cal-squelette--heures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cal-squelette span {
  height: 52px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(106, 92, 255, 0.06), rgba(0, 178, 255, 0.08));
  animation: cal-pouls 1.4s ease-in-out infinite;
}
.cal-squelette--heures span { height: 46px; border-radius: 10px; }
.cal-squelette span:nth-child(2n) { animation-delay: 0.15s; }
.cal-squelette span:nth-child(3n) { animation-delay: 0.3s; }
@keyframes cal-pouls { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ── Étape 3 : c'est réservé ── */
.cal-fait { padding: 44px 6px 16px; text-align: center; }
.cal-fait-pastille {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin: 0 auto 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6a5cff, #00b2ff);
  box-shadow: 0 10px 28px rgba(106, 92, 255, 0.30);
  animation: cal-tampon 0.42s var(--cal-ressort) both;
}
@keyframes cal-tampon { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
.cal-fait h3 {
  margin-bottom: 12px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em;
  outline: none;
}
.cal-fait p {
  max-width: 380px; margin: 0 auto;
  color: var(--muted);
  font-size: 14.5px; line-height: 1.7; font-weight: 300;
}
.cal-fait p b { color: var(--text); font-weight: 500; }

/* Une étape qui arrive : un fondu court, rien de plus. */
.cal-arrivee { animation: cal-entree 0.22s ease-out; }
@keyframes cal-entree { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Un calendrier étroit (téléphone, tablette) : seule l'étape en cours
   garde son nom à l'écran, les autres le gardent pour les lecteurs
   d'écran. */
@container (max-width: 520px) {
  .cal-etape:not([data-etat="ici"]) .cal-etape-l {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .cal-etape + .cal-etape::before { width: 22px; }
  .cal-q-titre { font-size: 20px; }
  .cal-q-aide { margin-bottom: 16px; }
  .cal-nav { margin-top: 20px; }
  .cal-nav .btn-primary { flex: 1; min-width: 0; }
}
/* Les longues réponses passent sur une colonne ; les tailles, courtes,
   restent sur deux. */
@container (max-width: 440px) {
  .cal-reps:not(.cal-reps--une) { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .cal-arrivee, .cal-squelette span, .cal-fait-pastille, .cal-q-avant, .cal-q-arriere { animation: none; }
  .cal-jour, .cal-heure, .cal-rep, .cal-rep-marque, .cal-changer, .cal-retour, .rdv-lien { transition: none; }
  .cal-jour:active, .cal-heure:active, .cal-rep:active { transform: none; }
}

@media (max-width: 768px) {
  .cal { min-height: 0; }
  .cal-jour { min-height: 50px; }
}