/* Layout : on est assis dans le cockpit. La vitre montre l'océan (vidéo), l'écran de bord porte les commandes, le texte reste sur les bords de la vitre. */
:root{
  --abyss:#010810;
  --ice:#eaf7fd;
  --mist:#9dbfcf;
  --sonar:#7fd3f3;
  --lamp:#ffb347;
  --lamp-hot:#ffe0ad;
  --panel:#061a28;
  --line:rgba(127,211,243,.28);
  --f-display:'Fraunces',Georgia,'Times New Roman',serif;
  --f-ui:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-inst:'Chakra Petch','Saira Condensed','Arial Narrow',sans-serif;
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --e-back:cubic-bezier(.34,1.56,.64,1);
  color-scheme:dark;
}
html,body{height:100%;margin:0;overflow:hidden}
body{background:var(--abyss);color:var(--ice);font-family:var(--f-ui);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}
input,textarea{font:inherit;color:inherit}

/* ===== scène */
.stage{position:fixed;left:0;right:0;bottom:0;top:env(safe-area-inset-top,0px);overflow:hidden;background:var(--abyss);container-type:size}
.ocean{position:absolute;inset:0;overflow:hidden;background:#04202f}
.ocean video,.ocean .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.ocean video{opacity:0;transition:opacity 1.6s var(--e-io)}
.ocean video.on{opacity:1}
.ocean .poster{background-size:cover;background-position:50% 40%;filter:saturate(1.1)}
.tint{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(1,8,16,.5),rgba(1,8,16,.15) 22%,transparent 38%),
  radial-gradient(120% 90% at 50% 10%,transparent 30%,rgba(1,8,16,.55) 100%),
  linear-gradient(180deg,rgba(1,8,16,0) 40%,rgba(1,8,16,.5) 100%);pointer-events:none}
