:root{
  --bg:#040706; --bg2:#08100d; --panel:#0b1512; --line:rgba(61,255,162,.12); --grid:rgba(61,255,162,.055);
  --acc:#3dffa2; --acc2:#14c77a; --teal:#0d3a35; --ink:#eaf6f0; --mute:#86a497; --dim:#4b6158;
  --f-d:"Unbounded",system-ui,sans-serif; --f-b:"Manrope",system-ui,sans-serif; --f-m:"JetBrains Mono",ui-monospace,monospace; --f-s:"Allura",cursive;
  --ease:cubic-bezier(.77,0,.18,1); --ease2:cubic-bezier(.16,1,.3,1);
  --gut:clamp(16px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-b);font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--acc);color:#000}
body.lock{overflow:hidden}
.mono{font-family:var(--f-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.acc{color:var(--acc)}

/* ---------- fond grille + grain ---------- */
.bg-grid{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),linear-gradient(rgba(61,255,162,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(61,255,162,.025) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 30%,#000 30%,transparent 100%)}
.bg-glow{position:fixed;inset:-20%;z-index:-3;pointer-events:none;background:radial-gradient(40% 35% at 75% 10%,rgba(13,58,53,.55),transparent 70%),radial-gradient(35% 30% at 10% 90%,rgba(20,199,122,.10),transparent 70%)}
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}

/* ---------- curseur ---------- */
.cur,.cur-dot{position:fixed;top:0;left:0;z-index:200;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%)}
.cur{width:38px;height:38px;border:1px solid rgba(61,255,162,.6);display:grid;place-items:center;transition:width .35s var(--ease2),height .35s var(--ease2),background .3s,border-color .3s}
.cur span{font-family:var(--f-m);font-size:10px;letter-spacing:.15em;color:#000;opacity:0;transition:opacity .2s}
.cur.is-play{width:86px;height:86px;background:var(--acc);border-color:var(--acc)}
.cur.is-play span{opacity:1}
.cur.is-link{width:60px;height:60px;background:rgba(61,255,162,.12)}
.cur-dot{width:5px;height:5px;background:var(--acc)}
@media (hover:none),(max-width:900px){.cur,.cur-dot{display:none}}

/* ---------- header ---------- */
.hd{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px var(--gut);transition:background .4s,backdrop-filter .4s,padding .4s}
.hd.solid{background:rgba(4,7,6,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-top:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-d);font-weight:600;font-size:15px;letter-spacing:-.01em;white-space:nowrap}
.brand i{width:9px;height:9px;border-radius:50%;background:var(--acc);box-shadow:0 0 14px var(--acc);animation:pulse 2s infinite}
.brand small{font-family:var(--f-s);font-size:22px;font-weight:400;color:var(--acc);margin-left:2px}
@keyframes pulse{50%{opacity:.35}}
.hud{display:flex;align-items:center;gap:18px;color:var(--mute)}
.hud .rec{display:flex;align-items:center;gap:7px}
.hud .rec b{width:7px;height:7px;border-radius:50%;background:#ff3b3b;animation:pulse 1.2s infinite}
.hud .tc{color:var(--ink);min-width:110px}
.menu-btn{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 18px;border:1px solid var(--line);border-radius:40px;background:rgba(8,16,13,.6);transition:border-color .3s,background .3s}
.menu-btn:hover{border-color:var(--acc)}
.menu-btn .bars{width:22px;height:10px;position:relative}
.menu-btn .bars:before,.menu-btn .bars:after{content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--ink);transition:transform .5s var(--ease),top .5s var(--ease)}
.menu-btn .bars:before{top:0}.menu-btn .bars:after{top:8px}
.nav-open .menu-btn .bars:before{top:4px;transform:rotate(45deg)}
.nav-open .menu-btn .bars:after{top:4px;transform:rotate(-45deg)}
@media(max-width:760px){.hud{display:none}}

/* ---------- menu plein écran ---------- */
.nav{position:fixed;inset:0;z-index:70;background:var(--bg2);clip-path:circle(0% at calc(100% - 60px) 40px);transition:clip-path .9s var(--ease);display:grid;grid-template-columns:1.4fr 1fr;padding:110px var(--gut) 40px;overflow:auto}
.nav-open .nav{clip-path:circle(150% at calc(100% - 60px) 40px)}
.nav:before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:80px 80px;pointer-events:none}
.nav ol{list-style:none;counter-reset:n;position:relative}
.nav li{overflow:hidden;border-bottom:1px solid var(--line)}
.nav li a{display:flex;align-items:baseline;gap:18px;padding:9px 0;font-family:var(--f-d);font-weight:500;font-size:clamp(22px,3.4vw,46px);letter-spacing:-.03em;line-height:1.1;transform:translateY(110%);transition:transform .8s var(--ease2),color .3s,padding .4s var(--ease2)}
.nav-open .nav li a{transform:none}
.nav li a:before{counter-increment:n;content:"0" counter(n);font-family:var(--f-m);font-size:11px;letter-spacing:.1em;color:var(--acc);min-width:28px}
.nav li:nth-child(10) a:before{content:"10"}
.nav li a:hover,.nav li a.on{color:var(--acc);padding-left:14px}
.nav li a em{font-style:normal;font-family:var(--f-m);font-size:11px;letter-spacing:.12em;color:var(--mute);margin-left:auto;align-self:center;text-transform:uppercase}
.nav-side{position:relative;padding-left:clamp(0px,4vw,60px);display:flex;flex-direction:column;justify-content:flex-end;gap:26px;opacity:0;transform:translateY(20px);transition:.6s .35s}
.nav-open .nav-side{opacity:1;transform:none}
.nav-side .script{font-family:var(--f-s);font-size:64px;color:var(--acc);line-height:1}
.nav-side p{color:var(--mute);max-width:340px}
.nav-side .links{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:900px){.nav{grid-template-columns:1fr;padding-top:90px}.nav-side{padding:30px 0 0}.nav li a em{display:none}}

/* ---------- transition de page ---------- */
.wipe{position:fixed;inset:0;z-index:150;pointer-events:none;display:grid;grid-template-columns:repeat(5,1fr)}
.wipe i{background:var(--acc);transform:scaleY(0);transform-origin:bottom}
.wipe .wl{position:absolute;inset:0;display:grid;place-items:center;color:#000;font-family:var(--f-d);font-weight:700;font-size:clamp(28px,6vw,90px);letter-spacing:-.04em;opacity:0}
.wipe .wl small{display:block;font-family:var(--f-m);font-size:12px;letter-spacing:.2em;text-align:center;font-weight:500;margin-top:6px}
.wipe.in i{animation:wIn .55s var(--ease) forwards}
.wipe.in .wl{animation:fadeIn .3s .3s forwards}
.wipe.out i{transform:scaleY(1);transform-origin:top;animation:wOut .6s var(--ease) forwards}
.wipe.out .wl{opacity:1;animation:fadeOut .2s forwards}
.wipe i:nth-child(2){animation-delay:.04s}.wipe i:nth-child(3){animation-delay:.08s}.wipe i:nth-child(4){animation-delay:.12s}.wipe i:nth-child(5){animation-delay:.16s}
@keyframes wIn{to{transform:scaleY(1)}}
@keyframes wOut{to{transform:scaleY(0)}}
@keyframes fadeIn{to{opacity:1}}@keyframes fadeOut{to{opacity:0}}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:300;background:var(--bg);display:grid;place-items:center;transition:clip-path 1s var(--ease);clip-path:inset(0 0 0 0)}
.loader.done{clip-path:inset(0 0 100% 0)}
.loader .lc{text-align:center}
.loader .count{font-family:var(--f-d);font-weight:700;font-size:clamp(70px,16vw,200px);letter-spacing:-.06em;line-height:1;color:transparent;-webkit-text-stroke:1px var(--acc)}
.loader .lbar{width:min(320px,70vw);height:2px;background:var(--line);margin:20px auto 12px;overflow:hidden}
.loader .lbar i{display:block;height:100%;width:0;background:var(--acc);transition:width .2s}
.loader .script{font-family:var(--f-s);font-size:44px;color:var(--ink)}

/* ---------- timeline (progression) ---------- */
.tl{position:fixed;left:var(--gut);right:var(--gut);bottom:16px;z-index:60;height:28px;display:flex;align-items:center;gap:12px;pointer-events:none;mix-blend-mode:difference}
.tl .track{flex:1;height:1px;background:rgba(255,255,255,.25);position:relative}
.tl .ph{position:absolute;top:-9px;width:1px;height:19px;background:var(--acc);left:0}
.tl .ph:before{content:"";position:absolute;top:-5px;left:-4px;border:4px solid transparent;border-top:6px solid var(--acc)}
.tl .k{position:absolute;top:-4px;width:8px;height:8px;border:1px solid rgba(255,255,255,.6);transform:translateX(-50%) rotate(45deg);transition:background .3s}
.tl .k.on{background:var(--acc);border-color:var(--acc)}
.tl .mono{color:#fff;opacity:.7;font-size:10px}
@media(max-width:700px){.tl{display:none}}

/* ---------- structure ---------- */
main{min-height:100vh}
.page{display:none}
.page.on{display:block}
.wrap{padding-left:var(--gut);padding-right:var(--gut)}
section{position:relative}
.sec{padding:clamp(80px,12vw,160px) var(--gut)}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--acc);margin-bottom:26px}
.eyebrow:before{content:"";width:9px;height:9px;border:1px solid var(--acc);transform:rotate(45deg)}
.h1{font-family:var(--f-d);font-weight:600;font-size:clamp(40px,8.2vw,132px);line-height:.92;letter-spacing:-.055em}
.h2{font-family:var(--f-d);font-weight:500;font-size:clamp(32px,5.4vw,80px);line-height:1;letter-spacing:-.045em}
.h3{font-family:var(--f-d);font-weight:500;font-size:clamp(20px,2.2vw,30px);line-height:1.15;letter-spacing:-.03em}
.lead{font-size:clamp(17px,1.5vw,21px);color:#c9dcd3;max-width:660px;line-height:1.55}
.muted{color:var(--mute)}
.outline{color:transparent;-webkit-text-stroke:1px var(--ink)}
.script{font-family:var(--f-s);font-weight:400;letter-spacing:0;color:var(--acc)}

/* split text reveal */
.sp .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.sp .w>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease2)}
.sp.in .w>span{transform:none}
.rv{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease2),transform 1s var(--ease2)}
.rv.in{opacity:1;transform:none}

