@charset "UTF-8";
/* Page de rendez-vous : s'appuie sur les jetons et les composants de /assets/style.css (verre, boutons, polices).
   Aucune ressource tierce, aucun style en ligne (CSP stricte), aucun script requis. */

.rdv { padding-top: clamp(1.8rem, 5vw, 3.5rem); padding-bottom: clamp(3rem, 8vw, 6rem); max-width: 980px; }
.rdv-etroit { max-width: 720px; }
.rdv-tete { margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.rdv-tete h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 0.6rem; }
.rdv-tete .chapeau { color: var(--encre-2); font-size: clamp(1.05rem, 1.4vw, 1.18rem); max-width: 56ch; line-height: 1.5; margin: 0; }
.repere-haut { margin: 0 0 0.9rem; }

.rdv-etape { margin-bottom: clamp(2rem, 5vw, 3rem); }
.rdv-etape > h2 { font-size: clamp(1.25rem, 2.6vw, 1.55rem); letter-spacing: -0.015em; display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
.num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.9rem; height: 1.9rem; border-radius: 50%; font-size: 0.95rem; font-weight: 600;
  background: var(--accent-doux); color: var(--accent-texte); box-shadow: inset 0 0 0 1px var(--accent);
}
.aide { color: var(--encre-2); margin: 0 0 1rem; }
.note { color: var(--encre-2); }
.prochain { margin: 0 0 1.2rem; }