.depthveil{position:absolute;inset:0;background:#02101c;opacity:0;pointer-events:none;transition:opacity 2.6s var(--e-io)}
.caustic{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:radial-gradient(60% 40% at 30% 10%,rgba(150,225,255,.18),transparent 70%),radial-gradient(50% 35% at 70% 0%,rgba(150,225,255,.14),transparent 70%);animation:k-caus 9s ease-in-out infinite alternate}
@keyframes k-caus{to{transform:translateX(3%) scale(1.06);opacity:.3}}


/* ===== cockpit (taille calculée en JS : rect couvrant) */
.cp{position:absolute;container-type:size;pointer-events:none;z-index:4}
.cp>*{pointer-events:none}
.hull,.shade{position:absolute;inset:0}
.hull{display:block;width:100%;height:100%;object-fit:fill;background:none;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.shade{background:#000;opacity:0;-webkit-mask:var(--hull) center/100% 100% no-repeat;mask:var(--hull) center/100% 100% no-repeat}
.lights{position:absolute;inset:0}
.L{position:absolute;left:calc(var(--x) * 1cqw);top:calc(var(--y) * 1cqw);width:calc(var(--w) * 1cqw);height:calc(var(--h) * 1cqw);pointer-events:auto;cursor:pointer}
.L .in{position:absolute;inset:0}
.L .lt{position:absolute;inset:0;background:var(--lit) no-repeat;background-size:100cqw auto;background-position:calc(var(--x) * -1cqw) calc(var(--y) * -1cqw)}
.L .gl{position:absolute;inset:calc(var(--p) * -1cqw);background:var(--glow) no-repeat;background-size:100cqw auto;background-position:calc((var(--x) - var(--p)) * -1cqw) calc((var(--y) - var(--p)) * -1cqw);opacity:var(--go,.7)}
.L .sw{position:absolute;inset:0;overflow:hidden;-webkit-mask:var(--lit) no-repeat;-webkit-mask-size:100cqw auto;-webkit-mask-position:calc(var(--x) * -1cqw) calc(var(--y) * -1cqw);mask:var(--lit) no-repeat;mask-size:100cqw auto;mask-position:calc(var(--x) * -1cqw) calc(var(--y) * -1cqw)}
.L .sw::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 36%,rgba(255,250,230,.95) 50%,transparent 64%);transform:translateX(-110%);animation:k-sx var(--sd) var(--sdl) infinite cubic-bezier(.45,0,.3,1) var(--sdir,normal)}
.L .sw.v::before{background:linear-gradient(180deg,transparent 34%,rgba(255,250,230,.95) 50%,transparent 66%);transform:translateY(-110%);animation-name:k-sy}
@keyframes k-sx{0%{transform:translateX(-110%)}40%,100%{transform:translateX(110%)}}
@keyframes k-sy{0%{transform:translateY(-110%)}40%,100%{transform:translateY(110%)}}
@keyframes k-br{0%,100%{opacity:.66}50%{opacity:1}}
@keyframes k-brs{0%,100%{opacity:.84}50%{opacity:1}}
@keyframes k-fl{0%,84%,100%{opacity:1}86%{opacity:.2}87.5%{opacity:.95}89%{opacity:.3}91%{opacity:1}}
@keyframes k-ch{0%,100%{opacity:.36}9%{opacity:1}32%{opacity:.36}}
@keyframes k-bl{0%,45%{opacity:1}50%,95%{opacity:.26}100%{opacity:1}}
@keyframes k-db{0%,60%,68%,76%,100%{opacity:1}64%,72%{opacity:.2}}
@keyframes k-tw{0%,40%,58%,100%{opacity:.9}44%{opacity:.25}48%{opacity:.95}52%{opacity:.4}}
.lever{position:absolute;left:calc(var(--x) * 1cqw);top:calc(var(--y) * 1cqw);width:calc(var(--w) * 1cqw);height:calc(var(--h) * 1cqw);transform-origin:50% 92%;filter:drop-shadow(0 0 0 transparent)}
.lever img{display:block;width:100%;height:100%}
.knob{position:absolute;width:calc(var(--d) * 1cqw);height:calc(var(--d) * 1cqw);left:calc(var(--x) * 1cqw);top:calc(var(--y) * 1cqw);border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 70%,rgba(255,226,170,.9) 84%,transparent 90%);-webkit-mask:radial-gradient(farthest-side,transparent 60%,#000 66% 82%,transparent 88%);mask:radial-gradient(farthest-side,transparent 60%,#000 66% 82%,transparent 88%);opacity:.55;mix-blend-mode:screen}
.radarsw{position:absolute;left:calc(var(--x) * 1cqw);top:calc(var(--y) * 1cqw);width:calc(var(--d) * 1cqw);height:calc(var(--d) * 1cqw);border-radius:50%;mix-blend-mode:screen;opacity:.75;
  background:conic-gradient(from 0deg,rgba(127,211,243,.7),rgba(127,211,243,.15) 22%,transparent 34%);animation:k-spin 3.6s linear infinite}
@keyframes k-spin{to{transform:rotate(360deg)}}

/* ===== écrans de bord (canevas px projetés par matrix3d) */
.scr{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:auto;font-family:var(--f-ui);color:var(--ice);overflow:hidden}
.scr .bg{position:absolute;inset:0;background:
  radial-gradient(70% 60% at 50% 0%,rgba(70,165,215,.26),transparent 70%),
  repeating-linear-gradient(90deg,rgba(127,211,243,.055) 0 1px,transparent 1px 34px),
  repeating-linear-gradient(0deg,rgba(127,211,243,.04) 0 1px,transparent 1px 34px),
  linear-gradient(180deg,#07283a,#031520 70%,#020e16)}
.scr .scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
.scr .scan::after{content:"";position:absolute;left:0;right:0;height:35%;top:-40%;background:linear-gradient(180deg,transparent,rgba(127,211,243,.1),transparent);animation:k-vs 6s 3s linear infinite}
@keyframes k-vs{to{transform:translateY(400%)}}
.scr .flash{position:absolute;inset:0;background:#d8f4ff;opacity:0;pointer-events:none}
.scr .ui{position:absolute;inset:0;display:flex;flex-direction:column}
.scr .body{position:relative;flex:1;min-height:0}
.scr .body>.view{position:absolute;inset:12px 28px 18px;display:flex;flex-direction:column;gap:12px}

/* --- écran principal : canevas 760×420 (PC) ou 560×190 (mobile) */
.main .head{display:flex;align-items:center;gap:14px;padding:16px 28px 0}
.av{position:relative;width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4bb6e6,#0d4d72 60%,#062538);box-shadow:0 0 16px rgba(80,180,230,.45)}
.av svg{position:absolute;inset:-4px;width:54px;height:54px;fill:none;stroke:var(--sonar);stroke-width:1.4;stroke-dasharray:1}
.av span{font:italic 300 30px/1 var(--f-display);color:#eaf8ff;margin-top:2px}
.who{display:flex;flex-direction:column;gap:3px;min-width:0;position:relative;flex:1}
.who b{font:600 19px/1 var(--f-inst);letter-spacing:.18em}
.who small{font:400 13px/1.3 var(--f-ui);color:var(--mist);transition:opacity .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wave{position:absolute;left:0;bottom:-2px;height:14px;display:flex;gap:3px;align-items:center;opacity:0;transition:opacity .3s}
.wave i{width:3px;height:100%;border-radius:2px;background:var(--lamp);transform:scaleY(.2)}
.listen .who small{opacity:0}.listen .wave{opacity:1}
.micw{display:flex;align-items:center;gap:12px;flex:none}
.micl{font:500 13px/1 var(--f-inst);letter-spacing:.14em;color:var(--lamp-hot);text-transform:uppercase}
.mic{position:relative;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--lamp);background:radial-gradient(circle,#11222e,#081620);box-shadow:inset 0 0 0 2px var(--lamp),0 0 16px rgba(255,179,71,.4)}
.mic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.mic .mr{position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--lamp);opacity:0;animation:k-ping 2.8s 1s ease-out infinite;pointer-events:none}
.listen .mic{background:radial-gradient(circle,var(--lamp-hot),var(--lamp) 70%);color:#2a1300}
.listen .mic .mr{animation-duration:1.1s;animation-delay:0s}
@keyframes k-ping{0%{transform:scale(.75);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.q{font:400 16px/1.35 var(--f-ui);color:var(--mist);margin:0}
.q b{color:var(--ice);font-weight:600}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;flex:1;min-height:0}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border-radius:14px;color:var(--ice);padding:10px 8px;min-height:0;transition:color .35s;text-align:center}
.tile .tf{position:absolute;inset:0;border-radius:14px;background:linear-gradient(180deg,rgba(18,70,98,.55),rgba(6,30,44,.75));box-shadow:inset 0 1px 0 rgba(160,225,250,.12);transition:background .4s,box-shadow .4s}
.tile .tb{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tile .ta{fill:none;stroke:rgba(127,211,243,.5);stroke-width:1.5;stroke-dasharray:1;vector-effect:non-scaling-stroke;transition:stroke .35s}
.tile .tr{fill:none;stroke:var(--lamp-hot);stroke-width:2.2;stroke-dasharray:.16 .84;opacity:0;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px var(--lamp))}
.tile .ic{position:relative;width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--sonar);transition:color .35s}
.tile .ic *{stroke-dasharray:1}
.tile .tl{position:relative;font:600 17px/1.1 var(--f-inst);letter-spacing:.03em}
.tile .ts{position:relative;font:400 12px/1.3 var(--f-ui);color:var(--mist)}
.tile.on{color:var(--lamp-hot)}
.tile.on .tf{background:radial-gradient(90% 80% at 50% 35%,rgba(255,170,60,.28),rgba(40,22,6,.75));box-shadow:inset 0 0 22px rgba(255,170,60,.3),0 0 24px rgba(255,170,60,.35)}
.tile.on .ta{stroke:var(--lamp)}
.tile.on .tr{opacity:1;animation:k-run 2.4s linear infinite}
.tile.on .ic{color:var(--lamp)}
.tile:hover .ta{stroke:rgba(200,240,255,.8)}
.tile:active{transform:scale(.97)}
@keyframes k-run{to{stroke-dashoffset:-1}}
.tile .rip{position:absolute;left:50%;top:50%;width:160px;height:160px;margin:-80px;border-radius:50%;background:radial-gradient(circle,rgba(255,220,160,.55),transparent 65%);opacity:0;pointer-events:none}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font:500 12px/1 var(--f-inst);letter-spacing:.14em;text-transform:uppercase;color:var(--sonar)}
.inp{position:relative;display:flex;align-items:center;border-radius:12px;background:rgba(3,18,28,.8);box-shadow:inset 0 0 0 1px var(--line)}
.inp input,.inp textarea{flex:1;min-width:0;background:none;border:0;padding:12px 14px;font-size:18px;color:var(--ice);outline:0}
.inp textarea{resize:none;font-size:14px;line-height:1.45;font-family:var(--f-ui)}
.inp input::placeholder,.inp textarea::placeholder{color:rgba(157,191,207,.55)}
.inp::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:linear-gradient(90deg,var(--lamp),var(--lamp-hot));transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--e-out);border-radius:2px}
.inp:focus-within::after{transform:scaleX(1)}
.inp .ok{width:22px;height:22px;margin-right:12px;flex:none;color:var(--lamp);opacity:0;transform:scale(.4);transition:all .4s var(--e-back)}
.inp.filled .ok{opacity:1;transform:none}
.inp .ok svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row.end{justify-content:flex-end;margin-top:auto}
.grow{flex:1;min-width:0}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 20px;border-radius:12px;font:600 14px/1 var(--f-inst);letter-spacing:.14em;text-transform:uppercase;color:var(--ice);
  background:linear-gradient(180deg,rgba(18,70,98,.55),rgba(6,30,44,.75));box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .25s,transform .15s,color .25s;white-space:nowrap}
.btn:hover{box-shadow:inset 0 0 0 1px rgba(200,240,255,.7)}
.btn:active{transform:scale(.96)}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn.go{color:#2a1300;background:linear-gradient(180deg,#ffd38a,#ffad3d 55%,#e5861c);box-shadow:0 0 22px rgba(255,170,60,.45),inset 0 1px 0 rgba(255,255,255,.6);overflow:hidden}
.btn.go::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);background-size:250% 100%;animation:k-sheen 3.4s 1s ease-in-out infinite}
.btn.go[disabled]{filter:grayscale(.6) brightness(.6);cursor:not-allowed}
.btn.go[disabled]::after{animation:none}
@keyframes k-sheen{0%{background-position:150% 0}45%,100%{background-position:-60% 0}}
.btn.ghost{background:none;box-shadow:none;color:var(--mist)}
.btn.ghost:hover{color:var(--ice);box-shadow:none}
.sum{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:baseline;font-size:15px}
.sum dt{font:500 11px/1.5 var(--f-inst);letter-spacing:.14em;text-transform:uppercase;color:var(--sonar);margin:0}
.sum dd{margin:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:16px;border-radius:14px;background:rgba(3,18,28,.6);box-shadow:inset 0 0 0 1px var(--line);padding:10px 16px;position:relative;overflow:hidden;cursor:pointer}
.drop.over{box-shadow:inset 0 0 0 2px var(--lamp)}
.drop p{margin:0;font-size:14px;color:var(--mist)}
.drop p b{display:block;color:var(--ice);font-weight:600;font-size:16px;margin-bottom:2px}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;align-content:flex-start;position:relative;z-index:1}
.thumbs i{width:52px;height:52px;border-radius:8px;background:#0a2a3d center/cover;box-shadow:0 0 0 1px var(--line);display:grid;place-items:center;font:600 10px var(--f-inst);color:var(--sonar);animation:k-pop .5s var(--e-back)}
@keyframes k-pop{from{transform:scale(.3);opacity:0}}
/* lecture */
.read{display:grid;grid-template-columns:150px 1fr;gap:20px;flex:1;min-height:0}
.ring{position:relative;width:150px;height:150px;display:grid;place-items:center;align-self:center}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:4}
.ring .bg2{stroke:rgba(127,211,243,.18)}
.ring .fg{stroke:var(--lamp);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 4px var(--lamp))}
.ring b{font:500 34px/1 var(--f-inst);font-variant-numeric:tabular-nums}
.ring small{font:500 11px/1 var(--f-inst);letter-spacing:.14em;color:var(--sonar);text-transform:uppercase;margin-top:6px}
.log{display:flex;flex-direction:column;gap:5px;overflow:hidden;justify-content:flex-end;font-family:var(--f-inst);font-size:14px;min-height:0;-webkit-mask:linear-gradient(180deg,transparent,#000 30%);mask:linear-gradient(180deg,transparent,#000 30%)}
.log div{display:flex;gap:10px;align-items:baseline;animation:k-line .5s var(--e-out)}
.log div i{color:var(--sonar);font-style:normal;flex:none;width:22px;text-align:right;opacity:.7}
.log div em{color:var(--lamp-hot);font-style:normal;margin-left:auto;font-variant-numeric:tabular-nums}
.log div.cat{color:var(--sonar);letter-spacing:.14em;text-transform:uppercase;font-size:12px;margin-top:4px}
@keyframes k-line{from{opacity:0;transform:translateY(8px)}}
/* vérification */
.tabs{display:flex;gap:6px}
.tab{height:36px;padding:0 16px;border-radius:9px;font:600 13px/1 var(--f-inst);letter-spacing:.12em;text-transform:uppercase;color:var(--mist);box-shadow:inset 0 0 0 1px transparent;transition:all .3s}
.tab[aria-selected="true"]{color:var(--lamp-hot);box-shadow:inset 0 0 0 1px var(--lamp);background:rgba(255,170,60,.1)}
.list{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding-right:6px;scrollbar-width:thin;scrollbar-color:rgba(127,211,243,.35) transparent}
.list h4{margin:10px 0 4px;font:500 11px/1 var(--f-inst);letter-spacing:.16em;text-transform:uppercase;color:var(--sonar)}
.list h4:first-child{margin-top:0}
.item{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:7px 10px;border-radius:9px;font-size:14px;animation:k-line .5s var(--e-out) both;animation-delay:calc(var(--i) * 40ms)}
.item:nth-child(even){background:rgba(127,211,243,.05)}
.item .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .pr{font:500 14px/1 var(--f-inst);color:var(--lamp-hot);font-variant-numeric:tabular-nums}
.item input{background:none;border:0;border-bottom:1px solid var(--line);padding:2px 0;width:100%;outline:0}
.item .pr input{width:64px;text-align:right;color:var(--lamp-hot);font:inherit}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;flex:1;min-height:0;overflow:auto;align-content:start;padding-right:6px}
.ph{position:relative;height:72px;border-radius:11px;overflow:hidden;background:linear-gradient(160deg,#0b3147,#041622);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;justify-content:flex-end;padding:8px 26px 8px 10px;animation:k-line .5s var(--e-out) both;animation-delay:calc(var(--i) * 60ms)}
.ph::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(127,211,243,.18) 50%,transparent 70%);background-size:250% 100%;animation:k-sheen 2.2s linear infinite}
.ph.done::before{animation:none;background:radial-gradient(80% 60% at 50% 30%,rgba(255,190,110,.25),transparent 70%)}
.ph b{position:relative;font:600 12px/1.2 var(--f-ui)}
.ph small{position:relative;font:500 10px/1 var(--f-inst);letter-spacing:.12em;text-transform:uppercase;color:var(--sonar);margin-top:4px}
.ph.done small{color:var(--lamp-hot)}
.ph .dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--sonar);box-shadow:0 0 8px var(--sonar);animation:k-bl 1.2s infinite}
.ph.done .dot{background:var(--lamp);box-shadow:0 0 8px var(--lamp);animation:none}
.styles{display:flex;gap:8px;flex-wrap:wrap}
.chip{height:32px;padding:0 12px;border-radius:99px;font:500 12px/1 var(--f-inst);letter-spacing:.1em;color:var(--mist);box-shadow:inset 0 0 0 1px var(--line);transition:all .3s}
.chip[aria-pressed="true"]{color:var(--lamp-hot);box-shadow:inset 0 0 0 1px var(--lamp);background:rgba(255,170,60,.1)}
.done-big{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;flex:1;text-align:center}
.done-big b{font:italic 300 30px/1.1 var(--f-display);color:#fff}
.done-big p{margin:0;color:var(--mist);font-size:14px;max-width:46ch}

/* --- hologramme (mobile) : l'écran de bord projette les commandes au-dessus du tableau de bord */
.holo .bg{background:linear-gradient(180deg,rgba(6,42,62,.62),rgba(3,18,28,.78));box-shadow:inset 0 0 0 1px rgba(127,211,243,.4),inset 0 0 30px rgba(60,170,230,.18),0 0 50px rgba(60,170,230,.22);border-radius:14px;backdrop-filter:blur(6px)}
.holo .scan{border-radius:14px}
.holo::before,.holo::after{content:"";position:absolute;width:26px;height:26px;border:2px solid var(--sonar);pointer-events:none;z-index:2;opacity:.9}
.holo::before{left:8px;top:8px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.holo::after{right:8px;bottom:8px;border-left:0;border-top:0;border-radius:0 0 6px 0}
.holo .body>.view{inset:16px 22px 16px}
.beam{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(127,211,243,.05),rgba(127,211,243,.32));animation:k-beam 2.6s ease-in-out infinite alternate}
@keyframes k-beam{from{opacity:.55}to{opacity:.95}}
[data-mode="desk"] #holo,[data-mode="desk"] .beam{display:none}
[data-mode="mob"] .main .head{padding:12px 22px 0}
[data-mode="mob"] .main .body{display:none}
[data-mode="mob"] .holo .head{display:none}
[data-mode="mob"] .tile .ic{width:30px;height:30px}
[data-mode="mob"] .tile .tl{font-size:16px}
[data-mode="mob"] .q{font-size:14px}
[data-mode="mob"] .btn{height:42px;padding:0 16px;font-size:13px}
[data-mode="mob"] .inp input{font-size:17px;padding:11px 12px}
[data-mode="mob"] .title .sub,[data-mode="mob"] .title .tag{display:none}
.proj{position:absolute;left:22px;right:22px;bottom:14px;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--sonar),transparent);box-shadow:0 0 12px var(--sonar);opacity:.8;animation:k-br 2.6s ease-in-out infinite}
[data-mode="desk"] .proj{display:none}

