@import url('./crt.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2&text=%E2%97%86%E2%97%87%E2%96%B8%E2%96%BE%E2%97%8F%E2%96%AD%E2%98%85%E2%9C%93%E2%9C%97%E2%95%90%E2%86%BB%E2%80%BA%E2%86%97&display=swap');
/* LOT-HYBRID-03 · UI Kit canon · IBM Plex Mono latin subset (QCM Q1=C) · activation data/code typography */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap&subset=latin');

/* ═══════════════════════════════════════════════════════════
   RetroDex Design System — Tokens CSS
   Source canonique : DOCTRINE.md §V "Terminal diégétique"

   Ce fichier est chargé EN PREMIER dans toutes les pages.
   terminal.css (legacy) suit dans la cascade et override les
   noms identiques avec les mêmes valeurs — aucun changement
   visuel. Les noms propres à la doctrine (--rdx-phosphor,
   --rdx-size-*, composants) sont nouveaux et sans conflit.

   Migration progressive : remplacer les valeurs hardcodées
   par var(--rdx-...) dans les lots suivants.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ═══ PALETTE CRT (Doctrine §V) ═══ */
  --rdx-phosphor:         #D4C478;          /* nom canonique (sans E) */
  --rdx-phosphor-dim:     rgba(212, 196, 120, 0.7);
  --rdx-phosphor-off:     rgba(212, 196, 120, 0.15);
  --rdx-data-critical:    #FFD700;
  --rdx-signal-danger:    #FF4444;
  /* LOT-PALETTE-STRICT-01 2026-04-23 tardif · Split système vs marché.
     SYSTÈME (confiance, freshness, trust, validations, LEDs, states) -> olive mat.
     MARCHÉ (price deltas, trends, évolutions) -> vif + rouge vif.
     Règle d'arbitrage gravée : une valeur « OK » qui ne parle PAS de prix = olive.
     Une valeur qui parle d'un mouvement de prix haussier = market-up (vif).  */
  --rdx-signal-positive:    #506F4A;          /* olive mat · système/OK (ex #52C878) */
  --rdx-signal-market-up:   #52C878;          /* vert vif · marché haussier UNIQUEMENT */
  --rdx-signal-market-down: #FF4444;          /* rouge · marché baissier UNIQUEMENT (alias --rdx-signal-danger) */
  --rdx-cyan-connected:     #506F4A;          /* DEPRECATED v2 -> alias olive (était fusion #52C878) */
  /* LOT-PALETTE-V3 2026-04-22 nuit · blanc ambré léger body text + fond subtilement chaud */
  --rdx-text-body:        #E8E4D4;  /* blanc ambré léger · body paragraphes, descriptions, cards */
  --rdx-bg-terminal:      #080606;  /* noir subtilement chaud (R>G>B) · fond pages */
  --rdx-bg-panel:         #0C0A08;  /* panel un ton au-dessus · cohérent warm */
  --rdx-border:           #1A1613;  /* border warm sombre cohérent */

  /* ═══ TYPOGRAPHIE (Doctrine §V) ═══ */
  --rdx-font-system:      'VT323', 'Noto Sans Symbols 2', 'Courier New', monospace;
  --rdx-font-body:        'IBM Plex Sans', system-ui, sans-serif;
  --rdx-font-mono:        'IBM Plex Mono', 'Noto Sans Symbols 2', ui-monospace, monospace;
  --rdx-font-symbols:     'Noto Sans Symbols 2', 'VT323', monospace;

  /* LOT-TYPO-SCALE-UP 2026-04-23 · feedback operateur lisibilite
     +20% sur les petites tailles, hierarchie preservee proportionnellement.
     Ancien -> Nouveau:
       label 11 -> 13 (+18%)
       body  15 -> 17 (+13%)
       data  18 -> 20 (+11%)
       codec 13 -> 15 (+15%)
       badge 10 -> 12 (+20%)
       title 24 -> 26 (+8%)  (hero conserve, legere remontee proportion)
  */
  --rdx-size-title:       26px;
  --rdx-size-label:       13px;
  --rdx-size-body:        17px;
  --rdx-size-data:        20px;
  --rdx-size-codec:       15px;
  --rdx-size-badge:       12px;

  --rdx-weight-regular:   400;
  --rdx-weight-medium:    500;
  --rdx-weight-bold:      600;

  /* ═══ EFFETS CRT (Doctrine §V) ═══ */
  --rdx-scanline-opacity:   0.06;
  --rdx-scanline-header:    0.12;
  --rdx-grain-opacity:      0.03;
  --rdx-vignette-strength:  0.4;
  --rdx-glow:               0 0 8px rgba(212, 196, 120, 0.2);
  --rdx-glow-none:          none;

  /* ═══ ESPACEMENTS ═══
     LOT-SPACING-GOLD-03 2026-04-23 tardif · compactage -25% sur lg/xl/2xl
     feedback operateur 'trop d'espace entre les rubriques · harmoniser'.
     Valeurs anciennes : lg 24 / xl 32 / 2xl 48 → 18 / 24 / 32. */
  --rdx-space-xs:   4px;
  --rdx-space-sm:   8px;
  --rdx-space-md:   16px;
  --rdx-space-lg:   18px;
  --rdx-space-xl:   24px;
  --rdx-space-2xl:  32px;

  /* ═══ BORDURES & RAYONS ═══ */
  --rdx-border-width:  1px;
  --rdx-radius:        4px;   /* terminal.css: 4px — valeur alignée */
  --rdx-radius-card:   4px;

  /* ═══ TRANSITIONS ═══ */
  --rdx-transition-fast:  150ms ease;
  --rdx-transition-base:  300ms ease;

  /* ═══ ANIMATIONS ═══ */
  --rdx-anim-fast:    80ms;
  --rdx-anim-base:    200ms;
  --rdx-anim-slow:    400ms;
  --rdx-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --rdx-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --rdx-ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);  /* bounce élastique */

  /* ═══ COMPOSANTS ═══ */
  --rdx-card-bg:            var(--rdx-bg-panel);
  --rdx-card-border:        var(--rdx-border);
  --rdx-card-hover-border:  var(--rdx-phosphor-off);
  --rdx-accordion-bg:       var(--rdx-bg-panel);
  --rdx-button-bg:          transparent;
  --rdx-button-border:      var(--rdx-phosphor-dim);
  --rdx-button-text:        var(--rdx-phosphor);
  --rdx-button-hover-bg:    rgba(212, 196, 120, 0.08);
  --rdx-input-bg:           var(--rdx-bg-terminal);
  --rdx-input-border:       var(--rdx-border);
  --rdx-input-focus:        var(--rdx-phosphor-off);

  /* --- DS v1.2 canoniques (LOT-DS.1) + LOT-PALETTE-V3 warm bias --- */
  --rdx-bg: #080606;
  --rdx-bg-elev: #121010;
  --rdx-text-dim: #8a8780;
  /* LOT-PALETTE-STRICT v2 : tokens suivants DEPRECATED, alias vers canon.
     Conserves pour backward compat, a retirer ulterieurement. */
  --rdx-text-curator: rgba(212, 196, 120, 0.85); /* DEPRECATED v2 -> --rdx-phosphor-dim */
  --rdx-phosphor-ghost: rgba(212, 196, 120, 0.15);
  --rdx-phosphor-trace: rgba(212, 196, 120, 0.06);
  --rdx-codec-green: #D4C478; /* DEPRECATED v2 -> --rdx-phosphor (purge vert marker Erudit) */
  --rdx-codec-green-dim: rgba(212, 196, 120, 0.35); /* DEPRECATED v2 -> --rdx-phosphor-ghost */
  --rdx-dim: rgba(212, 196, 120, 0.28); /* DEPRECATED v2 -> --rdx-phosphor-off */
  --rdx-dim-soft: #3a3935;

  /* --- Alias bilatéral (préserve 22 usages --rdx-phosphor-off) --- */
  --rdx-phosphor-off: var(--rdx-phosphor-ghost);

  /* ═══════════════════════════════════════════════════════════
     LOT-GB-01 — Palette Game Boy DMG (opt-in)
     Rapport research/rapport_implementation_gameboy_neo_retro_prod.md
     Aucun effet sans body.theme-gameboy (voir remap ci-dessous).
     Pan Docs : 4 shades of green monochrome, ratio 160x144.
     ═══════════════════════════════════════════════════════════ */
  --rdx-gb-lcd-0:       #9bbc0f;   /* light green — fond ecran LCD */
  --rdx-gb-lcd-1:       #8bac0f;   /* mid-light green */
  --rdx-gb-lcd-2:       #306230;   /* mid-dark green */
  --rdx-gb-lcd-3:       #0f380f;   /* dark green — encre */
  --rdx-gb-lcd-1-hard:  #77a112;   /* variante high contrast */
  --rdx-gb-shell:       #c4c5bd;   /* gris shell DMG original */
  --rdx-gb-accent-red:  #8a1a1a;   /* LED power + bouton A/B */

  /* ═══════════════════════════════════════════════════════════
     LOT-J3-03 SKINS-GB-NES · Palette NES canonique (opt-in)
     Rouge iconique NES FamicomBox + gris shell US grey box.
     Aucun effet sans body.theme-nes (voir remap ci-dessous).
     Ratios contraste WCAG AA préservés.
     ═══════════════════════════════════════════════════════════ */
  --rdx-nes-red-bg:     #b71c1c;   /* rouge NES signature · bg */
  --rdx-nes-red-deep:   #7f1313;   /* rouge sombre · hover/actif */
  --rdx-nes-grey-shell: #8f8f8f;   /* gris shell NES US */
  --rdx-nes-grey-dark:  #3a3a3a;   /* gris sombre · encre */
  --rdx-nes-grey-light: #c4c4c4;   /* gris clair · surface élevée */
  --rdx-nes-white:      #f5f5f5;   /* blanc intégré · contraste texte */
  --rdx-nes-accent:     #e0a020;   /* jaune accent bouton A iconique */

  /* ═══════════════════════════════════════════════════════════
     LOT-B-SKIN-SNES · Palette Super Famicom JP (QCM Q5·C + Q6·B + Q7·A)
     Gris dominante + ABXY 4 couleurs canon · signature console JP.
     Remplace NES dans cycle switcher (Q6·B · cycle None/DMG/SNES).
     NES palette conservée en legacy CSS · plus dans cycle JS.
     Preserve contraste WCAG AA strict (Q7·A) : grey-dark (#2a2a2a) sur shell (#c8c5bd) ratio 8.6:1.
     ═══════════════════════════════════════════════════════════ */
  --rdx-snes-shell:      #c8c5bd;   /* gris shell SFC · beige-gris clair signature */
  --rdx-snes-shell-dark: #9a9790;   /* gris shell mid · panels */
  --rdx-snes-ink:        #2a2a2a;   /* gris sombre encre · texte body */
  --rdx-snes-ink-dim:    #4a4a4a;   /* gris encre mid · text-dim */
  --rdx-snes-btn-a:      #da3e3e;   /* bouton A rouge · accent critique/haut */
  --rdx-snes-btn-b:      #e0b828;   /* bouton B jaune · accent warn/signal */
  --rdx-snes-btn-x:      #3d7bb0;   /* bouton X bleu · accent info */
  --rdx-snes-btn-y:      #3a9f5a;   /* bouton Y vert · accent success */
  --rdx-snes-white:      #f5f3ec;   /* blanc cassé · bg-terminal */
}