/* ----- calendrier ----- */
.mois-liste { display: grid; gap: 1rem; }
@media (min-width: 760px) { .mois-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mois { padding: clamp(0.9rem, 3vw, 1.4rem); border-radius: 22px; }
.mois-titre { font-size: 1.1rem; text-transform: capitalize; margin: 0 0 0.6rem; }
.cal { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.cal th { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; color: var(--encre-2); padding: 0.2rem 0; text-align: center; }
.cal abbr { text-decoration: none; }
.cal td { padding: 0; text-align: center; }
.jour {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; border-radius: 12px;
  font-size: 1rem; font-variant-numeric: tabular-nums; font-weight: 500; text-decoration: none;
}
.jour.dispo { color: var(--encre); background: var(--accent-doux); box-shadow: inset 0 0 0 1px var(--accent); transition: transform 0.4s var(--ressort), background-color 0.2s ease; }
.jour.dispo:hover { color: var(--encre); transform: translateY(-1px); background: var(--accent-doux); }
.jour.dispo:active { transform: scale(0.95); }
.jour.dispo.choisi { background: var(--bouton-plein-fond); color: var(--bouton-plein-texte); box-shadow: none; font-weight: 700; }
.jour.ferme { color: var(--encre-2); opacity: 0.55; }
.jour.hors { opacity: 0.3; }

/* ----- creneaux ----- */
.creneaux { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.creneaux li { margin: 0; }
.creneau {
  display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 14px; text-decoration: none;
  font-weight: 600; font-variant-numeric: tabular-nums; color: var(--encre);
  background: var(--bouton-fond); border: 1px solid var(--bouton-bord);
  box-shadow: inset 0 1px 0 var(--verre-bord), 0 1px 2px rgba(20, 22, 28, 0.06);
  transition: transform 0.4s var(--ressort), box-shadow 0.25s ease;
}
.creneau:hover { color: var(--encre); transform: translateY(-1px); }
.creneau.choisi { background: var(--bouton-plein-fond); color: var(--bouton-plein-texte); border-color: var(--bouton-plein-bord); }

/* ----- formulaire ----- */
.formulaire { display: grid; gap: 1.15rem; padding: clamp(1.2rem, 4vw, 2.2rem); max-width: 720px; }
.recap { margin: 0; padding: 0.8rem 1rem; border-radius: 14px; background: var(--accent-doux); max-width: none; }
.champ-f { display: grid; gap: 0.4rem; }
.champ-f label { font-weight: 600; font-size: 0.97rem; }
.facultatif { font-weight: 400; color: var(--encre-2); }
.champ-f input[type="text"], .champ-f input[type="email"], .champ-f input[type="tel"], .champ-f select, .champ-f textarea {
  width: 100%; min-height: 48px; padding: 0.7rem 0.9rem; border-radius: 12px;
  font: inherit; font-size: 1rem; /* 16 px minimum : pas de zoom automatique sur iPhone */
  color: var(--encre); background: var(--verre-dense); border: 1px solid var(--filet-fort);
  box-shadow: inset 0 1px 2px rgba(20, 22, 28, 0.06);
}
.champ-f textarea { resize: vertical; min-height: 6.5rem; line-height: 1.5; }
.champ-f input:focus-visible, .champ-f select:focus-visible, .champ-f textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.champ-f.en-erreur input, .champ-f.en-erreur select, .champ-f.en-erreur textarea { border-color: #b42318; box-shadow: 0 0 0 1px #b42318; }
:root[data-theme="dark"] .champ-f.en-erreur input, :root[data-theme="dark"] .champ-f.en-erreur select, :root[data-theme="dark"] .champ-f.en-erreur textarea { border-color: #ff8a80; box-shadow: 0 0 0 1px #ff8a80; }
.erreur { margin: 0; color: #b42318; font-size: 0.93rem; font-weight: 500; }
:root[data-theme="dark"] .erreur { color: #ffb4ab; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .erreur { color: #ffb4ab; }
  :root:not([data-theme="light"]) .champ-f.en-erreur input, :root:not([data-theme="light"]) .champ-f.en-erreur select, :root:not([data-theme="light"]) .champ-f.en-erreur textarea { border-color: #ff8a80; box-shadow: 0 0 0 1px #ff8a80; } }
.case { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; font-weight: 400 !important; font-size: 0.93rem !important; line-height: 1.5; color: var(--encre-2); cursor: pointer; }
.case input { width: 1.35rem; height: 1.35rem; margin: 0.15rem 0 0; accent-color: var(--accent); }
.case a { color: var(--accent-texte); }
.rdv-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.rdv-actions form { margin: 0; }
.alerte { margin: 0 0 1.4rem; padding: 0.9rem 1.1rem; border-radius: 14px; background: rgba(180, 35, 24, 0.1); box-shadow: inset 0 0 0 1px #b42318; }
.alerte p { margin: 0; max-width: none; font-weight: 500; }
.ok { margin: 0 0 1.4rem; padding: 0.9rem 1.1rem; border-radius: 14px; background: var(--accent-doux); box-shadow: inset 0 0 0 1px var(--accent); }
.ok p { margin: 0; max-width: none; }

/* piege a robots : sorti de l'ecran (et masque aux lecteurs d'ecran par aria-hidden), jamais display:none */
.piege { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ----- fiche d'un rendez-vous ----- */
.fiche { padding: clamp(1.2rem, 4vw, 2rem); margin-bottom: 1.6rem; }
.fiche dl { margin: 0; display: grid; gap: 0.2rem 1.4rem; grid-template-columns: 1fr; }
.fiche dt { font-family: var(--mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.02em; color: var(--encre-2); margin-top: 0.8rem; text-transform: uppercase; }
.fiche dt:first-child { margin-top: 0; }
.fiche dd { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
@media (min-width: 620px) { .fiche dl { grid-template-columns: 11rem 1fr; } .fiche dt { margin-top: 0; padding-top: 0.28rem; } .fiche dd { padding-bottom: 0.6rem; } }
.gestion { margin-top: 0.4rem; }
@media (max-width: 479px) { .rdv-actions .bouton, .rdv-actions form, .rdv-actions button { width: 100%; } }

/* ----- liste d'essai de Headfull ----- */
.aide-champ { margin: 0; color: var(--encre-2); font-size: 0.88rem; }