/* ============================================================
   COCKPIT V2 — coque 9:21, commandes sur la console, Deepi connecté au site.
   Chargé après les feuilles d'origine : ne redéfinit que le mobile.
   ============================================================ */
:root{--cb-ink:#9fe3f6;--cb-ink-hot:#e6fbff;--cb-glass:linear-gradient(180deg,#0c2b47f0,#071c33f2 55%,#04131ff6);--cb-oct:polygon(8% 0,92% 0,100% 26%,100% 74%,92% 100%,8% 100%,0 74%,0 26%)}

/* ---- l'ancienne barre haute disparaît : tout est sur la console */
[data-mode=mob][data-cockpit=new] .topbar{display:none!important}
[data-mode=mob][data-cockpit=new] .lever{display:none}

/* ---- lampes : hauteur en cqh, pour suivre la coque quand elle est légèrement comprimée */
[data-mode=mob] .L{top:calc(var(--yh) * 1cqh);height:calc(var(--hh) * 1cqh)}
[data-mode=mob] .L .lt{background-size:100cqw 100cqh;background-position:calc(var(--x) * -1cqw) calc(var(--yh) * -1cqh)}
[data-mode=mob] .L .gl{inset:calc(var(--ph) * -1cqh) calc(var(--p) * -1cqw);background-size:100cqw 100cqh;background-position:calc((var(--x) - var(--p)) * -1cqw) calc((var(--yh) - var(--ph)) * -1cqh)}
[data-mode=mob] .L .sw{-webkit-mask-size:100cqw 100cqh;-webkit-mask-position:calc(var(--x) * -1cqw) calc(var(--yh) * -1cqh);mask-size:100cqw 100cqh;mask-position:calc(var(--x) * -1cqw) calc(var(--yh) * -1cqh)}

/* ---- vitre : le titre et la règle montent, le robot flotte dans la vitre */
[data-mode=mob][data-cockpit=new] .title{left:8cqw;top:12cqh;width:84cqw;font-size:clamp(20px,min(8cqw,3.4cqh),36px)}
[data-mode=mob][data-cockpit=new] .ruler{top:13cqh;height:16cqh}
[data-mode=mob][data-cockpit=new] .expedition-robot{--robot-mobile-size:min(87cqw,45cqh,420px);top:4cqh;left:calc((100cqw - var(--robot-mobile-size)) / 2);animation-name:deepi-mobile-patrol-v2}
@keyframes deepi-mobile-patrol-v2{0%,100%{transform:translate(0,0)}25%{transform:translate(-5cqw,7cqh)}50%{transform:translate(2cqw,15cqh)}75%{transform:translate(5cqw,5cqh)}}
/* Transparent canvas margins must not intercept the menu or cockpit selector. */
[data-mode=mob][data-cockpit=new] .expedition-robot-button{pointer-events:none}
[data-mode=mob][data-cockpit=new] .expedition-robot-button::after{content:"";position:absolute;inset:22%;pointer-events:auto}
[data-mode=mob][data-cockpit=new] .exploration-hud{top:16cqh}

/* Clear glass: use the same normalized aperture at every cockpit size. */
[data-mode=mob][data-cockpit=new] :is(.hull,.lights){-webkit-mask:url("./cockpit-mobile-v2-shell-mask.svg") 0 0/100% 100% no-repeat;mask:url("./cockpit-mobile-v2-shell-mask.svg") 0 0/100% 100% no-repeat}
[data-mode=mob][data-cockpit=new] .shade{display:none}

/* Rising bubbles live inside the ocean stacking context, behind Deepi and the hull. */
.ocean-bubbles{display:none;position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none;contain:layout paint}
[data-mode=mob][data-cockpit=new] .ocean-bubbles{display:block}
.ocean-bubbles i{position:absolute;left:var(--bubble-x);bottom:-20px;width:var(--bubble-size);height:var(--bubble-size);border-radius:50%;border:1px solid #b9eeff9e;background:radial-gradient(circle at 30% 25%,#efffff9c 0 6%,transparent 22%),radial-gradient(circle at 65% 70%,transparent 45%,#76cce830 78%);box-shadow:inset -1px -1px 2px #89e5ff35;opacity:0;animation:deepi-ocean-bubble var(--bubble-duration) var(--bubble-delay) linear infinite;will-change:transform,opacity}
@keyframes deepi-ocean-bubble{0%{opacity:0;transform:translate3d(0,0,0) scale(.75)}10%,82%{opacity:var(--bubble-opacity)}100%{opacity:0;transform:translate3d(var(--bubble-drift),calc(-100cqh - 40px),0) scale(1.1)}}
.scene-hidden .ocean-bubbles i{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){[data-mode=mob][data-cockpit=new] .ocean-bubbles{display:none}}

/* ---- hologramme : respiration lente, cadre plus net */
[data-mode=mob][data-cockpit=new] #holo .bg,[data-mode=mob][data-cockpit=new] #holo .ui,[data-mode=mob][data-cockpit=new] #holo .scan{animation:k-holo-float 6.5s ease-in-out infinite}
@keyframes k-holo-float{0%,100%{translate:0 -3px}50%{translate:0 3px}}
[data-mode=mob][data-cockpit=new].paused #holo *{animation-play-state:paused}
[data-mode=mob][data-cockpit=new] .holo .bg{box-shadow:inset 0 0 0 1px rgba(127,211,243,.5),inset 0 0 30px rgba(60,170,230,.2),0 0 60px rgba(60,170,230,.28)}

/* ---- écran de bord : le décor peint reste visible sous l'interface */
[data-mode=mob][data-cockpit=new] #scrMain{border-radius:12px}
[data-mode=mob][data-cockpit=new] #scrMain .bg{background:
  radial-gradient(70% 60% at 50% 0%,rgba(70,165,215,.18),transparent 70%),
  linear-gradient(180deg,rgba(7,40,58,.42),rgba(3,21,32,.62) 70%,rgba(2,14,22,.7))}
[data-mode=mob][data-cockpit=new] #scrMain .scan{opacity:.7}
[data-mode=mob][data-cockpit=new] #scrMain.listen .bg{box-shadow:inset 0 0 40px rgba(255,179,71,.14)}
[data-mode=mob][data-cockpit=new].console-navigation #uiMain>.route{--sd:30px;margin:9px 21% 0;font-size:12px;gap:2px}
[data-mode=mob][data-cockpit=new].console-navigation #uiMain>.route .sd{width:30px;height:30px;font-size:14px}
[data-mode=mob][data-cockpit=new].console-navigation #uiMain>.route .sl{font-size:7.5px;letter-spacing:.04em;margin-top:4px}
[data-mode=mob][data-cockpit=new].console-navigation #uiMain>.route .trk{top:14px}
[data-mode=mob][data-cockpit=new].console-navigation #uiMain>.route .st svg{width:19px;height:19px}
[data-mode=mob][data-cockpit=new].console-navigation #uiMain>.head{padding:8px 60px 10px 16px;gap:10px;min-height:48px}
[data-mode=mob][data-cockpit=new].console-navigation #uiMain>.head .av{width:38px;height:38px;font-size:23px}
[data-mode=mob][data-cockpit=new].console-navigation #uiMain>.head .av svg{inset:-4px;width:46px;height:46px}
[data-mode=mob][data-cockpit=new].console-navigation #uiMain>.head .who b{font-size:11px;letter-spacing:.16em}
[data-mode=mob][data-cockpit=new].console-navigation #uiMain>.head .who small{font-size:9.5px;max-width:none;white-space:normal;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
[data-mode=mob][data-cockpit=new].console-navigation #uiMain>.head .wave{display:flex;gap:2px;align-items:flex-end;height:10px;margin-top:3px;opacity:0;transition:opacity .4s}
[data-mode=mob][data-cockpit=new] #scrMain.listen .head .wave{opacity:1}
[data-mode=mob][data-cockpit=new] #scrMain .head .wave i{width:2px;background:var(--lamp);transform-origin:50% 100%;border-radius:1px;height:100%}
[data-mode=mob][data-cockpit=new] .marine-route{padding:9px 21% 0;gap:5px}
[data-mode=mob][data-cockpit=new] .marine-route button{min-height:44px}
[data-mode=mob][data-cockpit=new] .marine-route b{font-size:17px}
[data-mode=mob][data-cockpit=new] .marine-route span{font-size:9px}

[data-mode=mob][data-cockpit=new] #scrL,[data-mode=mob][data-cockpit=new] #scrR{pointer-events:none}
[data-mode=mob][data-cockpit=new] #scrL .bg,[data-mode=mob][data-cockpit=new] #scrR .bg,[data-mode=mob][data-cockpit=new] #scrL .scan,[data-mode=mob][data-cockpit=new] #scrR .scan{display:none}
[data-mode=mob][data-cockpit=new] #scrL{border-radius:50%;overflow:visible}
[data-mode=mob][data-cockpit=new] #scrL .ui{padding:0}
[data-mode=mob][data-cockpit=new] #scrL .radar{background:transparent}
[data-mode=mob][data-cockpit=new] #scrR .ui{padding:6px 8px;gap:4px;background:linear-gradient(180deg,#03141fb8,#03141f80);border-radius:8px;box-shadow:inset 0 0 0 1px #7fd3f322}

/* ---- pause du décor : discrète, dans l'écran de bord */
.cb-mini{position:absolute;right:10px;bottom:10px;z-index:5;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:var(--cb-ink);background:#061c30d9;box-shadow:inset 0 0 0 1px #4fc3e655,0 0 0 0 #7fd3f300;transition:transform .2s var(--e-out),box-shadow .3s,color .3s}
.cb-mini svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cb-mini .alt{display:none}.cb-mini[aria-pressed=true] .main{display:none}.cb-mini[aria-pressed=true] .alt{display:block}
.cb-mini:hover,.cb-mini:focus-visible{box-shadow:inset 0 0 0 1px #8fe3ffaa,0 0 14px #7fd3f344}
.cb-mini:active{transform:scale(.9)}
.cb-mini[aria-pressed=true]{color:var(--lamp-hot);box-shadow:inset 0 0 0 1px var(--lamp),0 0 14px #ffb34755;animation:k-br 2.6s ease-in-out infinite}
.cb-mini[aria-pressed=true] svg{stroke:var(--lamp-hot);filter:drop-shadow(0 0 6px #ffb347)}

/* ============================================================
   BARRE DE COMMANDES — posée sur les emplacements peints de la console.
   Coordonnées en cqw (fraction de la largeur de la coque), comme les lampes.
   ============================================================ */
.console-bar{position:absolute;inset:0;pointer-events:none;z-index:7}
.cb{position:absolute;left:calc(var(--x) * 1cqw);top:calc(var(--yh) * 1cqh);width:calc(var(--w) * 1cqw);height:calc(var(--hh) * 1cqh);pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 3px;color:var(--cb-ink);font:600 10px/1 var(--f-ui);letter-spacing:.02em;text-transform:none;transform-origin:50% 62%;transition:transform .18s var(--e-out),color .35s;will-change:transform;-webkit-tap-highlight-color:transparent;isolation:isolate}
.cb>*{position:relative;z-index:2}
.cb .cb-bg,.cb .cb-edge,.cb .cb-ring,.cb .cb-led{position:absolute;z-index:0}
.cb .cb-bg{inset:1.5% 1%;background:var(--cb-glass);clip-path:var(--cp,var(--cb-oct));box-shadow:inset 0 0 0 1px #4fc3e636,inset 0 -2px 12px #1f8ad02e,inset 0 1px 0 #ffffff10;transition:box-shadow .35s,filter .35s}
.cb::before{content:"";position:absolute;inset:1.5% 1%;z-index:1;clip-path:var(--cp,var(--cb-oct));background:linear-gradient(180deg,#7fd3f31a,transparent 45%);pointer-events:none;opacity:.8;transition:opacity .3s}
.cb .cb-edge{inset:1.5% 1%;z-index:1;clip-path:var(--cp,var(--cb-oct));overflow:hidden;pointer-events:none}
.cb .cb-edge::before{content:"";position:absolute;inset:-30% -70%;background:linear-gradient(100deg,transparent 42%,#bff0ff38 50%,transparent 58%);transform:translateX(-130%)}
.cb .cb-edge::after{content:"";position:absolute;left:14%;right:14%;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#7fd3f3b0,transparent);opacity:.7;transition:opacity .3s,filter .3s}
.cb .cb-ic{width:min(38%,22px);aspect-ratio:1;height:auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px #4fd6ff55);transition:transform .3s var(--e-back),filter .3s}
.cb .cb-l{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 8px #0a3a55;transition:letter-spacing .3s,color .3s;letter-spacing:0}
.cb .cb-led{right:9%;top:11%;width:4px;height:4px;border-radius:50%;background:#2d6a85;transition:background .3s,box-shadow .3s}
/* survol / clavier */
.cb:hover,.cb:focus-visible{color:var(--cb-ink-hot)}
.cb:hover .cb-bg,.cb:focus-visible .cb-bg{box-shadow:inset 0 0 0 1px #8fe3ffb0,inset 0 -3px 16px #36b5f05c,inset 0 1px 0 #ffffff18;filter:drop-shadow(0 0 6px #7fd3f366)}
.cb:hover .cb-ic,.cb:focus-visible .cb-ic{transform:translateY(-1px) scale(1.08);filter:drop-shadow(0 0 7px #7fd3f3aa)}
.cb:hover .cb-l{letter-spacing:.03em}
.cb:focus-visible{outline:none}
/* appui */
.cb:active{transform:scale(.94);transition-duration:.08s}
.cb:active .cb-bg{filter:brightness(1.35)}
/* actif (pressé) : accent lampe + LED + reflet qui passe */
.cb[aria-pressed=true]{color:var(--lamp-hot)}
.cb[aria-pressed=true] .cb-bg{box-shadow:inset 0 0 0 1px #ffb347a6,inset 0 -3px 18px #ffb3473a,inset 0 1px 0 #ffffff14;filter:drop-shadow(0 0 8px #ffb34770)}
.cb[aria-pressed=true] .cb-edge::after{background:linear-gradient(90deg,transparent,#ffd38ad9,transparent);filter:drop-shadow(0 0 4px #ffb347)}
.cb[aria-pressed=true] .cb-ic{filter:drop-shadow(0 0 7px #ffb347aa)}
.cb[aria-pressed=true] .cb-led{background:var(--lamp-hot);box-shadow:0 0 8px var(--lamp);animation:k-bl 1.8s infinite}
.cb[aria-pressed=true] .cb-edge::before,.cb:hover .cb-edge::before{animation:cb-shine 3.2s cubic-bezier(.45,0,.3,1) infinite}
@keyframes cb-shine{0%{transform:translateX(-130%)}38%,100%{transform:translateX(130%)}}
.cb.sweep .cb-edge::before{animation:cb-shine 1.1s var(--sdl,0s) cubic-bezier(.45,0,.3,1) 1}
/* retour : icône seule */
.cb-home .cb-l{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
.cb-home .cb-ic{width:min(50%,26px)}
.cb-home{--cp:polygon(0 0,100% 0,100% 100%,22% 100%,0 72%)}
/* Deepi : micro, anneaux, états de la conversation */
.cb-deepi{--cp:polygon(0 0,100% 0,100% 72%,78% 100%,0 100%);gap:2px}
.cb-deepi .cb-l{font:600 7.5px/1 var(--f-inst);letter-spacing:.09em;text-transform:uppercase}
.cb-deepi .cb-ic{width:min(36%,19px)}
.cb-deepi .cb-ring{left:50%;top:44%;width:min(70%,42px);aspect-ratio:1;margin:0;border-radius:50%;border:1px solid #7fd3f3;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none}
.cb-deepi[data-voice=connecting] .cb-ic{animation:cb-breathe 1.1s ease-in-out infinite}
.cb-deepi[data-voice=connecting] .cb-led{background:#7fd3f3;box-shadow:0 0 8px #7fd3f3;animation:k-bl .7s infinite}
.cb-deepi[data-voice=ready] .cb-led{background:#5fe3a1;box-shadow:0 0 8px #5fe3a1}
.cb-deepi[data-voice=live] .cb-ring,.cb-deepi[data-voice=speaking] .cb-ring{animation:cb-ping 1.9s ease-out infinite}
.cb-deepi[data-voice=live] .cb-ring.r2,.cb-deepi[data-voice=speaking] .cb-ring.r2{animation-delay:.95s}
.cb-deepi[data-voice=live]{color:var(--lamp-hot)}
.cb-deepi[data-voice=live] .cb-ring{border-color:var(--lamp)}
.cb-deepi[data-voice=speaking]{color:#e6fbff}
.cb-deepi[data-voice=speaking] .cb-ring{border-color:#9fe3f6}
.cb-deepi[data-voice=speaking] .cb-ic{animation:cb-talk .55s ease-in-out infinite}
.cb-deepi[data-voice=thinking] .cb-led{background:#ff7ad9;box-shadow:0 0 8px #ff7ad9;animation:k-bl .5s infinite}
.cb-deepi[data-voice=error] .cb-led{background:#ff6b6b;box-shadow:0 0 8px #ff6b6b}
@keyframes cb-ping{0%{opacity:.9;transform:translate(-50%,-50%) scale(.55)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.9)}}
@keyframes cb-breathe{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.14);opacity:1}}
@keyframes cb-talk{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1px) scale(1.07)}}
/* le robot lui-même réagit aussi */
[data-mode=mob][data-cockpit=new] .expedition-robot[data-state=listening] .deepi-robot{filter:drop-shadow(0 0 14px #ffdc1966)}
[data-mode=mob][data-cockpit=new] .expedition-robot[data-state=speaking] .deepi-robot{filter:drop-shadow(0 0 16px #73e4f188)}
[data-mode=mob][data-cockpit=new] .expedition-robot[data-state=thinking] .deepi-robot{filter:drop-shadow(0 0 14px #ff7ad966)}
[data-mode=mob][data-cockpit=new] .expedition-robot .deepi-robot{transition:filter .5s}

/* petites largeurs : étiquettes plus serrées */
@media(max-width:380px){.cb{font-size:9px}.cb-deepi .cb-l{font-size:7px}}
@media(max-width:340px){.cb .cb-l{display:none}.cb-home .cb-l{display:block}}


/* The console is exclusive to phones; desktop keeps its existing controls. */
[data-mode=desk] .console-bar,[data-mode=desk] .cb-mini{display:none}
.cb::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%);z-index:3}
.cb:disabled{opacity:.55;cursor:not-allowed}
[data-mode=mob][data-cockpit=new]:has(.expedition-robot[data-state=speaking]) .cb-deepi .cb-ring{animation:cb-ping 1.9s ease-out infinite;border-color:#9fe3f6}
[data-mode=mob][data-cockpit=new]:has(.expedition-robot[data-state=speaking]) .cb-deepi .cb-ic{animation:cb-talk .55s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.cb,.cb *,.cb-mini,[data-mode=mob][data-cockpit=new] #holo .bg,[data-mode=mob][data-cockpit=new] #holo .ui,[data-mode=mob][data-cockpit=new] #holo .scan{animation:none!important;transition:none!important}}