/* =====================================================================
   FEUILLE DE STYLE — Prise de rendez-vous Séverine Roussel
   ---------------------------------------------------------------------
   Cette page vit sur rdv.severineroussel.fr, hors WordPress : ni le
   CSS additionnel du site ni Raleway n’y sont chargés. On reprend donc
   ici, une seule fois, les variables --sr-* et les classes .sr-* de la
   charte (copie conforme du CSS additionnel), puis les composants
   propres à l’outil, préfixés .rdv-* pour éviter toute collision.
   Les couleurs ne sont écrites en dur qu’à un seul endroit : dans la
   définition des variables du bloc :root ci-dessous.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. RALEWAY HÉBERGÉE LOCALEMENT
   Fichiers dans assets/fonts : aucune connexion à Google Fonts, donc
   rien à déclarer côté RGPD et un affichage plus rapide.
   font-display: swap affiche le texte tout de suite avec une police
   de secours, puis bascule sur Raleway dès qu’elle est chargée.
   --------------------------------------------------------------------- */
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/raleway-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Raleway'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/raleway-latin-300-italic.woff2') format('woff2'); }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/raleway-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/raleway-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/raleway-latin-600-normal.woff2') format('woff2'); }

/* ---------------------------------------------------------------------
   2. VARIABLES DE LA CHARTE (identiques au CSS additionnel du site)
   + quelques variables propres à l’outil (rayons, ombre, focus).
   --------------------------------------------------------------------- */
:root {
  --sr-blanc:        #fffbf7;
  --sr-creme:        #f8f3ed;
  --sr-sauge:        #b3b6a5;
  --sr-sauge-light:  #eaebe5;
  --sr-texte:        #571c1c;
  --sr-texte-muted:  #8a4a3a;
  --sr-accent:       #d9763d;
  --sr-accent-dark:  #a6411c;
  --sr-accent-light: #faeee3;
  --sr-serif:        'Raleway', sans-serif;
  --sr-sans:         'Raleway', sans-serif;
  --sr-transition:   0.3s ease;

  --rdv-radius:      1.25rem;   /* cartes */
  --rdv-radius-sm:   0.75rem;   /* champs, petits boutons */
  --rdv-shadow:      0 1px 2px rgba(87, 28, 28, 0.04), 0 8px 24px rgba(87, 28, 28, 0.05);
  --rdv-focus:       0 0 0 3px var(--sr-accent-light), 0 0 0 5px var(--sr-accent);
}

/* ---------------------------------------------------------------------
   3. BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sr-creme);
  color: var(--sr-texte);
  font-family: var(--sr-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--sr-accent-dark); text-underline-offset: 0.18em; }
a:hover { color: var(--sr-texte); }
[hidden] { display: none !important; }
button, input, textarea { font: inherit; color: inherit; }
/* Focus bien visible au clavier, discret à la souris */
:focus-visible { outline: none; box-shadow: var(--rdv-focus); border-radius: var(--rdv-radius-sm); }
code { font-size: 0.9em; background: var(--sr-sauge-light); padding: 0.1em 0.35em; border-radius: 0.3em; }

/* ---------------------------------------------------------------------
   4. CLASSES DE LA CHARTE (copie conforme du CSS additionnel)
   Ajout : .sr-btn-primary et .sr-btn-ghost fonctionnent aussi sur
   l’élément <button> (bordure et fond par défaut neutralisés).
   --------------------------------------------------------------------- */
