/* ============================================================
   ENERGILISA — Spiritualité & Bien-être
   Palette tirée du logo : indigo profond, or, turquoise, violet
   ============================================================ */
:root{
  --bg:        #171130;
  --bg-2:      #221a45;
  --bg-card:   rgba(255,255,255,.045);
  --line:      rgba(232,195,126,.22);
  --gold:      #e8c37e;
  --gold-2:    #f6e2b3;
  --violet:    #9b7fd4;
  --turquoise: #5fd4c4;
  --ink:       #efe9ff;
  --ink-soft:  #b6acd6;
  --font-display: "Cormorant Garamond", serif;
  --font-body:    "Jost", sans-serif;
  --r: 18px;
}

*{margin:0;padding:0;box-sizing:border-box}
/* Garantit que l'attribut HTML "hidden" masque bien un élément même si une
   règle plus loin dans la feuille lui donne un display flex/block explicite
   (ex. .cabinet-modal). Sans ce garde-fou, un élément "hidden" peut rester
   invisible mais continuer à intercepter les clics de toute la page. */
[hidden]{display:none !important}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.7;
  font-weight:300;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}

/* ---------- Fond animé ---------- */
#stardust{position:fixed;inset:0;z-index:0;pointer-events:none}
.aurora{
  position:fixed;inset:-20%;z-index:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(40% 35% at 20% 25%, rgba(155,127,212,.28), transparent 70%),
    radial-gradient(35% 30% at 80% 20%, rgba(95,212,196,.16), transparent 70%),
    radial-gradient(45% 40% at 60% 85%, rgba(232,195,126,.12), transparent 70%);
  animation:aurora 26s ease-in-out infinite alternate;
  filter:blur(40px);
}
@keyframes aurora{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(3%, -2%) scale(1.06)}
  100%{transform:translate(-3%, 2%) scale(1.02)}
}

/* ---------- Loader ---------- */
#loader{
  position:fixed;inset:0;z-index:100;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:opacity .8s ease, visibility .8s;
}
#loader.hidden{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease, visibility .4s}
#loader p{font-family:var(--font-display);font-size:1.6rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold)}
.loader-moon{
  width:74px;height:74px;border-radius:50%;
  background:transparent;
  box-shadow:-16px 3px 0 0 #f4f6ff;
  filter:drop-shadow(0 0 18px rgba(238,241,255,.8)) drop-shadow(0 0 50px rgba(155,127,212,.5));
  animation:loadermoon 2.6s ease-in-out infinite;
}
@keyframes loadermoon{
  0%,100%{transform:rotate(-10deg) scale(1);opacity:.85}
  50%{transform:rotate(10deg) scale(1.08);opacity:1}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{scale:1}50%{scale:1.15}}

/* ---------- Navigation ---------- */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;gap:28px;
  padding:16px 5vw;
  transition:background .4s, box-shadow .4s, padding .4s;
}
#nav.scrolled{
  background:rgba(23,17,48,.85);backdrop-filter:blur(14px);
  box-shadow:0 8px 30px rgba(0,0,0,.35);padding:10px 5vw;
}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:1.35rem;letter-spacing:.12em;color:var(--ink)}
.brand img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 18px rgba(232,195,126,.45)}
#nav nav{display:flex;gap:26px;margin-left:auto}
#nav nav a{color:var(--ink-soft);font-size:.92rem;letter-spacing:.05em;position:relative;transition:color .3s}
#nav nav a::after{content:"";position:absolute;left:0;bottom:-5px;height:1px;width:0;background:var(--gold);transition:width .3s}
#nav nav a:hover, #nav nav a.active{color:var(--gold-2)}
#nav nav a:hover::after, #nav nav a.active::after{width:100%}
#burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px}
#burger span{width:26px;height:2px;background:var(--gold);transition:.3s}

