/* Ben.Dev — Rendez-vous : habillage du widget de prise de rendez-vous.
   ==========================================================================
   Cette feuille est chargée AVANT celle du thème (enqueue en priorité 5) : le thème
   hôte peut donc tout surcharger sans avoir à monter en spécificité.

   Le widget lit ses couleurs dans des variables --rdv-* définies juste en dessous, et
   chacune retombe sur le token du thème s'il existe, sinon sur une valeur neutre. Pour
   ré-habiller le calendrier sur un autre site, il suffit de redéfinir les --rdv-* sur
   .rdv-widget : aucune règle de cette feuille n'est à toucher. */

.rdv-widget {
  --rdv-accent:      var(--accent-500, #00a8c4);      /* cyan décoratif : fonds, filets */
  --rdv-accent-vif:  var(--neon-cyan, #2be4ff);       /* néon : élément sélectionné, bouton */
  --rdv-accent-ink:  var(--neon-cyan-ink, #00819b);   /* encre lisible sur blanc (4,55:1) */
  --rdv-surface:     var(--neutral-0, #fff);
  --rdv-encre:       var(--neutral-900, #0a0a0a);
  --rdv-titre:       var(--text-heading, #0a0a0a);
  --rdv-texte:       var(--text-body, #374151);
  --rdv-discret:     var(--text-muted, #6b7280);
  --rdv-filet:       var(--border-soft, #e5e7eb);
  --rdv-titrage:     var(--font-display, inherit);
  --rdv-transition:  var(--transition-base, 0.2s ease);
  --rdv-rayon:       var(--radius-sm, 0);

  background-color: var(--rdv-surface);
  color: var(--rdv-encre);
  border: 2px solid var(--rdv-encre);
  min-height: 430px;
}

/* --- Calendrier ----------------------------------------------------------
   PAS de hauteur figée ni de défilement interne : la boîte grandit avec l'étape en
   cours (mois → heures → formulaire). Une hauteur fixe imposait soit un ascenseur dans
   le widget, soit — pire — un bloc heures comprimé à 0 px de haut, créneaux présents
   dans le DOM mais invisibles. Le `min-height` ci-dessus suffit à ce que la colonne ne
   s'effondre pas pendant le chargement des disponibilités. */
.rdv-calendrier { display: flex; flex-direction: column; padding: 1.25rem; }
.cal-corps { display: flex; flex-direction: column; }

.cal-entete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; }
.cal-titre {
  font-family: var(--rdv-titrage);
  font-weight: 700;
  font-size: 1rem;
  color: var(--rdv-titre);
  margin: 0;
  text-transform: capitalize;
}
.cal-nav {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--rdv-titre);
  background: none;
  border: 1px solid var(--rdv-filet);
  border-radius: var(--rdv-rayon);
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: all var(--rdv-transition);
}
.cal-nav:hover:not(:disabled) { background: var(--rdv-encre); color: var(--rdv-surface); border-color: var(--rdv-encre); }
.cal-nav:disabled { opacity: 0.35; cursor: default; }

.cal-jours-noms,
.cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-jours-noms { margin-bottom: 3px; }
.cal-jours-noms span { text-align: center; font-size: 0.75rem; font-weight: 700; color: var(--rdv-discret); }

.cal-jour {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--rdv-discret);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--rdv-rayon);
}
/* Jour réservable : le seul à être un <button> (les autres sont des <span> inertes).
   Le cyan est au FOND et au FILET, le chiffre reste noir : la disponibilité se lit à la
   pastille, pas à la couleur du texte. Même une encre cyan foncée (4,55:1 sur blanc)
   retombe à 4,09:1 sur cette pastille teintée — sous AA pour un chiffre de 14 px, fût-il
   gras (le seuil ne tombe à 3:1 qu'à partir de 18,66 px gras). */
.cal-jour--libre {
  color: var(--rdv-titre);
  font-weight: 700;
  background: color-mix(in srgb, var(--rdv-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--rdv-accent) 45%, transparent);
  cursor: pointer;
  transition: all var(--rdv-transition);
}
.cal-jour--libre:hover { background: var(--rdv-encre); color: var(--rdv-surface); border-color: var(--rdv-encre); }
/* Jour choisi : fond néon, texte noir (8,9:1). Deux classes (et non `.cal-jour--actif`
   seul, à 0,1,0) pour battre le survol ci-dessus, à égalité de spécificité mais écrit
   avant : sinon survoler le jour sélectionné le repeint en noir. */
.cal-jour--libre.cal-jour--actif {
  background: var(--rdv-accent-vif);
  color: var(--rdv-encre);
  border-color: var(--rdv-accent-vif);
  box-shadow: 0 4px 12px rgba(43, 228, 255, 0.35);
}

.cal-etat { font-size: 0.75rem; color: var(--rdv-discret); margin: 0.85rem 0 0; }

/* Les étapes 2 et 3 sont posées en `hidden` et révélées par le JS. Leur `display:flex`
   (0,1,0) écraserait le `[hidden]{display:none}` du navigateur : on le rétablit ici avec
   une spécificité supérieure, sinon les trois étapes s'affichent d'un coup. */
.rdv-calendrier [hidden] { display: none; }

.cal-heures-bloc { display: flex; flex-direction: column; min-height: 0; }
/* Le bloc reçoit un focus() programmatique (pour être amené dans la vue), pas un focus
   clavier : son contour cernerait toute la liste d'un liseré bleu, sans rien signaler. */
.cal-heures-bloc:focus { outline: none; }
/* `capitalize` majusculerait CHAQUE mot (« Mercredi 15 Juillet 2026 À 10:00 ») : les dates
   viennent de Intl en minuscules, on ne relève donc que la première lettre. */
.cal-heures-titre,
.cal-form-creneau { text-transform: none; }
.cal-heures-titre::first-letter,
.cal-form-creneau::first-letter { text-transform: uppercase; }

.cal-heures-titre {
  font-family: var(--rdv-titrage);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--rdv-titre);
  margin: 0 0 0.85rem;
}
.cal-heures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 0.4rem;
}
.cal-heure {
  font-family: inherit;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--rdv-accent-ink);
  background: none;
  border: 1px solid color-mix(in srgb, var(--rdv-accent) 45%, transparent);
  border-radius: var(--rdv-rayon);
  padding: 0.55rem 0.4rem;
  cursor: pointer;
  transition: all var(--rdv-transition);
}
.cal-heure:hover { background: var(--rdv-encre); color: var(--rdv-surface); border-color: var(--rdv-encre); }
.cal-fuseau { font-size: 0.75rem; color: var(--rdv-discret); margin: 0.85rem 0 0; }

.cal-form { display: flex; flex-direction: column; gap: 0.75rem; }
.cal-form-creneau { font-weight: 700; font-size: 0.875rem; color: var(--rdv-accent-ink); margin: 0; }
.cal-form-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; }
.cal-retour {
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--rdv-discret);
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}
.cal-retour:hover { color: var(--rdv-titre); }

