/* Page de prise de rendez-vous ARA — sous-ensemble du système de design de
   rbaudiologie.com (mêmes polices, même palette, même grammaire de cartes et
   de boutons). Mobile d'abord : tout tient à 360 px sans défilement
   horizontal. */

@font-face{
  font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('fonts/bricolage.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('fonts/inter.woff2') format('woff2');
}

:root{
  --ink:#15293A;--ink-soft:#3c4f5e;--paper:#ece6da;--paper-2:#f7f3eb;--card:#fff;
  --line:#e4dfd4;--line-soft:#ece8de;
  /* Contour des contrôles (choix, jours, heures, champs) : assez foncé pour se
     voir sur fond blanc, y compris intégré au site d'une clinique. */
  --edge:#a69e8e;--edge-card:#d3ccbe;--muted:#6f7a82;
  --azure:#245c82;--azure-deep:#163f59;--azure-tint:#e2edf1;
  --coral:#d5583c;--coral-deep:#b8442b;--coral-tint:#f5e2da;
  --good:#2f7d5b;--good-tint:#e4efe8;
  --display:'Bricolage Grotesque',system-ui,sans-serif;--body:'Inter',system-ui,sans-serif;
  --radius:16px;--radius-lg:26px;
  --shadow:0 1px 2px rgba(21,41,58,.05),0 14px 34px -18px rgba(21,41,58,.24);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.55;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;
}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.1;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(1.6rem,1.2rem+2vw,2.3rem)}
h2{font-size:1.15rem;display:flex;align-items:center;gap:.6rem}
p{margin:0 0 .8rem}
a{color:var(--azure)}
button{font:inherit}
::selection{background:var(--coral);color:#fff}
:focus-visible{outline:3px solid var(--coral);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;left:-9999px}

.wrap{width:100%;max-width:720px;margin:0 auto;padding:0 16px}

/* ---------- en-tête ---------- */
.top{
  position:sticky;top:0;z-index:5;background:rgba(236,230,218,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:56px}
.brand{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.brand small{display:block;font-family:var(--body);font-weight:500;font-size:.72rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.lang{
  background:var(--card);border:1.5px solid var(--edge);border-radius:999px;padding:.35rem .8rem;
  font-weight:600;font-size:.82rem;color:var(--ink);cursor:pointer;
}
.lang:hover{border-color:var(--ink)}

main{flex:1;padding:1.4rem 0 2.5rem}
.intro{margin-bottom:1.2rem}
.intro .lead{color:var(--ink-soft);margin:.4rem 0 0}
/* Texte d'accueil de la clinique (réglages de la réception) et adresse. */
.intro .welcome{margin:.6rem 0 0;padding:.7rem .9rem;background:var(--card);border:1px solid var(--edge-card);border-radius:12px}
.intro .welcome p{margin:0 0 .35rem}
.intro .welcome p:last-child{margin:0}
.intro .where{color:var(--ink-soft);font-size:.92rem;margin:.5rem 0 0}
.intro .where-k{color:var(--muted)}
.muted{color:var(--muted)}

/* ---------- étapes ---------- */
.step{
  background:var(--card);border:1px solid var(--edge-card);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1rem 1.1rem 1.1rem;margin-bottom:1rem;
  /* Amenée en vue après un clic (`revealStep`) : sous l'en-tête collant. */
  scroll-margin-top:72px;
}
.step[hidden]{display:none}
.step h2{margin-bottom:.8rem}
.step h2 .n{
  display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;border-radius:999px;
  background:var(--azure-tint);color:var(--azure-deep);font-family:var(--body);font-size:.85rem;font-weight:600;flex:none;
}
.step.done h2 .n{background:var(--good-tint);color:var(--good)}
.step .hint{color:var(--muted);font-size:.9rem;margin:-.3rem 0 .8rem}
.form .hint{margin:0}
.summary{color:var(--ink-soft);font-size:.95rem;margin:.4rem 0 0}
.summary strong{color:var(--ink)}
.summary + .form{margin-top:1rem}

/* services */
.choices{display:grid;gap:.55rem}
.choice{
  display:flex;justify-content:space-between;align-items:center;gap:.8rem;width:100%;text-align:left;
  background:var(--paper-2);border:1.5px solid var(--edge);border-radius:12px;padding:.8rem .95rem;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.choice:hover{border-color:var(--azure)}
.choice[aria-pressed="true"]{border-color:var(--azure);background:var(--azure-tint)}
.choice .dur{color:var(--muted);font-size:.85rem;white-space:nowrap}
.choice .svc-label{display:grid;gap:.15rem}
.choice .svc-desc{color:var(--muted);font-size:.85rem;line-height:1.35}

/* calendrier */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin:.2rem 0 .6rem}
.cal-head .month{font-family:var(--display);font-weight:600;font-size:1.05rem;text-transform:capitalize}
.cal-nav{background:var(--card);border:1.5px solid var(--edge);border-radius:999px;width:2.3rem;height:2.3rem;cursor:pointer;color:var(--ink)}
.cal-nav:disabled{opacity:.35;cursor:default}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem}
.cal .dow{text-align:center;font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:.2rem 0}
.day{
  height:2.75rem;border-radius:10px;border:1.5px solid transparent;background:transparent;cursor:default;
  font-weight:500;color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:.95rem;
}
.day.open{background:var(--paper);border-color:var(--edge);color:var(--ink);cursor:pointer}
.day.open:hover{border-color:var(--azure)}
.day.today{text-decoration:underline;text-underline-offset:3px}
.day[aria-pressed="true"]{background:var(--azure);border-color:var(--azure);color:#fff}
.cal-status{color:var(--muted);font-size:.88rem;margin:.6rem 0 0;min-height:1.2em}

/* créneaux */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.6rem,1fr));gap:.5rem}
.slot{
  background:var(--paper-2);border:1.5px solid var(--edge);border-radius:999px;padding:.55rem .4rem;cursor:pointer;
  font-weight:600;font-size:.95rem;color:var(--ink);white-space:nowrap;
}
.slot:hover{border-color:var(--azure)}
.slot[aria-pressed="true"]{background:var(--azure);border-color:var(--azure);color:#fff}
.tz{color:var(--muted);font-size:.85rem;margin:.6rem 0 0}

/* formulaire */
.form{display:grid;gap:.85rem}
.field{display:grid;gap:.3rem}
.field label{font-weight:600;font-size:.92rem}
.field .opt{color:var(--muted);font-weight:400}
.field input,.field textarea{
  width:100%;font:inherit;color:var(--ink);background:var(--paper-2);border:1.5px solid var(--edge);
  border-radius:10px;padding:.65rem .8rem;min-height:44px;
}
.field textarea{min-height:5.5rem;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--azure);outline:none;box-shadow:0 0 0 3px var(--azure-tint)}
.field input,.field textarea,.field select{min-width:0}
.field select{
  width:100%;font:inherit;color:var(--ink);background:var(--paper-2);border:1.5px solid var(--edge);
  border-radius:10px;padding:.65rem .8rem;min-height:44px;
}
.field select:focus{border-color:var(--azure);outline:none;box-shadow:0 0 0 3px var(--azure-tint)}
.field.error input,.field.error textarea,.field.error select{border-color:var(--coral)}
.field .err{color:var(--coral-deep);font-size:.85rem}
.field-hint{color:var(--muted);font-size:.85rem;line-height:1.35}
/* Date de naissance : trois cases jj / mm / aaaa (étiquettes pour lecteurs d'écran). */
fieldset.field{border:0;margin:0;padding:0;min-width:0}
fieldset.field legend{font-weight:600;font-size:.92rem;padding:0;margin-bottom:.3rem}
fieldset.field legend .opt{color:var(--muted);font-weight:400}
.dob-boxes{display:flex;align-items:center;gap:.4rem}
.dob-part{display:block}
.dob-part--2{width:3.6rem}
.dob-part--4{width:5.2rem}
.dob-part input{text-align:center;padding:.65rem .3rem;font-variant-numeric:tabular-nums}
.dob-sep{color:var(--muted)}
/* Date idéale d'une demande : le calendrier de l'étape « Date », puis la date en toutes lettres. */
.pref-date .field-hint{margin:0 0 .2rem}
.pref-date .cal-head{margin:.1rem 0 .4rem}
.pref-date .day:focus-visible,.cal-nav:focus-visible{outline:3px solid var(--azure);outline-offset:2px}
.pref-date.error .cal{border-radius:12px;outline:1.5px solid var(--coral);outline-offset:4px}
.pref-chosen{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem .8rem;
  background:var(--paper-2);border:1.5px solid var(--edge);border-radius:10px;padding:.5rem .6rem .5rem .9rem;min-height:44px;
}
.pref-date.error .pref-chosen{border-color:var(--coral)}
.pref-chosen-day{font-weight:600;color:var(--ink)}
.pref-chosen-actions{display:flex;align-items:center;gap:.4rem}
.pref-clear{
  font:inherit;font-size:.9rem;background:none;border:0;color:var(--ink-soft);text-decoration:underline;
  cursor:pointer;padding:.3rem .4rem;min-height:40px;
}
/* Pièces jointes : le sélecteur natif est masqué (mais focalisable), son étiquette fait bouton. */
.files-title{font-weight:600;font-size:.92rem}
.file-pick{position:relative;display:flex}
.file-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.file-input:focus-visible + label{outline:3px solid var(--azure);outline-offset:2px}
.file-pick label{cursor:pointer}
.file-list{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.file-list li{
  display:flex;align-items:center;gap:.6rem;background:var(--paper-2);border:1.5px solid var(--edge-card);
  border-radius:10px;padding:.45rem .6rem .45rem .8rem;font-size:.9rem;min-width:0;
}
.file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-size{color:var(--muted);font-size:.82rem;white-space:nowrap}
.file-remove{
  font:inherit;font-size:.85rem;background:none;border:0;color:var(--coral-deep);text-decoration:underline;
  cursor:pointer;padding:.3rem;min-height:36px;
}
/* Erreurs hors champ (courriel ou téléphone requis, consentement sans courriel). */
.form>.err{color:var(--coral-deep);font-size:.85rem;margin:-.4rem 0 0}
.row2{display:grid;gap:.85rem}
@media (min-width:520px){.row2{grid-template-columns:1fr 1fr}}
.privacy-note{
  display:flex;gap:.6rem;align-items:flex-start;background:var(--good-tint);color:var(--good);border-radius:10px;
  padding:.6rem .8rem;font-size:.85rem;margin:.2rem 0 .3rem;
}
.privacy-note svg{flex:none;margin-top:.15rem}
.consent{display:flex;gap:.7rem;align-items:flex-start;background:var(--paper-2);border:1.5px solid var(--edge-card);border-radius:10px;padding:.7rem .8rem;font-size:.9rem}
.consent input{width:1.2rem;height:1.2rem;margin:.15rem 0 0;flex:none;accent-color:var(--azure)}
.consent.error{border-color:var(--coral)}

/* boutons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-weight:600;font-size:.98rem;
  padding:.85rem 1.5rem;border-radius:999px;border:1.5px solid transparent;cursor:pointer;min-height:46px;
  transition:transform .2s var(--ease),background .2s;line-height:1.15;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--azure);color:#fff;box-shadow:0 12px 24px -14px var(--azure)}
.btn--primary:hover{background:var(--azure-deep)}
.btn--coral{background:var(--coral);color:#fff}
.btn--coral:hover{background:var(--coral-deep)}
.btn--ghost{background:var(--card);border-color:var(--edge);color:var(--ink)}
.btn--small{font-size:.9rem;padding:.5rem .9rem;min-height:40px}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.3rem}
.actions--center{justify-content:center}
.turnstile{min-height:65px;margin:.2rem 0 .4rem}
/* Sous le bouton de réservation : à quoi servent les renseignements, et le
   lien vers la politique de confidentialité de la clinique. */
.data-use{margin:-.35rem 0 0;color:var(--muted);font-size:.82rem}
.data-use a{color:inherit;text-decoration:underline;white-space:nowrap}

/* messages */
.alert{border-radius:10px;padding:.75rem .9rem;font-size:.92rem;margin:0 0 .9rem}
.alert--warn{background:var(--coral-tint);color:var(--coral-deep)}
.alert--ok{background:var(--good-tint);color:var(--good)}
.alert[hidden]{display:none}

/* confirmation */
.confirm{border-top:4px solid var(--good)}
.confirm .big{font-family:var(--display);font-size:1.35rem;font-weight:600;margin:.4rem 0}
.confirm .cancel-link{word-break:break-all;font-size:.9rem}
.confirm dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;margin:.6rem 0 1rem}
.confirm dt{color:var(--muted);font-size:.88rem}
.confirm dd{margin:0}

/* page d'annulation */
.cancel-card{text-align:center;padding:1.6rem 1rem}

footer{border-top:1px solid var(--line-soft);padding:1rem 0;color:var(--muted);font-size:.8rem}
footer a{color:inherit}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem}