/* ═══════════════════════════════════════════════════════════
   LOT-GB-01 — Remapping body.theme-gameboy
   Aliases repointes vers palette Game Boy. Sans theme actif :
   aucun changement (aliases LCD-* inutilises). Avec theme :
   --bg-* et --text-* passent en LCD et encre sombre.
   ═══════════════════════════════════════════════════════════ */
body.theme-gameboy {
  --rdx-bg:              var(--rdx-gb-lcd-0);
  --rdx-bg-terminal:     var(--rdx-gb-lcd-0);
  --rdx-bg-panel:        var(--rdx-gb-lcd-1);
  --rdx-bg-elev:         var(--rdx-gb-lcd-1-hard);
  --rdx-text-body:       var(--rdx-gb-lcd-3);
  --rdx-text-dim:        var(--rdx-gb-lcd-2);
  --rdx-text-curator:    var(--rdx-gb-lcd-3);
  --rdx-phosphor:        var(--rdx-gb-lcd-3);
  --rdx-phosphor-dim:    var(--rdx-gb-lcd-2);
  --rdx-phosphor-off:    rgba(15, 56, 15, 0.25);
  --rdx-phosphor-ghost:  rgba(15, 56, 15, 0.22);
  --rdx-phosphor-trace:  rgba(15, 56, 15, 0.08);
  --rdx-data-critical:   var(--rdx-gb-accent-red);
  --rdx-dim:             var(--rdx-gb-lcd-2);
  --rdx-border:          var(--rdx-gb-lcd-3);
  /* LOT-GB-PROOF-PASS — Neutralisation effets CRT/phosphor residuels en DMG.
     En theme Game Boy, les glows chaleureux olive doivent etre remplaces par
     un mini-glow LCD tres subtil. Scanline opacity remise a 0 pour coherence
     avec body.theme-gameboy::after (radial gradient vignette remplace bandes).
     Preserve contraste WCAG AA : LCD-3 (#0f380f) sur LCD-0 (#9bbc0f) ratio 13.6:1. */
  --rdx-glow-color:      rgba(15, 56, 15, 0.15);
  --rdx-glow-spread:     4px;
  --rdx-glow:            0 0 4px rgba(15, 56, 15, 0.1);
  --rdx-scanline-opacity: 0;
  --rdx-scanline-header: 0;
  /* Aliases legacy mappes aussi pour pages historiques */
  --bg:                  var(--rdx-gb-lcd-0);
  --bg-panel:            var(--rdx-gb-lcd-1);
  --text-primary:        var(--rdx-gb-lcd-3);
  --text-secondary:      var(--rdx-gb-lcd-2);
  --text-muted:          var(--rdx-gb-lcd-2);
  --accent:              var(--rdx-gb-lcd-3);
  --accent-dim:          var(--rdx-gb-lcd-2);
}

