/* Pages activités Kiné+ : hero sombre avec "orbe" animée, puis sections claires. Accent par catégorie via --acc. */
:root{
  --bg:#F7F5FB; --surface:#FFFFFF; --ink:#1D1940; --muted:#5F5A7A; --line:#E3DEEF;
  --violet:#6B3FA0; --soft:#EEE8F7; --hero:#17143A; --hero-fg:#F4F0FF; --hero-muted:#B9B1DA; --gold:#C9A45C;
  --acc:#A58BF5; --glow:rgba(140,110,240,.45);
  --display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#110F26; --surface:#1A1736; --ink:#EEEAFB; --muted:#A49DC6; --line:#2C2852;
  --violet:#B48CE6; --soft:#231F45; --hero:#0B0A1C; --gold:#D9B977; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#110F26; --surface:#1A1736; --ink:#EEEAFB; --muted:#A49DC6; --line:#2C2852;
  --violet:#B48CE6; --soft:#231F45; --hero:#0B0A1C; --gold:#D9B977; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--hero)}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;line-height:1.05;text-wrap:balance}
h2{font-size:clamp(2rem,4.4vw,3.2rem);letter-spacing:-.01em}
h2 em{font-style:italic;color:var(--violet)}
p{margin:0}
.eyebrow{font-size:.76rem;text-transform:uppercase;letter-spacing:.16em;font-weight:600;color:var(--violet)}
section{padding-block:clamp(60px,8vw,104px)}

/* NAV */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--hero) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.07)}
.nav .wrap{display:flex;align-items:center;gap:20px;height:76px}
.logo{height:60px;display:block}.logo img{height:100%;width:auto;display:block}
.nav .back{margin-left:auto;color:var(--hero-muted);text-decoration:none;font-size:.92rem;font-weight:500;display:inline-flex;gap:8px;align-items:center}
.nav .back:hover{color:var(--hero-fg)}
.btn{display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:13px 22px;font-weight:600;font-size:.95rem;text-decoration:none;border:0;cursor:pointer;font-family:var(--body);transition:transform .25s,box-shadow .25s,background .25s}
.btn svg{width:18px;height:18px}
.btn-wa{background:#25D366;color:#06301A}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(37,211,102,.7)}
.btn-ghost{color:var(--hero-fg);border:1px solid rgba(255,255,255,.25)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.nav .btn{padding:9px 16px;font-size:.88rem}
@media (max-width:640px){.nav .back span{display:none}}

/* HERO */
.hero{background:var(--hero);color:var(--hero-fg);position:relative;overflow:hidden;padding-block:clamp(40px,6vw,80px) clamp(70px,9vw,120px)}
.hero::before{content:"";position:absolute;width:900px;height:900px;right:-300px;top:-380px;background:radial-gradient(closest-side,var(--glow),transparent);pointer-events:none;animation:breathe 9s ease-in-out infinite}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--acc),transparent);opacity:.5}
@keyframes breathe{50%{transform:scale(1.12) translate(-30px,20px)}}
.crumbs{position:relative;z-index:2;font-size:.82rem;color:var(--hero-muted);display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(28px,4vw,48px)}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--hero-fg)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center}
.cat{display:inline-flex;align-items:center;gap:10px;font-size:.76rem;text-transform:uppercase;letter-spacing:.16em;font-weight:600;color:var(--acc)}
.cat::before{content:"";width:28px;height:1px;background:currentColor}
.hero h1{font-size:clamp(2.7rem,7vw,5.6rem);font-weight:400;letter-spacing:-.025em;margin-top:20px}
.hero h1 .w{display:inline-block;animation:wordIn .9s cubic-bezier(.2,.8,.2,1) both}
.hero h1 em{font-style:italic;color:var(--acc)}
@keyframes wordIn{from{transform:translateY(.45em) rotate(2deg);filter:blur(6px)}to{transform:none;filter:none}}
.hero .lead{color:var(--hero-muted);font-size:1.12rem;max-width:34em;margin-top:24px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

.orb{position:relative;aspect-ratio:1/1;width:100%;max-width:420px;margin-inline:auto;transition:transform .3s ease-out}
.orb .ring{position:absolute;inset:0;border-radius:50%;border:1px dashed color-mix(in srgb,var(--acc) 55%,transparent);animation:spin 40s linear infinite}
.orb .ring.r2{inset:12%;border-style:solid;border-color:color-mix(in srgb,var(--acc) 25%,transparent);animation-duration:26s;animation-direction:reverse}
.orb .ring.r3{inset:24%;border:0;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--acc) 30%,transparent),rgba(255,255,255,.02) 70%);box-shadow:0 0 80px -10px var(--glow),inset 0 0 40px rgba(255,255,255,.05)}
.orb .ring.r2::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--acc);top:-6px;left:50%;box-shadow:0 0 18px var(--acc)}
.orb .ring.r1::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--hero-fg);bottom:14%;left:6%;opacity:.7}
@keyframes spin{to{transform:rotate(360deg)}}
.orb svg.big{position:absolute;inset:34%;width:32%;height:32%;stroke:var(--hero-fg);overflow:visible}
.orb svg.big use{stroke-dasharray:120;stroke-dashoffset:120;animation:draw 2.4s cubic-bezier(.6,.05,.2,1) .4s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.orb .tagf{position:absolute;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--hero-fg);font-size:.8rem;font-weight:500;padding:8px 14px;border-radius:999px;white-space:nowrap;animation:float 6s ease-in-out infinite}
.orb .t1{top:8%;right:-2%}.orb .t2{bottom:14%;left:-4%;animation-delay:-2s}.orb .t3{bottom:-2%;right:12%;animation-delay:-4s}
@keyframes float{50%{transform:translateY(-10px)}}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}.orb{max-width:300px}.orb .t1{right:0}.orb .t2{left:0}}

