/* Masterchief InfoSec : styles propres, jetons du kit MASTERCHIEF-DESIGN (kit/tokens.css).
   Mode clair : on redéfinit les jetons --orb-* ; le mode sombre est celui du kit. */
:root[data-theme='light'] {
  color-scheme: light;
  --orb-void: #f6f6f1; --orb-ink: #15150f; --orb-panel: rgba(255,255,255,.8); --orb-panel-solid: #fff;
  --orb-panel-nav: rgba(255,255,255,.9); --orb-glass: rgba(0,0,0,.03); --orb-glass-hover: rgba(0,0,0,.06);
  --orb-line: rgba(0,0,0,.10); --orb-line-strong: rgba(0,0,0,.20);
  --orb-lemon: #5a6b00; --orb-lemon-soft: #6f8300; --orb-lemon-dim: rgba(90,107,0,.12); --orb-lemon-line: rgba(90,107,0,.4);
  --orb-text: #15150f; --orb-text-2: #4a4a43; --orb-text-3: #5f5f57;
  --orb-danger: #c0372b; --orb-warn: #9a6200; --orb-ok: #1d7a43; --orb-info: #1f5fa8;
  --orb-halo-top: rgba(90,107,0,.07); --orb-halo-low: rgba(0,0,0,.03); --orb-halo-left: transparent;
  --orb-shadow-panel: 0 8px 24px rgba(0,0,0,.08); --orb-grain-opacity: 0;
}
:root[data-theme='light'] .orb-card { background: #fff; }
:root[data-theme='light'] .orb-cosmos { display: none; }
:root[data-theme='light'] .mc-powered { background: #fff; }
:root[data-theme='light'] .orb-btn--primary, :root[data-theme='light'] ::selection { color: #fff; }

.app { max-width: 480px; margin: 0 auto; padding: 16px 16px 40px; position: relative; z-index: var(--orb-z-content); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.top h1 { font-size: 24px; line-height: 1.1; margin: 8px 0 4px; font-weight: 600; }
.sub { color: var(--orb-text-2); font-size: var(--orb-text-sm); margin: 0 0 16px; }
.demo-tag { margin-left: 8px; color: var(--orb-warn); font: 600 11px var(--orb-font-mono); }
.sec { padding: 16px; margin-bottom: 12px; }
.sec h2 { margin: 8px 0 12px; font-size: var(--orb-text-lg); font-weight: 600; }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid var(--orb-line); font-size: var(--orb-text-sm); }
.row small { display: block; color: var(--orb-text-3); font-size: var(--orb-text-xs); margin-top: 3px; word-break: break-all; }
.mono { font-family: var(--orb-font-mono); }
.sev { font: 600 11px var(--orb-font-mono); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.sev.critique, .sev.haute { color: var(--orb-danger); }
.sev.moyenne { color: var(--orb-warn); }
.sev.basse { color: var(--orb-info); }
.ok { color: var(--orb-ok); }
.ko { color: var(--orb-danger); }
.big { font: 600 28px var(--orb-font-display); letter-spacing: 0; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.grid4 div { text-align: center; padding: 10px 4px; border: 1px solid var(--orb-line); border-radius: var(--orb-radius-md); }
.grid4 span { display: block; font: 600 10px var(--orb-font-mono); text-transform: uppercase; color: var(--orb-text-2); margin-top: 4px; }
.vide { color: var(--orb-text-3); font-size: var(--orb-text-sm); margin: 0; }
.theme-btn { min-height: 44px; min-width: 44px; justify-content: center; }
footer { margin-top: 24px; display: flex; justify-content: center; }