/* boutons */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;padding:16px 26px;border-radius:60px;font-family:var(--f-m);font-size:12px;letter-spacing:.14em;text-transform:uppercase;overflow:hidden;isolation:isolate;border:1px solid var(--acc);color:var(--acc);transition:color .45s var(--ease)}
.btn:before{content:"";position:absolute;inset:0;background:var(--acc);transform:translateY(101%);border-radius:inherit;transition:transform .55s var(--ease);z-index:-1}
.btn:hover{color:#000}.btn:hover:before{transform:none}
.btn.fill{background:var(--acc);color:#000}
.btn.fill:before{background:var(--ink)}
.btn svg{width:14px;height:14px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:30px;font-family:var(--f-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);transition:.3s}
.chip:hover,.chip.on{border-color:var(--acc);color:var(--acc)}
.chip.on{background:rgba(61,255,162,.08)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px var(--gut) 70px;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-1}
.hero-media video{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.05)}
.hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,7,6,.6) 0%,rgba(4,7,6,.45) 35%,rgba(4,7,6,.9) 75%,var(--bg) 100%),linear-gradient(90deg,rgba(4,7,6,.7),transparent 60%)}
.hero-media .scan{position:absolute;inset:0;z-index:1;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.vf{position:absolute;inset:clamp(70px,9vw,110px) var(--gut) clamp(40px,6vw,60px);pointer-events:none}
.vf i{position:absolute;width:26px;height:26px;border-color:rgba(234,246,240,.7);border-style:solid}
.vf i:nth-child(1){top:0;left:0;border-width:1px 0 0 1px}.vf i:nth-child(2){top:0;right:0;border-width:1px 1px 0 0}
.vf i:nth-child(3){bottom:0;left:0;border-width:0 0 1px 1px}.vf i:nth-child(4){bottom:0;right:0;border-width:0 1px 1px 0}
.vf .cross{position:absolute;left:50%;top:50%;width:20px;height:20px;transform:translate(-50%,-50%)}
.vf .cross:before,.vf .cross:after{content:"";position:absolute;background:rgba(234,246,240,.5)}
.vf .cross:before{left:50%;top:0;bottom:0;width:1px}.vf .cross:after{top:50%;left:0;right:0;height:1px}
.vf .meta{position:absolute;top:14px;left:40px;right:40px;display:flex;justify-content:space-between;color:rgba(234,246,240,.8)}
.hero-top{display:flex;align-items:center;gap:14px;color:var(--mute);margin-bottom:22px;flex-wrap:wrap}
.hero-top .script{font-size:clamp(40px,5vw,70px);line-height:.8;text-transform:none}
.hero h1{max-width:13ch}
.hero h1 .script{font-size:1.05em;display:inline-block;transform:translateY(.08em);letter-spacing:-.01em}
.hero-foot{padding-right:70px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:40px;flex-wrap:wrap}
.hero-foot .lead{max-width:470px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.scroll-ind{position:absolute;right:var(--gut);bottom:110px;writing-mode:vertical-rl;color:var(--mute);display:flex;align-items:center;gap:14px}
.scroll-ind:after{content:"";width:1px;height:70px;background:linear-gradient(var(--acc),transparent);animation:sc 2s infinite}
@keyframes sc{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:700px){.scroll-ind,.vf .meta{display:none}}

/* marquee */
.mq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;background:var(--bg)}
.mq-t{display:flex;width:max-content;animation:mq 40s linear infinite}
.mq-t span{font-family:var(--f-d);font-weight:500;font-size:clamp(26px,4vw,56px);letter-spacing:-.04em;padding:0 28px;white-space:nowrap;display:flex;align-items:center;gap:56px}
.mq-t span:after{content:"✦";color:var(--acc);font-size:.5em}
.mq-t span:nth-child(even){color:transparent;-webkit-text-stroke:1px var(--ink)}
.mq.rev .mq-t{animation-direction:reverse;animation-duration:55s}
@keyframes mq{to{transform:translateX(-50%)}}

/* à propos (accueil) */
.about{display:grid;grid-template-columns:5fr 7fr;gap:clamp(30px,6vw,100px);align-items:center}
.portrait{position:relative;aspect-ratio:4/5;border-radius:6px;overflow:hidden}
.portrait .ph{position:absolute;inset:-8%;background-size:cover;background-position:30% center;will-change:transform}
.portrait:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(4,7,6,.9)),linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:auto,40px 40px,40px 40px}
.portrait .tag{position:absolute;left:18px;bottom:16px;right:18px;z-index:2;display:flex;justify-content:space-between;color:var(--ink)}
.portrait .stamp{position:absolute;top:18px;right:18px;z-index:2;width:120px;height:120px;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.about .txt p{margin-top:20px;color:#c4d6ce;max-width:620px;font-size:17px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:46px;border-top:1px solid var(--line)}
.stat{padding:24px 18px 0 0}
.stat b{display:block;font-family:var(--f-d);font-weight:500;font-size:clamp(34px,4vw,58px);letter-spacing:-.05em;line-height:1}
.stat b sup{color:var(--acc);font-size:.45em;vertical-align:top}
.stat span{color:var(--mute)}
@media(max-width:900px){.about{grid-template-columns:1fr}.portrait{max-width:440px}}

/* univers */
.univ{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:60px}
.u{position:relative;background:var(--bg);min-height:300px;padding:26px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;isolation:isolate}
.u .uv{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .6s,transform 1.2s var(--ease2);transform:scale(1.12)}
.u .uv video,.u .uv div{width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center}
.u .uv:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,7,6,.3),rgba(4,7,6,.92))}
.u:hover .uv{opacity:1;transform:none}
.u .n{display:flex;justify-content:space-between;color:var(--mute)}
.u .n svg{width:20px;height:20px;transition:transform .5s var(--ease2);color:var(--acc)}
.u:hover .n svg{transform:rotate(-45deg)}
.u h3{font-family:var(--f-d);font-weight:500;font-size:clamp(20px,1.8vw,27px);letter-spacing:-.035em;line-height:1.05}
.u p{color:var(--mute);font-size:14px;margin-top:10px;max-width:260px}
@media(max-width:1000px){.univ{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.univ{grid-template-columns:1fr}.u{min-height:220px}}

/* logos clients */
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:50px}
.logos div{background:var(--bg);aspect-ratio:3/2;display:grid;place-items:center;padding:22px}
.logos img{max-height:62px;width:auto;object-fit:contain;filter:grayscale(1) brightness(1.6) contrast(.9);opacity:.75;transition:.4s}
.logos div:hover img{filter:none;opacity:1;transform:scale(1.06)}
.logos div.wht{background:#0c1714}

/* ---------- en-tête de page ---------- */
.ph-head{padding:clamp(140px,18vw,220px) var(--gut) clamp(40px,6vw,70px);position:relative}
.ph-head .idx{position:absolute;right:var(--gut);top:clamp(130px,16vw,200px);font-family:var(--f-d);font-weight:700;font-size:clamp(80px,16vw,240px);letter-spacing:-.07em;line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(61,255,162,.22);pointer-events:none}
.ph-head .lead{margin-top:28px}
.filters{display:flex;flex-wrap:wrap;gap:8px;padding:0 var(--gut) 30px;position:sticky;top:64px;z-index:20;background:linear-gradient(var(--bg) 70%,transparent);padding-top:14px}

/* ---------- grille vidéo ---------- */
.vgrid{display:grid;grid-auto-flow:dense;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,26px);padding:0 var(--gut) 40px}
.vc{grid-column:span 4;position:relative;cursor:pointer}
.vc.big{grid-column:span 8}.vc.half{grid-column:span 6}
.vc .fr{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:var(--panel)}
.vc .fr .po,.vc .fr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center;transition:transform 1.2s var(--ease2),opacity .5s}
.vc .fr video{opacity:0}
.vc:hover .fr video{opacity:1}
.vc:hover .fr .po,.vc:hover .fr video{transform:scale(1.04)}
.vc .fr:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(61,255,162,0);transition:box-shadow .4s;border-radius:inherit}
.vc:hover .fr:after{box-shadow:inset 0 0 0 1px rgba(61,255,162,.7)}
.vc .badge{position:absolute;top:12px;left:12px;z-index:2;padding:5px 9px;background:rgba(4,7,6,.75);backdrop-filter:blur(6px);border-radius:3px;color:var(--acc)}
.vc .dur{position:absolute;bottom:12px;right:12px;z-index:2;padding:4px 8px;background:rgba(0,0,0,.7);border-radius:3px;color:#fff}
.vc .pb{position:absolute;inset:0;display:grid;place-items:center;z-index:2;opacity:0;transition:opacity .3s}
.vc .pb i{width:64px;height:64px;border-radius:50%;background:var(--acc);display:grid;place-items:center;color:#000;transform:scale(.6);transition:transform .5s var(--ease2)}
.vc:hover .pb{opacity:1}.vc:hover .pb i{transform:none}
@media(hover:hover) and (min-width:901px){.vc .pb{display:none}}
.vc .meta{display:flex;justify-content:space-between;gap:16px;padding-top:14px}
.vc h3{font-family:var(--f-d);font-weight:500;font-size:clamp(16px,1.3vw,20px);letter-spacing:-.03em;line-height:1.2}
.vc .cl{color:var(--mute);white-space:nowrap}
.vc.hide{display:none}
@media(max-width:1000px){.vc,.vc.big,.vc.half{grid-column:span 6}}
@media(max-width:640px){.vc,.vc.big,.vc.half{grid-column:span 12}}

/* ---------- lightbox vidéo / image ---------- */
.lb{position:fixed;inset:0;z-index:120;background:rgba(2,4,3,.94);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:70px var(--gut) 40px}
.lb.on{display:flex;animation:fadeIn .4s forwards;opacity:0}
.lb .box{width:min(1280px,100%);max-height:100%;display:flex;flex-direction:column;gap:16px}
.lb video{width:100%;max-height:72vh;background:#000;border-radius:4px}
.lb .imgv{width:100%;height:78vh;background-size:contain;background-repeat:no-repeat;background-position:center}
.lb .cap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.lb .cap p{color:var(--mute);max-width:640px}
.lb .x{position:absolute;top:18px;right:var(--gut);width:48px;height:48px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:.3s}
.lb .x:hover{border-color:var(--acc);color:var(--acc);transform:rotate(90deg)}
.lb .nv{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;background:rgba(4,7,6,.6)}
.lb .nv:hover{border-color:var(--acc);color:var(--acc)}
.lb .nv.p{left:12px}.lb .nv.n{right:12px}

/* ---------- galeries ---------- */
.subnav{display:flex;gap:8px;flex-wrap:wrap;padding:0 var(--gut) 40px}
.masonry{columns:4 260px;column-gap:clamp(12px,1.6vw,22px);padding:0 var(--gut) 60px}
.gi{break-inside:avoid;margin-bottom:clamp(12px,1.6vw,22px);position:relative;cursor:zoom-in;overflow:hidden;border-radius:4px;background:var(--panel)}
.gi .im{width:100%;background-size:cover;background-position:center;transition:transform 1.2s var(--ease2),filter .6s}
.gi:hover .im{transform:scale(1.05)}
.gi .ov{position:absolute;inset:auto 0 0 0;padding:40px 16px 14px;background:linear-gradient(transparent,rgba(4,7,6,.92));transform:translateY(100%);transition:transform .6s var(--ease2)}
.gi:hover .ov{transform:none}
.gi .ov b{display:block;font-family:var(--f-d);font-weight:500;font-size:15px;letter-spacing:-.02em}
.gi .ov span{color:var(--acc)}
@media(hover:none){.gi .ov{transform:none}}
.shield{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* ---------- liseuse documents ---------- */
.docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(18px,2.4vw,34px);padding:0 var(--gut) 60px}
.doc{cursor:pointer;perspective:1200px}
.doc .cv{aspect-ratio:3/4.1;background-size:cover;background-position:top center;border-radius:2px 6px 6px 2px;box-shadow:0 30px 50px -20px rgba(0,0,0,.8),inset 6px 0 10px -6px rgba(0,0,0,.6);transform:rotateY(-14deg) rotateX(4deg);transform-origin:left;transition:transform .8s var(--ease2);position:relative}
.doc .cv:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.35),transparent 8%,rgba(255,255,255,.08) 10%,transparent 14%);border-radius:inherit}
.doc:hover .cv{transform:rotateY(0) rotateX(0) translateY(-6px)}
.doc h4{font-family:var(--f-d);font-weight:500;font-size:15px;letter-spacing:-.02em;margin-top:18px;line-height:1.25}
.doc span{color:var(--mute)}
.reader{position:fixed;inset:0;z-index:130;background:rgba(2,4,3,.97);display:none;flex-direction:column}
.reader.on{display:flex}
.reader .rh{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px var(--gut);border-bottom:1px solid var(--line)}
.reader .rh h4{font-family:var(--f-d);font-weight:500;font-size:16px;letter-spacing:-.02em}
.reader .stage{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:20px;min-height:0;position:relative}
.reader .pg{height:100%;max-height:calc(100vh - 160px);aspect-ratio:var(--ar,0.707);background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#fff;box-shadow:0 20px 60px rgba(0,0,0,.7);transition:opacity .35s}
.reader .pg.fade{opacity:0}
.reader .rf{display:flex;justify-content:center;align-items:center;gap:18px;padding:12px;border-top:1px solid var(--line)}
.reader .rf button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center}
.reader .rf button:hover{border-color:var(--acc);color:var(--acc)}
.reader .guard{position:absolute;inset:0;z-index:2}
.reader .note{color:var(--mute)}
@media(max-width:800px){.reader .pg.p2{display:none}}

