/* ============================================================
   JARVIS : « Verre de régie » + noyau HUD (Claude Code, 27/09/2026)
   Choix d'Alexandre : la direction B (verre en trois épaisseurs, calme et lisible)
   avec un noyau « vraiment orienté A » (réacteur HUD de la Visière, assets/noyau.js).
   Maquettes : https://claude.ai/artifact/EtDnWQpoMSBh7Wt8HLgdWm
   Chargée en DERNIER, active sous html.rt (interrupteur « Design » des Réglages).
   Sélecteurs préfixés par #app : ils passent devant les règles de classe plus anciennes
   sans !important, sauf là où l'ancienne règle en porte un.
   1. Jetons  2. Matières  3. Barre du haut  4. Commande  5. Boutons  6. Noyau
   7. Accueil  8. Composants des pages  9. Mouvement réduit et machines modestes
   ============================================================ */

/* ---------- 1. Jetons ---------- */
/* Jetons du verre : toujours disponibles (l'accueil, le noyau et les missions en dépendent, interrupteur coupé ou non). */
#app {
  --v-night: #07080b;
  --v-white: #f5f3ef;
  --v-text-2: rgba(245, 243, 239, .8);
  --v-gray: #a3a8b0;
  --v-orange: #ff8a2c;
  --v-hot: #ffbe85;
  --v-gold: #ebc98c;
  --v-fail: #ff6b5a;
  --v-ok: #9ed9b0;
  --v-enter: cubic-bezier(.22, 1, .36, 1);
  --v-move: cubic-bezier(.25, 1, .5, 1);
  --v-sine: cubic-bezier(.37, 0, .63, 1);
  --v-voile: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .045) 30%, rgba(255, 255, 255, .04)), linear-gradient(rgba(9, 10, 14, .5), rgba(9, 10, 14, .5));
  --v-voile-fx: blur(30px) saturate(150%) brightness(.6);
  --v-plaque: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .06) 34%, rgba(255, 255, 255, .045)), linear-gradient(rgba(10, 11, 15, .5), rgba(10, 11, 15, .5));
  --v-plaque-fx: blur(22px) saturate(160%) brightness(.62);
  --v-pastille: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .1) 45%, rgba(255, 255, 255, .09)), linear-gradient(rgba(10, 11, 15, .46), rgba(10, 11, 15, .46));
  --v-pastille-fx: blur(16px) saturate(150%) brightness(.56);
  --v-fume: linear-gradient(180deg, rgba(26, 27, 32, .72), rgba(14, 15, 19, .78));
  --v-ombre-plaque: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 0 0 1px rgba(255, 255, 255, .075), inset 0 -1px 0 rgba(0, 0, 0, .2), 0 1px 2px rgba(0, 0, 0, .28), 0 18px 44px -20px rgba(0, 0, 0, .6), 0 50px 110px -50px rgba(0, 0, 0, .55);
  --v-ombre-pastille: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px -14px rgba(0, 0, 0, .6);
  --v-ombre-fume: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 14px 34px -18px rgba(0, 0, 0, .6);
}
/* Palette et police de la direction B : seulement avec le design actif (html.rt). */
html.rt #app {
  --font-ui: "Geist", "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  /* Trois épaisseurs de verre : voile (fond), plaque (panneaux), pastille (commandes). */
  /* Verre fumé sans flou : les cartes à l'intérieur d'un panneau (un seul flou par groupe). */
  /* Palette de la direction B : or pâle pour l'information, orange pour l'action et la validation.
     Les anciens jetons cyan pointent désormais vers l'or pâle. */
  --jarvis-primary: #ebc98c;
  --jarvis-primary-strong: #fff1d6;
  --jarvis-primary-soft: rgba(235, 201, 140, .12);
  --jarvis-primary-glow: rgba(235, 201, 140, .3);
  --jarvis-text: #f5f3ef;
  --jarvis-text-muted: #b6bac0;
  --jarvis-text-dim: #9aa0a8;
  --jarvis-success: #9ed9b0;
  --jarvis-warning: #ffbe85;
  --jarvis-danger: #ff6b5a;
  --jarvis-border-active: rgba(235, 201, 140, .45);
  --cin-cyan: #ebc98c;
  --cin-cyan-light: #fff1d6;
  font-family: var(--font-ui);
  color: var(--v-white);
  -webkit-font-smoothing: antialiased;
}
html.rt { --topnav-h: 60px; }

/* Grain de film très fin : évite l'effet plastique du verre (calque fixe, jamais cliquable). */
html.rt #app::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* Pages : un seul décor, la vallée dorée sous un voile de nuit chaud (plus de voile bleu).
   L'accueil garde l'ombrage d'origine de cinematic.css. */
html.rt body:not(.cinematic-home-active) { background: #07080b; }
html.rt body:not(.cinematic-home-active) .env__shade {
  background:
    radial-gradient(ellipse 90% 80% at 50% 42%, rgba(7, 8, 11, .38), rgba(7, 8, 11, .8) 100%),
    linear-gradient(180deg, rgba(7, 8, 11, .64), rgba(7, 8, 11, .46)) !important;
}

html.rt body.cinematic-home-active .env__shade {
  background:
    linear-gradient(180deg, rgba(7, 8, 11, .86) 0%, rgba(7, 8, 11, .42) 24%, rgba(9, 8, 8, .22) 46%, rgba(9, 8, 8, .5) 68%, rgba(7, 8, 11, .9) 100%),
    radial-gradient(ellipse 80% 60% at 50% 46%, rgba(7, 8, 11, 0) 40%, rgba(7, 8, 11, .45) 100%) !important;
}

/* ---------- 2. Matières (utilisables partout) ---------- */
html.rt #app .v-plaque { background: var(--v-plaque); -webkit-backdrop-filter: var(--v-plaque-fx); backdrop-filter: var(--v-plaque-fx); box-shadow: var(--v-ombre-plaque); }
html.rt #app .v-pastille { background: var(--v-pastille); -webkit-backdrop-filter: var(--v-pastille-fx); backdrop-filter: var(--v-pastille-fx); box-shadow: var(--v-ombre-pastille); }
/* Liseré spéculaire : la lumière suit le curseur sur le bord (motion.js pose --mx et --my). */
html.rt #app .vstat::before { display: none !important; }
html.rt #app :is([data-light], .panel)::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background:
    radial-gradient(220px circle at var(--mx, 30%) var(--my, -20%), rgba(255, 255, 255, .8), rgba(255, 255, 255, .22) 34%, rgba(255, 255, 255, 0) 66%),
    linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .06) 28%, rgba(255, 255, 255, .03) 70%, rgba(255, 255, 255, .1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 1;
}

/* ---------- 3. Barre du haut : marque et outils sans fond, menu en pilule de verre ---------- */
html.rt #app .sysbar {
  border-bottom: 0 !important;
  background: linear-gradient(180deg, rgba(7, 8, 11, .9), rgba(7, 8, 11, .55)) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important;
}
html.rt #app .sysbar .mono { font-family: var(--font-mono); }
html.rt #app .sysbar__brand > .mono { font: 600 14px/1 var(--font-ui); letter-spacing: .22em; }
html.rt #app .sysbar__state { font: 400 13px/1 var(--font-ui) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--v-text-2); }
html.rt #app .sysbar__tag { border-radius: 5px; font: 500 10px/1 var(--font-mono); letter-spacing: .12em; color: var(--v-gold); border-color: rgba(235, 201, 140, .42); background: transparent; }
html.rt #app #sysClock { font: 500 14px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--v-white); }
html.rt #app .iconbtn__badge { min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; font: 600 11px/17px var(--font-mono); background: var(--v-orange); color: #1a0d03; box-shadow: 0 0 0 2px rgba(10, 10, 14, .85), 0 0 12px rgba(255, 138, 44, .55); }
@media (min-width: 981px) {
  html.rt #app :is(#sysIndicators, #sysSession, #sysLatency) { display: none !important; }
}

html.rt #app .rail {
  justify-content: center; gap: 0 !important;
  background: linear-gradient(180deg, rgba(7, 8, 11, .55), rgba(7, 8, 11, 0)) !important;
  border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important;
}
html.rt #app .rail::before, html.rt #app .rail::after { display: none !important; }
/* Libellés du compte masqués visuellement mais lus par les lecteurs d'écran (« Déconnexion »). */
html.rt #app .rail__bottom .rail__label { display: inline !important; position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
html.rt #app .rail__nav {
  position: relative; flex: 0 1 auto !important; max-width: calc(100vw - 220px);
  height: 48px; padding: 5px !important; border-radius: 999px;
  background: var(--v-plaque); -webkit-backdrop-filter: var(--v-plaque-fx); backdrop-filter: var(--v-plaque-fx); box-shadow: var(--v-ombre-plaque);
}
html.rt #app .rail__nav > .navpill {
  position: absolute; left: 0; top: 0; z-index: 0; width: 80px; height: 38px; border-radius: 999px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .15) 55%, rgba(255, 255, 255, .14));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 1px 1px rgba(0, 0, 0, .2), 0 6px 14px -6px rgba(0, 0, 0, .5);
  transition: transform 220ms var(--v-move), width 220ms var(--v-move), opacity 160ms var(--v-move);
}
html.rt #app .railgroup { position: static; z-index: 1; margin: 0 4px 0 0 !important; padding: 0 4px 0 0 !important; border-right: 1px solid rgba(255, 255, 255, .09) !important; }
html.rt #app .railgroup:last-child { margin-right: 0 !important; padding-right: 0 !important; border-right: 0 !important; }
html.rt #app .rail__nav .rail__item {
  position: relative; z-index: 1; min-height: 38px !important; height: 38px; padding: 0 10px !important; gap: 6px;
  border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important;
  font: 400 13.5px/1 var(--font-ui) !important; letter-spacing: 0 !important; color: rgba(245, 243, 239, .76) !important;
  transition: color 160ms var(--v-move), scale 120ms var(--v-enter);
}
html.rt #app .rail__nav .rail__item::before, html.rt #app .rail__nav .rail__item::after { display: none !important; }
html.rt #app .rail__nav .rail__item > i { display: none; }
html.rt #app .rail__nav .rail__item:hover, html.rt #app .rail__nav .rail__item:focus-visible { color: var(--v-white) !important; }
html.rt #app .rail__nav .rail__item.is-active { color: var(--v-white) !important; font-weight: 500 !important; }
html.rt #app .rail__nav .rail__item.is-active .rail__label { font-weight: 500; }
html.rt #app .rail__nav .rail__item:active { scale: .97; }
html.rt #app .rail__nav .rail__item:focus-visible { outline: 2px solid var(--v-orange); outline-offset: -2px; }
html.rt #app .rail__count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 0 !important;
  border: 0 !important; border-radius: 999px; font: 500 11px/1 var(--font-mono); letter-spacing: 0;
  background: rgba(255, 255, 255, .14) !important; color: var(--v-white) !important;
}
html.rt #app .rail__item[data-page="approvals"] .rail__count, html.rt #app .rail__item[data-page="validations"] .rail__count { background: var(--v-orange) !important; color: #1a0d03 !important; }
html.rt #app .rail__bottom { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); border-left: 0 !important; padding-left: 0 !important; }
html.rt #app .rail__bottom .rail__item { min-height: 38px; width: 38px; padding: 0 !important; justify-content: center; border-radius: 50%; }
html.rt #app .rail__avatar {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  font: 500 14px/1 var(--font-ui); color: #1b1108;
  background: radial-gradient(circle at 32% 26%, #fbead0, #d9ae72 52%, #8a6036);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 1px rgba(255, 255, 255, .2), 0 6px 16px -6px rgba(0, 0, 0, .6);
}
@media (min-width: 981px) {
  html.rt #app .rail__profile .rail__label { display: none !important; }
}

