/* Layout: a sticky 3D showroom stage the camera dives into, then a pure-black site of centered sections; light-weight headings that unblur word by word, mono UI labels, screen-blue light */
:root{
  --void:#000;           /* page ground */
  --glass:#0c0d0c;       /* cards */
  --glass-2:#131318;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);
  --fg:#f6f8f4;
  --mute:#8c8f9c;
  --signal:#9ad82f;      /* screen blue */
  --ion:#bef344;         /* touch cyan */
  --display:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --logo:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --gutter:clamp(16px,4vw,56px);
  --max:1320px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{background:var(--void);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
::selection{background:var(--signal);color:#fff}
:focus-visible{outline:2px solid var(--ion);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-.03em;line-height:1.08;margin:0;text-wrap:balance}
h3,h4{font-weight:500;letter-spacing:-.02em}
p{margin:0}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}

/* ---------- NAV ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0px);pointer-events:none}
.nav-in{display:flex;align-items:center;gap:24px;max-width:var(--max);margin:0 auto;padding:16px var(--gutter);pointer-events:auto}
.volji-logo{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.volji-logo__mark{display:inline-flex;width:auto;height:40px;fill:currentColor}
.volji-logo__text{display:flex;flex-direction:column;gap:5px;padding-top:3px;font-family:var(--logo);font-size:20px;font-weight:600;line-height:.8;text-transform:uppercase;color:currentColor}
.volji-logo__text span{display:inline-flex}
.volji-logo__text span:last-child{color:var(--ion)}
@media (max-width:767.98px){.volji-logo__mark{height:36px}.volji-logo__text{gap:4px;font-size:18px;font-weight:700}}
.nav::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,0));pointer-events:none}
.nav-in{position:relative}
.nav-cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;text-decoration:none;padding:9px 12px 9px 18px;border-radius:999px;background:#fff;color:#000;white-space:nowrap;transition:transform .2s}
.nav-cta::after{content:"›";font-size:18px;line-height:1;transition:transform .2s}
.nav-cta:hover::after{transform:translateX(3px)}

/* ---------- STAGE ---------- */
#stage{position:relative;height:1150vh}
.sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--void)}
.poster{position:absolute;inset:0;background:url(poster.webp) center/cover no-repeat;transform-origin:56% 70%;will-change:transform;transition:opacity 1.2s ease}
#gl{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease;display:block;touch-action:pan-y}
.gl-ready #gl{opacity:1}
.gl-ready .poster{opacity:0}
#css3d{position:absolute;inset:0;pointer-events:none;overflow:hidden}
/* ---------- JARVIS-like assistant over the chip ---------- */
#jv{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;opacity:0;z-index:2;will-change:transform,opacity}
#jv .mic{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,rgba(19,26,11,.85),rgba(19,26,11,.35) 70%,transparent);color:#f4ffdf}
#jv .mic svg{width:22px;height:22px;filter:drop-shadow(0 0 6px rgba(190,243,68,.8))}
#jv .wave{position:absolute;left:0;top:calc(var(--r,60px)*2 + 8px);transform:translateX(-50%);display:flex;gap:4px;align-items:center;height:30px}
#jv .wave i{display:block;width:3px;border-radius:3px;background:linear-gradient(#ebffbf,#a7ff3b);height:4px;opacity:.9;box-shadow:0 0 8px rgba(190,243,68,.5)}
#jv .bubbles{position:absolute;left:calc(var(--r,60px)*2 + 26px);top:calc(var(--r,60px)*-1.3);width:min(320px,26vw);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
#jv .bub{font:500 13.5px/1.45 Manrope,system-ui,sans-serif;color:#f5ffe8;padding:11px 14px 11px 14px;border-radius:16px 16px 16px 4px;
  background:linear-gradient(160deg,rgba(55,86,22,.94),rgba(20,26,13,.92));border:1px solid rgba(200,255,120,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);opacity:0;transform:translateY(10px) scale(.96);transform-origin:0 100%;transition:opacity .45s,transform .45s cubic-bezier(.2,.8,.2,1)}
#jv .bub.in{opacity:1;transform:none}
#jv .bub.old{opacity:.5}
#jv .bub.gone{opacity:0;transform:translateY(-8px) scale(.97)}
#jv .bub b{color:#deff9f;font-weight:600}
#jv .bub .who{display:block;font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#c3ff6f;margin-bottom:6px}
#jv .dots{display:inline-flex;gap:4px}#jv .dots i{width:5px;height:5px;border-radius:50%;background:#deff9f;animation:jvd 1s infinite}
#jv .dots i:nth-child(2){animation-delay:.15s}#jv .dots i:nth-child(3){animation-delay:.3s}
@keyframes jvd{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media (max-width:760px){#jv .bubbles{right:auto;left:50%;transform:translateX(-50%);bottom:auto;top:calc(var(--r,60px) + 46px);width:min(300px,86vw);align-items:center}#jv .bub{font-size:12.5px}#jv .bub.old{display:none}}
#css3d>div{position:absolute;left:0;top:0;transform-origin:0 0}
#css3d .disc{opacity:0;border-radius:50%;pointer-events:none;overflow:hidden;background:#0d1207;pointer-events:none;box-shadow:0 0 0 10px rgba(190,243,68,.18),0 0 80px rgba(154,216,47,.6);transition:box-shadow .4s}
#css3d .disc.live{pointer-events:auto;box-shadow:0 0 0 10px rgba(190,243,68,.6),0 0 120px rgba(190,243,68,.7)}
#css3d iframe{width:100%;height:100%;border:0;display:block;background:#0d1207}
#css3d .tapp{opacity:0;overflow:hidden;background:#0d0d0c;pointer-events:none}
#css3d .tapp.live,#css3d .disc.live{pointer-events:auto}
#css3d .wapp{background:#0d0d0c}#css3d .wapp.live,#css3d .wapp{box-shadow:none!important;pointer-events:none!important}
#css3d .tapp.live{pointer-events:auto;box-shadow:0 0 0 6px rgba(190,243,68,.5),0 0 120px rgba(190,243,68,.5)}
.focus.tablemode .app-hint{display:block}
.app-actions{display:none;gap:8px;flex-wrap:wrap;margin-top:16px}
.focus.app .app-actions{display:flex}
.app-actions .btn{padding:10px 16px;font-size:13px}
.app-hint{display:none;margin-top:14px;color:var(--ion);font-size:13px}
.focus.app.embed .app-hint{display:block}
.proj .scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.proj .scr .sector{z-index:2}
.vignette{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(7,10,4,.65) 0%,rgba(7,10,4,0) 22%),
  linear-gradient(0deg,rgba(7,10,4,.92) 0%,rgba(7,10,4,.35) 34%,rgba(7,10,4,0) 55%),
  linear-gradient(90deg,rgba(7,10,4,.55) 0%,rgba(7,10,4,0) 45%)}
.hero{position:absolute;left:0;right:0;bottom:0;padding-bottom:max(clamp(40px,8vh,88px),env(safe-area-inset-bottom,0px))}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px}
.eyebrow,.pill{display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:100%;padding:5px 12px;border-radius:100px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.03);backdrop-filter:blur(2px);font-family:var(--mono);font-size:12px;color:#fff}
.eyebrow::before,.pill::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 10px var(--signal)}
.eyebrow::before{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.hero h1{font-size:clamp(36px,4.8vw,80px);font-weight:400;letter-spacing:-.045em;line-height:1.02;margin:0 0 20px;max-width:14ch}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,#d2ff9e,var(--ion));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{max-width:44ch;color:#c0c8b9;font-size:clamp(15px,1.25vw,17px)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-weight:400;font-size:14px;text-decoration:none;padding:13px 22px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(255,255,255,.03);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;color:var(--fg);transition:background .25s,border-color .25s,transform .25s}
.btn:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06)}
.btn.primary{background:#fff;border-color:#fff;color:#000;padding:6px 6px 6px 22px}
.btn.primary:hover{background:#edf0e9}
.btn .ico{width:38px;height:38px;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center;transition:transform .3s}
.btn.primary:hover .ico{transform:rotate(-45deg)}
.btn svg{width:16px;height:16px}
.hero-side{display:flex;flex-direction:column;gap:14px;color:var(--mute);width:min(440px,36vw);margin:0 clamp(0px,5vw,90px) clamp(40px,15vh,160px) 0}
.lgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 10px}
.lgrid .slot{position:relative;height:56px}
.lgrid .logo{position:absolute;inset:0;padding:0 6px;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);font-size:11px;white-space:normal;text-align:center}
.lgrid .logo.out{opacity:0;transform:translateY(10px)}
.lgrid .logo img{height:auto;max-height:24px;max-width:100%;opacity:.8}
.hero-side .mono{color:var(--mute)}
.scrollcue{width:1px;height:56px;background:linear-gradient(var(--ion),transparent);position:relative;overflow:hidden;margin-right:6px}
.scrollcue::after{content:"";position:absolute;left:0;top:-20px;width:1px;height:20px;background:#fff;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{to{top:60px}}
@media (max-width:760px){.hero .wrap{grid-template-columns:1fr;gap:20px}.hero-side{width:100%;margin:0}.lgrid .slot{height:48px}}

/* client logos */
.logo{display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#6f727e;white-space:nowrap}
.logo img{height:24px;width:auto;max-width:120px;object-fit:contain;filter:grayscale(1) brightness(0) invert(1);opacity:.55;transition:opacity .3s}
.logo:hover img{opacity:.95}
.logos-hero{margin-top:26px;display:flex;align-items:center;gap:24px}
.logos-hero .mono{color:var(--mute);flex:none}
.lstrip{flex:1;min-width:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.lrow{display:flex;gap:44px;width:max-content;align-items:center;animation:mq 50s linear infinite}
@media (max-width:760px){.logos-hero{flex-direction:column;align-items:stretch;gap:12px;margin-top:20px}.lstrip{width:100%}}

/* hotspots */
.hotspots{position:absolute;inset:0;pointer-events:none;display:none}
.gl-ready .hotspots{display:block}
.hs{position:absolute;left:0;top:0;pointer-events:auto;display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;color:var(--fg);cursor:pointer;font:500 12px var(--body);transition:opacity .35s;will-change:transform}
.hs i{position:relative;width:14px;height:14px;border-radius:50%;background:var(--ion);box-shadow:0 0 0 4px rgba(190,243,68,.18),0 0 18px var(--ion);flex:none}
.hs i::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid var(--ion);animation:ring 2.2s ease-out infinite}
@keyframes ring{from{transform:scale(.4);opacity:1}to{transform:scale(1.5);opacity:0}}
.hs span{font-family:var(--mono);padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.72);border:1px solid var(--line-strong);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap;transition:background .2s,border-color .2s}
.hs:hover span{border-color:var(--ion);background:rgba(51,80,20,.8)}
.hotspots.off .hs{opacity:0;pointer-events:none}

/* focus card */
.focus{position:absolute;right:var(--gutter);top:50%;transform:translate(24px,-50%);width:min(380px,calc(100% - 2*var(--gutter)));padding:28px;border-radius:22px;background:rgba(15,19,10,.78);border:1px solid var(--line-strong);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;pointer-events:none;transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1)}
.focus.on{opacity:1;transform:translate(0,-50%);pointer-events:auto}
.focus .mono{color:var(--ion)}
.focus h3{font-size:32px;margin:12px 0 12px}
.focus p{color:#d6e6c5;font-size:15px}
.focus .ref{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);color:var(--mute);font-size:13px}
.focus-nav{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}
.focus-nav button{font:400 13px var(--mono);color:var(--fg);background:transparent;border:1px solid var(--line-strong);padding:9px 14px;border-radius:999px;cursor:pointer}
.focus-nav button:hover{border-color:var(--ion)}
@media (max-width:760px){.focus{top:auto;bottom:16px;transform:translateY(24px)}.focus.on{transform:none}}