/* MARQUEE */
.ticker{background:var(--ink);color:var(--bg);overflow:hidden;padding-block:16px;white-space:nowrap}
.ticker-track{display:inline-flex;gap:38px;animation:scroll 34s linear infinite;font-family:var(--display);font-style:italic;font-size:1.3rem}
.ticker-track span::after{content:"✦";font-style:normal;margin-left:38px;color:var(--acc);font-size:.8rem;vertical-align:middle}
@keyframes scroll{to{transform:translateX(-50%)}}

/* POUR QUI */
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:start}
.split .side{position:sticky;top:110px}
.split .side p{color:var(--muted);margin-top:16px;max-width:28em}
.who{list-style:none;margin:0;padding:0;display:grid;gap:0}
.who li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;padding:20px 4px;border-bottom:1px solid var(--line);font-size:1.12rem;transition:padding .3s,background .3s}
.who li:first-child{border-top:1px solid var(--line)}
.who li:hover{padding-left:16px;background:linear-gradient(90deg,var(--soft),transparent)}
.who li::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--violet);transform:translateY(-2px)}
@media (max-width:820px){.split{grid-template-columns:1fr}.split .side{position:static}}

/* BIENFAITS */
.benef{background:var(--surface);border-block:1px solid var(--line)}
.b-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:44px}
.b-card{position:relative;padding:32px 28px;border-radius:22px;background:var(--bg);border:1px solid var(--line);overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;transform-style:preserve-3d}
.b-card::after{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--acc) 22%,transparent),transparent 45%);opacity:0;transition:opacity .3s;pointer-events:none}
.b-card:hover{box-shadow:0 30px 60px -30px rgba(40,20,90,.35)}
.b-card:hover::after{opacity:1}
.b-card .big{font-family:var(--display);font-style:italic;font-size:2.2rem;color:var(--violet);line-height:1}
.b-card p{color:var(--muted);margin-top:14px}
@media (max-width:820px){.b-grid{grid-template-columns:1fr}}

