/* Mondo Gira : styles du site */

:root{
  --canvas:#16131d;
  --canvas-green:#1d5843;
  --paper:#efebe2;
  --panel:#221e2b;
  --accent:#f2552c;
  --accent-hover:#ff6b43;
  --accent-muted:rgba(242,85,44,.35);
  --text-secondary:#b9b3c7;
  --text-primary:#f4f0e8;
  --ink:#1c1216;
  --line:#6d6680;
  --carbon:#f8de22; --oxygen:#b5ebf5; --nitrogen:#7c86d1; --pink:#ef97b5; --maroon:#6a1e17; --leaf:#2e8a5e;

  --f-display:"Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --f-body:"Literata", Georgia, "Times New Roman", serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;

  --ease-out:cubic-bezier(.22,.8,.24,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --gutter:clamp(20px, 5vw, 72px);
  --maxw:1240px;
  --tshadow:0 1px 2px rgba(5,5,10,.95), 0 3px 12px rgba(5,5,10,.78), 0 10px 44px rgba(5,5,10,.8);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary);font:400 1.0625rem/1.68 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;animation:page-in .9s var(--ease-out) both}
@keyframes page-in{from{opacity:0}to{opacity:1}}
img,svg,video,canvas{display:block;max-width:100%}
[hidden]{display:none!important}
img{height:auto}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:500}
sub{font-size:.62em;line-height:0;vertical-align:-.25em}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--accent);color:var(--ink);padding:10px 16px;border-radius:999px;font:500 1rem var(--f-display);text-decoration:none;transition:top .3s var(--ease-out)}
.skip:focus{top:12px}
main:focus{outline:none}

