/* Noval — la page de réservation. Même système que le site (styles.css) ; ici, seulement la mise en page :
   le texte à gauche (colonnes 1 à 5), à droite la carte du module Calendly (colonnes 7 à 12).
   Mobile : le texte, puis la carte. */

/* la page est claire du haut jusqu'au pied : le fond crème évite tout liseré sombre entre deux sections */
body { background: var(--paper); }

.rdv { padding-top: calc(80px + var(--s7)); }
.rdv__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s6); align-items: start; }
.rdv__text { grid-column: 1 / span 5; }
.rdv__text .sec-p { margin-top: var(--s4); }
.rdv__slot { grid-column: 7 / -1; }

/* la carte : le module Calendly dans un seul cadre (filet 1 px, arrondi 12 px, fond crème), puis les deux liens.
   Un vrai bord (pas une ombre intérieure, que l'iframe recouvrirait) ; overflow: hidden arrondit les coins du module.
   container-type : la hauteur réservée dépend de la largeur du module (voir --cal-h). */
.rdv__slot { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; container-type: inline-size; }
.rdv__note, .rdv__fallback { font-size: var(--fs-meta); line-height: var(--lh-snug); color: var(--ink-2); }
.rdv__fallback a { white-space: nowrap; color: var(--wine); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(120, 40, 73, .35); }
.rdv__fallback a:hover { text-decoration-color: var(--wine); }
/* le lien vers la politique : petit et discret (la couleur du texte courant, souligné léger) */
.rdv__note a { color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(108, 90, 99, .35); }
.rdv__note a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* le module bord à bord dans la carte ; widget.js règle sa hauteur (resize : pas de barre de défilement dans l'iframe,
   style « height » posé sur .rdv__cal). --cal-h = la hauteur du calendrier chargé, relevée le 2026-10-12 : 602 px,
   700 px quand le module fait au moins 650 px de large (Calendly change alors de mise en page). Pendant le chargement,
   la carte garde cette hauteur (Calendly annonce d'abord 26 puis 2 px) : rien ne bouge quand le module apparaît. */
.rdv__cal { --cal-h: 602px; position: relative; display: block; width: 100%; min-width: 320px; height: var(--cal-h); }
@container (min-width: 650px) { .rdv__cal { --cal-h: 700px; } }
.rdv__cal iframe { display: block; transition: opacity .4s var(--ease); }
.rdv__cal .calendly-spinner { display: none; }   /* l'attente de Calendly (sans sa feuille de style) : la nôtre la remplace */
.rdv__slot.is-loading .rdv__cal { height: var(--cal-h) !important; }
.rdv__slot.is-loading .rdv__cal iframe { opacity: 0; }
html:not(.js) .rdv__cal { display: none; }   /* sans JavaScript : seulement le lien vers Calendly */

/* l'attente : discrète, au centre de la place réservée ; trois points qui respirent et une ligne de texte */
.rdv__wait { display: none; position: absolute; inset: 0; margin: 0; padding: var(--s5); flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); text-align: center; font-size: var(--fs-meta); line-height: var(--lh-snug); color: var(--ink-2); }
.rdv__slot.is-loading .rdv__wait { display: flex; }
.rdv__dots { display: flex; gap: 6px; }
.rdv__dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .25; animation: rdv-dot 1.2s ease-in-out infinite; }
.rdv__dots i:nth-child(2) { animation-delay: .2s; }
.rdv__dots i:nth-child(3) { animation-delay: .4s; }
@keyframes rdv-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: .8; } }
.rdv__slot.is-failed .rdv__dots { display: none; }
@media (prefers-reduced-motion: reduce) { .rdv__dots i { animation: none; opacity: .45; } }

/* sous le module : le lien de repli et celui de la politique, au pied de la carte */
.rdv__fallback { margin: 0; padding: var(--s4) var(--s5) 0; }
.rdv__note { margin: 0; padding: var(--s1) var(--s5) var(--s4); }

/* ---------- Tablette et mobile : une colonne ---------- */
@media (max-width: 900px) {
  .rdv__grid { grid-template-columns: minmax(0, 1fr); }
  .rdv__text, .rdv__slot { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .rdv { padding-top: calc(64px + var(--s6)); }
  .rdv__cal { min-width: 0; }
  .rdv__fallback { padding: var(--s3) var(--s4) 0; }
  .rdv__note { padding: var(--s1) var(--s4) var(--s3); }
}