/* =====================================================================
   reservation_module / skin.css — LA PEAU.
   Aucune couleur en dur : tout dérive des variables du site client
   (fournies par site-theme.css). Les valeurs après la virgule = repli.
   Parti pris : UNE CHOSE À L'ÉCRAN À LA FOIS, zéro mur de boutons.
   ===================================================================== */

/* ⚠️ GARDE-FOU — à garder en tête de fichier.
   Une règle `display:` d'auteur ÉCRASE l'attribut HTML `hidden` (bug vécu :
   tous les jours déversaient leurs heures d'un coup). Ce rappel le rend impossible. */
[hidden]{ display: none !important; }

:root{
  --rdv-accent:      var(--accent, #0E8C8C);
  --rdv-accent-ink:  var(--accent-ink, #ffffff);
  --rdv-bg:          var(--bg, #F7F5F1);
  --rdv-surface:     var(--surface, #ffffff);
  --rdv-ink:         var(--ink, #14201f);
  --rdv-muted:       var(--muted, #6a7573);
  --rdv-line:        var(--line, #e4e0d8);
  --rdv-radius:      var(--radius, 12px);
  --rdv-font:        var(--font, "Space Grotesk", system-ui, sans-serif);
}

.rdv-wrap{
  font-family: var(--rdv-font);
  color: var(--rdv-ink);
  background: var(--rdv-bg);
  max-width: 520px;              /* colonne étroite = lecture calme */
  margin: 0 auto;
  padding: clamp(20px, 5vw, 40px);
  box-sizing: border-box;
}
.rdv-title{ font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 4px; }
.rdv-sub{ color: var(--rdv-muted); margin: 0 0 30px; }
.rdv-muted{ color: var(--rdv-muted); font-size: .92rem; }
.rdv-step-label{ font-size: .95rem; font-weight: 600; margin: 0 0 14px; }

/* ---- La liste des prochaines dispos (l'écran principal) ---- */
.rdv-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
/* Respiration entre deux jours : on lit des blocs, sans ajouter de décor. */
.rdv-li--newday{ margin-top: 13px; }

.rdv-offer{
  font: inherit; cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  min-height: 64px; padding: 14px 16px 14px 18px;
  background: var(--rdv-surface);
  color: var(--rdv-ink);
  border: 1px solid var(--rdv-line);
  border-radius: var(--rdv-radius);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.rdv-offer:hover{
  border-color: var(--rdv-accent);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.rdv-offer:active{ transform: translateY(0); }
.rdv-offer:focus-visible{ outline: 2px solid var(--rdv-accent); outline-offset: 2px; }

/* Le tout premier créneau : c'est celui qu'on cherche en général → on l'assume. */
.rdv-offer--first{ border-color: color-mix(in srgb, var(--rdv-accent) 45%, var(--rdv-line)); }

.rdv-offer-day{ flex: 1; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; color: var(--rdv-muted); font-size: .95rem; }
.rdv-offer-time{ font-weight: 700; font-size: 1.15rem; color: var(--rdv-accent); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.rdv-offer-go{ color: var(--rdv-muted); font-size: 1.15rem; line-height: 1; opacity: .6; }
.rdv-offer:hover .rdv-offer-go{ opacity: 1; color: var(--rdv-accent); }

.rdv-tag{
  font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 99px; white-space: nowrap;
  color: var(--rdv-accent);
  background: color-mix(in srgb, var(--rdv-accent) 12%, transparent);
}

.rdv-more{
  font: inherit; cursor: pointer;
  display: block; margin: 18px auto 0;
  min-height: 42px; padding: 10px 20px;
  background: none; color: var(--rdv-accent);
  border: none; text-decoration: underline; text-underline-offset: 3px;
}
.rdv-more:hover{ opacity: .8; }

/* ---- Les coordonnées (2ᵉ écran) ---- */
.rdv-chosen{
  margin: 0 0 22px; padding: 14px 18px;
  background: var(--rdv-surface);
  border: 1px solid var(--rdv-line);
  border-left: 4px solid var(--rdv-accent);
  border-radius: var(--rdv-radius);
}
.rdv-change{ font: inherit; background: none; border: none; color: var(--rdv-accent); cursor: pointer; text-decoration: underline; padding: 0; margin-left: 8px; }
.rdv-field{ margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.rdv-field label{ font-size: .9rem; font-weight: 600; }
.rdv-opt{ color: var(--rdv-muted); font-weight: 400; }
.rdv-field input, .rdv-field textarea{
  font: inherit; color: var(--rdv-ink);
  min-height: 42px; padding: 9px 12px;
  background: var(--rdv-surface);
  border: 1px solid var(--rdv-line);
  border-radius: var(--rdv-radius);
  box-sizing: border-box; width: 100%;
}
.rdv-field textarea{ min-height: 80px; resize: vertical; }
.rdv-field input:focus, .rdv-field textarea:focus{ outline: 2px solid var(--rdv-accent); outline-offset: 1px; border-color: var(--rdv-accent); }

/* ---- Boutons ---- */
.rdv-btn{
  display: inline-block; font: inherit; cursor: pointer;
  min-height: 46px; padding: 12px 22px;
  border-radius: var(--rdv-radius); border: 1px solid transparent;
  text-decoration: none; text-align: center; box-sizing: border-box;
}
.rdv-btn-main{ background: var(--rdv-accent); color: var(--rdv-accent-ink); width: 100%; border: none; margin-top: 6px; }
.rdv-btn-main:hover{ filter: brightness(1.06); }
.rdv-btn-main:disabled{ opacity: .6; cursor: progress; }
.rdv-btn-ghost{ background: transparent; color: var(--rdv-accent); border: 1px solid var(--rdv-accent); }

/* ---- Messages ---- */
.rdv-ok{ background: var(--rdv-surface); border: 1px solid var(--rdv-line); border-left: 4px solid var(--rdv-accent); border-radius: var(--rdv-radius); padding: 20px 22px; }
.rdv-ok b{ font-size: 1.15rem; display: block; margin-bottom: 6px; }
.rdv-ok p{ margin: 0 0 10px; }
/* Bandeau + tag de DÉMONSTRATION (module vitrine — rien n'est réellement réservé) */
.rdv-demobar{ margin: 0 0 22px; padding: 12px 16px; font-size: .92rem; line-height: 1.45;
  color: var(--rdv-muted); background: color-mix(in srgb, var(--rdv-accent) 8%, #fff);
  border: 1px dashed color-mix(in srgb, var(--rdv-accent) 40%, #fff); border-radius: var(--rdv-radius); }
.rdv-demobar b{ color: var(--rdv-ink); }
.rdv-demo-tag{ display: inline-block; vertical-align: middle; margin-left: 8px; font-size: .62rem;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 20px;
  color: var(--rdv-accent); background: color-mix(in srgb, var(--rdv-accent) 14%, #fff); }
.rdv-errors{ list-style: none; margin: 0 0 22px; padding: 14px 18px; background: #fdeceb; color: #a02620; border: 1px solid #f3c6c2; border-radius: var(--rdv-radius); }
.rdv-empty{ color: var(--rdv-muted); padding: 20px 0; }
.rdv-privacy{ color: var(--rdv-muted); font-size: .82rem; margin-top: 12px; }
.rdv-action .rdv-ok, .rdv-action .rdv-errors{ text-align: center; }
.rdv-action .rdv-ok b{ font-size: 1.6rem; }

/* Honeypot : invisible pour l'humain, tentant pour le bot */
.rdv-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (prefers-color-scheme: dark){
  :root{
    --rdv-bg: var(--bg, #10201f);
    --rdv-surface: var(--surface, #17302e);
    --rdv-ink: var(--ink, #eaf1f0);
    --rdv-muted: var(--muted, #9fb0ae);
    --rdv-line: var(--line, #24413f);
  }
}