/* ---------- Boutons ---------- */
.btn{
  display:inline-block;padding:13px 28px;border-radius:40px;border:1px solid transparent;
  font-family:var(--font-body);font-weight:500;font-size:.95rem;letter-spacing:.04em;
  cursor:pointer;transition:transform .25s, box-shadow .25s, background .25s, color .25s;
}
.btn-lg{padding:16px 36px;font-size:1.05rem}
.btn-gold{
  background:linear-gradient(120deg, var(--gold), var(--gold-2) 55%, var(--gold));
  background-size:200% auto;color:#2a1c0a;
  box-shadow:0 6px 24px rgba(232,195,126,.3);
}
.btn-gold:hover{background-position:right center;transform:translateY(-3px);box-shadow:0 12px 34px rgba(232,195,126,.45)}
.btn-gold:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn-ghost{border-color:var(--line);color:var(--gold-2);background:transparent}
.btn-ghost:hover{background:rgba(232,195,126,.1);transform:translateY(-3px)}
.pulse{animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{
  0%,100%{box-shadow:0 6px 24px rgba(232,195,126,.3)}
  50%{box-shadow:0 6px 24px rgba(232,195,126,.3), 0 0 0 14px rgba(232,195,126,0)}
}

/* ---------- Layout ---------- */
.section{position:relative;z-index:1;padding:110px 5vw}
.section.alt{background:linear-gradient(180deg, transparent, rgba(155,127,212,.06) 30%, rgba(155,127,212,.06) 70%, transparent)}
.wrap{max-width:1120px;margin:0 auto}
.wrap.narrow{max-width:820px}
.split{display:grid;grid-template-columns:1fr 1.2fr;gap:70px;align-items:center}
.center{text-align:center}
.lead{color:var(--ink-soft);max-width:600px;margin:0 auto 40px}
.small{font-size:.85rem;color:var(--ink-soft)}

.eyebrow{
  font-size:.78rem;letter-spacing:.4em;text-transform:uppercase;color:var(--turquoise);
  margin-bottom:14px;
}
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.15}
h2{font-size:clamp(2rem, 4vw, 3rem);margin-bottom:28px}
h2 em, h1 em{font-style:italic;color:var(--gold-2)}
.grad-text{
  background:linear-gradient(90deg, var(--gold-2), var(--turquoise), var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;z-index:1;min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:140px 5vw 80px;
}
.hero-inner{position:relative;z-index:1}
.hero-logo{width:150px;margin:0 auto 30px;border-radius:50%;
  box-shadow:0 0 60px rgba(155,127,212,.5), 0 0 120px rgba(232,195,126,.25);
  animation:float 6s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero h1{font-size:clamp(2.6rem, 6vw, 4.6rem);margin-bottom:24px}
.hero h1 .line{display:block}
#typed{min-height:1.2em;display:inline-block}
#typed::after{content:"|";color:var(--gold);animation:blink 1s step-end infinite;font-weight:300}
@keyframes blink{50%{opacity:0}}
.hero-sub{color:var(--ink-soft);font-size:1.12rem;max-width:640px;margin:0 auto 40px}
.hero-actions{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:60px}
.hero-badges{display:flex;gap:0;justify-content:center}
.hero-badges div{padding:0 34px;border-right:1px solid var(--line);display:flex;flex-direction:column}
.hero-badges div:last-child{border:0}
.hero-badges strong{font-family:var(--font-display);font-size:1.9rem;color:var(--gold-2)}
.hero-badges span{font-size:.82rem;color:var(--ink-soft);letter-spacing:.06em}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);width:24px;height:40px;border:1px solid var(--line);border-radius:14px}
.scroll-hint span{position:absolute;top:7px;left:50%;width:3px;height:8px;margin-left:-1.5px;border-radius:3px;background:var(--gold);animation:scrollhint 1.8s ease-in-out infinite}
@keyframes scrollhint{0%{opacity:1;transform:translateY(0)}70%{opacity:0;transform:translateY(14px)}100%{opacity:0}}

/* ---------- Croissant de lune ---------- */
.moon{
  position:absolute;top:15%;left:68%;
  width:110px;height:110px;border-radius:50%;
  z-index:0;pointer-events:none;
  /* croissant en "C" : cercle invisible, ombre blanche décalée vers la gauche */
  background:transparent;
  box-shadow:-34px 6px 0 0 #f4f6ff;
  filter:drop-shadow(0 0 26px rgba(238,241,255,.7)) drop-shadow(0 0 80px rgba(155,127,212,.45));
  animation:moonswing 7s ease-in-out infinite, moonglow 3.5s ease-in-out infinite;
  opacity:.9;
}
.moon::before{ /* étoile qui orbite autour du croissant */
  content:"✦";
  position:absolute;top:50%;left:50%;
  width:150%;height:150%;
  margin:-75% 0 0 -75%;
  color:#fff;font-size:1rem;text-align:right;line-height:1;
  animation:orbit 12s linear infinite;
}
.moon::after{ /* étoiles scintillantes autour */
  content:"✦";
  position:absolute;top:-34px;left:-58px;
  color:var(--gold-2);font-size:1.2rem;
  text-shadow:-30px 180px 0 rgba(246,226,179,.7), 30px 90px 0 rgba(255,255,255,.6), -70px 60px 0 rgba(255,255,255,.5);
  animation:twinkle 2.2s ease-in-out infinite;
}
@keyframes moonswing{
  0%,100%{transform:translateY(0) rotate(-8deg) scale(1)}
  25%{transform:translateY(-26px) rotate(6deg) scale(1.04)}
  50%{transform:translateY(-10px) rotate(-4deg) scale(1)}
  75%{transform:translateY(-32px) rotate(8deg) scale(1.06)}
}
@keyframes moonglow{
  0%,100%{opacity:.85;filter:drop-shadow(0 0 22px rgba(238,241,255,.6)) drop-shadow(0 0 70px rgba(155,127,212,.4))}
  50%{opacity:1;filter:drop-shadow(0 0 48px rgba(238,241,255,1)) drop-shadow(0 0 130px rgba(155,127,212,.7))}
}
@keyframes orbit{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes twinkle{
  0%,100%{opacity:.3;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.15)}
}