/* ---------- jeux de couleurs (`?theme=`, `data-theme` du conteneur) ----------
   Beige par défaut (`:root`). Chacun ne change que les fonds, les contours et
   la couleur d'accent ; le texte reste le même. */
html[data-theme="gris"]{
  --paper:#e9ebee;--paper-2:#f5f6f8;--line:#dfe2e6;--line-soft:#e8eaed;--edge:#9aa1aa;--edge-card:#cfd4da;
}
html[data-theme="bleu"]{
  --paper:#e3ecf2;--paper-2:#f2f6f9;--line:#d5e0e8;--line-soft:#e2eaf0;--edge:#8fa5b6;--edge-card:#c6d4df;
  --azure:#1f5f8b;--azure-deep:#143f5e;--azure-tint:#d7e6f1;
}
html[data-theme="sauge"]{
  --paper:#e4ebe5;--paper-2:#f2f6f2;--line:#d6e0d8;--line-soft:#e2e9e3;--edge:#93a698;--edge-card:#c8d5ca;
  --azure:#2f6b55;--azure-deep:#1f4c3c;--azure-tint:#dbeae2;
}
html[data-theme] .top{background:var(--paper)}

/* ---------- intégrée au site d'une clinique (`?embed=1`, iframe) ----------
   Le site autour fournit déjà l'en-tête ; la page se réduit au contenu, sans hauteur minimale (sa hauteur réelle est envoyée au parent,
   qui ajuste l'iframe : elle doit pouvoir rapetisser). */
