/* ===========================================================================
   W.O.L.F. — Contact & rendez-vous (mission wolf-contact-rendez-vous, 18/10/2026).
   Charge APRÈS wolf-form.css (cartes à cocher, récapitulatif, consentement,
   note de confidentialité, honeypot). Ici : la grille intro + formulaire, les
   cartes RADIO, la ligne de dictée, le créneau, les bandeaux d'état. Zéro
   couleur en dur : tout passe par les jetons (clair/sombre automatiques).
   ======================================================================== */

/* ---- Grille : intro (5) + formulaire (7) à partir de 1024 px --------------- */
/* Bas de section réduit : le pied de page apporte déjà sa propre marge ; à
   space-10 la mesure donnait 88 px de vide entre la note RGPD et le pied (> 80). */
.rdv-section { padding-block: var(--wolf-space-8) var(--wolf-space-4); }
.rdv-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wolf-space-8); align-items: start; }
@media (min-width: 1024px) {
  .rdv-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--wolf-space-12); }
  .rdv-intro { position: sticky; top: calc(var(--wolf-header-height, 72px) + var(--wolf-space-6)); }
}

.rdv-intro__title { margin-top: var(--wolf-space-3); max-width: 14ch; }
.rdv-intro__lead  { max-width: 52ch; }
.rdv-intro__sub   { display: block; margin-top: var(--wolf-space-8); }
.rdv-etapes {
  margin: var(--wolf-space-4) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
  display: flex;
  flex-direction: column;
  gap: var(--wolf-space-4);
  max-width: 52ch;
}
.rdv-etapes li {
  counter-increment: etape;
  position: relative;
  padding-inline-start: 2.75rem;
  color: var(--wolf-color-text-muted);
  line-height: 1.55;
}
.rdv-etapes li::before {
  content: counter(etape);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-sm);
  font-weight: var(--wolf-weight-semibold);
  color: var(--wolf-color-accent-text);
  border: var(--wolf-border-hairline) solid var(--wolf-color-accent-line);
  border-radius: 999px;
  background: var(--wolf-color-accent-soft);
}

/* ---- Panneau du formulaire ------------------------------------------------ */
.rdv-panel {
  padding: var(--wolf-space-6);
  background: var(--wolf-color-surface);
  border: var(--wolf-border-hairline) solid var(--wolf-color-border);
  border-radius: var(--wolf-radius-lg);
}
@media (min-width: 768px) { .rdv-panel { padding: var(--wolf-space-8); } }
.rdv-panel .wolf-form { gap: var(--wolf-space-8); margin-top: var(--wolf-space-4); }
.rdv-panel .wolf-fieldset { padding-top: var(--wolf-space-6); gap: var(--wolf-space-4); }
.rdv-fieldset--first { border-top: 0; padding-top: 0; }
.rdv-panel .wolf-privacy { margin-top: var(--wolf-space-8); }

/* Deux champs côte à côte dès 560 px ; une colonne en dessous. */
.rdv-duo { display: grid; grid-template-columns: 1fr; gap: var(--wolf-space-4); }
@media (min-width: 560px) { .rdv-duo { grid-template-columns: 1fr 1fr; } }

/* ---- Cartes RADIO (sélecteur de tête) : ronde + point, même mécanique ------ */
.rdv-types { grid-template-columns: 1fr; }
@media (min-width: 768px) { .rdv-types { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wolf-checkcard--radio .wolf-checkcard__box { border-radius: 999px; }
.wolf-checkcard--radio .wolf-checkcard__box::after {
  width: 0.5rem; height: 0.5rem;
  margin: 0.2rem auto 0;
  border: 0;
  border-radius: 999px;
  background: var(--wolf-color-accent-contrast);
  transform: scale(0);
}
.wolf-checkcard--radio input:checked ~ .wolf-checkcard__box::after { transform: scale(1); }

/* ---- Créneau + prix -------------------------------------------------------- */
.rdv-prix {
  margin: 0;
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-sm);
  color: var(--wolf-color-accent-text);
}
.rdv-note {
  margin: 0;
  padding: var(--wolf-space-3) var(--wolf-space-4);
  font-size: var(--wolf-text-sm);
  color: var(--wolf-color-text-muted);
  border-inline-start: var(--wolf-border-thick) solid var(--wolf-color-accent);
  background: var(--wolf-color-accent-soft);
  border-radius: 0 var(--wolf-radius-sm) var(--wolf-radius-sm) 0;
}
.rdv-creneau[hidden] { display: none; }
.js .rdv-nojs { display: none; }

/* ---- Dictée : bouton micro + état + message, EN LIGNE sous la zone ---------- */
.rdv-dictee {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wolf-space-3) var(--wolf-space-4);
}
.rdv-dictee[hidden] { display: none; }
.rdv-mic { gap: var(--wolf-space-2); }
.rdv-mic.is-rec {
  color: var(--wolf-color-danger);
  border-color: var(--wolf-color-danger);
  background: var(--wolf-color-danger-soft);
}
.rdv-dictee__etat { display: inline-flex; align-items: center; gap: var(--wolf-space-3); }
.rdv-dictee__etat[hidden] { display: none; }
.rdv-eq { display: block; --line-2: var(--wolf-color-border-strong); }
.rdv-chrono {
  font-family: var(--wolf-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--wolf-text-sm);
  color: var(--wolf-color-text-muted);
}
.rdv-msg { font-size: var(--wolf-text-sm); color: var(--wolf-color-text-muted); flex: 1 1 14rem; }
.rdv-msg.is-ok    { color: var(--wolf-color-success); }
.rdv-msg.is-echec { color: var(--wolf-color-danger); }
.rdv-msg:empty { display: none; }