/* ---------- Chouette effraie sur sa branche ---------- */
.owl-scene{
  position:absolute;top:30%;right:90%;
  width:210px;z-index:0;pointer-events:none;opacity:.92;
  filter:drop-shadow(0 0 30px rgba(155,127,212,.3));
}
.owl-sway{transform-origin:0% 78%;animation:owlsway 8s ease-in-out infinite}
@keyframes owlsway{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(1.6deg)}
}
.owl-body{transform-origin:115px 200px;animation:owlbreathe 4s ease-in-out infinite}
@keyframes owlbreathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.02, .985)}
}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s ease, transform .9s ease}
.reveal.visible{opacity:1;transform:none}

/* ---------- Portrait ---------- */
.portrait-frame{position:relative;max-width:400px;margin:0 auto}
.portrait-frame img{border-radius:200px 200px var(--r) var(--r);position:relative;z-index:1;
  background:linear-gradient(180deg, rgba(155,127,212,.25), rgba(23,17,48,.0) 60%);}
.portrait-halo{
  position:absolute;inset:-8%;border-radius:50%;z-index:0;
  background:conic-gradient(from 90deg, rgba(232,195,126,.35), rgba(95,212,196,.3), rgba(155,127,212,.4), rgba(232,195,126,.35));
  filter:blur(46px);animation:spin 22s linear infinite;
}
.portrait-card{
  position:absolute;z-index:2;left:50%;bottom:-24px;transform:translateX(-50%);
  background:rgba(34,26,69,.9);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:var(--r);
  padding:14px 26px;text-align:center;white-space:nowrap;
  box-shadow:0 14px 40px rgba(0,0,0,.4);
}
.portrait-card strong{font-family:var(--font-display);font-size:1.2rem;display:block;color:var(--gold-2)}
.portrait-card span{font-size:.8rem;color:var(--ink-soft);letter-spacing:.05em}
.checks{list-style:none;margin-top:24px}
.checks li{padding-left:30px;position:relative;margin-bottom:10px;color:var(--ink-soft)}
.checks li::before{content:"✦";position:absolute;left:0;color:var(--turquoise)}
#apropos p{margin-bottom:16px;color:var(--ink-soft)}
#apropos p:first-of-type{color:var(--ink)}