.sr-eyebrow {
  font-family: var(--sr-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sr-accent);
  margin-bottom: 1rem;
  display: block;
}
.sr-section-title {
  font-family: var(--sr-serif);
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--sr-texte);
  margin: 0 0 1.5rem;
}
.sr-section-title em { font-style: italic; color: var(--sr-accent-dark); font-weight: 300; }
.sr-section-intro {
  font-size: 1rem;
  color: var(--sr-texte-muted);
  max-width: 580px;
  line-height: 1.85;
  font-weight: 300;
  margin: 0 0 1.25rem;
}
.sr-btn-primary {
  display: inline-block;
  background: var(--sr-accent);
  color: var(--sr-blanc) !important;
  padding: 0.85rem 2.1rem;
  border: 0;
  border-radius: 2rem;
  font-family: var(--sr-sans);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none !important;
  cursor: pointer;
  transition: background var(--sr-transition);
}
.sr-btn-primary:hover { background: var(--sr-accent-dark); }
.sr-btn-primary[disabled] { opacity: 0.6; cursor: wait; }
.sr-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--sr-texte-muted) !important;
  font-family: var(--sr-sans);
  font-size: 0.88rem;
  font-weight: 400;
  text-decoration: none !important;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--sr-sauge);
  padding: 0 0 0.15rem;
  cursor: pointer;
  transition: color var(--sr-transition), border-color var(--sr-transition);
}
.sr-btn-ghost:hover { color: var(--sr-texte) !important; border-color: var(--sr-texte-muted); }

/* ---------------------------------------------------------------------
   5. STRUCTURE DE LA PAGE
   Gouttière de 16 px sur mobile, colonne de 760 px max sur grand écran.
   --------------------------------------------------------------------- */
.rdv-container { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 16px; }
.rdv-header { border-bottom: 1px solid var(--sr-sauge-light); background: var(--sr-blanc); }
.rdv-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.rdv-brand { font-weight: 600; letter-spacing: 0.02em; color: var(--sr-texte); text-decoration: none; }
.rdv-main { padding: 2.5rem 0 3rem; }
.rdv-hero { text-align: center; margin-bottom: 2rem; }
.rdv-hero .sr-section-intro { margin-left: auto; margin-right: auto; }
.rdv-footer { padding: 2rem 0 2.5rem; font-size: 0.85rem; color: var(--sr-texte-muted); text-align: center; }
.rdv-footer a { color: var(--sr-texte-muted); }

/* ---------------------------------------------------------------------
   6. ÉTAPES DU PARCOURS
   Chaque étape est une carte blanche numérotée, révélée l’une après
   l’autre par le script (attribut hidden).
   --------------------------------------------------------------------- */
.rdv-step,
.rdv-panel {
  background: var(--sr-blanc);
  border: 1px solid var(--sr-sauge-light);
  border-radius: var(--rdv-radius);
  box-shadow: var(--rdv-shadow);
  padding: 1.5rem 1.25rem;
  margin-bottom: 1rem;
  scroll-margin-top: 1rem; /* marge lors du défilement automatique vers l’étape suivante */
}
.rdv-panel--center { text-align: center; }
.rdv-panel--center .sr-section-intro { margin-left: auto; margin-right: auto; }
.rdv-step__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0 0 1.1rem;
}
.rdv-step__num {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--sr-accent-light);
  color: var(--sr-accent-dark);
  font-size: 0.85rem;
  font-weight: 600;
  flex: none;
}
.rdv-hint { font-size: 0.88rem; color: var(--sr-texte-muted); margin: -0.4rem 0 1rem; }

/* --- Cartes de choix (types et formats) ------------------------------ */
.rdv-choices { display: grid; gap: 0.75rem; }
.rdv-choice {
  /* Colonne alignée en haut : deux cartes côte à côte gardent leurs titres sur la même ligne */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  text-align: left;
  background: var(--sr-blanc);
  border: 1.5px solid var(--sr-sauge-light);
  border-radius: var(--rdv-radius-sm);
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: border-color var(--sr-transition), background var(--sr-transition);
}
.rdv-choice:hover { border-color: var(--sr-sauge); }
.rdv-choice[aria-pressed="true"] { border-color: var(--sr-accent); background: var(--sr-accent-light); }
.rdv-choice__title { display: block; font-size: 1.05rem; font-weight: 600; margin-bottom: 0.15rem; }
.rdv-choice__meta { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sr-accent-dark); margin-bottom: 0.5rem; }
.rdv-choice__desc { display: block; font-size: 0.93rem; font-weight: 300; line-height: 1.65; color: var(--sr-texte-muted); }
.rdv-choice__note { display: block; font-size: 0.85rem; margin-top: 0.5rem; color: var(--sr-texte-muted); font-style: italic; }
.rdv-choices--formats .rdv-choice__title { font-size: 1rem; }

