/* UFO Atlas — composants. Le panneau est la console de bord de la soucoupe : cadres HUD à repères d'angle,
   boutons biseautés, canaux numérotés, jauges graduées. Mobile d'abord ; PC : carte à gauche, panneau à droite. */
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--night-0);color:var(--cream);font:16px/1.5 var(--font-body)}
body{overflow:hidden}
h1,h2,h3,.hud{font-family:var(--font-title);letter-spacing:.02em}
h2{font-size:20px;margin:0}
h3{font-size:16px;margin:0}
a{color:var(--holo);text-underline-offset:3px}
button{font:inherit}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ico{flex:none;vertical-align:middle}
b,.num{font-variant-numeric:tabular-nums}

/* ── Layout ─────────────────────────────────────────────────────────── */
.app{height:100dvh;display:grid;grid-template-rows:1fr auto}
.map-wrap{position:relative;min-height:0}
#map{position:absolute;inset:0;background:var(--night-1)}
.panel{position:relative;counter-reset:ch;
  background:
    repeating-linear-gradient(0deg,rgba(77,232,224,.028) 0 1px,transparent 1px 4px),
    linear-gradient(180deg,var(--night-2),var(--night-0) 60%);
  border-top:1px solid var(--line);max-height:52dvh;overflow:auto;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom));scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.panel::before{content:"";display:block;height:2px;margin:-16px -16px 14px;
  background:linear-gradient(90deg,var(--holo) 0 64px,var(--line) 64px)}
@media (min-width:900px){
  .app{grid-template-columns:1fr var(--panel-w);grid-template-rows:1fr}
  .panel{max-height:none;border-top:0;border-left:1px solid var(--line);padding:22px 24px}
  .panel::before{margin:-22px -24px 18px}
  /* Disposition au choix (contrôle en bas à gauche de la carte) : panneau large, panneau à gauche */
  .app.lay-wide{--panel-w:min(820px,58vw)}
  .app.lay-swap{grid-template-columns:var(--panel-w) 1fr}
  .app.lay-swap .panel{order:-1;border-left:0;border-right:1px solid var(--line)}
}
.view{display:flex;flex-direction:column;gap:16px}