/* ═══════════════════════════════════════════════════════════
   LOT-J3-03 SKINS-GB-NES · Remapping body.theme-nes
   Palette NES rouge/gris canonique · contraste blanc/sombre.
   Preserve contraste WCAG AA : grey-dark (#3a3a3a) sur red-bg (#b71c1c) acceptable.
   ═══════════════════════════════════════════════════════════ */
body.theme-nes {
  --rdx-bg:              var(--rdx-nes-red-bg);
  --rdx-bg-terminal:     var(--rdx-nes-red-deep);
  --rdx-bg-panel:        var(--rdx-nes-grey-shell);
  --rdx-bg-elev:         var(--rdx-nes-grey-light);
  --rdx-text-body:       var(--rdx-nes-white);
  --rdx-text-dim:        var(--rdx-nes-grey-light);
  --rdx-text-curator:    var(--rdx-nes-white);
  --rdx-phosphor:        var(--rdx-nes-accent);
  --rdx-phosphor-dim:    var(--rdx-nes-grey-light);
  --rdx-phosphor-off:    rgba(245, 245, 245, 0.35);
  --rdx-phosphor-ghost:  rgba(245, 245, 245, 0.22);
  --rdx-phosphor-trace:  rgba(245, 245, 245, 0.08);
  --rdx-data-critical:   var(--rdx-nes-accent);
  --rdx-dim:             var(--rdx-nes-grey-light);
  --rdx-border:          var(--rdx-nes-grey-dark);
  --rdx-glow-color:      rgba(224, 160, 32, 0.25);
  --rdx-glow-spread:     4px;
  --rdx-glow:            0 0 4px rgba(224, 160, 32, 0.18);
  --rdx-scanline-opacity: 0.04;
  --rdx-scanline-header: 0.04;
  /* Aliases legacy pages historiques */
  --bg:                  var(--rdx-nes-red-bg);
  --bg-panel:            var(--rdx-nes-grey-shell);
  --text-primary:        var(--rdx-nes-white);
  --text-secondary:      var(--rdx-nes-grey-light);
  --text-muted:          var(--rdx-nes-grey-light);
  --accent:              var(--rdx-nes-accent);
  --accent-dim:          var(--rdx-nes-grey-light);
}