/* Signature — le pendant maison du badge « powered by » des services tiers. */
.cal-signature {
  margin: 1.1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rdv-filet);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--rdv-discret);
  text-align: center;
}
.cal-signature strong { font-family: var(--rdv-titrage); font-weight: 700; color: var(--rdv-titre); }
/* Le point de la marque : l'accent vif est illisible à 12 px sur blanc → encre foncée. */
.cal-signature .wordmark-dot { color: var(--rdv-accent-ink); }

/* --- Façade : repli affiché quand l'agenda Google n'est pas relié. -------- */
.rdv-facade {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 380px;
  padding: 2rem 1.5rem;
  text-align: center;
}
.rdv-facade .cal-signature { width: 100%; margin-top: auto; }
.rdv-facade__icon { color: var(--rdv-accent-ink); flex-shrink: 0; }
.rdv-facade__title { font-family: var(--rdv-titrage); font-weight: 700; font-size: 1rem; color: var(--rdv-titre); margin: 0; }
/* Bouton d'envoi : fond néon + texte NOIR. Blanc sur cyan ne ferait que 2,83:1 — sous
   AA sur le seul bouton qui envoie la demande. */
.rdv-facade__btn {
  display: inline-block;      /* le repli l'utilise comme <a>, le formulaire comme <button> */
  text-decoration: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--rdv-encre);
  background-color: var(--rdv-accent-vif);
  border: 2px solid var(--rdv-accent-vif);
  border-radius: var(--rdv-rayon);
  padding: 0.8rem 1.5rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  box-shadow: 0 6px 16px rgba(43, 228, 255, 0.35);
}
.rdv-facade__btn:hover:not(:disabled) {
  transform: translateY(-2px);
  background-color: var(--rdv-encre);
  border-color: var(--rdv-encre);
  color: var(--rdv-accent-vif);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(10, 10, 10, 0.12));
}
.rdv-facade__btn:disabled { cursor: wait; opacity: 0.7; }
.rdv-facade__note { font-size: 0.75rem; color: var(--rdv-discret); margin: 0; max-width: 32ch; }

/* --- Socle des champs, pour que le widget reste utilisable sur un thème qui n'en
   fournit pas. Le thème hôte, chargé après, reprend la main sans effort. ---- */
.rdv-widget .form-field { display: flex; flex-direction: column; gap: 0.35rem; }
.rdv-widget .form-field label { font-size: 0.875rem; font-weight: 600; color: var(--rdv-titre); }
.rdv-widget .form-field input,
.rdv-widget .form-field textarea {
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--rdv-encre);
  background: var(--rdv-surface);
  border: 1px solid var(--rdv-filet);
  border-radius: var(--rdv-rayon);
  padding: 0.6rem 0.75rem;
}
.rdv-widget .form-field input:focus,
.rdv-widget .form-field textarea:focus { outline: 2px solid var(--rdv-accent); outline-offset: 1px; }
.rdv-widget .form-rgpd { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8125rem; color: var(--rdv-texte); }
.rdv-widget .form-notice { font-size: 0.875rem; margin: 0 0 1rem; padding: 0.75rem; border-left: 3px solid var(--rdv-accent); }
.rdv-widget .form-notice--ko { border-left-color: #f04e38; }