/* =====================================================
   GLACIAL NOIR — ERNST JÜNGER ARCHIVE
   Dark cinematic theme : bleu nuit profond, navy, glace.
   -----------------------------------------------------
   Couche unique chargée APRÈS archive.css (base déjà sombre).
   Aucune modification de structure / layout / typo (tailles) /
   animations / responsive. Couleur, profondeur, overlays, contrastes.
   Réversible : retirer ce <link> restaure la base archive.css.
   ===================================================== */

:root {
  /* --- Palette glaciale (froid, profond, cinématographique) --- */
  --gl-abyss:        #060B11;   /* le plus profond — footer */
  --gl-navy:         #0A131C;   /* fond de page */
  --gl-navy-2:       #0E1A26;   /* fond secondaire */
  --gl-panel:        #11212F;   /* surface des cartes */
  --gl-panel-2:      #16293A;   /* survol carte */
  --gl-steel:        #92A6B4;   /* texte secondaire (acier) */
  --gl-ice:          #E9F2F7;   /* texte principal (glace) */
  --gl-ice-bright:   #F5FAFC;   /* titres (autorité) */
  --gl-glacier:      #8FC1DB;   /* accent bleu glacier */
  --gl-glacier-soft: #B7D9E9;
  --gl-frost:        #D2E5EF;   /* remplissage glace (boutons) */
  --gl-border:       rgba(176, 205, 221, 0.15);
  --gl-border-strong:rgba(176, 205, 221, 0.30);

  /* --- Remap des variables sémantiques d'archive.css --- */
  --bg: var(--gl-navy);
  --bg-2: var(--gl-navy-2);
  --surface: var(--gl-panel);
  --surface-2: var(--gl-panel-2);
  --border: var(--gl-border);
  --border-strong: var(--gl-border-strong);
  --text: var(--gl-ice);
  --muted: var(--gl-steel);
  --color-cool-gray: #AEBECA;
  --color-ivory-mist: var(--gl-ice);
  --gold: var(--gl-glacier);          /* l'accent n'est plus or mais glacier */
  --gold-soft: var(--gl-glacier-soft);
}

