/* Willia — pages des clients (page de l'établissement, réservation, bons cadeaux, paiement).
   La couleur de l'établissement arrive dans --lilas (et ses nuances), écrite par w_pub_tete(). */
:root{
  --bg:#F7F5F9; --white:#FFFFFF; --ink:#211B26; --muted:#6F6777; --line:#E6E1EA;
  --lilas:#9A44C0; --lilas-clair:#D3A6F0; --lilas-soft:#F3E8FB; --lilas-hover:#86369F;
  --green:#2E9E6A; --green-soft:#E6F5EE; --red:#C93C3C; --orange:#E0912F;
  --f:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --titre:"Lora", Georgia, "Times New Roman", serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lilas);outline-offset:2px;border-radius:8px}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--titre);font-weight:600;letter-spacing:-.01em;line-height:1.2;margin:0}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;border-radius:999px;padding:12px 22px;font-weight:600;text-decoration:none;transition:background .2s,transform .15s,box-shadow .2s;white-space:nowrap;font-size:.98rem}
.btn:active{transform:scale(.98)}
.btn-lilas{background:var(--lilas);color:#fff;box-shadow:0 10px 24px -12px var(--lilas)}
.btn-lilas:hover{background:var(--lilas-hover)}
.btn-blanc{background:#fff;color:var(--ink)}
.btn-blanc:hover{background:var(--lilas-soft)}
.btn-contour{background:transparent;color:var(--lilas);box-shadow:inset 0 0 0 1.5px var(--lilas)}
.btn-contour:hover{background:var(--lilas-soft)}
.btn-gris{background:#EEEAF1;color:var(--ink)}
.btn:disabled{opacity:.55;cursor:default}
.btn-bloc{width:100%}

/* ---------- Barre du haut ---------- */
.pub-nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.pub-nav .in{max-width:1080px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.pub-marque{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0;flex:1}
.pub-marque img{width:38px;height:38px;border-radius:50%;object-fit:contain;background:#fff;border:1px solid var(--line)}
.pub-marque .ini{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--lilas);color:#fff;font-weight:700;flex:none}
.pub-marque b{font-family:var(--titre);font-size:1.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pub-nav .btn{padding:9px 16px;font-size:.9rem}
@media (max-width:560px){.pub-nav .cacher-mobile{display:none}}

/* ---------- Page de l'établissement ---------- */
.hero{position:relative;min-height:min(78vh,620px);display:grid;align-items:end;color:#fff;background:linear-gradient(135deg,var(--lilas),var(--lilas-clair));overflow:hidden}
.hero img.couv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,10,25,.05) 30%,rgba(20,10,25,.62))}
.hero .in{position:relative;z-index:1;max-width:1080px;width:100%;margin:0 auto;padding:48px 16px 44px;display:grid;gap:14px}
.hero .logo-rond{width:86px;height:86px;border-radius:50%;background:#fff;padding:8px;object-fit:contain;box-shadow:0 12px 30px -10px rgba(0,0,0,.4)}
.hero h1{font-size:clamp(2.1rem,6vw,3.6rem);text-shadow:0 2px 20px rgba(0,0,0,.2)}
.hero p.accroche{font-size:clamp(1.05rem,2.6vw,1.3rem);max-width:640px;margin:0;opacity:.95}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.section{max-width:1080px;margin:0 auto;padding:56px 16px}
.section h2{font-size:clamp(1.6rem,4vw,2.2rem);margin-bottom:18px}
.section .intro{color:var(--muted);max-width:680px;margin:-8px 0 22px}
.texte{max-width:760px;font-size:1.05rem;white-space:pre-line}
.bande{background:#fff}
.carte-soins{display:grid;gap:26px}
.cat h3{font-size:1.25rem;color:var(--lilas);margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.soin{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:12px 0;border-bottom:1px dashed var(--line)}
.soin:last-child{border-bottom:0}
.soin b{font-weight:600}
.soin .meta{color:var(--muted);font-size:.9rem;white-space:nowrap;text-align:right}
.soin p{grid-column:1 / -1;margin:0;color:var(--muted);font-size:.93rem}
.soin .act{grid-column:1 / -1;margin-top:4px}
.soin .act a{font-size:.88rem;color:var(--lilas);font-weight:600;text-decoration:none}
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.galerie button{border:0;padding:0;cursor:zoom-in;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--lilas-soft)}
.galerie img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.galerie button:hover img{transform:scale(1.04)}
.visionneuse{position:fixed;inset:0;z-index:100;background:rgba(15,10,18,.92);display:grid;place-items:center;padding:20px}
.visionneuse img{max-height:86vh;max-width:min(1200px,94vw);border-radius:12px;object-fit:contain}
.visionneuse p{color:#fff;text-align:center;margin:10px 0 0}
.visionneuse .fermer,.visionneuse .nav{position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;width:46px;height:46px;border-radius:50%;font-size:1.4rem;cursor:pointer}
.visionneuse .fermer{top:16px;right:16px}
.visionneuse .prec{left:12px;top:50%}.visionneuse .suiv{right:12px;top:50%}
.infos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.bloc{background:#fff;border-radius:22px;padding:22px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.bande .bloc{background:var(--bg)}
.bloc h3{font-size:1.15rem;margin-bottom:10px}
.horaires{width:100%;border-collapse:collapse;font-size:.95rem}
.horaires td{padding:5px 0;border-bottom:1px solid var(--line)}
.horaires td:last-child{text-align:right;color:var(--muted)}
.horaires tr.auj td{font-weight:600;color:var(--ink)}
.liens-sociaux{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.liens-sociaux a{font-size:.88rem;text-decoration:none;background:var(--lilas-soft);color:var(--lilas);border-radius:999px;padding:7px 14px;font-weight:600}
.offrir{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:center;background:linear-gradient(135deg,var(--lilas),var(--lilas-clair));color:#fff;border-radius:28px;padding:clamp(24px,5vw,44px)}
.offrir h2{margin:0 0 8px}
.offrir p{margin:0 0 16px;opacity:.95}
.offrir .mini-bon{background:#fff;color:var(--ink);border-radius:18px;padding:20px;transform:rotate(-2deg);box-shadow:0 20px 40px -20px rgba(0,0,0,.4)}
.offrir .mini-bon small{display:block;letter-spacing:.2em;font-size:.72rem;color:var(--muted);text-transform:uppercase}
.offrir .mini-bon b{display:block;font-family:var(--titre);font-size:2rem;color:var(--lilas)}
@media (max-width:720px){.offrir{grid-template-columns:1fr}.offrir .mini-bon{display:none}}
.pied{text-align:center;color:var(--muted);font-size:.85rem;padding:32px 16px 48px}
.pied a{color:var(--muted)}
.barre-mobile{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;display:none;gap:8px}
.barre-mobile .btn{flex:1;box-shadow:0 12px 30px -10px rgba(0,0,0,.35)}
@media (max-width:640px){.barre-mobile{display:flex}.pied{padding-bottom:96px}}

/* ---------- Parcours (réservation, bon cadeau) ---------- */
.parcours{max-width:760px;margin:0 auto;padding:28px 16px 80px;display:grid;gap:18px}
.parcours > h1{font-size:clamp(1.7rem,5vw,2.3rem)}
.parcours > .intro{color:var(--muted);margin:-8px 0 0}
.etapes{display:flex;gap:6px;flex-wrap:wrap;font-size:.82rem}
.etapes span{padding:5px 12px;border-radius:999px;background:#EEEAF1;color:var(--muted);font-weight:600}
.etapes span.on{background:var(--lilas);color:#fff}
.etapes span.fait{background:var(--lilas-soft);color:var(--lilas)}
.boite{background:#fff;border-radius:24px;padding:clamp(18px,4vw,28px);box-shadow:0 1px 2px rgba(0,0,0,.04);display:grid;gap:14px}
.boite > h2{font-size:1.3rem}
.choix{display:grid;gap:8px}
.choix-cat{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-top:8px}
.option{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;align-items:center;text-align:left;width:100%;border:1.5px solid var(--line);background:#fff;border-radius:16px;padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s}
.option:hover{border-color:var(--lilas-clair)}
.option.on{border-color:var(--lilas);background:var(--lilas-soft)}
.option b{font-weight:600}
.option small{color:var(--muted);grid-column:1}
.option .prix{font-weight:600;white-space:nowrap;grid-row:1 / span 2;grid-column:2}
.puces{display:flex;gap:8px;flex-wrap:wrap}
.puce{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:9px 16px;cursor:pointer;font-weight:600;font-size:.95rem}
.puce.on{border-color:var(--lilas);background:var(--lilas);color:#fff}
.semaine-tete{display:flex;align-items:center;justify-content:space-between;gap:10px}
.semaine-tete b{font-size:1rem}
.semaine-tete .btn{padding:8px 14px}
.jours{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.jour-b{border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:8px 2px;cursor:pointer;display:grid;gap:1px;text-align:center}
.jour-b small{font-size:.72rem;color:var(--muted);text-transform:capitalize}
.jour-b b{font-size:1.1rem}
.jour-b i{font-style:normal;font-size:.68rem;color:var(--green);font-weight:600}
.jour-b.vide{opacity:.42;cursor:default}
.jour-b.vide i{color:var(--muted)}
.jour-b.on{border-color:var(--lilas);background:var(--lilas);color:#fff}
.jour-b.on small,.jour-b.on i{color:#fff}
.jours.mois{gap:5px}
.jours.mois .jour-n{font-size:.7rem;color:var(--muted);text-align:center;text-transform:uppercase;letter-spacing:.04em;padding-bottom:2px}
.jours.mois .jour-b{padding:7px 0 5px;border-radius:12px;aspect-ratio:1/1;align-content:center;min-height:40px}
.jours.mois .jour-b b{font-size:1rem}
.jours.mois .jour-b i{font-size:.55rem;line-height:1;min-height:.55rem}
.jours.mois .jour-b:not(.vide){border-color:var(--lilas-clair);background:var(--lilas-soft)}
.jours.mois .jour-b.on{background:var(--lilas);border-color:var(--lilas)}
.jours.mois .jour-b.vide{opacity:.35;border-style:dashed}
.heures{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px}
.heure{border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:10px 0;cursor:pointer;font-weight:600;font-variant-numeric:tabular-nums}
.heure:hover{border-color:var(--lilas-clair)}
.heure.on{background:var(--lilas);border-color:var(--lilas);color:#fff}
.vide-msg{color:var(--muted);text-align:center;padding:12px 0;margin:0}
.champ{display:grid;gap:6px}
.champ label{font-size:.88rem;font-weight:600}
.champ input,.champ select,.champ textarea{width:100%;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;font-size:1rem;transition:border-color .2s,box-shadow .2s}
.champ textarea{min-height:84px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--lilas);box-shadow:0 0 0 4px var(--lilas-soft)}
.champ small{color:var(--muted);font-size:.82rem}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.deux{grid-template-columns:1fr}}
.case{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:.92rem}
.case input{width:20px;height:20px;accent-color:var(--lilas);margin:2px 0 0;flex:none}
.recap{background:var(--lilas-soft);border-radius:16px;padding:14px 16px;display:grid;gap:4px}
.recap b{font-family:var(--titre);font-size:1.15rem}
.recap span{color:var(--muted);font-size:.93rem}
.err{color:#A81616;background:#FDECEC;border-radius:12px;padding:10px 12px;margin:0;font-size:.92rem}
.ok-msg{color:#1E6B47;background:var(--green-soft);border-radius:12px;padding:10px 12px;margin:0;font-size:.92rem}
.note{font-size:.85rem;color:var(--muted);background:var(--lilas-soft);border-radius:12px;padding:10px 12px;margin:0}
.code-sms{font-size:1.6rem;letter-spacing:.4em;text-align:center;font-variant-numeric:tabular-nums}
.pot{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.fin{text-align:center;justify-items:center}
.fin .rond{width:72px;height:72px;border-radius:50%;background:#34C759;color:#fff;display:grid;place-items:center;font-size:2rem;animation:pop .45s cubic-bezier(.2,.9,.3,1.4)}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.tourne{width:22px;height:22px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--lilas);animation:tourne .8s linear infinite;display:inline-block;vertical-align:middle}
@keyframes tourne{to{transform:rotate(360deg)}}

/* Aperçu du bon cadeau (même mise en page que le PDF) */
.apercu-visuel{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 18px 40px -22px rgba(40,10,60,.45);background:#eee}
.apercu-visuel img{display:block;width:100%;height:100%}
.apercu-visuel .bz.vide span{opacity:.5}
.apercu-bon{aspect-ratio:2/1;border-radius:16px;overflow:hidden;display:grid;grid-template-columns:34.7% 1fr;box-shadow:0 18px 40px -22px rgba(40,10,60,.45);background:var(--lilas-soft);container-type:inline-size}
.apercu-bon .g{background:var(--lilas);color:#fff;display:grid;place-content:center;justify-items:center;text-align:center;gap:2cqw;padding:3cqw}
.apercu-bon .g img{width:15cqw;height:15cqw;border-radius:50%;background:#fff;object-fit:contain;padding:1.6cqw}
.apercu-bon .g b{font-family:var(--titre);font-size:3.4cqw;line-height:1.15}
.apercu-bon .g small{letter-spacing:.35em;font-size:1.5cqw;font-weight:600}
.apercu-bon .d{padding:6cqw 4.5cqw 3cqw;display:grid;align-content:start;gap:.6cqw;min-width:0}
.apercu-bon .d .lab{color:var(--muted);font-size:1.6cqw}
.apercu-bon .d .pour{font-family:"Great Vibes","Lora",cursive;font-size:6.2cqw;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apercu-bon .d .de{font-family:var(--titre);font-style:italic;color:var(--muted);font-size:1.9cqw}
.apercu-bon .d .msg{font-family:var(--titre);font-style:italic;font-size:1.7cqw;max-height:7.5cqw;overflow:hidden}
.apercu-bon .d .val{font-family:var(--titre);color:var(--lilas-hover);font-size:6cqw;line-height:1;margin-top:auto;padding-top:2cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apercu-bon .d .val.soin{font-size:3.8cqw;white-space:normal}
.apercu-bon .d .bas{display:flex;justify-content:space-between;gap:2cqw;border-top:.2cqw solid var(--lilas-clair);padding-top:1.4cqw;margin-top:1.6cqw;font-size:1.45cqw}

/* Toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:11px 18px;border-radius:999px;font-size:.92rem;opacity:0;pointer-events:none;transition:.3s;z-index:200;max-width:90vw}
.toast.visible{opacity:1;transform:translate(-50%,0)}

/* Code promo */
.promo-l{display:flex;gap:8px}
.promo-l input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.04em}
.promo-l .btn{padding:10px 16px}
.promo small.ok{color:var(--green);font-weight:600}
.promo small.ko{color:var(--red)}
/* Réserver avec un bon cadeau */
.bon-resa{display:grid;gap:8px}
.lien-bon{justify-self:start;border:1.5px dashed var(--lilas,#9A44C0);background:none;color:var(--lilas,#9A44C0);border-radius:999px;padding:8px 14px;font:600 .9rem inherit;cursor:pointer}
.lien-bon[aria-expanded=true]{background:#F6EEFB;border-style:solid}
#blocBon{display:grid;gap:6px}
#blocBon .promo-l input{text-transform:uppercase}
.bon-resa small.ok{color:var(--green,#2E9E6A);font-weight:600}
.bon-resa small.ko{color:var(--red,#D64545)}