/* ---------- cartes offres (formation, outils, consultation) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:0 var(--gut)}
.card{background:var(--bg);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden;transition:background .5s}
.card:before{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--acc);transition:width .8s var(--ease2)}
.card:hover{background:var(--bg2)}.card:hover:before{width:100%}
.card .top{display:flex;justify-content:space-between;align-items:center;color:var(--mute)}
.card .ico{width:54px;height:54px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--acc)}
.card .ico svg{width:24px;height:24px}
.card h3{font-family:var(--f-d);font-weight:500;font-size:clamp(22px,2vw,28px);letter-spacing:-.035em;line-height:1.1}
.card p{color:#b9cdc4}
.card ul{list-style:none;display:grid;gap:8px;color:var(--mute);font-size:15px}
.card li{display:flex;gap:10px}
.card li:before{content:"";flex:none;width:6px;height:6px;margin-top:9px;background:var(--acc);transform:rotate(45deg)}
.card .ft{margin-top:auto;padding-top:10px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.status{display:inline-flex;align-items:center;gap:8px;color:var(--acc)}
.status:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 1.4s infinite}
.status.soon{color:#ffc857}

/* ---------- ebook ---------- */
.ebook{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,7vw,120px);align-items:center;padding:0 var(--gut) 80px}
.book3d{perspective:1600px;display:grid;place-items:center;padding:40px 0}
.book{width:min(340px,70vw);aspect-ratio:3/4.3;position:relative;transform-style:preserve-3d;transform:rotateY(-28deg) rotateX(6deg);transition:transform 1.2s var(--ease2);animation:float 6s ease-in-out infinite}
.book:hover{transform:rotateY(-8deg) rotateX(2deg)}
@keyframes float{50%{translate:0 -12px}}
.book .fc{position:absolute;inset:0;border-radius:3px 8px 8px 3px;background:linear-gradient(160deg,#0f2e28,#040706 70%);overflow:hidden;box-shadow:0 50px 80px -30px rgba(0,0,0,.9);transform:translateZ(18px);padding:28px 26px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid rgba(61,255,162,.25)}
.book .fc:before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:22px 22px}
.book .fc>*{position:relative}
.book .fc .t{font-family:var(--f-d);font-weight:700;font-size:clamp(32px,5vw,46px);line-height:.88;letter-spacing:-.06em}
.book .fc .t span{color:var(--acc);display:block}
.book .fc .frames{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.book .fc .frames i{aspect-ratio:1;border:1px solid rgba(61,255,162,.4);border-radius:2px}
.book .fc .frames i:nth-child(2),.book .fc .frames i:nth-child(6){background:var(--acc)}
.book .fc .s{font-size:12px;color:#b9cdc4;line-height:1.4}
.book .sp{position:absolute;top:0;bottom:0;left:0;width:36px;background:linear-gradient(90deg,#03110d,#0b2a23);transform:rotateY(-90deg) translateZ(0);transform-origin:left;border-radius:3px 0 0 3px}
.book .pages{display:none}
.price{display:flex;align-items:baseline;gap:14px;margin:26px 0}
.price b{font-family:var(--f-d);font-weight:600;font-size:clamp(46px,6vw,80px);letter-spacing:-.06em;line-height:1}
.count-d{display:flex;gap:10px;margin:22px 0 30px}
.count-d div{border:1px solid var(--line);border-radius:6px;padding:12px 14px;min-width:74px;text-align:center}
.count-d b{display:block;font-family:var(--f-d);font-weight:500;font-size:28px;letter-spacing:-.04em}
.count-d span{color:var(--mute);font-size:10px}
@media(max-width:900px){.ebook{grid-template-columns:1fr}}

/* ---------- consultation ---------- */
.consult{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,6vw,100px);padding:0 var(--gut) 80px}
.form{display:grid;gap:22px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.fld{position:relative}
.fld input,.fld textarea,.fld select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--dim);padding:24px 0 10px;color:var(--ink);font:inherit;font-size:17px;outline:none;transition:border-color .3s;border-radius:0;-webkit-appearance:none;appearance:none}
.fld select{cursor:pointer}
.fld select option{background:var(--bg2)}
.fld textarea{resize:vertical;min-height:120px}
.fld label{position:absolute;left:0;top:24px;color:var(--mute);pointer-events:none;transition:.3s var(--ease2)}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--acc)}
.fld input:focus+label,.fld input:not(:placeholder-shown)+label,.fld textarea:focus+label,.fld textarea:not(:placeholder-shown)+label,.fld.always label{top:0;font-size:11px;font-family:var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.types{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.types label{border:1px solid var(--line);border-radius:6px;padding:14px;cursor:pointer;transition:.3s;display:flex;flex-direction:column;gap:6px}
.types input{position:absolute;opacity:0;pointer-events:none}
.types label b{font-family:var(--f-d);font-weight:500;font-size:14px;letter-spacing:-.02em}
.types label span{color:var(--mute);font-size:12.5px;line-height:1.35}
.types input:checked+label{border-color:var(--acc);background:rgba(61,255,162,.07)}
.contact-list{display:grid;gap:0;margin-top:40px;border-top:1px solid var(--line)}
.contact-list a{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);font-family:var(--f-d);font-size:clamp(16px,1.6vw,22px);letter-spacing:-.03em;transition:.4s var(--ease2)}
.contact-list a:hover{color:var(--acc);padding-left:12px}
.contact-list a span{color:var(--mute)}
@media(max-width:900px){.consult{grid-template-columns:1fr}.types{grid-template-columns:1fr}.form .row{grid-template-columns:1fr}}

/* ---------- pages vides propres ---------- */
.feature{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,5vw,80px);align-items:center;padding:0 var(--gut) 80px}
.feature .vid{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;cursor:pointer}
.feature .vid video,.feature .vid .po{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center}
@media(max-width:900px){.feature{grid-template-columns:1fr}}
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin:0 var(--gut)}
.steps div{padding:28px 20px 30px 0;border-right:1px solid var(--line)}
.steps div:last-child{border:0}
.steps b{display:block;color:var(--acc);margin-bottom:14px}
.steps h4{font-family:var(--f-d);font-weight:500;font-size:19px;letter-spacing:-.03em;margin-bottom:8px}
.steps p{color:var(--mute);font-size:15px;padding-right:10px}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}.steps div:nth-child(2){border-right:0}}
@media(max-width:520px){.steps{grid-template-columns:1fr}.steps div{border-right:0;border-bottom:1px solid var(--line)}}