/* ---- Bandeau d'état (réseau, file locale, envoi) --------------------------- */
.rdv-bandeau {
  margin: 0 0 var(--wolf-space-4);
  padding: var(--wolf-space-3) var(--wolf-space-4);
  font-size: var(--wolf-text-sm);
  color: var(--wolf-color-text);
  background: var(--wolf-color-surface-inset);
  border: var(--wolf-border-hairline) solid var(--wolf-color-border);
  border-radius: var(--wolf-radius-md);
}
.rdv-bandeau[hidden] { display: none; }
.rdv-bandeau--horsligne { border-color: var(--wolf-color-accent-line); background: var(--wolf-color-accent-soft); }
.rdv-bandeau--echec     { color: var(--wolf-color-danger); border-color: var(--wolf-color-danger); background: var(--wolf-color-danger-soft); }
.rdv-bandeau--ok        { color: var(--wolf-color-success); border-color: var(--wolf-color-success); background: var(--wolf-color-success-soft); }

/* ---- Accusé de réception --------------------------------------------------- */
.rdv-sent .wolf-tile__title { font-size: var(--wolf-text-2xl, 1.75rem); line-height: 1.2; }
.rdv-sent__creneau { font-weight: var(--wolf-weight-medium); color: var(--wolf-color-text); }

/* ---- Bouton occupé ---------------------------------------------------------- */
#rdv-submit[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* ---- Case de consentement : 24 px (plancher WCAG 2.5.8 ; 18 px mesurés avant) --- */
.rdv-panel .wolf-consent__label input { width: 1.5rem; height: 1.5rem; margin-top: 0; }

/* ==========================================================================
   Calendrier de réservation (mission wolf-creneau-et-paiement, 18/10/2026).
   Dessiné par wolf-calendrier.js ; sans script, la liste de secours reste servie.
   Cibles tactiles >= 44 x 44 px ; état « choisi » marqué par une bordure ET une
   coche (jamais par la couleur seule) ; jour indisponible = hachuré + barré.
   ========================================================================== */
