:root{
  /* Ambiance cockpit : cyan lumineux sur noir profond. Le halo n'est pas un effet
     gratuit — c'est lui qui fait lire un chiffre comme une source de lumiere plutot
     que comme du texte pose sur un fond. */
  --bg-0:#01070C; --bg-1:#061119; --bg-2:#0A1922; --bg-3:#10242F;
  --fg-0:#DFF6FF;
  --fg-1:rgba(223,246,255,.78); --fg-2:rgba(223,246,255,.52);
  --fg-3:rgba(223,246,255,.34); --fg-4:rgba(223,246,255,.18);
  --line-1:rgba(0,217,255,.08); --line-2:rgba(0,217,255,.16); --line-3:rgba(0,217,255,.30);
  --accent:#00D9FF; --accent-2:#7FE9FF;
  --accent-line:rgba(0,217,255,.34); --accent-soft:rgba(0,217,255,.10);
  --amber:#FFB53E; --amber-soft:rgba(255,181,62,.14);
  --green:#3BE8B0; --red:#FF4D63; --red-soft:rgba(255,77,99,.12);
  --glow:0 0 12px rgba(0,217,255,.45);
  --glow-soft:0 0 22px rgba(0,217,255,.18);

  --bg:var(--bg-0); --panel:var(--bg-1); --panel-2:var(--bg-2); --line:var(--line-2);
  --text:var(--fg-0); --muted:var(--fg-2); --faint:var(--fg-3);
  --accent-dim:var(--accent-line);
  --warn:var(--amber); --crit:var(--red); --ok:var(--green);
  --mono:"Geist Mono","JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
}

/* Atmosphere : grille technique, tracés, vignette et halos. Chaque couche est fixe,
   non cliquable, et assez discrete pour ne jamais concurrencer les chiffres. */