/* ---------- 4. Commande « Parle à JARVIS… » : pastille de verre, Envoyer = bouton dans le bouton ---------- */
html.rt #app .command {
  min-height: 56px; padding: 0 6px 0 10px; gap: 6px; overflow: visible;
  border: 0 !important; border-radius: 999px !important; clip-path: none !important;
  background: var(--v-pastille) !important; -webkit-backdrop-filter: var(--v-pastille-fx) !important; backdrop-filter: var(--v-pastille-fx) !important;
  box-shadow: var(--v-ombre-pastille) !important;
  transition: box-shadow 200ms var(--v-move);
}
html.rt #app .command::before { content: none !important; }
html.rt #app .command:focus-within { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36), inset 0 0 0 1px rgba(255, 190, 130, .5), 0 0 0 4px rgba(255, 138, 44, .14), 0 14px 34px -14px rgba(0, 0, 0, .6) !important; }
html.rt #app .command__input { font: 400 16px/1 var(--font-ui) !important; letter-spacing: -.005em; color: var(--v-white); }
html.rt #app .command__input::placeholder { color: rgba(245, 243, 239, .72); }
html.rt #app .command__aux { width: 40px; height: 40px; border-radius: 50%; color: var(--v-white); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
html.rt #app .command__send {
  display: inline-flex !important; flex-direction: row-reverse; align-items: center; gap: 12px;
  width: auto !important; min-width: 0; height: 44px; padding: 0 4px 0 18px !important; border: 0; border-radius: 999px !important;
  font: 500 15px/1 var(--font-ui) !important; letter-spacing: -.005em; color: #1a0d03 !important; white-space: nowrap;
  background: linear-gradient(180deg, #ffa252, #ff8a2c 55%, #f27818) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(120, 40, 0, .22), 0 10px 24px -12px rgba(255, 138, 44, .75), 0 2px 6px rgba(0, 0, 0, .3) !important;
  transition: translate 200ms var(--v-move), scale 120ms var(--v-enter), filter 160ms var(--v-move);
}
html.rt #app .command__send::after { content: "Envoyer" !important; }
html.rt #app .command__send > i {
  display: grid !important; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: 17px; color: #1a0d03;
  background: rgba(26, 13, 3, .14); box-shadow: inset 0 0 0 1px rgba(26, 13, 3, .1), inset 0 -1px 0 rgba(255, 255, 255, .2);
  rotate: 90deg; transition: translate 220ms var(--v-move);
}
html.rt #app .command__send:hover { translate: 0 -1px; }
html.rt #app .command__send:hover > i { translate: 0 -3px; }
html.rt #app .command__send:active { scale: .97; }
html.rt #app .command__send:disabled { filter: saturate(.3) brightness(.7); }
html.rt body.cinematic-home-active #app .core.core--slot .command { min-height: 56px; margin-top: 0; }

/* ---------- 5. Boutons ---------- */
html.rt #app .btn, #app .vbtn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 16px; border: 0 !important; border-radius: 999px !important; clip-path: none !important;
  font: 500 14px/1 var(--font-ui) !important; letter-spacing: -.005em !important; text-transform: none !important; white-space: nowrap; cursor: pointer;
  color: var(--v-white); background: rgba(255, 255, 255, .08) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .12) !important;
  transition: translate 200ms var(--v-move), scale 120ms var(--v-enter), background-color 160ms var(--v-move);
}
html.rt #app .btn:hover, #app .vbtn:hover { translate: 0 -1px; background: rgba(255, 255, 255, .13) !important; }
html.rt #app .btn:active, #app .vbtn:active { scale: .98; }
html.rt #app .btn:focus-visible, #app .vbtn:focus-visible { outline: 2px solid var(--v-orange); outline-offset: 2px; }
html.rt #app .btn--primary, #app .vbtn--primary {
  color: #1a0d03 !important; background: linear-gradient(180deg, #ffa252, #ff8a2c 55%, #f27818) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(120, 40, 0, .22), 0 10px 22px -12px rgba(255, 138, 44, .8) !important;
}
html.rt #app .btn--primary:hover, #app .vbtn--primary:hover { background: linear-gradient(180deg, #ffad66, #ff9238 55%, #f5801f) !important; }
html.rt #app .btn--ghost, #app .vbtn--ghost { background: transparent !important; }
#app .vbtn--link { padding: 0 6px; margin-left: auto; background: transparent !important; box-shadow: none !important; color: var(--v-gray); }
#app .vbtn--link:hover { color: var(--v-white); background: transparent !important; }
/* Icône dans son propre cercle, qui glisse au survol. */
#app .vbtn > i { display: grid; place-items: center; width: 28px; height: 28px; margin-right: -10px; border-radius: 50%; font-size: 15px; background: rgba(255, 255, 255, .1); transition: translate 220ms var(--v-move); }
#app .vbtn--primary > i { background: rgba(26, 13, 3, .14); }
#app .vbtn:hover > i { translate: 3px 0; }
html.rt #app .btn[disabled], html.rt #app .vbtn[disabled] { opacity: .55; cursor: default; translate: none; }

/* ---------- 6. Noyau : réacteur HUD de la direction A (assets/noyau.js) ---------- */
#app .nv {
  --nv-c: #f2eee6; --nv-rgb: 242, 238, 230;
  position: relative; flex: none; width: var(--nv, 360px); aspect-ratio: 1; pointer-events: none;
  translate: calc(var(--px, 0) * 6px) calc(var(--py, 0) * 4px); transition: translate 280ms var(--v-move);
}
#app .nv[data-etat="gate"] { --nv-c: #ff8a2c; --nv-rgb: 255, 138, 44; }
#app .nv[data-etat="anomalie"] { --nv-c: #ff6b5a; --nv-rgb: 255, 107, 90; }
#app .nv > * { position: absolute; display: block; }
#app .nv__bloom { inset: -9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--nv-rgb), .1), rgba(var(--nv-rgb), .04) 60%, transparent); }
#app .nv[data-etat="ecoute"] .nv__bloom { background: radial-gradient(closest-side, rgba(var(--nv-rgb), .16), rgba(var(--nv-rgb), .06) 60%, transparent); }
#app .nv__svg { inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 3; }
#app .nv__core { z-index: 1; left: 29.545%; top: 29.545%; width: 40.909%; height: 40.909%; }
#app .nv__glow {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(5, 7, 10, .92) 0 54%, rgba(var(--nv-rgb), .16) 61%, rgba(var(--nv-rgb), .85) 68.5%, rgba(var(--nv-rgb), .3) 73%, rgba(var(--nv-rgb), .08) 84%, transparent 100%);
  animation: nv-breath 4.4s var(--v-sine) infinite alternate;
}
/* Lentille de verre (direction B) : reflet qui suit la tête, sans flou coûteux. */
#app .nv__lens {
  z-index: 2; left: 29.1%; top: 29.1%; width: 41.8%; height: 41.8%; border-radius: 50%;
  background: radial-gradient(38% 24% at 36% 24%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 72%), radial-gradient(52% 17% at 50% 95%, rgba(255, 214, 160, .2), rgba(255, 214, 160, 0) 78%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 2px 1px -1px rgba(255, 255, 255, .45), inset 0 -14px 26px -10px rgba(var(--nv-rgb), .3);
  translate: calc(var(--px, 0) * -3px) calc(var(--py, 0) * -2px);
}
#app .nv__scan {
  left: 5.4545%; top: 5.4545%; width: 89.09%; height: 89.09%; border-radius: 50%; opacity: 0;
  background: conic-gradient(from 0deg, rgba(var(--nv-rgb), 0) 0deg 292deg, rgba(var(--nv-rgb), .05) 318deg, rgba(var(--nv-rgb), .22) 356deg, rgba(var(--nv-rgb), .75) 359.4deg, rgba(var(--nv-rgb), 0) 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 0 32%, #000 38%, #000 99%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 0 32%, #000 38%, #000 99%, transparent 100%);
  transition: opacity 200ms var(--v-move);
}
#app .nv__waves, #app .nv__pulses { inset: 0; }
#app :is(.nv__waves, .nv__pulses) > i {
  position: absolute; left: 5.4545%; top: 5.4545%; width: 89.09%; height: 89.09%; border-radius: 50%;
  border: 2px solid rgba(var(--nv-rgb), .95); box-shadow: 0 0 14px rgba(var(--nv-rgb), .55), inset 0 0 14px rgba(var(--nv-rgb), .35);
  opacity: 0; transform: scale(.34);
}
#app .nv__center {
  z-index: 4; left: 31.8%; top: 38.2%; width: 36.4%; height: 23.6%;
  display: grid; place-content: center; justify-items: center; gap: 5px; text-align: center;
}
#app .nv__k { font: 500 max(10px, calc(var(--nv, 360px) * .024))/1 var(--font-mono); letter-spacing: .34em; padding-left: .34em; color: rgba(242, 238, 230, .82); }
#app .nv__ok { font: 500 calc(var(--nv, 360px) * .104)/.9 var(--font-ui); letter-spacing: .02em; color: var(--nv-c); text-shadow: 0 0 18px rgba(var(--nv-rgb), .45); }
#app .nv__st { font: 500 max(10px, calc(var(--nv, 360px) * .024))/1 var(--font-mono); letter-spacing: .14em; padding-left: .14em; text-transform: uppercase; color: var(--nv-c); }

