/* Deeplab33 — styles */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
/* Layout : scène plein écran — titre / incubateur héros au centre, satellites floutés derrière / commandes intégrées au sol du labo */
:root{
  --void:#030806;        /* noir profond */
  --steel:#0c1411;       /* métal noir */
  --neon:#39ff6a;        /* vert néon */
  --neon-soft:#1fae47;
  --volt:#a24bff;        /* violet électrique */
  --chrome:#d9e4e0;      /* reflets chromés */
  --dim:#7e958b;
  --f-display:"Orbitron","Eurostile","Arial Black",sans-serif;
  --f-ui:"Chakra Petch","Rajdhani","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
html,body{height:100%}
body{margin:0;background:var(--void);color:var(--chrome);font-family:var(--f-ui);overflow:hidden;-webkit-tap-highlight-color:transparent}
*{box-sizing:border-box}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
button:focus-visible{outline:2px solid var(--neon);outline-offset:4px}

/* ============ 1. FOND ============ */
#bg{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:
    radial-gradient(60% 45% at 50% 58%, rgba(57,255,106,.16), transparent 70%),
    radial-gradient(40% 40% at 8% 30%, rgba(162,75,255,.14), transparent 70%),
    radial-gradient(40% 40% at 92% 30%, rgba(162,75,255,.12), transparent 70%),
    linear-gradient(#020504, #06100b 55%, #020403);}
.lab-side{position:absolute;top:6%;height:78%;width:min(30vw,420px);filter:blur(1.6px);opacity:.75}
.lab-side.l{left:-2%}
.lab-side.r{right:-2%}
.floor{position:absolute;left:-50%;right:-50%;bottom:-8%;height:46%;
  background:
    repeating-linear-gradient(90deg, rgba(57,255,106,.10) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(57,255,106,.08) 0 1px, transparent 1px 80px);
  transform:perspective(500px) rotateX(62deg);transform-origin:50% 0;
  -webkit-mask:linear-gradient(transparent, #000 30%, #000 70%, transparent);mask:linear-gradient(transparent, #000 30%, #000 70%, transparent)}
#fx{position:absolute;inset:0;width:100%;height:100%}
.vignette{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.85))}

/* ============ STRUCTURE ============ */
.app{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));padding-block:14px 18px;
  transition:opacity .6s, filter .6s}