/* En-têtes de canal : « CH·02  MISSIONS » */
.ch{display:flex;align-items:center;gap:10px;margin:6px 0 -4px;font:600 14px var(--font-title);
  letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.ch::before{counter-increment:ch;content:"CH·" counter(ch,decimal-leading-zero);color:var(--holo);letter-spacing:.08em}
.ch::after{content:"";flex:1;height:1px;background:var(--line)}

/* ── Marque et barre d'état ─────────────────────────────────────────── */
.brand{display:flex;align-items:center;gap:12px}
.brand h1{margin:0;font-size:22px;letter-spacing:.06em;text-transform:uppercase}
.brand small{color:var(--mist);display:block;font-size:14px}
.saucer{width:44px;height:44px;flex:none}
.lead{color:var(--mist);margin:0}
.statusbar{display:flex;align-items:center;gap:12px;font:600 14px var(--font-title);letter-spacing:.1em;
  text-transform:uppercase;color:var(--mist)}
.statusbar .live{display:inline-flex;align-items:center;gap:6px;color:var(--signal)}
.statusbar .live::before{content:"";width:7px;height:7px;background:var(--signal);box-shadow:0 0 8px var(--signal);
  animation:blink 2.4s steps(2,start) infinite}
@keyframes blink{50%{opacity:.25}}

/* ── Boutons : biseautés (coin haut-droit et bas-gauche coupés), bord dessiné par un calque ─────── */
.btn{--cut:9px;--edge:var(--line);--fill:var(--night-1);position:relative;isolation:isolate;min-height:var(--tap);
  border:0;background:var(--edge);color:var(--cream);padding:10px 16px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:600 15px var(--font-title);letter-spacing:.03em;text-decoration:none;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.btn::before{content:"";position:absolute;inset:1px;z-index:-1;background:var(--fill);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.btn:hover{--edge:var(--holo)}
.btn:hover::before{background:linear-gradient(180deg,rgba(77,232,224,.08),var(--fill))}
.btn:focus-visible,.mode-card:focus-visible,.lang-btn:focus-visible{outline:3px solid var(--holo);outline-offset:3px}
.btn-primary{--edge:var(--signal);--fill:var(--signal);color:var(--night-0);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.btn-primary:hover{--edge:#d6ff9e;--fill:#cbff85}
.btn-primary:hover::before{background:var(--fill)}
.btn-ghost{--fill:var(--night-0)}
.btn-danger{--edge:var(--alert);--fill:var(--night-0);color:var(--alert)}
.btn-danger:hover{--edge:#ff95ab}
.btn-ghost:not(:hover){--edge:transparent}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn small{font:400 14px var(--font-body);color:var(--mist)}
.btn-primary small{color:inherit;opacity:.75}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row>.btn{flex:1}
.toolbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}

/* ── Formulaires ────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:6px}
.field>span,.field label{font:600 14px var(--font-title);letter-spacing:.06em;color:var(--mist)}
.field input,.field textarea,select.btn{min-height:var(--tap);border-radius:0;border:1px solid var(--line);
  background:rgba(5,10,26,.7);color:var(--cream);padding:10px 12px;font:16px var(--font-body)}
.field input:focus,.field textarea:focus{outline:2px solid var(--holo);outline-offset:-1px;border-color:transparent}
.field textarea{resize:vertical}
select.btn{appearance:auto;width:100%;text-align:left;clip-path:none}
select.btn::before{display:none}
.msg{min-height:1.4em;font-size:14px;color:var(--mist);margin:0}
.msg.err{color:var(--alert)}
.sep{display:flex;align-items:center;gap:10px;color:var(--mist);font:600 14px var(--font-title);letter-spacing:.12em;text-transform:uppercase}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line)}
input[type=checkbox],input[type=radio]{width:20px;height:20px;accent-color:var(--signal)}
input[type=color]{padding:2px;min-width:64px}

/* ── Cadres HUD : repères d'angle à la couleur du cadre (--c) ────────── */
.prog-card,.signal-card,.journal,.hint-out,.frame{--c:var(--holo);position:relative;border:1px solid rgba(77,232,224,.16);
  background:rgba(10,20,48,.62)}
.prog-card::before,.signal-card::before,.journal::before,.frame::before{content:"";position:absolute;inset:-1px;pointer-events:none;
  background:
    linear-gradient(var(--c),var(--c)) top left/14px 2px,linear-gradient(var(--c),var(--c)) top left/2px 14px,
    linear-gradient(var(--c),var(--c)) top right/14px 2px,linear-gradient(var(--c),var(--c)) top right/2px 14px,
    linear-gradient(var(--c),var(--c)) bottom left/14px 2px,linear-gradient(var(--c),var(--c)) bottom left/2px 14px,
    linear-gradient(var(--c),var(--c)) bottom right/14px 2px,linear-gradient(var(--c),var(--c)) bottom right/2px 14px;
  background-repeat:no-repeat}
.prog-card{--c:var(--line);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
fieldset.prog-card{margin:0}
fieldset.prog-card legend{padding:0 8px;font:600 14px var(--font-title);letter-spacing:.12em;color:var(--holo)}
.lab-hydro{--c:var(--lab-hydro)}
.lab-pyro{--c:var(--lab-pyro)}
.lab-litho{--c:var(--lab-litho)}

/* ── Étiquettes (carrées) ───────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);padding:3px 9px;
  font:600 14px var(--font-title);letter-spacing:.04em;color:var(--mist);background:rgba(5,10,26,.55)}
.chip b{color:var(--cream)}
.chip.holo{color:var(--holo);border-color:rgba(77,232,224,.55)}
label.chip{min-height:var(--tap);cursor:pointer;padding:6px 12px;font-family:var(--font-body);font-weight:400;letter-spacing:0}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.topbar h2{display:flex;align-items:center;gap:10px}
.lang-btn{min-height:var(--tap);min-width:var(--tap);border:1px solid var(--line);background:transparent;color:var(--mist);
  font:600 14px var(--font-title);letter-spacing:.1em;cursor:pointer}
.lang-btn:hover{color:var(--cream);border-color:var(--holo)}

/* ── Journal des missions (QG) : lignes numérotées, pas de cartes ───── */
.modes{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.mode-card{position:relative;text-align:left;border:0;border-bottom:1px solid var(--line);background:transparent;
  color:var(--cream);padding:12px 8px 12px 12px;cursor:pointer;min-height:56px;
  display:grid;grid-template-columns:40px 1fr auto;grid-template-rows:auto auto;column-gap:14px;align-items:center}
.mode-card>.ico,.mode-card>span.ico{grid-row:span 2;width:40px;height:40px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--holo);font-size:22px}
.mode-card>span.ico svg{width:22px;height:22px}
.mode-card strong{font:700 17px var(--font-title);letter-spacing:.03em}
.mode-card>span:not(.ico){grid-column:2;color:var(--mist);font-size:14px}
.mode-card::after{content:"";grid-column:3;grid-row:1/span 2;width:10px;height:10px;margin-right:4px;
  border-top:2px solid var(--line);border-right:2px solid var(--line);transform:rotate(45deg)}
.mode-card::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;background:transparent}
.mode-card:hover{background:linear-gradient(90deg,rgba(184,255,92,.07),transparent 70%)}
.mode-card:hover::before{background:var(--signal)}
.mode-card:hover::after{border-color:var(--signal)}
.mode-card:hover>span.ico{border-color:var(--signal);color:var(--signal)}
.mode-card[aria-pressed="true"]{background:linear-gradient(90deg,rgba(184,255,92,.1),transparent 70%)}
.mode-card[aria-pressed="true"]::before{background:var(--signal)}
.mode-card[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.mode-card.lab-hydro>span.ico{color:var(--lab-hydro)} .mode-card.lab-pyro>span.ico{color:var(--lab-pyro)}
.mode-card.lab-litho>span.ico{color:var(--lab-litho)}
/* numéros de mission (QG seulement) */
.missions{counter-reset:mis}
.missions .mode-card{grid-template-columns:28px 40px 1fr auto;padding-left:4px}
.missions .mode-card>span.ico{grid-column:2}
.missions .mode-card strong,.missions .mode-card>span:not(.ico){grid-column:3}
.missions .mode-card::after{grid-column:4}
.missions .mode-card>span.idx{grid-column:1;grid-row:1/span 2;font:600 14px var(--font-title);color:var(--mist);letter-spacing:.06em}
.missions .mode-card:hover>span.idx{color:var(--signal)}

/* ── En jeu : bandeau, transmission, sondes, température ────────────── */
.hud{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mist)}
.hud b{color:var(--cream);letter-spacing:.02em}
.probes{display:flex;gap:5px;align-items:center}
.probe-pip{width:12px;height:12px;transform:rotate(45deg);border:2px solid var(--signal)}
.probe-pip.used{opacity:.3}
.probe-pip.left{background:var(--signal)}
.signal-card{--c:var(--holo);padding:16px 16px 16px 18px;background:
  linear-gradient(90deg,rgba(77,232,224,.09),rgba(10,20,48,.6) 40%)}
.signal-card h2{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:14px;color:var(--holo);
  text-transform:uppercase;letter-spacing:.16em}
.signal-card h2::after{content:"";width:8px;height:15px;background:var(--holo);animation:blink 1.1s steps(2,start) infinite}
.signal-card small{color:var(--mist);font-weight:400;text-transform:none}
.riddle{margin:0;font-size:18px;line-height:1.5}
.timer{font:700 20px var(--font-title);color:var(--alert);font-variant-numeric:tabular-nums}
.timer.urgent{animation:blink .8s steps(2,start) infinite}
.hint-out{--c:var(--signal);border-left:2px solid var(--signal);padding:8px 12px;font-size:15px}
.hint-out img{max-width:100%;display:block}
.credit{font-size:14px;color:var(--mist)}
.temp{display:flex;align-items:center;gap:12px}
.temp-bar{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
.temp-bar i{height:8px;background:var(--fog)}
.temp-bar i.on{background:currentColor;box-shadow:0 0 8px currentColor}
.temp-label{font:700 15px var(--font-title);letter-spacing:.12em;text-transform:uppercase;min-width:84px;text-align:right}
.t-glacial{color:var(--t-glacial)} .t-froid{color:var(--t-froid)} .t-tiede{color:var(--t-tiede)}
.t-chaud{color:var(--t-chaud)} .t-brulant{color:var(--t-brulant)}
.tip{font-size:14px;color:var(--mist);margin:0}

/* ── Révélation / Journal de bord ───────────────────────────────────── */
.journal{--c:var(--earth);border-color:rgba(232,154,100,.3);overflow:hidden}
.journal img{width:100%;max-height:220px;object-fit:cover;display:block;filter:saturate(.9) contrast(1.05)}
.journal .body{padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.journal h2{margin:0;color:var(--earth);font-size:22px;letter-spacing:.03em}
.result{display:flex;gap:8px;flex-wrap:wrap}
.score-big{font:700 40px/1 var(--font-title);color:var(--signal);margin:0;font-variant-numeric:tabular-nums;
  text-shadow:0 0 22px rgba(184,255,92,.35)}

/* ── Récap : note en lettre creuse ───────────────────────────────────── */
.grade{font:700 104px/1 var(--font-title);margin:0;text-align:center;color:transparent;
  -webkit-text-stroke:2px var(--signal);text-shadow:0 0 30px rgba(184,255,92,.25)}
.recap-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;counter-reset:rl}
.recap-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px dashed var(--line);
  padding:9px 0;font-variant-numeric:tabular-nums}

/* ── Jauges graduées ────────────────────────────────────────────────── */
.xp-bar{position:relative;height:10px;background:var(--fog);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 9px,transparent 9px 11px);
          mask:repeating-linear-gradient(90deg,#000 0 9px,transparent 9px 11px)}
.xp-bar i{display:block;height:100%;background:var(--signal)}
.hp-bar{height:12px}
.hp-bar i{background:repeating-linear-gradient(-45deg,var(--alert) 0 6px,#b8445d 6px 12px)}
.hp-viewers i{background:repeating-linear-gradient(-45deg,var(--holo) 0 6px,#2fa9a3 6px 12px)}
.daily-grid{font-size:26px;letter-spacing:5px;margin:0;text-align:center}

/* ── QG : pilote, outils ─────────────────────────────────────────────── */
.hub-hello{display:flex;gap:14px;align-items:center}
.hub-hello .avatar{flex:none;border:1px solid var(--line);background:
  radial-gradient(circle at 50% 60%,rgba(77,232,224,.14),transparent 70%);padding:4px}
.hub-hello .lead{margin:0 0 8px;color:var(--cream)}
.hub-hello>div{flex:1;min-width:0}
.pilot-rank{display:block;font:600 14px var(--font-title);letter-spacing:.14em;text-transform:uppercase;color:var(--holo)}
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;background:var(--alert);
  color:var(--night-0);font:700 14px var(--font-title)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}
.stats>div{padding:8px 10px;display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line)}
.stats>div:first-child{border-left:0}
.stats small{font:600 14px var(--font-title);letter-spacing:.1em;text-transform:uppercase;color:var(--mist);
  display:flex;align-items:center;gap:6px}
.stats b{font:700 20px var(--font-title)}

/* ── Anomalie : cadre d'alerte à bandes ─────────────────────────────── */
.anomaly{--c:var(--alert);border-color:rgba(255,107,138,.35);
  background:linear-gradient(180deg,rgba(255,107,138,.08),rgba(10,20,48,.62) 45%)}
.anomaly .hazard{height:6px;margin:-14px -16px 4px;background:repeating-linear-gradient(-45deg,var(--alert) 0 8px,transparent 8px 16px);opacity:.7}
.anomaly .hud b{color:var(--alert)}

/* ── Hangar ─────────────────────────────────────────────────────────── */
.hangar-preview{display:flex;gap:18px;align-items:center;justify-content:center;border:1px solid var(--line);
  background:radial-gradient(circle,rgba(77,232,224,.16),transparent 70%);padding:10px}
.swatch{display:inline-block;width:24px;height:24px;border:2px solid var(--cream);transform:rotate(45deg)}

/* ── Marqueurs carte ────────────────────────────────────────────────── */
.mk-probe{width:22px;height:22px;border-radius:50%;background:var(--probe,var(--signal));border:3px solid var(--night-0);
  box-shadow:0 0 0 4px rgba(184,255,92,.35)}
.mk-probe.old{opacity:.55;transform:scale(.8)}
.mk-probe.star{border-radius:0;border:0;box-shadow:none;width:28px;height:28px;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.mk-probe.pending{opacity:.6}
.mk-target{width:26px;height:26px;padding:0;border-radius:50%;background:var(--earth);border:3px solid var(--cream);cursor:pointer;
  box-shadow:0 0 0 6px rgba(232,154,100,.35)}
/* nom du lieu révélé, affiché d'assez près ; un clic sur la cible rouvre la fiche */
.mk-label{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;pointer-events:none;
  padding:2px 8px;background:var(--night-0);border:1px solid var(--earth);border-radius:4px;color:var(--cream);font:700 14px var(--font-title)}
.gh-near .mk-label{display:block}
.mk-rose{pointer-events:none;width:132px;height:132px}
.mk-rose .lbl{font:700 14px var(--font-title);fill:var(--cream);paint-order:stroke;stroke:var(--night-0);stroke-width:4px}
.mk-landing{padding:3px 8px;background:var(--night-0);border:1px solid var(--signal);
  color:var(--cream);font:600 14px/1.2 var(--font-title);white-space:nowrap;pointer-events:none}
.scan{position:absolute;inset:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(184,255,92,.35),transparent 60%);animation:scan .9s ease-out forwards}
@keyframes scan{from{transform:scale(.2);opacity:1}to{transform:scale(3);opacity:0}}
.maplibregl-ctrl-attrib{font-size:12px}
.basemap-btn{min-height:var(--tap);padding:0 12px!important;width:auto!important;font:600 14px var(--font-title);
  letter-spacing:.08em;color:var(--night-0)}

/* ── Divers ─────────────────────────────────────────────────────────── */
.dot{display:inline-block;width:8px;height:8px;background:var(--mist);margin-right:5px;transform:rotate(45deg)}
.dot.on{background:var(--signal);box-shadow:0 0 6px var(--signal)}
.mk-target.celebrate{box-shadow:0 0 0 0 rgba(232,154,100,.8);animation:cache-pulse 1.2s ease-out 3}
@keyframes cache-pulse{0%{box-shadow:0 0 0 0 rgba(232,154,100,.9)}100%{box-shadow:0 0 0 38px rgba(232,154,100,0)}}
.cache-found{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px;color:var(--signal);
  background:radial-gradient(circle,rgba(184,255,92,.16),transparent 70%);animation:cache-pop .5s cubic-bezier(.2,1.6,.4,1)}
.cache-found .ico{width:48px;height:48px}
.cache-found b{font:700 24px var(--font-title);letter-spacing:.06em;text-transform:uppercase}
.cache-found span{color:var(--cream)}
@keyframes cache-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
details>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"";width:7px;height:7px;border-right:2px solid var(--mist);border-bottom:2px solid var(--mist);
  transform:rotate(-45deg);transition:transform .15s}
details[open]>summary::before{transform:rotate(45deg)}

@media (prefers-reduced-motion:reduce){
  .scan,.mk-target.celebrate,.cache-found,.statusbar .live::before,.signal-card h2::after,.timer.urgent{animation:none}
}

/* ── Aides : coût aligné, jamais coupé ──────────────────────────────── */
#gh-hints .btn{justify-content:space-between}
#gh-hints .btn small{white-space:nowrap}

/* ── Contrôles de carte aux couleurs de la console ──────────────────── */
.maplibregl-ctrl-group{background:rgba(5,10,26,.88)!important;border:1px solid var(--line)!important;border-radius:0!important;box-shadow:none!important}
.maplibregl-ctrl-group button:not(.basemap-btn){width:44px!important;height:44px!important}
.layout-ctrl{display:none}
@media (min-width:900px){.layout-ctrl{display:block}}
.layout-ctrl button{display:inline-flex!important;align-items:center;justify-content:center;color:var(--cream)!important}
.layout-ctrl button[aria-pressed="true"]{color:var(--signal)!important;box-shadow:inset 0 -2px 0 var(--signal)}
.maplibregl-ctrl-group .basemap-btn{height:44px!important;padding:0 12px!important}
.maplibregl-ctrl-group button+button{border-top:1px solid var(--line)!important}
.maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1) brightness(.85)}
.maplibregl-ctrl-group button:hover{background:rgba(77,232,224,.12)!important}
.basemap-btn{color:var(--cream)!important;display:inline-flex!important;align-items:center;gap:8px}
.maplibregl-ctrl-attrib{background:rgba(5,10,26,.75)!important;color:var(--mist)}
.maplibregl-ctrl-attrib a{color:var(--mist)}

/* ── Signal du jour : cases dessinées (couleur ET forme selon le score) ── */
.daily-grid{display:flex;justify-content:center;gap:8px;letter-spacing:0}
.daily-grid .cell{width:26px;height:26px;border:1px solid var(--line);background:var(--night-1)}
.daily-grid .c4{background:var(--signal);border-color:var(--signal)}
.daily-grid .c3{background:var(--t-chaud);border-color:var(--t-chaud);clip-path:polygon(0 0,100% 0,100% 100%,20% 100%,0 80%)}
.daily-grid .c2{background:var(--earth);border-color:var(--earth);clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%)}
.daily-grid .c1{background:var(--alert);border-color:var(--alert);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
/* ── Classements : rangs numérotés ──────────────────────────────────── */
.rank{display:inline-block;min-width:28px;font:700 15px var(--font-title);color:var(--mist)}
.rank.r1{color:var(--signal)} .rank.r2{color:var(--holo)} .rank.r3{color:var(--earth)}

/* ── Console : statuts en étiquettes texte (jamais la couleur seule) ─── */
.chip.st-live{color:var(--alert);border-color:var(--alert)} .chip.st-soon{color:var(--holo);border-color:rgba(77,232,224,.55)}
.chip.st-done{color:var(--signal);border-color:var(--signal)} .chip.st-off,.chip.st-expired{color:var(--mist)}

/* ── Lignes simples (listes de la console) : titre + détail, chevron à droite ─ */
.mode-card.plain{grid-template-columns:1fr auto;padding-left:12px}
.mode-card.plain>strong,.mode-card.plain>span{grid-column:1}
.mode-card.plain::after{grid-column:2}
.mode-card.static{cursor:default}
.mode-card.static::after{display:none}
.mode-card.static:hover{background:transparent}
.mode-card.static:hover::before{background:transparent}

/* ── Police dyslexie (douce) : texte de lecture en OpenDyslexic (eq_dyslexia.js), titres/HUD sans majuscules forcées ── */
html.dyslexia .ch,html.dyslexia .hud,html.dyslexia .btn-primary,html.dyslexia .pilot-rank{text-transform:none;letter-spacing:.02em}
html.dyslexia .riddle{line-height:1.6}
html.dyslexia :is(h1,h2,h3,.hud,.ch,.btn,.chip,.badge,.score-big,.pilot-rank,.basemap-btn){font-size-adjust:none}
#gh-dys small{margin-left:auto}

/* ── Chargement d'écran (QG sans cache) : la barre de tête balaie ── */
.panel[aria-busy="true"]::before{background:linear-gradient(90deg,var(--line) 0,var(--holo) 50%,var(--line) 100%);
  background-size:200% 100%;animation:busy 1s linear infinite}
@keyframes busy{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.panel[aria-busy="true"]::before{animation:none;background:var(--holo)}}

/* ── Cartes postales : rareté = couleur + étiquette texte ── */
.r-commune{--rc:var(--mist)} .r-rare{--rc:var(--holo)} .r-epique{--rc:#c58bff} .r-legendaire{--rc:#ffd166}
.chip.r-commune,.chip.r-rare,.chip.r-epique,.chip.r-legendaire{border-color:var(--rc);color:var(--rc)}
.pc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.pc-thumb{position:relative;aspect-ratio:3/2;padding:0;border:2px solid var(--rc);background:var(--night-1);cursor:pointer;overflow:hidden;
  display:block;text-align:left;color:var(--cream)}
.pc-thumb img,.pc-front img{width:100%;height:100%;object-fit:cover;display:block}
.pc-thumb:hover,.pc-thumb:focus-visible{outline:3px solid var(--rc);outline-offset:2px}
.pc-noimg{display:grid;place-items:center;width:100%;height:100%;color:var(--line);background:linear-gradient(135deg,var(--night-2),var(--fog))}
.pc-tag{position:absolute;top:4px;left:4px;padding:1px 6px;font:700 11px var(--font-title);letter-spacing:.06em;text-transform:uppercase;
  background:rgba(5,10,26,.85);color:var(--rc);border:1px solid var(--rc)}
.pc-copies{position:absolute;top:4px;right:4px;padding:1px 6px;font:700 13px var(--font-title);background:var(--signal);color:var(--night-0)}
.pc-name{position:absolute;left:0;right:0;bottom:0;padding:14px 6px 4px;font:700 14px var(--font-title);
  background:linear-gradient(transparent,rgba(5,10,26,.92));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-legendaire.pc-thumb::after,.r-legendaire .pc-front::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,236,170,.35) 50%,transparent 65%);background-size:250% 100%;animation:shine 3.5s linear infinite}
@keyframes shine{from{background-position:120% 0}to{background-position:-120% 0}}
/* carte complète : recto photo, verso papier (journal manuscrit, timbre, cachet) */
.pc-scene{perspective:1200px}
.pc-card{position:relative;aspect-ratio:3/2;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.7,.2,1);cursor:pointer}
.pc-card.flipped{transform:rotateY(180deg)}
.pc-card:focus-visible{outline:3px solid var(--holo);outline-offset:4px}
.pc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  border:3px solid var(--rc);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.pc-front{background:var(--night-1)}
.pc-title{position:absolute;left:0;right:0;bottom:0;padding:24px 12px 8px;font:700 20px var(--font-title);color:#fff;
  background:linear-gradient(transparent,rgba(5,10,26,.9))}
.pc-stamp-rarity{position:absolute;top:8px;right:8px;padding:3px 8px;font:700 12px var(--font-title);letter-spacing:.08em;text-transform:uppercase;
  color:var(--rc);background:rgba(5,10,26,.8);border:1px dashed var(--rc);transform:rotate(4deg)}
.pc-credit{position:absolute;top:8px;left:8px;max-width:60%;font-size:11px;color:#e8e8e8;background:rgba(5,10,26,.6);padding:1px 5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-back{transform:rotateY(180deg);display:grid;grid-template-columns:1.5fr 1fr;gap:10px;padding:12px;color:#2b2118;
  background:repeating-linear-gradient(0deg,transparent 0 23px,rgba(43,33,24,.08) 23px 24px),linear-gradient(135deg,#f6ecd6,#eadcbd)}
.pc-msg{border-right:1px solid rgba(43,33,24,.3);padding-right:10px;overflow:auto}
.pc-hand{margin:0;font:500 19px/1.28 'Caveat',cursive;white-space:pre-line}
.pc-empty{opacity:.6}
.pc-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;font-size:12px}
.pc-postage{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px;border:2px dotted #2b2118;background:#fffaf0;color:var(--c,#2b2118)}
.pc-postage small{font:700 9px var(--font-title);letter-spacing:.08em;text-transform:uppercase;color:#2b2118}
.pc-postage.lab-hydro{--c:#127c78} .pc-postage.lab-pyro{--c:#b35a00} .pc-postage.lab-litho{--c:#2f7a3a}
.pc-postmark{display:grid;place-items:center;width:78px;height:78px;border:2px solid rgba(90,40,40,.55);border-radius:50%;
  color:rgba(90,40,40,.8);transform:rotate(-12deg);text-align:center;font:700 11px var(--font-title);align-self:center}
.pc-postmark small{font-size:9px;max-width:64px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pc-address{margin-top:auto;width:100%;font:500 16px/1.2 'Caveat',cursive;border-top:1px solid rgba(43,33,24,.35);padding-top:4px;white-space:pre-line}
html.dyslexia .pc-hand,html.dyslexia .pc-address{font-family:'OpenDyslexic',sans-serif!important;font-size:14px;line-height:1.45}
.trade{display:flex;flex-direction:column;gap:6px}
@media (prefers-reduced-motion:reduce){.pc-card{transition:none}.r-legendaire.pc-thumb::after,.r-legendaire .pc-front::after{animation:none}}
/* Console · Perf */
.perf-table{width:100%;border-collapse:collapse;font:14px var(--font-body)}
.perf-table th,.perf-table td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.perf-table th:first-child,.perf-table td:first-child{text-align:left}
.perf-table th{font:600 13px var(--font-title);color:var(--mist);text-transform:uppercase;letter-spacing:.04em}
/* Série quotidienne (QG) : couleur + texte, jamais la couleur seule */
.streak{--c:var(--mist);display:flex;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-left:3px solid var(--c)}
.streak.st-safe{--c:var(--signal)}.streak.st-risk{--c:var(--alert)}.streak.st-pending{--c:var(--holo)}
.streak-n{display:flex;flex-direction:column;align-items:center;min-width:56px;color:var(--c)}
.streak-n b{font:700 28px/1 var(--font-title);color:var(--cream)}
.streak-n small{font:600 13px var(--font-title);letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}
.streak-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.streak-body strong{font:600 15px var(--font-body);color:var(--cream)}
.streak.st-risk .streak-n svg{animation:gh-pulse 1.6s ease-in-out infinite}
@keyframes gh-pulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.streak.st-risk .streak-n svg{animation:none}}
/* QG : bouton Jouer en tête (mode classique) */
.quick-play{min-height:64px;justify-content:flex-start;gap:14px;padding:10px 16px!important;text-align:left}
.quick-play span{display:flex;flex-direction:column;gap:2px;min-width:0}
.quick-play b{font:700 20px var(--font-title);letter-spacing:.06em;text-transform:uppercase}
.quick-play small{font:600 14px var(--font-body);opacity:.85;text-transform:none;letter-spacing:0}
/* Objectifs de la semaine */
.goals{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.goal{display:flex;flex-direction:column;gap:6px}
.goal-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.goal-head span{display:inline-flex;align-items:center;gap:6px;font:600 15px var(--font-body)}
.goal-head b{font:700 15px var(--font-title);color:var(--mist)}
.goal.done .goal-head b{color:var(--signal)}
.goal-act{display:flex;justify-content:flex-end}
.goal-bonus{display:flex;justify-content:center;border-top:1px solid var(--line);padding-top:10px}
.play-split{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.play-split .quick-play{padding:10px 12px!important;gap:10px}
.play-split .quick-play b{font-size:17px}
@media (max-width:360px){.play-split{grid-template-columns:1fr}}
.play-split>:only-child{grid-column:1/-1}

/* ── Cockpit UFO Atlas (activé par ?cockpit=1 tant que la bascule n'est pas faite) ─────────────────── */
html.cockpit .app{display:block;height:100dvh;background:var(--night-1)}   /* sous la console : même fond que l'espace du globe */
html.cockpit .map-wrap{position:fixed;inset:0}
html.cockpit .layout-ctrl{display:none!important}
#cockpit{position:fixed;inset:0;pointer-events:none;z-index:5;font-family:var(--font-title)}
/* Seuls les éléments interactifs captent les clics : la carte reste manipulable à travers le décor */
#cockpit .ck-hublot,#cockpit .ck-stage,#cockpit .ck-layer,#cockpit .ck-console{pointer-events:none}
#cockpit .ck-zone,#cockpit .ck-bar,#cockpit .ck-ui,#cockpit .ck-projection,#cockpit .ck-mapctl>*{pointer-events:auto}
/* Commandes de la carte sorties au premier plan : fond et zoom sous Retour, attribution en bas à droite */
#cockpit .ck-mapctl{position:absolute;z-index:3}
#cockpit .maplibregl-ctrl-top-left{top:72px;left:16px}
#cockpit .maplibregl-ctrl-top-right{top:128px;left:16px;right:auto}
#cockpit .maplibregl-ctrl-bottom-right{bottom:52px;right:12px}
#cockpit .maplibregl-ctrl-bottom-left{bottom:52px;left:12px}
/* Chaud / froid : couleur du halo de la sonde (le libellé reste écrit dans l'écran de com) */
:root{--heat-glacial:var(--holo);--heat-froid:var(--mist);--heat-tiede:var(--cream);--heat-chaud:var(--lab-pyro);--heat-brulant:var(--alert)}
.mk-probe[data-temp]{box-shadow:0 0 0 5px var(--heat-glacial)}
.mk-probe[data-temp="froid"]{box-shadow:0 0 0 5px var(--heat-froid)}
.mk-probe[data-temp="tiede"]{box-shadow:0 0 0 5px var(--heat-tiede)}
.mk-probe[data-temp="chaud"]{box-shadow:0 0 0 5px var(--heat-chaud)}
.mk-probe[data-temp="brulant"]{box-shadow:0 0 0 5px var(--heat-brulant)}
/* Écran de com rétracté (onglet sur le bord), revient au toucher de l'onglet ou après 2 s */
html.cockpit .ck-projection{transition:transform .25s ease-out,opacity .25s}
html.cockpit .ck-projection.ck-folded{transform:translateX(calc(100% + 40px));opacity:0;pointer-events:none}
.ck-com-tab{top:72px;right:0;border-radius:6px 0 0 6px;display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--cream)}
.ck-com-tab[hidden]{display:none}
.ck-hublot{position:absolute;inset:0}
.ck-hublot svg,.ck-console svg{position:absolute;inset:0;width:100%;height:100%}
.ck-hublot svg{opacity:.92}
.ck-stage{position:absolute;inset:0;pointer-events:none}
.ck-layer{position:absolute;pointer-events:none}
/* cadre de l'écran de com : visible seulement quand un écran y est projeté (sinon rectangle vide) */
#cockpit:not([data-proj="com"]) #zone-com,#cockpit:not([data-proj="com"]) #com-cadre,
#cockpit[data-com-tall] #zone-com,#cockpit[data-com-tall] #com-cadre{visibility:hidden}
.ck-zone{position:absolute;display:flex;align-items:center;justify-content:center;gap:1.2%;pointer-events:auto}
.ck-zone.z-row{justify-content:flex-start;padding:0 1%}
.ck-zone.z-diodes{flex-direction:column;align-items:stretch;gap:2%;padding:2% 3%}
/* Touches de console : tranche visible, enfoncement de 3 px, LED --signal quand actif */
.ck-key{--edge:#050a1a;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;height:78%;flex:1 1 0;min-width:0;
  padding:0 8px;text-align:center;line-height:1.1;border:2px solid var(--line);border-radius:8px;background:var(--night-2);color:var(--cream);
  font:700 clamp(14px,calc(var(--ck-k,1)*20px),18px) var(--font-title);letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 5px 0 var(--edge);cursor:pointer;transition:transform .06s,box-shadow .06s}
.ck-key:hover:not(:disabled){border-color:var(--holo)}
.ck-key:active:not(:disabled),.ck-key[aria-pressed="true"]{transform:translateY(3px);box-shadow:0 2px 0 var(--edge)}
.ck-key[aria-pressed="true"]{border-color:var(--signal);box-shadow:0 2px 0 var(--edge),inset 0 -3px 0 var(--signal)}
.ck-key:disabled{opacity:.55;cursor:not-allowed}
.ck-key[aria-disabled="true"]{opacity:.6}
/* Tutoriel : anneau autour de la commande à utiliser (le reste assombri, rien n'est bloqué) + bulle */
.tuto-ring{position:fixed;z-index:1000;pointer-events:none;border:3px solid var(--signal);border-radius:12px;
  box-shadow:0 0 0 4px rgba(184,255,92,.25),0 0 0 100vmax rgba(5,10,26,.45);transition:left .2s,top .2s,width .2s,height .2s}
.tuto-bubble{position:fixed;z-index:1001;width:min(360px,calc(100vw - 32px));box-sizing:border-box;padding:14px 16px;
  background:var(--night-1);border:2px solid var(--signal);border-radius:10px;color:var(--cream);font:600 16px/1.45 var(--font-body)}
.tuto-bubble p{margin:0 28px 10px 0}.tuto-bubble .btn{min-height:44px}
.tuto-rules{margin:0;padding-left:20px;display:grid;gap:6px;line-height:1.45}
.tuto-x{position:absolute;top:4px;right:4px;width:44px;height:44px;display:grid;place-items:center;background:none;border:0;color:var(--mist);cursor:pointer}
@media (prefers-reduced-motion:reduce){.tuto-ring{transition:none}}   /* mode verrouillé : cliquable, explique comment le débloquer */
.ck-key svg{flex:none}
.z-ordi .ck-key{height:100%;flex-direction:column}
.z-compte .ck-key{height:100%;flex-direction:column;gap:0;line-height:1.1}
.z-key{gap:10px}
.z-key .ck-key{height:100%;flex-direction:column;gap:2px}
.ck-key:has(small){flex-direction:column;gap:2px}
.ck-key small{font:600 14px var(--font-body);text-transform:none;letter-spacing:0;color:var(--mist)}
.ck-key:focus-visible,.ck-diode:focus-visible,.ck-journal:focus-visible,.ck-ui:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.z-jouer .ck-key{height:100%;background:var(--signal);color:var(--night-0);border-color:var(--signal);font-size:clamp(18px,calc(var(--ck-k,1)*44px),40px)}
.z-lancer .ck-key{height:100%;background:var(--signal);color:var(--night-0);border-color:var(--signal);font-size:clamp(15px,calc(var(--ck-k,1)*30px),26px)}
.ck-tag{writing-mode:vertical-rl;transform:rotate(180deg);font:700 14px var(--font-title);letter-spacing:.18em;color:var(--mist)}
.ck-journal{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;
  background:none;border:0;color:var(--cream);cursor:pointer;font:700 clamp(14px,calc(var(--ck-k,1)*22px),20px) var(--font-title);
  letter-spacing:.1em;text-transform:uppercase}
.ck-photo{display:block;width:58%;aspect-ratio:120/140;background:var(--night-0);border:2px solid var(--line);overflow:hidden}
.ck-photo svg{width:100%;height:100%}
/* Diodes d'événements : allumée = mission spéciale en cours (texte « en cours » + couleur, jamais la couleur seule) */
.ck-diode{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;min-height:44px;flex:1;padding:2px 8px;
  background:none;border:0;border-bottom:1px solid var(--line);color:var(--mist);text-align:left;cursor:pointer;
  font:600 clamp(14px,calc(var(--ck-k,1)*19px),16px) var(--font-title);letter-spacing:.04em;line-height:1.1}
.ck-diode i{grid-row:1/3}
.ck-diode i{width:14px;height:14px;border-radius:50%;background:var(--night-0);border:2px solid var(--line)}
.ck-diode[aria-pressed="true"]{color:var(--cream)}
.ck-diode[aria-pressed="true"] i{background:var(--signal);border-color:var(--signal);box-shadow:0 0 10px var(--signal)}
.ck-diode small{grid-column:2;font:600 14px var(--font-body);color:var(--mist)}
.ck-diode:disabled{cursor:default}
.ck-radar{display:flex;flex-direction:column;gap:8px}
.ck-radar .ck-diode{flex:none;min-height:52px}
.ck-bar .ck-key{position:relative}
.ck-badge{position:absolute;top:4px;right:6px;min-width:20px;padding:0 5px;border-radius:10px;background:var(--signal);color:var(--night-0);font:700 14px var(--font-body);line-height:20px}
/* Ordinateur de bord (ancien QG projeté) : on joue depuis la console → pas de « Jouer » ni de liste des missions ;
   les modes masqués du menu (Relevés, Course, Expéditions) restent en base, sans entrée dans le cockpit */
html.cockpit #panel .play-split,html.cockpit #panel #gh-missions,html.cockpit #panel .missions{display:none}
/* Non diégétique : retour (haut gauche), mentions (bas centre), crédits (bas droite) */
.ck-ui{position:absolute;z-index:4;min-height:36px;padding:6px 12px;background:rgba(5,10,26,.78);border:1px solid var(--line);
  color:var(--mist);font:600 14px var(--font-body);cursor:pointer;border-radius:6px}
.ck-ui:hover{color:var(--cream);border-color:var(--holo)}
.ck-back{top:16px;left:16px;display:inline-flex;align-items:center;gap:6px;color:var(--cream);font:700 14px var(--font-title);min-height:44px}
.ck-legal{bottom:8px;left:50%;transform:translateX(-50%)}
.ck-credits{bottom:8px;right:12px}
/* Projection des écrans existants : holo sur le hublot, ou écran de com docké pendant une partie */
html.cockpit .ck-projection{position:absolute;z-index:2;max-height:none;overflow:auto;border:1px solid var(--holo);
  background:rgba(5,10,26,.9);padding:20px 22px;border-top:1px solid var(--holo)}
html.cockpit .ck-projection[hidden]{display:none!important}
html.cockpit .ck-projection[data-proj="holo"]{left:50%;top:max(70px,6vh);transform:translateX(-50%);width:min(760px,calc(100vw - 32px));
  max-height:calc(100dvh * .62);box-shadow:0 0 0 1px rgba(77,232,224,.15),0 0 40px rgba(77,232,224,.18);
  background-image:repeating-linear-gradient(0deg,rgba(77,232,224,.05) 0 1px,transparent 1px 4px);animation:ck-power .35s ease-out}
html.cockpit .ck-projection[data-proj="com"]{right:16px;top:70px;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh * .6)}
/* écran de com plus compact (petits écrans PC) : tout tient sans défiler */
html.cockpit .ck-projection[data-proj="com"]{padding:14px 16px}
html.cockpit .ck-projection[data-proj="com"] .view{gap:10px}
html.cockpit .ck-projection[data-proj="com"] .signal-card{padding:12px 14px}
html.cockpit .ck-projection[data-proj="com"] .riddle{letter-spacing:.02em;line-height:1.45}
html.cockpit .ck-projection[data-proj="com"] .ck-sci{padding-bottom:8px;margin-bottom:0}
html.cockpit .ck-projection[data-proj="com"] .ck-sci-face{width:48px;height:48px}
/* Révélation d'un lieu : large, docquée à droite ; le récap final passe en projection holo */
html.cockpit .ck-projection[data-proj="reveal"]{right:16px;top:70px;width:min(600px,44vw);max-height:calc(100dvh - 120px)}
@keyframes ck-power{from{opacity:0;transform:translateX(-50%) scaleY(.04)}to{opacity:1;transform:translateX(-50%) scaleY(1)}}
.ck-pick{display:flex;flex-direction:column;gap:12px}
.ck-pick .ck-key{height:auto;min-height:52px}
.ck-bar{display:none}
@media (max-width:760px){
  .ck-stage,.ck-hublot{display:none}
  .ck-bar{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;padding:10px 10px calc(10px + env(safe-area-inset-bottom));
    background:var(--night-1);border-top:2px solid var(--line)}
  .ck-bar .ck-key{height:auto;min-height:52px;font-size:14px;letter-spacing:0;text-transform:none;line-height:1.15;padding:0 6px;flex-direction:column;gap:2px}
  .ck-legal{bottom:auto;top:16px;left:auto;right:12px;transform:none}
  .ck-credits{display:none}

  html.cockpit .ck-projection[data-proj]{left:0;right:0;top:0;transform:none;width:auto;max-height:calc(100dvh - 160px);
    border-left:0;border-right:0;animation:ck-radio .3s ease-out}
  /* En jeu : écran de com compact (énigme + température), le globe reste visible et touchable */
  html.cockpit .ck-projection[data-proj]{top:68px;max-height:calc(100dvh - 220px)}
  html.cockpit .ck-projection[data-proj="com"]{max-height:38dvh;padding:12px 14px}
  html.cockpit .ck-projection[data-proj="reveal"]{max-height:calc(100dvh - 160px)}
  html.cockpit .ck-projection.ck-folded{transform:translateY(calc(-100% - 80px))}
  .ck-com-tab{top:68px;right:50%;transform:translateX(50%);border-radius:0 0 8px 8px}
  #cockpit .maplibregl-ctrl-top-left{top:auto;bottom:156px;left:10px}
  #cockpit .maplibregl-ctrl-top-right{top:auto;bottom:212px;left:10px}
  #cockpit .maplibregl-ctrl-bottom-right{bottom:96px;right:6px;max-width:calc(100vw - 12px)}
  @keyframes ck-radio{from{transform:translateY(-100%)}to{transform:none}}
}
@media (prefers-reduced-motion:reduce){html.cockpit .ck-projection{animation:none!important}.ck-key{transition:none}}
/* Écran de com : scientifique du labo (calques « yeux » et « bouche » du SVG animés en CSS) */
.ck-sci{--c:var(--lab-litho);display:flex;align-items:center;gap:12px;padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.ck-sci.lab-hydro{--c:var(--lab-hydro)}.ck-sci.lab-pyro{--c:var(--lab-pyro)}
.ck-sci b{display:block;font:700 17px var(--font-title);letter-spacing:.06em;color:var(--c)}
.ck-sci small{font:600 13px var(--font-body);color:var(--mist)}
.ck-sci-face{width:64px;height:64px;flex:none;background:var(--night-0);border:2px solid var(--c);border-radius:8px;overflow:hidden}
.ck-sci-face svg{width:100%;height:100%}
.ck-sci-face #yeux{transform-box:fill-box;transform-origin:center;animation:sci-blink 4.5s infinite}
.ck-sci-face.talking #bouche{transform-box:fill-box;transform-origin:center;animation:sci-talk .16s ease-in-out infinite alternate}
@keyframes sci-blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
@keyframes sci-talk{from{transform:scaleY(1)}to{transform:scaleY(2.6)}}
@media (prefers-reduced-motion:reduce){.ck-sci-face #yeux,.ck-sci-face.talking #bouche{animation:none}}