/* ═══════════════════════════════════════════════════════════
   LOT-B-SKIN-SNES · Remapping body.theme-snes (QCM Q5·C + Q6·B + Q7·A)
   Palette Super Famicom JP · gris shell dominante + ABXY 4 couleurs accents.
   Preserve contraste WCAG AA strict : ink (#2a2a2a) sur shell (#c8c5bd) ratio 8.6:1.
   ABXY utilisés comme accents thématiques :
   - A rouge → data-critical / signal-negative
   - B jaune → phosphor / accent-warn
   - X bleu → erudit-cyan / info
   - Y vert → signal-positive / success
   ═══════════════════════════════════════════════════════════ */
body.theme-snes {
  --rdx-bg:              var(--rdx-snes-shell);
  --rdx-bg-terminal:     var(--rdx-snes-white);
  --rdx-bg-panel:        var(--rdx-snes-shell-dark);
  --rdx-bg-elev:         var(--rdx-snes-shell);
  --rdx-text-body:       var(--rdx-snes-ink);
  --rdx-text-dim:        var(--rdx-snes-ink-dim);
  --rdx-text-curator:    var(--rdx-snes-ink);
  --rdx-phosphor:        var(--rdx-snes-btn-b);
  --rdx-phosphor-dim:    var(--rdx-snes-ink-dim);
  --rdx-phosphor-off:    rgba(42, 42, 42, 0.25);
  --rdx-phosphor-ghost:  rgba(42, 42, 42, 0.18);
  --rdx-phosphor-trace:  rgba(42, 42, 42, 0.08);
  --rdx-data-critical:   var(--rdx-snes-btn-a);
  --rdx-signal-positive: var(--rdx-snes-btn-y);
  --rdx-signal-negative: var(--rdx-snes-btn-a);
  --rdx-erudit-cyan:     var(--rdx-snes-btn-x);
  --rdx-dim:             var(--rdx-snes-ink-dim);
  --rdx-border:          var(--rdx-snes-ink);
  --rdx-glow-color:      rgba(42, 42, 42, 0.15);
  --rdx-glow-spread:     3px;
  --rdx-glow:            0 0 3px rgba(42, 42, 42, 0.1);
  --rdx-scanline-opacity: 0.03;
  --rdx-scanline-header: 0.03;
  /* Aliases legacy pages historiques */
  --bg:                  var(--rdx-snes-shell);
  --bg-panel:            var(--rdx-snes-shell-dark);
  --text-primary:        var(--rdx-snes-ink);
  --text-secondary:      var(--rdx-snes-ink-dim);
  --text-muted:          var(--rdx-snes-ink-dim);
  --accent:              var(--rdx-snes-btn-b);
  --accent-dim:          var(--rdx-snes-ink-dim);
}

/* --- DS v1.2 §B — Glyphes Unicode (LOT-DS.2) --- */
[data-glyph], .rdx-glyph {
  font-family: var(--rdx-font-symbols) !important;
}

/* ═══════════════════════════════════════════════════════════
   LOT-HYBRID-03 · Classes utilitaires typo UI Kit (QCM Q10=A foundation)
   Strictement ADDITIVES · zéro duplication.
   Note canon : .rdx-title / .rdx-label / .rdx-badge / .rdx-data sont
   déjà définies dans terminal.css (Doctrine §V) · NE PAS redéclarer
   ici pour préserver la cohérence VT323. Seuls les helpers absents
   du canon actuel (.rdx-body · .rdx-prompt) sont introduits.
   ═══════════════════════════════════════════════════════════ */

/* Body · reading-optimized · mix system-ui / IBM Plex Sans fallback */
.rdx-body {
  font-family: var(--rdx-font-body);
  font-size: var(--rdx-size-codec);
  color: var(--rdx-text-body);
  line-height: 1.55;
}

/* Terminal prompt convention · "> " prefix canonique */
.rdx-prompt::before {
  content: '> ';
  color: var(--rdx-phosphor-dim);
}