/* ============================================================
   Calendrier de choix d'un créneau — feuille unique

   Partagée par la page publique de prise de rendez-vous, l'espace client
   et l'aperçu consulté depuis la fiche : une seule feuille, donc aucun
   écart possible entre ce que voit le client et ce que voit le cabinet.

   Les cases du calendrier sont plus hautes que larges : la largeur est
   imposée par les sept colonnes, la hauteur ne l'est pas — c'est elle qui
   rend la cible confortable au doigt, y compris sur un téléphone.
   ============================================================ */

.rdv-calendrier {
  border: 1.5px solid #c9c3b8;
  border-radius: 5px;
  background: #fff;
  padding: 14px 12px 16px;
  margin: 16px 0 24px;
}

.rdv-cal-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.rdv-cal-mois {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--encre);
}

.rdv-cal-fleche {
  width: 46px;
  height: 46px;
  border: 1.5px solid #c9c3b8;
  border-radius: 4px;
  background: #fff;
  font-family: 'Jost', sans-serif;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--encre);
  cursor: pointer;
  margin: 0;
  padding: 0;
}
.rdv-cal-fleche:hover:not(:disabled) { border-color: var(--encre); }
.rdv-cal-fleche:disabled { color: #cfcac2; cursor: default; }

.rdv-cal-grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

/* Un mois masqué doit disparaître pour de bon. Sans cette ligne, le display:grid
   ci-dessus l'emporte sur l'attribut hidden et les mois s'empilent les uns sous
   les autres — invisible tant que l'horizon tient dans un seul mois. */
.rdv-cal-grille[hidden],
.rdv-heures-jour[hidden] { display: none; }

.rdv-cal-nom {
  font-family: 'Jost', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-léger);
  text-align: center;
  padding-bottom: 6px;
}

.rdv-cal-vide { min-height: 52px; }

.rdv-cal-hors {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  font-family: 'Jost', sans-serif;
  font-size: 1rem;
  color: #cfcac2;
}

.rdv-cal-jour input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.rdv-cal-jour > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border: 1.5px solid #c9c3b8;
  border-radius: 4px;
  background: #fff;
  font-family: 'Jost', sans-serif;
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--encre);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.rdv-cal-jour > span:hover { border-color: var(--encre); }
.rdv-cal-jour input:checked + span { background: var(--encre); border-color: var(--encre); color: #fff; }
.rdv-cal-jour input:focus-visible + span { outline: 2px solid var(--encre); outline-offset: 2px; }

/* Heures du jour choisi. Le jour est redit en toutes lettres : on sait
   toujours ce qu'on est en train de réserver, même après avoir défilé. */
.rdv-heures-titre {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--encre);
  margin: 0 0 12px;
}

/* Les créneaux se rangent en petites pastilles : prendre rendez-vous doit
   rester possible et clair, sans que la grille d'horaires occupe l'écran
   et pousse à réserver. La largeur est bornée pour la même raison. */
.rdv-heures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: 5px;
  max-width: 340px;
}