/* --- Calendrier --------------------------------------------------------
   Grille de 7 colonnes (lundi en premier, à la française). Les jours
   avec au moins un créneau sont teintés ; les autres restent inactifs. */
.rdv-when { display: grid; gap: 1.5rem; }
.rdv-calendar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.rdv-calendar__month { font-weight: 600; text-transform: capitalize; }
.rdv-calendar__nav {
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  border: 1.5px solid var(--sr-sauge-light);
  background: var(--sr-blanc);
  cursor: pointer;
  display: grid; place-items: center;
  color: var(--sr-texte);
}
.rdv-calendar__nav:hover:not([disabled]) { border-color: var(--sr-sauge); }
.rdv-calendar__nav[disabled] { opacity: 0.35; cursor: default; }
.rdv-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; text-align: center; }
.rdv-calendar__dow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sr-texte-muted); padding-bottom: 0.35rem; }
.rdv-day {
  aspect-ratio: 1;
  min-height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 0.95rem;
  color: var(--sr-sauge);
  cursor: default;
}
.rdv-day--open { background: var(--sr-accent-light); color: var(--sr-texte); font-weight: 600; cursor: pointer; transition: background var(--sr-transition); }
.rdv-day--open:hover { background: var(--sr-sauge-light); }
/* Jour choisi : terracotta foncé, lisible en blanc (contraste supérieur à 4,5:1) */
.rdv-day[aria-pressed="true"] { background: var(--sr-accent-dark); color: var(--sr-blanc); }

/* --- Heures ------------------------------------------------------------ */
.rdv-times__title { font-weight: 600; margin: 0 0 0.75rem; }
.rdv-times__title::first-letter { text-transform: uppercase; }
.rdv-times__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.rdv-time {
  border: 1.5px solid var(--sr-sauge-light);
  background: var(--sr-blanc);
  border-radius: 2rem;
  padding: 0.6rem 0.4rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--sr-transition), background var(--sr-transition);
}
.rdv-time:hover { border-color: var(--sr-accent); }
.rdv-time[aria-pressed="true"] { background: var(--sr-accent-dark); border-color: var(--sr-accent-dark); color: var(--sr-blanc); }
.rdv-empty { font-size: 0.93rem; color: var(--sr-texte-muted); font-weight: 300; }

/* --- Formulaire -------------------------------------------------------- */
.rdv-recap { background: var(--sr-accent-light); border-radius: var(--rdv-radius-sm); padding: 0.85rem 1rem; margin: 0 0 1.25rem; font-weight: 500; }
.rdv-recap button { margin-left: 0.25rem; }
.rdv-form { display: grid; gap: 1rem; }
.rdv-form__row { display: grid; gap: 1rem; }
.rdv-field { display: grid; gap: 0.35rem; }
.rdv-field label { font-size: 0.9rem; font-weight: 500; }
.rdv-optional { font-weight: 300; color: var(--sr-texte-muted); }
.rdv-field input,
.rdv-field textarea {
  width: 100%;
  background: var(--sr-blanc);
  border: 1.5px solid var(--sr-sauge-light);
  border-radius: var(--rdv-radius-sm);
  padding: 0.75rem 0.9rem;
  font-size: 1rem; /* 16 px minimum : évite le zoom automatique sur iPhone */
  transition: border-color var(--sr-transition);
}
.rdv-field input:focus,
.rdv-field textarea:focus { outline: none; border-color: var(--sr-accent); box-shadow: 0 0 0 3px var(--sr-accent-light); }
.rdv-field textarea { resize: vertical; min-height: 6rem; }
.rdv-field [aria-invalid="true"] { border-color: var(--sr-accent-dark); }
/* Message d’erreur placé juste sous le champ concerné, visible dès que la personne quitte le champ */
.rdv-field-error { margin: 0.1rem 0 0; font-size: 0.85rem; font-weight: 500; color: var(--sr-accent-dark); }
.rdv-consent { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.88rem; line-height: 1.55; color: var(--sr-texte-muted); cursor: pointer; }
.rdv-consent input { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--sr-accent-dark); flex: none; }
.rdv-error { background: var(--sr-accent-light); color: var(--sr-accent-dark); border-radius: var(--rdv-radius-sm); padding: 0.75rem 1rem; margin: 0; font-weight: 500; }
.rdv-submit { justify-self: start; }
/* Champ piège : sorti de l’écran plutôt que masqué, pour tromper les robots */
.rdv-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Chargement --------------------------------------------------------- */
.rdv-loading { color: var(--sr-texte-muted); font-weight: 300; }
.rdv-loading::after { content: '…'; animation: rdv-dots 1.2s steps(3, end) infinite; display: inline-block; overflow: hidden; vertical-align: bottom; width: 1em; }
@keyframes rdv-dots { from { width: 0; } to { width: 1em; } }