/* ---------- boutons et liens ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.7em 1.35em;border-radius:999px;border:0;font:500 1rem/1.2 var(--f-display);text-decoration:none;cursor:pointer;text-shadow:none;transition:background-color .35s var(--ease-out),transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.btn-accent{background:var(--accent);color:var(--ink)}
.btn-accent:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 8px 28px -10px var(--accent)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#3a2a30;transform:translateY(-1px)}
.text-link{font:500 1rem var(--f-display);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.3em;text-decoration-color:rgba(244,240,232,.45);transition:text-decoration-color .3s var(--ease-out)}
.text-link:hover{text-decoration-color:currentColor}
@media (pointer:coarse){.btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}.text-link{display:inline-flex;align-items:center;min-height:44px}}

/* ---------- décor fixe : un seul environnement ---------- */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--canvas)}
.env::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.05;mix-blend-mode:overlay}
.env i{position:absolute;width:36vmax;height:36vmax;border-radius:50%;opacity:.55;animation:drift 90s linear infinite;will-change:transform}
.env i:nth-child(1){left:-8vmax;top:8vh;background:radial-gradient(circle,rgba(124,134,209,.16),transparent 62%);animation-duration:96s;animation-delay:-12s}
.env i:nth-child(2){right:-10vmax;top:40vh;background:radial-gradient(circle,rgba(46,138,94,.13),transparent 62%);animation-duration:110s;animation-delay:-40s}
.env i:nth-child(3){left:30vw;bottom:-14vmax;background:radial-gradient(circle,rgba(239,151,181,.10),transparent 62%);animation-duration:84s;animation-delay:-25s}
.env i:nth-child(4){left:62vw;top:-12vmax;width:14vmax;height:14vmax;background:radial-gradient(circle,rgba(248,222,34,.10),transparent 62%);animation-duration:72s;animation-delay:-5s}
.env i:nth-child(5){left:12vw;top:62vh;width:10vmax;height:10vmax;background:radial-gradient(circle,rgba(181,235,245,.12),transparent 62%);animation-duration:68s;animation-delay:-31s}
.env i:nth-child(6){left:80vw;top:76vh;width:8vmax;height:8vmax;background:radial-gradient(circle,rgba(242,85,44,.08),transparent 62%);animation-duration:64s;animation-delay:-18s}
.env i:nth-child(7){left:46vw;top:30vh;width:6vmax;height:6vmax;background:radial-gradient(circle,rgba(248,222,34,.07),transparent 62%);animation-duration:80s;animation-delay:-50s}
@keyframes drift{0%{transform:translate(0,0)}25%{transform:translate(6vmax,-4vmax)}50%{transform:translate(2vmax,5vmax)}75%{transform:translate(-5vmax,1vmax)}100%{transform:translate(0,0)}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- navigation ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:clamp(12px,2.4vw,36px);height:72px;padding:0 var(--gutter);transition:background-color .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.nav::before{content:"";position:absolute;inset:0 0 -40px;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(10,9,16,.6),rgba(10,9,16,0));transition:opacity .5s var(--ease-out)}
.nav.solid{background:rgba(22,19,29,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(244,240,232,.08)}
.nav.solid::before{opacity:0}
.brand{display:flex;align-items:center;gap:.6em;text-decoration:none;font:500 1.2rem var(--f-display);letter-spacing:-.01em;text-shadow:0 1px 8px rgba(5,5,10,.6)}
.brand-mark{width:38px;height:38px;transition:transform .9s var(--ease-out)}
.brand:hover .brand-mark{transform:rotate(-30deg)}
.nav-links{margin-left:auto}
.nav-links ul{display:flex;align-items:baseline;gap:clamp(14px,2vw,30px);list-style:none;margin:0;padding:0}
.nav-links a{font:500 .98rem var(--f-display);text-decoration:none;text-shadow:0 1px 8px rgba(5,5,10,.7);opacity:.86;transition:opacity .3s var(--ease-out)}
.nav-links a:hover{opacity:1}
.nav-links .menu-cta{display:none}
.nav-cta{min-height:42px;padding:.55em 1.1em;font-size:.95rem}
.menu-btn{display:none;margin-left:auto;align-items:center;gap:.5em;min-height:44px;padding:0 .9em;border-radius:999px;border:1px solid rgba(244,240,232,.35);background:rgba(10,9,16,.4);font:500 .95rem var(--f-display);cursor:pointer}
.menu-bars{position:relative;width:16px;height:2px;background:currentColor;border-radius:2px;transition:background-color .3s}
.menu-bars::before,.menu-bars::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor;border-radius:2px;transition:transform .35s var(--ease-out)}
.menu-bars::before{top:-5px}.menu-bars::after{top:5px}
.menu-btn[aria-expanded="true"] .menu-bars{background:transparent}
.menu-btn[aria-expanded="true"] .menu-bars::before{transform:translateY(5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-bars::after{transform:translateY(-5px) rotate(-45deg)}

/* ---------- le voyage ---------- */
.hero{position:relative;height:1000vh;background:var(--canvas)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.poster{position:absolute;inset:0;background:radial-gradient(circle at 67% 50%,rgba(124,134,209,.28) 0,rgba(124,134,209,.08) 18%,transparent 36%),var(--canvas);background-size:cover;background-position:center}
.has-poster .poster{background:url("img/poster-voyage.jpg") 67% 50%/cover no-repeat,var(--canvas)}
#world{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.4s var(--ease-out);will-change:transform;transform:translateZ(0)}
.gl-ready #world{opacity:1}
.gl-failed #world{display:none}
.grain{position:absolute;inset:0;pointer-events:none;background:var(--grain);opacity:.07;mix-blend-mode:overlay}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 95% at 60% 48%,rgba(10,9,16,0) 40%,rgba(10,9,16,.55) 100%),linear-gradient(90deg,rgba(10,9,16,.42),rgba(10,9,16,.12) 42%,rgba(10,9,16,0) 62%)}
.crossing{position:absolute;inset:0;pointer-events:none;background:transparent}
.drops{position:absolute;inset:0;pointer-events:none;opacity:var(--drop,0)}
.drops i{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),rgba(215,240,247,.12) 45%,rgba(215,240,247,.04) 70%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22);transform:translateY(calc((1 - var(--drop,0)) * 60px))}
.drops i:nth-child(1){left:14%;top:18%;width:9vmin;height:10vmin}
.drops i:nth-child(2){left:62%;top:12%;width:6vmin;height:6.6vmin}
.drops i:nth-child(3){left:78%;top:52%;width:12vmin;height:13vmin}
.drops i:nth-child(4){left:34%;top:66%;width:5vmin;height:5.5vmin}
.drops i:nth-child(5){left:50%;top:38%;width:3vmin;height:3.3vmin}
.drops i:nth-child(6){left:8%;top:74%;width:7vmin;height:7.6vmin}