.atmo{position:fixed;inset:0;pointer-events:none;z-index:0}
.atmo--grid{background-image:
  linear-gradient(rgba(0,217,255,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(0,217,255,.045) 1px,transparent 1px);
  background-size:48px 48px;mask-image:radial-gradient(ellipse at 50% 45%,#000 20%,transparent 78%)}
.atmo--hex{opacity:.5;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='48'><path d='M14 0 L42 0 L56 24 L42 48 L14 48 L0 24 Z' fill='none' stroke='rgba(0,217,255,0.10)' stroke-width='1'/></svg>");
  mask-image:linear-gradient(115deg,transparent 55%,#000 100%)}
.atmo--vignette{background:radial-gradient(ellipse at 50% 42%,transparent 34%,#000 128%);opacity:.72}
.atmo--aurora{background:
  radial-gradient(70vw 55vh at 10% 6%,rgba(0,217,255,.07),transparent 62%),
  radial-gradient(65vw 50vh at 92% 94%,rgba(0,217,255,.05),transparent 60%)}
.atmo--grain{opacity:.03;mix-blend-mode:screen;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.80  0 0 0 0 0.95  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.bar,main{position:relative;z-index:1}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--mono);font-size:14px}
body{padding-bottom:2rem}
.hidden{display:none!important}

.bar{display:flex;align-items:center;gap:16px;padding:12px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5}
.brand{display:flex;align-items:center;gap:10px}
.orb{width:38px;height:38px}
.ring-static{fill:none;stroke:var(--line);stroke-width:2}
.ring-dash{fill:none;stroke:var(--accent-dim);stroke-width:2;stroke-dasharray:10 8}
.ring-arc{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:34 140}
.core{fill:var(--accent);opacity:.85}
.spin-slow{transform-origin:60px 60px;animation:spin 14s linear infinite}
.spin-fast{transform-origin:60px 60px;animation:spin 9s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.name{letter-spacing:.16em;color:var(--accent);font-size:14px}
.bar-mid{flex:1;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-right{display:flex;gap:8px}
.btn{background:transparent;border:1px solid var(--accent-dim);color:var(--accent);font-family:var(--mono);font-size:12px;padding:7px 12px;border-radius:6px;cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn:active{transform:scale(.98)}

.lock{display:flex;align-items:center;justify-content:center;min-height:70vh}
.lock-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:28px;display:grid;gap:12px;width:260px;text-align:center}
.lock-title{color:var(--muted);font-size:13px}
.lock-card input{background:var(--bg);border:1px solid var(--line);border-radius:6px;color:var(--text);font-family:var(--mono);padding:9px;text-align:center;letter-spacing:.3em}
.lock-err{color:var(--crit);font-size:12px;min-height:16px}

.brief{display:flex;align-items:center;gap:18px;padding:20px;border-bottom:1px solid var(--line)}
.brief-text{flex:1;font-size:15px;line-height:1.7;color:var(--text)}
.brief-text .w{color:var(--faint);transition:color .12s}
.brief-text .w.said{color:#8fb2c0}
.brief-text .w.now{color:var(--accent)}
.wave{display:flex;align-items:center;gap:2px;height:44px;width:190px;flex:none}
.wave i{flex:1;background:var(--accent-dim);border-radius:1px;height:3px}
.wave i.hot{background:var(--accent)}

main{padding:20px;max-width:1180px;margin:0 auto}
.grid{display:grid;gap:12px}
.row-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.row-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.row-money{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.tile{background:var(--panel);border-radius:10px;padding:14px}
.tile.warn{background:#1d1708}
.tile.crit{background:#1d0d0d}
.k{font-size:12px;color:var(--muted)}
.v{font-size:26px;margin-top:6px;font-variant-numeric:tabular-nums}
.s{font-size:12px;color:var(--faint);margin-top:3px}
.v.warn,.k.warn,.s.warn{color:var(--warn)}
.v.crit,.k.crit,.s.crit{color:var(--crit)}
.up{color:var(--ok)} .down{color:var(--crit)}

.money-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.spark{display:flex;align-items:flex-end;gap:3px;height:46px;margin-top:14px}
.spark i{flex:1;background:#1d2f3a;border-radius:1px}
.spark i.last{background:var(--accent)}

.card-alert{display:grid;gap:8px;align-content:start}
.al{border-left:2px solid var(--muted);padding:2px 0 2px 10px}
.al.critical{border-color:var(--crit)} .al.warning{border-color:var(--warn)} .al.info{border-color:var(--accent-dim)}
.al-t{font-size:13px} .al-d{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.5}
.al.critical .al-t{color:var(--crit)} .al.warning .al-t{color:var(--warn)}
.empty{color:var(--faint);font-size:12px}

.mach{display:flex;align-items:center;gap:14px;background:var(--panel);border-radius:10px;padding:14px}
.mach svg{width:64px;height:64px;flex:none}
.mach .t{font-size:13px} .mach .d{font-size:11px;color:var(--muted);margin-top:3px}
.gauge-bg{fill:none;stroke:var(--line);stroke-width:6}
.gauge-fg{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:40px 40px}
.gauge-fg.warn{stroke:var(--warn)} .gauge-fg.crit{stroke:var(--crit)} .gauge-fg.idle{stroke:var(--muted)}
.gauge-tx{fill:var(--text);font-size:15px;text-anchor:middle;font-family:var(--mono)}

.tr-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.tr-buckets{display:flex;gap:14px;margin:10px 0 4px;flex-wrap:wrap}
.tr-buckets span{font-size:11px;color:var(--faint)}
.tr-buckets b{font-weight:400;color:var(--muted)}
.tr-row{display:grid;grid-template-columns:88px 1fr auto auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line);cursor:pointer}
.tr-row:hover{background:var(--panel-2)}
.tr-row.on{background:var(--panel-2)}
.stage{font-size:10px;letter-spacing:.06em;border:1px solid var(--muted);color:var(--muted);border-radius:4px;padding:2px 6px;text-align:center;white-space:nowrap}
.stage.second{border-color:var(--warn);color:var(--warn)}
.stage.final{border-color:var(--crit);color:var(--crit)}
.tr-who{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-who i{font-style:normal;color:var(--faint);font-size:11px;margin-left:8px}
.tr-amt{font-size:13px;font-variant-numeric:tabular-nums}
.tr-day{font-size:11px;color:var(--muted);min-width:44px;text-align:right}
.draft{margin-top:14px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:14px}
.draft-sub{font-size:13px;color:var(--accent);margin-bottom:10px}
.draft-body{font-size:12px;line-height:1.75;color:#8fb2c0;white-space:pre-wrap;max-height:280px;overflow:auto}
.draft-act{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.draft-act .btn{font-size:11px;padding:6px 10px}
.list{display:grid;gap:7px;margin-top:10px}
.li{font-size:12px;color:#8fb2c0} .li .tm{color:var(--faint)} .li.warning{color:var(--warn)}
.h{font-size:12px;color:var(--muted);letter-spacing:.08em}

.hud{display:none;gap:12px;grid-template-columns:1fr}
body[data-skin="hud"] .hud{display:grid}
body[data-skin="hud"] #ops{display:none}
/* Deux colonnes reelles : la pile a gauche, la sphere a droite. Une grille ne peut
   pas se chevaucher — contrairement au positionnement absolu, qui finissait par
   recouvrir la sphere des que la fenetre retrecissait. */
.orbit{display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px;align-items:center;min-height:660px;padding:24px 0}
.stack{display:grid;gap:10px;align-content:center}
.orb-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:520px}
.rings{position:absolute;width:min(560px,90%);height:auto;aspect-ratio:1;pointer-events:none}
#sphere{width:min(400px,30vw);height:min(400px,30vw);display:block;transition:opacity .5s}
.orbit.focused #sphere{opacity:.62}   /* elle recule derriere le panneau, elle ne disparait pas */

.sat{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;
  transition:transform .62s cubic-bezier(.22,.9,.28,1),border-color .4s,background .4s,box-shadow .4s,width .5s;
  will-change:transform}
.sat:hover{border-color:var(--accent-dim)}
.sat.on,.sat.open{border-color:var(--accent);background:var(--panel-2);z-index:6;width:360px}
.sat .k{font-size:11px;letter-spacing:.06em}
.sat .v{font-size:22px;margin-top:4px}
.sat .s{font-size:11px;margin-top:2px}
.sat .li{font-size:11px}

@media(max-width:1100px){
  .orbit{grid-template-columns:1fr;min-height:0;padding:0}
  .rings{display:none}
  .orb-stage{min-height:0;order:-1}
  #sphere{width:min(300px,66vw);height:min(300px,66vw)}
  .stack{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sat.on,.sat.open{width:auto;transform:none!important}
}

/* La revelation : le detail n'existe que le temps du sujet. Il se deploie quand
   FRIDAY en parle ou quand on clique, puis se referme — un cockpit montre ce qui
   compte maintenant, pas tout en permanence. */
.sat .more{max-height:0;opacity:0;overflow:hidden;margin-top:0;
  transition:max-height .5s cubic-bezier(.22,.9,.28,1),opacity .35s,margin-top .5s}
.sat.on .more,.sat.open .more{max-height:190px;opacity:1;margin-top:10px}

.cols{display:flex;align-items:flex-end;gap:14px;height:74px;padding-top:6px}
.cols .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.cols .col span{width:100%;background:var(--line-3);border-radius:3px 3px 0 0;transition:height .6s cubic-bezier(.22,.9,.28,1)}
.cols .col.now span{background:var(--accent)}
.cols .col b{font-weight:400;font-size:11px;color:var(--fg-0);margin-top:6px;font-variant-numeric:tabular-nums}
.cols .col i{font-style:normal;font-size:10px;color:var(--fg-3);margin-top:1px}
.delta{font-size:11px;margin-top:8px;text-align:center}

.bars{display:grid;gap:5px}
.bars .b{display:grid;grid-template-columns:56px 1fr auto;gap:8px;align-items:center;font-size:11px;color:var(--fg-2)}
.bars .b em{font-style:normal;height:6px;background:var(--accent-line);border-radius:3px;display:block}
.bars .b em.hot{background:var(--red)}
.bars .b span{color:var(--fg-0);font-variant-numeric:tabular-nums}

.dots{display:grid;gap:6px}
.dots .d{display:grid;grid-template-columns:8px 1fr;gap:8px;align-items:start;font-size:11px;color:var(--fg-2);line-height:1.45}
.dots .d u{width:6px;height:6px;border-radius:50%;background:var(--fg-3);margin-top:5px;text-decoration:none}
.dots .d.p1 u{background:var(--red)} .dots .d.p2 u{background:var(--amber)}
.sat .li{font-size:11px}
@media(max-width:1100px){
  .orbit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-height:0;place-items:stretch}
  #sphere{grid-column:1 / -1;justify-self:center;width:min(320px,70vw);height:min(320px,70vw)}
  .sat{position:static;width:auto;transform:none}
  .sat.on,.sat.open{transform:none}
}
.hud-machines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hud-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:12px}
.panel{background:var(--panel);border-radius:10px;padding:16px}
.hud .big{font-size:34px;margin-top:8px;font-variant-numeric:tabular-nums}
.ticker{overflow:hidden;border-top:1px solid var(--line);padding-top:10px}
.ticker-in{display:inline-block;white-space:nowrap;color:var(--faint);font-size:12px;animation:tick 34s linear infinite}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.init{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;padding:11px 0;border-top:1px solid var(--line)}
.init:first-of-type{border-top:none}
.init .p{font-size:10px;letter-spacing:.06em;border:1px solid var(--muted);color:var(--muted);border-radius:4px;padding:2px 6px;white-space:nowrap}
.init .p.p1{border-color:var(--crit);color:var(--crit)}
.init .p.p2{border-color:var(--warn);color:var(--warn)}
.init .gate{font-size:9px;letter-spacing:.06em;border:1px solid var(--amber);color:var(--amber);border-radius:4px;padding:2px 5px;text-align:center;margin-top:5px;white-space:nowrap}
.init .t{font-size:13px}
.init .r{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.5}
.init .a{font-size:11px;color:var(--faint);margin-top:3px;line-height:1.5}
.init .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.init .acts .btn{font-size:11px;padding:5px 9px}
.jrn{display:grid;grid-template-columns:80px 1fr auto;gap:10px;font-size:11px;padding:6px 0;border-top:1px solid var(--line);color:var(--muted)}
.jrn .st{text-transform:none}
.st-done,.st-accepted{color:var(--ok)} .st-dismissed{color:var(--faint)} .st-expired{color:var(--faint)} .st-proposed{color:var(--accent)}
.heard{width:100%;margin-top:10px;font-size:13px;color:var(--accent);border-left:2px solid var(--accent-dim);padding-left:10px;min-height:20px}
.heard.err{color:var(--warn);border-color:var(--warn)}
.btn.on{border-color:var(--accent);color:var(--bg);background:var(--accent)}
.foot{margin-top:16px;color:var(--faint);font-size:11px;text-align:center}
.badge{display:inline-block;border:1px solid var(--warn);color:var(--warn);border-radius:4px;padding:1px 6px;font-size:11px;margin-left:8px}
.badge-off{border-color:var(--crit);color:var(--crit)}

@media(max-width:760px){
  .row-3,.row-2,.row-money,.money-row,.hud-machines,.hud-split{grid-template-columns:1fr}
  .brief{flex-direction:column;align-items:flex-start}
  .wave{width:100%}
  main{padding:14px}
}

.ask{margin-top:12px;background:var(--panel-2);border-left:2px solid var(--accent);border-radius:0;padding:12px 14px}
.ask-q{font-size:13px;color:var(--text)}
.ask-why{font-size:11px;color:var(--muted);margin-top:4px}

/* Anneaux concentriques : des cadrans qui tournent a des vitesses differentes.
   Traits fins, opacite faible — ils encadrent la sphere sans lui voler la vedette. */
.rings{position:absolute;width:min(560px,58vw);height:min(560px,58vw);pointer-events:none}
.rings circle{fill:none;stroke:var(--accent);transform-origin:200px 200px}
.rings .r1{stroke-width:1;opacity:.16;stroke-dasharray:2 10;animation:spin 92s linear infinite}
.rings .r2{stroke-width:1;opacity:.22;stroke-dasharray:60 26;animation:spin 58s linear infinite reverse}
.rings .r3{stroke-width:1.5;opacity:.14;stroke-dasharray:6 6;animation:spin 130s linear infinite}
.rings .r4{stroke-width:1;opacity:.28;stroke-dasharray:120 340;animation:spin 34s linear infinite}

/* Halo sur ce qui compte : les chiffres et l'accent. */
.v,.big,.name{text-shadow:var(--glow)}
.sat{box-shadow:inset 0 0 24px rgba(0,217,255,.045)}
.sat.on,.sat.open{box-shadow:inset 0 0 30px rgba(0,217,255,.10),var(--glow-soft)}
.core{filter:drop-shadow(0 0 6px var(--accent))}

/* Coins en equerre : le detail qui fait lire un cadre comme un instrument. */
.sat::before,.sat::after{content:"";position:absolute;width:11px;height:11px;pointer-events:none;opacity:.55}
.sat::before{top:-1px;left:-1px;border-top:1px solid var(--accent);border-left:1px solid var(--accent)}
.sat::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--accent);border-right:1px solid var(--accent)}
.card::before,.card::after{content:"";position:absolute;width:11px;height:11px;pointer-events:none;opacity:.4}
.card{position:relative}
.card::before{top:-1px;left:-1px;border-top:1px solid var(--accent);border-left:1px solid var(--accent)}
.card::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--accent);border-right:1px solid var(--accent)}

.btn{letter-spacing:.04em}
.btn:hover{box-shadow:var(--glow-soft)}
.k{text-transform:lowercase;letter-spacing:.10em}

/* Champs de saisie de la memoire : meme grammaire visuelle que le reste. */
input,textarea{background:var(--bg-1);border:1px solid var(--line);color:var(--fg-0);
  font-family:var(--mono);font-size:13px;padding:9px 11px;border-radius:8px;width:100%;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--glow-soft)}
input::placeholder,textarea::placeholder{color:var(--fg-3)}