.rdv-cal { display: block; margin: 0 0 var(--wolf-space-3); max-inline-size: 34rem; overflow-x: auto; }
.rdv-cal[hidden], .rdv-cal-secours[hidden] { display: none; }
.rdv-cal__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--wolf-space-3); margin-bottom: var(--wolf-space-2); }
.rdv-cal__titre { margin: 0; font-size: var(--wolf-text-lg, 1.125rem); font-weight: var(--wolf-weight-semibold, 600); color: var(--wolf-color-text); text-align: center; flex: 1 1 auto; }
.rdv-cal__navbtn {
  inline-size: 44px; block-size: 44px; flex: 0 0 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--wolf-color-text); background: var(--wolf-color-surface-2);
  border: var(--wolf-border-thick, 2px) solid var(--wolf-color-text-subtle); border-radius: var(--wolf-radius-md); cursor: pointer;
}
.rdv-cal__navbtn:hover:not(:disabled) { border-color: var(--wolf-color-accent); }
.rdv-cal__navbtn:disabled { opacity: 0.4; cursor: not-allowed; }
.rdv-cal__navbtn:focus-visible, .rdv-cal__jour:focus-visible, .rdv-cal__heure input:focus-visible + .rdv-cal__heure-txt {
  outline: 3px solid var(--wolf-color-text); outline-offset: 2px; box-shadow: 0 0 0 5px var(--wolf-color-bg);
}
.rdv-cal__chev { inline-size: 10px; block-size: 10px; border-block-start: 2px solid currentColor; border-inline-start: 2px solid currentColor; transform: rotate(-45deg); }
.rdv-cal__chev--suiv { transform: rotate(135deg); }
[dir="rtl"] .rdv-cal__chev--prec { transform: rotate(135deg); }
[dir="rtl"] .rdv-cal__chev--suiv { transform: rotate(-45deg); }
.rdv-cal__aide { margin: 0 0 var(--wolf-space-2); }
.rdv-cal__grille { inline-size: 100%; min-inline-size: 308px; table-layout: fixed; border-collapse: separate; border-spacing: 2px; }
.rdv-cal__th { padding: var(--wolf-space-1) 0; font-size: var(--wolf-text-xs, 0.8125rem); font-weight: var(--wolf-weight-medium, 500); color: var(--wolf-color-text-muted); text-align: center; }
.rdv-cal__cell, .rdv-cal__vide { padding: 0; text-align: center; }
.rdv-cal__jour {
  inline-size: 100%; min-block-size: 44px; padding: 0;
  font: inherit; font-variant-numeric: tabular-nums; color: var(--wolf-color-text);
  background: var(--wolf-color-surface-2); border: 2px solid var(--wolf-color-text-subtle); border-radius: var(--wolf-radius-sm); cursor: pointer;
}
.rdv-cal__jour:hover { border-color: var(--wolf-color-accent); }
.rdv-cal__jour.is-indispo {
  color: var(--wolf-color-text-subtle); cursor: not-allowed; text-decoration: line-through;
  border-color: transparent;
  background: repeating-linear-gradient(135deg, transparent 0 5px, var(--wolf-color-border-strong) 5px 6px);
}
.rdv-cal__jour.is-indispo:hover { border-color: transparent; }
.rdv-cal__jour.is-choisi {
  position: relative; font-weight: var(--wolf-weight-bold, 700);
  color: var(--wolf-color-accent-contrast); background: var(--wolf-color-accent); border-color: var(--wolf-color-text);
  box-shadow: inset 0 0 0 2px var(--wolf-color-accent-contrast);
}
.rdv-cal__jour.is-choisi::after { content: "✓"; position: absolute; inset-block-start: 1px; inset-inline-end: 4px; font-size: 0.75rem; line-height: 1; }
.rdv-cal__heures { margin-block-start: var(--wolf-space-3); }
.rdv-cal__hfs { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.rdv-cal__hleg { padding: 0; margin-block-end: var(--wolf-space-2); }
.rdv-cal__hliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.25rem, 1fr)); gap: var(--wolf-space-2); }
.rdv-cal__heure { position: relative; display: block; }
.rdv-cal__heure input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rdv-cal__heure-txt {
  display: flex; align-items: center; justify-content: center; min-block-size: 44px; min-inline-size: 44px; padding: 0 var(--wolf-space-2); white-space: nowrap;
  color: var(--wolf-color-text); background: var(--wolf-color-surface-2);
  border: 2px solid var(--wolf-color-text-subtle); border-radius: var(--wolf-radius-sm); text-align: center; font-variant-numeric: tabular-nums;
}
.rdv-cal__heure input:checked + .rdv-cal__heure-txt {
  font-weight: var(--wolf-weight-bold, 700); color: var(--wolf-color-accent-contrast); background: var(--wolf-color-accent); border-color: var(--wolf-color-text);
  box-shadow: inset 0 0 0 2px var(--wolf-color-accent-contrast);
}
.rdv-cal__heure input:checked + .rdv-cal__heure-txt::before { content: "✓ "; white-space: pre; }
.rdv-cal__heure.is-pris .rdv-cal__heure-txt { color: var(--wolf-color-text-subtle); text-decoration: line-through; border-color: transparent; background: repeating-linear-gradient(135deg, transparent 0 5px, var(--wolf-color-border-strong) 5px 6px); }
.rdv-cal__heure.is-pris input { cursor: not-allowed; }
.rdv-cal__tz { margin: var(--wolf-space-2) 0 0; }
.rdv-cal__recap { margin-block-start: var(--wolf-space-3); padding: var(--wolf-space-3) var(--wolf-space-4); background: var(--wolf-color-surface-inset); border: var(--wolf-border-hairline, 1px) solid var(--wolf-color-border-strong); border-radius: var(--wolf-radius-md); }
.rdv-cal__recap-titre { margin: 0 0 var(--wolf-space-2); font-size: var(--wolf-text-sm); font-weight: var(--wolf-weight-semibold, 600); color: var(--wolf-color-text); }
.rdv-cal__sr { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.rdv-recap { margin: 0; display: grid; gap: var(--wolf-space-1); }
.rdv-recap > div { display: flex; flex-wrap: wrap; gap: var(--wolf-space-1) var(--wolf-space-3); }
.rdv-recap dt { flex: 0 0 8.5rem; color: var(--wolf-color-text-muted); font-size: var(--wolf-text-sm); }
.rdv-recap dd { margin: 0; flex: 1 1 14rem; color: var(--wolf-color-text); font-weight: var(--wolf-weight-medium, 500); }
.rdv-recap--sent { margin: var(--wolf-space-3) 0; }
.rdv-sent__payer { margin: var(--wolf-space-4) 0 var(--wolf-space-2); }
.rdv-sent__apres { font-weight: var(--wolf-weight-medium, 500); }
/* Petit écran (390 px) : 7 colonnes x 44 px = 308 px exactement, donc plus d'espacement horizontal. */
@media (max-width: 30rem) {
  .rdv-cal__grille { border-spacing: 0 2px; }
  .rdv-cal__jour { border-width: 1px; }
}
@media (prefers-reduced-motion: reduce) { .rdv-cal * { transition: none !important; } }