/* ---------- Cartes de soins ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit, minmax(240px,1fr));gap:26px;margin-top:50px}
.card{
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r);
  padding:36px 28px;position:relative;overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s;
  will-change:transform;
}
.card:hover{border-color:rgba(232,195,126,.5);box-shadow:0 24px 50px rgba(0,0,0,.4)}
.card h3{font-size:1.45rem;margin:20px 0 12px;color:var(--gold-2)}
.card p{color:var(--ink-soft);font-size:.94rem}
.card-foot{margin-top:22px;display:flex;align-items:baseline;gap:8px}
.price{font-family:var(--font-display);font-size:1.7rem;color:var(--gold)}
.dur{color:var(--ink-soft);font-size:.85rem}
.card-gem{
  width:54px;height:54px;border-radius:14px;transform:rotate(45deg);margin:6px;
  box-shadow:0 0 30px currentColor;animation:gemglow 3.5s ease-in-out infinite;
}
@keyframes gemglow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}
.gem-amethyst{background:linear-gradient(135deg,#b18ae8,#6d4bb8);color:rgba(155,127,212,.6)}
.gem-quartz{background:linear-gradient(135deg,#f7d9e3,#dfa5bd);color:rgba(247,217,227,.5)}
.gem-turquoise{background:linear-gradient(135deg,#7fe8d8,#2fa899);color:rgba(95,212,196,.55)}
.gem-citrine{background:linear-gradient(135deg,#f6e2b3,#d9a747);color:rgba(232,195,126,.55)}

/* ---------- Pierres interactives ---------- */
.stones{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin:50px 0 40px}
.stone{display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer}
.stone span{font-size:.9rem;letter-spacing:.08em;color:var(--ink-soft);transition:color .3s}
.stone-shape{
  width:84px;height:78px;transition:transform .4s ease, filter .4s;
  overflow:visible;
  filter:drop-shadow(0 0 18px var(--glow));
}
.stone:hover .stone-shape, .stone.active .stone-shape{
  filter:drop-shadow(0 0 30px var(--glow)) brightness(1.12);
}
.stone:hover .stone-shape, .stone.active .stone-shape{transform:scale(1.18) rotate(8deg)}
.stone:hover span, .stone.active span{color:var(--gold-2)}
/* Couleurs des cristaux : g1 = face claire, g2 = face sombre, g3 = arête très claire, glow = halo */
.stone[data-stone="amethyst"] .stone-shape{--g1:#c9a8f5;--g2:#5f3daa;--g3:#e6d6ff;--glow:rgba(155,127,212,.6)}
.stone[data-stone="rose"] .stone-shape{--g1:#fbd3e0;--g2:#d488a8;--g3:#fff0f6;--glow:rgba(240,180,205,.55)}
.stone[data-stone="turquoise"] .stone-shape{--g1:#8ff0e0;--g2:#1e9486;--g3:#d8fff8;--glow:rgba(95,212,196,.6)}
.stone[data-stone="lune"] .stone-shape{--g1:#f2f4ff;--g2:#9aa8e0;--g3:#ffffff;--glow:rgba(207,214,242,.7)}
.stone[data-stone="labradorite"] .stone-shape{--g1:#7e93c9;--g2:#31406e;--g3:#a9e0d4;--glow:rgba(126,147,201,.6)}
.stone-info{
  max-width:640px;margin:0 auto;text-align:center;
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 34px;min-height:120px;transition:opacity .3s;
}
.stone-info h3{color:var(--gold-2);font-size:1.5rem;margin-bottom:8px}
.stone-info p{color:var(--ink-soft)}
.stone-info.fading{opacity:0}

/* ---------- Témoignages ---------- */
.slider{max-width:720px;margin:40px auto 0;text-align:center}
.slides{position:relative;min-height:190px;overflow:hidden}
.slide{
  position:absolute;inset:0;opacity:0;transform:translateX(40px);
  transition:opacity .7s ease, transform .7s ease;pointer-events:none;
}
.slide.active{opacity:1;transform:none;pointer-events:auto;position:relative}
.slide p{font-family:var(--font-display);font-size:1.5rem;font-style:italic;line-height:1.5;color:var(--ink)}
.slide footer{margin-top:18px;color:var(--turquoise);font-size:.9rem;letter-spacing:.06em}
.dots{display:flex;gap:10px;justify-content:center;margin-top:28px}
.dots button{width:10px;height:10px;border-radius:50%;border:0;background:var(--line);cursor:pointer;transition:.3s}
.dots button.active{background:var(--gold);transform:scale(1.35)}

/* ---------- Réservation ---------- */
.booking{
  background:rgba(34,26,69,.55);backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:24px;
  padding:44px 42px;margin-top:44px;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.steps{display:flex;justify-content:space-between;margin-bottom:40px;position:relative}
.steps::before{content:"";position:absolute;top:19px;left:8%;right:8%;height:1px;background:var(--line)}
.step-ind{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:1}
.step-ind i{
  width:38px;height:38px;border-radius:50%;font-style:normal;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-2);border:1px solid var(--line);color:var(--ink-soft);
  transition:.4s;
}
.step-ind span{font-size:.76rem;letter-spacing:.08em;color:var(--ink-soft)}
.step-ind.active i{background:var(--gold);border-color:var(--gold);color:#2a1c0a;box-shadow:0 0 22px rgba(232,195,126,.5)}
.step-ind.done i{border-color:var(--turquoise);color:var(--turquoise)}
.step-panel{display:none;animation:panelin .5s ease}
.step-panel.active{display:block}
@keyframes panelin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.mode-choice{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:26px}
.mode{
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 20px;cursor:pointer;color:var(--ink);font-family:var(--font-body);
  transition:.3s;text-align:center;
}
.mode-ico{font-size:1.9rem;display:block;margin-bottom:8px;color:var(--gold)}
.mode strong{display:block;font-size:1.08rem;margin-bottom:4px}
.mode p{font-size:.82rem;color:var(--ink-soft)}
.mode:hover{transform:translateY(-4px);border-color:rgba(232,195,126,.5)}
.mode.selected{border-color:var(--gold);background:rgba(232,195,126,.1);box-shadow:0 0 26px rgba(232,195,126,.25)}

.field{display:block;margin-bottom:18px}
.field span{display:block;font-size:.82rem;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:7px}
.field input, .field select, .field textarea{
  width:100%;padding:13px 16px;border-radius:12px;border:1px solid var(--line);
  background:rgba(23,17,48,.6);color:var(--ink);font-family:var(--font-body);font-size:.95rem;
  transition:border-color .3s, box-shadow .3s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,195,126,.15);
}
.fields-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cal-head strong{font-family:var(--font-display);font-size:1.3rem;color:var(--gold-2);text-transform:capitalize}
.cal-head button{background:none;border:1px solid var(--line);border-radius:50%;width:36px;height:36px;color:var(--gold);font-size:1.2rem;cursor:pointer;transition:.3s}
.cal-head button:hover{background:rgba(232,195,126,.12)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}
.cal-grid .dow{font-size:.72rem;letter-spacing:.1em;color:var(--turquoise);padding:6px 0}
.cal-day{
  padding:10px 0;border-radius:10px;cursor:pointer;font-size:.9rem;color:var(--ink);
  transition:.25s;border:1px solid transparent;background:none;font-family:var(--font-body);
}
.cal-day:hover{background:rgba(155,127,212,.18)}
.cal-day.off{color:rgba(182,172,214,.25);cursor:default;pointer-events:none}
.cal-day.selected{background:var(--gold);color:#2a1c0a;font-weight:600;box-shadow:0 0 18px rgba(232,195,126,.4)}
.slots{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;min-height:44px}
.slot{
  padding:9px 18px;border-radius:30px;border:1px solid var(--line);background:none;
  color:var(--ink);cursor:pointer;font-family:var(--font-body);font-size:.9rem;transition:.25s;
}
.slot:hover{border-color:var(--turquoise);color:var(--turquoise)}
.slot.selected{background:var(--turquoise);border-color:var(--turquoise);color:#0d2b27;font-weight:600}
.slots .hint{color:var(--ink-soft);font-size:.85rem;align-self:center}

.step-nav{display:flex;justify-content:space-between;margin-top:30px}

.confirm-anim{display:flex;justify-content:center;margin:10px 0 24px}
.confirm-check{
  width:96px;height:96px;
  filter:drop-shadow(0 0 22px rgba(78,207,138,.55));
}
.check-circle{
  stroke-dasharray:264;stroke-dashoffset:264;
  transform-origin:center;transform:rotate(-90deg);
  animation:drawcircle .8s ease-out forwards;
}
.check-mark{
  stroke-dasharray:60;stroke-dashoffset:60;
  animation:drawcheck .45s ease-out .7s forwards;
}
.confirm-check{animation:checkpop .4s ease-out 1.1s both}
@keyframes drawcircle{to{stroke-dashoffset:0}}
@keyframes drawcheck{to{stroke-dashoffset:0}}
@keyframes checkpop{
  0%{transform:scale(1)}
  40%{transform:scale(1.12)}
  100%{transform:scale(1)}
}
.recap{
  background:rgba(23,17,48,.5);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 28px;margin:24px auto;max-width:460px;
}
.recap div{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px dashed rgba(232,195,126,.15);font-size:.93rem}
.recap div:last-child{border:0}
.recap b{color:var(--gold-2);font-weight:500}
#restart{margin-top:8px}

/* ---------- États du calendrier (alimenté par l'API) ---------- */
.cal-loading{grid-column:1 / -1;padding:26px;text-align:center;color:var(--ink-soft);font-size:.85rem}
.cal-day.full{color:rgba(232,121,138,.5);text-decoration:line-through}
.cal-day.open{border-color:rgba(95,212,196,.25)}

/* ---------- Logo de soin (uploadé depuis l'espace praticien) ---------- */
.card-logo{
  width:54px;height:54px;border-radius:14px;object-fit:cover;margin:6px;
  box-shadow:0 0 26px rgba(155,127,212,.4);
}
.gem-moonstone{background:linear-gradient(135deg,#ffffff,#cfd6f2 55%,#9aa8e0);color:rgba(207,214,242,.55)}

/* ---------- Encart règlement (étape 3) ---------- */
.payment-info{
  padding:16px 20px;margin-bottom:24px;border-radius:12px;font-size:.9rem;line-height:1.6;
  border:1px solid var(--line);background:rgba(232,195,126,.08);color:var(--ink-soft);
}
.payment-info strong{color:var(--gold-2)}
.payment-info em{color:var(--turquoise);font-style:normal;font-size:.84rem}
.payment-info.visio{border-color:rgba(95,212,196,.4);background:rgba(95,212,196,.07)}

/* ---------- Message d'erreur de réservation ---------- */
.booking-error{
  display:none;padding:12px 18px;margin-bottom:22px;border-radius:12px;font-size:.9rem;
  background:rgba(232,121,138,.12);border:1px solid rgba(232,121,138,.5);color:#e8798a;
}
.booking-error.show{display:block;animation:panelin .3s ease}

/* ---------- Lien espace praticien ---------- */
.admin-link{color:rgba(182,172,214,.5);text-decoration:none}
.admin-link:hover{color:var(--gold)}

/* ---------- Footer ---------- */
footer{position:relative;z-index:1;border-top:1px solid var(--line);padding:70px 5vw 30px;background:rgba(23,17,48,.6)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:50px}
.foot-logo{width:70px;border-radius:50%;margin-bottom:16px;box-shadow:0 0 24px rgba(155,127,212,.4)}
footer h4{font-family:var(--font-display);font-size:1.2rem;color:var(--gold-2);margin-bottom:14px}
footer p{color:var(--ink-soft);font-size:.92rem;margin-bottom:10px}
.legal{text-align:center;margin-top:50px;font-size:.78rem;color:rgba(182,172,214,.5)}

/* ---------- Bouton "Découvrir le cabinet" / "Voir mon diplôme" ---------- */
.reveal-actions{
  margin-top:28px;display:flex;flex-wrap:wrap;gap:14px;
}
.btn-cabinet{
  display:inline-flex;align-items:center;gap:10px;
  position:relative;z-index:2; /* évite tout recouvrement par un élément décoratif voisin */
  cursor:pointer;
  touch-action:manipulation; /* supprime le délai/zoom tactile qui peut gêner le tap sur iOS */
  -webkit-tap-highlight-color:rgba(232,195,126,.25);
}
.btn-cabinet-icon{
  color:var(--gold);font-size:.95rem;
  animation:sparkle 2.6s ease-in-out infinite;
}
@keyframes sparkle{
  0%,100%{opacity:.6;transform:scale(1) rotate(0deg)}
  50%{opacity:1;transform:scale(1.2) rotate(15deg)}
}

/* ---------- Modale diplôme (image unique, sans carrousel) ---------- */
.diploma-box{max-width:640px}
.diploma-frame{
  border-radius:14px;overflow:hidden;background:#0d0920;
  border:1px solid rgba(232,195,126,.3);
}
.diploma-frame img{
  width:100%;height:auto;display:block;max-height:72vh;object-fit:contain;background:#f3ead6;
}
.cabinet-caption.center{text-align:center;width:100%;padding-top:16px}

/* ---------- Modale carrousel : photos du cabinet ---------- */
.cabinet-modal{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;
  padding:5vh 4vw;
}
.cabinet-modal-backdrop{
  position:absolute;inset:0;
  background:rgba(10,6,24,.86);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .4s ease;
}
.cabinet-modal.open .cabinet-modal-backdrop{opacity:1}

.cabinet-modal-box{
  position:relative;z-index:1;width:100%;max-width:880px;
  background:linear-gradient(180deg, rgba(34,26,69,.92), rgba(23,17,48,.96));
  border:1px solid var(--line);border-radius:26px;
  padding:22px 22px 26px;
  box-shadow:0 40px 120px rgba(0,0,0,.6), 0 0 60px rgba(155,127,212,.15);
  opacity:0;transform:scale(.92) translateY(18px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.3,1.2);
}
.cabinet-modal.open .cabinet-modal-box{opacity:1;transform:scale(1) translateY(0)}

.cabinet-close{
  position:absolute;top:-16px;right:-16px;z-index:3;
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(120deg,var(--gold),var(--gold-2));
  border:3px solid var(--bg-2);color:#2a1c0a;
  font-size:1.4rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:transform .25s ease;
}
.cabinet-close:hover{transform:rotate(90deg) scale(1.08)}

.cabinet-carousel{
  position:relative;border-radius:18px;overflow:hidden;
  background:#0d0920;
  aspect-ratio:4/3;
}
.cabinet-track{
  display:flex;height:100%;
  transition:transform .55s cubic-bezier(.65,0,.35,1);
}
.cabinet-slide{
  flex:0 0 100%;height:100%;margin:0;position:relative;overflow:hidden;
}
.cabinet-slide img{
  width:100%;height:100%;object-fit:cover;display:block;
  animation:cabinetzoom 9s ease-in-out infinite alternate;
}
@keyframes cabinetzoom{
  0%{transform:scale(1)}
  100%{transform:scale(1.06)}
}
.cabinet-slide::after{ /* voile subtil pour unifier avec la charte sombre */
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(23,17,48,0) 55%, rgba(23,17,48,.55) 100%);
  pointer-events:none;
}

.cabinet-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;
  background:rgba(23,17,48,.55);backdrop-filter:blur(6px);
  border:1px solid rgba(232,195,126,.4);color:var(--gold-2);
  font-size:1.5rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s, transform .25s, border-color .25s;
  z-index:2;
}
.cabinet-nav:hover{background:rgba(232,195,126,.18);border-color:var(--gold);transform:translateY(-50%) scale(1.08)}
.cabinet-nav.prev{left:16px}
.cabinet-nav.next{right:16px}

.cabinet-footer{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 8px 4px;
}
.cabinet-caption{
  font-family:var(--font-display);font-style:italic;font-size:1.05rem;
  color:var(--ink-soft);flex:1;
}
.cabinet-dots{display:flex;gap:9px}
.cabinet-dots button{
  width:9px;height:9px;border-radius:50%;border:0;
  background:var(--line);cursor:pointer;transition:.3s;padding:0;
}
.cabinet-dots button.active{background:var(--gold);transform:scale(1.35)}

@media (max-width:640px){
  .reveal-actions{flex-direction:column;align-items:stretch}
  .cabinet-modal-box{padding:16px 14px 20px;border-radius:20px}
  .cabinet-carousel{aspect-ratio:3/4}
  .cabinet-footer{flex-direction:column;align-items:flex-start;gap:12px}
  .cabinet-nav{width:38px;height:38px;font-size:1.25rem}
  .cabinet-close{top:-14px;right:-10px;width:36px;height:36px;font-size:1.2rem}
}

/* ---------- Musique d'ambiance ---------- */
#music-toggle{
  position:fixed;bottom:22px;right:22px;z-index:60;
  bottom:calc(22px + env(safe-area-inset-bottom));
  right:calc(22px + env(safe-area-inset-right));
  width:52px;height:52px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);color:var(--gold);font-size:1.3rem;
  background:rgba(34,26,69,.85);backdrop-filter:blur(10px);
  box-shadow:0 8px 26px rgba(0,0,0,.4);
  transition:transform .3s, box-shadow .3s, color .3s;
}
#music-toggle:hover{transform:scale(1.1);box-shadow:0 0 26px rgba(232,195,126,.4)}
#music-toggle.playing{animation:musicpulse 2.4s ease-in-out infinite}
#music-toggle.muted{color:var(--ink-soft);opacity:.7}
#music-toggle.muted::after{
  content:"";position:absolute;left:12px;right:12px;top:50%;height:2px;
  background:var(--ink-soft);transform:rotate(-40deg);border-radius:2px;
}
@keyframes musicpulse{
  0%,100%{box-shadow:0 8px 26px rgba(0,0,0,.4)}
  50%{box-shadow:0 8px 26px rgba(0,0,0,.4), 0 0 0 12px rgba(232,195,126,0)}
}

/* ============================================================
   MOBILE — Affichage et performance
   Une section unique pour toutes les adaptations petits écrans,
   du plus large au plus étroit, plus un palier dédié qui allège
   les effets coûteux (flou, animations en boucle, canvas) pour
   les appareils modestes — certains Android d'entrée de gamme
   ralentissaient, voire se bloquaient, avec tous les effets actifs.
   ============================================================ */

/* --- ≤ 900px : navigation et mise en page générale --- */
@media (max-width: 900px){
  .moon{width:100px;height:100px;left:auto;right:6%;top:20%;opacity:.5}
  .owl-scene{width:120px;right:auto;left:3%;top:12%;opacity:.55}
  .split{grid-template-columns:1fr;gap:60px}
  #nav nav, .nav-cta{display:none}
  #burger{display:flex}
  #nav nav.open{
    display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    background:rgba(23,17,48,.97);padding:26px 5vw;gap:18px;border-bottom:1px solid var(--line);
    max-height:calc(100svh - 70px);overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .foot-grid{grid-template-columns:1fr;gap:36px}
  .hero-badges div{padding:0 18px}
  .cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
}

/* --- ≤ 780px : mode performance ---
   Le flou (backdrop-filter) et plusieurs animations d'ambiance
   perpétuelles sont coûteux à recalculer à chaque image sur un
   GPU mobile modeste, surtout combinés entre eux. On les retire
   ou on les simplifie ici, sans changer l'apparence générale du
   site : les couleurs et halos restent, seule leur animation ou
   leur flou disparaît. */
@media (max-width: 780px){
  /* Aplats à la place du flou (même rendu visuel, sans le coût GPU) */
  #nav.scrolled{background:rgba(23,17,48,.96);backdrop-filter:none}
  #nav nav.open{backdrop-filter:none}
  .login-box{background:rgba(34,26,69,.96);backdrop-filter:none}
  .booking{background:rgba(34,26,69,.9);backdrop-filter:none}
  .cabinet-modal-backdrop, .diploma-modal .cabinet-modal-backdrop{background:rgba(10,6,24,.92);backdrop-filter:none}
  .stone-info{backdrop-filter:none}
  #music-toggle{backdrop-filter:none;background:rgba(34,26,69,.95)}
  .portrait-card{backdrop-filter:none;background:rgba(34,26,69,.94)}

  /* Poussière d'étoiles : canvas + boucle d'animation continue coupés
     (également désactivés côté JS pour économiser le CPU, pas seulement l'affichage) */
  #stardust{display:none}

  /* Aurore : conservée mais figée et moins floutée (le blur() sur une
     grande surface est l'un des filtres les plus coûteux en mobile) */
  .aurora{animation:none;filter:blur(18px);opacity:.4}

  /* Halo du portrait : on retire la rotation continue et on réduit le flou */
  .portrait-halo{animation:none;filter:blur(18px)}

  /* Pierres : le halo lumineux (couleur) reste, la pulsation continue est coupée */
  .card-gem{animation:none}
  .gem-amethyst, .gem-quartz, .gem-turquoise, .gem-moonstone, .gem-labradorite{}

  /* Lune et chouette décoratives : visibles mais figées (déjà réduites en
     opacité par les règles ≤900px ci-dessus) */
  .moon{animation:none}
  .owl-sway, .owl-body, .leaves{animation:none}

  /* Carrousel du cabinet : zoom conservé mais ralenti, moins de repaints */
  .cabinet-slide img{animation-duration:20s}

  /* Loader plein écran : évite l'orbe animée en continu si jamais le
     chargement traîne sur une connexion mobile lente */
  .loader-orb, .loader-moon{animation-duration:3.6s}
}

/* --- ≤ 600px : formulaires, réservation --- */
@media (max-width: 600px){
  .owl-scene{display:none}
  .fields-2, .mode-choice{grid-template-columns:1fr}
  .booking{padding:26px 18px}
  .steps .step-ind span{display:none}
  .hero-badges{flex-wrap:wrap;gap:16px}
  .hero-badges div{border:0}
  .cal-grid{gap:4px}
  .cal-day{padding:8px 0;font-size:.85rem}
  .slot{padding:8px 14px;font-size:.85rem}
}

/* --- ≤ 420px : très petits écrans (iPhone SE et similaires) --- */
@media (max-width: 420px){
  .hero-logo{width:110px}
  .hero-actions{flex-direction:column;width:100%}
  .hero-actions .btn{width:100%;text-align:center}
  .hero-badges{gap:10px}
  .hero-badges div{padding:0 10px}
  .hero-badges strong{font-size:1.5rem}
  .section{padding:80px 5vw}
  .mode-choice{gap:12px}
  .stones{gap:22px}
  .stone-shape{width:64px;height:60px}
}

/* --- Confort tactile : cibles de tap plus généreuses --- */
@media (hover: none) and (pointer: coarse){
  .btn{padding:13px 24px}
  .cabinet-dots button, .dots button{width:12px;height:12px}
  .slot, .cal-day{min-height:40px}
}

/* ---------- Accessibilité et préférence système "mouvement réduit" ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  #stardust, .aurora{display:none}
}