.rdv-creneau input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.rdv-creneau > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 3px;
  border: 1px solid #d3cdc3;
  border-radius: 3px;
  background: #fff;
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  color: var(--encre);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.rdv-creneau > span:hover { border-color: var(--encre); }
.rdv-creneau input:checked + span { background: var(--encre); border-color: var(--encre); color: #fff; font-weight: 500; }
.rdv-creneau input:focus-visible + span { outline: 2px solid var(--encre); outline-offset: 2px; }

.rdv-calendrier-avertissement {
  font-size: 0.9rem;
  color: #a33;
  margin: 0 0 14px;
}

@media (prefers-reduced-motion: reduce) {
  .rdv-cal-jour > span,
  .rdv-creneau > span { transition: none; }
}

@media (max-width: 420px) {
  .rdv-calendrier { padding: 12px 8px 14px; }
  .rdv-cal-grille { gap: 4px; }
  .rdv-cal-jour > span,
  .rdv-cal-hors,
  .rdv-cal-vide { min-height: 50px; }
}

/* ============================================================
   Version miniature — espace client
   Le client connaît déjà le cabinet et n'a que quelques créneaux à
   regarder : le calendrier doit tenir dans une carte sans l'écraser.
   Les cibles restent au-dessus de 40 pixels, on ne descend pas plus bas.
   ============================================================ */

.rdv-bloc-compact .rdv-calendrier {
  padding: 10px 10px 12px;
  margin: 12px 0 16px;
  max-width: 340px;
}

.rdv-bloc-compact .rdv-cal-entete { margin-bottom: 10px; }
.rdv-bloc-compact .rdv-cal-mois { font-size: 1rem; }

.rdv-bloc-compact .rdv-cal-fleche {
  width: 34px;
  height: 34px;
  font-size: 1.05rem;
}

.rdv-bloc-compact .rdv-cal-grille { gap: 3px; }
.rdv-bloc-compact .rdv-cal-nom { font-size: 0.6rem; padding-bottom: 3px; }
.rdv-bloc-compact .rdv-cal-vide { min-height: 40px; }
.rdv-bloc-compact .rdv-cal-hors { min-height: 40px; font-size: 0.86rem; }

.rdv-bloc-compact .rdv-cal-jour > span {
  min-height: 40px;
  font-size: 0.92rem;
  border-radius: 3px;
}

.rdv-bloc-compact .rdv-heures-titre { font-size: 1.05rem; margin-bottom: 8px; }

.rdv-bloc-compact .rdv-heures {
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  max-width: 340px;
}

.rdv-bloc-compact .rdv-creneau > span {
  min-height: 44px;
  padding: 6px 4px;
  font-size: 0.95rem;
  border-radius: 3px;
}

/* Dès qu'il y a de la place, le calendrier se range à gauche et les horaires
   du jour choisi se mettent à côté : plus de calendrier esseulé dans une carte
   large, et l'ensemble tient sur une seule hauteur. En dessous, tout s'empile. */
@media (min-width: 620px) {
  .rdv-bloc-compact {
    display: grid;
    grid-template-columns: 238px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }
  .rdv-bloc-compact .rdv-calendrier {
    grid-column: 1;
    grid-row: 1;
    margin: 12px 0 0;
  }
  /* Un seul groupe d'horaires est visible à la fois : les autres sont
     masqués, donc ils ne se disputent pas la case de droite. */
  .rdv-bloc-compact .rdv-heures-jour {
    grid-column: 2;
    grid-row: 1;
    margin-top: 12px;
  }
  /* Sans borne, deux colonnes sur une carte large donnaient des boutons
     de cinq cents pixels : la grille entière criait « prenez rendez-vous ».
     Des pastilles serrées disent la même chose, posément. */
  .rdv-bloc-compact .rdv-heures {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 4px;
    max-width: 288px;
  }
  .rdv-bloc-compact .rdv-creneau > span {
    min-height: 26px;
    padding: 3px 2px;
    font-size: 0.72rem;
    border-radius: 3px;
  }
  /* Le calendrier suit : des cases de la taille d'un chiffre, pas d'un bouton. */
  .rdv-bloc-compact .rdv-calendrier { max-width: 238px; padding: 7px 7px 8px; }
  .rdv-bloc-compact .rdv-cal-fleche { width: 22px; height: 22px; font-size: 0.8rem; }
  .rdv-bloc-compact .rdv-cal-mois { font-size: 0.8rem; }
  .rdv-bloc-compact .rdv-cal-grille { gap: 2px; }
  .rdv-bloc-compact .rdv-cal-nom { font-size: 0.5rem; padding-bottom: 2px; }
  .rdv-bloc-compact .rdv-cal-jour > span,
  .rdv-bloc-compact .rdv-cal-hors,
  .rdv-bloc-compact .rdv-cal-vide { min-height: 26px; }
  .rdv-bloc-compact .rdv-cal-jour > span { font-size: 0.74rem; }
  .rdv-bloc-compact .rdv-cal-hors { font-size: 0.7rem; }
  .rdv-bloc-compact .rdv-heures-titre { font-size: 0.86rem; margin-bottom: 5px; }
}

@media (max-width: 420px) {
  .rdv-bloc-compact .rdv-calendrier { padding: 8px 6px 10px; }
  .rdv-bloc-compact .rdv-heures { grid-template-columns: repeat(3, 1fr); max-width: none; }
  /* Au doigt, on ne descend pas sous 42 pixels, quelle que soit la densité. */
  .rdv-creneau > span,
  .rdv-bloc-compact .rdv-creneau > span { min-height: 42px; }
}