/* ---------- CTA + footer ---------- */
.cta{padding:clamp(90px,14vw,190px) var(--gut);text-align:center;position:relative;overflow:hidden;border-top:1px solid var(--line)}
.cta .big{font-family:var(--f-d);font-weight:600;font-size:clamp(44px,10vw,170px);letter-spacing:-.06em;line-height:.9}
.cta .big .script{font-size:1.1em}
.cta .btn{margin-top:46px}
.cta .orb{position:absolute;width:60vw;height:60vw;max-width:800px;max-height:800px;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(61,255,162,.16),transparent 60%);z-index:-1;filter:blur(20px)}
footer{padding:50px var(--gut) 70px;border-top:1px solid var(--line);display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
footer .brand{font-size:20px}
footer p{color:var(--mute);margin-top:14px;max-width:340px}
footer h5{font-family:var(--f-m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin-bottom:16px;font-weight:500}
footer ul{list-style:none;display:grid;gap:6px}
footer ul a{color:#c4d6ce;transition:.3s}
footer ul a:hover{color:var(--acc)}
footer .bot{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;color:var(--dim);padding-top:30px;border-top:1px solid var(--line);flex-wrap:wrap}
@media(max-width:800px){footer{grid-template-columns:1fr 1fr}footer>div:first-child{grid-column:1/-1}}

.wa-float{position:fixed;right:18px;bottom:52px;z-index:65;width:54px;height:54px;border-radius:50%;background:var(--acc);color:#000;display:grid;place-items:center;box-shadow:0 10px 30px rgba(61,255,162,.35);transition:transform .4s var(--ease2)}
.wa-float:hover{transform:scale(1.1) rotate(-8deg)}
.wa-float svg{width:26px;height:26px}
.toast{position:fixed;left:50%;bottom:70px;transform:translate(-50%,30px);background:var(--ink);color:#000;padding:12px 20px;border-radius:40px;font-size:14px;z-index:400;opacity:0;transition:.4s var(--ease2);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media print{body{display:none!important}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.sp .w>span,.rv{transform:none;opacity:1}}

/* ---------- onglets visibles ---------- */
.hd{gap:14px}
.tabs{flex:1;display:flex;justify-content:safe center;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0;mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;padding:8px 11px;border-radius:30px;font-size:10.5px;letter-spacing:.1em;color:var(--mute);white-space:nowrap;transition:color .3s,background .3s}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:#000;background:var(--acc)}
.hud .rec,.hud .tc{white-space:nowrap}
@media(max-width:1650px){.hud{display:none}}
@media(max-width:1440px) and (min-width:1101px){.brand small{display:none}.tabs a{padding:8px 8px;font-size:10px;letter-spacing:.06em}.menu-btn #menuLbl{display:none}}
@media(max-width:1100px){
  .hd{flex-wrap:wrap;row-gap:10px;padding-bottom:10px}
  .tabs{order:3;flex-basis:100%;justify-content:flex-start;margin:0 calc(var(--gut) * -1);padding:0 var(--gut)}
  .tabs a{padding:7px 12px;border:1px solid var(--line)}
  .ph-head{padding-top:clamp(170px,22vw,240px)}
  .filters{top:104px}
}
.sec-t{padding:clamp(60px,8vw,110px) var(--gut) 34px}
/* youtube */
.yt-frame{position:relative;aspect-ratio:16/9;width:100%;max-height:72vh;background:#000;border-radius:4px;overflow:hidden}
.yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* ebook */
.bk-cover{position:relative;aspect-ratio:1.414;border-radius:6px;overflow:hidden;cursor:pointer;box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px var(--line);transform:perspective(1400px) rotateY(-10deg) rotateX(3deg);transition:transform 1s var(--ease2)}
.bk-cover:hover{transform:none}
.bk-cover .po{position:absolute;inset:0;background-size:cover;background-position:center}
.bk-cover .badge{position:absolute;left:14px;bottom:14px;padding:7px 11px;background:var(--acc);color:#000;border-radius:3px}
.endcard{max-width:520px;text-align:center;display:grid;gap:16px;justify-items:center;padding:30px;border:1px solid var(--line);border-radius:8px;background:var(--bg2);position:relative;z-index:3}
.reader .stage .endcard~.guard{display:none}
/* paiement */
.pay{position:fixed;inset:0;z-index:140;background:rgba(2,4,3,.88);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:20px}
.pay.on{display:flex;animation:fadeIn .3s forwards;opacity:0}
.pay-box{position:relative;width:min(520px,100%);max-height:92vh;overflow:auto;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:clamp(22px,4vw,36px);display:grid;gap:18px}
.pay-box .x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line)}
.pay-box .x:hover{border-color:var(--acc);color:var(--acc)}
.pay-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pay-price b{font-family:var(--f-d);font-weight:600;font-size:42px;letter-spacing:-.05em;color:var(--acc)}
.pay-steps{list-style:none;display:grid;gap:14px}
.pay-steps li{display:flex;gap:14px;align-items:flex-start}
.pay-steps li>span{flex:none;width:28px;height:28px;border-radius:50%;background:rgba(61,255,162,.12);color:var(--acc);display:grid;place-items:center;font-family:var(--f-m);font-size:12px}
.pay-num{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border:1px dashed var(--acc);border-radius:8px}
.pay-num .mono{font-size:16px;letter-spacing:.08em;color:var(--ink)}
.pay-ctas{display:grid;gap:10px}
.pay-ctas .btn{justify-content:center}

/* FontRescue */
.fr-block{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(30px,5vw,80px);align-items:center;padding:0 var(--gut) 40px}
.fr-shots{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fr-shot{position:relative;aspect-ratio:1366/768;border-radius:6px;background-size:cover;background-position:center;cursor:zoom-in;box-shadow:0 0 0 1px var(--line),0 30px 60px -30px rgba(0,0,0,.9);transition:transform .6s var(--ease2)}
.fr-shot:first-child{grid-column:1/-1}
.fr-shot:hover{transform:translateY(-4px)}
.fr-shot span{position:absolute;left:10px;bottom:10px;padding:5px 8px;background:rgba(4,7,6,.8);border-radius:3px;color:var(--acc);font-size:10px}
.fr-logo{display:flex;align-items:center;gap:14px;font-family:var(--f-d);font-weight:600;font-size:clamp(34px,4.4vw,62px);letter-spacing:-.05em;line-height:1}
.fr-logo span{display:grid;place-items:center;width:1.25em;height:1.25em;border-radius:14px;background:var(--acc);color:#000;font-size:.6em;letter-spacing:-.04em}
.fr-list{list-style:none;display:grid;gap:9px;margin-top:22px;color:#c4d6ce}
.fr-list li{display:flex;gap:10px}
.fr-list li:before{content:"";flex:none;width:6px;height:6px;margin-top:9px;background:var(--acc);transform:rotate(45deg)}
@media(max-width:900px){.fr-block{grid-template-columns:1fr}}