/* chapter captions */
.cap{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);pointer-events:none;opacity:0}
.cap::before{content:"";position:absolute;inset:-45vh 0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,0) 55%)}
.cap.low::before{background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,0) 45%)!important}
@media (min-width:761px){.cap.low{top:auto;bottom:96px;transform:none}.cap.low .cap-in{max-width:600px}.cap.low p{max-width:none}.cap.low h2{font-size:clamp(26px,2.6vw,40px);margin:12px 0 10px}.cap.low p{font-size:15px}.cap.low .chips{display:none}.cap.low .btn{margin-top:16px}
  .focus.kiosk{top:auto;bottom:96px;transform:translate(24px,0);padding:20px 22px}.focus.kiosk.on{transform:none}.focus.kiosk #f-p,.focus.kiosk .ref{display:none}.focus.kiosk h3{font-size:24px;margin:8px 0 4px}}
.cap.R::before{background:linear-gradient(270deg,rgba(0,0,0,.72),rgba(0,0,0,0) 55%)}
.cap .wrap{position:relative}
.cap-in{max-width:460px;display:flex;flex-direction:column;align-items:flex-start}
.cap.R .cap-in{margin-left:auto;text-align:right;align-items:flex-end}
.cap h2{font-size:clamp(30px,3.8vw,56px);margin:18px 0 14px}
.cap p{color:#c0c8b9;max-width:42ch}
.cap .chips{margin-top:20px}
.cap.R .chips{justify-content:flex-end}
.cap .btn{margin-top:24px}
.cap.live .btn{pointer-events:auto}
@media (max-width:760px){
  .cap{top:auto;bottom:calc(76px + env(safe-area-inset-bottom,0px));transform:none}
  .cap::before{display:none}
  .cap-in,.cap.R .cap-in{max-width:none;margin:0;text-align:left;align-items:flex-start;padding:18px;border-radius:18px;background:rgba(0,0,0,.66);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .cap.R .chips{justify-content:flex-start}
  .cap h2{font-size:28px;margin:12px 0 8px}.cap p{font-size:14px}.cap .chips{display:none}
}
/* chapter switcher */
.chapters{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;gap:4px;padding:5px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(0,0,0,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .4s;max-width:calc(100% - 32px)}
.chapters.on{opacity:1;pointer-events:auto}
.chapters button{all:unset;cursor:pointer;position:relative;overflow:hidden;font-family:var(--mono);font-size:12px;color:#8c8f9c;padding:8px 14px;border-radius:999px;white-space:nowrap;transition:color .3s,background .3s}
.chapters button i{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--ion)}
.chapters button.act{color:#fff;background:rgba(255,255,255,.08)}
.chapters button:hover{color:#fff}
.chapters button:focus-visible{outline:2px solid var(--ion)}
.chapters{align-items:center}
.chapters .arr{display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:50%;color:#fff;background:rgba(255,255,255,.08)}
.chapters .arr:hover{background:#fff;color:#000}
.chapters .arr svg{width:15px;height:15px}
.chapters .arr[disabled]{opacity:.3;pointer-events:none}
.vcount{white-space:nowrap;font-family:var(--mono);font-size:12px;color:#8c8f9c;padding:0 8px;min-width:46px;text-align:center;font-variant-numeric:tabular-nums}
@media (max-width:640px){.chapters button b{display:none}}

/* final overlay = the table screen becomes the page */
.final{position:absolute;inset:0;opacity:0;pointer-events:none;display:flex;align-items:center;
  background:
   radial-gradient(ellipse 70% 60% at 50% 42%,rgba(116,190,36,.55),rgba(14,19,9,0) 70%),
   repeating-linear-gradient(0deg,rgba(190,255,122,.07) 0 1px,transparent 1px 48px),
   repeating-linear-gradient(90deg,rgba(190,255,122,.07) 0 1px,transparent 1px 48px),
   #0e1309}
.final.live{pointer-events:auto}
.final .wrap{width:100%;display:grid;gap:clamp(24px,4vh,48px)}
.mark{display:flex;align-items:center;gap:.28em;color:#fff;font-size:clamp(46px,8.6vw,132px)}
.mark svg{height:1.9em;width:auto;fill:currentColor;filter:drop-shadow(0 0 40px rgba(154,216,47,.55))}
.mark span{display:flex;flex-direction:column;gap:.18em;font-family:var(--logo);font-weight:700;line-height:.8;text-transform:uppercase}
.mark span b{font-weight:700}
.mark span i{font-style:normal;font-size:.62em;color:var(--ion);letter-spacing:.02em}
.final-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:end}
.final-top p{font-size:clamp(17px,1.7vw,24px);line-height:1.4;max-width:30ch;color:#e7f6d8}
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.tile{display:grid;gap:10px;text-decoration:none;padding:22px;border-radius:18px;border:1px solid var(--line-strong);background:rgba(21,28,14,.6);position:relative;overflow:hidden;transition:border-color .3s,transform .3s}
.tile:hover{border-color:var(--ion);transform:translateY(-3px)}
.tile .mono{color:var(--ion)}
.tile h3{font-size:clamp(20px,1.9vw,26px)}
.tile p{color:var(--mute);font-size:14px}
.tile::after{content:"";position:absolute;right:-30px;bottom:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(var(--signal),transparent 70%);opacity:.25;transition:opacity .3s}
.tile:hover::after{opacity:.6}
.tile.main{background:linear-gradient(150deg,rgba(154,216,47,.35),rgba(21,28,14,.6) 60%)}
@media (max-width:860px){.final-top{grid-template-columns:1fr}.tiles{grid-template-columns:1fr}.tile{padding:16px}.tile p{display:none}}

/* ---------- SECTIONS ---------- */
section.block{position:relative;padding-block:clamp(90px,12vw,160px)}
.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;margin:0 auto clamp(48px,6vw,80px);max-width:880px}
.sec-head .idx,.sec-head>div:not(.idx){display:contents}
.sec-head .num{display:none}
.sec-head h2{font-size:clamp(36px,4.6vw,64px);max-width:18ch;margin-inline:auto}
.sec-head .intro{color:#a7aab6;font-size:clamp(16px,1.25vw,18px);max-width:62ch;margin:6px auto 0}
.kicker{color:var(--ion)}
.sec-head .kicker{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:100px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.03);font-family:var(--mono);font-size:12px;color:#fff}
.sec-head .kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 10px var(--signal)}
.sec-glow::before{content:"";position:absolute;left:50%;top:0;width:min(1100px,100%);height:420px;transform:translateX(-50%);background:radial-gradient(ellipse 50% 60% at 50% 0%,rgba(154,216,47,.22),transparent 70%);pointer-events:none}
.w{display:inline-block;text-wrap:nowrap}
.js .wsplit .w{filter:blur(10px);opacity:.12;transform:translateY(.18em);transition:filter .9s cubic-bezier(.2,.8,.2,1),opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*55ms)}
.js .wsplit.lit .w{filter:none;opacity:1;transform:none}
.reveal{transform:translateY(28px);opacity:.25;transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity 1s}
.reveal.in{transform:none;opacity:1}

/* interactif */
#interactif{background:var(--void)}
.supports{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:20px;align-items:stretch}
.tablist{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.tablist button{all:unset;cursor:pointer;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:8px;padding:18px 4px;border-bottom:1px solid var(--line);font-family:var(--display);font-weight:400;font-size:clamp(19px,1.6vw,23px);color:var(--mute);transition:color .25s,padding .35s}
.tablist button .mono{font-size:11px;color:inherit;opacity:.7}
.tablist button::after{content:"→";font-family:var(--body);opacity:0;transform:translateX(-8px);transition:.3s}
.tablist button:hover{color:var(--fg)}
.tablist button[aria-selected="true"]{color:var(--fg);padding-left:14px}
.tablist button[aria-selected="true"]::after{opacity:1;transform:none;color:var(--ion)}
.tablist button:focus-visible{outline:2px solid var(--ion)}
.panel{position:relative;border-radius:24px;border:1px solid var(--line);background:linear-gradient(160deg,var(--glass-2),var(--glass));overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:420px}
.panel-art{position:relative;color:#efffdf;background:radial-gradient(circle at 50% 60%,rgba(154,216,47,.3),transparent 65%);display:grid;place-items:center;padding:28px;border-right:1px solid var(--line)}
.panel-art svg{width:100%;max-width:300px;height:auto;overflow:visible}
.panel-body{padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;gap:18px}
.panel-body h3{font-size:clamp(28px,2.8vw,42px)}
.panel-body p{color:#d1e0c0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.chip{font-family:var(--mono);font-size:12px;padding:6px 12px;border-radius:999px;border:1px solid var(--line-strong);color:#dbe0d6;background:rgba(255,255,255,.03)}
.panel.swap .panel-body>*,.panel.swap .panel-art svg{animation:swap .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes swap{from{opacity:0;transform:translateY(12px)}}
@media (max-width:960px){.supports{grid-template-columns:1fr}.tablist{flex-direction:row;overflow-x:auto;border-top:0;gap:8px;padding-bottom:6px;scrollbar-width:none}.tablist button{grid-template-columns:auto;border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-size:15px;white-space:nowrap}.tablist button .mono,.tablist button::after{display:none}.tablist button[aria-selected="true"]{padding-left:16px;border-color:var(--ion)}}
@media (max-width:640px){.panel{grid-template-columns:1fr}.panel-art{border-right:0;border-bottom:1px solid var(--line);min-height:220px}}

.touchzone{margin-top:20px;display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:20px}
.touchpad{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--line-strong);aspect-ratio:16/8;max-width:100%;background:#0e1309;touch-action:none;cursor:crosshair}
.touchpad canvas{position:absolute;inset:0;width:100%;height:100%}
.touchpad .lbl{position:absolute;left:20px;top:18px;color:var(--mute);pointer-events:none}
.touchpad .cnt{position:absolute;right:20px;top:18px;color:var(--ion);pointer-events:none;font-variant-numeric:tabular-nums}
.facts{display:grid;gap:12px}
.fact{border-radius:22px;border:1px solid var(--line);padding:22px;background:var(--glass);display:grid;gap:4px;align-content:start}
.fact b{font-family:var(--display);font-weight:300;letter-spacing:-.04em;font-size:clamp(38px,3.6vw,54px);line-height:1}
.fact span{color:var(--mute);font-size:14px}
@media (max-width:860px){.touchzone{grid-template-columns:1fr}.touchpad{aspect-ratio:4/3}.facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.facts{grid-template-columns:1fr}}

.before{margin-top:clamp(70px,9vw,120px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,80px)}
.before h3{font-size:clamp(28px,3vw,44px)}
.before>div>p{color:var(--mute);margin-top:14px;max-width:38ch}
.blist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.bitem{background:var(--void);padding:34px 26px;display:grid;gap:12px;align-content:start;justify-items:center;text-align:center;transition:background .3s}
.bitem:hover{background:var(--glass)}
.bitem svg{width:42px;height:42px;padding:9px;border-radius:12px;border:1px solid var(--line-strong);background:var(--glass-2);color:#fff}
.bitem h4{font-size:21px;font-weight:400}
.bitem p{color:var(--mute);font-size:14.5px}
@media (max-width:860px){.before{grid-template-columns:1fr}}
@media (max-width:560px){.blist{grid-template-columns:1fr}}

/* offers grid (logiciel / ia) */
.split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:20px;align-items:start}
@media (max-width:960px){.split{grid-template-columns:1fr}}
.offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.offer{position:relative;border-radius:20px;border:1px solid var(--line);background:var(--glass);transition:background .3s;padding:24px;display:grid;gap:10px;align-content:start;overflow:hidden;--mx:50%;--my:50%}
.offer:hover{background:var(--glass-2)}
.offer::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(154,216,47,.16),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.offer:hover::before{opacity:1}
.offer .mono{color:var(--mute)}
.offer h4{font-size:21px;font-weight:400}
.offer p{color:var(--mute);font-size:14.5px}
@media (max-width:560px){.offers{grid-template-columns:1fr}}

.showcase{position:sticky;top:100px;border-radius:26px;border:1px solid var(--line-strong);background:linear-gradient(170deg,var(--glass-2),var(--glass));padding:20px;overflow:hidden}
.showcase .bar{display:flex;align-items:center;gap:8px;padding:2px 4px 16px;color:var(--mute)}
.showcase .bar i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.showcase .bar span{margin-left:auto}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kpi{border:1px solid var(--line);border-radius:14px;padding:14px;background:rgba(7,10,4,.4)}
.kpi .mono{font-size:10px;color:var(--mute)}
.kpi b{display:block;font-family:var(--display);font-size:28px;font-weight:400;font-variant-numeric:tabular-nums;margin-top:4px}
.kpi small{color:#66e3a6;font-size:12px}
.chart{margin-top:10px;border:1px solid var(--line);border-radius:14px;padding:14px;background:rgba(7,10,4,.4)}
.chart svg{width:100%;height:auto;display:block}
.scenario{margin-top:10px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;position:relative}
.node{border-radius:14px;border:1px solid var(--line);padding:12px;background:rgba(7,10,4,.4);font-size:13px;position:relative}
.node .mono{font-size:10px;display:block;margin-bottom:6px}
.node.t .mono{color:#ffb35c}.node.c .mono{color:var(--ion)}.node.a .mono{color:#66e3a6}
.node ul{margin:0;padding-left:16px;color:var(--mute)}
.showcase figcaption{margin-top:14px;color:var(--mute);font-size:13px}
.showcase figcaption b{color:var(--fg)}
@media (max-width:560px){.kpis{grid-template-columns:1fr 1fr}.kpis .kpi:last-child{display:none}.scenario{grid-template-columns:1fr}}

#ia{background:var(--void)}
.flow svg{width:100%;height:auto;display:block}
.flow text{font-family:var(--body);font-size:13px;fill:var(--fg)}
.flow .sub{font-family:var(--mono);font-size:9.5px;fill:var(--mute);letter-spacing:.08em}
.flow .edge{stroke:var(--line-strong);stroke-width:1.5;fill:none;stroke-dasharray:4 6;animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-20}}
.flow .box{fill:#171e0f;stroke:var(--line-strong)}
.flow .box.hi{stroke:var(--ion)}
.flow .human{fill:#1a1306;stroke:#ffb35c}

/* trajectoire */
.track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:s}
.step{border-top:1px solid var(--line-strong);padding:24px 4px 0;display:grid;gap:10px;align-content:start;position:relative}
.step::before{content:"";position:absolute;top:-2px;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--ion),var(--signal));transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.track.in .step::before{width:100%}
.track.in .step:nth-child(2)::before{transition-delay:.25s}.track.in .step:nth-child(3)::before{transition-delay:.5s}.track.in .step:nth-child(4)::before{transition-delay:.75s}
.step .n{font-family:var(--mono);font-size:13px;line-height:1;color:#fff;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-strong);background:var(--glass-2)}
.step h4{font-size:24px;font-weight:400}
.step p{color:var(--mute);font-size:14.5px}
@media (max-width:860px){.track{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}}
@media (max-width:480px){.track{grid-template-columns:1fr}}

/* projets */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.filters button{font:400 13px var(--mono);color:var(--mute);background:transparent;border:1px solid var(--line);padding:9px 16px;border-radius:999px;cursor:pointer;transition:.2s}
.filters button[aria-pressed="true"]{color:var(--void);background:var(--fg);border-color:var(--fg)}
.grid-p{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.proj{position:relative;border-radius:22px;border:1px solid var(--line);background:var(--glass);overflow:hidden;display:flex;flex-direction:column;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .3s,opacity .4s}
.proj:hover{border-color:var(--line-strong)}
.proj.hide{display:none}
.proj .scr{aspect-ratio:16/10;max-width:100%;position:relative;overflow:hidden;background:var(--h)}
.proj .scr::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 22px)}
.proj .scr svg{position:absolute;inset:14% 22%;width:56%;height:72%;color:rgba(255,255,255,.9);filter:drop-shadow(0 10px 30px rgba(0,0,0,.5));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.proj:hover .scr svg{transform:scale(1.06) translateY(-4px)}
.proj .scr .sector{position:absolute;left:14px;top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:rgba(7,10,4,.55);backdrop-filter:blur(6px)}
.proj .meta{padding:18px 20px 22px;display:grid;gap:6px}
.proj h4{font-size:21px;font-weight:400}
.proj p{color:var(--mute);font-size:14px}
.proj .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.proj .tags span{font-family:var(--mono);font-size:10.5px;color:#c2daa9;border:1px solid var(--line);padding:3px 8px;border-radius:999px}
@media (max-width:960px){.grid-p{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid-p{grid-template-columns:1fr}}

/* clients marquee */
.lwall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.lwall .logo{height:96px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:0 12px;font-size:12px;transition:background .3s}
.lwall .logo:hover{background:var(--glass)}
.lwall .logo img{height:28px}
@media (max-width:900px){.lwall{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:480px){.lwall{grid-template-columns:repeat(2,minmax(0,1fr))}.lwall .logo{height:80px}}
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:26px;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mq-row{display:flex;gap:48px;width:max-content;animation:mq 60s linear infinite}
.mq-row.rev{animation-direction:reverse;animation-duration:70s;margin-top:18px}
.mq-row span{font-family:var(--display);font-weight:500;font-size:clamp(28px,3.6vw,52px);white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(242,251,233,.45);transition:color .3s}
.mq-row span:hover{color:var(--fg)}
.mq-row span.s{color:var(--fg);-webkit-text-stroke:0}
@keyframes mq{to{transform:translateX(-50%)}}
.marquee:hover .mq-row{animation-play-state:paused}

/* stack */
.stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.stack div{background:var(--void);padding:24px;display:grid;gap:8px;align-content:start}
.stack h4{font-size:18px}
.stack p{color:var(--mute);font-size:14px}
@media (max-width:860px){.stack{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.stack{grid-template-columns:1fr}}

/* contact */
#contact{padding-block:clamp(100px,14vw,190px);overflow:hidden}
.cta-big{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;border-radius:32px;border:1px solid var(--line);padding:clamp(28px,6vw,90px);background:radial-gradient(ellipse 80% 90% at 100% 100%,rgba(154,216,47,.45),transparent 60%),radial-gradient(ellipse 50% 60% at 0% 0%,rgba(190,243,68,.12),transparent 60%),var(--glass);overflow:hidden}
.cta-big h2{font-size:clamp(38px,5.6vw,88px);max-width:17ch;margin-inline:auto}
.cta-big p{color:#a7aab6;max-width:52ch;margin:22px auto 0;font-size:clamp(16px,1.3vw,18px)}
.contact-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:40px}
.cline{display:flex;align-items:center;gap:6px;padding:6px 6px 6px 22px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(7,10,4,.5)}
.cline a{font-family:var(--display);font-weight:400;letter-spacing:-.02em;font-size:clamp(20px,2.1vw,28px);text-decoration:none;user-select:all;font-variant-numeric:tabular-nums}
.cline button{font:400 12px var(--mono);color:var(--fg);background:rgba(190,255,122,.12);border:0;padding:10px 14px;border-radius:999px;cursor:pointer;min-width:74px}
.cline button:hover{background:var(--signal)}
footer{border-top:1px solid var(--line);padding-block:30px calc(30px + env(safe-area-inset-bottom,0px))}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;color:var(--mute);font-size:13px}
footer .brand{margin-right:auto}
footer .volji-logo__mark{height:32px}
footer .volji-logo__text{font-size:16px}
footer a{text-decoration:none}
footer a:hover{color:var(--fg)}



/* ---------- phones : the 3D sits in the top band, the copy below on solid black, nothing overlaps ---------- */
@media (max-width:760px){
  .sticky{--glh:44svh}
  #gl,.poster,#css3d{height:var(--glh)!important;bottom:auto}
  #css3d{inset:0 0 auto 0}
  .vignette{background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,0) 90px,rgba(0,0,0,0) calc(var(--glh) - 70px),#000 var(--glh),#000 100%)}
  .hotspots{height:var(--glh);overflow:hidden}
  .hs span{display:none}
  .hero{top:var(--glh);bottom:auto;padding:6px 0 0}
  .hero .wrap{display:block}
  .hero h1{font-size:clamp(28px,8.4vw,38px);line-height:1.06;margin:0 0 12px;max-width:none}
  .hero p.lead{font-size:14.5px;line-height:1.5}
  .hero-actions{margin-top:18px;gap:8px}
  .hero-actions .btn{font-size:13px;padding:10px 16px}
  .hero-actions .btn.primary{padding:5px 5px 5px 16px}
  .hero-actions .btn .ico{width:32px;height:32px}
  .hero-side{display:none}
  .cap{top:var(--glh)!important;bottom:auto!important;transform:none!important}
  .cap::before{display:none}
  .cap-in,.cap.R .cap-in{max-width:none;margin:0;padding:12px 0 0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;text-align:left;align-items:flex-start;border-radius:0}
  .cap h2{font-size:26px;margin:12px 0 8px}
  .cap p{font-size:14.5px;line-height:1.5}
  .cap .chips{display:none}
  .cap.R .mores{justify-content:flex-start}
  .cap .btn{margin-top:14px}
  .cap .more{margin-top:12px}
  .chapters{bottom:max(12px,env(safe-area-inset-bottom,0px))}
}
@media (max-width:760px) and (max-height:640px){.sticky{--glh:38svh}.hero p.lead{display:none}.cap p{font-size:13.5px}}


/* ---------- portfolio : an iPad floating over a flow field, every project on one roll ---------- */
.pfolio{position:relative;margin:8px calc(50% - 50vw) 72px;height:clamp(600px,82vh,900px);overflow:hidden;background:#000}
.pf-stagebox{position:absolute;inset:0}
.pf-flow{position:absolute;inset:0;width:100%;height:100%;display:block}
.pfolio::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(90deg,#000 0,rgba(0,0,0,.7) 24%,rgba(0,0,0,0) 44%),linear-gradient(0deg,#000,rgba(0,0,0,0) 16%),linear-gradient(180deg,#000,rgba(0,0,0,0) 14%)}
.pf-device{position:absolute;z-index:2;animation:pffloat 9s ease-in-out infinite;animation-play-state:paused}.pfolio.vis .pf-device{animation-play-state:running}
@keyframes pffloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(-.35deg)}}
.pf-body,.pf-rim,.pf-shadow{position:absolute;left:0;top:0;width:1780px;height:1042px;transform-origin:0 0;border-radius:96px}
.pf-shadow{background:radial-gradient(closest-side,rgba(152,255,40,.55),rgba(152,255,40,0));opacity:.6;transform-origin:0 0}
.pf-rim{background:linear-gradient(135deg,#f4f5f2,#9a9ea6 40%,#e6e8eb 60%,#7d828a)}
.pf-body{background:#050506;box-shadow:inset 0 0 0 3px #2a2c30,inset 0 0 0 6px #050506}
.pf-body::before{content:"";position:absolute;left:21px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#3e502b,#090a08 70%)}
.pf-screen{position:absolute;left:46px;top:46px;width:1688px;height:950px;border-radius:52px;overflow:hidden;background:#000}
.pf-screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:52px;background:linear-gradient(125deg,rgba(255,255,255,.07),rgba(255,255,255,0) 38%)}
.pf-roll{display:flex;gap:120px;height:100%;will-change:transform;transition:transform 1.15s cubic-bezier(.76,0,.18,1),filter .4s}
.pf-panel{position:relative;flex:0 0 1688px;height:950px;background:#000}
.pf-panel>img{width:100%;height:100%;display:block}
.pf-panel iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .45s;background:transparent}
.pf-panel iframe.on{opacity:1}
.pf-screen.moving .pf-roll{filter:brightness(1.15) saturate(.85) blur(1.6px)}
.pf-scan{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:2;background:linear-gradient(100deg,transparent 30%,rgba(210,255,150,.25) 48%,rgba(255,255,255,.35) 50%,rgba(210,255,150,.25) 52%,transparent 70%);background-size:300% 100%}
.pf-screen.moving .pf-scan{animation:pfscan 1.15s cubic-bezier(.76,0,.18,1)}
@keyframes pfscan{0%{opacity:0;background-position:100% 0}20%{opacity:1}80%{opacity:1}100%{opacity:0;background-position:0 0}}
.pf-side{position:relative;z-index:3;height:100%;display:flex;align-items:center;pointer-events:none}
.pf-side>.wrap{width:100%}
.pf-col{width:min(400px,32vw);pointer-events:auto}
.pf-col .mono.kicker{color:var(--mute)}
.pf-list{display:grid;gap:8px;margin:18px 0 26px}
.pf-item{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:16px;width:100%;padding:14px 16px;border-radius:16px;border:1px solid transparent;background:transparent;color:inherit;text-align:left;cursor:pointer;transition:background .3s,border-color .3s,opacity .3s;opacity:.5}
.pf-item:hover{opacity:.85;background:rgba(255,255,255,.03)}
.pf-item.on{opacity:1;background:rgba(255,255,255,.05);border-color:var(--line-strong)}
.pf-item .lg{height:30px;display:flex;align-items:center}.pf-item .lg img{max-height:28px;max-width:116px;width:auto}
.pf-item b{display:block;font-weight:500;font-size:15px}.pf-item span{display:block;font:500 11px/1.4 var(--mono);color:var(--mute);letter-spacing:.04em;margin-top:4px}
.pf-detail{transition:opacity .35s,transform .35s}.pf-detail.swap{opacity:0;transform:translateY(8px)}
.pf-detail h3{font-size:clamp(22px,2vw,30px);margin:0 0 10px}.pf-detail p{color:#c0c8b9;font-size:15px}
.pf-detail .chips{margin-top:16px}
.pf-hint{margin-top:18px;color:var(--ion);font-size:12px}
@media (max-width:760px){.pfolio{height:auto;margin-bottom:48px}.pfolio::after{display:none}
  .pf-stagebox{position:relative;height:calc(100vw * .8)}.pf-side{height:auto;padding:10px 0 28px}.pf-col{width:100%}.pf-list{grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);overflow-x:auto;margin:14px 0 18px}.pf-item{grid-template-columns:1fr;gap:8px}}
@media (prefers-reduced-motion:reduce){.pf-device{animation:none}}
.lite [data-play],.lite .pf-hint,.lite .app-hint{display:none!important}
/* ---------- caption links ---------- */
.more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-family:var(--mono);font-size:13px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:3px;transition:border-color .2s,gap .2s}
.more::after{content:"›";font-size:16px;line-height:1}
.more:hover{border-color:var(--ion);gap:12px}
.cap .more{pointer-events:none}
.cap.live .more{pointer-events:auto}
.mores{display:flex;flex-wrap:wrap;gap:6px 22px}
.cap.R .mores{justify-content:flex-end}
.cap .btn+.more{margin-left:0}
/* ---------- nav ---------- */
/* ---------- home blocks ---------- */
.center-row{display:flex;justify-content:center;margin-top:28px}
.grid-p.collapsed .proj:nth-child(n+7){display:none}
.teaser{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,80px);align-items:center;border-radius:28px;border:1px solid var(--line);padding:clamp(24px,5vw,64px);background:radial-gradient(ellipse 70% 90% at 0% 100%,rgba(154,216,47,.18),transparent 60%),var(--glass)}
.teaser h2{font-size:clamp(30px,3.6vw,52px);margin:18px 0 16px}
.teaser-copy>p{color:#a7aab6;max-width:52ch}
.teaser-list{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.teaser-list li{background:var(--void);padding:18px 20px;display:grid;gap:4px}
.teaser-list b{font-family:var(--mono);font-weight:500;font-size:12px;color:var(--ion)}
.teaser-list span{color:#d0d8c9;font-size:15px}
@media (max-width:860px){.teaser{grid-template-columns:1fr}}
.track.five{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1000px){.track.five{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.track.five{grid-template-columns:1fr}}
.founder{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center;max-width:980px;margin:0 auto}
.founder-mark svg{width:clamp(90px,14vw,170px);height:auto;fill:#fff;filter:drop-shadow(0 0 40px rgba(154,216,47,.45))}
.founder h2{font-size:clamp(30px,3.6vw,52px);margin:18px 0 16px}
.founder p{color:#a7aab6;max-width:58ch}
@media (max-width:700px){.founder{grid-template-columns:1fr}}
/* ---------- contact form ---------- */
.contact-box{gap:0}
.cform{width:100%;max-width:760px;margin-top:36px;text-align:left;display:grid;gap:18px}
.ctype{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ctype legend{color:var(--mute);margin-bottom:10px;padding:0}
.ctype label{position:relative;cursor:pointer}
.ctype input{position:absolute;opacity:0;pointer-events:none}
.ctype span{display:inline-block;font-family:var(--mono);font-size:13px;padding:9px 16px;border-radius:999px;border:1px solid var(--line-strong);color:#d0d8c9;transition:.2s}
.ctype input:checked+span{background:#fff;color:#000;border-color:#fff}
.ctype input:focus-visible+span{outline:2px solid var(--ion);outline-offset:2px}
.cgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cgrid label{display:grid;gap:6px}
.cgrid label.full{grid-column:1/-1}
.cgrid .mono{color:var(--mute)}
.cgrid input,.cgrid textarea{font:inherit;font-size:15px;color:#fff;background:rgba(0,0,0,.5);border:1px solid var(--line-strong);border-radius:12px;padding:12px 14px;resize:vertical;min-width:0}
.cgrid input:focus,.cgrid textarea:focus{outline:none;border-color:var(--ion)}
.cfoot{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.cnote{color:#a7aab6;font-size:14px;max-width:44ch}
@media (max-width:600px){.cgrid{grid-template-columns:1fr}}
/* ---------- detail pages ---------- */
#pages .page{display:block}
#pages .page[hidden]{display:none}
.phero{position:relative;padding:calc(130px + env(safe-area-inset-top,0px)) 0 clamp(50px,7vw,90px);background:radial-gradient(ellipse 60% 70% at 85% 0%,rgba(154,216,47,.22),transparent 65%),radial-gradient(ellipse 40% 50% at 10% 100%,rgba(190,243,68,.06),transparent 70%);border-bottom:1px solid var(--line);overflow:hidden}
.phero::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(190,255,122,.05) 0 1px,transparent 1px 48px),repeating-linear-gradient(90deg,rgba(190,255,122,.05) 0 1px,transparent 1px 48px);mask-image:linear-gradient(180deg,#000,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%)}
.phero .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start}
.crumb{display:flex;gap:10px;color:var(--mute);margin-bottom:28px;font-size:12px}
.crumb a{color:#d0d8c9;text-decoration:none}.crumb a:hover{color:#fff}
.phero h1{font-size:clamp(36px,5.2vw,80px);letter-spacing:-.04em;line-height:1.04;margin:20px 0 22px;max-width:17ch}
.lede{color:#c0c8b9;font-size:clamp(16px,1.35vw,19px);max-width:60ch}
.note{color:var(--ion);margin-top:16px;font-size:12px}
.phero .hero-actions{margin-top:32px}
.pblock{padding-block:clamp(48px,6vw,84px)}
.pblock+.pblock{padding-top:0}
.ph2{font-size:clamp(28px,3.2vw,46px);margin-bottom:clamp(24px,3vw,40px)}
.facts.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:700px){.facts.row3{grid-template-columns:1fr}}
.psplit{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:start}
.psplit h2{font-size:clamp(28px,3.2vw,46px)}
@media (max-width:860px){.psplit{grid-template-columns:1fr}}
.gains{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.gains li{position:relative;padding:20px 0 20px 40px;border-bottom:1px solid var(--line);font-size:clamp(17px,1.4vw,20px);color:#e9eee4}
.gains li::before{content:"";position:absolute;left:4px;top:28px;width:14px;height:8px;border-left:2px solid var(--ion);border-bottom:2px solid var(--ion);transform:rotate(-45deg)}
.prose{display:grid;gap:16px;color:#d0d8c9;font-size:17px;max-width:62ch}
.offers.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){.offers.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.offers.three{grid-template-columns:1fr}}
.touchzone.single{grid-template-columns:1fr}
.touchzone.single .touchpad{aspect-ratio:16/6}
@media (max-width:700px){.touchzone.single .touchpad{aspect-ratio:4/3}}
.psplit-copy p{color:#a7aab6;margin-top:6px;max-width:52ch}
.cases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.case{border-radius:20px;border:1px solid var(--line);padding:22px;background:linear-gradient(170deg,var(--glass-2),var(--glass));display:grid;gap:10px;align-content:start}
.case .mono{color:var(--ion)}
.case h3{font-size:21px;font-weight:400}
.case p{color:var(--mute);font-size:14.5px}
@media (max-width:960px){.cases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.cases{grid-template-columns:1fr}}
.faq{border-top:1px solid var(--line);max-width:900px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-size:clamp(17px,1.4vw,20px);color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--ion);font-size:20px;line-height:1;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline:2px solid var(--ion);outline-offset:4px}
.faq details p{color:#a7aab6;padding:0 0 22px;max-width:70ch}
.pcta{border-radius:28px;border:1px solid var(--line);padding:clamp(28px,5vw,64px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;background:radial-gradient(ellipse 80% 90% at 50% 120%,rgba(154,216,47,.35),transparent 60%),var(--glass)}
.pcta h2{font-size:clamp(28px,3.6vw,52px);max-width:20ch}
.pcta p{color:#a7aab6;max-width:50ch}
.pcta .btn{margin-top:10px}
.pnext{border-top:1px solid var(--line);padding-block:12px 40px}
.pnext .wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pn{display:grid;gap:6px;padding:22px 24px;border-radius:18px;border:1px solid var(--line);text-decoration:none;font-size:clamp(18px,1.6vw,24px);transition:border-color .3s,background .3s}
.pn .mono{color:var(--mute)}
.pn.next{text-align:right}
.pn:hover{border-color:var(--line-strong);background:var(--glass)}
@media (max-width:600px){.pnext .wrap{grid-template-columns:1fr}.pn.next{text-align:left}}
@media (max-width:1100px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .reveal{transform:none;opacity:1}
}


/* ═══════════ Voile de chargement ═══════════ */
#boot{position:fixed;inset:0;z-index:999;display:grid;place-items:center;
  background:radial-gradient(ellipse 60% 50% at 50% 45%,#1d2614,#000 72%);
  transition:opacity .8s ease,visibility .8s}
.booted #boot{opacity:0;visibility:hidden;pointer-events:none}
.boot-in{display:grid;justify-items:center;gap:26px;padding:0 24px}
.boot-mark{width:72px;height:auto;fill:var(--fg);opacity:.96;
  animation:bootPulse 2.4s ease-in-out infinite}
@keyframes bootPulse{0%,100%{opacity:.5;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.boot-bar{width:min(260px,52vw);height:2px;background:rgba(255,255,255,.12);
  border-radius:2px;overflow:hidden}
.boot-bar i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--signal),var(--ion));
  box-shadow:0 0 14px rgba(190,243,68,.55)}
.boot-txt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute)}
@media (prefers-reduced-motion:reduce){.boot-mark{animation:none}}

/* ═══════════ Ecran de marque : fin de parcours ═══════════ */
.final-top{align-items:center}
.final .mark svg{filter:drop-shadow(0 0 22px rgba(154,216,47,.35))}
.tiles{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.tile{padding:24px 22px 26px;border-radius:20px;gap:12px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(170deg,rgba(42,64,18,.72),rgba(16,21,11,.72));
  backdrop-filter:blur(8px);
  transition:border-color .35s,transform .35s,background .35s}
/* trait lumineux en tete de carte, revele au survol */
.tile::before{content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--ion),transparent);
  opacity:0;transition:opacity .35s}
.tile:hover::before,.tile:focus-visible::before{opacity:.9}
.tile:hover,.tile:focus-visible{transform:translateY(-6px);
  border-color:rgba(190,243,68,.45);
  background:linear-gradient(170deg,rgba(60,92,26,.85),rgba(16,21,11,.8))}
.tile .mono{font-size:11px;letter-spacing:.18em;color:var(--ion);opacity:.85}
.tile h3{font-weight:500;letter-spacing:-.02em;line-height:1.12}
.tile p{font-size:13.5px;line-height:1.55;color:#a9b89a}
/* la premiere carte porte le metier historique, la derniere s'adresse aux PME */
.tile.main{background:linear-gradient(160deg,rgba(154,216,47,.42),rgba(21,28,14,.72) 64%);
  border-color:rgba(190,243,68,.3)}
.tile:last-child{background:linear-gradient(170deg,rgba(26,34,18,.72),rgba(16,21,11,.72))}
.tile:last-child .mono{color:var(--mute)}
@media (max-width:1180px){
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tile:nth-child(n+4){grid-column:span 1}
}
@media (max-width:760px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tile{padding:16px 14px 18px;border-radius:16px}
  .tile p{display:none}
}

/* Repli quand la marque n'a pas de logo au catalogue : un mot-symbole compose
   dans la fonte du site plutot qu'un rognage sur fond etranger. */
.pf-item .lg .lgw{font-style:normal;font-family:var(--display);font-weight:600;
  font-size:13px;line-height:1.15;letter-spacing:-.01em;color:var(--fg);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;max-width:116px;opacity:.92}


/* ═══════════ Bas de page : ruban, titres, bande, clôture ═══════════ */

/* Ruban de lumière : une image dessinée une seule fois, que l'on ne fait que
   déplacer ensuite. Aucun calcul par image, donc rien ne concurrence la 3D. */
#ribbonWrap{position:fixed;inset:-30vh 0 auto 0;height:160vh;z-index:-1;pointer-events:none;
  visibility:hidden;will-change:transform;
  /* piloté par le défilement : aucune transition ne doit s'y greffer, pas même
     celle de 1 ms que la règle « animations réduites » pose sur tout le site */
  transition:none!important}
#ribbon{display:block;width:100%;height:100%;opacity:.9;
  animation:ribbonDrift 46s ease-in-out infinite alternate}
@keyframes ribbonDrift{from{transform:scale(1) rotate(0deg)}to{transform:scale(1.06) rotate(1.6deg)}}
@media (prefers-reduced-motion:reduce){#ribbon{animation:none}}
.final-ribbon{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  mix-blend-mode:screen;opacity:.85}
.final .wrap{position:relative}

/* Un mot par titre passe en italique à empattements : c'est lui qui porte le
   sens, le reste de la phrase l'amène. */
#home h2 em,.final-top p em,.band-line em{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;
  font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1.1em;line-height:1}

/* En-têtes de section : étiquette, titre à gauche, texte rejeté à droite. */
#home .sec-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  column-gap:clamp(24px,5vw,80px);row-gap:22px;align-items:end;text-align:left;
  max-width:none;margin-inline:0}
#home .sec-head .kicker{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;
  gap:8px;padding:6px 13px;border-radius:999px;border:1px solid var(--line-strong);
  background:rgba(255,255,255,.03);font-size:11px;letter-spacing:.12em;text-transform:lowercase;
  color:#daeac9}
#home .sec-head .kicker::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--ion);box-shadow:0 0 8px var(--ion)}
#home .sec-head h2{grid-column:1;margin:0;max-width:15ch}
#home .sec-head .intro{grid-column:2;margin:0;max-width:44ch;padding-bottom:.5em}
@media (max-width:860px){
  #home .sec-head{grid-template-columns:1fr}
  #home .sec-head h2,#home .sec-head .intro{grid-column:1}
}

/* Bande d'accent : la seule surface claire de la page, pour une seule phrase. */
.band{position:relative;overflow:hidden;text-align:center;color:#101409;
  padding-block:clamp(96px,14vw,184px);background-color:var(--ion);
  background-image:radial-gradient(rgba(16,20,9,.17) 1px,transparent 1.5px);background-size:26px 26px}
.band-tag{color:rgba(16,20,9,.62);letter-spacing:.14em}
.band-line{font-family:var(--display);font-weight:500;letter-spacing:-.035em;line-height:1.08;
  font-size:clamp(32px,5vw,70px);max-width:19ch;margin:24px auto 0;text-wrap:balance}
/* les mots s'allument au fil du défilement */
.band-line .bw{opacity:.22;transition:opacity .4s ease}
.band-line .bw.on{opacity:1}

/* Clôture : une carte d'accent qui parle, une carte sombre qui écoute. */
.close-pair{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:16px;
  padding:0;border:0;background:none;text-align:left;align-items:stretch}
.close-lead{display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  border-radius:28px;padding:clamp(28px,3.6vw,52px);color:#101409;background-color:var(--ion);
  background-image:radial-gradient(rgba(16,20,9,.15) 1px,transparent 1.5px);background-size:24px 24px}
.close-lead .pill{color:#101409;border-color:rgba(16,20,9,.3);background:rgba(16,20,9,.07);backdrop-filter:none}
.close-lead h2{font-size:clamp(36px,4.2vw,60px);color:#101409;margin:0}
.close-lead>p{color:rgba(16,20,9,.8);max-width:36ch}
.close-lead .contact-row{margin-top:auto;padding-top:26px;justify-content:flex-start;gap:10px;
  flex-direction:column;align-items:flex-start}
.close-lead .cline{background:#101409;border-color:#101409}
.close-lead .cline a{color:#f6f8f4;font-size:clamp(17px,1.5vw,21px)}
.close-form{border-radius:28px;padding:clamp(24px,3.2vw,46px);border:1px solid var(--line-strong);
  background:rgba(15,17,12,.82);backdrop-filter:blur(12px)}
.close-form .cform{margin-top:0;max-width:none}
@media (max-width:900px){.close-pair{grid-template-columns:1fr}}


/* ═══════════ Flux continu et écran de marque en deux volets ═══════════ */

/* Teintes du flux, en triplets r,g,b lus par ribbon.js. */
:root{--rb-1:154,216,47;--rb-2:190,243,68;--rb-3:238,255,176;--rb-4:92,188,204}

/* Le canvas de page couvre exactement la fenêtre : c'est le script qui choisit
   la tranche du flux à y dessiner, il n'y a plus rien à déplacer en CSS. */
#ribbonWrap{inset:0;height:auto;will-change:auto}
#ribbon{opacity:1;animation:none}
.final-ribbon{mix-blend-mode:normal;opacity:1}

/* Écran de marque : même fond que la page, sinon son bord dessine une marche.
   Le quadrillage et le halo disparaissent, le flux fait le décor. */
.final{background:var(--void)}
.final .wrap{position:relative;z-index:1;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:center;gap:clamp(28px,5vw,88px)}
.final-top{grid-template-columns:1fr;align-items:start;gap:clamp(18px,3vh,34px)}
.final .mark{font-size:clamp(40px,5.4vw,88px)}
.final-top p{max-width:34ch}

/* Les expertises vivent dans un panneau translucide : on lit le flux à travers. */
.final-panel{border-radius:24px;border:1px solid rgba(255,255,255,.11);
  background:rgba(18,22,18,.44);backdrop-filter:blur(16px) saturate(125%);
  -webkit-backdrop-filter:blur(16px) saturate(125%);
  padding:16px;box-shadow:0 34px 90px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)}
.fp-head{display:flex;justify-content:space-between;gap:14px;padding:6px 8px 16px;
  font-size:11px;letter-spacing:.12em;color:#9aa3a0}
.fp-head span:last-child{color:#6f7774}
.final-panel .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.final-panel .tile{padding:16px 16px 18px;border-radius:14px;gap:8px;
  background:rgba(6,8,6,.6);border:1px solid rgba(255,255,255,.08);backdrop-filter:none}
.final-panel .tile:hover,.final-panel .tile:focus-visible{transform:translateY(-3px);
  background:rgba(14,18,12,.78)}
.final-panel .tile h3{font-size:clamp(17px,1.45vw,21px)}
.final-panel .tile p{font-size:12.5px;line-height:1.5}
.final-panel .tile.main{background:rgba(6,8,6,.6)}
/* l'offre PME ferme le panneau sur toute sa largeur, comme une ligne d'état */
.final-panel .tile:last-child{grid-column:1/-1;grid-template-columns:auto 1fr;align-items:baseline;
  column-gap:16px;row-gap:4px}
.final-panel .tile:last-child h3 br{display:none}
.final-panel .tile:last-child p{grid-column:2}
@media (max-width:1180px){.final-panel .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .final .wrap{grid-template-columns:1fr;gap:20px}
  .final .mark{font-size:clamp(34px,9vw,56px)}
  .final-top p{font-size:15px}
  .fp-head{display:none}
  .final-panel{padding:10px;border-radius:18px}
  .final-panel .tile{padding:12px}
  .final-panel .tile p{display:none}
  .final-panel .tile:last-child{grid-template-columns:1fr}
}

/* Plus de brouillard ni de halo entre les blocs : le flux passe partout. */
.sec-glow::before{display:none}
.pfolio{background:transparent}

/* La marge par défaut du navigateur (8px) n'avait jamais été annulée : elle
   laissait un liseré sur les blocs pleine largeur et décalait la scène. */
body{margin:0}


/* ═══════════ Cadres neutres : expertises en biais, projets sans tablette ═══════════ */

/* Le panneau des expertises est posé en biais et suit légèrement le pointeur.
   Les angles sont des variables : le script ne fait qu'y écrire. */
.final .wrap{perspective:1500px}
.final-panel{transform:rotateY(var(--ry,-13deg)) rotateX(var(--rx,4deg)) translateZ(0);
  transform-origin:65% 50%;will-change:transform}
@media (prefers-reduced-motion:reduce){.final-panel{transform:rotateY(-13deg) rotateX(4deg)}}
@media (max-width:900px){.final-panel{transform:none}}

/* Projets : plus de tablette. Le même verre que le panneau des expertises,
   dans la perspective que le cadre avait déjà. */
.pf-rim,.pf-shadow{display:none}
.pf-body{background:rgba(18,22,18,.46);border-radius:60px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.11),inset 0 3px 0 rgba(255,255,255,.05),0 60px 140px rgba(0,0,0,.55);
  backdrop-filter:blur(16px) saturate(125%);-webkit-backdrop-filter:blur(16px) saturate(125%)}
.pf-body::before{display:none}
.pf-screen{border-radius:26px}
/* le masque noir fondait l'ancien brouillard dans le fond ; il éteignait le flux */
.pfolio::after{display:none}
/* la liste n'a plus ce masque derrière elle : un verre léger garde le texte lisible
   quand le faisceau passe dessous */
.pf-col{padding:20px 22px;border-radius:22px;border:1px solid rgba(255,255,255,.08);
  background:rgba(6,8,6,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* Aucune séparation entre les grands blocs : la phrase d'accent garde sa place
   mais perd son fond plein, qui coupait le flux en deux ; le filet du pied de
   page disparaît aussi. */
.band{background:none;color:var(--fg)}
.band-tag{color:var(--mute)}
.band-line em{color:var(--ion)}
footer{border-top:0}

/* Huit projets au lieu de quatre : la colonne dépassait du bloc et son bas était
   rogné. La liste se resserre, et le bloc suit désormais la hauteur du contenu. */
.pfolio{height:auto;min-height:clamp(600px,82vh,900px)}
.pf-side{height:auto;min-height:clamp(600px,82vh,900px);padding-block:26px}
@media (min-width:761px){
  .pf-list{gap:2px;margin:14px 0 18px}
  .pf-item{padding:8px 12px;grid-template-columns:96px 1fr;gap:14px;border-radius:12px}
  .pf-item .lg{height:26px}
  .pf-item .lg img{max-height:24px;max-width:92px}
  .pf-item .lg .lgw{font-size:12px;max-width:92px}
  .pf-item>span:last-child{min-width:0}
  .pf-item>span:last-child>b,.pf-item>span:last-child>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* le faisceau passe désormais derrière la phrase : une ombre portée la détache */
.band-line{text-shadow:0 2px 26px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.7)}

/* Mur de logos : il lui faut un fond, sinon le faisceau transparaît à travers
   les logos et semble passer devant. Le même verre que les autres cadres : le
   flux reste visible, mais clairement derrière. */
.lwall{background:rgba(6,8,6,.74);backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);border-radius:18px;overflow:hidden}
.lwall .logo img{opacity:.95}

/* Calques jouables du showroom : leur anneau et leur halo étaient verts, si bien que
   le plateau paraissait changer de matière selon que l'app était lancée ou non. Un
   liseré clair suffit à signaler qu'on peut toucher. */
#css3d .disc{box-shadow:0 0 0 10px rgba(255,255,255,.05),0 0 60px rgba(0,0,0,.45)}
#css3d .disc.live{box-shadow:0 0 0 10px rgba(255,255,255,.16),0 0 70px rgba(0,0,0,.5)}
#css3d .tapp.live{box-shadow:0 0 0 6px rgba(255,255,255,.16),0 0 70px rgba(0,0,0,.5)}


/* ═══════════ Projets : le cadre prend le format de la démo ═══════════ */

/* `.pf-body` n'est plus que le plan en perspective ; le verre est un enfant que
   le script dimensionne au format du projet affiché (16:9, 4:3, carré, mur). */
.pf-body{background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0}
.pf-glass{position:absolute;left:0;top:0;width:1780px;height:1042px;border-radius:60px;
  background:rgba(18,22,18,.46);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.11),inset 0 3px 0 rgba(255,255,255,.05),0 60px 140px rgba(0,0,0,.55);
  backdrop-filter:blur(16px) saturate(125%);-webkit-backdrop-filter:blur(16px) saturate(125%)}
.pf-glass .pf-screen{left:46px;top:46px;right:46px;bottom:46px;width:auto;height:auto}
.pf-anim .pf-glass{transition:left 1.15s cubic-bezier(.76,0,.18,1),top 1.15s cubic-bezier(.76,0,.18,1),
  width 1.15s cubic-bezier(.76,0,.18,1),height 1.15s cubic-bezier(.76,0,.18,1),border-radius 1.15s cubic-bezier(.76,0,.18,1)}
.pf-roll{height:1100px;transition:none}
.pf-anim .pf-roll{transition:transform 1.15s cubic-bezier(.76,0,.18,1),filter .4s}
.pf-panel{height:1100px;background:none}
.pf-fit{position:absolute;overflow:hidden;background:#000}
.pf-fit>img{width:100%;height:100%;display:block;object-fit:cover}
/* démo circulaire (table ronde) : le verre et la fenêtre deviennent des disques */
.pf-glass.round,.pf-glass.round .pf-screen,.pf-glass.round .pf-screen::after,.pf-fit.round{border-radius:50%}
@media (prefers-reduced-motion:reduce){.pf-anim .pf-glass,.pf-anim .pf-roll{transition:none}}


/* ═══════════ Étiquettes, liens d'action, mot fort des titres ═══════════ */

/* Les étiquettes quittent la machine à écrire pour la police du site : même
   famille que les titres, un peu plus de graisse et d'air pour rester des
   étiquettes. Seul le logo garde sa police à chasse fixe. */
.mono{font-weight:500;letter-spacing:.05em}
.btn{font-weight:500;letter-spacing:.01em}
.hs span{font-weight:500;letter-spacing:.02em}
.pill,.chip{letter-spacing:.03em}

/* « En savoir plus » : une capsule lime. Au survol, la couleur la remplit de
   gauche à droite, le texte passe au sombre et la flèche pivote. */
.more{position:relative;isolation:isolate;overflow:hidden;gap:14px;margin-top:18px;padding:5px 5px 5px 20px;
  border-radius:999px;border:1px solid rgba(190,243,68,.5);background:rgba(190,243,68,.08);
  font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.01em;color:var(--ion);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 0 rgba(190,243,68,0);transition:color .35s,border-color .35s,box-shadow .45s,transform .35s}
.more::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--ion);
  transform:translateX(-101%);transition:transform .5s cubic-bezier(.76,0,.18,1)}
.more::after{content:"\2192";flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--ion);color:#06080a;font-size:17px;font-weight:500;line-height:1;
  transition:transform .4s cubic-bezier(.76,0,.18,1),background .35s,color .35s}
.more:hover,.more:focus-visible{color:#06080a;border-color:var(--ion);gap:14px;transform:translateY(-2px);
  box-shadow:0 10px 44px rgba(190,243,68,.34)}
.more:hover::before,.more:focus-visible::before{transform:none}
.more:hover::after,.more:focus-visible::after{background:#06080a;color:var(--ion);transform:rotate(-45deg)}
.mores{gap:10px 12px}
@media (max-width:760px){.more{font-size:13px;padding:4px 4px 4px 16px}.more::after{width:30px;height:30px;font-size:15px}}
@media (prefers-reduced-motion:reduce){.more,.more::before,.more::after{transition:none}}

/* Dans les titres du showroom, le mot qui porte le sens reprend le dégradé du
   titre d'accueil, du blanc vers le lime. */
#home .cap h2 em{font-family:inherit;font-style:normal;font-weight:inherit;font-size:1em;letter-spacing:inherit;line-height:inherit;
  background:linear-gradient(90deg,#f6ffe4,var(--ion));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:.08em}

/* Logos de la sélection : le bloc-marque de la préfecture est carré, il lui faut
   plus de hauteur que les logos en longueur pour rester reconnaissable. */
.pf-item .lg.tall{height:40px}
.pf-item .lg.tall img{max-height:40px}


/* ═══════════ Projets : second écran (borne devant le mur) ═══════════ */

/* Les apps du showroom se cachent en `visibility` (voir showroom.js) : rien à
   régler ici. Le second cadre d'un projet à deux écrans passe devant le premier
   et n'apparaît que pour ce projet. */
.pf-glass2{z-index:2;border-radius:44px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(46px) scale(.96);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.13),inset 0 3px 0 rgba(255,255,255,.05),0 50px 120px rgba(0,0,0,.7)}
.pf-glass2.on{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.pf-anim .pf-glass2{transition:opacity .45s,transform .7s cubic-bezier(.2,.7,.2,1),visibility 0s .45s}
.pf-anim .pf-glass2.on{transition:opacity .6s .5s,transform .9s cubic-bezier(.2,.7,.2,1) .5s,visibility 0s}
.pf-screen2{position:absolute;inset:30px;border-radius:18px;overflow:hidden;background:#000}
.pf-fit2{position:absolute;inset:0;opacity:0;visibility:hidden}
.pf-fit2.on{opacity:1;visibility:visible}
.pf-fit2>img{width:100%;height:100%;display:block;object-fit:cover}
.pf-fit2 iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .45s;background:transparent}
.pf-fit2 iframe.on{opacity:1}
@media (prefers-reduced-motion:reduce){.pf-anim .pf-glass2,.pf-anim .pf-glass2.on{transition:none}}


/* ═══════════ Logo : demi-tête de loup en pixel art ═══════════ */

/* La tête est coupée sur son axe et vient se coller au nom : le texte tient la
   place de l'autre moitié. Les nuances du pelage sont des opacités d'une seule
   couleur (celle du texte) ; seul l'œil est en lime. Les hauteurs sont des
   multiples de 24 rangées quand c'est possible, pour des pixels nets. */
.volji-logo{gap:7px}
.volji-logo__mark{height:48px}
@media (max-width:767.98px){.volji-logo__mark{height:36px}}
footer .volji-logo__mark{height:36px}
.mark{gap:.14em}
.boot-mark{width:auto;height:120px}
.founder-mark svg{width:auto;height:clamp(144px,17vw,216px)}


/* ═══════════ Mots en dégradé visibles d'emblée ; bulles de l'agent en mobile ═══════════ */

/* Le dégradé était posé sur le <em>, mais le titre est découpé mot à mot et chaque
   mot arrive avec un flou : tant que ce flou tournait, le mot n'était pas peint
   dans le dégradé du parent et restait invisible. Le dégradé est donc porté par
   le mot lui-même, qui ne passe plus par le flou : il se forme lettre à lettre
   (voir formWord dans app.js). */
.hero h1.wsplit em,#home .cap h2.wsplit em{background:none}
.hero h1 em .w,#home .cap h2 em .w{-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.14em;margin-bottom:-.14em}
.hero h1 em .w{background-image:linear-gradient(90deg,#d2ff9e,var(--ion))}
#home .cap h2 em .w{background-image:linear-gradient(90deg,#f6ffe4,var(--ion))}
.js .hero h1.wsplit em .w,.js #home .cap h2.wsplit em .w{filter:none;opacity:1;transform:none;transition:none}

/* Bulles de l'agent IA en mobile : elles suivaient l'orbe, qui n'est pas au centre
   de l'écran, et débordaient sur le côté ou tombaient sur le texte. Elles sont
   maintenant centrées dans l'écran et posées au bas de la zone 3D, d'où elles
   s'empilent vers le haut. --jx et --jy : position de l'orbe, écrite par la scène. */
@media (max-width:760px){
  #jv .bubbles{left:calc(50vw - var(--jx,50vw));right:auto;top:auto;
    bottom:calc(var(--jy,0px) - var(--glh,44svh) - 6px);transform:translateX(-50%);
    width:min(340px,92vw);align-items:center}
  #jv .bub{max-width:100%}
}


/* ═══════════ Portfolio en composant ; exemple de site ═══════════ */

/* captures longues : la page défile seule dans le cadre, aller-retour */
.pf-fit.scroll>img{height:auto;object-fit:fill}
.pf-fit.scroll.cur>img{animation:pfScroll 22s ease-in-out 1.2s infinite alternate}
@keyframes pfScroll{to{transform:translateY(calc(var(--bh) - 100%))}}
.pfolio:not(.vis) .pf-fit.scroll>img{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.pf-fit.scroll.cur>img{animation:none}}
/* écran de téléphone : angles plus ronds */
.pf-glass.phone{border-radius:84px}
.pf-glass.phone .pf-screen,.pf-glass.phone .pf-screen::after{border-radius:46px}
/* dans les pages, le portfolio suit le titre de section */
.page .pfolio{margin-top:24px}

/* Exemple de site : une capture dans un cadre de navigateur, posée en perspective */
.web-ex-block{padding-top:0}
.web-ex{margin:0 auto;max-width:1120px;border-radius:22px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);background:rgba(18,22,18,.5);
  box-shadow:0 50px 120px rgba(0,0,0,.6),0 0 0 1px rgba(190,243,68,.05),0 0 90px rgba(154,216,47,.12);
  transform:perspective(2000px) rotateX(7deg);transform-origin:50% 0;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.web-ex:hover{transform:perspective(2000px) rotateX(0)}
.web-ex-bar{display:flex;gap:7px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(10,12,10,.75)}
.web-ex-bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.web-ex img{display:block;width:100%;height:auto}
@media (max-width:760px){.web-ex{border-radius:14px;transform:none}}


/* ═══════════ Mobile : flux atténué, portfolio en cartes ═══════════ */

/* Sur un écran étroit le faisceau passe sous tout le texte : on le baisse pour que
   la lecture reste confortable. */
@media (max-width:760px){
  #ribbon{opacity:.26}
  .final-ribbon{opacity:.5}
}

/* Portfolio sur téléphone : l'écran en perspective et la liste laissent la place à
   des cartes que l'on fait glisser, chacune avec son aperçu et son texte. */
.pf-mob{display:none}
@media (max-width:760px){
  .pfolio{height:auto;min-height:0;margin-bottom:40px}
  .pfolio .pf-stagebox,.pfolio .pf-side{display:none}
  .pf-mob{display:block;padding-top:6px}
  .pf-mob>.kicker{display:block;padding-inline:var(--gutter);color:var(--mute);margin-bottom:14px}
  .pf-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:7vw;
    padding:4px 7vw 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .pf-track::-webkit-scrollbar{display:none}
  .pf-card{flex:0 0 86vw;scroll-snap-align:center;border-radius:22px;overflow:hidden;
    border:1px solid rgba(255,255,255,.1);background:rgba(10,13,10,.88);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;flex-direction:column}
  .pf-shot{height:min(54vw,300px);display:flex;align-items:center;justify-content:center;padding:14px 14px 0;overflow:hidden}
  .pf-shot img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:12px;display:block;
    box-shadow:0 14px 40px rgba(0,0,0,.5)}
  .pf-card.round .pf-shot img{border-radius:50%}
  .pf-card.phone .pf-shot img{border-radius:18px}
  .pf-card.long .pf-shot img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:12px 12px 0 0}
  .pf-card.long .pf-shot{align-items:stretch;padding-bottom:0}
  .pf-cbody{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px}
  .pf-cbody .lg{height:26px;display:flex;align-items:center;margin-bottom:4px}
  .pf-cbody .lg img{max-height:24px;max-width:110px;width:auto}
  .pf-cbody .lg.tall{height:40px}.pf-cbody .lg.tall img{max-height:40px}
  .pf-cbody .lg .lgw{font-style:normal;font-family:var(--display);font-weight:600;font-size:14px}
  .pf-cbody h3{font-size:21px;margin:0;line-height:1.2}
  .pf-ck{font-size:11px;color:var(--mute)}
  .pf-cbody p{font-size:14px;line-height:1.5;color:#c0c8b9;margin:4px 0 0}
  .pf-cbody .chips{margin-top:8px}
  .pf-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
  .pf-dots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.22);
    transition:width .3s,background .3s;cursor:pointer}
  .pf-dots button.on{width:22px;background:var(--ion)}
  .pf-mhint{text-align:center;margin-top:12px;font-size:11px;color:var(--mute)}
}

/* En-tête des pages : son halo vert finissait net sur un filet, avec un second
   halo collé au bord bas. Le filet disparaît et le halo s'éteint en fondu avant
   le bas de l'en-tête, pour que la page continue sans couture. */
.phero{background:none;border-bottom:0}
.phero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 85% 0%,rgba(154,216,47,.22),transparent 65%);
  -webkit-mask-image:linear-gradient(180deg,#000 35%,transparent 92%);mask-image:linear-gradient(180deg,#000 35%,transparent 92%)}


/* ═══════════ Menu : repris du site Elecom Robotics, aux couleurs Volji ═══════════
   Ordinateur : soulignement lumineux, sous-menu qui se déplie (clip-path) avec ses
   liens en cascade. Mobile (< 980 px) : le burger devient une croix, le panneau
   s'ouvre en cercle depuis le bouton, les rubriques montent une à une et le
   sous-menu se déroule en accordéon. */
.mnav{display:flex;align-items:center;gap:6px;margin-left:auto;--ease:cubic-bezier(.2,.8,.2,1)}
.mnav .dd{position:relative}
.mnav .ddb,.mnav .nl{position:relative;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border:0;background:none;color:#e6e8ec;font:400 14.5px var(--body);text-decoration:none;cursor:pointer;border-radius:99px;transition:color .25s}
.mnav .ddb::after,.mnav .nl::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,rgba(190,243,68,0),var(--ion),rgba(190,243,68,0));box-shadow:0 0 10px rgba(190,243,68,.8);transform:scaleX(0);transition:transform .45s var(--ease)}
.mnav .ddb:hover,.mnav .nl:hover,.mnav .dd.open .ddb,.mnav .dd:hover .ddb,.mnav .cur>.ddb,.mnav .nl.cur{color:var(--ion)}
.mnav .ddb:hover::after,.mnav .nl:hover::after,.mnav .dd.open .ddb::after,.mnav .dd:hover .ddb::after,.mnav .cur>.ddb::after,.mnav .nl.cur::after{transform:scaleX(1)}
.mnav .chv{width:10px;height:10px;transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.mnav .dd.open .chv,.mnav .dd:hover .chv{transform:rotate(180deg)}
.mnav .dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.mnav .ddm{position:absolute;top:100%;left:-8px;min-width:300px;margin-top:10px;padding:8px;border-radius:18px;
  background:linear-gradient(180deg,rgba(14,17,12,.98),rgba(6,8,6,.98));border:1px solid rgba(255,255,255,.12);
  box-shadow:0 34px 80px rgba(0,0,0,.7),0 0 40px rgba(190,243,68,.06);
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.97);transform-origin:24px 0;clip-path:inset(0 0 100% 0 round 18px);
  transition:opacity .25s,transform .5s var(--ease),clip-path .5s var(--ease),visibility 0s .5s;z-index:5}
.mnav .ddm::after{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;background:linear-gradient(90deg,rgba(190,243,68,0),rgba(190,243,68,.9),rgba(190,243,68,0))}
.mnav .dd:hover .ddm,.mnav .dd.open .ddm,.mnav .dd:focus-within .ddm{opacity:1;visibility:visible;transform:none;clip-path:inset(0 0 0 0 round 18px);transition:opacity .2s,transform .5s var(--ease),clip-path .55s var(--ease),visibility 0s}
.mnav .ddi{display:grid;gap:2px}
.mnav .ddm a{position:relative;display:block;padding:10px 34px 10px 16px;border-radius:12px;text-decoration:none;color:#f1f2f4;opacity:0;transform:translateY(10px);
  transition:opacity .3s,transform .45s var(--ease),background .25s}
.mnav .dd:hover .ddm a,.mnav .dd.open .ddm a,.mnav .dd:focus-within .ddm a{opacity:1;transform:none;
  transition:opacity .35s calc(80ms + var(--k,0) * 45ms),transform .5s var(--ease) calc(80ms + var(--k,0) * 45ms),background .25s}
.mnav .ddm a::before{content:"";position:absolute;left:6px;top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--ion);box-shadow:0 0 8px rgba(190,243,68,.8);transform:scaleY(0);transition:transform .3s var(--ease)}
.mnav .ddm a::after{content:"→";position:absolute;right:14px;top:50%;color:var(--ion);opacity:0;transform:translate(-8px,-50%);transition:opacity .25s,transform .35s var(--ease)}
.mnav .ddm a:hover,.mnav .ddm a:focus-visible,.mnav .ddm a.cur{background:rgba(190,243,68,.08)}
.mnav .ddm a:hover::before,.mnav .ddm a:focus-visible::before,.mnav .ddm a.cur::before{transform:scaleY(1)}
.mnav .ddm a:hover::after,.mnav .ddm a:focus-visible::after{opacity:1;transform:translate(0,-50%)}
.mnav .ddm b{display:block;font-size:15px;font-weight:500}
.mnav .ddm span{display:block;font-size:12.5px;color:#8f978a;margin-top:2px}
.mnav .nav-cta{margin-left:10px;transition:box-shadow .35s,transform .35s var(--ease)}
.mnav .nav-cta:hover{box-shadow:0 0 0 4px rgba(190,243,68,.16),0 0 28px rgba(190,243,68,.45);transform:translateY(-1px)}
.mfoot{display:none}

/* burger : trois traits qui deviennent une croix */
.burger{display:none;position:relative;width:44px;height:44px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(2,3,2,.6);color:#fff;cursor:pointer;place-items:center;pointer-events:auto;transition:border-color .35s,background .35s,box-shadow .35s}
.burger .bl{position:relative;display:block;width:18px;height:12px}
.burger .bl i{position:absolute;left:0;width:100%;height:1.6px;border-radius:2px;background:currentColor;transition:top .4s cubic-bezier(.7,0,.2,1),transform .4s cubic-bezier(.7,0,.2,1) .15s,opacity .2s,width .35s cubic-bezier(.2,.8,.2,1)}
.burger .bl i:nth-child(1){top:0}
.burger .bl i:nth-child(2){top:5.2px;width:62%;left:auto;right:0}
.burger .bl i:nth-child(3){top:10.4px}
.burger:hover .bl i:nth-child(2){width:100%}
.burger[aria-expanded="true"]{border-color:rgba(190,243,68,.65);background:rgba(190,243,68,.1);box-shadow:0 0 24px rgba(190,243,68,.35);color:var(--ion)}
.burger[aria-expanded="true"] .bl i{transition:top .3s cubic-bezier(.7,0,.2,1),transform .45s cubic-bezier(.3,1.4,.5,1) .2s,opacity .2s}
.burger[aria-expanded="true"] .bl i:nth-child(1){top:5.2px;transform:rotate(45deg)}
.burger[aria-expanded="true"] .bl i:nth-child(2){opacity:0;transform:translateX(10px)}
.burger[aria-expanded="true"] .bl i:nth-child(3){top:5.2px;transform:rotate(-45deg)}

@media (max-width:980px){
  .burger{display:grid;margin-left:auto}
  html.navlock,html.navlock body{overflow:hidden}
  /* panneau plein écran, révélé en cercle depuis le burger */
  html .nav nav.mnav{position:fixed;inset:0;z-index:-1;margin:0;display:flex;flex-direction:column;align-items:stretch;gap:0;counter-reset:m;
    padding:calc(104px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px));
    overflow-y:auto;overscroll-behavior:contain;visibility:hidden;pointer-events:none;
    background:radial-gradient(110% 55% at 100% 0%,rgba(190,243,68,.16),rgba(190,243,68,0) 60%),radial-gradient(90% 50% at 0% 100%,rgba(92,188,204,.1),rgba(92,188,204,0) 70%),#020302;
    clip-path:circle(0px at calc(100% - 44px) 46px);transition:clip-path .65s cubic-bezier(.7,0,.25,1),visibility 0s .65s}
  html .nav nav.mnav::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
    background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;
    -webkit-mask-image:radial-gradient(120% 70% at 100% 0%,#000,transparent 75%);mask-image:radial-gradient(120% 70% at 100% 0%,#000,transparent 75%)}
  html .nav nav.mnav.open{visibility:visible;pointer-events:auto;clip-path:circle(160% at calc(100% - 44px) 46px);transition:clip-path .85s cubic-bezier(.7,0,.25,1),visibility 0s}
  .mnav>.dd,.mnav>.nl,.mnav>.nav-cta,.mnav>.mfoot{opacity:0;transform:translateY(30px);transition:opacity .25s,transform .3s}
  .mnav.open>.dd,.mnav.open>.nl,.mnav.open>.nav-cta,.mnav.open>.mfoot{opacity:1;transform:none;transition:opacity .5s calc(.22s + var(--n,0) * .07s),transform .7s var(--ease) calc(.22s + var(--n,0) * .07s)}
  .mnav .ddb,.mnav .nl{width:100%;justify-content:flex-start;height:auto;padding:20px 2px;font-size:clamp(24px,7vw,30px);font-weight:300;letter-spacing:-.02em;border-radius:0;border-bottom:1px solid rgba(255,255,255,.09);color:#f3f4f6}
  .mnav>.dd>.ddb::before,.mnav>.nl::before{counter-increment:m;content:"0" counter(m);font-size:12px;font-weight:500;letter-spacing:.14em;color:var(--ion);margin-right:16px;align-self:center}
  .mnav .ddb::after,.mnav .nl::after{left:0;right:auto;width:72px;bottom:-1px;transform-origin:0 50%}
  .mnav .dd:hover .ddb::after,.mnav .ddb:hover::after,.mnav .nl:hover::after{transform:scaleX(0)}
  .mnav .dd.open .ddb::after,.mnav .cur>.ddb::after,.mnav .nl.cur::after{transform:scaleX(1)}
  .mnav .dd:hover .ddb{color:#f3f4f6}
  .mnav .dd.open .ddb,.mnav .cur>.ddb,.mnav .nl.cur{color:var(--ion)}
  .mnav .ddb .chv{margin-left:auto;width:16px;height:16px}
  .mnav .dd:hover .chv{transform:none}
  .mnav .dd.open .chv{transform:rotate(180deg)}
  .mnav .dd::after{display:none}
  /* sous-menu en accordéon */
  .mnav .ddm,.mnav .dd:hover .ddm,.mnav .dd:focus-within .ddm{position:static;min-width:0;margin:0;padding:0;background:none;border:0;box-shadow:none;transform:none;clip-path:none;opacity:1;visibility:visible;
    display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
  .mnav .dd.open .ddm{grid-template-rows:1fr}
  .mnav .ddm::after{display:none}
  .mnav .ddi{min-height:0;overflow:hidden;gap:0;padding-left:30px}
  .mnav .ddm a{padding:12px 30px 12px 14px;opacity:0;transform:translateX(-12px)}
  .mnav .dd:hover .ddm a,.mnav .dd:focus-within .ddm a{opacity:0;transform:translateX(-12px)}
  .mnav .dd.open .ddm a{opacity:1;transform:none;transition:opacity .35s calc(.12s + var(--k,0) * .045s),transform .5s var(--ease) calc(.12s + var(--k,0) * .045s),background .25s}
  .mnav .ddi>a:first-child{margin-top:8px}
  .mnav .ddi>a:last-child{margin-bottom:14px}
  .mnav .nav-cta{margin:30px 0 0;justify-content:center;height:56px;font-size:16px}
  .mfoot{display:grid;gap:6px;margin-top:auto;padding-top:34px;font-size:14px;color:#8f978a}
  .mfoot a{color:#e6e8ec;text-decoration:none}
  .mfoot b{font-weight:500;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ion);margin-bottom:4px}
}
@media (prefers-reduced-motion:reduce){
  .mnav *,.mnav,.burger,.burger *{transition-duration:.01ms!important;transition-delay:0s!important}
}