/* Traits du réacteur (SVG généré) */
#app .nv-c { fill: none; stroke: var(--nv-c); stroke-opacity: .3; stroke-width: 1; }
#app .nv-c--hi { stroke-opacity: .55; }
#app .nv-c--rim { stroke-opacity: .8; stroke-width: 1.25; }
#app .nv-tk { stroke: var(--nv-c); stroke-opacity: .36; stroke-width: 1; }
#app .nv-tk--l { stroke-opacity: .85; }
#app .nv-tkc { stroke: var(--nv-c); stroke-width: 1.75; opacity: 0; }
#app .nv-deg { font-family: var(--font-mono); font-weight: 500; letter-spacing: .08em; fill: rgba(242, 238, 230, .82); }
#app .nv--compact .nv-deg { display: none; }
#app .nv-seg { transform-origin: 220px 220px; animation: nv-rot 96s linear infinite; }
#app .nv-segp { fill: none; stroke: var(--nv-c); stroke-opacity: .3; stroke-width: 5; }
#app .nv-segp--hi { stroke-opacity: .72; }
#app .nv-segt { fill: none; stroke: var(--nv-c); stroke-opacity: .5; stroke-width: 1; }
#app .nv-dashr { transform-origin: 220px 220px; animation: nv-rot 60s linear infinite reverse; }
#app .nv-dash { fill: none; stroke: var(--nv-c); stroke-opacity: .55; stroke-width: 2; stroke-dasharray: 1 5.28; }
#app .nv-coil { fill: rgba(var(--nv-rgb), .05); stroke: var(--nv-c); stroke-opacity: .5; stroke-width: 1; }
#app .nv-wind { stroke: var(--nv-c); stroke-opacity: .32; stroke-width: 1; }
#app .nv-gtrack { fill: none; stroke: var(--nv-c); stroke-opacity: .2; stroke-width: 1; }
#app .nv-gtk { stroke: var(--nv-c); stroke-opacity: .5; stroke-width: 1; }
#app .nv-prog { fill: none; stroke: var(--nv-c); stroke-width: 3; stroke-opacity: .5; stroke-dasharray: var(--p) 2; }
#app .nv-imp { fill: none; stroke: #fff8ec; stroke-width: 3; stroke-dasharray: .07 2; stroke-dashoffset: .07; opacity: 0; }
#app .nv-mark { fill: #ff8a2c; opacity: 0; transition: opacity 200ms var(--v-move); }
#app .nv-markb { fill: none; stroke: #ff8a2c; stroke-width: 1; opacity: 0; transition: opacity 200ms var(--v-move); }

/* États : chacun se voit en mouvement, pas seulement en couleur. */
#app .nv[data-etat="analyse"] .nv__scan { opacity: 1; animation: nv-rot 2.4s linear infinite; }
#app .nv[data-etat="analyse"] .nv-tkc { animation: nv-chase 2.4s linear infinite; animation-delay: calc(var(--i) * 2.4s / 72 - 2.4s); }
#app .nv[data-etat="exec"] .nv-prog, #app .nv[data-etat="gate"] .nv-prog { stroke-opacity: 1; }
#app .nv[data-etat="exec"] .nv-prog { animation: nv-fill 280ms var(--v-move) both; }
#app .nv[data-etat="exec"] .nv-imp { opacity: 1; animation: nv-imp 1.4s var(--v-move) .3s infinite; }
#app .nv[data-etat="exec"] .nv__waves > i { animation: nv-wave 1.8s linear infinite; }
#app .nv[data-etat="exec"] .nv__waves > i:nth-child(2) { animation-delay: .6s; }
#app .nv[data-etat="exec"] .nv__waves > i:nth-child(3) { animation-delay: 1.2s; }
#app .nv[data-etat="parle"] .nv__waves > i { animation: nv-wave 3.2s linear infinite; }
#app .nv[data-etat="parle"] .nv__waves > i:nth-child(2) { animation-delay: 1.6s; }
#app .nv[data-etat="gate"] .nv__pulses > i { animation: nv-pulse 2s linear infinite; }
#app .nv[data-etat="gate"] .nv__pulses > i:nth-child(2) { animation-delay: .26s; }
#app .nv[data-etat="gate"] .nv__glow { animation: nv-beat 2s var(--v-move) infinite; }
#app .nv[data-etat="gate"] :is(.nv-seg, .nv-dashr), #app .nv[data-etat="anomalie"] :is(.nv-seg, .nv-dashr) { animation-play-state: paused; }
#app .nv[data-etat="gate"] :is(.nv-mark, .nv-markb) { opacity: 1; }
/* Changement d'état : la projection scintille deux images (240 ms). */
#app .nv--flick > :is(.nv__bloom, .nv__core, .nv__lens, .nv__svg, .nv__center) { animation: nv-flick 240ms var(--v-enter) both; }

@keyframes nv-rot { to { transform: rotate(360deg); } }
@keyframes nv-flick { 0% { opacity: 0; } 30% { opacity: .7; } 55% { opacity: .25; } 100% { opacity: 1; } }
@keyframes nv-breath { from { opacity: .72; transform: scale(.975); } to { opacity: 1; transform: scale(1.02); } }
@keyframes nv-beat { 0% { opacity: .8; transform: scale(1); } 5% { opacity: 1; transform: scale(1.07); } 12% { opacity: .82; transform: scale(1); } 18% { opacity: 1; transform: scale(1.06); } 28% { opacity: .8; transform: scale(1); } 100% { opacity: .8; transform: scale(1); } }
@keyframes nv-pulse { 0% { opacity: 0; transform: scale(.34); } 3% { opacity: 1; transform: scale(.42); } 22% { opacity: .7; transform: scale(1.02); } 34% { opacity: 0; transform: scale(1.28); } 100% { opacity: 0; transform: scale(1.28); } }
@keyframes nv-wave { 0% { opacity: 0; transform: scale(.34); } 8% { opacity: .9; transform: scale(.42); } 62% { opacity: .6; transform: scale(1.02); } 100% { opacity: 0; transform: scale(1.32); } }
@keyframes nv-chase { 0% { opacity: 1; } 20% { opacity: 0; } 100% { opacity: 0; } }
@keyframes nv-fill { from { stroke-dashoffset: var(--p); } to { stroke-dashoffset: 0; } }
@keyframes nv-imp { from { stroke-dashoffset: .07; } to { stroke-dashoffset: calc(.07 - var(--p)); } }

/* ---------- 7. Accueil : réacteur au centre, lectures de part et d'autre, trois ornements ---------- */
#app .vh {
  --nv: clamp(250px, 37vh, 400px);
  position: relative; display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
  grid-template-areas: "l c r" "o o o";
  align-items: center; column-gap: clamp(20px, 3.4vw, 56px); row-gap: clamp(12px, 2.2vh, 24px);
  min-height: calc(100dvh - var(--sysbar-h) - var(--topnav-h) - 40px);
  padding: 0 clamp(16px, 2.4vw, 40px) 14px;
}
#app .vh-side--l { grid-area: l; justify-self: end; }
#app .vh-side--r { grid-area: r; justify-self: start; }
#app .vh-center { grid-area: c; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
/* Pénombre derrière le réacteur : les traits restent lisibles sur le ciel doré. */
#app .vh-center::before {
  content: ""; position: absolute; left: 50%; top: calc(var(--nv) * .5); width: calc(var(--nv) * 1.9); height: calc(var(--nv) * 1.9);
  translate: -50% -50%; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(5, 6, 8, .78), rgba(5, 6, 8, .5) 55%, rgba(5, 6, 8, 0));
}
#app .vh-state { display: grid; gap: 4px; max-width: min(640px, 80vw); text-align: center; }
#app .vh-state__t { margin: 0; font: 500 26px/1.2 var(--font-ui); letter-spacing: -.02em; color: var(--v-white); text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
#app .vh--gate .vh-state__t { color: #ffc896; }
#app .vh-state__s { margin: 0; font: 400 15px/1.45 var(--font-ui); color: var(--v-text-2); text-wrap: balance; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
#app .vh .rvh-cmdslot { display: block; width: min(640px, 92vw); height: 56px; margin-top: 6px; }

/* Lectures latérales (le HUD à 20 %) */
#app .vh-tele { position: relative; display: grid; gap: 18px; margin: 0; }
#app .vh-side--l .vh-tele { padding-right: 18px; text-align: right; }
#app .vh-side--r .vh-tele { padding-left: 18px; }
#app .vh-tele::before { content: ""; position: absolute; top: 2px; bottom: 2px; width: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .26) 30%, rgba(255, 255, 255, .26) 70%, rgba(255, 255, 255, 0)); }
#app .vh-side--l .vh-tele::before { right: 0; }
#app .vh-side--r .vh-tele::before { left: 0; }
#app .vh-tele::after { content: ""; position: absolute; top: 50%; width: 36px; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .05)); }
#app .vh-side--l .vh-tele::after { right: -36px; }
#app .vh-side--r .vh-tele::after { left: -36px; transform: scaleX(-1); }
#app .vh-tele dt { font: 500 10.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--v-gray); }
#app .vh-tele dd { margin: 7px 0 0; font: 400 15px/1.2 var(--font-ui); color: var(--v-white); white-space: nowrap; text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
#app .vh-tele dd .mono { font-variant-numeric: tabular-nums; }
#app .vh-tele dd.is-ok::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--v-gold); box-shadow: 0 0 0 3px rgba(235, 201, 140, .16), 0 0 10px rgba(235, 201, 140, .5); vertical-align: 1px; }
#app .vh-tele dd.is-bad { color: var(--v-fail); }
#app .vh-tele dd.is-hot { color: var(--v-hot); }