.band{position:absolute;left:var(--gutter);top:50%;z-index:2;width:min(38rem,44vw);transform:translateY(-46%);opacity:0;visibility:hidden;pointer-events:none;text-shadow:var(--tshadow)}
.band.on{visibility:visible;pointer-events:auto}
.band::before{content:"";position:absolute;inset:-22% -26% -22% -34%;z-index:-1;pointer-events:none;opacity:calc(.25 + .75 * var(--k,1));background:radial-gradient(ellipse 74% 64% at 44% 50%,rgba(8,7,12,.7) 0%,rgba(8,7,12,.52) 50%,rgba(8,7,12,0) 78%)}
.band.fx-blur::before{background:radial-gradient(ellipse 76% 66% at 44% 50%,rgba(8,7,12,.74) 0%,rgba(8,7,12,.56) 50%,rgba(8,7,12,0) 78%)}
.band .btn{text-shadow:none}
.line{margin:0 0 .5em;font:500 clamp(2rem,3.5vw,3.25rem)/1.08 var(--f-display);letter-spacing:-.015em;text-wrap:balance}
.h2,.band .sub,.result-name{text-wrap:balance}
.sec p{text-wrap:pretty}
.line.big{font-weight:300;font-size:clamp(2.6rem,5.2vw,4.9rem);line-height:1.02;letter-spacing:-.025em}
.band .sub{max-width:34ch;margin:0;font-size:clamp(1.05rem,1.25vw,1.22rem);line-height:1.58;color:#ece6f2}
.band .kick{margin:0 0 1.1em;font:500 1rem var(--f-display);color:var(--oxygen);letter-spacing:.01em}
.band .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:1.6em}
.split{display:inline}
.split .w{display:inline-block;white-space:nowrap}
.split .c{display:inline-block}

/* entrées : chacune fait écho à ce que fait la scène */
.fx-scatter .c,.fx-sediment .c{--kc:clamp(0, calc((var(--k,0) - var(--th,0)) * 2.6), 1);opacity:var(--kc);transform:translate(calc((1 - var(--kc)) * var(--jx,0px)),calc((1 - var(--kc)) * var(--jy,0px))) rotate(calc((1 - var(--kc)) * var(--jr,0deg)))}
.fx-drift .w{--kc:clamp(0, calc((var(--k,0) - var(--th,0)) * 2.8), 1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * -26px))}
.fx-rise .w,.fx-stage .w{--kc:clamp(0, calc((var(--k,0) - var(--th,0)) * 2.8), 1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * 28px))}
.fx-blur .line{position:relative}
.fx-blur .soft{position:absolute;left:0;top:0;right:0;filter:blur(10px);opacity:calc(1 - var(--k,0))}
.fx-blur .sharp{opacity:var(--k,0)}
.band .sub{--ks:clamp(0, calc((var(--k,0) - .45) * 2.5), 1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks)) * 10px))}
.fx-stage .kick{opacity:clamp(0, calc(var(--k,0) * 3), 1)}
.fx-stage .sub{--ks:clamp(0, calc((var(--k,0) - .62) * 4), 1)}
.fx-stage .cta-row{--kb:clamp(0, calc((var(--k,0) - .76) * 5), 1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb)) * 12px))}