/* SEANCE */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:52px;position:relative}
.steps::before{content:"";position:absolute;top:27px;left:28px;right:28px;height:2px;background:linear-gradient(90deg,var(--violet),var(--acc));transform-origin:left;animation:grow 1.6s cubic-bezier(.6,.05,.2,1) .2s both;opacity:.5}
@keyframes grow{from{transform:scaleX(0)}}
.step{position:relative;display:grid;gap:10px;align-content:start}
.step .n{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:2px solid var(--violet);font-family:var(--display);font-style:italic;font-size:1.5rem;color:var(--violet);position:relative;z-index:1;transition:background .3s,color .3s}
.step:hover .n{background:var(--violet);color:var(--bg)}
.step h3{font-size:1.4rem;margin-top:8px}
.step p{color:var(--muted);font-size:.95rem}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr;row-gap:36px}.steps::before{display:none}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* PRIX */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:40px}
.pr{border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:26px;display:grid;gap:6px}
.pr.best{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.pr .v{font-family:var(--display);font-size:2.4rem;font-variant-numeric:tabular-nums}
.pr .d{color:var(--muted);font-size:.9rem}
.pr .n{font-weight:600}
.note{font-size:.8rem;color:var(--muted);margin-top:14px}
@media (max-width:760px){.prices{grid-template-columns:1fr}}

/* PRATICIENNE */
.pract{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,5vw,64px);align-items:center}
.pract figure{margin:0;border-radius:26px;overflow:hidden;aspect-ratio:1/1;max-width:100%;position:relative;background:#fff}
.pract figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.pract figure:hover img{transform:scale(1.05)}
.pract .lead{color:var(--muted);margin-top:16px;max-width:32em}
.pract.machine figure{aspect-ratio:4/5;max-width:380px}
.btn-dark{background:var(--ink);color:var(--bg)}
.btn-dark:hover{transform:translateY(-2px)}
@media (max-width:820px){.pract{grid-template-columns:1fr}.pract figure{max-width:340px}}


/* HERO PHOTO (machine) */
.pstack{position:relative;width:100%;max-width:440px;margin-inline:auto;aspect-ratio:1/1.08;transition:transform .3s ease-out}
.pstack .ring{position:absolute;inset:-6%;border-radius:50%;border:1px dashed color-mix(in srgb,var(--acc) 55%,transparent);animation:spin 40s linear infinite}
.pstack figure{position:absolute;margin:0;border-radius:24px;overflow:hidden;box-shadow:0 30px 70px -20px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.12)}
.pstack figure img{width:100%;height:100%;object-fit:cover;display:block}
.pstack .p-main{inset:0 22% 0 0;animation:inL 1.1s cubic-bezier(.2,.8,.2,1) .2s both}
.pstack .p-side{width:46%;aspect-ratio:3/4;right:0;bottom:-6%;transform:rotate(5deg);animation:inR 1.1s cubic-bezier(.2,.8,.2,1) .45s both}
@keyframes inL{from{transform:translateY(30px) rotate(-4deg)}}
@keyframes inR{from{transform:translate(30px,30px) rotate(12deg)}}
.pstack .tagf{z-index:2}
.pstack .t1{top:6%;right:-2%}.pstack .t2{top:46%;left:-6%}.pstack .t3{bottom:-2%;left:8%}
@media (max-width:860px){.pstack{max-width:330px;margin-top:10px}.pstack .t2{left:0}}

/* TECHNOLOGIES */
.t-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:44px}
.t-card{position:relative;padding:28px 24px;border-radius:22px;background:var(--surface);border:1px solid var(--line);display:grid;gap:12px;align-content:start;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s}
.t-card::before{content:"";position:absolute;inset:auto -30% -60% auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 30%,transparent),transparent);transition:transform .5s}
.t-card:hover{transform:translateY(-6px);border-color:var(--violet)}
.t-card:hover::before{transform:scale(1.6)}
.t-card .ic{width:52px;height:52px;border-radius:16px;background:var(--soft);display:grid;place-items:center;position:relative}
.t-card .ic svg{width:26px;height:26px;stroke:var(--violet)}
.t-card h3{font-size:1.5rem;position:relative}
.t-card p{color:var(--muted);font-size:.95rem;position:relative}
@media (max-width:980px){.t-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.t-grid{grid-template-columns:1fr}}

