/* Vue Blue Ops — d'après maquettes/blue_view.png. PROTOTYPE JETABLE. */

:root {
  --fond: #06090d;
  --panneau: #0b1117;
  --trait: #1d2a33;
  --trait-vif: #2b3f4b;
  --texte: #c9d6de;
  --pale: #6b7f8c;
  --bleu: #3aa0ff;
  --vert: #37e07a;
  --jaune: #f3c23a;
  --rouge: #ff3b4a;
  --terminal: #4dff8a;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --etroit: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fond); color: var(--texte); overflow: hidden; }
body { font: 13px/1.35 var(--etroit); letter-spacing: .04em; }
button { font: inherit; color: inherit; }

.ecran {
  height: 100vh; display: grid; gap: 8px; padding: 8px;
  grid-template-columns: 84px 400px 1fr 440px;
  grid-template-rows: 64px 1fr 270px 20px;
  grid-template-areas:
    "tete    tete    tete     tete"
    "nav     carte   carte    dossier"
    "journal journal terminal dossier"
    "pied    pied    pied     pied";
  background: radial-gradient(ellipse at 40% 30%, #0c141b, var(--fond) 70%);
}

.panneau {
  position: relative; background: var(--panneau); border: 1px solid var(--trait);
  border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.015), 0 0 20px rgba(0,0,0,.6);
  min-height: 0; overflow: hidden;
}
.panneau > h2 {
  margin: 0; padding: 7px 12px; font-size: 12px; font-weight: 600; letter-spacing: .14em;
  border-bottom: 1px solid var(--trait); color: var(--texte); text-transform: uppercase;
}
.panneau > h2 small { color: var(--pale); font-weight: 400; }

/* ── en-tête ─────────────────────────────────────────────────────────────── */
.tete { grid-area: tete; display: flex; align-items: stretch; gap: 8px; }
.tete > * { background: var(--panneau); border: 1px solid var(--trait); border-radius: 3px; padding: 6px 14px; }
.marque h1 { margin: 0; font-size: 26px; letter-spacing: .22em; font-weight: 700; }
.marque h1 b { color: var(--bleu); font-weight: 700; }
.marque p { margin: 0; color: var(--pale); font-size: 11px; letter-spacing: .3em; }
.horloge { font-family: var(--mono); min-width: 190px; }
.horloge .h { font-size: 20px; }
.horloge p { margin: 0; color: var(--pale); font-size: 10px; letter-spacing: .15em; }
.vitesse { display: flex; align-items: center; gap: 4px; }
.vitesse button { background: #0f171e; border: 1px solid var(--trait-vif); padding: 6px 10px; cursor: pointer; font-family: var(--mono); }
.vitesse button.actif { background: #16324a; border-color: var(--bleu); color: #fff; }
.vitesse .compte { font-family: var(--mono); color: var(--pale); padding-left: 8px; }
.jauge { min-width: 160px; }
.jauge h3 { margin: 0 0 4px; font-size: 10px; letter-spacing: .15em; color: var(--pale); font-weight: 500; }
.jauge .rang { display: flex; align-items: center; gap: 8px; font-family: var(--mono); }
.piste { position: relative; flex: 1; height: 9px; background: #121c23; }
.piste i { position: absolute; left: 0; top: 0; bottom: 0; }
.piste .fantome { background: #fff; opacity: .7; }
.piste .barre { background: var(--vert); transition: width .15s linear, background .3s; }
.jauge.signaux { border-color: #5a1a20; }
.jauge.signaux h3 { color: var(--rouge); font-size: 16px; letter-spacing: .08em; }
.jauge.signaux .pips { display: flex; gap: 3px; }
.jauge.signaux .pips i { width: 12px; height: 6px; background: #2a1215; }
.jauge.signaux .pips i.on { background: var(--rouge); box-shadow: 0 0 6px var(--rouge); }
.slogan { margin-left: auto; font-size: 10px; color: var(--pale); letter-spacing: .12em; line-height: 1.3; }

/* ── nav ─────────────────────────────────────────────────────────────────── */
.nav { grid-area: nav; display: flex; flex-direction: column; gap: 4px; padding: 6px 0; }
.nav a { display: block; text-align: center; padding: 12px 4px; color: var(--pale); font-size: 10px; letter-spacing: .1em; text-decoration: none; position: relative; }
.nav a .ico { display: block; font-size: 20px; margin-bottom: 4px; }
.nav a.actif { color: var(--bleu); background: linear-gradient(90deg, rgba(58,160,255,.15), transparent); border-left: 2px solid var(--bleu); }
.nav a .pastille { position: absolute; top: 6px; right: 12px; background: var(--rouge); color: #fff; font-size: 10px; padding: 0 4px; border-radius: 2px; }

/* ── carte ───────────────────────────────────────────────────────────────── */
.carte { grid-area: carte; }
.carte svg { width: 100%; height: calc(100% - 30px); display: block; }
.carte .coin { position: absolute; font-family: var(--mono); font-size: 10px; color: #33505e; letter-spacing: .1em; line-height: 1.5; pointer-events: none; }
.lien { stroke: var(--vert); stroke-width: 1.6; fill: none; opacity: .8; }
.lien.pointille { stroke-dasharray: 5 5; stroke: #56707d; }
.lien.coupe { stroke: #3a2226; stroke-dasharray: 2 6; }
.paquet { fill: var(--vert); }
.paquet.sortant { fill: var(--rouge); }
.noeud { cursor: pointer; }
.noeud .cadre { fill: #0d151b; stroke: #5b7482; stroke-width: 1.5; transition: stroke .3s; }
.noeud:hover .cadre { stroke: #9cc; }
.noeud.choisi .cadre { stroke: var(--bleu); stroke-width: 2.2; }
.noeud .glyphe { fill: none; stroke: #c9d6de; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.noeud text { fill: var(--texte); font: 600 13px var(--etroit); letter-spacing: .08em; text-anchor: middle; }
.noeud text.ip { font: 11px var(--mono); fill: var(--pale); font-weight: 400; }
.noeud text.etat { font-size: 11px; font-weight: 500; }
.noeud.SAIN text.etat { fill: var(--vert); }
.noeud.SUSPECT .cadre, .noeud.COMPROMIS .cadre { stroke: var(--rouge); }
.noeud.SUSPECT text.etat { fill: var(--jaune); }
.noeud.COMPROMIS text.etat { fill: var(--rouge); }
.noeud.ISOLE { opacity: .55; }
.noeud.ISOLE .cadre { stroke: #888; stroke-dasharray: 4 3; }
.noeud.INCONNU .cadre, .noeud.TRACES .cadre { stroke-dasharray: 5 4; }
.noeud.TRACES .cadre { stroke: var(--jaune); }
.halo { fill: var(--rouge); opacity: 0; pointer-events: none; }

/* glitch du nœud : le système compromis se dégrade AVANT qu'on comprenne */
.noeud.parasite > g { animation: jx-noeud-glitch .16s steps(2, end) 2; }
@keyframes jx-noeud-glitch {
  0% { transform: translate(-3px, 0); filter: drop-shadow(3px 0 rgba(255,0,72,.9)) drop-shadow(-3px 0 rgba(0,238,255,.9)); }
  50% { transform: translate(4px, -1px); }
  100% { transform: translate(0, 0); filter: none; }
}

/* ── dossier actif ───────────────────────────────────────────────────────── */
.dossier { grid-area: dossier; display: flex; flex-direction: column; }
.dossier .corps { padding: 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.fiche { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; }
.fiche .ico { height: 76px; border: 1px solid var(--trait-vif); display: grid; place-items: center; font-size: 30px; }
.fiche h3 { margin: 0; font-size: 22px; letter-spacing: .06em; display: flex; justify-content: space-between; }
.fiche h3 small { font-size: 12px; color: var(--pale); font-weight: 400; }
.fiche h3 small b { font-size: 18px; margin-left: 6px; }
.fiche p { margin: 2px 0 0; color: var(--pale); font-family: var(--mono); font-size: 12px; }
.etat-SAIN { color: var(--vert); } .etat-SUSPECT { color: var(--jaune); }
.etat-COMPROMIS { color: var(--rouge); } .etat-ISOLE { color: #aaa; } .etat-INCONNU, .etat-TRACES { color: var(--jaune); }
.metrique { display: grid; grid-template-columns: 120px 1fr 64px; gap: 10px; align-items: center; font-size: 12px; }
.metrique .val { font-family: var(--mono); text-align: right; }
.metrique .piste .barre { background: var(--rouge); }
.metrique.trafic .piste .barre { background: repeating-linear-gradient(90deg, var(--jaune) 0 2px, transparent 2px 4px); }
.metrique.analyse .piste .barre { background: #3b5566; }

.action {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 11px 16px; background: #0e161c; border: 1px solid var(--trait-vif);
  font-size: 16px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; text-align: left;
  transition: background .12s, border-color .12s, transform .08s;
}
.action:hover { background: #13202a; border-color: #4f6b7a; }
.action .duree { margin-left: auto; font-family: var(--mono); font-size: 14px; color: var(--texte); text-transform: none; }
.action.danger { border-color: #8e2530; background: #1c0d10; }
.action.danger .duree { color: var(--rouge); }
.action[disabled] { opacity: .35; cursor: not-allowed; }
.action .avance { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--bleu); box-shadow: 0 0 8px var(--bleu); }
.occupe { font-size: 12px; color: var(--pale); border-left: 2px solid var(--pale); padding-left: 8px; min-height: 16px; }

.confirmation { border: 1px solid #8e2530; background: #1a0b0e; padding: 12px 14px; display: none; }
.confirmation.ouverte { display: block; animation: jx-deplie .18s ease-out; }
.confirmation h4 { margin: 0 0 4px; color: var(--rouge); letter-spacing: .08em; font-size: 14px; }
.confirmation p { margin: 0; font-size: 12px; }
.confirmation p b { color: var(--rouge); font-family: var(--mono); }
.confirmation .boutons { margin-top: 8px; display: flex; gap: 8px; justify-content: flex-end; }
.confirmation button { padding: 6px 14px; border: 1px solid #8e2530; background: transparent; cursor: pointer; position: relative; overflow: hidden; }
.confirmation button.oui { background: #c0212f; border-color: #e0303f; color: #fff; }
@keyframes jx-deplie { from { transform: scaleY(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── journal ─────────────────────────────────────────────────────────────── */
.journal { grid-area: journal; }
.onglets { display: flex; font-size: 11px; letter-spacing: .12em; border-bottom: 1px solid var(--trait); }
.onglets button { background: none; border: 0; padding: 6px 12px; color: var(--pale); cursor: pointer; }
.onglets button.actif { color: var(--texte); background: #121c23; }
.onglets button.critique { color: var(--rouge); }
.lignes { list-style: none; margin: 0; padding: 4px 8px; font-family: var(--mono); font-size: 12px; overflow: hidden; height: calc(100% - 64px); }
.lignes li { display: grid; grid-template-columns: 14px 48px 80px 1fr; gap: 6px; padding: 2px 4px; white-space: nowrap; }
.lignes li .p { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; }
.lignes li.info .p { background: var(--vert); }
.lignes li.alerte .p { background: var(--jaune); }
.lignes li.critique .p { background: var(--rouge); }
.lignes li.succes .p { background: var(--bleu); }
.lignes li .src { color: var(--jaune); overflow: hidden; }
.lignes li.nouveau { animation: jx-entree .5s cubic-bezier(.2,.9,.3,1.2); }
.lignes li.nouveau.critique { animation: jx-entree .5s cubic-bezier(.2,.9,.3,1.2), jx-allume 1.4s ease-out; }
@keyframes jx-entree { from { transform: translateX(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes jx-allume { 0%, 30% { background: rgba(255,59,74,.35); } 100% { background: transparent; } }

/* ── terminal ────────────────────────────────────────────────────────────── */
.terminal { grid-area: terminal; display: grid; grid-template-columns: 1fr 130px; grid-template-rows: auto 1fr; }
.terminal > h2 { grid-column: 1 / -1; }
.tube { margin: 8px; border-radius: 10px; background: #020604; border: 1px solid #16301f; box-shadow: inset 0 0 40px rgba(0,0,0,.9), 0 0 16px rgba(77,255,138,.07); padding: 8px 10px; position: relative; overflow: hidden; }
.tube::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.18) 2px 3px); }
.tube .chrono { position: absolute; right: 16px; top: 8px; z-index: 2; font: 20px var(--mono); color: var(--terminal); }
.tube .chrono.presse { color: var(--rouge); animation: jx-pouls .5s ease-in-out infinite; }
@keyframes jx-pouls { 50% { transform: scale(1.12); text-shadow: 0 0 10px var(--rouge); } }
#xterm { height: 100%; }
.xterm .xterm-viewport { background: transparent !important; }
.raccourcis { margin: 8px 8px 8px 0; border: 1px solid var(--trait); padding: 8px 10px; font-family: var(--mono); font-size: 12px; color: var(--pale); }
.raccourcis h5 { margin: 0 0 6px; font-size: 10px; letter-spacing: .12em; font-weight: 500; }
.raccourcis div { cursor: pointer; padding: 1px 0; }
.raccourcis div:hover { color: var(--terminal); }

.pied { grid-area: pied; display: flex; gap: 18px; font-size: 10px; color: var(--pale); letter-spacing: .12em; align-items: center; padding: 0 6px; }
.pied .droite { margin-left: auto; }

/* ── juice transverse ────────────────────────────────────────────────────── */
.jx-voile { position: fixed; inset: 0; pointer-events: none; opacity: 0; z-index: 45; mix-blend-mode: screen; }
.jx-bond { animation: jx-bond .35s cubic-bezier(.3,1.8,.5,1); display: inline-block; }
@keyframes jx-bond { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
.jx-presse { animation: jx-presse .18s ease-out; }
@keyframes jx-presse { 40% { transform: scale(.965); } 100% { transform: none; } }
.jx-onde { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: rgba(255,255,255,.35); pointer-events: none; animation: jx-onde .55s ease-out forwards; }
@keyframes jx-onde { to { transform: scale(60); opacity: 0; } }
.jx-refus { animation: jx-refus .3s; }
@keyframes jx-refus { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ── banc de réglage ─────────────────────────────────────────────────────── */
.banc { position: fixed; right: 12px; bottom: 34px; z-index: 100; width: 320px; max-height: 80vh; overflow: auto;
  background: rgba(8,12,16,.96); border: 1px solid var(--bleu); padding: 12px 14px; font-size: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,.8); }
.banc[hidden] { display: none; }
.banc h3 { margin: 0 0 8px; font-size: 12px; letter-spacing: .15em; color: var(--bleu); }
.banc label { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; cursor: pointer; }
.banc label small { color: var(--pale); display: block; font-size: 10px; }
.banc .gain { display: flex; gap: 8px; align-items: center; margin: 6px 0 10px; font-family: var(--mono); }
.banc .gain input { flex: 1; }
.banc .declencheurs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 10px; }
.banc .declencheurs button { background: #0f171e; border: 1px solid var(--trait-vif); padding: 5px; cursor: pointer; font-size: 11px; }
.banc .aide { color: var(--pale); font-size: 10px; margin-top: 8px; line-height: 1.5; }
.banc kbd { font-family: var(--mono); border: 1px solid var(--trait-vif); padding: 0 4px; }

.fin { position: fixed; inset: 0; display: grid; place-items: center; z-index: 80; background: rgba(0,0,0,.7); }
.fin[hidden] { display: none; }
.fin div { border: 1px solid var(--rouge); background: #120709; padding: 28px 40px; text-align: center; }
.fin h2 { color: var(--rouge); letter-spacing: .2em; margin: 0 0 8px; }
.fin button { margin-top: 14px; padding: 8px 18px; background: #c0212f; border: 0; color: #fff; cursor: pointer; }