.band-settle{width:min(40rem,46vw)}
.band-formula{left:67%;top:auto;bottom:max(7vh,36px);width:auto;transform:translateX(-50%);text-shadow:none}
.band-formula::before{display:none}
.formula{margin:0;padding:.55em 1.1em;border-radius:12px;font:400 clamp(.85rem,1vw,1rem)/1.4 var(--f-mono);color:var(--text-primary);background:rgba(8,8,15,.55);border:1px solid rgba(124,134,209,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap}

.static-hero{display:none}
.chapters{position:absolute;right:var(--gutter);top:50%;z-index:3;transform:translateY(-50%);transition:opacity .6s var(--ease-out)}
.chapters ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.chapters button{display:flex;align-items:center;gap:.6em;min-height:32px;padding:.25em .8em;border:0;border-radius:999px;background:rgba(8,8,15,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:500 .82rem var(--f-display);color:var(--text-secondary);cursor:pointer;transition:color .4s var(--ease-out),background-color .4s var(--ease-out)}
.chapters button::after{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.5;transition:transform .4s var(--ease-out),background-color .4s var(--ease-out),opacity .4s}
.chapters button:hover{color:var(--text-primary)}
.chapters button[aria-current="step"]{color:var(--text-primary);background:rgba(8,8,15,.62)}
.chapters button[aria-current="step"]::after{background:var(--accent);opacity:1;transform:scale(1.35)}
.chapters.off{opacity:0;pointer-events:none}
.cue{position:absolute;left:var(--gutter);bottom:max(5vh,28px);z-index:3;width:44px;height:44px;color:var(--text-primary);transition:opacity .6s var(--ease-out)}
.cue-ring{width:44px;height:44px}
.cue-load{stroke-dashoffset:var(--ld,95);transform-origin:center;animation:spin 1.4s linear infinite;transition:stroke-dashoffset .5s var(--ease-out)}
.gl-ready .cue-load,.gl-failed .cue-load{--ld:126;animation:none}
.cue-dot{position:absolute;left:50%;top:12px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--text-primary);opacity:0}
.gl-ready .cue-dot,.gl-failed .cue-dot{opacity:1;animation:cue 2.4s var(--ease-io) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:0}25%{opacity:1}70%{transform:translateY(16px);opacity:0}100%{transform:translateY(16px);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
.cue.off{opacity:0}

/* version fixe : animations désactivées */
.is-static .hero{height:auto}
.is-static .stage{position:relative;height:auto;min-height:100vh;min-height:100svh;display:flex;align-items:center}
.is-static #world,.is-static .band,.is-static .chapters,.is-static .cue,.is-static .crossing,.is-static .drops{display:none}
.is-static .poster{background:url("img/poster-terre.jpg") 67% 50%/cover no-repeat,radial-gradient(circle at 67% 50%,rgba(124,134,209,.28) 0,rgba(124,134,209,.08) 18%,transparent 36%),var(--canvas)}
.is-static .static-hero{display:block;position:relative;z-index:2;width:min(40rem,100%);margin:0 var(--gutter);padding:120px 0 80px;text-shadow:var(--tshadow)}
.static-hero .kick{margin:0 0 1em;font:500 1rem var(--f-display);color:var(--oxygen)}
.static-title{margin:0 0 .4em;font:300 clamp(2.6rem,5.4vw,5rem)/1.02 var(--f-display);letter-spacing:-.025em}
.static-hero .sub{max-width:36ch;font-size:1.15rem}
.static-hero .cta-row{margin-top:1.6em}
.static-hero .btn{text-shadow:none}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(96px,14vh,168px) var(--gutter)}
.sec > *{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.h2{font-weight:300;font-size:clamp(2.2rem,4.2vw,3.7rem);line-height:1.04;letter-spacing:-.022em;margin-bottom:.55em}
.lede{font-size:1.15rem;color:var(--text-secondary);max-width:46ch}

/* entrées des sections */
.reveal{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.reveal.settled{transition-delay:0s}

/* parcours */
.parcours-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);align-items:center}
.parcours-photo{margin:0;max-width:440px;border-radius:999px 999px 28px 28px;overflow:hidden;background:var(--panel);clip-path:inset(0 0 0 0 round 999px 999px 28px 28px)}
.parcours-photo.reveal{opacity:1;transform:none;clip-path:circle(0% at 50% 30%);transition:clip-path 1.4s var(--ease-out)}
.parcours-photo.reveal.in{clip-path:circle(120% at 50% 30%)}
.parcours-photo img{width:100%;aspect-ratio:840/1300;object-fit:cover;object-position:50% 0}
.parcours-text p{max-width:60ch}
.quote{margin:1.6em 0 0;padding:0 0 0 1.1em;border-left:3px solid var(--nitrogen)}
.quote p{margin:0;font:italic 400 clamp(1.4rem,2.2vw,1.9rem)/1.35 var(--f-body);color:var(--text-primary)}
.timeline-wrap{position:relative;margin-top:clamp(64px,9vh,110px)}
.timeline-bond{position:absolute;left:10%;right:10%;top:17px;width:80%;height:20px;overflow:visible}
.draw-line path{fill:none;stroke:#8a83a0;stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--draw,0))}
.timeline{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;list-style:none;margin:0;padding:0}
.timeline li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3em}
.tl-atom{width:34px;height:34px;margin-bottom:.7em;border-radius:50%;border:3px solid var(--ink);background:var(--oxygen);box-shadow:0 0 0 6px var(--canvas)}
.timeline li:nth-child(1) .tl-atom{background:var(--carbon)}
.timeline li:nth-child(3) .tl-atom{background:#8a3b1c}
.timeline li:nth-child(4) .tl-atom{background:var(--leaf)}
.tl-now{background:var(--accent)!important}
.timeline strong{font:500 1.02rem/1.3 var(--f-display)}
.timeline span:not(.tl-atom){color:var(--text-secondary);font-size:.98rem;line-height:1.45}

/* interventions */
.sec-offers{background:linear-gradient(to bottom,transparent,rgba(34,30,43,.6) 30%,rgba(34,30,43,.6) 70%,transparent)}
.offers-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(40px,6vh,72px)}
.offers-head .h2{margin:0}
.offers-head .lede{margin:0}
.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);list-style:none;margin:0 auto;padding:0}
.offer{display:flex;flex-direction:column;background:var(--panel);border-radius:28px;overflow:hidden;border:1px solid rgba(244,240,232,.07)}
.offer figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:#2b2636}
.offer img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.offer:hover img{transform:scale(1.04)}
.offer h3{margin:1.1rem 1.5rem .5rem;font-size:1.38rem;line-height:1.2}
.offer p{margin:0 1.5rem 1rem;font-size:1rem;line-height:1.6}
.offer .formats{margin-top:auto;margin-bottom:1.5rem;padding-top:1rem;border-top:1px solid rgba(244,240,232,.1);color:var(--text-secondary);font-size:.95rem}
.formats-label{display:block;margin-bottom:.2em;font:500 .9rem var(--f-display);color:var(--text-primary)}
.offers .offer:nth-child(2){--d:.12s}
.offers .offer:nth-child(3){--d:.24s}
.offers .offer.settled{transition-delay:0s}

