/* ===================================================================
   EOS — Fiche_Perso : thème « site »
   ===================================================================
   Partagé par les trois fiches (personnage, équipement, implants).
   Il ne fait que RE-COLORER : aucune règle de mise en page ici, aucune
   taille, aucune marge. Le gabarit A4 de 794 x 1123 px reste
   entièrement défini par le CSS local de chaque fiche, et reste donc
   rigoureusement le même dans les deux thèmes.

   ── Le mécanisme, en une ligne ──
   Tout ce fichier vit dans un `@media screen`. Le media `print` ne le
   voit donc jamais : à l'impression comme dans l'aperçu, seul le
   `:root` clair d'origine s'applique et la fiche retrouve d'elle-même
   son apparence « dossier papier », quel que soit le thème affiché à
   l'écran. Aucun JavaScript n'intervient dans cette bascule, et le
   thème papier n'a besoin d'aucune règle de rattrapage : il est
   littéralement le CSS d'avant, intouché.

   C'est aussi ce qui rend l'export PDF sûr. `eosGetPageHTML()` recopie
   les <link> et les <style> de la fiche dans la fenêtre d'impression ;
   ce fichier y est donc recopié lui aussi, mais sans effet — la fenêtre
   ne porte pas l'attribut `data-theme` et n'imprime qu'en media print.

   Palette reprise de ../../../css/eos.css. Les valeurs y sont
   dupliquées et non importées : eos.css impose aussi `height: 100%` et
   `overflow: hidden` à html/body, ce qui supprimerait le défilement de
   la fiche, et ses effets d'ambiance en `position: fixed` se
   retrouveraient sur la première page de tout export PDF.
   =================================================================== */

@media screen {

/* -------------------------------------------------------------------
   1. Palette

   Les noms restent ceux du thème papier : les trois fiches les
   consomment par centaines et ne sont pas modifiées. Seules changent
   les valeurs.
   ------------------------------------------------------------------- */
html[data-theme="site"] {
  /* Fonds — du plus profond au plus clair */
  --bg:          #060a10;   /* marge autour de la fiche  (--bg-void)    */
  --surface:     #0c141d;   /* corps de la page A4                      */
  --panel:       #101b26;   /* blocs et cartes                          */
  --panel-alt:   #16212e;   /* rangées alternées (--panel-steel-light)  */
  --panel-dark:  #0a1119;   /* creux, barres de statut  (--input-bg)    */

  /* Accents.
     --un-blue reste vif : c'est lui qui porte les traits, les titres et
     les LED, et il doit ressortir sur le fond sombre. --un-dark, qui
     servait de bleu « institutionnel » profond, devient le fond des
     bandeaux ; les quelques endroits où il servait de couleur de TEXTE
     sont rattrapés en section 4. */
  --un-blue:     #4c8fd1;   /* --accent-un-blue                         */
  --un-dark:     #16283a;   /* fond de bandeau                          */
  --un-mid:      #6ba9e0;
  --un-pale:     rgba(76, 143, 209, 0.16);  /* fond de focus / survol   */
  --un-pale2:    rgba(76, 143, 209, 0.26);

  /* Bordures */
  --bd:          #22303d;   /* --border-hairline                        */
  --bd-mid:      #33475a;   /* --border-hairline-bright                 */
  --bd-blue:     #4c8fd1;
  --bd-focus:    #8fd9e8;   /* --accent-ice                             */

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

  /* Statut */
  --green:       #5fd68a;   /* --accent-success                         */
  --orange:      #cda449;   /* --accent-gold                            */
  --red:         #e2574c;   /* --accent-alert                           */

  /* Fiche implants */
  --nano:        #5fd68a;
  --nano-pale:   rgba(95, 214, 138, 0.12);

  /* Bleu d'aplat : là où le bleu est un FOND portant du texte blanc, il
     doit s'effacer au lieu d'éclairer. Le vif reste réservé aux traits. */
  --un-fill:     #1f3a52;   /* --accent-un-blue-dim                     */

  color-scheme: dark;
}

/* La typographie ne change pas.
   Barlow Condensed et JetBrains Mono, polices de la charte, n'ont pas
   la même chasse qu'Oswald et DM Mono : les adopter ici décalerait la
   mise en page à l'écran sans la décaler au papier, et l'aperçu ne
   garantirait plus qu'une fiche pleine tient sur sa page. Le chrome de
   EOS-Main.html, lui, n'est jamais imprimé et porte bien les polices
   de la charte. */


/* -------------------------------------------------------------------
   2. Ambiance holographique

   Deux couches seulement — grille et scanlines — reprises de
   css/eos.css mais portées par le document de la fiche : celle-ci est
   chargée en <iframe> opaque, et l'ambiance du parent ne la traverse
   pas. Elle suit donc la fiche, qu'elle soit dans EOS-Main.html ou
   ouverte seule.

   Le faisceau de scan, lui, reste au shell : voir plus bas.
   ------------------------------------------------------------------- */
html[data-theme="site"] { background: var(--bg); }
html[data-theme="site"] body { background: transparent; }

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

/* Pas de faisceau de scan ici — volontairement.
   eos.css en pose déjà un sur le document du shell, qui balaie les
   marges autour du cadre. En ajouter un second dans la fiche le faisait
   passer DERRIÈRE le document lui-même, et deux faisceaux désynchronisés
   traversaient l'écran. Le balayage reste donc à l'extérieur du cadre,
   là où il anime le fond sans gêner la lecture de la fiche.

   Conséquence assumée : une fiche ouverte seule, hors du shell, n'a pas
   de faisceau. Elle garde la grille et les scanlines. */

/* Scanlines — au-dessus de la fiche, sous les fenêtres modales
   (z-index 1000) et le toast de jet de dé (9999). */
html[data-theme="site"] 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[data-theme="site"]::before { animation: none !important; }
}