/* Ornements : double bezel (coque 6 px + cœur de verre), rayons concentriques 28 / 22. */
#app .vh-orns { grid-area: o; display: flex; justify-content: center; align-items: stretch; gap: 20px; }
#app .vh-orn {
  position: relative; flex: 0 1 360px; min-width: 0; padding: 6px; border-radius: 28px;
  background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -30px rgba(0, 0, 0, .6);
  transition: translate 220ms var(--v-move), scale 240ms var(--v-move);
}
#app .vh-orn--dec { flex-basis: 460px; }
#app .vh-orn:hover { translate: 0 -2px; }
#app .vh-orn__core {
  position: relative; height: 100%; display: flex; flex-direction: column; padding: 18px 20px 16px; border-radius: 22px; overflow: hidden;
  background: var(--v-plaque); -webkit-backdrop-filter: var(--v-plaque-fx); backdrop-filter: var(--v-plaque-fx); box-shadow: var(--v-ombre-plaque);
}
#app .vh-orn--dec.is-gate { scale: 1.02; }
#app .vh-orn--dec.is-gate::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 44px 90px -30px rgba(0, 0, 0, .85), 0 0 70px -14px rgba(255, 138, 44, .34);
}
#app .vh-orn--dec.is-gate .vh-orn__core::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 130% at 50% -12%, rgba(255, 138, 44, .3), rgba(255, 138, 44, .1) 46%, rgba(255, 138, 44, .04) 76%);
  box-shadow: inset 0 0 0 1px rgba(255, 170, 100, .32), inset 0 1px 0 rgba(255, 206, 160, .4);
}
#app .vh-orn__core > * { position: relative; z-index: 1; }
#app .vh-orn__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; }
#app .vh-micro { display: inline-flex; align-items: center; gap: 7px; font: 500 10.5px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--v-gray); }
#app .vh-micro--dim { font: 400 12px/1.2 var(--font-ui); letter-spacing: 0; text-transform: none; }
#app .vh-micro--hot { color: var(--v-hot); }
#app .vh-diamond { display: inline-block; width: 8px; height: 8px; border-radius: 1.5px; background: var(--v-orange); rotate: 45deg; box-shadow: 0 0 10px rgba(255, 138, 44, .6); }
#app .vh-orn__title { margin: 10px 0 0; font: 500 17px/1.3 var(--font-ui); letter-spacing: -.02em; color: var(--v-white); }
#app .vh-orn__meta { margin: 4px 0 0; font: 400 13px/1.4 var(--font-ui); color: var(--v-gray); }
#app .vh-orn__foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; }
#app .vh-tags { display: inline-flex; gap: 5px; }
#app .vh-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font: 500 12px/1 var(--font-ui); white-space: nowrap; color: var(--v-white); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
#app .vh-tag.mono { font: 500 11.5px/1 var(--font-mono); }
#app .vh-tag--hot { color: #ffc896; background: rgba(255, 138, 44, .16); box-shadow: inset 0 0 0 1px rgba(255, 138, 44, .44); }

#app .vh-prio { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
#app .vh-ring { position: relative; flex: none; width: var(--s, 56px); height: var(--s, 56px); }
#app .vh-ring svg { display: block; width: 100%; height: 100%; rotate: -90deg; }
#app .vh-ring circle { fill: none; stroke-width: 3; }
#app .vh-ring__track { stroke: rgba(255, 255, 255, .11); }
#app .vh-ring__fill { stroke: var(--v-orange); stroke-linecap: round; stroke-dasharray: var(--pct) 100; filter: drop-shadow(0 0 4px rgba(255, 138, 44, .5)); }
#app .vh-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1px; font: 500 15px/1 var(--font-ui); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
#app .vh-ring small { margin-top: 3px; font-size: 10.5px; font-weight: 400; color: var(--v-gray); }
#app .vh-steps { flex: 1; min-width: 0; display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
#app .vh-step { display: grid; grid-template-columns: 12px minmax(0, 1fr); align-items: center; column-gap: 10px; }
#app .vh-step > span:not(.sr-only) { overflow: hidden; font: 400 13px/1.3 var(--font-ui); color: var(--v-text-2); white-space: nowrap; text-overflow: ellipsis; }
#app .vh-step > em { display: none; }
#app .vh-step > i { position: relative; width: 12px; height: 12px; border-radius: 50%; background: rgba(235, 201, 140, .16); box-shadow: inset 0 0 0 1px rgba(235, 201, 140, .6); }
#app .vh-step--done > i::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--v-gold); }
#app .vh-step--run > i { box-shadow: inset 0 0 0 1px var(--v-white); animation: vh-blink 1.6s var(--v-sine) infinite; }
#app .vh-step--gate > i { width: 9px; height: 9px; margin-left: 1.5px; border-radius: 2px; rotate: 45deg; background: var(--v-orange); box-shadow: 0 0 8px rgba(255, 138, 44, .6); animation: vh-blink 3.2s var(--v-sine) infinite; }
#app .vh-step--gate > span:not(.sr-only) { color: var(--v-hot); }
#app .vh-step--fail > i { background: rgba(255, 107, 90, .2); box-shadow: inset 0 0 0 1px var(--v-fail); }
#app .vh-step--fail > span:not(.sr-only) { color: var(--v-fail); }
#app .vh-step--todo > i { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }

/* Décision : même carte que les validations (.approval) pour garder « Approuver / Refuser » fonctionnels. */
#app .vh-orn .approval.vh-dec { position: relative; display: flex; flex-direction: column; flex: 1; padding: 0; border: 0 !important; border-radius: 0 !important; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
#app .vh-orn .approval.vh-dec::before, #app .vh-orn .approval.vh-dec::after { content: none; }
#app .vh-dec__why { margin: 5px 0 0; font: 400 14px/1.45 var(--font-ui); color: rgba(245, 243, 239, .86); }
#app .vh-dec__to { margin: 4px 0 0; font: 400 12.5px/1.4 var(--font-ui); color: var(--v-gray); }
#app .vh-dec__to .mono { font-size: 12px; color: var(--v-text-2); }
#app .vh-calm { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
#app .vh-calm .vh-orn__title { margin-top: 0; }
#app .vh-calm__ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 20px; color: var(--v-gold); background: rgba(235, 201, 140, .1); box-shadow: inset 0 0 0 1px rgba(235, 201, 140, .32), inset 0 1px 0 rgba(255, 255, 255, .12); }

/* Pont de lumière : du réacteur à la décision (noyau.js mesure --beam-h et --beam-tail). */
#app .vh-beam {
  position: absolute; left: 50%; bottom: calc(100% - 6px); z-index: 0; width: 120px; height: var(--beam-h, 0px); margin-left: -60px;
  pointer-events: none; opacity: 0; transition: opacity 240ms var(--v-move);
  -webkit-mask-image: linear-gradient(0deg, #000 0, #000 var(--beam-tail, 24px), transparent calc(var(--beam-tail, 24px) + 6px), transparent calc(100% - 16px), #000 calc(100% - 10px));
  mask-image: linear-gradient(0deg, #000 0, #000 var(--beam-tail, 24px), transparent calc(var(--beam-tail, 24px) + 6px), transparent calc(100% - 16px), #000 calc(100% - 10px));
  background: linear-gradient(90deg, transparent calc(50% - .5px), rgba(255, 176, 100, .8) calc(50% - .5px), rgba(255, 176, 100, .8) calc(50% + .5px), transparent calc(50% + .5px)), radial-gradient(50% 50% at 50% 50%, rgba(255, 150, 60, .16), rgba(255, 150, 60, 0) 75%);
}
#app .vh-orn--dec.is-gate .vh-beam { opacity: 1; }
#app .vh-beam > i { position: absolute; left: 57px; top: 0; width: 6px; height: 40px; border-radius: 6px; opacity: 0; background: linear-gradient(180deg, rgba(255, 210, 160, 0), rgba(255, 214, 168, .95) 50%, rgba(255, 210, 160, 0)); }
#app .vh-orn--dec.is-gate .vh-beam > i { animation: vh-down 2.4s var(--v-move) infinite; }

/* Équipe */
#app .vh-team { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
#app .vh-team__n { font: 500 40px/1 var(--font-ui); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--v-white); }
#app .vh-team > span:not(.vh-stack) { font: 400 13px/1.3 var(--font-ui); color: var(--v-gray); }
#app .vh-stack { display: inline-flex; margin-left: auto; }
#app .vh-stack__a { display: grid; place-items: center; width: 32px; height: 32px; margin-left: -8px; border-radius: 50%; font: 500 11px/1 var(--font-mono); font-style: normal; color: var(--v-white); background: linear-gradient(180deg, rgba(60, 62, 70, .95), rgba(34, 35, 41, .95)); box-shadow: 0 0 0 2px rgba(18, 19, 24, .9), inset 0 1px 0 rgba(255, 255, 255, .18); }
#app .vh-stack__a--awaiting_approval { color: #1a0d03; background: linear-gradient(180deg, #ffa252, #ff8a2c); }
#app .vh-stack__a--running { color: #1b1108; background: linear-gradient(180deg, #f3dcad, #ebc98c); }
#app .vh-stack__a--blocked { color: #fff; background: linear-gradient(180deg, #ff7f6f, #e5503e); }
#app .vh-team__lead { margin: 10px 0 0; font: 400 13px/1.4 var(--font-ui); color: var(--v-text-2); }
#app .vh-team__lead.is-hot { color: var(--v-hot); }

@keyframes vh-blink { 50% { opacity: .45; } }
@keyframes vh-down { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(var(--beam-h, 200px) - 40px)); } }

/* Accueil sur écran bas : réacteur un peu plus petit, ornements plus compacts. */
@media (min-width: 981px) and (max-height: 820px) {
  #app .vh { --nv: clamp(230px, 34vh, 360px); row-gap: 12px; }
  #app .vh-orn__core { padding: 14px 18px 12px; }
}
@media (min-width: 981px) and (max-width: 1240px) {
  #app .vh { grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr); column-gap: 20px; }
  #app .vh-orns { gap: 14px; }
}

/* Téléphone et tablette : une colonne, la décision juste après la commande. */
@media (max-width: 980px) {
  #app .vh { --nv: min(72vw, 280px); grid-template-columns: minmax(0, 1fr); grid-template-areas: "c" "o"; min-height: 0; padding: 4px 0 24px; row-gap: 18px; }
  #app .vh-side { display: none; }
  #app .vh .rvh-cmdslot { display: none; }
  #app .vh-orns { flex-direction: column; gap: 12px; }
  #app .vh-orn { flex-basis: auto; }
  #app .vh-orn--dec { order: -1; }
  #app .vh-orn--dec.is-gate { scale: 1; }
  #app .vh-beam { display: none; }
  html.rt #app .rail__nav { max-width: calc(100vw - 16px); }
}
/* Téléphone (Alexandre, 28/09) : menu unique à plat en haut, plus de barre basse ; réacteur en héros,
   état puis commande « Parle à JARVIS… » juste dessous (placeCommand aligne #core sur l'emplacement). */