/* limites planétaires */
.sec-limits{background:var(--canvas-green);overflow:hidden}
.sec-limits::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--grain);opacity:.09;mix-blend-mode:overlay}
.limits-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:center}
.wheel-wrap{display:flex;flex-direction:column;align-items:center;gap:28px}
.wheel-stage{position:relative;width:min(460px,100%);aspect-ratio:1}
.wheel{width:100%;height:100%;cursor:grab;touch-action:none;filter:drop-shadow(0 18px 30px rgba(6,20,14,.45))}
.wheel.dragging{cursor:grabbing}
.wheel-pointer{position:absolute;left:50%;top:-14px;z-index:2;width:34px;transform:translateX(-50%);filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.hub-glow{fill:rgba(248,222,34,.35);transform-origin:200px 200px;animation:breathe 5s var(--ease-io) infinite;animation-delay:-1.3s}
@keyframes breathe{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.7;transform:scale(1.25)}}
.sector-icon{fill:none;stroke:#f4f0e8;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.sector-icon .solid{fill:#f4f0e8;stroke:none}
.sector-text{font:500 15px var(--f-display);fill:#f4f0e8}
.limits-text{max-width:36rem}
.result{min-height:12.5rem;margin:1.6em 0 1.2em;padding:1.4rem 1.5rem;border-radius:22px;background:rgba(6,24,17,.42);border:1px solid rgba(244,240,232,.14)}
.result-empty{margin:0;color:#d8e8df;font-style:italic}
.result-card{animation:card-in .7s var(--ease-out) both}
@keyframes card-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.result-status{display:inline-flex;align-items:center;gap:.5em;margin:0 0 .6em;padding:.2em .8em;border-radius:999px;background:rgba(244,240,232,.92);color:var(--ink);font:500 .88rem var(--f-display)}
.result-status::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--dot,var(--accent))}
.result-name{font-size:1.6rem;line-height:1.15;margin:0 0 .4em}
.result-text{margin:0;color:#e9f1ec}
.tracker{display:flex;align-items:center;gap:14px;margin-bottom:1.4em;font:500 .95rem var(--f-display);color:#d8e8df}
.tracker-dots{display:flex;gap:6px}
.tracker-dots i{width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(244,240,232,.55);transition:background-color .5s var(--ease-out),border-color .5s,transform .5s var(--ease-out)}
.tracker-dots i.found{border-color:transparent;background:var(--dot);transform:scale(1.15)}
.bilan{font:500 1.2rem/1.4 var(--f-display);margin-bottom:.6em}
.source{font-size:.9rem;color:#cfe1d7}
.event{position:relative;display:flex;align-items:center;gap:clamp(18px,3vw,40px);margin-top:clamp(56px,8vh,96px)!important;padding:clamp(20px,3vw,32px) clamp(22px,3.5vw,44px);border-radius:28px;background:rgba(6,24,17,.5);border:1px solid rgba(244,240,232,.14)}
.event-date{display:flex;flex-direction:column;align-items:center;margin:0;min-width:5.5rem;padding:.6em .9em;border-radius:18px;background:var(--paper);color:var(--ink)}
.event-day{font:300 2.8rem/1 var(--f-display)}
.event-month{font:500 .85rem var(--f-display);white-space:nowrap}
.event-body p{margin:0 0 .4em;max-width:60ch}

/* livre */
.sec-book{background:var(--paper);color:var(--ink);overflow:hidden}
.sec-book .text-link{text-decoration-color:rgba(28,18,22,.4)}
.book-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,6vw,96px);align-items:center}
.book-visual{position:relative;padding-bottom:clamp(40px,8vw,110px)}
.book-main{margin:0;border-radius:26px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(28,18,22,.45)}
.book-main img{width:100%;aspect-ratio:16/10;object-fit:cover}
.book-app{position:absolute;right:-4%;bottom:0;width:48%;margin:0;border-radius:20px;overflow:hidden;border:6px solid var(--paper);box-shadow:0 24px 40px -20px rgba(28,18,22,.5);rotate:-3deg}
.book-app img{width:100%;aspect-ratio:16/10;object-fit:cover}
.book-main.reveal{transform:translateX(-28px)}
.book-app.reveal{transform:translate(24px,24px)}
.book-main.reveal.in,.book-app.reveal.in{transform:none}
.book-app.reveal{--d:.2s}
.book-sub{font:500 1.15rem var(--f-display);color:#6a1e17;margin-top:-.4em}
.book-text p{max-width:56ch}
.book-facts{list-style:none;margin:1.4em 0 1.8em;padding:0;display:grid;gap:.55em}
.book-facts li{display:flex;align-items:baseline;gap:.7em;font:500 1rem/1.4 var(--f-display)}
.book-facts li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--leaf);transform:translateY(-1px)}
.book-facts li:nth-child(2)::before{background:var(--nitrogen)}
.book-facts li:nth-child(3)::before{background:var(--pink)}
.book-facts li:nth-child(4)::before{background:var(--carbon)}
.sticker{position:absolute;z-index:1;pointer-events:none;animation:float 9s var(--ease-io) infinite;will-change:transform}
.sticker-hand{width:clamp(64px,6.5vw,104px);right:2.5vw;top:3vh;animation-delay:-2s}
.sticker-flower{width:clamp(80px,9vw,140px);left:2vw;bottom:24vh;animation-duration:11s;animation-delay:-6s}
.sticker-snake{width:clamp(110px,13vw,190px);right:7vw;bottom:6vh;animation-duration:13s;animation-delay:-4s}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(3deg)}}
.player{position:relative;z-index:2;max-width:980px!important;margin:clamp(64px,9vh,110px) auto 0}
.player-frame{position:relative;border-radius:28px;overflow:hidden;background:#141018;aspect-ratio:16/9;box-shadow:0 30px 60px -30px rgba(28,18,22,.5)}
.player-poster,.player-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player-video{object-fit:contain;background:#000}
.player-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.8em;min-height:56px;padding:.6em 1.4em .6em .7em;border:0;border-radius:999px;background:rgba(244,240,232,.94);color:var(--ink);font:500 1.05rem var(--f-display);cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .4s var(--ease-out),background-color .3s}
.player-btn:hover{transform:translate(-50%,-50%) scale(1.04)}
.player-icon{position:relative;width:42px;height:42px;border-radius:50%;background:var(--accent)}
.player-icon::after{content:"";position:absolute;left:16px;top:12px;border-left:14px solid var(--ink);border-top:9px solid transparent;border-bottom:9px solid transparent}
.player.playing .player-btn,.player.playing .player-poster{display:none}

/* étapes */
.steps-wrap{position:relative}
.steps-bond{position:absolute;left:12.5%;right:12.5%;top:38px;width:75%;height:20px;overflow:visible}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,40px);list-style:none;margin:clamp(24px,4vh,48px) 0 0;padding:0}
.step{display:flex;flex-direction:column;align-items:center;text-align:center}
.step-mol{width:120px;height:80px;margin-bottom:.6em;filter:drop-shadow(0 0 0 var(--canvas))}
.step-n{display:grid;place-items:center;width:30px;height:30px;margin-bottom:.7em;border-radius:50%;border:1.5px solid var(--line);font:500 .9rem var(--f-display);color:var(--text-secondary)}
.step h3{font-size:1.3rem;margin-bottom:.4em}
.step p{max-width:28ch;margin:0 auto;color:var(--text-secondary);font-size:1rem}
.step.reveal{transform:scale(.86)}
.step.reveal.in{transform:none}
.steps .step:nth-child(2){--d:.15s}
.steps .step:nth-child(3){--d:.3s}
.steps .step:nth-child(4){--d:.45s}
.steps .step.settled{transition-delay:0s}