/* ============ EN-TÊTE ============ */
.hud{width:100%;max-width:1100px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase}
.hud b{color:var(--neon);font-weight:600}
.hud .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--neon);box-shadow:0 0 8px var(--neon);margin-right:6px;animation:blink 2.4s infinite}
@keyframes blink{50%{opacity:.25}}
.brand{text-align:center;margin-top:4px}
.logo{font-family:var(--f-display);font-weight:900;font-style:normal;font-size:clamp(30px,6.4vw,68px);letter-spacing:.02em;line-height:1;margin:0;
  transform:skewX(-9deg);
  background:linear-gradient(180deg,#ffffff 0%,#c9d3d0 38%,#6f7d78 52%,#e8efec 64%,#9aa6a2 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(57,255,106,.18))}
.logo span{background:linear-gradient(180deg,#d6ffe0,#39ff6a 45%,#0f9b37);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 14px rgba(57,255,106,.7))}
.sub{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:8px;font-size:clamp(10px,1.6vw,14px);letter-spacing:.42em;color:var(--chrome);font-weight:500}
.sub::before,.sub::after{content:"";width:clamp(24px,8vw,90px);height:1px;background:linear-gradient(90deg,transparent,var(--neon))}
.sub::after{transform:scaleX(-1)}

/* ============ 2. SCÈNE / INCUBATEURS ============ */
.stage{position:relative;flex:1;width:100%;min-height:240px;container-type:size;margin-top:2vh}
.platform{position:absolute;left:50%;top:calc(50cqh + min(45.2cqh,41.7cqw) - 12cqh);width:min(84cqh,92cqw);height:min(14cqh,22cqw);transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side, rgba(57,255,106,.38), rgba(57,255,106,.08) 60%, transparent);
  box-shadow:0 0 0 1px rgba(57,255,106,.25) inset;filter:blur(1px)}
.platform::after{content:"";position:absolute;inset:18% 12%;border-radius:50%;border:1px solid rgba(57,255,106,.45);box-shadow:0 0 22px rgba(57,255,106,.5)}

.incubator{position:absolute;left:50%;top:50%;width:min(76cqh,70cqw);aspect-ratio:.84;
  transform:translate(-50%,-50%) var(--t,scale(1));
  transition:transform .8s cubic-bezier(.6,.05,.2,1), filter .8s, opacity .8s;will-change:transform}
.incubator[data-pos="center"]{--t:scale(1);z-index:3;filter:drop-shadow(0 0 40px rgba(57,255,106,.35))}
.incubator[data-pos="left"]{--t:translateX(-92%) scale(.56);z-index:1;filter:blur(3.5px) brightness(.42) saturate(.7);cursor:pointer}
.incubator[data-pos="right"]{--t:translateX(92%) scale(.56);z-index:1;filter:blur(3.5px) brightness(.42) saturate(.7);cursor:pointer}
.incubator .shell{position:absolute;left:6%;width:88%;top:0;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.incubator canvas.view{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .8s}
body.gl .incubator canvas.view{opacity:1}
body.gl .incubator .shell,body.gl .incubator .chamber{display:none}

/* chambre = intérieur du verre, où vit le spécimen */
.chamber{position:absolute;left:23.5%;width:50%;top:21%;height:50%;border-radius:16% / 11%;overflow:hidden;pointer-events:none}
.liquid{position:absolute;left:0;right:0;bottom:0;height:0;
  background:linear-gradient(0deg, rgba(57,255,106,.38), rgba(57,255,106,.10) 70%, rgba(162,75,255,.06));
  mix-blend-mode:screen;transition:height 1.4s cubic-bezier(.4,0,.2,1)}
.liquid::before{content:"";position:absolute;left:-10%;right:-10%;top:-6px;height:12px;border-radius:50%;background:rgba(160,255,190,.35);filter:blur(3px);animation:surf 3s ease-in-out infinite}
@keyframes surf{50%{transform:translateY(3px) scaleX(1.03)}}
.specimen{position:absolute;inset:6% 6% 4%;display:grid;place-items:center;opacity:.0;clip-path:inset(100% 0 0 0);
  transition:opacity .9s .4s, clip-path 1.3s .3s cubic-bezier(.4,0,.2,1)}
.specimen{display:none}
.specimen svg{width:100%;height:100%;overflow:visible;animation:bob 5s ease-in-out infinite;filter:drop-shadow(0 0 8px rgba(57,255,106,.55))}
@keyframes bob{50%{transform:translateY(-3%) rotate(1.5deg)}}
.scan{position:absolute;left:0;right:0;height:3px;bottom:0;opacity:0;background:linear-gradient(90deg,transparent,#c8ffd6,transparent);box-shadow:0 0 18px 4px rgba(57,255,106,.8)}
.bubbles span{position:absolute;bottom:-6px;width:var(--s);height:var(--s);border-radius:50%;border:1px solid rgba(200,255,215,.6);background:rgba(200,255,215,.12);
  left:var(--x);opacity:0;animation:rise var(--d) linear var(--dl) infinite}
@keyframes rise{0%{transform:translateY(0);opacity:0}10%{opacity:.9}100%{transform:translateY(-34cqh) translateX(6px);opacity:0}}
.glare{position:absolute;inset:0;background:linear-gradient(105deg, rgba(255,255,255,.10) 0 8%, transparent 14% 70%, rgba(255,255,255,.06) 78%, transparent 84%)}

.incubator.loaded .liquid{height:100%}
.incubator.loaded .specimen{opacity:1;clip-path:inset(0 0 0 0)}
.incubator:not(.loaded) .bubbles{display:none}
.incubator[data-pos="left"].loaded .specimen,.incubator[data-pos="right"].loaded .specimen{opacity:.8}
.incubator.materialize .scan{animation:scan 1.5s .2s cubic-bezier(.4,0,.2,1) forwards}
@keyframes scan{0%{bottom:0;opacity:1}90%{opacity:1}100%{bottom:100%;opacity:0}}
.incubator.empty-pulse .chamber{animation:emptyp 2.2s ease-in-out infinite}
@keyframes emptyp{50%{box-shadow:inset 0 0 40px rgba(57,255,106,.25)}}

/* flèches */
.arrow{position:absolute;top:50%;z-index:5;width:clamp(48px,7cqw,78px);aspect-ratio:.9;transform:translateY(-50%);display:grid;place-items:center;transition:transform .2s, filter .2s}
.arrow.prev{left:max(4px, calc(50% - min(38cqh,35cqw) - clamp(48px,7cqw,78px) + 4px))}
.arrow.next{right:max(4px, calc(50% - min(38cqh,35cqw) - clamp(48px,7cqw,78px) + 4px))}
.arrow svg{width:100%;height:100%;overflow:visible}
.arrow:hover{filter:brightness(1.35) drop-shadow(0 0 12px rgba(57,255,106,.8))}
.arrow:active{transform:translateY(-50%) scale(.92)}

/* ============ 3. COMMANDES ============ */
.status{position:relative;z-index:4;margin-top:-4px;display:flex;align-items:center;gap:10px;padding:9px 26px;font-weight:700;letter-spacing:.2em;font-size:clamp(12px,1.7vw,16px);
  background:linear-gradient(180deg,rgba(12,22,17,.95),rgba(4,9,6,.95));
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%);
  box-shadow:inset 0 0 0 1px rgba(57,255,106,.5)}
.status::before{content:"";position:absolute;inset:0;clip-path:inherit;border:1px solid rgba(57,255,106,.7);pointer-events:none}
.status em{font-style:normal;color:var(--neon);text-shadow:0 0 10px rgba(57,255,106,.8)}
.status.busy em{animation:blink .6s infinite}

.tiles{display:flex;gap:clamp(8px,1.6vw,20px);margin-top:14px;width:100%;max-width:640px;justify-content:center}
.tile{position:relative;flex:1;max-width:190px;padding:12px 6px 10px;display:flex;flex-direction:column;align-items:center;gap:7px;
  font-weight:700;letter-spacing:.14em;font-size:clamp(10px,1.35vw,13px);color:#cfd9d5;
  background:linear-gradient(180deg,rgba(24,18,36,.85),rgba(6,8,10,.9));
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
  transition:color .3s, background .3s, transform .2s}
.tile::after{content:"";position:absolute;inset:0;clip-path:inherit;box-shadow:inset 0 0 0 1px rgba(162,75,255,.55);pointer-events:none;transition:box-shadow .3s}
.tile svg{width:clamp(22px,3.6vw,34px);height:clamp(22px,3.6vw,34px);stroke:currentColor;fill:none;stroke-width:1.4}
.tile:hover{transform:translateY(-2px)}
.tile[aria-current="true"]{color:#eafff0;background:linear-gradient(180deg,rgba(12,48,24,.9),rgba(4,14,8,.95))}
.tile[aria-current="true"]::after{box-shadow:inset 0 0 0 2px var(--neon), inset 0 0 22px rgba(57,255,106,.35)}
.tile[aria-current="true"] svg{stroke:var(--neon);filter:drop-shadow(0 0 6px var(--neon))}

.counter{display:flex;align-items:center;gap:12px;margin-top:12px;font-family:var(--f-display);font-weight:800;font-size:14px;letter-spacing:.12em;font-variant-numeric:tabular-nums}
.counter::before,.counter::after{content:"";width:clamp(30px,10vw,110px);height:1px;background:linear-gradient(90deg,transparent,rgba(57,255,106,.7))}
.counter::after{transform:scaleX(-1)}
.counter .tot{color:var(--dim);font-weight:600}
.pips{display:flex;gap:6px}
.pips i{width:7px;height:7px;background:rgba(57,255,106,.25);transform:rotate(45deg);transition:background .3s, box-shadow .3s}
.pips i.on{background:var(--neon);box-shadow:0 0 8px var(--neon)}

.select{position:relative;margin-top:12px;min-width:min(320px,86vw);padding:15px 40px;font-family:var(--f-display);font-weight:800;font-size:clamp(13px,1.8vw,16px);letter-spacing:.24em;color:#021006;
  background:linear-gradient(180deg,#9dffb6,#39ff6a 45%,#14b543);
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,18px 100%,0 50%);
  box-shadow:0 0 30px rgba(57,255,106,.6);transition:filter .2s, transform .15s}
.select::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:sheen 3.2s ease-in-out infinite}
@keyframes sheen{60%,100%{transform:translateX(120%)}}
.select:hover{filter:brightness(1.12)}
.select:active{transform:scale(.97)}
.select.ghost{color:var(--neon);background:linear-gradient(180deg,rgba(10,30,18,.95),rgba(3,10,6,.95))}
.select.ghost::after{content:"";position:absolute;inset:0;clip-path:inherit;box-shadow:inset 0 0 0 2px var(--neon)}
.select[disabled]{cursor:wait;filter:saturate(.4) brightness(.8)}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.select.icon{min-width:0;width:clamp(64px,10vh,86px);aspect-ratio:1.12;padding:0;display:grid;place-items:center;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.select.icon svg{width:46%;height:46%;position:relative}
.select.icon:not(.ghost){color:#021006}
.hint{margin-top:8px;font-size:11px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}

/* ============ 4. TRANSITIONS ============ */
#boot{position:fixed;inset:0;z-index:20;background:#000;display:grid;place-items:center;font-size:12px;letter-spacing:.3em;color:var(--neon);text-transform:uppercase;transition:opacity .9s}
#boot p{margin:0;text-align:center;line-height:2.2}
#boot .bar{width:180px;height:2px;margin:12px auto 0;background:rgba(57,255,106,.2);overflow:hidden}
#boot .bar i{display:block;height:100%;width:0;background:var(--neon);box-shadow:0 0 10px var(--neon);animation:load 1.4s forwards}
@keyframes load{to{width:100%}}
body.ready #boot{opacity:0;pointer-events:none}

#flash{position:fixed;inset:0;z-index:15;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 45%, rgba(220,255,230,.95), rgba(57,255,106,.75) 25%, rgba(3,20,9,.98) 70%);transition:opacity .7s}
#flash::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, transparent 2px 4px)}
body.locking .incubator[data-pos="center"]{filter:drop-shadow(0 0 70px rgba(57,255,106,.9)) brightness(1.25)}
body.diving .incubator[data-pos="center"]{--t:translateY(-6%) scale(3.4);transition:transform 1.1s cubic-bezier(.7,0,.3,1), filter 1.1s;filter:brightness(1.6) blur(2px)}
body.diving .incubator:not([data-pos="center"]),body.diving .arrow,body.diving .status,body.diving .tiles,body.diving .counter,body.diving .app .select,body.diving .hint,body.diving .brand,body.diving .hud{opacity:0;transition:opacity .4s}
body.diving #flash{opacity:1;transition-delay:.5s}
body.inside .app{opacity:0;pointer-events:none}

#next{position:fixed;inset:0;z-index:16;display:grid;place-items:center;text-align:center;opacity:0;pointer-events:none;transition:opacity .8s;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
body.inside #next{opacity:1;pointer-events:auto}
#next .k{font-size:12px;letter-spacing:.4em;color:var(--neon);text-shadow:0 0 10px var(--neon)}
#next h2{font-family:var(--f-display);font-weight:900;font-size:clamp(30px,6vw,64px);margin:10px 0 6px;transform:skewX(-8deg);letter-spacing:.04em}
#next p{color:#b9cbc2;letter-spacing:.06em;max-width:44ch;margin:0 auto 26px;line-height:1.6}
#next .code{font-family:var(--f-display);font-size:13px;color:var(--dim);letter-spacing:.3em;margin-bottom:22px}

@media (max-height:640px){.tiles{margin-top:8px}.tile{padding:8px 4px 6px}.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.select.icon{min-width:0;width:clamp(64px,10vh,86px);aspect-ratio:1.12;padding:0;display:grid;place-items:center;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.select.icon svg{width:46%;height:46%;position:relative}
.select.icon:not(.ghost){color:#021006}
.hint{display:none}.counter{margin-top:6px}.select{margin-top:8px;padding-block:12px}}
@media (max-width:560px){.hud .far{display:none}.lab-side{opacity:.35}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.2s!important}}

/* ============ HUD — cadre métal chromé + néon ============ */
:root{--edge:clamp(70px,9vmin,110px);--gut-l:env(safe-area-inset-left,0px);--gut-r:env(safe-area-inset-right,0px);--gut-t:env(safe-area-inset-top,0px);--gut-b:env(safe-area-inset-bottom,0px)}
.app{padding-block:calc(30px + var(--gut-t)) calc(clamp(96px,15vh,140px) + var(--gut-b))}
.stage{margin-top:0}
.hud{position:fixed;inset:0;z-index:6;pointer-events:none;transition:opacity .4s;max-width:none;width:auto;display:block}
.hud button{pointer-events:auto}
.corner{position:absolute;width:var(--edge);height:var(--edge);filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.corner.tl{top:var(--gut-t);left:var(--gut-l)}
.corner.tr{top:var(--gut-t);right:var(--gut-r);transform:scaleX(-1)}
.corner.bl{bottom:var(--gut-b);left:var(--gut-l);transform:scaleY(-1)}
.corner.br{bottom:var(--gut-b);right:var(--gut-r);transform:scale(-1,-1)}
.bar{position:absolute;left:calc(var(--gut-l) + var(--edge));right:calc(var(--gut-r) + var(--edge));height:calc(var(--edge)*.11);
  background:linear-gradient(180deg,#9aa3ab,#2a3036 30%,#0a0c0e 60%,#4a525a);box-shadow:0 2px 0 rgba(57,255,106,.0)}
.bar.top{top:var(--gut-t)}
.bar.top::after,.bar.bottom::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--neon);box-shadow:0 0 8px var(--neon);opacity:.85}
.bar.top::after{top:calc(100% + 4px)}
.bar.bottom{bottom:var(--gut-b);transform:scaleY(-1)}
.bar.bottom::after{top:calc(100% + 4px)}
.plate{position:absolute;left:50%;top:0;width:clamp(150px,18vw,220px);transform:translateX(-50%);filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.leds circle{fill:#39ff6a;filter:drop-shadow(0 0 4px #39ff6a);animation:led 3s infinite}
.leds circle:nth-child(2){animation-delay:.6s}
.leds circle.v{fill:#a24bff;filter:drop-shadow(0 0 4px #a24bff);animation-delay:1.3s}
@keyframes led{0%,100%{opacity:1}50%{opacity:.35}}
.rail{position:absolute;top:calc(var(--gut-t) + var(--edge));bottom:calc(var(--gut-b) + var(--edge));width:calc(var(--edge)*.11);
  background:linear-gradient(90deg,#9aa3ab,#2a3036 30%,#0a0c0e 60%,#4a525a)}
.rail.l{left:var(--gut-l)}
.rail.r{right:var(--gut-r);transform:scaleX(-1)}
.rail::after{content:"";position:absolute;top:0;bottom:0;left:calc(100% + 4px);width:1.5px;background:var(--neon);box-shadow:0 0 8px var(--neon);opacity:.85}

/* flèches : modules fixés sur les montants */
.pod{position:absolute;top:50%;width:clamp(46px,6vw,76px);aspect-ratio:64/170;--s:1;transform:translateY(-50%) scaleX(var(--flip,1)) scale(var(--s));
  filter:drop-shadow(4px 0 12px rgba(0,0,0,.7));transition:transform .18s, filter .25s}
.pod.prev{left:var(--gut-l)}
.pod.next{right:var(--gut-r);--flip:-1}
.pod svg{width:100%;height:100%;overflow:visible;display:block}
.pod .chev{transition:transform .25s}
.pod .edge{transition:stroke-width .25s}
.pod:hover{filter:drop-shadow(4px 0 12px rgba(0,0,0,.7)) drop-shadow(0 0 14px rgba(57,255,106,.55))}
.pod:hover .chev{transform:translateX(-4px)}
.pod:hover .edge{stroke-width:3}
.pod:active{--s:.94}
.pod:focus-visible{outline:2px solid var(--neon);outline-offset:3px}

/* pupitre */
.console{position:absolute;left:50%;bottom:calc(var(--gut-b) + var(--edge)*.11 + 6px);width:min(480px,calc(100vw - 2*var(--edge) + 40px));aspect-ratio:480/84;transform:translateX(-50%);filter:drop-shadow(0 -4px 14px rgba(0,0,0,.65))}
.deck{position:absolute;inset:0;width:100%;height:100%}
.console .pips{position:absolute;left:19%;top:52%;transform:translateY(-50%);gap:clamp(8px,1.4vw,14px)}
.console .pips i{width:clamp(9px,1.2vw,12px);height:clamp(9px,1.2vw,12px);background:#0a1a10;border:1.5px solid #6b737b;box-shadow:inset 0 0 3px #000}
.console .pips i.on{background:var(--neon);border-color:#d6ffe0;box-shadow:0 0 10px var(--neon), inset 0 0 3px #fff}
.gauge{position:absolute;right:19%;top:52%;transform:translateY(-50%);display:flex;align-items:flex-end;gap:4px;height:clamp(16px,2.6vw,24px)}
.gauge i{width:clamp(4px,.6vw,6px);background:#0d2014;border:1px solid #3d454c;transition:background .3s, box-shadow .3s}
.gauge i:nth-child(1){height:40%}.gauge i:nth-child(2){height:55%}.gauge i:nth-child(3){height:70%}.gauge i:nth-child(4){height:85%}.gauge i:nth-child(5){height:100%}
.gauge.full i{background:var(--neon);border-color:#9dffb6;box-shadow:0 0 6px var(--neon)}
.gauge.full i:nth-child(2){transition-delay:.25s}.gauge.full i:nth-child(3){transition-delay:.5s}.gauge.full i:nth-child(4){transition-delay:.75s}.gauge.full i:nth-child(5){transition-delay:1s}

.core-btn{position:absolute;left:50%;top:-34%;width:clamp(78px,11vh,104px);aspect-ratio:1;--s:1;transform:translateX(-50%) scale(var(--s));
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(57,255,106,.45));transition:transform .15s, filter .25s}
.core-btn svg{width:100%;height:100%;display:block;overflow:visible}
.core-btn .fillhex{transition:opacity .5s}
.core-btn .cross{stroke:#03140a}
.core-btn .cross .dot{fill:#03140a}
.core-btn.ghost .fillhex{opacity:0}
.core-btn.ghost .cross{stroke:#39ff6a;filter:drop-shadow(0 0 4px #39ff6a)}
.core-btn.ghost .cross .dot{fill:#39ff6a}
.core-btn.ghost .ring{animation:ringp 1.8s ease-in-out infinite}
@keyframes ringp{50%{stroke-width:4.5;stroke:#9dffb6}}
.core-btn:hover{filter:drop-shadow(0 6px 14px rgba(0,0,0,.7)) drop-shadow(0 0 28px rgba(57,255,106,.8))}
.core-btn:active{--s:.93}
.core-btn[disabled]{cursor:wait}
.core-btn[disabled] .cross{animation:spin 1.2s linear infinite;transform-origin:50px 50px}
@keyframes spin{to{transform:rotate(360deg)}}
.core-btn:focus-visible{outline:2px solid var(--neon);outline-offset:4px}
body.locking .core-btn{filter:drop-shadow(0 0 40px rgba(57,255,106,1)) brightness(1.3)}
body.diving .hud{opacity:0}
@media (max-width:560px){:root{--edge:58px}.console{width:calc(100vw - 24px)}.plate{width:130px}}


/* =====================================================================
   BOUTIQUE MOBILE FIRST — en-tête, onglets, vues Labo / Stockage
   ===================================================================== */
:root{--top-h:64px;--tab-h:76px}
/* le cadre s'arrête au-dessus des onglets */
.corner.bl,.corner.br,.bar.bottom{display:none}
.rail{bottom:calc(var(--gut-b) + var(--tab-h) + 6px)}
.app{padding-block:calc(var(--top-h) + var(--gut-t)) calc(var(--tab-h) + clamp(92px,13vh,120px) + var(--gut-b))}
.pod{top:44%}
.console{bottom:calc(var(--gut-b) + var(--tab-h) + 10px);width:min(420px,calc(100vw - 28px))}
.core-btn{width:clamp(72px,10vh,92px)}

/* en-tête */
.topbar{position:absolute;top:calc(var(--gut-t) + 10px);left:calc(var(--gut-l) + 16px);right:calc(var(--gut-r) + 16px);display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.top-btn{position:relative;width:46px;height:46px;pointer-events:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));transition:transform .15s, filter .2s}
.top-btn svg{width:100%;height:100%;display:block}
.top-btn:hover{filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(57,255,106,.6))}
.top-btn:active{transform:scale(.92)}
.badge{position:absolute;top:-4px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;display:grid;place-items:center;font:700 11px/1 var(--f-ui);font-style:normal;color:#021006;background:var(--neon);box-shadow:0 0 10px var(--neon), 0 0 0 2px #030806}
.badge.bump{animation:bump .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{40%{transform:scale(1.45)}}

/* onglets */
.tabbar{position:absolute;left:0;right:0;bottom:0;height:calc(var(--tab-h) + var(--gut-b));padding:10px max(10px,var(--gut-r)) var(--gut-b) max(10px,var(--gut-l));display:grid;grid-template-columns:repeat(3,1fr);pointer-events:auto;filter:drop-shadow(0 -6px 16px rgba(0,0,0,.7))}
.tab-deck{position:absolute;inset:0;width:100%;height:100%}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#8fa59a;font:600 11px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;transition:color .25s}
.tab svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;transition:transform .25s, filter .25s}
.tab::before{content:"";position:absolute;top:4px;left:28%;right:28%;height:2px;background:var(--neon);box-shadow:0 0 10px var(--neon);opacity:0;transform:scaleX(.3);transition:opacity .25s, transform .25s}
.tab[aria-current="page"]{color:#eafff0}
.tab[aria-current="page"] svg{stroke:var(--neon);filter:drop-shadow(0 0 6px var(--neon));transform:translateY(-2px)}
.tab[aria-current="page"]::before{opacity:1;transform:none}
.tab:active svg{transform:scale(.9)}
.tab .badge{top:6px;right:calc(50% - 26px)}
.tab:focus-visible,.card:focus-visible,.cta:focus-visible,.ghost-btn:focus-visible,.top-btn:focus-visible{outline:2px solid var(--neon);outline-offset:3px}

/* éléments propres à l'incubateur */
body:not([data-view="incubateur"]) .stage,
body:not([data-view="incubateur"]) .pod,
body:not([data-view="incubateur"]) .console,
body:not([data-view="incubateur"]) .rail{visibility:hidden;opacity:0}
.stage,.pod,.console,.rail{transition:opacity .35s, visibility .35s}

/* vues */
.view{position:fixed;z-index:5;left:0;right:0;top:calc(var(--top-h) + var(--gut-t) + 6px);bottom:calc(var(--tab-h) + var(--gut-b));overflow-y:auto;
  padding-left:max(16px,var(--gut-l));padding-right:max(16px,var(--gut-r));animation:viewIn .35s ease}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}}
.view-inner{max-width:520px;margin:0 auto;padding-block:12px 24px;display:flex;flex-direction:column;gap:18px;min-height:100%}

/* Labo */
.home-mark{text-align:center;padding-top:6vh}
.home-logo{font-family:var(--f-display);font-weight:900;font-size:clamp(34px,11vw,60px);margin:0;transform:skewX(-9deg);letter-spacing:.02em;
  background:linear-gradient(180deg,#fff,#c9d3d0 38%,#6f7d78 52%,#e8efec 64%,#9aa6a2);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(57,255,106,.2))}
.home-logo span{background:linear-gradient(180deg,#d6ffe0,#39ff6a 45%,#0f9b37);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 14px rgba(57,255,106,.7))}
.home-sub{margin-top:10px;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--dim)}
.home-cards{display:flex;flex-direction:column;gap:12px;margin-top:auto}
.card,.cart-item,.cart-empty,.cart-foot{position:relative;background:linear-gradient(180deg,rgba(14,26,20,.92),rgba(4,9,6,.94));
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);box-shadow:inset 0 0 0 1px rgba(57,255,106,.28)}
.card{display:flex;align-items:center;gap:14px;padding:16px;text-align:left;transition:transform .15s, box-shadow .2s}
.card:hover{box-shadow:inset 0 0 0 1px rgba(57,255,106,.7), inset 0 0 24px rgba(57,255,106,.12)}
.card:active{transform:scale(.98)}
.card-ico,.ci-ico,.empty-ico{flex:none;display:grid;place-items:center;width:48px;height:48px;background:linear-gradient(135deg,#9aa3ab,#1b2025 40%,#0a0c0f 60%,#4a525a);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.card-ico svg,.ci-ico svg,.empty-ico svg{width:26px;height:26px;fill:none;stroke:var(--neon);stroke-width:1.6;filter:drop-shadow(0 0 4px var(--neon))}
.card-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.card-txt b{font:700 15px/1.2 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:#eafff0}
.card-txt small{font-size:13px;color:var(--dim)}
.card-arrow{font-size:28px;color:var(--neon);text-shadow:0 0 8px var(--neon)}

/* Stockage */
.sheet-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:4px}
.sheet-head h2{margin:0;font:800 22px/1 var(--f-display);letter-spacing:.06em;transform:skewX(-8deg);color:#eafff0}
.sheet-count{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.cart-empty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:36px 16px;text-align:center}
.cart-empty p{margin:0;color:#b9cbc2}
.empty-ico{width:64px;height:64px}
.cart-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cart-item{display:flex;align-items:center;gap:12px;padding:12px}
.ci-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ci-txt b{font:700 14px/1.2 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:#eafff0}
.ci-txt small{font-size:12px;color:var(--dim)}
.stepper{display:flex;align-items:center;gap:2px;background:#020604;box-shadow:inset 0 0 0 1px rgba(57,255,106,.35);padding:3px}
.stepper button{width:32px;height:32px;font:600 18px/1 var(--f-ui);color:var(--neon)}
.stepper button:active{background:rgba(57,255,106,.15)}
.stepper output{min-width:24px;text-align:center;font:700 14px/1 var(--f-ui);font-variant-numeric:tabular-nums}
.cart-foot{margin-top:auto;padding:16px;display:flex;flex-direction:column;gap:14px}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.cart-total b{font:800 18px/1 var(--f-display);color:#eafff0;letter-spacing:.04em}
.cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:15px 20px;font:800 13px/1 var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:#021006;
  background:linear-gradient(180deg,#9dffb6,#39ff6a 45%,#14b543);clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%);box-shadow:0 0 24px rgba(57,255,106,.5);transition:filter .2s, transform .15s}
.cta svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.cta:hover{filter:brightness(1.1)}.cta:active{transform:scale(.98)}
.ghost-btn{padding:12px 20px;font:700 12px/1 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--neon);box-shadow:inset 0 0 0 1px var(--neon)}

/* écran verrouillé : ajout au stockage */
#next > div{display:flex;flex-direction:column;align-items:center;gap:18px;width:min(360px,100%)}
.locked-actions{width:100%}

/* toast */
.toast{position:fixed;z-index:30;left:50%;bottom:calc(var(--tab-h) + var(--gut-b) + 16px);transform:translate(-50%,12px);opacity:0;padding:12px 18px;max-width:calc(100vw - 32px);
  font:600 13px/1.3 var(--f-ui);letter-spacing:.06em;color:#eafff0;background:rgba(3,14,8,.95);box-shadow:inset 0 0 0 1px var(--neon), 0 0 20px rgba(57,255,106,.35);transition:opacity .3s, transform .3s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* plus grand écran : on garde la colonne mobile au centre pour les onglets */
@media (min-width:700px){
  .tabbar{left:50%;right:auto;width:560px;transform:translateX(-50%)}
}
@media (max-width:560px){:root{--edge:56px}}

/* incubateur caché derrière (carrousel à plus de 3 bocaux) */
.incubator[data-pos="back"]{--t:scale(.34);z-index:0;opacity:0;filter:blur(6px) brightness(.3);pointer-events:none}

/* =====================================================================
   INCUBATEUR MIS EN VALEUR + PETITES FLÈCHES
   ===================================================================== */
.rail{display:none}
/* incubateur central plus présent, les autres reculent */
.incubator[data-pos="center"]{--t:scale(1.06);filter:drop-shadow(0 0 50px rgba(57,255,106,.45)) drop-shadow(0 20px 30px rgba(0,0,0,.6))}
.incubator[data-pos="left"]{--t:translateX(-88%) scale(.46);filter:blur(4px) brightness(.32) saturate(.6)}
.incubator[data-pos="right"]{--t:translateX(88%) scale(.46);filter:blur(4px) brightness(.32) saturate(.6)}
/* faisceau de lumière au-dessus du bocal choisi */
.spot{position:absolute;left:50%;top:-6%;width:min(80cqh,86cqw);height:92%;transform:translateX(-50%);pointer-events:none;z-index:2;
  background:conic-gradient(from 180deg at 50% 0%, transparent 160deg, rgba(150,255,190,.10) 172deg, rgba(150,255,190,.16) 180deg, rgba(150,255,190,.10) 188deg, transparent 200deg);
  -webkit-mask:linear-gradient(#000 40%, transparent 95%);mask:linear-gradient(#000 40%, transparent 95%);mix-blend-mode:screen;animation:spot 5s ease-in-out infinite}
@keyframes spot{50%{opacity:.7}}
/* socle : anneau qui tourne */
.platform::before{content:"";position:absolute;inset:6% 4%;border-radius:50%;border:2px dashed rgba(57,255,106,.55);animation:ring 14s linear infinite}
@keyframes ring{to{transform:rotate(360deg)}}
.platform{filter:none}

/* petites flèches de part et d'autre du bocal choisi */
.mini-arrow{position:absolute;top:50%;z-index:6;width:clamp(38px,5vh,46px);aspect-ratio:40/44;transform:translateY(-50%);
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));transition:transform .15s, filter .2s}
.mini-arrow svg{width:100%;height:100%;display:block;overflow:visible}
.mini-arrow.prev{left:max(6px, calc(50% - min(38cqh,35cqw) - clamp(38px,5vh,46px) + 6px))}
.mini-arrow.next{right:max(6px, calc(50% - min(38cqh,35cqw) - clamp(38px,5vh,46px) + 6px))}
.mini-arrow:hover{filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(57,255,106,.8))}
.mini-arrow.prev:hover{transform:translate(-3px,-50%)}
.mini-arrow.next:hover{transform:translate(3px,-50%)}
.mini-arrow:active{transform:translateY(-50%) scale(.9)}
.mini-arrow:focus-visible{outline:2px solid var(--neon);outline-offset:3px}

/* nom de la catégorie choisie, sous le bocal */
.inc-label{position:absolute;left:50%;bottom:0;z-index:6;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;
  padding:8px 22px;background:linear-gradient(180deg,rgba(6,22,12,.85),rgba(2,8,4,.9));
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%);box-shadow:inset 0 0 0 1px rgba(57,255,106,.6)}
.inc-label small{font:600 10px/1 var(--f-ui);letter-spacing:.3em;color:var(--dim);font-variant-numeric:tabular-nums}
.inc-label b{font:800 clamp(14px,2.2vh,18px)/1 var(--f-display);letter-spacing:.14em;color:#eafff0;text-shadow:0 0 12px rgba(57,255,106,.7);white-space:nowrap}
.inc-label.swap{animation:swap .5s ease}
@keyframes swap{0%{opacity:0;transform:translate(-50%,8px)}100%{opacity:1;transform:translate(-50%,0)}}
body.diving .mini-arrow,body.diving .inc-label,body.diving .spot{opacity:0;transition:opacity .3s}
/* réglages : bocal plus grand sur mobile, étiquette collée au socle, anneau fixe */
.incubator{width:min(76cqh,82cqw)}
.platform{top:calc(50cqh + min(45.2cqh,48.8cqw) - 12cqh);width:min(84cqh,96cqw)}
.platform::before{animation:ringp2 3s ease-in-out infinite}
@keyframes ringp2{50%{border-color:rgba(57,255,106,.2)}}
.mini-arrow.prev{left:max(4px, calc(50% - min(38cqh,41cqw) - clamp(38px,5vh,46px) + 8px))}
.mini-arrow.next{right:max(4px, calc(50% - min(38cqh,41cqw) - clamp(38px,5vh,46px) + 8px))}
.inc-label{bottom:auto;top:min(calc(50% + min(46cqh,49cqw)), calc(100% - 52px))}

/* =====================================================================
   ACCUEIL = INCUBATEUR : titre, bouton Sélectionner, aperçu produits
   ===================================================================== */
.console,.topbar{display:none}
:root{--top-h:58px;--peek-h:150px}
.titlebar{position:absolute;top:calc(var(--gut-t) + 14px);left:0;right:0;display:flex;justify-content:center;pointer-events:none}
.brand-title{margin:0;font-family:var(--f-display);font-weight:900;font-size:clamp(22px,6.4vw,34px);letter-spacing:.03em;transform:skewX(-9deg);
  background:linear-gradient(180deg,#fff,#c9d3d0 38%,#6f7d78 52%,#e8efec 64%,#9aa6a2);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(57,255,106,.25))}
.brand-title span{background:linear-gradient(180deg,#d6ffe0,#39ff6a 45%,#0f9b37);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 12px rgba(57,255,106,.7))}
.app{padding-block:calc(var(--top-h) + var(--gut-t)) calc(var(--tab-h) + var(--peek-h) + var(--gut-b) + 8px)}
.inc-actions{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;padding-top:6px;transition:opacity .35s, visibility .35s}
body:not([data-view="incubateur"]) .inc-actions{visibility:hidden;opacity:0}
.inc-actions .pips{display:flex;gap:10px}
.inc-actions .pips i{width:9px;height:9px;transform:rotate(45deg);background:#0a1a10;border:1.5px solid #6b737b;transition:background .3s, box-shadow .3s}
.inc-actions .pips i.on{background:var(--neon);border-color:#d6ffe0;box-shadow:0 0 10px var(--neon)}
.select-btn{width:min(280px,72vw)}
.inc-label{top:auto;bottom:4px}
.incubator{cursor:pointer}

/* aperçu (pop-up) sous l'incubateur */
.peek{position:fixed;z-index:5;left:0;right:0;bottom:calc(var(--tab-h) + var(--gut-b));height:var(--peek-h);display:flex;flex-direction:column;
  padding:0 max(12px,var(--gut-r)) 8px max(12px,var(--gut-l));background:linear-gradient(180deg,rgba(8,22,14,.94),rgba(2,6,4,.97));
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%,0 18px);box-shadow:inset 0 1px 0 rgba(57,255,106,.7);
  transition:height .35s cubic-bezier(.3,.9,.3,1), opacity .3s, visibility .3s}
@media (min-width:700px){.peek{left:50%;right:auto;width:560px;margin-left:-280px}}
body:not([data-view="incubateur"]) .peek{visibility:hidden;opacity:0;pointer-events:none}
.peek.open{height:min(70vh,560px)}
.peek-grip{display:flex;align-items:center;gap:10px;padding:12px 6px 8px;text-align:left;color:#eafff0}
.peek-grip span{position:absolute;top:6px;left:50%;width:40px;height:3px;margin-left:-20px;background:rgba(57,255,106,.5)}
.peek-grip b{font:800 14px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.peek-grip small{flex:1;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.peek-grip i{font-style:normal;color:var(--neon);transition:transform .3s}
.peek.open .peek-grip i{transform:rotate(180deg)}
.peek-list{flex:1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,78%);gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}
.peek-list::-webkit-scrollbar{display:none}
.peek.open .peek-list{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr;overflow-y:auto;overflow-x:hidden;align-content:start}
.peek-list.swap{animation:viewIn .35s ease}
.mini{display:grid;grid-template-columns:56px 1fr auto;grid-template-rows:auto auto;column-gap:10px;row-gap:6px;align-items:center;padding:8px 10px;text-align:left;scroll-snap-align:start;
  background:#020604;box-shadow:inset 0 0 0 1px rgba(57,255,106,.25);transition:box-shadow .2s}
.mini:hover{box-shadow:inset 0 0 0 1px rgba(57,255,106,.7)}
.mini .pv.sm{grid-row:1 / span 2;width:52px}
.mini-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.mini-txt b{font:700 13px/1.15 var(--f-ui);letter-spacing:.06em;color:#eafff0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-txt small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#c9a4ff}
.mini-price{font:800 13px/1 var(--f-display);color:var(--neon);white-space:nowrap;font-variant-numeric:tabular-nums}
.mini-stats{grid-column:2 / span 2;display:flex;gap:6px}
.mini-stats span{display:flex;gap:5px;align-items:baseline;padding:3px 7px;font:600 12px/1 var(--f-ui);color:#eafff0;background:rgba(57,255,106,.08);box-shadow:inset 0 0 0 1px rgba(57,255,106,.25)}
.mini-stats i{font-style:normal;font-size:9px;letter-spacing:.14em;color:var(--dim)}
.mini-all{display:flex;justify-content:center;align-items:center;gap:8px;font:700 12px/1 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--neon)}
.mini-all span{font-size:22px}

/* Labo : informations */
.lab-intro{margin:0;color:#b9cbc2;line-height:1.6}
.lab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lab-fact{display:flex;flex-direction:column;gap:6px;padding:12px 10px;background:#020604;box-shadow:inset 0 0 0 1px rgba(57,255,106,.25)}
.lab-fact b{font:800 17px/1 var(--f-display);color:var(--neon);text-shadow:0 0 8px rgba(57,255,106,.5)}
.lab-fact small{font-size:11px;line-height:1.3;color:var(--dim)}
.lab-sec{display:flex;flex-direction:column;gap:10px}
.lab-sec ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.lab-sec li{display:flex;flex-direction:column;gap:4px;padding:12px 14px;background:linear-gradient(180deg,rgba(14,26,20,.92),rgba(4,9,6,.94));box-shadow:inset 0 0 0 1px rgba(57,255,106,.22)}
.lab-sec li b{font:700 13px/1.2 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:#eafff0}
.lab-sec li span{font-size:13px;line-height:1.5;color:#b9cbc2}
.lab-contact{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;background:#020604;box-shadow:inset 0 0 0 1px rgba(57,255,106,.3);font:700 15px/1 var(--f-ui);color:#eafff0;user-select:all}
/* ajustements cartes d'aperçu */
:root{--peek-h:166px}
.mini-price{grid-column:3;grid-row:1}
.mini-stats{grid-column:2 / span 2;grid-row:2}
.mini-stats span{white-space:nowrap}
.peek-list{grid-auto-columns:minmax(250px,84%)}

/* =====================================================================
   BOCAL OUVERT : inclinaison, élément qui sort, pop-up des produits
   ===================================================================== */
.incubator[data-pos="center"].open{--t:translateX(-26%) scale(.84)}
body.inc-open .mini-arrow,body.inc-open .inc-label{opacity:0;pointer-events:none;transition:opacity .25s}
.emerge{position:absolute;z-index:7;pointer-events:none;width:min(34cqw,30cqh);aspect-ratio:1;
  left:calc(50% - min(17cqw,15cqh));top:24%;opacity:0;transform:scale(.25);
  transition:left .7s cubic-bezier(.3,.9,.3,1) .25s, top .7s cubic-bezier(.3,.9,.3,1) .25s, transform .7s cubic-bezier(.3,1.3,.4,1) .25s, opacity .3s .25s;
  filter:drop-shadow(0 0 18px rgba(57,255,106,.55))}
body.inc-open .emerge{left:calc(97% - min(34cqw,30cqh));top:0;opacity:1;transform:none}
.emerge::after{content:"";position:absolute;inset:auto 15% -6% 15%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(57,255,106,.5),transparent)}
.inc-pop{position:absolute;z-index:7;right:3%;top:calc(min(30cqh,34cqw) + 4px);width:min(58%,300px);max-height:calc(100% - min(30cqh,34cqw) - 10px);display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(8,24,14,.94),rgba(2,8,4,.96));clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  box-shadow:inset 0 0 0 1px rgba(57,255,106,.6), 0 0 30px rgba(57,255,106,.2);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.96);transform-origin:top right;transition:opacity .35s .75s, transform .35s .75s, visibility 0s 1.1s}
body.inc-open .inc-pop{opacity:1;visibility:visible;transform:none;transition:opacity .35s .75s, transform .35s .75s, visibility 0s .75s}
.inc-pop header{display:flex;align-items:center;justify-content:space-between;padding:10px 10px 6px 14px}
.inc-pop header b{font:800 14px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:#eafff0;text-shadow:0 0 10px rgba(57,255,106,.6)}
.pop-close{width:30px;height:30px;font:300 24px/1 var(--f-ui);color:var(--dim)}
.pop-close:hover{color:var(--neon)}
.pop-list{overflow-y:auto;scrollbar-width:none;padding:0 8px 8px;display:flex;flex-direction:column;gap:6px}
.pop-list::-webkit-scrollbar{display:none}
.pop-row{display:grid;grid-template-columns:1fr auto;gap:5px 8px;padding:8px 10px;text-align:left;background:#020604;box-shadow:inset 0 0 0 1px rgba(57,255,106,.22);transition:box-shadow .2s}
.pop-row:hover{box-shadow:inset 0 0 0 1px rgba(57,255,106,.7)}
.pop-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.pop-name b{font:700 12px/1.15 var(--f-ui);letter-spacing:.05em;color:#eafff0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop-name small{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#c9a4ff}
.pop-price{font:800 12px/1 var(--f-display);color:var(--neon);white-space:nowrap;align-self:start;font-variant-numeric:tabular-nums}
.pop-stats{grid-column:1 / -1;display:flex;gap:5px}
.pop-stats span{display:flex;gap:4px;align-items:baseline;padding:3px 6px;font:600 11px/1 var(--f-ui);color:#eafff0;white-space:nowrap;background:rgba(57,255,106,.08);box-shadow:inset 0 0 0 1px rgba(57,255,106,.25)}
.pop-stats i{font-style:normal;font-size:8px;letter-spacing:.12em;color:var(--dim)}
.pop-all{padding:10px;font:700 11px/1 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--neon)}
/* bocal ouvert : le pop-up remplace l'aperçu du bas */
body.inc-open .peek{opacity:0;visibility:hidden;pointer-events:none}
body.inc-open .inc-pop{max-height:calc(100% - min(30cqh,34cqw) - 6px)}

/* =====================================================================
   ACCUEIL STYLE MAQUETTE
   ===================================================================== */
/* masqué : ancien titre, bouton/aperçu, étiquette, cadre latéral */
.titlebar,.inc-actions,.peek,.inc-label,.bar.top,.corner{display:none!important}
:root{--peek-h:0px}
.app{padding-block:calc(var(--gut-t) + 8px) calc(var(--tab-h) + var(--gut-b) + 8px);gap:0}

/* fond */
.bg-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.85)}
body.has-bg-photo .lab{display:none}
.lab{position:absolute;top:0;height:100%;width:auto;max-width:42vw;filter:blur(1.6px) brightness(.72) saturate(1.1)}
.lab.l{left:-2vw}.lab.r{right:-2vw}
@media (max-width:560px){.lab{max-width:30vw;filter:blur(2.2px) brightness(.55)}}
.floor{opacity:.6}
.floor-glow{position:absolute;left:0;right:0;bottom:0;height:40%;
  background:radial-gradient(60% 50% at 50% 40%, rgba(57,255,106,.16), transparent 70%),
             linear-gradient(90deg, rgba(162,75,255,.25), transparent 18%, transparent 82%, rgba(162,75,255,.25))}

/* en-tête */
.topline{position:relative;z-index:6;width:100%;max-width:720px;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:8px;padding-top:4px}
.hex-btn{position:relative;width:clamp(38px,10vw,48px);aspect-ratio:1;display:grid;place-items:center;color:#e6ffee;
  background:linear-gradient(135deg,#9aa3ab,#1b2025 35%,#0a0c0f 60%,#4a525a);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);transition:filter .2s, transform .15s}
.hex-btn::before{content:"";position:absolute;inset:2px;background:#040c08;clip-path:inherit;box-shadow:inset 0 0 12px rgba(57,255,106,.25)}
.hex-btn svg{position:relative;width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:1.7;filter:drop-shadow(0 0 4px rgba(57,255,106,.6))}
.hex-btn .dot{position:absolute;top:16%;right:22%;width:6px;height:6px;border-radius:50%;background:var(--neon);box-shadow:0 0 6px var(--neon)}
.hex-btn:hover{filter:drop-shadow(0 0 10px rgba(57,255,106,.7))}
.hex-btn:active{transform:scale(.92)}
.hex-pair{display:flex;gap:6px}
.brand{display:flex;flex-direction:column;align-items:center;min-width:0}
.brand-d{width:28px;height:18px;margin-bottom:-2px;filter:drop-shadow(0 0 6px rgba(57,255,106,.6))}
.brand-title{margin:0;font-family:var(--f-display);font-weight:900;font-size:clamp(24px,8.4vw,52px);line-height:1;letter-spacing:.01em;transform:skewX(-10deg);white-space:nowrap;
  background:linear-gradient(180deg,#fff 0%,#dfe6e3 30%,#7d8a85 50%,#f2f6f4 62%,#9aa6a2 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.7)) drop-shadow(0 0 16px rgba(57,255,106,.25))}
.brand-title span{background:linear-gradient(180deg,#e2ffe9,#39ff6a 45%,#0f9b37);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 12px rgba(57,255,106,.8))}
.brand-sub{display:flex;align-items:center;gap:10px;margin-top:6px;font:500 clamp(9px,2.6vw,13px)/1 var(--f-ui);letter-spacing:.32em;text-transform:uppercase;color:#d9e4e0;white-space:nowrap}
.brand-sub i{font-style:normal;color:var(--neon);letter-spacing:0;font-weight:700}

/* scène */
.stage{flex:1;min-height:240px;margin-top:4px}
.incubator[data-pos="left"],.incubator[data-pos="right"]{opacity:0}
.incubator{top:46%}
.platform{display:none}
.spot{opacity:.7}
.dais{position:absolute;left:50%;top:calc(46cqh + min(42cqh,45cqw));width:min(92cqh,98cqw);aspect-ratio:3.6;transform:translate(-50%,-50%);pointer-events:none}
.dais .disk{position:absolute;inset:18% 14%;border-radius:50%;background:radial-gradient(closest-side, #1a1f24, #07090b 70%, #020304);box-shadow:0 0 0 2px #39ff6a, 0 0 22px 4px rgba(57,255,106,.6), inset 0 6px 14px rgba(255,255,255,.08)}
.dais .ring{position:absolute;border-radius:50%;border:1.5px solid rgba(57,255,106,.5)}
.dais .r1{inset:6% 4%;box-shadow:0 0 16px rgba(57,255,106,.35)}
.dais .r2{inset:-6% -6%;border-color:rgba(57,255,106,.22)}
.mist{position:absolute;left:0;right:0;top:calc(46cqh + min(30cqh,32cqw));height:30%;pointer-events:none;z-index:4}
.mist i{position:absolute;bottom:0;width:60%;height:70%;border-radius:50%;background:radial-gradient(closest-side, rgba(90,255,140,.28), transparent);filter:blur(18px);animation:mist 9s ease-in-out infinite}
.mist i:nth-child(1){left:-10%}.mist i:nth-child(2){left:20%;animation-delay:-3s;opacity:.7}.mist i:nth-child(3){right:-10%;animation-delay:-6s}
@keyframes mist{50%{transform:translateX(8%) scaleY(1.15);opacity:.6}}

/* grandes flèches */
.mini-arrow{width:clamp(48px,7.4vh,76px);aspect-ratio:70/80;top:44%}
.mini-arrow.prev{left:max(4px, calc(50% - min(38cqh,41cqw) - clamp(48px,7.4vh,76px) + 2px))}
.mini-arrow.next{right:max(4px, calc(50% - min(38cqh,41cqw) - clamp(48px,7.4vh,76px) + 2px))}

/* plaque d'état */
.status-plate{position:relative;z-index:5;margin-top:-6px}
.status{padding:10px 30px;font:700 clamp(12px,3.6vw,17px)/1 var(--f-ui);letter-spacing:.2em;color:#eafff0;
  background:linear-gradient(180deg,#0b1a12,#030805);clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,16px 100%,0 50%);box-shadow:inset 0 0 0 2px #39ff6a, 0 0 20px rgba(57,255,106,.4)}
.status em{color:var(--neon);text-shadow:0 0 10px var(--neon)}

/* tuiles catégories */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,2vw,14px);width:100%;max-width:640px;margin-top:12px}
.tile{max-width:none;padding:10px 4px 9px;gap:6px;font-size:clamp(8px,2.4vw,12px);letter-spacing:.1em;white-space:nowrap;overflow:hidden;
  background:linear-gradient(180deg,rgba(28,20,44,.9),rgba(6,6,12,.94))}
.tile svg{width:clamp(22px,7vw,34px);height:clamp(22px,7vw,34px)}
.tile[aria-current="true"]{transform:translateY(-3px)}
.tile[aria-current="true"]::after{box-shadow:inset 0 0 0 2px var(--neon), inset 0 0 24px rgba(57,255,106,.35), 0 0 18px rgba(57,255,106,.5)}

/* compteur */
.counter2{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;width:100%}
.counter2 i{position:relative;width:clamp(40px,18vw,140px);height:1px;background:linear-gradient(90deg,transparent,rgba(57,255,106,.7))}
.counter2 i:last-child{transform:scaleX(-1)}
.counter2 i::after{content:"";position:absolute;right:-2px;top:-3px;width:6px;height:6px;background:var(--neon);box-shadow:0 0 6px var(--neon)}
.counter2 span{padding:6px 18px;font:800 14px/1 var(--f-display);letter-spacing:.12em;color:#eafff0;font-variant-numeric:tabular-nums;
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);background:#030805;box-shadow:inset 0 0 0 1.5px #39ff6a}
.counter2 small{color:var(--dim);font-size:13px}

body:not([data-view="incubateur"]) .topline,body:not([data-view="incubateur"]) .status-plate,body:not([data-view="incubateur"]) .tiles,body:not([data-view="incubateur"]) .counter2{visibility:hidden}
body.inc-open .status-plate,body.inc-open .counter2{opacity:.35;transition:opacity .3s}
@media (max-height:700px){.tiles{margin-top:8px}.tile{padding:7px 3px 6px}.tile svg{width:22px;height:22px}.counter2{margin-top:6px}.brand-sub{margin-top:4px}}
/* bocal ouvert : élément sorti plus au centre, sous le titre */
body.inc-open .emerge{left:calc(56% - min(17cqw,15cqh));top:5%}
.incubator[data-pos="center"].open{--t:translateX(-20%) scale(.84)}
.stage{z-index:6}
.topline{z-index:5}
.inc-pop{top:calc(5% + min(30cqh,34cqw) - 6px)}
body.inc-open .inc-pop{max-height:calc(95% - min(30cqh,34cqw))}
.incubator[data-pos="center"].open{--t:translateX(-20%) scale(.98)}
/* pop-up centré juste sous le produit sorti */
.inc-pop{right:auto;left:56%;width:min(64%,300px);transform-origin:top center;transform:translateX(-50%) translateY(10px) scale(.96)}
body.inc-open .inc-pop{transform:translateX(-50%)}

/* =====================================================================
   KIT 3D DEEPLAB33 : titre, flèches, boutons, cadre, panneau, socle
   ===================================================================== */
.kit{display:block;width:100%;height:100%}
.kit-fb{position:absolute;inset:0;display:grid;place-items:center;font:800 12px/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:#eafff0;transition:opacity .3s}
.kit-ready > .kit-fb{opacity:0}
.status-plate,.counter2,.tiles,.dais,.mist{display:none!important}

/* titre */
.brand-kit{position:relative;margin:0;width:min(74vw,440px);aspect-ratio:3;filter:drop-shadow(0 6px 16px rgba(0,0,0,.6))}
.brand-kit .kit-fb{font-size:clamp(22px,7vw,40px);font-style:italic}
.brand-kit .kit-fb b{color:var(--neon)}
.brand-sub{margin-top:0}
.topline{align-items:center}

/* flèches de direction */
.mini-arrow{width:clamp(50px,7.6vh,74px);aspect-ratio:2.15/2.4;top:42%}
.mini-arrow canvas{position:absolute;inset:0}
.mini-arrow .chev{position:absolute;left:22%;top:18%;width:56%;height:56%}
.mini-arrow.prev{left:max(2px, calc(50% - min(38cqh,41cqw) - clamp(50px,7.6vh,74px) + 4px))}
.mini-arrow.next{right:max(2px, calc(50% - min(38cqh,41cqw) - clamp(50px,7.6vh,74px) + 4px))}

/* sous le bocal : [bouton] [cadre] [bouton] */
.ctrl-row{position:relative;z-index:6;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(6px,2vw,14px);width:100%;max-width:560px;margin-top:2px}
.kit-btn{position:relative;width:100%;max-width:200px;aspect-ratio:3.5/1.35;justify-self:center;filter:drop-shadow(0 6px 12px rgba(0,0,0,.6));transition:transform .15s, filter .2s}
.kit-btn:hover{filter:drop-shadow(0 6px 12px rgba(0,0,0,.6)) brightness(1.15)}
.kit-btn:active{transform:scale(.94)}
.kit-btn:focus-visible{outline:2px solid var(--neon);outline-offset:3px}
.kit-btn .flip{transform:scaleX(-1);transition:transform .35s}
body.inc-open #btnSuivant .flip{transform:none}           /* ouvert : la flèche redevient « retour » */
#btnValider{animation:valid 2.4s ease-in-out infinite}
@keyframes valid{50%{filter:drop-shadow(0 6px 12px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(57,255,106,.6))}}
.kit-frame{position:relative;width:clamp(96px,27vw,150px);aspect-ratio:3.35/2.75}
.kit-frame canvas{position:absolute;inset:0}
.frame-txt{position:absolute;inset:16% 12% 22%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center}
.frame-txt small{font:600 10px/1 var(--f-ui);letter-spacing:.24em;color:var(--dim);font-variant-numeric:tabular-nums}
.frame-txt b{font:800 clamp(11px,3.2vw,15px)/1.05 var(--f-display);letter-spacing:.08em;color:#eafff0;text-shadow:0 0 10px rgba(57,255,106,.7)}
.frame-txt.swap{animation:viewIn .4s ease}
body:not([data-view="incubateur"]) .ctrl-row{visibility:hidden}

/* pop-up dans le panneau du kit */
.inc-pop{background:none;box-shadow:none;clip-path:none;aspect-ratio:4.28/3.06;height:auto;width:min(80%,340px);max-height:none!important;overflow:visible}
.inc-pop .pop-bg{position:absolute;inset:0;z-index:-1}
.inc-pop header{position:static;padding:0}
.inc-pop header b{position:absolute;left:11%;top:17%}
.inc-pop .pop-list{position:absolute;left:9%;right:12%;top:28%;bottom:16%;padding:0 4px}
.pop-close{position:absolute;right:0;top:0;width:14%;height:21%;color:transparent}
.pop-row{background:rgba(2,8,4,.78)}

/* écran de démarrage */
.boot-badge{width:160px;height:160px;margin:0 auto 16px}

/* onglet Labo : fiole 3D */
.lab-hero{position:relative;width:min(56vw,240px);aspect-ratio:1;margin:0 auto -8px;animation:bob 6s ease-in-out infinite;filter:drop-shadow(0 0 30px rgba(57,255,106,.35))}
/* ajustements kit */
.brand-kit{width:min(56vw,400px);justify-self:center}
.incubator{top:52%}
.ctrl-row{margin-top:-10px}
/* flèches de direction sans panneau : chevron néon seul */
.mini-arrow{aspect-ratio:1;width:clamp(44px,6.4vh,64px);filter:none}
.mini-arrow .chev{left:0;top:0;width:100%;height:100%}
.mini-arrow .chev path{stroke-width:6}
.mini-arrow:hover{filter:drop-shadow(0 0 10px rgba(57,255,106,.9))}

/* =====================================================================
   PROFONDEUR, POP-UP RÉORGANISÉ, ICÔNES 3D
   ===================================================================== */
.brand-sub{display:none}
/* bocaux voisins visibles de chaque côté (profondeur) */
.incubator{width:min(84cqh,90cqw)}
.incubator[data-pos="center"]{--t:scale(1.04)}
.incubator[data-pos="left"]{--t:translateX(-74%) scale(.56);opacity:.95;filter:blur(2.5px) brightness(.42) saturate(.75)}
.incubator[data-pos="right"]{--t:translateX(74%) scale(.56);opacity:.95;filter:blur(2.5px) brightness(.42) saturate(.75)}
.incubator[data-pos="back"]{--t:scale(.3);opacity:0}
.mini-arrow.prev{left:max(2px, calc(50% - min(42cqh,45cqw) - clamp(44px,6.4vh,64px) + 14px))}
.mini-arrow.next{right:max(2px, calc(50% - min(42cqh,45cqw) - clamp(44px,6.4vh,64px) + 14px))}

/* bocal ouvert : bocal à gauche, produit sorti plus gros en haut à droite, pop-up en bas */
.incubator[data-pos="center"].open{--t:translateX(-22%) translateY(-6%) scale(.82)}
body.inc-open .incubator[data-pos="left"],body.inc-open .incubator[data-pos="right"]{opacity:0}
.emerge{width:min(52cqw,44cqh)}
body.inc-open .emerge{left:calc(66% - min(26cqw,22cqh));top:-2%}
.inc-pop{left:3%!important;right:3%;width:auto;top:auto!important;bottom:0;height:min(42%,250px);aspect-ratio:auto;transform-origin:bottom center;transform:translateY(16px) scale(.97)}
body.inc-open .inc-pop{transform:none}
.inc-pop header b{left:8%;top:16%}
.inc-pop .pop-list{left:6%;right:8%;top:30%;bottom:17%;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,46%);gap:8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;align-items:stretch}
.inc-pop .pop-row{scroll-snap-align:start;align-content:start}
.pop-all{display:grid;place-items:center;background:rgba(57,255,106,.08);box-shadow:inset 0 0 0 1px rgba(57,255,106,.4)}
.pop-close{right:0;top:0;width:12%;height:24%}

/* bouton profil 3D */
.kit-ico{position:relative;width:clamp(42px,11vw,54px);aspect-ratio:1;transition:transform .15s, filter .2s;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.kit-ico:hover{filter:drop-shadow(0 0 10px rgba(57,255,106,.7))}
.kit-ico:active{transform:scale(.92)}

/* onglets : objets 3D */
.tab-ico{position:relative;display:block;width:clamp(34px,9vw,44px);aspect-ratio:1;filter:brightness(.55) saturate(.6);transition:filter .25s, transform .25s}
.tab[aria-current="page"] .tab-ico{filter:drop-shadow(0 0 8px rgba(57,255,106,.7));transform:translateY(-3px) scale(1.08)}
.tab .badge{z-index:2}
/* bocaux voisins plus proches : ils dépassent derrière le bocal central */
.incubator[data-pos="left"]{--t:translateX(-58%) translateY(-4%) scale(.5)}
.incubator[data-pos="right"]{--t:translateX(58%) translateY(-4%) scale(.5)}
@media (min-width:700px){.incubator[data-pos="left"]{--t:translateX(-80%) scale(.55)}.incubator[data-pos="right"]{--t:translateX(80%) scale(.55)}}

/* =====================================================================
   CORRECTIFS : titre centré, onglets encadrés, pop-up version mobile d'origine
   ===================================================================== */
/* titre centré (colonnes latérales de même largeur) */
.topline{grid-template-columns:1fr auto 1fr}
.topline > .kit-ico{justify-self:start}
.topline > .hex-pair{justify-self:end}

/* onglets : plus de plaque de fond, chaque bouton a son cadre */
.tab-deck{display:none}
.tabbar{display:flex;justify-content:center;align-items:center;gap:10px;filter:none;padding-top:6px;height:calc(var(--tab-h) + var(--gut-b))}
.tab{flex:0 1 104px;height:62px;gap:4px;font-size:9.5px;letter-spacing:.12em;
  background:linear-gradient(180deg,rgba(12,22,17,.92),rgba(3,8,5,.95));
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
  box-shadow:inset 0 0 0 1px rgba(162,75,255,.55)}
.tab::before{top:0;left:22%;right:22%}
.tab[aria-current="page"]{box-shadow:inset 0 0 0 1.5px var(--neon), inset 0 0 18px rgba(57,255,106,.2)}
.tab-ico{width:30px}
.tab[aria-current="page"] .tab-ico{transform:translateY(-1px) scale(1.05)}
.tab .badge{top:4px;right:calc(50% - 24px)}

/* boutons sous le bocal un peu plus petits */
.kit-btn{max-width:150px}
.kit-frame{width:clamp(90px,24vw,128px)}

/* pop-up : retour à la première version (colonne à droite, sous le produit sorti) */
.emerge{width:min(42cqw,36cqh)}
body.inc-open .emerge{left:calc(76% - min(21cqw,18cqh));top:0}
.inc-pop{left:auto!important;right:3%;bottom:auto;top:calc(min(42cqw,36cqh) - 6px)!important;width:min(56%,300px);height:auto;aspect-ratio:auto;
  max-height:calc(100% - min(42cqw,36cqh))!important;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(8,24,14,.94),rgba(2,8,4,.96));
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  box-shadow:inset 0 0 0 1px rgba(57,255,106,.6), 0 0 30px rgba(57,255,106,.2);
  transform-origin:top right;transform:translateY(10px) scale(.96)}
body.inc-open .inc-pop{transform:none}
.inc-pop .pop-bg{display:none}
.inc-pop header{position:static;display:flex;align-items:center;justify-content:space-between;padding:10px 8px 6px 14px}
.inc-pop header b{position:static}
.inc-pop .pop-list{position:static;flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;overflow-y:auto;overflow-x:hidden;padding:0 8px 8px}
.pop-close{position:static;width:30px;height:30px;color:var(--dim)}
.pop-close:hover{color:var(--neon)}
.pop-all{background:none;box-shadow:none}
.incubator[data-pos="center"].open{--t:translateX(-24%) scale(.86)}

/* cadre commun derrière les boutons (flèches, en-tête) — même style que les onglets */
.mini-arrow,.topline .kit-ico,.topline .hex-btn{
  background:linear-gradient(180deg,rgba(12,22,17,.92),rgba(3,8,5,.95));
  clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px);
  box-shadow:inset 0 0 0 1px rgba(162,75,255,.6), inset 0 0 14px rgba(57,255,106,.12)}
.mini-arrow:hover,.topline .kit-ico:hover,.topline .hex-btn:hover{box-shadow:inset 0 0 0 1.5px var(--neon), inset 0 0 16px rgba(57,255,106,.25);filter:none}
.mini-arrow{width:clamp(38px,5.6vh,50px);padding:8px}
.mini-arrow .chev{position:static;width:100%;height:100%}
.topline .kit-ico{width:clamp(40px,10vw,48px);padding:5px}
.topline .hex-btn{width:clamp(40px,10vw,48px)}
.topline .hex-btn::before{display:none}
.topline .hex-btn svg{width:50%;height:50%}

/* petits écrans en hauteur : tout tient sans chevauchement */
.stage{min-height:150px}
.brand-kit{width:min(56vw,400px,54vh)}
@media (max-height:720px){
  .kit-btn{max-width:min(150px,22vh)}
  .kit-frame{width:min(128px,17vh)}
  .tab{height:54px}
  :root{--tab-h:66px}
}

/* pop-up : panneau du kit remis (proportions d'origine) avec sa zone d'écriture */
.inc-pop{width:min(66%,340px);height:auto;aspect-ratio:4.28/3.06;max-height:none!important;overflow:visible;
  background:none;clip-path:none;box-shadow:none;display:block}
.inc-pop .pop-bg{display:block;position:absolute;inset:0;z-index:0}
.inc-pop header{position:static;padding:0}
.inc-pop header b{position:absolute;z-index:1;left:11%;top:17%;font-size:clamp(11px,3vw,14px)}
.pop-close{position:absolute;z-index:2;right:0;top:0;width:14%;height:21%;color:transparent}
.inc-pop .pop-list{position:absolute;z-index:1;left:9%;right:11%;top:29%;bottom:16%;padding:0 2px;display:flex;flex-direction:column;gap:5px;overflow-y:auto;overflow-x:hidden}
.inc-pop .pop-row{padding:6px 8px;gap:4px 8px;background:rgba(2,8,4,.82)}
.inc-pop .pop-stats span{padding:2px 5px;font-size:10px}
.inc-pop .pop-all{padding:6px}
.inc-pop{width:min(86%,400px)}
.inc-pop{top:calc(min(42cqw,36cqh) + 6px)!important}

/* socle fixe au centre : seuls les bocaux défilent au-dessus */
.socle-view{position:absolute;left:50%;top:52%;width:min(84cqh,90cqw);aspect-ratio:.84;z-index:2;pointer-events:none;
  transform:translate(-50%,-50%) scale(1.04);transition:transform .8s cubic-bezier(.6,.05,.2,1)}
.socle-view canvas{width:100%;height:100%;display:block}
body.inc-open .socle-view{transform:translate(-50%,-50%) translateX(-24%) scale(.86)}
body:not([data-view="incubateur"]) .socle-view{visibility:hidden}

/* =====================================================================
   SALLE D'ANALYSE 3D
   ===================================================================== */
#view-labo{display:none!important}
.room{position:fixed;inset:0 0 calc(var(--tab-h) + var(--gut-b)) 0;z-index:4;display:none;background:#020604}
body[data-view="labo"] .room{display:block}
.room-gl{position:absolute;inset:0;touch-action:none;cursor:grab}
.room-gl:active{cursor:grabbing}
.room-gl canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.room-load{position:absolute;inset:0;display:grid;place-items:center;font:600 12px/1 var(--f-ui);letter-spacing:.3em;text-transform:uppercase;color:var(--neon);pointer-events:none}
.room-hint{position:absolute;left:0;right:0;top:calc(var(--gut-t) + 14px);margin:0;text-align:center;font:500 11px/1.4 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:#cfe;opacity:.75;pointer-events:none;padding-inline:16px;transition:opacity .3s}
body.room-focus .room-hint{opacity:0}
.room-hot{position:absolute;inset:0;pointer-events:none}
.hot{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;pointer-events:auto;margin:-14px 0 0 -14px;transition:opacity .3s}
.hot i{position:relative;width:28px;height:28px;flex:none;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:rgba(2,12,6,.75);box-shadow:inset 0 0 0 2px var(--neon)}
.hot i::after{content:"";position:absolute;inset:9px;background:var(--neon);clip-path:inherit;box-shadow:0 0 10px var(--neon);animation:blink 1.8s infinite}
.hot span{padding:5px 9px;font:700 10px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:#eafff0;white-space:nowrap;
  background:rgba(3,12,7,.85);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);box-shadow:inset 0 0 0 1px rgba(57,255,106,.5)}
.hot.off{opacity:0;pointer-events:none}
.hot.on span{box-shadow:inset 0 0 0 1.5px var(--neon)}
.room-panel{position:absolute;left:max(12px,var(--gut-l));right:max(12px,var(--gut-r));bottom:12px;max-height:52%;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(8,24,14,.95),rgba(2,8,4,.97));clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  box-shadow:inset 0 0 0 1px rgba(57,255,106,.6), 0 0 30px rgba(57,255,106,.2);animation:viewIn .35s ease}
@media (min-width:700px){.room-panel{left:auto;right:24px;bottom:24px;width:380px;max-height:70%}}
.room-panel header{display:flex;align-items:center;justify-content:space-between;padding:12px 8px 6px 16px}
.room-panel header b{font:800 15px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:#eafff0;text-shadow:0 0 10px rgba(57,255,106,.6)}
.room-panel .pop-close{position:static;width:32px;height:32px;color:var(--dim);font:300 26px/1 var(--f-ui)}
.room-body{overflow-y:auto;padding:0 14px 14px;display:flex;flex-direction:column;gap:10px;color:#b9cbc2;font-size:13px;line-height:1.55}
.room-body p{margin:0}
.room-body ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.room-body li{display:flex;flex-direction:column;gap:3px;padding:10px 12px;background:#020604;box-shadow:inset 0 0 0 1px rgba(57,255,106,.22)}
.room-body li b{font:700 12px/1.2 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:#eafff0}
.room-body .demo-chip{align-self:flex-start}

/* =====================================================================
   SALLE D'INCUBATION 3D EN DÉCOR DE L'ACCUEIL
   ===================================================================== */
.inc-room{position:absolute;inset:0;opacity:0;transition:opacity 1s}
.inc-room canvas{width:100%!important;height:100%!important;display:block}
body.has-room .inc-room{opacity:1}
body.has-room .lab,body.has-room .bg-photo,body.has-room .floor,body.has-room .floor-glow{display:none}
body.has-room .vignette{background:radial-gradient(120% 90% at 50% 45%, transparent 50%, rgba(0,0,0,.8))}
body.has-room .spot{opacity:.35}
.inc-hot{position:fixed;inset:0;z-index:3;pointer-events:none}
body:not([data-view="incubateur"]) .inc-hot,body.inc-open .inc-hot{display:none}
.hot.cab span{font-size:9px;padding:4px 7px}
.hot.cab.on i{box-shadow:inset 0 0 0 2px #fff, 0 0 12px var(--neon)}
.hot.cab.on span{color:var(--neon)}
/* salle d'analyse : plein écran, sous les onglets (même dimension que l'accueil) */
.room{inset:0}
.room-panel{bottom:calc(var(--tab-h) + var(--gut-b) + 12px)}
@media (min-width:700px){.room-panel{bottom:calc(var(--tab-h) + var(--gut-b) + 20px)}}

/* bocaux vivants dans la salle : les canvas des bocaux et le socle séparé ne servent plus,
   les éléments .incubator restent comme zones de tap invisibles */
body.has-room .incubator canvas.view,body.has-room .socle-view,body.has-room .spot{visibility:hidden}
body.has-room .incubator[data-pos="left"],body.has-room .incubator[data-pos="right"],body.has-room .incubator[data-pos="back"]{pointer-events:none}
/* titre retiré */
.brand-kit{visibility:hidden}

/* salle de stockage en décor : on assombrit pour garder le panier lisible */
body[data-view="stockage"] .inc-hot,body[data-view="catalogue"] .inc-hot{display:none}
body[data-view="stockage"] .vignette,body[data-view="catalogue"] .vignette{background:linear-gradient(rgba(2,6,4,.45),rgba(2,6,4,.7))}

/* =====================================================================
   CHARGEMENT, MENU, TRANSITIONS, GUIDE, HABILLAGE KIT
   ===================================================================== */
#boot{z-index:60}
#boot .bar{width:200px}
#boot .bar i{animation:none;width:0;transition:width .3s}
.boot-pct{margin-top:10px!important;font:700 11px/1 var(--f-display)!important;letter-spacing:.2em;color:var(--dim)}

/* menu */
.menu{position:fixed;inset:0;z-index:8;display:none;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,5vh,44px);
  padding:calc(var(--gut-t) + 20px) max(20px,var(--gut-r)) calc(var(--gut-b) + 28px) max(20px,var(--gut-l))}
body[data-view="menu"] .menu{display:flex}
body[data-view="menu"] .inc-room{filter:none}
body[data-view="menu"] .tabbar,body[data-view="menu"] .topline{display:none}
.menu-title{width:min(92vw,620px);aspect-ratio:2.6;filter:drop-shadow(0 10px 30px rgba(0,0,0,.7)) drop-shadow(0 0 30px rgba(57,255,106,.25))}
.menu-btns{display:flex;flex-direction:column;gap:14px;width:min(86vw,340px);perspective:600px}
.menu-btn{position:relative;height:64px;font:800 clamp(13px,3.8vw,16px)/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:#eafff0;
  transform:rotateX(14deg);transform-style:preserve-3d;animation:menuFloat 4s ease-in-out infinite;transition:transform .2s, filter .2s;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.6))}
.menu-btn:nth-child(2){animation-delay:-2s}
.menu-btn span{position:relative;text-shadow:0 0 12px rgba(57,255,106,.7)}
.menu-btn:hover{filter:drop-shadow(0 12px 16px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(57,255,106,.6))}
.menu-btn:active{transform:rotateX(14deg) translateZ(-14px) scale(.97)}
@keyframes menuFloat{50%{transform:rotateX(8deg) translateY(-4px)}}

/* transition entre salles */
.warp{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:0;display:grid;place-items:center;align-content:center;gap:18px;
  background:radial-gradient(60% 50% at 50% 50%, rgba(10,40,20,.96), #010402 75%)}
.warp.in{opacity:1;pointer-events:auto;transition:opacity .7s ease}
.warp.out{opacity:0;transition:opacity .8s ease}
.warp-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg, rgba(57,255,106,.06) 0 2px, transparent 2px 5px);overflow:hidden}
.warp-scan::after{content:"";position:absolute;left:0;right:0;height:22%;top:-25%;background:linear-gradient(transparent, rgba(57,255,106,.22), transparent)}
.warp.in .warp-scan::after{animation:warpScan 1.4s linear infinite}
@keyframes warpScan{to{top:110%}}
.warp-core{position:relative;width:130px;height:130px;transform:scale(.6);opacity:0;transition:transform .9s cubic-bezier(.2,1.4,.4,1) .15s, opacity .5s .15s;filter:drop-shadow(0 0 30px rgba(57,255,106,.6))}
.warp.in .warp-core{transform:none;opacity:1}
.warp-core::before{content:"";position:absolute;inset:-18px;border-radius:50%;border:2px dashed rgba(57,255,106,.6);animation:ring 3s linear infinite}
.warp-name{margin:0;font:800 clamp(14px,4.4vw,20px)/1 var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:#eafff0;text-shadow:0 0 14px rgba(57,255,106,.8);
  opacity:0;transform:translateY(8px);transition:opacity .5s .35s, transform .5s .35s}
.warp.in .warp-name{opacity:1;transform:none}
.warp-bar{width:180px;height:2px;background:rgba(57,255,106,.2);overflow:hidden}
.warp-bar i{display:block;height:100%;width:0;background:var(--neon);box-shadow:0 0 8px var(--neon)}
.warp.in .warp-bar i{animation:warpBar 1.5s ease forwards}
@keyframes warpBar{to{width:100%}}

/* guide du chimiste */
.room-help{position:absolute;z-index:3;right:max(14px,var(--gut-r));top:calc(var(--gut-t) + 52px);width:44px;height:44px;font:800 18px/1 var(--f-display);color:var(--neon)}
.guide{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:16px max(16px,var(--gut-r)) calc(var(--tab-h) + var(--gut-b) + 16px) max(16px,var(--gut-l));background:rgba(1,5,3,.55);backdrop-filter:blur(3px);animation:viewIn .5s ease}
.guide-card{width:min(100%,420px);max-height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:22px 20px 20px}
.guide-card header{display:flex;align-items:center;justify-content:space-between}
.guide-card header b{font:800 17px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:#eafff0;text-shadow:0 0 12px rgba(57,255,106,.7)}
.guide-card .pop-close{position:static;width:34px;height:34px;color:var(--dim);font:300 26px/1 var(--f-ui)}
.guide-steps{margin:0;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:10px}
.guide-steps li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:2px 10px;align-items:start}
.guide-steps li::before{content:counter(s);grid-row:span 2;width:28px;height:28px;display:grid;place-items:center;font:800 13px/1 var(--f-display);color:#021006;background:var(--neon);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.guide-steps b{font:700 12px/1.3 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:#eafff0}
.guide-steps span{font-size:13px;line-height:1.5;color:#b9cbc2}
body.guide-open .room-hot,body.guide-open .room-hint,body.guide-open .room-help{opacity:0;pointer-events:none}

/* habillage kit des boutons retiré : on garde les cadres d'origine (verre fumé, coins coupés, liseré) */
/* panneaux */
body.skin :is(.room-panel,.guide-card,.sheet-panel){clip-path:none!important;box-shadow:none!important;
  border:22px solid transparent;border-image:var(--k-panneau) 22% fill / 22px stretch;background:rgba(2,8,4,.82) padding-box!important}
body.skin .sheet-panel{border-bottom-width:0}
body.skin .tab{color:#9fb5aa}
@media (prefers-reduced-motion:reduce){.menu-btn{animation:none}}
body.skin .mini-arrow{width:clamp(46px,6.4vh,56px);padding:4px}
body.skin .topline :is(.hex-btn,.kit-ico){width:clamp(44px,11vw,52px)}
/* le ✕ gravé dans le panneau du kit devient le vrai bouton de fermeture */
body.skin :is(.guide-card,.room-panel){position:relative}
body.skin :is(.guide-card,.room-panel) .pop-close{position:absolute;right:-24px;top:-24px;width:34px;height:34px;border:0!important;border-image:none!important;background:none!important;color:transparent;z-index:2}
body.skin .room-panel{position:absolute}

/* =====================================================================
   HUB D'ACCUEIL
   ===================================================================== */
.menu{padding:0;display:none}
body[data-view="menu"] .menu{display:block}
.hub-gl{position:absolute;inset:0;touch-action:manipulation}
.hub-gl canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.hub-btn{position:absolute;left:0;top:0;z-index:2;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 16px;min-width:140px;
  font:800 clamp(11px,3.2vw,14px)/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:#eafff0;white-space:nowrap;
  background:linear-gradient(180deg,rgba(12,22,17,.92),rgba(3,8,5,.95));
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
  box-shadow:inset 0 0 0 1.5px rgba(162,75,255,.7), inset 0 0 16px rgba(57,255,106,.12);transition:box-shadow .25s, opacity .4s}
.hub-btn small{font:600 9px/1 var(--f-ui);letter-spacing:.2em;color:var(--dim)}
.hub-btn.primary{box-shadow:inset 0 0 0 1.5px var(--neon), inset 0 0 18px rgba(57,255,106,.22)}
.hub-btn.hot,.hub-btn:hover{box-shadow:inset 0 0 0 2px var(--neon), inset 0 0 24px rgba(57,255,106,.35), 0 0 18px rgba(57,255,106,.4)}
.hub-btn span{text-shadow:0 0 10px rgba(57,255,106,.6)}
@media (max-width:420px){.hub-btn{min-width:0;padding:9px 10px;font-size:10px}}

/* hub : page flottante de bienvenue */
.hub-card{position:absolute;z-index:2;left:50%;top:44%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 26px;text-align:center;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,24,14,.86),rgba(2,8,4,.9));backdrop-filter:blur(4px);
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
  box-shadow:inset 0 0 0 1.5px rgba(57,255,106,.7), inset 0 0 26px rgba(57,255,106,.15);animation:hubFloat 5s ease-in-out infinite}
.hub-card b{font:800 clamp(14px,4.4vw,20px)/1.15 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:#eafff0;text-shadow:0 0 12px rgba(57,255,106,.7);white-space:nowrap}
.hub-card span{font:500 clamp(11px,3.2vw,14px)/1 var(--f-ui);letter-spacing:.22em;text-transform:uppercase;color:#b9e8c8}
@keyframes hubFloat{50%{transform:translate(-50%,calc(-50% - 8px))}}
@media (min-aspect-ratio:4/5){.hub-card{top:34%}}
@media (prefers-reduced-motion:reduce){.hub-card{animation:none}}
/* cadre du nom de catégorie : fond opaque derrière le texte pour rester lisible sur la 3D */
.kit-frame::before{content:"";position:absolute;inset:13% 11% 19%;background:linear-gradient(180deg,rgba(3,12,7,.94),rgba(1,5,3,.96));
  clip-path:polygon(14% 0,86% 0,100% 18%,100% 82%,86% 100%,14% 100%,0 82%,0 18%);box-shadow:inset 0 0 14px rgba(57,255,106,.18)}
.kit-frame canvas{z-index:1}
.frame-txt{z-index:2}
.frame-txt small{color:#a9c4b6}
.frame-txt b{color:#fff;text-shadow:0 0 8px rgba(57,255,106,.9),0 1px 2px #000}

/* le texte de bienvenue s'inscrit dans le panneau 3D (plus de cadre CSS) */
.hub-card{background:none;backdrop-filter:none;clip-path:none;box-shadow:none;padding:0;animation:none;transform:translate(-50%,-50%);gap:6px}
.hub-card b{white-space:normal;font-size:clamp(13px,3.9vw,22px)}
.hub-card span{font-size:clamp(10px,2.8vw,14px)}
@media (max-width:480px){.hub-btn{min-width:0;padding:7px 8px;font-size:9px;letter-spacing:.06em}.hub-btn small{font-size:8px;letter-spacing:.12em}}
.hub-card b{font-size:1.25em}
.hub-card span{font-size:.72em}
/* étiquettes du hub espacées : l'étiquette du centre est décalée vers le bas */
#hubStock{margin-top:14px}
@media (max-width:480px){#hubStock{margin-top:30px}}
.hub-btn{font-size:clamp(11px,3.4vw,16px);padding:11px 18px}
@media (max-width:480px){.hub-btn{padding:8px 9px;font-size:10px}}
/* glow des étiquettes du hub */
.hub-btn{box-shadow:inset 0 0 0 1.5px rgba(57,255,106,.75), inset 0 0 20px rgba(57,255,106,.2), 0 0 22px rgba(57,255,106,.35);animation:hubGlow 2.8s ease-in-out infinite}
.hub-btn span{text-shadow:0 0 10px rgba(57,255,106,.9),0 0 22px rgba(57,255,106,.5)}
#hubInc{animation-delay:-.9s}#hubStock{animation-delay:-1.8s}
@keyframes hubGlow{50%{box-shadow:inset 0 0 0 2px var(--neon), inset 0 0 26px rgba(57,255,106,.35), 0 0 34px rgba(57,255,106,.6)}}
.hub-gl canvas{filter:drop-shadow(0 0 0 transparent)}
@media (prefers-reduced-motion:reduce){.hub-btn{animation:none}}
/* hub : pas de voile vert (brume, particules, vignette) devant la salle */
body[data-view="menu"] #fx,body[data-view="menu"] .vignette{display:none}
/* étiquettes du hub : texte posé sur le bouton 3D (plus de cadre CSS) */
.hub-btn{background:none!important;clip-path:none;box-shadow:none!important;animation:none;padding:0;min-width:0;gap:2px;font-size:clamp(9px,2.6vw,14px)}
.hub-btn.hot,.hub-btn:hover{box-shadow:none!important}
.hub-btn.hot span{color:#fff}
#hubStock{margin-top:0}
.hub-btn span{text-shadow:0 0 8px rgba(57,255,106,.9),0 1px 2px #000}
.hub-btn small{color:#d6ffe0;text-shadow:0 1px 2px #000;font-size:.62em}
.hub-btn{letter-spacing:.06em}

/* =====================================================================
   SPLASH SCREEN : barre sobre, pourcentage, étapes de chargement
   ===================================================================== */
#boot{background:radial-gradient(70% 55% at 50% 45%, #061a0e, #010302 75%);place-items:center;padding:24px max(24px,var(--gut-r)) 24px max(24px,var(--gut-l));text-transform:none;letter-spacing:0}
.boot-in{width:min(320px,100%);display:flex;flex-direction:column;align-items:center;gap:14px}
.boot-badge{width:110px!important;height:110px!important;margin:0 0 4px!important;filter:drop-shadow(0 0 24px rgba(57,255,106,.35))}
.boot-title{margin:0!important;font:700 11px/1 var(--f-ui)!important;letter-spacing:.32em!important;text-transform:uppercase;color:#cfe}
.boot-row{width:100%;display:flex;align-items:center;gap:12px}
#boot .bar{flex:1;width:auto;height:3px;margin:0;background:rgba(255,255,255,.08);border-radius:2px}
#boot .bar i{border-radius:2px;background:var(--neon);box-shadow:0 0 8px rgba(57,255,106,.7);transition:width .35s ease}
.boot-pct{min-width:40px;text-align:right;margin:0!important;font:700 12px/1 var(--f-display)!important;letter-spacing:.04em!important;color:#eafff0!important;font-variant-numeric:tabular-nums}
.boot-step{margin:0!important;align-self:flex-start;font:500 12px/1.3 var(--f-ui)!important;color:#9fb5aa;letter-spacing:.02em}
.boot-list{list-style:none;margin:0;padding:0;align-self:stretch;display:flex;flex-direction:column;gap:6px}
.boot-list li{display:flex;align-items:center;gap:8px;font:500 11px/1.2 var(--f-ui);color:#6f8579;transition:color .3s}
.boot-list li i{width:7px;height:7px;flex:none;transform:rotate(45deg);border:1px solid #3d5246;transition:background .3s,border-color .3s}
.boot-list li.run{color:#cfe}.boot-list li.run i{border-color:var(--neon);animation:blink .8s infinite}
.boot-list li.ok{color:#9fb5aa}.boot-list li.ok i{background:var(--neon);border-color:var(--neon)}
.boot-tip{margin:6px 0 0!important;min-height:2.6em;text-align:center;font:500 11px/1.3 var(--f-ui)!important;color:#7d958b;font-style:italic}
.boot-tip.in{animation:viewIn .5s ease}
/* téléphone : les repères des armoires chevauchaient les flèches */
@media (max-width:600px){.inc-hot{display:none}}

/* splash = écran de transition */
.warp{display:none!important}
body.warping #boot .boot-list{display:none}
body.warping #boot{pointer-events:auto}
body.warping.ready #boot{pointer-events:none}

/* pancarte « OUVERT » suspendue en haut du hub */
.hub-sign{position:absolute;z-index:3;top:calc(var(--gut-t) - 6px);left:50%;width:clamp(120px,30vw,210px);aspect-ratio:5/4.6;pointer-events:none;
  transform-origin:50% 8%;transform:translateX(-50%);animation:signSwing 4.5s ease-in-out infinite;filter:drop-shadow(0 8px 14px rgba(0,0,0,.7)) drop-shadow(0 0 14px rgba(57,255,106,.25))}
@keyframes signSwing{0%,100%{transform:translateX(-50%) rotate(-3deg)}50%{transform:translateX(-50%) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.hub-sign{animation:none}}

/* =====================================================================
   CARTE PROFIL — style barre de vie de jeu vidéo (haut gauche)
   ===================================================================== */
.topline > .kit-ico{visibility:hidden}
.hud-card{position:fixed;z-index:30;top:calc(var(--gut-t) + 10px);left:max(10px,var(--gut-l));display:flex;align-items:center;gap:8px;
  padding:6px 12px 6px 6px;max-width:min(62vw,250px);text-align:left;color:#eafff0;
  background:linear-gradient(180deg,rgba(14,26,20,.92),rgba(3,8,5,.94));
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  box-shadow:inset 0 0 0 1.5px rgba(162,75,255,.7), inset 0 0 18px rgba(57,255,106,.12);transition:box-shadow .2s}
.hud-card:hover{box-shadow:inset 0 0 0 1.5px var(--neon), inset 0 0 18px rgba(57,255,106,.25)}
.hud-ava{position:relative;flex:none;width:46px;height:46px}
.hud-lvl{position:absolute;right:-4px;bottom:-3px;min-width:18px;height:18px;padding:0 4px;display:grid;place-items:center;font:800 10px/1 var(--f-display);font-style:normal;color:#021006;
  background:var(--neon);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);box-shadow:0 0 8px var(--neon)}
.hud-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.hud-name{font:800 12px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-rank{font:600 9px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:#c9a4ff;white-space:nowrap}
.hud-bar{position:relative;display:block;height:11px;margin-top:1px;background:#020604;box-shadow:inset 0 0 0 1px rgba(57,255,106,.45);
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 100%,0 100%)}
.hud-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#14b543,#39ff6a 70%,#c8ffd6);box-shadow:0 0 10px var(--neon);transition:width .8s cubic-bezier(.3,.9,.3,1)}
.hud-bar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(0,0,0,.55) 9px 11px)}
.hud-bar b{position:absolute;right:6px;top:50%;transform:translateY(-50%);z-index:1;font:700 8px/1 var(--f-ui);letter-spacing:.06em;color:#fff;text-shadow:0 1px 2px #000}
.hud-stats{display:flex;gap:10px}
.hud-stats span{display:flex;gap:4px;align-items:baseline}
.hud-stats em{font-style:normal;font:600 8px/1 var(--f-ui);letter-spacing:.14em;color:var(--dim)}
.hud-stats b{font:700 11px/1 var(--f-ui);color:#eafff0;font-variant-numeric:tabular-nums}
body:not(.ready) .hud-card,body.warping .hud-card{opacity:0;pointer-events:none}
.hud-card{transition:opacity .4s, box-shadow .2s}
/* la pancarte du hub se décale pour ne pas toucher la carte */
.hub-sign{left:auto;right:max(10px,var(--gut-r));transform:none;animation-name:signSwing2}
@keyframes signSwing2{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
/* carte profil plus discrète */
.hud-card{padding:4px 10px 4px 4px;gap:6px;max-width:min(48vw,170px);opacity:.88;background:linear-gradient(180deg,rgba(10,20,15,.6),rgba(3,8,5,.65));
  box-shadow:inset 0 0 0 1px rgba(162,75,255,.45)}
.hud-card:hover{opacity:1}
.hud-ava{width:32px;height:32px}
.hud-lvl{min-width:14px;height:14px;font-size:8px;right:-3px;bottom:-2px}
.hud-name{font-size:10px}
.hud-rank{font-size:7.5px;letter-spacing:.12em}
.hud-bar{height:7px}
.hud-bar b,.hud-stats{display:none}
.hud-bar::after{background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(0,0,0,.55) 7px 9px)}
.hub-sign{width:clamp(96px,24vw,170px)}
/* mobile first : pancarte au centre en haut, carte visiteur collée au coin */
.hub-sign{left:50%;right:auto;width:clamp(92px,25vw,170px);transform:translateX(-50%);animation-name:signSwing;top:calc(var(--gut-t) - 4px)}
.hud-card{top:calc(var(--gut-t) + 6px);left:max(6px,var(--gut-l));max-width:min(35vw,170px)}
@media (min-width:700px){.hud-card{max-width:190px}}
/* la barre du splash ne doit pas hériter du style .bar du cadre HUD */
#boot .bar{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none}
#boot .bar::after{display:none}

/* hub en carrousel : flèches + boutons du bas comme l'incubateur */
.hub-ctrl{position:absolute;z-index:4;left:50%;bottom:calc(var(--gut-b) + 22px);transform:translateX(-50%);width:min(100%,560px);padding:0 12px}
.hub-arrow{position:absolute;z-index:4;top:58%}
.hub-arrow.prev{left:max(8px,var(--gut-l))}
.hub-arrow.next{right:max(8px,var(--gut-r))}
body:not([data-view="menu"]) .hub-ctrl,body:not([data-view="menu"]) .hub-arrow{display:none}
body[data-view="menu"] .hub-ctrl,body[data-view="menu"] .hub-arrow{visibility:visible;opacity:1}
.hub-arrow.prev{left:max(8px,var(--gut-l))!important}
.hub-arrow.next{right:max(8px,var(--gut-r))!important}
/* flèches du carrousel de l'accueil rapprochées du choix central (mobile first) */
.hub-arrow{top:56%}
.hub-arrow.prev{left:max(8px, calc(50% - min(36vw,190px) - 24px))!important}
.hub-arrow.next{right:max(8px, calc(50% - min(36vw,190px) - 24px))!important}
/* texte des boutons de sélection du hub plus lisible */
.hub-btn span{font-weight:900;letter-spacing:.08em;color:#fff;text-shadow:0 0 6px rgba(57,255,106,1),0 0 14px rgba(57,255,106,.6),0 2px 3px #000}

/* le pop-up et le produit sorti n'apparaissent qu'une fois le bocal ouvert */
body.inc-open:not(.inc-done) .inc-pop{opacity:0!important;visibility:hidden!important;transform:translateY(10px) scale(.96)!important}
body.inc-open.inc-done .inc-pop{transition:opacity .45s .1s, transform .45s .1s, visibility 0s .1s}
body.inc-open:not(.inc-done) .emerge{opacity:0!important;transform:scale(.25)!important}
body.inc-open.inc-done .emerge{transition:left .7s cubic-bezier(.3,.9,.3,1), top .7s cubic-bezier(.3,.9,.3,1), transform .7s cubic-bezier(.3,1.3,.4,1), opacity .3s}
/* fluidité : pas de flou d'arrière-plan coûteux sur mobile */
@media (max-width:700px){ .sheet-backdrop,.guide{backdrop-filter:none!important} }

/* =====================================================================
   BOCAL OUVERT : pop-up en haut de page, le produit monte et s'arrête dessous
   ===================================================================== */
:root{--pop-top:calc(var(--gut-t) + 62px);--pop-h:min(28vh,230px);--emg:min(40vw,24vh)}
.inc-pop{position:fixed!important;left:50%!important;right:auto!important;top:var(--pop-top)!important;bottom:auto!important;
  width:min(92vw,380px)!important;height:var(--pop-h)!important;max-height:none!important;aspect-ratio:auto!important;
  transform:translate(-50%,-10px) scale(.97)!important;transform-origin:top center;z-index:12}
body.inc-open.inc-done .inc-pop{transform:translate(-50%,0)!important}
.inc-pop .pop-list{display:flex!important;flex-direction:row!important;overflow-x:auto!important;overflow-y:hidden!important;gap:8px;scroll-snap-type:x mandatory}
.inc-pop .pop-row{flex:0 0 min(62vw,210px);scroll-snap-align:start}
/* produit : part du bocal (centre) et monte se placer sous le pop-up */
.emerge{position:fixed!important;width:var(--emg)!important;left:calc(50% - var(--emg)/2)!important;top:52vh!important;z-index:11;
  transform:scale(.3)!important;opacity:0!important;filter:drop-shadow(0 0 22px rgba(57,255,106,.6))}
.emerge::after{display:none}
body.inc-open.inc-done .emerge{top:calc(var(--pop-top) + var(--pop-h) + 6px)!important;transform:none!important;opacity:1!important;
  transition:top 1.1s cubic-bezier(.25,.9,.3,1), transform 1.1s cubic-bezier(.25,.9,.3,1), opacity .35s!important}
body.inc-open .topline{visibility:hidden}

/* compteur en ligne (sous la carte visiteur) */
.hud-online{position:fixed;z-index:30;top:calc(var(--gut-t) + 52px);left:max(8px,var(--gut-l));display:flex;align-items:center;gap:6px;
  padding:3px 9px;font:700 10px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:#d6ffe0;
  background:rgba(3,10,6,.6);clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%);box-shadow:inset 0 0 0 1px rgba(57,255,106,.35)}
.hud-online i{width:7px;height:7px;border-radius:50%;background:var(--neon);box-shadow:0 0 8px var(--neon);animation:blink 1.6s infinite}
/* bouton contact (téléphone) à droite */
.hud-dm{position:fixed;z-index:30;top:calc(var(--gut-t) + 46px);right:max(8px,var(--gut-r));width:40px;height:40px;display:grid;place-items:center;color:#021006;
  background:linear-gradient(180deg,#9dffb6,#39ff6a 45%,#14b543);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  filter:drop-shadow(0 0 10px rgba(57,255,106,.6));transition:transform .15s}
.hud-dm svg{width:46%;height:46%;fill:currentColor}
.hud-dm:active{transform:scale(.9)}
body:not(.ready) :is(.hud-online,.hud-dm),body.warping :is(.hud-online,.hud-dm){opacity:0;pointer-events:none}
body[data-view="incubateur"] .hud-dm,body[data-view="catalogue"] .hud-dm,body[data-view="stockage"] .hud-dm{top:calc(var(--gut-t) + 66px)}

/* cagnotte cashback : en haut au centre */
.hud-cash{position:fixed;z-index:30;top:calc(var(--gut-t) + 8px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;padding:5px 14px 5px 6px;color:#eafff0;
  background:linear-gradient(180deg,rgba(14,26,20,.88),rgba(3,8,5,.9));clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);
  box-shadow:inset 0 0 0 1.5px rgba(57,255,106,.65), 0 0 16px rgba(57,255,106,.25)}
.cash-coin{width:26px;height:26px;display:grid;place-items:center;font:900 13px/1 var(--f-display);color:#021006;background:radial-gradient(circle at 35% 30%,#e8ffd0,#39ff6a 55%,#0f9b37);border-radius:50%;box-shadow:0 0 10px rgba(57,255,106,.8)}
.cash-txt{display:flex;flex-direction:column;gap:2px;line-height:1}
.cash-txt small{font:600 8px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:#a9c4b6}
.cash-txt b{font:800 14px/1 var(--f-display);letter-spacing:.02em;font-variant-numeric:tabular-nums;text-shadow:0 0 8px rgba(57,255,106,.7)}
.hud-cash.gain{animation:cashGain .9s ease}
@keyframes cashGain{30%{transform:translateX(-50%) scale(1.12)}}
body:not(.ready) .hud-cash,body.warping .hud-cash{opacity:0;pointer-events:none}
/* le titre du hub reste sous la cagnotte */
@media (max-width:480px){
  .hud-card{max-width:30vw}
  .hud-rank{display:none}
  .hud-cash{padding:4px 10px 4px 5px;gap:5px}
  .cash-coin{width:22px;height:22px;font-size:11px}
  .cash-txt b{font-size:12px}
}

/* pop-up produits : proportions exactes du panneau du kit, texte dans sa zone d'écriture */
:root{--pop-w:min(92vw,380px);--pop-h:calc(var(--pop-w) * .715)}
.inc-pop{width:var(--pop-w)!important;height:var(--pop-h)!important}
.inc-pop .pop-bg{position:absolute;inset:0;width:100%!important;height:100%!important;z-index:0}
.inc-pop header b{position:absolute!important;left:12%!important;top:13%!important;z-index:1;font-size:clamp(10px,3vw,13px)!important}
.inc-pop .pop-list{position:absolute!important;left:10%!important;right:12%!important;top:27%!important;bottom:18%!important;padding:0!important;z-index:1}
.inc-pop .pop-row{flex:0 0 78%!important;padding:6px 8px!important}
.pop-close{position:absolute!important;right:0!important;top:0!important;width:14%!important;height:22%!important;z-index:2}
/* entête « Voir les produits » au-dessus des incubateurs */
.inc-head{position:fixed;z-index:29;left:50%;top:calc(var(--gut-t) + 52px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 20px;
  color:#021006;background:linear-gradient(180deg,#9dffb6,#39ff6a 45%,#14b543);clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%);
  filter:drop-shadow(0 0 12px rgba(57,255,106,.55));transition:transform .15s}
.inc-head span{font:800 12px/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase}
.inc-head small{font:700 9px/1 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;opacity:.75}
.inc-head:active{transform:translateX(-50%) scale(.95)}
body:not([data-view="incubateur"]) .inc-head,body.inc-open .inc-head,body:not(.ready) .inc-head,body.warping .inc-head{display:none}
.inc-head{top:calc(var(--gut-t) + 98px)}

/* zone d'écriture calée sur l'écran hexagonal du panneau (mesuré : x 8–89 %, y 16–82 %) */
.inc-pop header b{left:12%!important;top:20%!important}
.inc-pop .pop-list{left:11%!important;right:13%!important;top:30%!important;bottom:21%!important}
.inc-pop .pop-row{flex:0 0 72%!important}
.pop-close{right:0!important;top:0!important;width:12%!important;height:20%!important}

/* =====================================================================
   SALLE DE STOCKAGE 3D : repères, inventaire façon jeu vidéo, expédition
   ===================================================================== */
#view-stockage.stock-view{top:0;bottom:0;overflow:hidden;padding:0;pointer-events:none}
.stock-drag{position:absolute;inset:0;pointer-events:auto;touch-action:none;cursor:grab}
.stock-drag:active{cursor:grabbing}
#view-stockage .room-hot{position:absolute;inset:0;pointer-events:none;transition:opacity .3s}
body[data-view="stockage"] .vignette{background:radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.75))}
.stock-hint{top:auto!important;bottom:calc(var(--tab-h) + var(--gut-b) + 14px)}
body.stock-focus .stock-hint,body.stock-sending .stock-hint{opacity:0}
body.stock-sending #stockHot{opacity:0;pointer-events:none}
body.stock-sending #stockHot .hot{pointer-events:none}
.hot-n{display:inline-grid;place-items:center;min-width:16px;height:16px;margin-left:6px;padding:0 4px;font:800 9px/1 var(--f-display);font-style:normal;letter-spacing:0;color:#021006;background:var(--neon);box-shadow:0 0 8px var(--neon)}
.hot-n[hidden]{display:none}
#view-stockage .stock-panel{pointer-events:auto;max-height:60%;bottom:calc(var(--tab-h) + var(--gut-b) + 12px)}
@media (min-width:700px){#view-stockage .stock-panel{max-height:72%;width:400px}}
.stock-panel .room-body{gap:10px}
.stock-panel .cta{padding:13px 16px;flex:none}
.stock-panel .ghost-btn{align-self:center}
/* bandeau d'expédition (pendant l'animation du convoyeur) */
.stock-status{position:absolute;left:50%;top:calc(var(--gut-t) + 128px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 18px 12px;min-width:250px;white-space:nowrap;
  background:rgba(3,12,7,.88);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);box-shadow:inset 0 0 0 1.5px var(--neon), 0 0 24px rgba(57,255,106,.3);animation:viewIn .3s ease}
.stock-status[hidden]{display:none}
.stock-status b{font:800 12px/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#eafff0;text-shadow:0 0 10px rgba(57,255,106,.7)}
.stock-status i{position:relative;width:100%;height:4px;overflow:hidden;background:rgba(57,255,106,.15)}
.stock-status i::after{content:"";position:absolute;inset:0 auto 0 0;width:40%;background:var(--neon);box-shadow:0 0 10px var(--neon);animation:stockScan 1.1s ease-in-out infinite}
@keyframes stockScan{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
/* inventaire */
.inv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.inv-slot{position:relative;aspect-ratio:1;display:grid;place-items:center;padding:0;background:radial-gradient(circle at 50% 40%,rgba(57,255,106,.1),rgba(2,6,4,.95) 70%);
  box-shadow:inset 0 0 0 1px rgba(57,255,106,.28);clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);transition:box-shadow .2s}
.inv-slot.empty{background:repeating-linear-gradient(45deg,rgba(57,255,106,.035) 0 4px,transparent 4px 9px),#020604;box-shadow:inset 0 0 0 1px rgba(57,255,106,.12)}
.inv-slot.sel{box-shadow:inset 0 0 0 2px var(--neon), inset 0 0 16px rgba(57,255,106,.35)}
.inv-slot .pv.sm{width:64%}
.inv-q{position:absolute;right:5px;bottom:4px;font:800 11px/1 var(--f-display);color:#eafff0;text-shadow:0 0 6px #000,0 0 6px #000}
.inv-slot small{position:absolute;left:5px;top:4px;font:700 8px/1 var(--f-ui);letter-spacing:.06em;color:#9fb5aa}
.inv-detail{display:flex;align-items:center;gap:10px;padding:10px;background:#020604;box-shadow:inset 0 0 0 1px rgba(57,255,106,.22)}
.inv-dt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.inv-dt b{font:700 12px/1.2 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:#eafff0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-dt small{font-size:11px;color:var(--dim)}
.inv-detail .stepper button{width:28px;height:28px}
.inv-tot{min-width:52px;text-align:right;font:800 14px/1 var(--f-display);color:var(--neon);font-variant-numeric:tabular-nums}
.inv-stats{display:flex;gap:6px}
.inv-stats div{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px;background:#020604;box-shadow:inset 0 0 0 1px rgba(162,75,255,.4)}
.inv-stats small{font:700 9px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.inv-stats b{font:800 14px/1 var(--f-display);color:#eafff0;font-variant-numeric:tabular-nums}
.inv-gain{color:var(--neon)!important;text-shadow:0 0 8px rgba(57,255,106,.5)}
.cash-big b{font-size:20px}
.inv-empty{margin:0;color:var(--dim)}
/* expédition */
.ship-form{gap:10px}
.ship-form .ship{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ship-form .ship-opt{position:relative;flex-direction:column;align-items:stretch;gap:0;padding:9px 10px}
.ship-form .ship-opt input{position:absolute;opacity:0;width:1px;height:1px;padding:0;pointer-events:none}
.ship-form .ship-opt span{flex-direction:column;gap:4px}
.ship-form .ship-opt b{font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.ship-form .ship-opt small{font:800 13px/1 var(--f-display)}
.ship-form label{gap:5px}
.ship-form input,.ship-form textarea{padding:10px 12px;font-size:15px}
.ship-form .sum{gap:6px}
.ship-form .sum .sum-total b{font-size:18px}
.done-badge{display:flex;align-items:center;gap:10px;font:800 16px/1 var(--f-display);letter-spacing:.06em;color:var(--neon);text-shadow:0 0 10px rgba(57,255,106,.5)}
.done-badge svg{width:30px;height:30px;fill:none;stroke:var(--neon);stroke-width:2.6}

/* ===== zone de sécurité Telegram (plein écran) : repli CSS, la valeur exacte est posée en JS ===== */
:root{--gut-t:max(env(safe-area-inset-top,0px), calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px)))}

/* ===== carte visiteur : nom, niveau, classement · total dépensé ===== */
.hud-card{cursor:pointer}
.hud-rank{color:#c9e8d4;font-variant-numeric:tabular-nums}
@media (max-width:480px){ .hud-card{max-width:38vw} .hud-rank{display:block;font-size:8px;letter-spacing:.06em} }
.hud-card::after{content:"›";position:absolute;right:4px;top:50%;transform:translateY(-50%);font:700 12px/1 var(--f-ui);color:var(--neon);opacity:.7}
.hud-card{padding-right:14px!important}

/* ===== écran « Carte du chimiste » : Stats / Pass du labo ===== */
.card-screen{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:calc(var(--gut-t) + 12px) 12px calc(var(--tab-h) + var(--gut-b) + 12px)}
.card-screen[hidden]{display:none}
.card-backdrop{position:absolute;inset:0;background:rgba(1,4,2,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.card-screen .card-panel{position:relative!important;left:auto;right:auto;bottom:auto!important;width:min(100%,420px);max-height:100%}
@media (min-width:700px){.card-screen .card-panel{width:440px;max-height:86%}}
.card-tabs{display:flex;gap:6px;padding:0 14px 10px}
.card-tabs button{flex:1;padding:9px 6px;font:800 11px/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);background:#020604;box-shadow:inset 0 0 0 1px rgba(57,255,106,.22)}
.card-tabs button.on{color:#021006;background:var(--neon);box-shadow:0 0 14px rgba(57,255,106,.45)}
.pc-head{display:flex;align-items:center;gap:12px}
.pc-ava{flex:none;width:58px;height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  background:radial-gradient(circle,rgba(57,255,106,.35),rgba(2,8,4,.95) 70%);box-shadow:inset 0 0 0 2px var(--neon)}
.pc-ava b{font:800 22px/1 var(--f-display);color:#eafff0;text-shadow:0 0 10px var(--neon)}
.pc-ava small{font:700 8px/1 var(--f-ui);letter-spacing:.2em;color:var(--neon)}
.pc-id{display:flex;flex-direction:column;gap:4px;min-width:0}
.pc-id b{font:800 16px/1.1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:#eafff0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-id small{font:600 11px/1.2 var(--f-ui);letter-spacing:.08em;color:#c9a4ff}
.pc-xp{display:flex;flex-direction:column;gap:5px}
.pc-xp .hud-bar{height:10px}
.pc-xp small{font-size:11px;color:var(--dim)}
.pc-stats small+small{font-size:9px;letter-spacing:.08em;text-transform:none}
.pc-sub{margin:4px 0 0;font:800 11px/1 var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:#eafff0}
.pc-note{font-size:12px;color:var(--dim)}
.pc-top{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.pc-top li{display:flex!important;flex-direction:row!important;align-items:center;gap:10px;padding:8px 10px!important}
.pc-top li i{font:800 13px/1 var(--f-display);font-style:normal;color:var(--neon);width:18px}
.pc-top li span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#eafff0;font-weight:600}
.pc-top li b{font:700 10px/1 var(--f-ui);color:#c9a4ff;letter-spacing:.08em}
.pc-top li em{font-style:normal;font:800 12px/1 var(--f-display);color:#eafff0;min-width:62px;text-align:right}
.pc-top li.me{box-shadow:inset 0 0 0 1.5px var(--neon)!important}
.pass-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.pass-row{display:flex!important;flex-direction:row!important;align-items:center;gap:10px;padding:8px 10px!important}
.pass-lv{flex:none;width:30px;height:30px;display:grid;place-items:center;font:800 13px/1 var(--f-display);color:#021006;background:#2a4a38;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.pass-row.done .pass-lv,.pass-row.cur .pass-lv{background:var(--neon)}
.pass-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pass-txt b{font:700 11px/1.2 var(--f-ui)!important;letter-spacing:.1em!important;text-transform:uppercase;color:#eafff0}
.pass-txt small{font-size:10px;color:var(--dim)}
.pass-rw{max-width:42%;text-align:right;font-size:11px;line-height:1.3;color:#c9a4ff}
.pass-st{flex:none;width:18px;text-align:center;font-size:12px;color:var(--neon)}
.pass-row.lock{opacity:.6}
.pass-row.cur{box-shadow:inset 0 0 0 1.5px var(--neon), inset 0 0 18px rgba(57,255,106,.18)!important;opacity:1}
body.card-open .hud-card{opacity:0;pointer-events:none}

/* ===== message de premier chargement (splash) ===== */
.boot-note{max-width:300px;margin:14px auto 0;padding:8px 12px;font:600 11px/1.45 var(--f-ui);letter-spacing:.04em;text-align:center;color:#eafff0;
  background:rgba(57,255,106,.08);box-shadow:inset 0 0 0 1px rgba(57,255,106,.35)}
body.ready .boot-note{display:none}
.pass-txt,.pc-top li span{text-align:left;align-items:flex-start}
.card-screen .room-body{text-align:left}

/* ===== boutons en haut à droite : contact · notifications · éclairage ===== */
.hud-actions{position:fixed;z-index:31;top:calc(var(--gut-t) + 8px);right:max(8px,var(--gut-r));display:flex;gap:6px;transition:opacity .4s}
.hud-actions .hex-btn{width:38px!important;height:38px;aspect-ratio:auto;color:#e6ffee;
  background:linear-gradient(180deg,rgba(12,22,17,.92),rgba(3,8,5,.95));
  clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px);
  box-shadow:inset 0 0 0 1px rgba(162,75,255,.6), inset 0 0 14px rgba(57,255,106,.12)}
.hud-actions .hex-btn::before{display:none}
.hud-actions .hex-btn svg{width:50%;height:50%;fill:none;stroke:currentColor;stroke-width:1.7;filter:drop-shadow(0 0 4px rgba(57,255,106,.6))}
.hud-actions .hex-btn:hover{box-shadow:inset 0 0 0 1.5px var(--neon), inset 0 0 16px rgba(57,255,106,.25);filter:none}
.hud-actions .hex-btn:active{transform:scale(.92)}
body:not(.ready) .hud-actions,body.warping .hud-actions,body.card-open .hud-actions{opacity:0;pointer-events:none}
@media (max-width:370px){.hud-actions{gap:4px}.hud-actions .hex-btn{width:33px!important;height:33px}}
/* l'en-tête de l'incubateur n'a plus ses boutons à droite */
.topline .hex-pair:empty{visibility:hidden}

/* =====================================================================
   SALLE D'INCUBATION explorable (remplace les incubateurs et le carrousel)
   ===================================================================== */
.incx{position:fixed;inset:0;z-index:5;display:none;pointer-events:none}
body[data-view="incubateur"] .incx{display:block}
.incx .room-hot{position:absolute;inset:0;pointer-events:none}
.incx .stock-panel{position:absolute;pointer-events:auto;max-height:60%;bottom:calc(var(--tab-h) + var(--gut-b) + 12px)}
@media (min-width:700px){.incx .stock-panel{max-height:72%;width:400px}}
body.incx-focus .incx-hint{opacity:0}
body[data-view="incubateur"] :is(#app,.inc-head,#peek,#incHot,#incPop,#emergeView,.status-plate){display:none!important}
body[data-view="incubateur"] .vignette{background:radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.7))}
.incx-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.incx-list li{padding:0!important;background:none!important;box-shadow:none!important}
.incx-row{width:100%;display:flex;align-items:center;gap:10px;padding:8px 10px;text-align:left;background:#020604;box-shadow:inset 0 0 0 1px rgba(57,255,106,.22);transition:box-shadow .2s}
.incx-row:hover,.incx-row:active{box-shadow:inset 0 0 0 1.5px var(--neon)}
.incx-row .pv.sm{width:46px}
.incx-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.incx-txt b{font:700 12px/1.2 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:#eafff0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.incx-txt small{font-size:11px;color:var(--dim)}
.incx-price{font:800 13px/1 var(--f-display);color:var(--neon);white-space:nowrap}

/* ===== bouton Retour du kit (panneaux, popups, pages) ===== */
.kit-back{position:relative;flex:none;display:block;width:132px;height:51px;margin:6px auto 2px;padding:0;background:none;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));transition:transform .15s, filter .2s}
.kit-back canvas{display:block;width:100%;height:100%}
.kit-back .kit-fb{display:none}
.kit-back:hover{filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)) brightness(1.15)}
.kit-back:active{transform:scale(.94)}
.sheet-panel .kit-back{margin:10px auto calc(8px + var(--gut-b))}
.page-back{position:fixed;z-index:40;left:max(10px,var(--gut-l));bottom:calc(var(--tab-h) + var(--gut-b) + 10px);margin:0;display:none;width:112px;height:43px}
body:is([data-view="catalogue"],[data-view="compte"]) .page-back{display:block}
body.warping .page-back,body.card-open .page-back{display:none}
.sheet:not([hidden]) ~ .page-back{display:none}
/* accueil : plus de flèches gauche / droite (le bouton rouge et le glissement suffisent) */
.hub-arrow{display:none!important}
/* labo : fenêtre « Guide du chimiste » retirée */
#guide,#roomHelp{display:none!important}
/* cagnotte retirée du HUD ; texte de sélection de l'accueil seul, sans bouton ni fond */
.hud-cash{display:none!important}
.hub-btn{background:none!important;box-shadow:none!important;clip-path:none!important}

/* =====================================================================
   ZONES D'ÉCRITURE : toutes habillées du panneau 3D modélisé (le même que l'accueil)
   ===================================================================== */
body.skin :is(.hot span,.hud-card,.hud-online,.room-hint,.stock-status,.toast,.view .view-inner){
  border-style:solid!important;border-color:transparent!important;border-image:var(--k-panneau) 22% fill / 12px stretch!important;
  background:rgba(2,8,4,.55) padding-box!important;clip-path:none!important;box-shadow:none!important}
/* petites zones : cadre 3D du kit (sans le ✕ gravé du grand panneau) */
body.skin :is(.hot span,.hud-card,.hud-online,.room-hint,.stock-status,.toast){border-image:var(--k-cadre) 30% fill / 12px stretch!important}
/* repères des salles : petite plaque */
body.skin .hot span{border-width:9px!important;border-image-width:9px!important;padding:3px 6px!important;font-size:10px}
/* carte visiteur et compteur en ligne */
body.skin .hud-card{border-width:10px!important;border-image-width:10px!important;padding:2px 14px 2px 2px!important}
body.skin .hud-online{border-width:8px!important;border-image-width:8px!important;padding:1px 6px!important}
/* consignes, bandeau d'envoi, notifications */
body.skin .room-hint{left:50%!important;right:auto!important;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);border-width:12px!important;padding:2px 10px!important;opacity:.95!important}
body.skin .stock-status{border-width:14px!important;border-image-width:14px!important}
body.skin .toast{border-width:14px!important;border-image-width:14px!important}
/* pages catalogue / compte : la page entière dans un grand panneau */
body.skin .view .view-inner{border-width:22px!important;border-image-width:22px!important;margin-inline:auto;padding-inline:6px;min-height:auto}
body.skin .view{padding-inline:8px}
/* ancienne scène des incubateurs (spot lumineux blanc, socle, brume) : plus utilisée nulle part */
#app{display:none!important}