@media (max-width: 980px) {
  html.rt #app .mobilebar { display: none !important; }
  /* En-tête opaque : le contenu qui défile ne se mélange plus au menu. Pénombre du réacteur rognée (pas de débordement). */
  html.rt #app .sysbar { background: #07080b !important; z-index: 31 !important; }
  html.rt #app .rail { background: linear-gradient(180deg, rgba(7, 8, 11, .96) 0, rgba(7, 8, 11, .96) 80%, rgba(7, 8, 11, 0)) !important; }
  #app .vh { overflow-x: clip; }
  html.rt #app .rail { display: flex !important; justify-content: flex-start; gap: 6px !important; padding: 0 8px !important; }
  html.rt #app .rail__nav { flex: 1 1 auto !important; min-width: 0; max-width: none; overflow-x: auto !important; scrollbar-width: none; }
  html.rt #app .rail__bottom { position: static; transform: none; display: flex !important; flex: none; }
  html.rt #app .rail__bottom .rail__profile { display: none !important; }
  html.rt #app #contextToggle { display: grid !important; }
  html.rt #app .stage { padding-top: calc(var(--topnav-h) + 12px) !important; padding-bottom: 28px !important; }
  html.rt #app .stage:is([data-page="jarvis"], [data-page="home"]) { position: relative; height: auto !important; min-height: 0 !important; overflow: visible !important; }
  #app .vh .rvh-cmdslot { display: block !important; width: 100%; height: 56px; margin-top: 4px; }
  html.rt #app .core.core--slot {
    position: absolute !important; top: var(--slot-top) !important; left: var(--slot-left) !important; bottom: auto !important;
    width: var(--slot-w) !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; transform: none !important;
    display: flex !important; flex-direction: column; align-items: stretch; gap: 8px; z-index: 20;
  }
  html.rt #app .core.core--slot::before { display: none !important; }
  html.rt #app .core.core--slot .command { position: relative !important; inset: auto !important; margin: 0 !important; }
  /* Autres pages : la commande fixe descend au bas de l'écran (plus de barre basse) ; place réservée sous le contenu. */
  html.rt #app .command-dock { position: fixed !important; top: auto !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important; left: 12px !important; right: 12px !important; margin: 0 !important; z-index: var(--z-dock, 40); }
  html.rt #app .command-dock .command { position: relative !important; inset: auto !important; margin: 0 !important; }
  html.rt #app .stage:not([data-page="jarvis"]):not([data-page="home"]) { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
  /* Toutes les pages défilent avec la fenêtre (plus de cadre intérieur à hauteur fixe) : la commande en bas ne masque jamais la fin. */
  html.rt #app .stage { height: auto !important; min-height: 0 !important; overflow: visible !important; }
  html.rt #app .core.core--slot :is(.reply, .core__feedback) { order: 1; }
}
@media (max-width: 560px) {
  /* Téléphone : « En ligne » passe en simple point (la place va à l'icône Détails) ; en-têtes et pieds des ornements passent à la ligne. */
  html.rt #app .sysbar__state { font-size: 0 !important; width: 8px; height: 8px; padding: 0 !important; border-radius: 50%; background: var(--v-gold); box-shadow: 0 0 8px rgba(235, 201, 140, .6); }
  html.rt #app .sysbar__state[data-state="offline"] { background: var(--v-fail); }
  #app .vh-orn__head, #app .vh-orn__foot { flex-wrap: wrap; row-gap: 8px; }
  #app .vh-orn__foot .vbtn--link { margin-left: 0; }
  /* Téléphone : barre du haut resserrée (l'aide était rognée à droite). */
  html.rt #app .sysbar { gap: 10px !important; padding: 0 10px !important; }
  html.rt #app .sysbar__brand { gap: 8px; }
  html.rt #app .sysbar__tag { letter-spacing: .06em; padding: 2px 5px; }
  html.rt #app .sysbar__meta { gap: 4px; }
  /* Téléphone : le micro (« bientôt ») laisse sa place au texte de la commande. */
  html.rt #app #cmdVoice { display: none; }
  html.rt #app .command__send { gap: 8px; padding-left: 14px !important; }
}

/* ---------- 8. Composants des pages : plaques de verre pour les panneaux, verre fumé sans flou pour les cartes ---------- */
html.rt #app :is(.panel, .context, .drawer__panel) {
  position: relative; border: 0 !important; border-radius: 22px !important; clip-path: none !important;
  background: var(--v-plaque) !important; -webkit-backdrop-filter: var(--v-plaque-fx) !important; backdrop-filter: var(--v-plaque-fx) !important;
  box-shadow: var(--v-ombre-plaque) !important;
}
/* Cartes dans une page : un seul flou par groupe, les cartes n'en ont pas (Équipe passait à 41 flous). */
html.rt #app :is(.mcard, .tool, .mem, .pnode, .approval, .empty, .agentcard, .focuscard, .quickcard, .homehero, .notice, .dossier, .hp, .card) {
  border: 0 !important; border-radius: 20px !important; clip-path: none !important;
  background: var(--v-fume) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: var(--v-ombre-fume) !important;
  transition: translate 200ms var(--v-move), box-shadow 200ms var(--v-move);
}
html.rt #app :is(.mcard, .agentcard, .tool, .mem, .dossier):hover { translate: 0 -2px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 20px 40px -20px rgba(0, 0, 0, .7) !important; }
html.rt #app .row { border-radius: 14px; border-color: rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .03); }
html.rt #app .vstat {
  position: relative; border: 0 !important; border-radius: 18px !important;
  background: var(--v-fume) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: var(--v-ombre-fume) !important;
}
html.rt #app .vstat dt { font: 500 10.5px/1 var(--font-mono); letter-spacing: .14em; color: var(--v-gray); }
html.rt #app .vstat dd { font: 500 30px/1 var(--font-ui); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
html.rt #app .vstat--primary dd { color: var(--v-gold); }
html.rt #app .vstat--warning dd { color: var(--v-hot); }
html.rt #app .vstat--danger dd { color: var(--v-fail); }
html.rt #app .vstat--success dd { color: var(--v-ok); }
html.rt #app .vhead { border-bottom-color: rgba(255, 255, 255, .08); }
html.rt #app .vhead__kicker { font: 500 10.5px/1 var(--font-mono); letter-spacing: .18em; color: var(--v-gold); }
html.rt #app .vhead__kicker::before { background: var(--v-gold); }
html.rt #app .vhead__title { font-family: var(--font-ui); font-weight: 500; letter-spacing: -.025em; }
html.rt #app .vhead__sub { color: var(--v-text-2); }
html.rt #app :is(.input, .dd__btn) { border-radius: 14px; border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); font-family: var(--font-ui); }
html.rt #app .mo-sweep { animation-duration: .5s; }

/* Pages : l'orbe « EN VEILLE » au-dessus des titres disparaît (le noyau vit sur l'accueil ; la commande et son
   retour restent) ; les décorations cyan des routes pilotes JAR-040 (« LIVE HUD » en 9 px, grille) sont neutralisées. */
html.rt body:not(.cinematic-home-active) #app .core .visor { display: none !important; }
html.rt #app .view::before { display: none !important; }
html.rt #app .vhead::before { content: none !important; }
html.rt #app .vhead__title { text-shadow: 0 2px 24px rgba(0, 0, 0, .45) !important; }
html.rt #app .vhead__stats { gap: 10px; }
html.rt #app .vhead__stats .vstat { min-width: 108px; padding: 12px 16px; }

/* Commande des pages : plus de bandeau sombre derrière, la pastille de verre flotte seule. */
html.rt #app .command-dock { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.rt #app .missionnow { border-left-color: var(--v-gold) !important; }

/* Cartes en grille (agents de l'Équipe, rapports du Journal) : verre fumé, pas de flou individuel ;
   marques orange d'angle et barres d'accent de l'ancien habillage retirées (la couleur reste réservée à l'état). */
html.rt #app :is(.agentgrid, .activity-list, .reports, .memgrid) > .panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--v-fume) !important; box-shadow: var(--v-ombre-fume) !important; }
/* Règle générale : trois panneaux ou plus côte à côte forment une grille de cartes, sans flou individuel. */
html.rt #app :is(.agentgrid, :has(> .panel + .panel + .panel)) > .panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--v-fume) !important; box-shadow: var(--v-ombre-fume) !important; }
html.rt #app :is(.panel, .mem, .mcard, .tool, .agentcard, .dossier, .pnode, .notice)::after { content: none !important; }
html.rt #app .agentcard::before { content: none !important; }
html.rt #app .vhead::after { background: var(--v-gold) !important; opacity: .7; }