/* --- Récapitulatif (confirmation, annulation) ---------------------------- */
.rdv-summary { display: grid; gap: 0; margin: 1rem 0 1.5rem; background: var(--sr-accent-light); border-radius: var(--rdv-radius-sm); padding: 0.4rem 1rem; text-align: left; }
.rdv-summary div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--sr-blanc); }
.rdv-summary div:last-child { border-bottom: 0; }
.rdv-summary dt { font-size: 0.85rem; color: var(--sr-texte-muted); }
.rdv-summary dd { margin: 0; font-weight: 600; }
.rdv-panel--done { text-align: center; }
.rdv-panel--done .rdv-summary { max-width: 460px; margin-left: auto; margin-right: auto; }
.rdv-panel--done .sr-section-intro { margin-left: auto; margin-right: auto; }
.rdv-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; margin-top: 0.5rem; }
.rdv-actions form { margin: 0; }

/* --- Sous le calendrier : appel découverte, FAQ, liens vers le site ----- */
.rdv-more { margin-top: 2.5rem; }
.rdv-more + .rdv-more { margin-top: 1rem; }
.rdv-more__title { font-size: clamp(1.45rem, 2.6vw, 1.9rem); }

.rdv-steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.rdv-steps-list li { display: flex; gap: 0.9rem; align-items: flex-start; }
.rdv-steps-list h3 { font-size: 1.02rem; font-weight: 600; margin: 0.2rem 0 0.3rem; }
.rdv-steps-list p { margin: 0; font-size: 0.95rem; font-weight: 300; line-height: 1.75; color: var(--sr-texte-muted); }

/* FAQ : accordéon natif, le + devient – à l’ouverture */
.rdv-faq { border-top: 1px solid var(--sr-sauge-light); }
.rdv-faq__item { border-bottom: 1px solid var(--sr-sauge-light); }
.rdv-faq__item summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
}
.rdv-faq__item summary::-webkit-details-marker { display: none; }
.rdv-faq__item summary::after {
  content: '+';
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sr-accent-light);
  color: var(--sr-accent-dark);
  font-weight: 600;
}
.rdv-faq__item[open] summary::after { content: '–'; }
.rdv-faq__item summary:hover { color: var(--sr-accent-dark); }
.rdv-faq__item p { margin: 0 0 1.1rem; padding-right: 2.6rem; font-size: 0.95rem; font-weight: 300; line-height: 1.8; color: var(--sr-texte-muted); }

