/* jeudirole — thème Expanse « Void Blue » (UNN_CIC_OS_v4.2)
   Palette + décor partagés par toutes les pages The Expanse.
   S'utilise avec shared/expanse-nav.js (barre latérale mutualisée). */

:root {
  /* Palette Void Blue (issue de l'export Stitch / DESIGN.md) */
  --exp-bg:                 #020617;
  --exp-surface:            #051424;
  --exp-surface-low:        #0d1c2d;
  --exp-surface-container:  #122131;
  --exp-surface-high:       #1c2b3c;
  --exp-on-surface:         #d4e4fa;
  --exp-on-surface-variant: #bbc9cd;
  --exp-outline:            #3c494c;
  --exp-primary:            #8aebff; /* titres / texte accent      */
  --exp-primary-container:  #22d3ee; /* chrome / bordures / actif   */
  --exp-on-primary:         #00363e;
  --exp-gold:               #c9a84c; /* MJ / override               */
  --exp-gold-chip:          #fdd977;
  --exp-error:              #ffb4ab;

  /* Largeur de la barre latérale mutualisée (lue aussi par expanse-nav.js) */
  --xnav-w: 256px;
}

/* ---- Fond « void blue » + grille vectorielle ---------------------------- */
body.exp-theme {
  background-color: var(--exp-bg);
  background-image:
    linear-gradient(rgba(34, 211, 238, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  color: var(--exp-on-surface);
}

/* Décalage pour la barre latérale (desktop) */
@media (min-width: 768px) {
  body.exp-theme { padding-left: var(--xnav-w); }
}

/* ---- Overlays CRT ------------------------------------------------------- */
.exp-scanline {
  position: fixed;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(0deg,
    rgba(34, 211, 238, 0) 0%,
    rgba(34, 211, 238, 0.10) 50%,
    rgba(34, 211, 238, 0) 100%);
  opacity: 0.3;
  bottom: 100%;
  pointer-events: none;
  z-index: 50;
  animation: exp-scanline 8s linear infinite;
}
@keyframes exp-scanline {
  0%   { bottom: 100%; }
  100% { bottom: -100px; }
}

.exp-radial-glow {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150vw;
  height: 150vh;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.05) 0%, rgba(2, 6, 23, 0) 70%);
  pointer-events: none;
  z-index: -1;
}

/* ---- Forme angulaire « hard-surface » ----------------------------------- */
.clip-corner {
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

/* ---- Badge / chip cyan plein (labels d'épisode, statuts) ---------------- */
.exp-chip {
  display: inline-block;
  background: var(--exp-primary);
  color: var(--exp-on-primary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 2px 8px;
}