/* ---------- 8b. Missions : une feuille de verre (un seul flou), lignes groupées par urgence, inspecteur à droite ---------- */
#app .vm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
#app .vm--insp { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); }
#app .vm-sheet {
  position: relative; padding: 6px 8px 10px; border-radius: 26px;
  background: var(--v-voile); -webkit-backdrop-filter: var(--v-voile-fx); backdrop-filter: var(--v-voile-fx); box-shadow: var(--v-ombre-plaque);
}
#app .vm-group { display: flex; align-items: center; gap: 10px; margin: 16px 14px 6px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--v-gray); }
#app .vm-group b { padding: 3px 7px; border-radius: 999px; font-weight: 500; letter-spacing: 0; color: var(--v-white); background: rgba(255, 255, 255, .1); }
#app .vm-group--attention { color: var(--v-hot); }
#app .vm-group--attention b { color: #1a0d03; background: var(--v-orange); }
#app .vm-rows { display: grid; }
#app .vm-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 2px 12px 2px 2px; border-radius: 18px; transition: background-color 160ms var(--v-move); }
#app .vm-row + .vm-row::before { content: ""; position: absolute; left: 72px; right: 16px; top: 0; height: 1px; background: rgba(255, 255, 255, .07); }
#app .vm-row:hover { background: rgba(255, 255, 255, .04); }
#app .vm-row.is-sel { background: rgba(255, 255, 255, .075); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
#app .vm-row.is-sel::before, #app .vm-row.is-sel + .vm-row::before { opacity: 0; }
#app .vm-row--warning.is-sel { background: rgba(255, 138, 44, .09); box-shadow: inset 0 0 0 1px rgba(255, 150, 70, .28); }
#app .vm-row__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 12px 8px 12px 12px; border: 0; border-radius: 16px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#app .vm-row__main:focus-visible { outline: 2px solid var(--v-orange); outline-offset: -2px; }
#app .vm-row__text { display: grid; gap: 3px; min-width: 0; }
#app .vm-row__text b { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font: 500 16px/1.3 var(--font-ui); letter-spacing: -.015em; color: var(--v-white); }
#app .vm-row__text small { font: 400 13px/1.35 var(--font-ui); color: var(--v-gray); }
#app .vm-row__now { font: 400 13.5px/1.35 var(--font-ui); color: var(--v-text-2); }
#app .vm-row__now .mono { font-size: 12px; color: var(--v-gray); }
#app .vm-row--warning .vm-row__now { color: var(--v-hot); }
#app .vm-row__err { font: 400 12.5px/1.4 var(--font-mono); color: #ff9a8c; white-space: normal; }
#app .vm-row__side { flex: none; display: grid; grid-template-columns: auto auto; justify-items: end; align-items: center; gap: 8px 12px; }
#app .vm-row__act { grid-column: 1 / -1; }
#app .vm-row__time { min-width: 72px; font: 400 12px/1 var(--font-ui); color: var(--v-gray); text-align: right; }
#app .vm-row__act { min-height: 34px; }
#app .vm-row .vh-ring b { font-size: 12px; }
#app .vm-row .vh-ring small { font-size: 10px; margin-top: 2px; }
#app .vm-row .vh-ring__fill { stroke: var(--v-gold); filter: none; }
#app .vm-row--warning .vh-ring__fill { stroke: var(--v-orange); filter: drop-shadow(0 0 4px rgba(255, 138, 44, .5)); }
#app .vm-row--danger .vh-ring__fill { stroke: var(--v-fail); }
/* Statut : forme + libellé, compréhensible sans la couleur. */
#app .vm-pill { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: 999px; font: 500 12px/1 var(--font-ui); white-space: nowrap; color: var(--v-white); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
#app .vm-pill--warning { color: #ffc896; background: rgba(255, 138, 44, .14); box-shadow: inset 0 0 0 1px rgba(255, 138, 44, .42); }
#app .vm-pill--danger { color: #ffb0a6; background: rgba(255, 107, 90, .14); box-shadow: inset 0 0 0 1px rgba(255, 107, 90, .42); }
#app .vm-pill--success { color: #cfeedd; background: rgba(158, 217, 176, .1); box-shadow: inset 0 0 0 1px rgba(158, 217, 176, .3); }
#app .vm-pill--primary { color: #f6e3bf; background: rgba(235, 201, 140, .12); box-shadow: inset 0 0 0 1px rgba(235, 201, 140, .36); }
#app .vm-pill__g { position: relative; display: inline-block; flex: none; width: 8px; height: 8px; }
#app .vm-pill__g--dot { border-radius: 50%; background: currentColor; animation: vh-blink 1.6s var(--v-sine) infinite; }
#app .vm-pill__g--diamond { border-radius: 1.5px; background: var(--v-orange); rotate: 45deg; box-shadow: 0 0 8px rgba(255, 138, 44, .6); }
#app .vm-pill__g--check { width: 9px; height: 5px; border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; rotate: -45deg; translate: 0 -1px; }
#app .vm-pill__g--x::before, #app .vm-pill__g--x::after { content: ""; position: absolute; left: -1px; top: 3.2px; width: 10px; height: 1.6px; background: currentColor; rotate: 45deg; }
#app .vm-pill__g--x::after { rotate: -45deg; }
#app .vm-pill__g--warn { width: 9px; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
#app .vm-pill__g--minus { height: 1.6px; background: currentColor; }

#app .vm-insp { position: sticky; top: calc(var(--sysbar-h) + var(--topnav-h) + 76px); min-width: 0; }
#app .vm-insp__core {
  position: relative; max-height: calc(100dvh - var(--sysbar-h) - var(--topnav-h) - 110px); overflow: auto; overscroll-behavior: contain;
  padding: 14px 14px 16px; border-radius: 26px;
  background: var(--v-plaque); -webkit-backdrop-filter: var(--v-plaque-fx); backdrop-filter: var(--v-plaque-fx); box-shadow: var(--v-ombre-plaque);
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
#app .vm-insp__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; margin: 0 6px 6px; }
#app .vm-insp .dossier { padding: 6px; background: none !important; box-shadow: none !important; translate: none !important; }
#app .vm-insp .dossier__title { font: 500 20px/1.25 var(--font-ui); letter-spacing: -.02em; }
#app .vm-insp .dossier__meta { font: 400 12.5px/1.4 var(--font-ui); color: var(--v-gray); }
#app .vm-insp :is(.notice, .row, .missionnow) { border-radius: 16px !important; }
#app .vm-insp .mission-actions { border-radius: 18px; border-color: rgba(255, 255, 255, .1) !important; background: rgba(255, 255, 255, .03) !important; }
/* Le dossier a été dessiné pour une colonne large : dans l'inspecteur, tout passe sur une colonne. */
#app .vm-insp .dossier > * { width: auto !important; max-width: 100% !important; min-width: 0 !important; margin-inline: 0 !important; }
#app .vm-insp .mission-decision { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
#app .vm-insp .mission-decision__actions { flex-wrap: wrap; }
#app .vm-insp .approval__facts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
#app .vm-insp .dossier__grid { grid-template-columns: minmax(0, 1fr) !important; }
#app .vm-insp .dossier__head { gap: 10px; }
#app .vm-insp .dossier__head .badge { flex: none; }

@media (max-width: 1240px) {
  #app .vm--insp { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
  #app .vm-row__time { display: none; }
}
@media (max-width: 980px) {
  #app .vm--insp { grid-template-columns: minmax(0, 1fr); }
  #app .vm-insp { position: static; }
  #app .vm-insp__core { max-height: none; overflow: visible; }
  #app .vm-row { flex-wrap: wrap; padding-bottom: 10px; }
  #app .vm-row__main { flex-basis: 100%; }
  #app .vm-row__side { flex-wrap: wrap; padding-left: 66px; }
  #app .vm-row__text b { white-space: normal; }
}

/* ---------- 8c. Validations : la décision est le panneau principal (verre teinté ambre, lueur lente) ---------- */
#app .approvals { display: grid; gap: 18px; max-width: 920px; }
#app .approvals .approval {
  position: relative; isolation: isolate; padding: 22px 24px 20px; border-radius: 26px !important;
  background: var(--v-plaque) !important; -webkit-backdrop-filter: var(--v-plaque-fx) !important; backdrop-filter: var(--v-plaque-fx) !important;
  box-shadow: var(--v-ombre-plaque), inset 0 0 0 1px rgba(255, 150, 70, .3) !important;
}
#app .approvals .approval::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 1;
  background: radial-gradient(120% 90% at 12% -10%, rgba(255, 138, 44, .24), rgba(255, 138, 44, .07) 48%, rgba(255, 138, 44, 0) 78%);
}
/* Validation requise : une lueur ambre respire lentement autour de la carte (opacité seule, peu coûteux). */
#app .approvals .approval::after {
  content: ""; position: absolute; inset: -1px; z-index: -2; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 60px -12px rgba(255, 138, 44, .45); animation: vh-breath 3.2s var(--v-sine) infinite;
}
#app .approvals .approval.is-busy { opacity: .6; }
html.rt #app .approval__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 !important; padding: 0 !important; border: 0 !important; }
html.rt #app .approval__head::before, html.rt #app .approval__head::after { content: none !important; }
html.rt #app .approval__risk { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 999px; font: 500 12.5px/1 var(--font-ui) !important; letter-spacing: 0 !important; text-transform: none !important; color: #ffc896 !important; background: rgba(255, 138, 44, .14); box-shadow: inset 0 0 0 1px rgba(255, 138, 44, .42); }
html.rt #app .approval--low .approval__risk { color: #cfeedd !important; background: rgba(158, 217, 176, .1); box-shadow: inset 0 0 0 1px rgba(158, 217, 176, .3); }
html.rt #app .approval__when { font: 400 12.5px/1 var(--font-ui) !important; letter-spacing: normal !important; word-spacing: normal !important; color: var(--v-gray) !important; }
#app .approvals .approval__title { margin: 14px 0 0; font: 500 24px/1.25 var(--font-ui); letter-spacing: -.025em; color: var(--v-white); }
#app .approvals .approval__reason { margin: 6px 0 0; font: 400 15.5px/1.5 var(--font-ui); color: rgba(245, 243, 239, .86); }
#app .approvals .approval__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 18px 0 0; padding: 0; border-radius: 16px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
#app .approvals .approval__facts > div { padding: 12px 14px; border: 0 !important; }
#app .approvals .approval__facts > div + div { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .08); }
html.rt #app .approval__facts dt { margin: 0; font: 500 10.5px/1 var(--font-mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--v-gray) !important; }
html.rt #app .approval__facts dd { margin: 7px 0 0; font: 400 14px/1.35 var(--font-ui); color: var(--v-white); }
html.rt #app .approval__facts dd.mono { font: 400 13px/1.35 var(--font-mono); }
html.rt #app .tone-danger { color: var(--v-fail) !important; }
html.rt #app .tone-success { color: var(--v-ok) !important; }
#app .approvals .approval__payload { display: grid; gap: 6px; margin: 12px 0 0; padding: 12px 16px; border-radius: 14px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
html.rt #app .approval__payload > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; }
html.rt #app .approval__payload dt { color: var(--v-gray); font-size: 12.5px; }
html.rt #app .approval__payload dd { margin: 0; color: var(--v-white); font-size: 13px; overflow-wrap: anywhere; }
#app .approvals .approval__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
html.rt #app .approvals .approval__actions .btn { min-height: 42px; padding: 0 18px; }
@keyframes vh-breath { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (max-width: 980px) {
  #app .approvals .approval { padding: 18px; }
  #app .approvals .approval__title { font-size: 20px; }
  #app .approvals .approval__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .approvals .approval__facts > div:nth-child(3) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
  #app .approvals .approval__facts > div:nth-child(4) { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .08); }
}

/* ---------- 8d. Correctifs de la revue qualité indépendante (28/09) ---------- */
/* B1 — la commande de l'accueil ne recouvre plus les ornements : #core prend la hauteur de son contenu et ne capte
   les clics que sur la commande, le retour et la réponse. La réponse devient une plaque de verre lisible. */
#app .core.core--slot { position: absolute !important; top: var(--slot-top) !important; left: var(--slot-left) !important; bottom: auto !important; width: var(--slot-w) !important; transform: none !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 8px; z-index: 20; pointer-events: none; }
#app .core.core--slot::before { display: none !important; }
#app .core.core--slot .command { position: relative !important; inset: auto !important; margin: 0 !important; }
#app .core.core--slot > :is(.command, .core__feedback, .reply) { pointer-events: auto; }
#app .core.core--slot .core__feedback:empty { display: none; }
#app .core.core--slot .core__feedback { align-self: center; padding: 4px 10px; border-radius: 999px; font: 500 12px/1.2 var(--font-ui, sans-serif) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--v-text-2); background: rgba(10, 11, 15, .72); }
#app .core.core--slot .reply:not(.hidden) {
  max-height: min(30vh, 260px); overflow: auto; overscroll-behavior: contain; padding: 14px 16px; border-radius: 22px; border: 0 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .05)), rgba(12, 13, 17, .88) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important; backdrop-filter: blur(22px) saturate(150%) !important; box-shadow: var(--v-ombre-plaque) !important;
}
/* M2 — lectures latérales lisibles sur un ciel clair : pénombre derrière, étiquettes plus claires, chiffres à la taille du texte. */
#app .vh-side { position: relative; }
#app .vh-side::before { content: ""; position: absolute; inset: -40px -60px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(5, 6, 8, .7), rgba(5, 6, 8, .38) 60%, rgba(5, 6, 8, 0)); }
#app .vh-tele dt { color: #c4c8ce; text-shadow: 0 1px 8px rgba(0, 0, 0, .85); }
#app .vh-tele dd .mono { font-size: inherit; }
#app .vh-tele dd.is-hot { color: #ffc896; }
/* M3 — valeurs secondaires à 12 px minimum (les micro-étiquettes en majuscules restent à 10-11 px). */
html.rt #app :is(.agentcard dd, .agentcard__skills .chip, .agentcard__foot span, .section-title, .dossier__progress-row span, .dossier .label, .step__action, .mission-actions__state, .panel__body p.mono, .mem__when, .panel__head .panel__eyebrow) { font-size: 12px !important; }
#app .vh-tag.mono { font-size: 12px; }
/* m4 — « Ta décision » tient sur une ligne. */
#app .vh-micro { white-space: nowrap; }
/* m5 — restes de cyan hors palette B. */
/* Réglages (Alexandre, 29/09 : « retire le halo cyan ») : halo de la barre d'enregistrement (JAR-045) retiré, ombre noire seule ;
   icône YouTube du bloc « Démarrage & musique », boutons radio et curseurs de la voix en or (comme les interrupteurs) au lieu du cyan. */