/* Liens vers le site : cartes cliquables, flèche qui glisse au survol */
.rdv-links__title { font-size: 1.15rem; font-weight: 500; text-align: center; margin: 1.5rem 0 1.1rem; }
.rdv-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.rdv-link {
  position: relative;
  display: block;
  height: 100%;
  background: var(--sr-blanc);
  border: 1.5px solid var(--sr-sauge-light);
  border-radius: var(--rdv-radius-sm);
  padding: 1rem 2.75rem 1rem 1.1rem;
  color: var(--sr-texte);
  text-decoration: none;
  transition: border-color var(--sr-transition), background var(--sr-transition);
}
.rdv-link:hover { border-color: var(--sr-accent); background: var(--sr-accent-light); color: var(--sr-texte); }
.rdv-link__title { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sr-accent-dark); margin-bottom: 0.3rem; }
.rdv-link__text { display: block; font-size: 0.93rem; font-weight: 300; line-height: 1.6; color: var(--sr-texte-muted); }
.rdv-link__arrow { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--sr-accent); transition: transform var(--sr-transition); }
.rdv-link:hover .rdv-link__arrow { transform: translate(0.25rem, -50%); }

/* ---------------------------------------------------------------------
   7. ADMINISTRATION
   --------------------------------------------------------------------- */
.rdv-admin { padding-bottom: 1rem; }
.rdv-admin .rdv-actions { justify-content: flex-start; }
.rdv-admin__state { margin-bottom: 2rem; }
.rdv-flash { border-radius: var(--rdv-radius-sm); padding: 0.75rem 1rem; margin: 0 0 1.5rem; font-weight: 500; }
.rdv-flash--ok { background: var(--sr-sauge-light); }
.rdv-flash--error { background: var(--sr-accent-light); color: var(--sr-accent-dark); }
/* Pastille de couleur placée en absolu : le texte (et ses éventuels <code>) reste un seul paragraphe fluide */
.rdv-status { position: relative; padding-left: 1.4rem; margin: 0 0 0.6rem; }
.rdv-status::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 0.6rem; height: 0.6rem; border-radius: 50%; }
.rdv-status--ok::before { background: var(--sr-sauge); }
.rdv-status--error::before { background: var(--sr-accent); }
.rdv-booking { background: var(--sr-blanc); border: 1px solid var(--sr-sauge-light); border-radius: var(--rdv-radius-sm); padding: 1rem 1.1rem; margin-bottom: 0.75rem; }
.rdv-booking p { margin: 0 0 0.3rem; }
.rdv-booking__when { font-weight: 600; }
.rdv-booking__who, .rdv-booking__contact { font-size: 0.93rem; overflow-wrap: anywhere; }
.rdv-booking__message { font-size: 0.9rem; font-weight: 300; color: var(--sr-texte-muted); border-left: 2px solid var(--sr-accent-light); padding-left: 0.75rem; margin-top: 0.5rem !important; }
.rdv-booking__actions { margin-top: 0.6rem; }
.rdv-booking--cancelled { opacity: 0.6; }
.rdv-past { margin: 1rem 0 2rem; }
.rdv-past summary { cursor: pointer; font-weight: 500; margin-bottom: 0.75rem; }
.rdv-list { margin: 0 0 1rem; padding-left: 1.2rem; }

/* ---------------------------------------------------------------------
   8. PAGE CONFIDENTIALITÉ
   --------------------------------------------------------------------- */
.rdv-legal h2 { font-size: 1.1rem; font-weight: 600; margin: 1.75rem 0 0.5rem; }
.rdv-legal p { font-weight: 300; line-height: 1.8; margin: 0 0 0.75rem; }

/* ---------------------------------------------------------------------
   9. ÉCRANS PLUS LARGES
   --------------------------------------------------------------------- */
@media (min-width: 560px) {
  .rdv-step, .rdv-panel { padding: 2rem 1.75rem; }
  .rdv-choices--formats { grid-template-columns: repeat(2, 1fr); }
  .rdv-form__row { grid-template-columns: 1fr 1fr; }
  .rdv-times__grid { grid-template-columns: repeat(4, 1fr); }
  .rdv-links { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 720px) {
  .rdv-choices--types { grid-template-columns: repeat(2, 1fr); }
  .rdv-when { grid-template-columns: 1.15fr 1fr; align-items: start; }
  .rdv-times__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Mouvements réduits si la personne l’a demandé dans son système */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}