/* ---------- Base & rendu ---------- */
html { scrollbar-width: thin; scrollbar-color: #2A3D4C var(--gl-navy); }
body {
  background: var(--gl-navy);
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}
::selection { background: var(--gl-glacier); color: var(--gl-navy); }
a { transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--gl-navy); }
::-webkit-scrollbar-thumb { background: #2A3D4C; border: 3px solid var(--gl-navy); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #3A5167; }

/* Profondeur : lueur froide haute + vignette cinématographique */
body::before {
  background:
    radial-gradient(120% 75% at 50% -8%, rgba(34, 64, 90, 0.55), transparent 60%),
    radial-gradient(85% 55% at 100% 2%, rgba(60, 96, 122, 0.16), transparent 55%),
    radial-gradient(135% 110% at 50% 38%, transparent 52%, rgba(3, 6, 10, 0.55) 100%);
}

/* Titres : glace lumineuse (autorité) */
.ej-section-title, .ej-card-title, .ej-era-title, .ej-work-title, .ej-quote-text { color: var(--gl-ice-bright); }

/* ==========================================================================
   NAVIGATION — verre froid sombre
   ========================================================================== */
.ej-logo img { filter: none; }      /* wordmark blanc d'origine → glace sur navy */
.ej-nav-link { transition: color 200ms cubic-bezier(0.22,1,0.36,1); }
.ej-nav-link:hover { color: var(--gl-ice); }
.ej-nav.is-scrolled {
  background: rgba(10, 19, 28, 0.62);
  -webkit-backdrop-filter: saturate(120%) blur(18px);
  backdrop-filter: saturate(120%) blur(18px);
  border-bottom: 1px solid var(--gl-border);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   HERO — étalonnage froid, profond, cinématographique
   ========================================================================== */
.ej-hero-bg img { opacity: 1; filter: brightness(0.62) contrast(1.12) saturate(0.42); }
.ej-hero-bg::after {
  background:
    linear-gradient(180deg, rgba(6,11,17,0.55) 0%, rgba(10,19,28,0.30) 35%, rgba(6,11,17,0.86) 100%),
    radial-gradient(120% 85% at 50% 34%, rgba(34, 64, 90, 0.28) 0%, transparent 55%),
    radial-gradient(130% 100% at 50% 50%, transparent 48%, rgba(3, 6, 10, 0.62) 100%);
}
.ej-hero-title { color: var(--gl-ice-bright); text-shadow: 0 2px 44px rgba(0, 0, 0, 0.6); }
.ej-hero-sub { color: rgba(233, 242, 247, 0.82); text-shadow: 0 1px 24px rgba(0, 0, 0, 0.5); }
.ej-hero .ej-kicker { color: var(--gl-glacier); }

/* ==========================================================================
   BOUTONS — glace sur navy
   ========================================================================== */
.ej-btn { transition: background 220ms cubic-bezier(0.22,1,0.36,1), color 220ms, border-color 220ms, box-shadow 220ms, transform 220ms; }
.ej-btn--primary {
  background: var(--gl-frost); color: var(--gl-navy); border: 1px solid var(--gl-frost);
}
.ej-btn--primary:hover {
  background: #FFFFFF; border-color: #FFFFFF; color: var(--gl-abyss);
  box-shadow: 0 0 0 1px rgba(143, 193, 219, 0.45), 0 12px 30px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}
.ej-btn--ghost {
  background: transparent; color: var(--gl-ice); border: 1px solid var(--gl-border-strong);
}
.ej-btn--ghost:hover {
  background: rgba(143, 193, 219, 0.10); border-color: var(--gl-glacier); color: var(--gl-glacier-soft);
}

/* États sélectionnés : pastille glace */
.ej-filter-btn.active { background: var(--gl-frost); color: var(--gl-navy); border-color: var(--gl-frost); }
.ej-lang-btn.active { background: var(--gl-frost); color: var(--gl-navy); }

/* ==========================================================================
   CARTES — panneaux navy, liseré glace, rim froid au survol
   ========================================================================== */
.ej-card {
  background: var(--gl-panel); border-color: var(--gl-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.30);
  transition: transform 240ms cubic-bezier(0.22,1,0.36,1), box-shadow 240ms cubic-bezier(0.22,1,0.36,1), border-color 240ms, background 240ms;
}
.ej-card:hover {
  background: var(--gl-panel-2); border-color: rgba(176, 205, 221, 0.28);
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(143, 193, 219, 0.14);
}
.ej-work {
  background: var(--gl-panel); border-color: var(--gl-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.30);
}
.ej-work:hover { box-shadow: 0 22px 56px rgba(0, 0, 0, 0.55); border-color: rgba(176, 205, 221, 0.26); }
.ej-work-cover { background: #0C1620; box-shadow: inset 0 0 0 1px rgba(176, 205, 221, 0.07); }
.ej-to-top { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }

/* ==========================================================================
   BANDEAUX FROIDS — citation, en-têtes de page, encadrés
   ========================================================================== */
.ej-quote { background: linear-gradient(180deg, rgba(14, 26, 38, 0.7) 0%, var(--gl-navy) 100%); border-color: var(--gl-border); }
.ej-page-hero { background: linear-gradient(180deg, rgba(34, 64, 90, 0.16) 0%, transparent 100%); border-bottom: 1px solid var(--gl-border); }
.ej-note { background: var(--gl-panel); border-color: var(--gl-border-strong); }

/* ==========================================================================
   MÉDIAS — modale / lightbox profondes
   ========================================================================== */
.ej-modal { background: rgba(6, 11, 17, 0.92); }
.ej-lightbox { background: rgba(6, 11, 17, 0.94); }
.ej-play svg { fill: var(--gl-ice); }

/* ==========================================================================
   MENU MOBILE — fond navy
   ========================================================================== */
@media (max-width: 768px) {
  .ej-nav-links { background: rgba(8, 14, 20, 0.98); border-bottom-color: var(--gl-border); }
  .ej-nav-link { border-bottom-color: var(--gl-border); }
}

/* ==========================================================================
   FOOTER — abysse navy
   ========================================================================== */
.ej-footer { background: linear-gradient(180deg, var(--gl-navy) 0%, var(--gl-abyss) 100%); border-top: 1px solid var(--gl-border); }
.ej-footer-logo img { filter: brightness(0) invert(1); opacity: 0.82; }
.ej-footer-desc { color: var(--gl-steel); }
.ej-footer-col h4 { color: var(--gl-glacier); }
.ej-footer-col a { color: var(--gl-steel); transition: color 200ms cubic-bezier(0.22,1,0.36,1); }
.ej-footer-col a:hover { color: var(--gl-ice); }
.ej-footer-bottom { border-top-color: var(--gl-border); }
.ej-footer-bottom p { color: rgba(146, 166, 180, 0.7); }