/* questions */
.sec-faq{background:var(--panel)}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(30px,6vw,96px);align-items:start}
.faq-grid .h2{position:sticky;top:110px}
.faq details{border-bottom:1px solid rgba(244,240,232,.16)}
.faq details:first-child{border-top:1px solid rgba(244,240,232,.16)}
.faq summary{position:relative;display:flex;align-items:center;min-height:64px;padding:1.05rem 3rem 1.05rem 0;font:500 1.18rem/1.35 var(--f-display);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:16px;height:2px;background:var(--text-primary);border-radius:2px;transition:transform .45s var(--ease-out)}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::after{transform:rotate(0deg)}
.faq details p{margin:0 0 1.3rem;max-width:58ch;color:#ddd7e6}
.faq details[open] p{animation:card-in .5s var(--ease-out) both}

/* contact */
.sec-contact{background:radial-gradient(ellipse 60% 70% at 85% 30%,rgba(124,134,209,.12),transparent 70%)}
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,96px);align-items:start}
.contact-person{display:flex;align-items:center;gap:20px;margin-bottom:1.6em}
.contact-person img{flex:none;width:112px;height:112px;border-radius:50%;object-fit:cover;object-position:50% 30%;border:3px solid var(--oxygen)}
.contact-person p{margin:0;font-size:1.15rem;max-width:30ch}
.contact-direct{list-style:none;margin:0;padding:0;display:grid;gap:.5em;font:500 1.05rem var(--f-display)}
.contact-direct a{text-decoration:underline;text-decoration-color:rgba(244,240,232,.35);text-underline-offset:.3em}
.contact-direct a:hover{text-decoration-color:currentColor}
.form{padding:clamp(22px,3vw,40px);border-radius:28px;background:var(--panel);border:1px solid rgba(244,240,232,.08)}
.field{display:flex;flex-direction:column;gap:.4em;margin-bottom:1.1rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{font:500 .98rem var(--f-display)}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:.75em .95em;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--text-primary);font:400 1rem/1.4 var(--f-body);transition:border-color .3s var(--ease-out),background-color .3s}
.field textarea{resize:vertical;min-height:130px}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-primary) 50%),linear-gradient(135deg,var(--text-primary) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.6em}
.field select option{background:var(--panel);color:var(--text-primary)}
.field input::placeholder,.field textarea::placeholder{color:#8f889f}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#8a83a0}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.06)}
.field [aria-invalid="true"]{border-color:#ff8a5c}
.field-err{margin:0;color:#ffb39a;font-size:.92rem}
.form-send{width:100%;margin-top:.4rem}
.form-done{margin-top:1.2rem;padding:1.1rem 1.2rem;border-radius:18px;background:rgba(46,138,94,.2);border:1px solid rgba(46,138,94,.55);animation:card-in .6s var(--ease-out) both}
.form-done p{margin:0 0 .5em}
.form-done p:last-child{margin:0;color:var(--text-secondary)}
.form-done-title{font:500 1.05rem/1.4 var(--f-display);color:var(--text-primary)}
.copy-btn{margin-left:.4em;min-height:36px;padding:.2em .8em;border-radius:999px;border:1px solid var(--line);background:transparent;font:500 .9rem var(--f-display);cursor:pointer}
.copy-btn:hover{border-color:var(--text-primary)}

/* pied de page */
.foot{padding:48px var(--gutter) 56px;border-top:1px solid rgba(244,240,232,.08);color:var(--text-secondary);font-size:.95rem}
.foot p{max-width:var(--maxw);margin:0 auto .3em}
.foot-brand{font:500 1rem var(--f-display);color:var(--text-primary)}

/* ---------- écrans moyens ---------- */
@media (max-width:1024px){
  .nav-links ul{gap:16px}
  .chapters{display:none}
}
@media (max-width:900px){
  .nav-links{position:fixed;inset:72px 12px auto 12px;margin:0;padding:18px;border-radius:24px;background:rgba(22,19,29,.97);border:1px solid rgba(244,240,232,.1);box-shadow:0 30px 60px rgba(0,0,0,.4);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out),visibility 0s .35s}
  .nav-links.open{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
  .nav-links ul{flex-direction:column;align-items:stretch;gap:4px}
  .nav-links a{display:flex;align-items:center;min-height:48px;padding:0 12px;font-size:1.1rem;opacity:1;text-shadow:none}
  .nav-links .menu-cta{display:block;margin-top:8px}
  .nav-links .menu-cta .btn{width:100%}
  .nav-cta{display:none}
  .menu-btn{display:inline-flex}
  .parcours-grid,.offers-head,.limits-grid,.book-grid,.faq-grid,.contact-grid{grid-template-columns:minmax(0,1fr)}
  .parcours-photo{max-width:340px;margin:0 auto}
  .offers{grid-template-columns:minmax(0,1fr);max-width:560px}
  .faq-grid .h2{position:static}
  .book-visual{order:-1}
  .timeline-bond{display:none}
  .timeline::before{content:"";position:absolute;left:23px;top:6px;bottom:6px;width:2.5px;border-radius:2px;background:var(--line);transform-origin:top;transform:scaleY(var(--draw,0))}
  .timeline{grid-template-columns:minmax(0,1fr);gap:26px}
  .timeline li{flex-direction:row;flex-wrap:wrap;align-items:baseline;text-align:left;gap:.2em .8em;padding-left:56px;position:relative}
  .tl-atom{position:absolute;left:9px;top:-4px;width:30px;height:30px;margin:0}
  .timeline strong{flex-basis:100%}
  .steps-bond{display:none}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
  .limits-grid{row-gap:0}
  .limits-text{display:contents}
  .limits-text > h2{order:-2}
  .limits-text > h2 + p{order:-1}
  .limits-text > .result,.limits-text > .tracker,.limits-text > .bilan,.limits-text > .source{order:1}
  .wheel-wrap{margin:12px 0 8px}
}

/* ---------- format portrait : texte en bas, scène en haut ---------- */
@media (max-aspect-ratio:20/21){
  .band{left:20px;right:20px;top:auto;bottom:max(6svh,28px);width:auto;transform:none}
  .band::before{inset:-40% -20px -40% -20px;background:linear-gradient(to top,rgba(8,7,12,.82),rgba(8,7,12,.55) 55%,rgba(8,7,12,0))!important}
  .band-settle{width:auto}
  .line{font-size:clamp(1.75rem,7vw,2.6rem)}
  .line.big{font-size:clamp(2.2rem,9vw,3.4rem)}
  .band .sub{font-size:1.02rem}
  .band-formula{left:50%;right:auto;top:84px;bottom:auto;transform:translateX(-50%)}
  .scrim{background:radial-gradient(ellipse 120% 90% at 50% 35%,rgba(10,9,16,0) 40%,rgba(10,9,16,.5) 100%)}
  .cue{left:auto;right:20px;bottom:auto;top:84px}
}

/* ---------- téléphones ---------- */
@media (max-width:560px){
  .nav{height:64px}
  .brand{font-size:1.05rem}
  .brand-mark{width:32px;height:32px}
  .nav-links{inset:64px 10px auto 10px}
  .menu-label{display:none}
  .sec{padding-top:84px;padding-bottom:84px}
  .steps{grid-template-columns:minmax(0,1fr)}
  .field-row{grid-template-columns:minmax(0,1fr);gap:0}
  .event{flex-direction:column;align-items:flex-start}
  .book-app{width:56%;right:-2%}
  .sticker-hand,.sticker-flower{display:none}
  .contact-person{align-items:flex-start}
  .contact-person img{width:84px;height:84px}
  .formula{font-size:.8rem;padding:.45em .8em}
}

/* écrans bas : les petits éléments de la scène n'ont pas la place */
@media (max-height:560px){
  .chapters,.cue,.band-formula{display:none}
  .band{top:56%}
  .line{font-size:clamp(1.6rem,3vw,2.4rem)}
}

/* ---------- animations désactivées ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .reveal,.reveal.in{opacity:1!important;transform:none!important;clip-path:none!important}
  .parcours-photo.reveal{clip-path:inset(0 0 0 0 round 999px 999px 28px 28px)!important}
  .book-app.reveal{rotate:-3deg}
  .draw-line path{stroke-dashoffset:0!important}
  .timeline::before{transform:none!important}
}
.sticker,.hub-glow{animation-play-state:paused}
.vis .sticker,.vis .hub-glow{animation-play-state:running}
html.clean .band,html.clean .nav,html.clean .chapters,html.clean .cue,html.clean .skip{display:none!important}
html.audit #world{transition:none}
html.audit .poster{visibility:hidden}
html.audit .band .split,html.audit .band .sub,html.audit .band .kick,html.audit .band .cta-row,html.audit .formula,html.audit .nav,html.audit .chapters,html.audit .cue{visibility:hidden!important}
html.reduce .reveal{opacity:1;transform:none;clip-path:none;transition:none}
html.reduce .draw-line path{stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}