@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)

   Alignées par un chemin à part :
     - Eos_db/Fiche_Perso/*             (deux thèmes — voir plus bas)

   Hors périmètre, volontairement non aligné :
     - Phobos_Campaign/SSP_Intervention (Dispatcher : ses couleurs
       encodent l'urgence et les factions, elles portent du sens)

   Le cas de Fiche_Perso : ses trois fiches sont des documents A4 qu'on
   imprime. Elles ne chargent donc pas ce fichier — il impose à html et
   body un `height: 100%` et un `overflow: hidden` qui leur ôteraient
   leur défilement, et ses effets d'ambiance en `position: fixed` se
   retrouveraient sur la première page de toute impression. La palette
   ci-dessous y est recopiée dans Eos_db/Fiche_Perso/css/fiche-site.css,
   sous un `@media screen` : à l'écran les fiches suivent la charte, à
   l'impression elles retrouvent leur thème clair d'origine, économe en
   encre. Toute retouche de palette ici est donc à reporter là-bas.
   Leur shell, EOS-Main.html, charge bien ce fichier et socle.css.

   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;

    /* Administration — tout ce qui appartient au MJ, camouflé derrière une
       interface d'administration : portail d'un dossier citoyen, résumé d'une
       enquête, et les outils à venir. Un violet, parce que le doré se
       confondait avec le dossier militaire dans la barre d'onglets de
       citoyen.html, où la couleur est née.

       ⚠ La variante -rgb existe parce qu'un hexadécimal ne peut pas alimenter
       un rgba() : la teinte sert autant pleine qu'en transparence. Les deux
       vont ensemble — changer l'une sans l'autre ferait diverger le plein du
       transparent. */
    --accent-admin: #a77dd6;
    --accent-admin-rgb: 167, 125, 214;

    /* --- 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; }
}