/* --- écrans latéraux */
.side .ui{padding:10px 12px;display:flex;flex-direction:column;gap:6px;font-family:var(--f-inst)}
.gauge{display:flex;flex-direction:column;gap:4px}
.gauge .lab{font:500 10px/1 var(--f-inst);letter-spacing:.18em;text-transform:uppercase;color:var(--sonar);opacity:.85}
.gauge .val{font:600 30px/1 var(--f-inst);font-variant-numeric:tabular-nums;color:var(--ice);text-shadow:0 0 10px rgba(127,211,243,.6);white-space:nowrap}
.gauge .val small{font-size:14px;font-weight:500;color:var(--sonar);margin-left:3px}
.gauge .bar{height:5px;border-radius:3px;background:rgba(127,211,243,.15);overflow:hidden}
.gauge .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--sonar),var(--lamp));transition:width 2.6s var(--e-io)}
.eq{display:flex;gap:3px;align-items:flex-end;height:16px}
.eq i{flex:1;background:var(--sonar);opacity:.7;transform-origin:50% 100%;animation:k-eq 1.6s ease-in-out infinite alternate}
@keyframes k-eq{0%{transform:scaleY(.2)}100%{transform:scaleY(1)}}
.journal{flex:1;min-height:0;display:flex;flex-direction:column;gap:5px;overflow:hidden;justify-content:flex-end;-webkit-mask:linear-gradient(180deg,transparent,#000 25%);mask:linear-gradient(180deg,transparent,#000 25%)}
.journal .jt{font:500 10px/1 var(--f-inst);letter-spacing:.18em;text-transform:uppercase;color:var(--sonar);margin-bottom:2px}
.jl{font:400 12px/1.35 var(--f-ui);color:var(--ice);padding-left:10px;border-left:2px solid var(--lamp);animation:k-line .5s var(--e-out)}
.jl.you{border-color:var(--sonar);color:var(--mist)}
.jl b{font:500 10px/1 var(--f-inst);letter-spacing:.14em;text-transform:uppercase;color:var(--lamp-hot);display:block;margin-bottom:2px}
.jl.you b{color:var(--sonar)}
.radar{position:relative;flex:1;border-radius:50%;aspect-ratio:1;max-height:100%;margin:auto;background:
  radial-gradient(circle,transparent 0 31%,rgba(121,205,238,.32) 31.5% 32.5%,transparent 33% 63%,rgba(121,205,238,.32) 63.5% 64.5%,transparent 65% 95%,rgba(121,205,238,.45) 95.5% 97%,transparent 97.5%),
  linear-gradient(90deg,transparent 49.6%,rgba(121,205,238,.25) 49.6% 50.4%,transparent 50.4%),linear-gradient(0deg,transparent 49.6%,rgba(121,205,238,.25) 49.6% 50.4%,transparent 50.4%),rgba(4,30,44,.6)}
.radar i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(121,205,238,.75),rgba(121,205,238,.18) 18%,transparent 30%);animation:k-spin 3.2s linear infinite}
.radar b{position:absolute;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--lamp-hot);box-shadow:0 0 8px var(--lamp);opacity:0;animation:k-blip 3.2s linear infinite}
@keyframes k-blip{0%{opacity:1;transform:scale(1.3)}60%{opacity:.15;transform:scale(1)}100%{opacity:0}}