/* -------------------------------------------------------------------
   3. Le bloc A4 devient un panneau holographique

   Mêmes 794 x 1123 px, même position : seuls le fond, le filet et
   l'ombre changent, plus quatre équerres de coin reprises du cadre
   terminal. Comme dans socle.css, elles chevauchent le bandeau
   supérieur — c'est le comportement de `.frame-corner` sur
   `.terminal-header`.
   ------------------------------------------------------------------- */
html[data-theme="site"] .page {
  background: var(--surface);
  border-color: var(--bd);
  box-shadow:
    0 0 0 1px rgba(76, 143, 209, 0.05),
    0 30px 90px rgba(0, 0, 0, 0.6);
}

/* Équerres de coin. Un seul pseudo-élément et huit dégradés plutôt que
   quatre éléments : le HTML des fiches n'est pas modifié. z-index 40
   pour passer au-dessus de la ligne de charge (30) et du bandeau (10). */
html[data-theme="site"] .page::after {
  content: '';
  position: absolute;
  inset: 9px;
  z-index: 40;
  pointer-events: none;
  --eq: rgba(143, 217, 232, 0.30);
  background:
    linear-gradient(var(--eq), var(--eq)) left  top    / 18px 1px no-repeat,
    linear-gradient(var(--eq), var(--eq)) left  top    / 1px 18px no-repeat,
    linear-gradient(var(--eq), var(--eq)) right top    / 18px 1px no-repeat,
    linear-gradient(var(--eq), var(--eq)) right top    / 1px 18px no-repeat,
    linear-gradient(var(--eq), var(--eq)) left  bottom / 18px 1px no-repeat,
    linear-gradient(var(--eq), var(--eq)) left  bottom / 1px 18px no-repeat,
    linear-gradient(var(--eq), var(--eq)) right bottom / 18px 1px no-repeat,
    linear-gradient(var(--eq), var(--eq)) right bottom / 1px 18px no-repeat;
}

/* Le globe en filigrane est tracé en #009EDB à 4 % : sur fond clair il
   se devine, sur fond sombre il disparaît. */
html[data-theme="site"] .watermark {
  opacity: 0.10;
  filter: brightness(1.5);
}

/* Tampon CONFIDENTIEL — même raison, il était tracé en bleu sombre. */
html[data-theme="site"] .confid-stamp { color: rgba(143, 217, 232, 0.05); }


/* -------------------------------------------------------------------
   4. Rattrapages

   Quelques tokens changent de rôle entre les deux thèmes : une couleur
   qui était un fond clair sert de texte, ou l'inverse. La redéfinition
   de palette ne peut pas les couvrir tous les deux à la fois, on les
   traite donc un par un. Il y en a peu, et ils sont tous listés ici.
   ------------------------------------------------------------------- */

/* --un-dark en couleur de TEXTE. En papier c'est un bleu profond posé
   sur du blanc ; en site il est devenu un fond de bandeau et deviendrait
   illisible. Ces occurrences passent au bleu glace. */