html.rt #app .settings-savebar { box-shadow: 0 18px 46px rgba(0, 0, 0, .34); }
html.rt #app .boot-track__icon { color: var(--v-gold); background: rgba(235, 201, 140, .08); }
html.rt #app :is(.radio-line input, .boot-voice__sliders input[type="range"]) { accent-color: var(--v-gold); }
html.rt #app .settings-actions { border-bottom-color: rgba(255, 255, 255, .08); }
html.rt #app .sysbar__mark { border-color: var(--v-gold) !important; box-shadow: 0 0 10px rgba(235, 201, 140, .35) !important; }
html.rt #app .agentcard__role { color: var(--v-gold) !important; border-color: rgba(235, 201, 140, .32) !important; background: rgba(235, 201, 140, .08) !important; }
html.rt #app .agentcard dl > div { border-color: rgba(255, 255, 255, .08) !important; background: rgba(255, 255, 255, .03) !important; }
html.rt #app .agentcard__foot { border-top-color: rgba(255, 255, 255, .08) !important; }
html.rt #app .chip { border-color: rgba(255, 255, 255, .14) !important; }
html.rt #app .panel__head { border-bottom-color: rgba(255, 255, 255, .08) !important; }
html.rt #app .missionnow { background: rgba(235, 201, 140, .07) !important; }
html.rt #app .missionnow span { color: var(--v-gold) !important; }
html.rt #app .progress { background: rgba(255, 255, 255, .08) !important; }
html.rt #app .progress__fill { background: var(--v-gold) !important; box-shadow: none !important; }
html.rt #app .step { border-bottom-color: rgba(255, 255, 255, .07) !important; background: transparent !important; }
/* m2 — menu : plus serré sous 1 400 px, fondu sur les bords quand il défile (on voit qu'il y a une suite). */
@media (min-width: 981px) and (max-width: 1400px) {
  html.rt #app .rail__nav .rail__item { padding: 0 8px !important; font-size: 13px !important; }
  html.rt #app .railgroup { margin-right: 2px !important; padding-right: 2px !important; }
}
html.rt #app .rail__nav.is-scrollable { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
/* M6 — l'apparition de la commande après le démarrage passe de 600 à 240 ms. */
html.rt body.is-awake #app .core { animation-duration: 240ms !important; }
/* M6 (résidu) — la marge de la commande ne s'anime plus sur 480 ms. */
html.rt #app .core { transition-duration: 200ms !important; }
/* m7 — le champ d'instruction de l'inspecteur prend toute la largeur. */
#app .vm-insp .mission-actions :is(form, .mission-actions__row, .mission-actions__form) { flex-wrap: wrap; }
#app .vm-insp .mission-actions :is(input, textarea) { flex: 1 1 100%; }
#app .vm-insp :is(input, textarea) { width: 100%; min-width: 0; }

/* ---------- 9. Mouvement réduit, interrupteur « Animations », machines modestes ---------- */
@media (prefers-reduced-motion: reduce) {
  #app :is(.nv__glow, .nv-seg, .nv-dashr, .nv__scan, .nv-tkc, .nv-prog, .nv-imp, .nv__waves > i, .nv__pulses > i, .vh-step > i, .vh-beam > i, .vm-pill__g, .approval::after) { animation: none !important; }
  #app .nv--flick > * { animation: none !important; }
  #app .nv[data-etat="analyse"] .nv__scan { transform: rotate(52deg); }
  #app :is(.navpill, .nv, .nv__lens, .vh-orn, .btn, .vbtn, .command__send) { transition: none !important; translate: none !important; }
}
html.no-motion #app :is(.nv__glow, .nv-seg, .nv-dashr, .nv__scan, .nv-tkc, .nv-prog, .nv-imp, .nv__waves > i, .nv__pulses > i, .vh-step > i, .vh-beam > i, .vm-pill__g, .approval::after) { animation: none !important; }
html.no-motion #app .nv--flick > * { animation: none !important; }
html.no-motion #app .nv[data-etat="analyse"] .nv__scan { transform: rotate(52deg); }
html.no-motion #app :is(.navpill, .nv, .nv__lens, .vh-orn, .btn, .vbtn, .command__send) { transition: none !important; translate: none !important; }
/* hud-lite (motion.js : machine modeste ou moins de 30 images/s) : plus de flou sur les ornements, boucles lentes arrêtées. */
html.hud-lite #app .vh-orn__core { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--v-fume); }
html.hud-lite #app :is(.nv-seg, .nv-dashr) { animation: none; }

/* ---------- 10. Accueil « cockpit » et fond en survol (Alexandre, 29/09/2026) ----------
   D'après sa référence : panneaux de part et d'autre du noyau, cadre de cockpit, paysage qui défile comme un survol.
   Données inchangées (priorité, système, mémoire, décision, équipe, journal) ; palette B conservée (or, orange, pas de cyan). */
