@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap');

/* ===================================================================
   EOS — Charte graphique commune
   ===================================================================
   Source unique de la palette, de la typographie et des effets
   d'ambiance, partagée par :
     - Eos/index.php                    (accueil racine)
     - Eos_db/index.html                (accueil personnage)
     - Eos_db/Crea_Perso/index-crea.php (création narrative)
     - Phobos_Campaign/**.html          (Station Point Zéro, 17 pages)

   Hors périmètre, volontairement non alignés :
     - Eos_db/Fiche_Perso/*             (thème clair « dossier »)
     - Phobos_Campaign/SSP_Intervention (Dispatcher : ses couleurs
       encodent l'urgence et les factions, elles portent du sens)

   Direction artistique reprise de Crea_Perso : terminal officiel des
   Nations Unies façon « The Expanse » — holographie bleu/glace sur
   fond bleu nuit profond, lignes fines type HUD, sobriété
   gouvernementale plutôt que néon cyberpunk.
   =================================================================== */

:root {
    /* --- Fonds et surfaces --- */
    --bg-void: #060a10;
    --panel-steel: #0d1620;
    --panel-steel-light: #16212e;
    --input-bg: #0a1119;
    --border-hairline: #22303d;
    --border-hairline-bright: #33475a;

    /* --- Accents --- */
    --accent-un-blue: #4c8fd1;
    --accent-un-blue-dim: #1f3a52;
    --accent-ice: #8fd9e8;
    --accent-alert: #e2574c;
    --accent-alert-dim: #7a2b25;
    --accent-success: #5fd68a;
    --accent-gold: #cda449;
    --accent-gold-bright: #f0d68a;

    /* --- Texte --- */
    --text-primary: #e9eef3;
    --text-secondary: #aab9c7;
    --text-muted: #7e93a6;
    --text-faint: #45566a;

    /* --- Typographie ---
       Polices web plutôt que polices système : le site est destiné à
       être mis en ligne, or 'Bahnschrift' et 'Cascadia Mono' ne sont
       livrées qu'avec Windows. Elles restent en repli, le rendu ne
       change donc pas sur une machine Windows hors ligne. */
    --font-display: 'Barlow Condensed', 'Bahnschrift', 'Arial Narrow', 'Segoe UI Semibold', sans-serif;
    --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, 'SFMono-Regular', Menlo, monospace;

    --radius-sm: 2px;
    --transition-fast: 180ms;
    --transition-screen: 480ms;

    /* --- Alias de compatibilité ---
       Les 17 pages de Point Zéro portaient leur propre jeu de noms,
       consommé par plus d'un millier de var(). Plutôt que de réécrire
       chacun de ces appels, on redirige les anciens noms vers la
       charte : un seul point de vérité, aucun risque de rupture.
       Pour tout nouveau code, utiliser les noms ci-dessus. */
    --bg: var(--bg-void);
    --blue: var(--accent-un-blue);
    --blue-dim: var(--accent-un-blue-dim);
    --red: var(--accent-alert);
    --red-dim: var(--accent-alert-dim);
    --green: var(--accent-success);
    --orange: var(--accent-gold);
    --white: var(--text-primary);
    --silver: var(--text-secondary);
    --silver2: var(--text-muted);
    --panel: rgba(13, 22, 32, 0.88);
}

/* -------------------------------------------------------------------
   Base
   ------------------------------------------------------------------- */
/* height + overflow: hidden sont indispensables au gabarit du cadre —
   ils suppriment le défilement de page pour que seul le contenu du
   cadre défile, et garantissent que les marges où passe le faisceau de
   scan restent visibles en permanence. */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: var(--bg-void);
    color: var(--text-primary);
    font-family: var(--font-body);
}

* { box-sizing: border-box; }

/* Garantit que l'attribut `hidden` masque toujours l'élément, même si
   une classe lui impose par ailleurs un display fixe (flex/grid). */
[hidden] { display: none !important; }

body {
    background-image:
        radial-gradient(circle at 15% 10%, rgba(143, 217, 232, 0.05), transparent 40%),
        radial-gradient(circle at 85% 90%, rgba(76, 143, 209, 0.06), transparent 45%);
}

::selection { background: var(--accent-un-blue); color: #14181d; }

button, input, select, textarea { font-family: inherit; }

:focus-visible {
    outline: 2px solid var(--accent-ice);
    outline-offset: 2px;
}

/* -------------------------------------------------------------------
   Ambiance holographique — grille, faisceau de scan, scanlines.

   Portées par des pseudo-éléments plutôt que par des <div> : les trois
   couches s'appliquent ainsi à toutes les pages sans qu'aucune n'ait
   à ajouter le moindre élément dans son HTML. `html` en fournit une,
   `body` deux.
   ------------------------------------------------------------------- */

/* Grille technologique ambiante (triple trame 0°/60°/120°) */
html::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    opacity: 0.05;
    background-image:
        repeating-linear-gradient(0deg, var(--accent-un-blue) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(60deg, var(--accent-un-blue) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(120deg, var(--accent-un-blue) 0 1px, transparent 1px 64px);
    animation: hexgrid-drift 50s linear infinite;
}
@keyframes hexgrid-drift {
    from { background-position: 0 0, 0 0, 0 0; }
    to   { background-position: 128px 0, 128px 74px, -128px 74px; }
}

/* Faisceau de scan persistant, descend en 7 s */
body::before {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    top: -2px;
    height: 2px;
    z-index: 200;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--accent-ice), transparent);
    mix-blend-mode: screen;
    animation: holo-scan-move 7s linear infinite;
}
@keyframes holo-scan-move {
    0%   { top: -2px; opacity: 0; }
    5%   { opacity: 0.55; }
    95%  { opacity: 0.55; }
    100% { top: 100%; opacity: 0; }
}

/* Scanlines ambiantes */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 500;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.014) 0px,
        rgba(255, 255, 255, 0.014) 1px,
        transparent 1px,
        transparent 3px
    );
    mix-blend-mode: overlay;
}

@media (prefers-reduced-motion: reduce) {
    html::before, body::before { animation: none !important; }
    body::before { opacity: 0; }
}