/* GALERIE */
.gal{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px;margin-top:40px}
.g{position:relative;padding:0;border:0;border-radius:20px;overflow:hidden;cursor:zoom-in;background:var(--soft);aspect-ratio:3/4;font:inherit}
.g1{grid-row:1/3;aspect-ratio:auto}
.g4{grid-column:2/4;aspect-ratio:16/9}
.g img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.g:hover img{transform:scale(1.07)}
.g span{position:absolute;inset:auto 0 0;padding:28px 16px 14px;color:#fff;font-size:.86rem;font-weight:600;text-align:left;background:linear-gradient(to top,rgba(15,12,40,.85),transparent)}
@media (max-width:760px){.gal{grid-template-columns:1fr 1fr;grid-template-rows:auto}.g1{grid-row:auto;grid-column:1/3;aspect-ratio:4/5}.g4{grid-column:1/3;aspect-ratio:16/10}.g2,.g3{aspect-ratio:3/4}}
.lb{border:0;padding:0;background:transparent;max-width:min(92vw,720px);max-height:92vh;overflow:visible}
.lb::backdrop{background:rgba(10,8,28,.88);backdrop-filter:blur(6px)}
.lb img{display:block;max-width:100%;max-height:82vh;border-radius:18px;margin:0 auto}
.lb p{color:#fff;text-align:center;margin-top:12px;font-weight:500}
.lb-x{position:absolute;top:-14px;right:-14px;width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:#17143A;font-size:1.5rem;line-height:1;cursor:pointer;z-index:2}

/* BLOC RÉSERVATION */
.book{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:28px;align-items:center;padding:clamp(28px,4vw,48px);border-radius:28px;background:linear-gradient(135deg,var(--hero),color-mix(in srgb,var(--hero) 70%,var(--acc)));color:var(--hero-fg);position:relative;overflow:hidden}
.book::after{content:"";position:absolute;width:420px;height:420px;right:-120px;top:-180px;border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent);animation:breathe 9s ease-in-out infinite}
.book > *{position:relative;z-index:1}
.book .eyebrow{color:var(--acc)}
.book h2 em{color:var(--acc)}
.book p:not(.eyebrow){color:var(--hero-muted);margin-top:12px;max-width:32em}
.book-act{display:grid;gap:12px;justify-items:start}
.book-act span{color:var(--hero-muted);font-size:.9rem}
.book-act b{color:var(--hero-fg);user-select:all}
@media (max-width:820px){.book{grid-template-columns:1fr}}

/* PRECAUTIONS + FAQ */
.warn{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:24px 26px;border-radius:20px;background:var(--soft);border:1px solid var(--line);margin-top:0}
.warn svg{width:26px;height:26px;stroke:var(--violet)}
.warn b{display:block;margin-bottom:4px}
.warn p{color:var(--muted)}
.faq{margin-top:36px;display:grid;gap:10px}
.faq details{border:1px solid var(--line);border-radius:16px;background:var(--surface);transition:border-color .3s}
.faq details[open]{border-color:var(--violet)}
.faq summary{cursor:pointer;list-style:none;padding:20px 22px;font-weight:600;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:1.6rem;line-height:1;color:var(--violet);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 22px 20px;color:var(--muted)}

/* RELATED */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:40px}
.rel a{position:relative;display:grid;gap:12px;padding:26px;border-radius:22px;background:var(--surface);border:1px solid var(--line);text-decoration:none;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s}
.rel a:hover{transform:translateY(-6px);border-color:var(--violet)}
.rel .ic{width:48px;height:48px;border-radius:14px;background:var(--soft);display:grid;place-items:center}
.rel .ic svg{width:24px;height:24px;stroke:var(--violet)}
.rel h3{font-size:1.5rem}
.rel small{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:700}
.rel .arrow{font-weight:600;color:var(--violet);font-size:.9rem}
.rel a:hover .arrow{text-decoration:underline}
@media (max-width:820px){.rel{grid-template-columns:1fr}}

/* CTA + FOOTER */
.cta{background:var(--hero);color:var(--hero-fg);position:relative;overflow:hidden;text-align:left}
.cta::before{content:"";position:absolute;width:700px;height:700px;left:-200px;bottom:-400px;background:radial-gradient(closest-side,var(--glow),transparent)}
.cta .wrap{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:28px}
.cta h2{font-size:clamp(2.2rem,5vw,4rem);font-weight:400}
.cta h2 em{color:var(--acc)}
.cta p{color:var(--hero-muted);margin-top:12px}
footer{background:var(--hero);color:var(--hero-muted);padding-block:36px;font-size:.88rem;border-top:1px solid rgba(255,255,255,.08)}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
footer img{height:56px;width:auto;display:block}

.fab{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;width:58px;height:58px;border-radius:50%;background:#25D366;color:#06301A;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(37,211,102,.7);animation:pop .6s 1.2s both}
.fab svg{width:28px;height:28px}
@keyframes pop{from{transform:scale(0)}}

.rv.in{animation:rv .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes rv{from{transform:translateY(26px);opacity:.35}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.orb svg.big use{stroke-dashoffset:0}}