html[data-theme="site"] .sbar-item .val,
html[data-theme="site"] .footer-id strong,
html[data-theme="site"] .sync-value-display,
html[data-theme="site"] .sync-icon svg,
html[data-theme="site"] .detail-name,
html[data-theme="site"] .detail-row-val.accent,
html[data-theme="site"] .modal-footer-info strong,
html[data-theme="site"] .cat-btn.active .cat-btn-text,
html[data-theme="site"] .gender-label.active,
html[data-theme="site"] .btn-json-export,
html[data-theme="site"] .btn-json-import:hover { color: var(--bd-focus); }

/* --panel en couleur de TEXTE, sur les onglets biseautés des titres de
   section et de sous-section. En papier --panel vaut #ffffff : le titre
   est donc blanc sur bleu profond. En site il deviendrait un bleu nuit
   posé sur un autre bleu nuit — on retrouve le quasi-blanc d'origine.
   Les trois fiches nomment cet élément différemment. */
html[data-theme="site"] .section-label-text,
html[data-theme="site"] .subsection-label-text,
html[data-theme="site"] .subsec-title { color: var(--ink); }

/* Aplats bleus assez larges pour éclairer la page. Le vif est conservé
   partout ailleurs (LED, barres de progression, curseurs, boutons). */
html[data-theme="site"] .classif-banner {
  background: var(--un-fill);
  color: var(--bd-focus);
  border-bottom-color: var(--bd);
}
html[data-theme="site"] .char-header {
  background: var(--un-fill);
  box-shadow: inset 0 -1px 0 var(--un-blue);
}

/* Survols et mélanges calculés sur du blanc. */
html[data-theme="site"] .hp-radio-label:hover {
  background: color-mix(in srgb, var(--zone-color, var(--un-blue)) 28%, var(--panel));
}
html[data-theme="site"] .hud-toggle input:checked + label::before {
  background: var(--ink);
  border-color: var(--ink);
}

/* Zones d'état et modules HUD : teintes fixes calibrées pour le papier,
   trop sombres sur fond bleu nuit. */
html[data-theme="site"] .hud-panel[data-mod="vision"] { --hp-color: #58b4e8; }
html[data-theme="site"] .hud-panel[data-mod="com"]    { --hp-color: #6cc3d8; }
html[data-theme="site"] .hud-panel[data-mod="move"]   { --hp-color: #7aa8d4; }
html[data-theme="site"] .hud-panel[data-mod="armor"]  { --hp-color: #4c9fd8; }
html[data-theme="site"] .hud-panel[data-mod="fw"]     { --hp-color: #8b93e0; }
html[data-theme="site"] .hp-level.zone-scratch        { --zone-color: #6cc3d8; }
html[data-theme="site"] .hp-level.zone-serious        { --zone-color: #7aa8d4; }
html[data-theme="site"] .hp-level.zone-ms-trouble     { --zone-color: #a78bfa; }
html[data-theme="site"] .hp-level.zone-ms-ebranle     { --zone-color: #9061e8; }

/* Vignettes d'objet. Les quatre portent un fond clair en dur — #f4f8fc,
   #f0f6fb, ou un dégradé — parce qu'elles reçoivent des PNG détourés
   sur blanc : les passer en sombre rendrait les objets invisibles. Le
   fond reste donc clair, mais assourdi, sinon ce sont quatre taches
   lumineuses au milieu d'une page bleu nuit. Le raccourci `background`
   écrase aussi les dégradés des deux dernières. */
html[data-theme="site"] .equip-img-zone,     /* liste d'équipement   */
html[data-theme="site"] .item-btn-thumb,     /* liste de la modale   */
html[data-theme="site"] .detail-img-zone,    /* détail de la modale  */
html[data-theme="site"] .slot-card-img {     /* emplacement rempli   */
  background: #dde7f0;
}

/* Barre de défilement, alignée sur celle du cadre terminal. */
html[data-theme="site"] ::-webkit-scrollbar       { width: 8px; height: 8px; }
html[data-theme="site"] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme="site"] ::-webkit-scrollbar-thumb {
  background: var(--bd-mid);
  border-radius: 4px;
}

html[data-theme="site"] :focus-visible {
  outline: 2px solid var(--bd-focus);
  outline-offset: 2px;
}

} /* fin @media screen */