/* Une image (même vide) sur <html> empêche le fond de <body> de remplir tout
   le canevas : les coins arrondis du bloc restent transparents. */
html.embed{background:linear-gradient(transparent,transparent)}
/* Le cadre porte son propre fond beige, bordé et arrondi : sur le site d'une
   clinique, le formulaire forme un bloc net au lieu de se fondre dans la page. */
html.embed body{background:var(--paper);min-height:0;display:block;border:1px solid var(--edge-card);border-radius:var(--radius-lg)}
html.embed .top{position:static;background:transparent;backdrop-filter:none;border:0}
html.embed .step{scroll-margin-top:12px}
html.embed .top .wrap{min-height:0;justify-content:flex-end;padding-top:12px}
html.embed .brand{display:none}
html.embed main{padding:.4rem 0 1rem}
html.embed footer{border:0;padding:.2rem 0 .6rem}
/* Pleine largeur du cadre : le bloc s'aligne sur le texte du site hôte au
   lieu de flotter au centre d'une colonne de 720 px. */
html.embed .wrap{max-width:none;padding:0 16px}

/* Patient presentations only; staff and cancellation retain their styles. */
html[data-design]{--muted:#57656b;--shadow:0 8px 30px -20px #142d3740;--edge:#85969c;--edge-card:#d3dfe1}
html[data-design] .wrap{max-width:1120px;padding-left:28px;padding-right:28px}
html[data-design] .top{position:static;background:var(--paper);backdrop-filter:none}
html[data-design] .top .wrap{min-height:84px}
html[data-design] main{padding-top:40px;padding-bottom:64px}
html[data-design] .brand small{font-size:.8rem;letter-spacing:.16em;color:var(--azure)}
html[data-design] .design-intro{margin:0 0 36px;max-width:780px}
html[data-design] h1{font-size:clamp(2rem,4vw,3.5rem);line-height:1.12;letter-spacing:-.04em}
html[data-design] .intro .lead{font-size:1.05rem;line-height:1.7;margin-top:16px;max-width:620px}
.eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:var(--azure);margin:0 0 12px}
.booking-mode{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;color:var(--azure-deep);margin:20px 0 0}
.booking-mode::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--azure);flex:none}
.design-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:32px;align-items:start}
.design-layout>*{min-width:0}
html[data-design] .step{padding:26px;margin-bottom:20px}
html[data-design] .step h2{font-size:1.1rem;margin-bottom:22px}
html[data-design] .field label{font-size:.88rem}
html[data-design] .field input,html[data-design] .field textarea,html[data-design] .field select{width:100%;font:inherit;font-size:1rem;min-width:0;min-height:52px;color:var(--ink);background:var(--card);border:1px solid var(--edge);border-radius:9px;padding:12px 14px}
html[data-design] .field select{padding-right:26px;text-overflow:ellipsis}
html[data-design] .field input[readonly]{background:var(--paper-2);color:var(--ink-soft)}
html[data-design] .field select:focus{outline:3px solid var(--azure-tint);border-color:var(--azure)}
html[data-design] .field.error select{border-color:var(--coral)}
html[data-design] .field :disabled{opacity:.65;cursor:not-allowed}
html[data-design] .form{gap:20px}
html[data-design] .field{gap:7px}
html[data-design] .row2{gap:18px}
html[data-design] .btn{min-height:52px;font-size:.95rem;box-shadow:none}
html[data-design] .day{height:44px}
html[data-design] .cal-nav{width:44px;height:44px}
html[data-design] .slot{min-height:48px}
html[data-design] .choice{min-height:74px}
html[data-design] .choice[aria-pressed="true"]{box-shadow:inset 4px 0 var(--azure)}
html[data-design] .privacy-note{font-size:.8rem;background:transparent;padding:0;color:var(--ink-soft)}
html[data-design] .consent{font-size:.8rem;line-height:1.6;border:0;border-radius:8px;padding:14px;background:var(--paper-2)}
html[data-design] .required-note{font-size:.78rem;color:var(--muted);margin:0;line-height:1.6}
.native-schedule{display:grid;gap:20px}
.additional-info{border-top:1px solid var(--edge-card);padding-top:16px;font-size:.88rem}
.additional-info>summary{cursor:pointer;min-height:44px;display:list-item;align-content:center;color:var(--azure);font-weight:600}
.additional-fields{display:grid;gap:20px;padding:16px 0}
.appointment-aside{background:var(--paper-2);padding:28px;border-radius:16px;border:1px solid var(--edge-card);position:sticky;top:24px}
.appointment-aside h2{font-size:1.25rem;line-height:1.3}
.appointment-aside dl{margin:28px 0 0}
.appointment-aside dt{font-size:.72rem;color:var(--muted);margin:22px 0 6px;text-transform:uppercase;letter-spacing:.09em}
.appointment-aside dd{font-size:.92rem;margin:0;line-height:1.6;overflow-wrap:anywhere}
.appointment-aside dd small{display:block;font-size:.8rem;color:var(--muted);margin-top:6px}
.phone-help{border-top:1px solid var(--edge-card);margin-top:28px;padding-top:22px;font-size:.8rem}
.phone-help p{margin-bottom:6px}
.phone-help a{font-size:1rem;font-weight:600;text-underline-offset:4px}
.design-picker{padding:22px;background:#fff;color:#23343c;border:1px solid #d4dcdf;border-radius:16px;margin:0 0 38px;box-shadow:0 4px 20px #15293a08}
.design-picker .eyebrow{color:#485962}
.design-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.design-option{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid #ccd5d8;background:#fff;color:#293b45;border-radius:10px;padding:12px 10px;cursor:pointer;min-height:64px;font-size:.85rem}
.design-option small{display:block;font-size:.65rem;color:#5d6c72;margin-bottom:2px}
.design-option[aria-pressed="true"]{border:2px solid #293b45;padding:11px 9px;background:#f1f5f6}
.design-swatch{display:block;width:12px;height:30px;border-radius:8px;flex:none;background:#07516a}
.design-option--guide .design-swatch{background:#3d6956}
.design-option--horizon .design-swatch{background:#2658a0}
.design-option--chaleureux .design-swatch{background:#a34e32}
.design-option--essentiel .design-swatch{background:#493b64}
.design-description{margin:14px 0 0;font-size:.8rem;line-height:1.5;color:#57656b}
/* 01 — Reference clinic: petrol blue, pale blue, serif title, square fields. */
html[data-design="classique"]{--ink:#07516a;--ink-soft:#385760;--paper:#edf6fb;--paper-2:#e5f1f8;--azure:#07516a;--azure-deep:#043444;--azure-tint:#cfeafc;--edge:#aaa;--edge-card:#dbe6e9;--display:Georgia,'Times New Roman',serif;--radius:0}
html[data-design="classique"] h1{font-weight:400;font-size:clamp(2.6rem,5vw,4.4rem)}
html[data-design="classique"] .design-layout{grid-template-columns:minmax(0,650px) 1fr;gap:64px}
html[data-design="classique"] .step{padding:0;border:0;box-shadow:none;background:transparent}
html[data-design="classique"] #form>h2{display:none}
html[data-design="classique"] .field input,html[data-design="classique"] .field select{border-radius:2px;min-height:64px}
html[data-design="classique"] .field textarea{border-radius:2px;min-height:130px}
html[data-design="classique"] .field label{font-weight:600;color:#07516a}
html[data-design="classique"] .appointment-aside{border:0;border-radius:100px 100px 12px 12px;padding:54px 30px 32px;background:linear-gradient(160deg,#e0f0f9,#f7fafb)}
html[data-design="classique"] .btn{border-radius:8px}
html[data-design="classique"] .actions .btn--primary{width:100%}
/* 02 — Guided sage: three pages and explicit progress navigation. */
html[data-design="guide"]{--ink:#233f34;--ink-soft:#42594e;--paper:#f3f5ef;--paper-2:#e9efe6;--azure:#365f4d;--azure-deep:#264839;--azure-tint:#dce9dc;--edge:#93a492;--edge-card:#d1ddce;--radius:18px}
html[data-design="guide"] .design-intro{max-width:690px}
.patient-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px}
.patient-progress button{display:flex;align-items:center;gap:12px;padding:16px;border:0;border-bottom:2px solid var(--edge-card);background:transparent;color:var(--ink-soft);font-size:.9rem;text-align:left;cursor:pointer}
.patient-progress button span{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;border-radius:50%;background:var(--paper-2)}
.patient-progress button[aria-current="step"]{border-color:var(--azure);color:var(--azure);font-weight:600}
.patient-progress button[aria-current="step"] span{background:var(--azure);color:#fff}
.patient-progress button:disabled{opacity:.65;cursor:default}
.guided-content{background:var(--card);border:1px solid var(--edge-card);border-radius:22px;padding:30px}
html[data-design="guide"] .guided-content .step{border:0;box-shadow:none;padding:0;margin-bottom:26px}
html[data-design="guide"] .guided-content .step .n{display:none}
.wizard-actions{display:flex;justify-content:flex-end;gap:12px;border-top:1px solid var(--edge-card);padding-top:24px}
/* 03 — Horizon: calendar and times side by side, persistent summary. */
html[data-design="horizon"]{--ink:#1b3151;--ink-soft:#415777;--paper:#f2f6fc;--paper-2:#e9f0fa;--azure:#25559a;--azure-deep:#193e73;--azure-tint:#dce8fa;--edge:#899cb7;--edge-card:#d3dfef;--radius:14px}
html[data-design="horizon"] .wrap{max-width:1240px}
html[data-design="horizon"] .choices{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-design="horizon"] .choice{align-items:flex-start;flex-direction:column}
html[data-design="horizon"] .appointment-aside{background:#203e68;color:#fff;border:0;border-radius:16px}
html[data-design="horizon"] .appointment-aside :is(.eyebrow,dt,small){color:#c8d8f0}
html[data-design="horizon"] .appointment-aside a{color:#fff}
.calendar-pair{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:start}
html[data-design="horizon"] .calendar-pair .step{padding:18px;min-width:0}
html[data-design="horizon"] .calendar-pair .cal{gap:2px}
html[data-design="horizon"] .calendar-pair .day{font-size:.88rem}
html[data-design="horizon"] .calendar-pair .slots{grid-template-columns:repeat(2,minmax(0,1fr))}
.time-placeholder{display:grid;place-content:center;text-align:center;min-height:300px;border:1px dashed var(--edge);border-radius:14px;padding:24px;color:var(--muted);font-size:.85rem}
.time-placeholder>span{font-size:3rem;color:var(--azure)}
/* 04 — Warm welcome: numbered, expandable sections. */
html[data-design="chaleureux"]{--ink:#49362d;--ink-soft:#6b5143;--paper:#fbf5ec;--paper-2:#f3e8da;--azure:#98482e;--azure-deep:#783722;--azure-tint:#f3dfd2;--edge:#ae9381;--edge-card:#e3d3c2;--display:Georgia,'Times New Roman',serif;--radius:12px}
html[data-design="chaleureux"] h1{font-weight:400;max-width:740px}
html[data-design="chaleureux"] .design-intro .eyebrow{font-family:var(--body)}
.patient-accordion{border:1px solid var(--edge-card);background:var(--card);border-radius:12px;margin-bottom:14px;overflow:hidden}
.patient-accordion>summary{list-style:none;display:flex;gap:20px;align-items:center;cursor:pointer;padding:24px;font-family:var(--display);font-size:1.35rem}
.patient-accordion>summary::-webkit-details-marker{display:none}
.accordion-number{font-family:var(--body);font-size:.9rem;color:var(--azure)}
.accordion-plus{margin-left:auto;font-family:var(--body);color:var(--azure)}
.patient-accordion[open] .accordion-plus{transform:rotate(45deg)}
.accordion-content{padding:0 24px 24px}
html[data-design="chaleureux"] .accordion-content .step{padding:0;border:0;box-shadow:none;margin-bottom:18px}
html[data-design="chaleureux"] .accordion-content .step>h2{display:none}
html[data-design="chaleureux"] .btn{border-radius:8px}
/* 05 — Essential: native choices, large controls, restrained plum accents. */
html[data-design="essentiel"]{--ink:#30283f;--ink-soft:#534a63;--paper:#fff;--paper-2:#f3f1f6;--azure:#493b64;--azure-deep:#352948;--azure-tint:#e9e3f0;--edge:#958a9f;--edge-card:#dcd5e2;--radius:8px}
html[data-design="essentiel"] .wrap{max-width:920px}
html[data-design="essentiel"] .design-layout{grid-template-columns:minmax(0,1fr)}
html[data-design="essentiel"] .appointment-aside{position:static;border:0;border-top:1px solid var(--edge-card);border-radius:0;background:#fff;padding:24px 0}
html[data-design="essentiel"] .appointment-aside dl{display:grid;grid-template-columns:1fr 2fr;gap:12px;margin:20px 0}
html[data-design="essentiel"] .appointment-aside dt{margin:0}
html[data-design="essentiel"] #form{border:0;border-top:3px solid var(--azure);border-radius:0;box-shadow:none;padding:24px 0}
html[data-design="essentiel"] #form>h2{display:none}
html[data-design="essentiel"] .field :is(input,select,textarea){border-radius:4px;min-height:56px;font-size:1.1rem}
html[data-design="essentiel"] .field label{font-size:1rem}
html[data-design="essentiel"] .native-schedule{padding:24px;background:var(--paper-2);border-radius:8px}
html[data-design="essentiel"] .btn{border-radius:5px;width:100%;font-size:1.1rem}
html[data-design] .confirm{max-width:760px;margin:0 auto}
html[data-design] .confirm h1{font-size:2.4rem}
html.embed[data-design] body{border-radius:12px}
html.embed[data-design] .wrap{padding-left:24px;padding-right:24px}
html.embed[data-design] .top .wrap{min-height:0;padding-top:16px}
html.embed[data-design] main{padding-top:16px;padding-bottom:24px}
@media(max-width:1000px){
  html[data-design="classique"] .design-layout{gap:30px;grid-template-columns:minmax(0,1fr) 240px}
  html[data-design="horizon"] .calendar-pair{grid-template-columns:1fr}
  html[data-design="horizon"] .time-placeholder{min-height:100px}
}
@media(max-width:760px){
  .design-layout,html[data-design="classique"] .design-layout{grid-template-columns:1fr;gap:20px}
  .appointment-aside{position:static;padding:24px}
  html[data-design="classique"] .appointment-aside{border-radius:12px;padding:28px}
  .design-options{grid-template-columns:repeat(3,minmax(0,1fr))}
  html[data-design="horizon"] .choices{grid-template-columns:1fr}
  html[data-design] .wrap,html.embed[data-design] .wrap{padding-left:18px;padding-right:18px}
  html[data-design] main{padding-top:24px}
  .patient-progress{gap:6px}
  .patient-progress button{flex-direction:column;align-items:flex-start;font-size:.75rem;padding:12px 4px;gap:8px}
  .guided-content{padding:22px}
}
@media(max-width:420px){
  .design-options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .design-picker{padding:14px}
  html[data-design] .step{padding:20px 16px}
  html[data-design] .design-intro{margin-bottom:24px}
  .patient-accordion>summary{padding:20px 16px;font-size:1.2rem}
  .accordion-content{padding:0 16px 20px}
  .guided-content{padding:20px 16px}
  html[data-design="essentiel"] .native-schedule{padding:16px}
  html[data-design] .actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  html[data-design] *,html[data-design] *::before{transition:none!important;scroll-behavior:auto!important}
  html[data-design] .btn:hover{transform:none}
}