/* ===== HUD sur la vitre */
.hud{position:absolute;inset:0;pointer-events:none;z-index:3}
.hud button{pointer-events:auto}
.route{position:absolute;display:grid;grid-template-columns:repeat(4,1fr);pointer-events:auto}
.trk{position:absolute;left:12.5%;right:12.5%;top:calc(var(--sd) / 2);height:2px;margin-top:-1px;background:rgba(127,211,243,.22)}
.trk i{position:absolute;inset:0;background:linear-gradient(90deg,var(--lamp),var(--lamp-hot));transform-origin:0 50%;transform:scaleX(0);transition:transform 1.4s var(--e-io);box-shadow:0 0 10px rgba(255,179,71,.7)}
.st{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--mist)}
.st[aria-disabled="true"]{cursor:default}
.sd{position:relative;width:var(--sd);height:var(--sd);border-radius:50%;display:grid;place-items:center;background:rgba(3,20,32,.92);box-shadow:inset 0 0 0 1.5px rgba(127,211,243,.45);transition:all .5s}
.sd b{font:600 .92em/1 var(--f-inst);letter-spacing:.04em;transition:opacity .3s}
.sd svg{position:absolute;width:52%;height:52%;fill:none;stroke:#1a0d00;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sd svg path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s .15s var(--e-out)}
.sl{font:500 .82em/1 var(--f-inst);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transition:color .5s;text-shadow:0 1px 10px rgba(0,8,16,.95),0 0 3px rgba(0,8,16,.9)}
.st.cur .sd{background:radial-gradient(circle at 35% 30%,var(--lamp-hot),var(--lamp) 60%,#c46d10);box-shadow:0 0 18px rgba(255,179,71,.75),inset 0 0 0 1.5px var(--lamp-hot);color:#2a1300}
.st.cur .sd::after{content:"";position:absolute;inset:-22%;border-radius:50%;border:1.5px solid var(--lamp);opacity:0;animation:k-ping 2.4s ease-out infinite}
.st.cur .sl{color:var(--lamp-hot)}
.st.done .sd{background:var(--lamp);box-shadow:0 0 12px rgba(255,179,71,.5)}
.st.done .sd b{opacity:0}.st.done .sd svg path{stroke-dashoffset:0}.st.done .sl{color:var(--ice)}

.title{position:absolute;display:flex;flex-direction:column;gap:.55em;text-align:left;text-shadow:0 2px 24px rgba(0,10,20,.7)}
.title[hidden]{display:none!important}
.title .kick{display:flex;align-items:center;gap:.8em;font:500 .36em/1 var(--f-inst);letter-spacing:.3em;text-transform:uppercase;color:var(--sonar);white-space:nowrap;text-shadow:0 1px 10px rgba(0,8,16,.95),0 0 3px rgba(0,8,16,.9)}
.title .kick i{display:block;width:2.4em;height:1px;background:linear-gradient(90deg,var(--sonar),transparent);transform-origin:0 50%}
.dec{display:inline-grid}.dec::before{content:attr(data-t);visibility:hidden;grid-area:1/1;white-space:pre}.dec>.dv{grid-area:1/1;white-space:pre}
.title h1{margin:0;font:300 1em/1.02 var(--f-display);letter-spacing:-.01em;color:#f3fbff}
.title h1 .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.title h1 .c{display:inline-block;will-change:transform}
.title h1 .ln{position:relative}
.title h1 em{display:inline-block;padding-right:.08em}
.scanbar{position:absolute;top:0;bottom:0;width:.06em;background:#e9fbff;box-shadow:0 0 .25em .12em rgba(140,220,255,.75),0 0 .9em .3em rgba(121,205,238,.35);border-radius:.1em;pointer-events:none}
.title h1 em{font-style:italic;font-weight:300;background:linear-gradient(100deg,#8dd4f3,#dff5ff 45%,#fff 52%,#b9e7fb 60%,#6fbfe3);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.title .sub{margin:0;font:300 .4em/1.5 var(--f-ui);color:rgba(234,247,253,.85);max-width:30em}
.title .sub .ln{display:block}
.title .rule{position:absolute;left:-1.2em;top:0;bottom:0;width:1px;background:linear-gradient(180deg,var(--lamp),rgba(255,179,71,0));transform-origin:50% 0;transform:scaleY(0)}
.title .tag{display:inline-flex;align-items:center;gap:.6em;font:500 .32em/1 var(--f-inst);letter-spacing:.22em;text-transform:uppercase;color:var(--lamp-hot);margin-top:.2em}
.title .tag::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--lamp);box-shadow:0 0 .8em var(--lamp);animation:k-bl 1.8s infinite}

/* règle de profondeur sur le bord de la vitre */
.ruler{position:absolute;pointer-events:none;font-family:var(--f-inst);color:var(--sonar);overflow:hidden;-webkit-mask:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent);mask:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent)}
.ruler .tk{position:absolute;left:0;right:0;top:50%;will-change:transform}
.ruler .tk i{position:absolute;left:0;height:1px;background:rgba(127,211,243,.5)}
.ruler .tk i.M{width:60%;background:rgba(127,211,243,.9)}
.ruler .tk i.m{width:30%}
.ruler .tk b{position:absolute;left:52%;font-weight:500;font-size:.78em;letter-spacing:.06em;transform:translateY(-50%);white-space:nowrap;opacity:.9}
.ruler .cur{position:absolute;left:-4%;right:-4%;top:50%;height:2px;margin-top:-1px;background:var(--lamp);box-shadow:0 0 8px var(--lamp)}
.ruler .cur::after{content:"";position:absolute;right:-4px;top:-4px;border:5px solid transparent;border-right-color:var(--lamp)}

/* ===== barre du haut */
.topbar{position:absolute;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}
.topbar>*{pointer-events:auto}
.pill,.rb{height:44px;display:flex;align-items:center;justify-content:center;border-radius:99px;color:var(--ice);
  background:linear-gradient(180deg,rgba(10,38,54,.85),rgba(3,16,24,.9));box-shadow:inset 0 0 0 1px rgba(127,211,243,.38),inset 0 1px 0 rgba(190,235,255,.18),0 6px 20px rgba(0,0,0,.45);transition:box-shadow .3s,color .3s;backdrop-filter:blur(8px)}
.pill{gap:9px;padding:0 18px 0 14px;font:500 14px/1 var(--f-ui)}
.pill svg,.rb svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tbr{display:flex;gap:8px;align-items:center}
.rb{width:44px;position:relative}
.rb[aria-pressed="true"]{color:var(--lamp);box-shadow:inset 0 0 0 1.5px var(--lamp),0 0 16px rgba(255,179,71,.45)}
.rb .alt{display:none}.rb[aria-pressed="true"] .main{display:none}.rb[aria-pressed="true"] .alt{display:block}
.brand{display:flex;flex-direction:column;align-items:center;gap:4px;font:500 11px/1 var(--f-inst);letter-spacing:.34em;color:var(--sonar);text-transform:uppercase;text-shadow:0 0 12px rgba(127,211,243,.5)}
.brand b{font-weight:600;font-size:13px;color:var(--ice);letter-spacing:.42em}
.rb.deepi{width:auto;padding:0 16px 0 12px;gap:8px;font:600 12px/1 var(--f-inst);letter-spacing:.14em;text-transform:uppercase}
.rb.deepi .pulse{width:8px;height:8px;border-radius:50%;background:var(--sonar);box-shadow:0 0 8px var(--sonar)}
.rb.deepi[aria-pressed="true"] .pulse{background:var(--lamp);box-shadow:0 0 10px var(--lamp);animation:k-bl .8s infinite}


.toast{position:absolute;z-index:7;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;padding:12px 18px;border-radius:14px;background:rgba(3,18,28,.9);box-shadow:inset 0 0 0 1px var(--line),0 10px 30px rgba(0,0,0,.5);font-size:14px;max-width:min(92vw,520px);text-align:center;transition:all .5s var(--e-out);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ===== modes */
[data-mode="desk"] #scrL{display:none}
[data-mode="desk"] .route{left:50%;top:9.5cqh;transform:translateX(-50%);width:min(44cqw,560px);font-size:clamp(11px,1.15cqw,15px);--sd:2.4em}
[data-mode="desk"] .title{left:7cqw;top:19cqh;width:min(34cqw,560px);font-size:clamp(28px,3.4cqw,52px);padding-left:1.2em}
[data-mode="desk"] .ruler{left:3.6cqw;top:16cqh;height:44cqh;width:5.2cqw;font-size:clamp(9px,.7cqw,11px)}
[data-mode="desk"] .topbar{left:2.2cqw;right:2.2cqw;top:16px}
[data-mode="mob"] .route{left:50%;top:16.4cqh;transform:translateX(-50%);width:min(86cqw,420px);font-size:clamp(10px,2.8cqw,12px);--sd:2.3em}
[data-mode="mob"] .sl{font-size:.72em;letter-spacing:.06em}
[data-mode="mob"] .gauge .val{font-size:24px}
[data-mode="mob"] .gauge .lab{font-size:9px;letter-spacing:.12em}
[data-mode="mob"] .eq{height:10px}
[data-mode="mob"] .gauge .val small{font-size:11px}
[data-mode="mob"] .side .ui{padding:8px 10px;gap:4px}
[data-mode="mob"] .title{left:9cqw;top:26cqh;width:84cqw;font-size:clamp(24px,8cqw,36px);padding-left:.9em;gap:.45em}
[data-mode="mob"] .title .kick{font-size:.3em;letter-spacing:.2em}
[data-mode="mob"] .ruler{left:1.5cqw;top:24cqh;height:14cqh;width:6cqw;font-size:8px}
[data-mode="mob"] .topbar{left:3cqw;right:3cqw;top:9.4cqh}
[data-mode="mob"] .pill{height:40px;padding:0 14px 0 12px;font-size:13px}
[data-mode="mob"] .rb{width:40px;height:40px}
[data-mode="mob"] .brand{display:none}
[data-mode="mob"] .rb.deepi{padding:0 12px 0 10px;font-size:11px}
[data-mode="mob"] .rb.deepi .lbl{display:none}
.paused .ocean *,.paused .lights *,.paused .radarsw,.paused .knob,.paused .lever{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Explicit scene order: video behind every cockpit surface. */
.ocean{z-index:0}.cp{z-index:4}.stage{isolation:isolate}*{box-sizing:border-box}