/* Fond : le survol remplace la vallée fixe sur l'accueil ; la vallée reste sur les autres pages. */
.survol { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; background: #0b1422; transition: opacity 280ms cubic-bezier(.25, 1, .5, 1), visibility 0s linear 280ms; }
body.survol-on .survol { opacity: 1; visibility: visible; transition: opacity 280ms cubic-bezier(.25, 1, .5, 1); }
body.survol-on #env { visibility: hidden; }
.survol__ciel { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.survol__bande { position: absolute; left: 0; right: 0; overflow: hidden; }
.survol__piste { position: absolute; top: 0; left: 0; width: 200%; height: 100%; animation: survol-defile var(--dur, 120s) linear infinite; will-change: transform; }
.survol__piste canvas { display: block; width: 100%; height: 100%; }
@keyframes survol-defile { to { transform: translateX(-50%); } }
.survol__vaisseau { position: absolute; left: 100%; display: block; width: 90px; animation: survol-vol 36s linear infinite; }
.survol__vaisseau svg { display: block; width: 100%; height: auto; transform: scaleX(-1); filter: drop-shadow(0 0 6px rgba(255, 170, 90, .35)); animation: survol-houle 5s ease-in-out infinite alternate; }
.survol__vaisseau--1 { top: 22%; width: 118px; animation-duration: 28s; animation-delay: -6s; }
.survol__vaisseau--2 { top: 34%; width: 64px; animation-duration: 44s; animation-delay: -30s; opacity: .85; }
.survol__vaisseau--3 { top: 15%; width: 40px; animation-duration: 62s; animation-delay: -12s; opacity: .7; }
.survol__vaisseau--4 { top: 42%; width: 84px; animation-duration: 36s; animation-delay: -22s; }
@keyframes survol-vol { from { transform: translateX(0); } to { transform: translateX(calc(-100vw - 240px)); } }
@keyframes survol-houle { from { translate: 0 -3px; } to { translate: 0 4px; } }
.survol__voile {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 30% 44% at 50% 44%, rgba(6, 7, 10, .5), rgba(6, 7, 10, 0) 72%),
    linear-gradient(90deg, rgba(6, 7, 10, .62), rgba(6, 7, 10, .1) 30%, rgba(6, 7, 10, .1) 70%, rgba(6, 7, 10, .62)),
    linear-gradient(180deg, rgba(6, 7, 10, .62), rgba(6, 7, 10, 0) 22%, rgba(6, 7, 10, 0) 72%, rgba(6, 7, 10, .72));
}
/* Le calque de particules pose un voile mauve sur tout l'écran : absent de l'accueil en survol. */
body.survol-on #fxParticles { display: none !important; }
/* Pauses : hors de l'accueil (calque masqué), « Animations » coupé, moins de 30 images/s mesurées par survol.js (.is-lent).
   Pas de pause sur hud-lite seul : il s'active sous 980 px, or le défilement n'est qu'une translation composée (le téléphone survole aussi). */
body:not(.survol-on) .survol *, html.no-motion .survol *, .survol.is-lent * { animation-play-state: paused !important; }
/* Ordinateur en mode allégé (machine faible ou débit trop bas, motion.js) : paysage immobile ; le téléphone, lui, garde son survol. */
@media (min-width: 981px) { html.hud-lite .survol * { animation-play-state: paused !important; } }
/* Voix en HUD sur l'accueil (ordinateur) : bandeau compact en haut du centre, dans le ciel au-dessus du réacteur
   (rien de cliquable dessous, même sur un écran bas), dans la largeur de la colonne centrale
   (--centre = fenêtre − marges − deux colonnes de panneaux − deux gouttières), sans cacher les panneaux. */
@media (min-width: 981px) {
  body.survol-on { --centre: calc(100vw - 2 * clamp(40px, 5vw, 88px) - 700px - 2 * clamp(16px, 2.2vw, 36px)); }
  body.survol-on .vhud { top: 106px; bottom: auto; right: auto; left: 50%; width: clamp(320px, var(--centre), 560px); padding: 10px 16px 10px; transform: translate(-50%, -10px);
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "tete eq" "texte texte" "etat etat"; column-gap: 14px; align-items: center; }
  body.survol-on .vhud.is-on { transform: translate(-50%, 0); }
  body.survol-on .vhud__tete { grid-area: tete; gap: 10px; letter-spacing: .2em; white-space: nowrap; }
  body.survol-on .vhud__eq { grid-area: eq; height: 16px; margin: 0; }
  body.survol-on .vhud__etat { grid-area: etat; margin: 6px 0 0; font-size: 10px; letter-spacing: .14em; }
  body.survol-on .vhud__texte { grid-area: texte; max-height: 3em; margin-top: 6px; overflow: hidden; font-size: 14px; }
}
/* Téléphone et tablette : sur le réacteur en haut de l'accueil (rien de cliquable dessous), et il défile avec la page
   au lieu de rester sur la commande. */
@media (max-width: 980px) {
  body.survol-on .vhud { position: absolute; top: 104px; bottom: auto; left: 16px; right: 16px; width: auto; transform: translateY(-10px); }
  body.survol-on .vhud.is-on { transform: none; }
}
@media (min-width: 981px) and (max-width: 1240px) {
  body.survol-on { --centre: calc(100vw - 40px - 540px - 32px); }
}
@media (prefers-reduced-motion: reduce) { .survol * { animation-play-state: paused !important; } }

/* Cadre du cockpit (le casque SVG d'index.html, masqué par le thème Réacteur) : visible sur l'accueil, liserés or. */
html.rt body.survol-on .helmet { display: block !important; opacity: 1; }
html.rt body.survol-on .helmet__edge { stroke: rgba(235, 201, 140, .42); }
html.rt body.survol-on .helmet__edge--inner { stroke: rgba(235, 201, 140, .14); }
html.rt body.survol-on .helmet__seg { stroke: rgba(235, 201, 140, .7); }
html.rt body.survol-on .helmet__seg--orange { stroke: var(--cin-orange, #ff8a2c); }
html.rt body.survol-on .helmet__led { background: #ebc98c; box-shadow: 0 0 10px rgba(235, 201, 140, .7); }
html.rt body.survol-on .helmet__led--orange { background: #ff8a2c; box-shadow: 0 0 10px #ff8a2c; }

/* Trois colonnes : priorité, système, mémoire à gauche ; décision, équipe, journal à droite ; noyau au centre. */
#app .vh--cockpit {
  --nv: clamp(260px, 44vh, 420px);
  grid-template-columns: minmax(280px, 350px) minmax(0, 1fr) minmax(280px, 350px);
  grid-template-areas: "l c r";
  align-items: start; column-gap: clamp(16px, 2.2vw, 36px);
  padding: 4px clamp(40px, 5vw, 88px) 16px;
}
#app .vh-col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#app .vh-col--l { grid-area: l; }
#app .vh-col--r { grid-area: r; }
#app .vh--cockpit .vh-center { z-index: 1; align-self: center; }
#app .vh--cockpit .rvh-cmdslot { width: min(560px, 100%); }
#app .vh--cockpit .vh-orn { flex: none; width: 100%; }
#app .vh--cockpit .vh-orn__core { padding: 14px 16px 12px; }
#app .vh--cockpit .vh-orn--dec.is-gate { scale: 1; }
#app .vh--cockpit .vh-orn__foot { padding-top: 10px; }
#app .vh--cockpit .vh-orn__title { margin-top: 8px; }
#app .vh--cockpit .vh-orn--dec .vh-orn__head { flex-wrap: wrap; row-gap: 6px; }
/* Titres de panneau façon HUD : majuscules espacées suivies d'un chevron or. */
#app .vh-micro--titre { font: 600 12px/1.2 var(--font-mono, monospace); letter-spacing: .16em; color: var(--v-white); }
#app .vh-micro--titre::after { content: "»"; margin-left: 2px; letter-spacing: 0; color: var(--v-gold); }
#app .vh-micro--titre.vh-micro--hot { display: inline-flex; align-items: center; gap: 8px; color: var(--v-hot); }
/* Système */
#app .vh-sys { display: grid; margin: 8px 0 0; }
#app .vh-sys > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
#app .vh-sys > div:first-child { border-top: 0; }
#app .vh-sys dt { font: 400 13px/1.3 var(--font-ui, sans-serif); color: var(--v-gray); }
#app .vh-sys dd { margin: 0; font: 500 14px/1.3 var(--font-ui, sans-serif); color: var(--v-white); font-variant-numeric: tabular-nums; text-align: right; }
#app .vh-sys dd.is-ok::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--v-gold); box-shadow: 0 0 8px rgba(235, 201, 140, .6); vertical-align: 1px; }
#app .vh-sys dd.is-bad { color: var(--v-fail); }
#app .vh-sys dd.is-hot { color: var(--v-hot); }
/* Mémoire */
#app .vh-memtypes { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
#app .vh-memtypes .vh-tag b { margin-left: 6px; font-weight: 500; color: var(--v-gold); }
#app .vh-memlist { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
#app .vh-memlist li { position: relative; overflow: hidden; padding-left: 14px; font: 400 14px/1.35 var(--font-ui, sans-serif); color: var(--v-text-2); white-space: nowrap; text-overflow: ellipsis; }
#app .vh-memlist li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--v-gold); }
/* Journal en direct : heure, forme du résultat (rond réussi, losange en attente, carré en échec), action. */
#app .vh-direct { display: inline-flex; white-space: nowrap; align-items: center; gap: 6px; font: 500 11px/1 var(--font-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--v-hot); }
#app .vh-direct i { width: 7px; height: 7px; border-radius: 50%; background: var(--v-orange); animation: vh-blink 1.6s var(--v-sine) infinite; }
#app .vh-logs { display: grid; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; }
#app .vh-log { display: grid; grid-template-columns: 44px 10px minmax(0, 1fr); align-items: center; gap: 8px; }
#app .vh-log time { font-size: 12px; color: var(--v-gray); font-variant-numeric: tabular-nums; }
#app .vh-log i { width: 8px; height: 8px; border-radius: 50%; background: var(--v-gold); }
#app .vh-log--warning i { width: 7px; height: 7px; border-radius: 1.5px; rotate: 45deg; background: var(--v-orange); box-shadow: 0 0 6px rgba(255, 138, 44, .6); }
#app .vh-log--danger i { border-radius: 1.5px; background: var(--v-fail); }
#app .vh-log > span:not(.sr-only) { overflow: hidden; font: 400 14px/1.3 var(--font-ui, sans-serif); color: var(--v-text-2); white-space: nowrap; text-overflow: ellipsis; }
/* Ligne de rappel : du verrou du réacteur à la décision (validation requise seulement). */
#app .vh-lien { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity 240ms var(--v-move); }
#app .vh--gate .vh-lien { opacity: 1; }
#app .vh-lien__trait { fill: none; stroke: rgba(255, 150, 70, .45); stroke-width: 1.2; }
#app .vh-lien__flux { fill: none; stroke: #ffb066; stroke-width: 1.6; stroke-dasharray: 3 13; animation: vh-flux .9s linear infinite; }
#app .vh-lien__pt { fill: #ff8a2c; filter: drop-shadow(0 0 6px rgba(255, 138, 44, .8)); }
@keyframes vh-flux { to { stroke-dashoffset: -16; } }
html.no-motion #app :is(.vh-lien__flux, .vh-direct i), html.hud-lite #app :is(.vh-lien__flux, .vh-direct i) { animation: none !important; }
@media (prefers-reduced-motion: reduce) { #app :is(.vh-lien__flux, .vh-direct i) { animation: none !important; } }
/* Écrans bas (QA 29/09 : jusqu'à 148 px coupés à 1280 × 720, « Toute la mémoire » invisible sur un MacBook Air) :
   1. chaque colonne est plafonnée à la hauteur disponible (--col-haut, mesurée par noyau.js) et défile en interne au pire ;
   2. sous 880 px : sans les deux titres récents de la mémoire, trois lignes de journal, panneaux et lignes resserrés ;
   3. sous 780 px : sans les lignes du système en double (région, mémoire). */
@media (min-width: 981px) and (max-height: 900px) {
  #app .vh--cockpit .vh-col { max-height: var(--col-haut, none); overflow-y: auto; overscroll-behavior: contain; margin: 0 -10px; padding: 0 10px 2px; scrollbar-width: thin; scrollbar-color: rgba(235, 201, 140, .3) transparent; }
  #app .vh--cockpit .vh-col.is-defile { padding-bottom: 26px; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent); }
}
@media (min-width: 981px) and (max-height: 880px) {
  #app .vh--cockpit .vh-memlist { display: none; }
  #app .vh--cockpit .vh-logs li:nth-child(n+4) { display: none; }
  #app .vh--cockpit .vh-sys > div { padding: 4px 0; }
  #app .vh--cockpit .vh-orn__core { padding: 12px 14px 10px; }
  #app .vh--cockpit .vh-col { gap: 10px; }
  #app .vh--cockpit .vh-orn__foot { padding-top: 6px; }
  #app .vh--cockpit .vh-orn__title { margin-top: 6px; }
}
@media (min-width: 981px) and (max-height: 820px) {
  #app .vh--cockpit { --nv: clamp(240px, 40vh, 360px); }
}
@media (min-width: 981px) and (max-height: 780px) {
  #app .vh--cockpit .vh-sys > .is-sec { display: none; }
}
/* 981 à 1240 px : colonnes resserrées pour que la commande garde un vrai champ ; boutons et étiquettes passent à la ligne. */
@media (min-width: 981px) and (max-width: 1240px) {
  #app .vh--cockpit { grid-template-columns: minmax(240px, 270px) minmax(0, 1fr) minmax(240px, 270px); column-gap: 16px; padding-inline: 20px; }
  #app .vh--cockpit :is(.vh-orn__head, .vh-orn__foot) { flex-wrap: wrap; row-gap: 6px; }
  #app .vh--cockpit .vh-stack { display: none; } /* pile d'initiales décorative (aria-hidden) : elle sortait du panneau ; « 14 disponibles sur 15 » reste */
}
/* Téléphone : noyau, état et commande d'abord ; puis la décision, l'équipe, le journal ; puis priorité, système, mémoire. */
@media (max-width: 980px) {
  #app .vh--cockpit { --nv: min(calc(100vw - 64px), 340px); grid-template-columns: minmax(0, 1fr); grid-template-areas: "c" "r" "l"; row-gap: 12px; padding: 4px 0 24px; }
  #app .vh-lien { display: none; }
  html.rt body.survol-on .helmet { display: none !important; }
}