/* =====================================================
   GLACIAL-NOIR : LÉON DEGRELLE
   Le style moderne du template (cartes, hero, hover, rayons)
   avec palette noir / anthracite et accent rouge vin. WCAG AAA.
   Chargée APRÈS archive.css.
   ===================================================== */

:root {
  --gl-abyss:        #080C16;
  --gl-navy:         #0B1120;
  --gl-navy-2:       #0F1420;
  --gl-panel:        #141A28;
  --gl-panel-2:      #1A2233;
  --gl-steel:        #B8B5B0;   /* platine : 10:1 */
  --gl-ice:          #EDECEA;   /* texte : 17:1 */
  --gl-ice-bright:   #F5F4F2;   /* titres */
  --gl-glacier:      #FFA94D;   /* orange AAA liens / kickers : 9.9:1 */
  --gl-glacier-soft: #FFC178;
  --gl-frost:        #F5F4F2;
  --gl-rex:          #9E4C08;
  --gl-rex-mid:      #C96410;
  --gl-rex-bright:   #F0801A;
  --gl-border:       rgba(200, 198, 194, 0.16);
  --gl-border-strong:rgba(200, 198, 194, 0.34);
  --gl-focus:        #FFA94D;

  --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: #B8B5B0;
  --color-ivory-mist: var(--gl-ice);
  --gold: var(--gl-glacier);
  --gold-soft: var(--gl-glacier-soft);
}

html {
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: #C96410 var(--gl-navy);
}

body {
  background:
    radial-gradient(90% 50% at 50% -8%, rgba(158, 76, 8, 0.22), transparent 55%),
    linear-gradient(180deg, #0F1420 0%, #0B1120 40%, #080C16 100%);
  color: var(--gl-ice);
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  line-height: 1.7;
}

::selection { background: var(--gl-rex-mid); color: var(--gl-ice-bright); }

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: linear-gradient(180deg, #C96410, #3A3A3A); border: 3px solid var(--gl-navy); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #F0801A; }

body::before {
  background:
    radial-gradient(120% 70% at 50% -12%, rgba(158, 76, 8, 0.28), transparent 58%),
    radial-gradient(70% 45% at 100% 0%, rgba(255, 255, 255, 0.03), transparent 50%),
    linear-gradient(180deg, transparent 40%, rgba(7, 7, 7, 0.7) 100%);
}

.ej-section-title, .ej-card-title, .ej-era-title, .ej-work-title, .ej-quote-text { color: var(--gl-ice-bright); }
.ej-section-lead, .ej-page-note, .ej-figure-cap { color: var(--gl-steel); }

.ej-prose a:not(.ej-btn),
.ej-source-link,
.ej-video-credit a,
.ej-pdf-link,
.ej-contact-mail,
.ej-note a {
  color: var(--gl-glacier);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}
.ej-prose a:not(.ej-btn):hover,
.ej-source-link:hover,
.ej-video-credit a:hover,
.ej-pdf-link:hover,
.ej-contact-mail:hover {
  color: var(--gl-ice-bright);
}

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--gl-focus);
  outline-offset: 3px;
}
.ej-skip-link:focus,
.ej-skip-link:focus-visible {
  top: 1rem;
  outline: 3px solid var(--gl-rex-mid);
  outline-offset: 3px;
  background: var(--gl-ice-bright);
  color: var(--gl-navy);
}

.ej-btn,
.ej-filter-btn,
.ej-burger,
.ej-to-top,
.ej-modal-close,
.ej-lightbox-close,
.ej-lightbox-nav {
  min-height: 44px;
  min-width: 44px;
}
.ej-nav-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.ej-logo { min-height: 44px; }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.ej-logo img { filter: none; }
.ej-logo img.ej-logo-mark { height: 22px; width: auto; }
.ej-logo-word {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gl-ice-bright);
  white-space: nowrap;
}
.ej-nav-link { color: var(--gl-steel); transition: color 200ms cubic-bezier(0.22,1,0.36,1); }
.ej-nav-link:hover { color: var(--gl-glacier); }
.ej-nav-link.is-active { color: var(--gl-ice-bright); }
.ej-nav-link.is-active::after {
  background: linear-gradient(90deg, var(--gl-rex-mid), var(--gl-glacier));
  height: 2px;
}
.ej-nav.is-scrolled {
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.92), rgba(17, 17, 17, 0.78));
  -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.55);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.ej-hero-bg img { opacity: 1; filter: brightness(0.55) contrast(1.14) saturate(0.7); }
.ej-hero-bg::after {
  background:
    linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.18) 32%, rgba(7,7,7,0.92) 100%),
    radial-gradient(110% 80% at 50% 30%, rgba(158, 76, 8, 0.22) 0%, transparent 58%);
}
.ej-hero-title { color: var(--gl-ice-bright); text-shadow: 0 2px 44px rgba(0, 0, 0, 0.7); }
.ej-hero-subtitle { color: var(--gl-ice); text-shadow: 0 2px 32px rgba(0, 0, 0, 0.6); }
.ej-hero-sub { color: var(--gl-ice); text-shadow: 0 1px 24px rgba(0, 0, 0, 0.55); }
.ej-hero .ej-kicker { color: var(--gl-glacier); }
.ej-hero-dates {
  font-family: var(--font-mono);
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  color: var(--gl-glacier);
  margin-top: 0.6rem;
}

/* ==========================================================================
   BOUTONS : pilules du template, vin en primary
   ========================================================================== */
.ej-btn {
  border-radius: 999px;
  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: linear-gradient(180deg, #F0801A 0%, #9E4C08 100%);
  color: var(--gl-ice-bright);
  border: 1px solid #F0801A;
}
.ej-btn--primary:hover {
  background: linear-gradient(180deg, #F79020 0%, #C96410 100%);
  border-color: #F79020;
  color: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(232, 168, 74, 0.35), 0 12px 30px rgba(74, 12, 22, 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(158, 76, 8, 0.18);
  border-color: var(--gl-glacier);
  color: var(--gl-ice-bright);
}

.ej-lang-btn {
  min-height: 44px;
  min-width: 44px;
  color: var(--gl-steel);
}
.ej-lang-btn.active {
  background: linear-gradient(180deg, #F0801A, #9E4C08);
  color: var(--gl-ice-bright);
}
.ej-filter-btn {
  color: var(--gl-steel);
  border-color: var(--gl-border-strong);
  padding: 0.7rem 1.15rem;
  border-radius: 999px;
}
.ej-filter-btn:hover { color: var(--gl-ice-bright); border-color: var(--gl-glacier); }
.ej-filter-btn.active {
  background: linear-gradient(180deg, #F0801A, #9E4C08);
  color: var(--gl-ice-bright);
  border-color: #F0801A;
}

/* ==========================================================================
   CARTES : relief du template
   ========================================================================== */
.ej-card {
  background: linear-gradient(165deg, rgba(158, 76, 8, 0.14) 0%, #141A28 42%);
  border-color: var(--gl-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.40);
  transition: transform 240ms cubic-bezier(0.22,1,0.36,1), box-shadow 240ms, border-color 240ms, background 240ms;
}
.ej-card:hover {
  background: linear-gradient(165deg, rgba(214, 138, 44, 0.22) 0%, #1A2233 48%);
  border-color: var(--gl-border-strong);
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(232, 168, 74, 0.12);
  transform: translateY(-6px);
}
.ej-card-index { color: var(--gl-glacier); }
.ej-access-card { background: linear-gradient(180deg, rgba(158, 76, 8, 0.12), #141A28); }
.ej-work {
  background: linear-gradient(180deg, #161E2E, #0F1420);
  border-color: var(--gl-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.40);
}
.ej-work:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.6);
  border-color: var(--gl-border-strong);
}
.ej-work-cover { background: #0B0F1B; box-shadow: inset 0 0 0 1px rgba(200, 198, 194, 0.1); }
.ej-work-cover--typo {
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 1.1rem;
  background:
    linear-gradient(165deg, rgba(214, 138, 44, 0.45) 0%, transparent 55%),
    linear-gradient(180deg, #161E2E, #0B0F1B);
}
.ej-work-cover--typo span {
  font-family: var(--font-display);
  font-size: 1.65rem;
  letter-spacing: 0.04em;
  color: var(--gl-ice-bright);
}
.ej-to-top {
  background: linear-gradient(180deg, #C96410, #2A1B08);
  border-color: #F0801A;
  color: var(--gl-ice-bright);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.ej-to-top:hover { border-color: var(--gl-glacier); color: #FFFFFF; }

.ej-quote {
  background: linear-gradient(180deg, rgba(158, 76, 8, 0.18) 0%, rgba(10, 10, 10, 0.92) 100%);
  border-color: var(--gl-border);
}
.ej-page-hero {
  background: linear-gradient(180deg, rgba(158, 76, 8, 0.16) 0%, rgba(10, 10, 10, 0) 100%);
  border-bottom: 1px solid var(--gl-border);
}

/* En-têtes illustrés (Jeux, Chronologie, Technique). Le voile sombre
   garantit la lisibilité du titre par-dessus l'image ; il fond vers
   --gl-navy en bas pour raccorder la bande claire qui suit. Le second jeu
   de valeurs, plus opaque, sert en mobile où le texte occupe toute la
   largeur. Pour ajouter un en-tête : une entrée ici, une dans chaque bloc
   d'images, et la classe sur la section. */
.ej-page-hero.ej-page-hero--games,
.ej-page-hero.ej-page-hero--timeline,
.ej-page-hero.ej-page-hero--tech,
.ej-page-hero.ej-page-hero--career,
.ej-page-hero.ej-page-hero--duo {
  background-size: cover, cover;
  background-position: center, 50% 42%;
  background-repeat: no-repeat, no-repeat;
}

.ej-page-hero.ej-page-hero--games {
  background-image:
    linear-gradient(180deg, rgba(11, 17, 32, 0.30) 0%, rgba(11, 17, 32, 0.55) 62%, var(--gl-navy) 100%),
    url(../images/archive/jeux-header-1920.webp);
}

.ej-page-hero.ej-page-hero--timeline {
  background-image:
    linear-gradient(180deg, rgba(11, 17, 32, 0.30) 0%, rgba(11, 17, 32, 0.55) 62%, var(--gl-navy) 100%),
    url(../images/archive/chronologie-header-1920.webp);
}

.ej-page-hero.ej-page-hero--tech {
  background-image:
    linear-gradient(180deg, rgba(11, 17, 32, 0.30) 0%, rgba(11, 17, 32, 0.55) 62%, var(--gl-navy) 100%),
    url(../images/archive/technique-header-1920.webp);
}

.ej-page-hero.ej-page-hero--career {
  background-image:
    linear-gradient(180deg, rgba(11, 17, 32, 0.30) 0%, rgba(11, 17, 32, 0.55) 62%, var(--gl-navy) 100%),
    url(../images/archive/parcours-header-1920.webp);
}

.ej-page-hero.ej-page-hero--duo {
  background-image:
    linear-gradient(180deg, rgba(11, 17, 32, 0.30) 0%, rgba(11, 17, 32, 0.55) 62%, var(--gl-navy) 100%),
    url(../images/archive/duo-header-1920.webp);
}

@media (max-width: 700px) {
  .ej-page-hero.ej-page-hero--games {
    background-image:
      linear-gradient(180deg, rgba(11, 17, 32, 0.44) 0%, rgba(11, 17, 32, 0.68) 62%, var(--gl-navy) 100%),
      url(../images/archive/jeux-header-1100.webp);
  }
  .ej-page-hero.ej-page-hero--timeline {
    background-image:
      linear-gradient(180deg, rgba(11, 17, 32, 0.44) 0%, rgba(11, 17, 32, 0.68) 62%, var(--gl-navy) 100%),
      url(../images/archive/chronologie-header-1100.webp);
  }
  .ej-page-hero.ej-page-hero--tech {
    background-image:
      linear-gradient(180deg, rgba(11, 17, 32, 0.44) 0%, rgba(11, 17, 32, 0.68) 62%, var(--gl-navy) 100%),
      url(../images/archive/technique-header-1100.webp);
    /* Cette illustration a un centre volontairement vide : en mobile le
       recadrage tomberait dessus, on vise donc le couloir de droite. */
    background-position: center, 78% 45%;
  }
  .ej-page-hero.ej-page-hero--career {
    background-image:
      linear-gradient(180deg, rgba(11, 17, 32, 0.44) 0%, rgba(11, 17, 32, 0.68) 62%, var(--gl-navy) 100%),
      url(../images/archive/parcours-header-1100.webp);
    /* Même cas : la moitié gauche est vide, on vise la fusée et la VR. */
    background-position: center, 72% 45%;
  }
  .ej-page-hero.ej-page-hero--duo {
    background-image:
      linear-gradient(180deg, rgba(11, 17, 32, 0.44) 0%, rgba(11, 17, 32, 0.68) 62%, var(--gl-navy) 100%),
      url(../images/archive/duo-header-1100.webp);
    /* Même cas : on vise les deux John et l'enseigne Softdisk. */
    background-position: center, 70% 40%;
  }
}
.ej-note {
  background: linear-gradient(90deg, rgba(158, 76, 8, 0.16), #141A28);
  border-color: var(--gl-border-strong);
  color: var(--gl-ice);
}

.ej-modal { background: rgba(7, 7, 7, 0.94); }
.ej-lightbox { background: rgba(7, 7, 7, 0.96); }
.ej-play svg { fill: var(--gl-ice-bright); }
.ej-video-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gl-glacier);
  margin-top: 0.7rem;
}
.ej-video-desc { color: var(--muted); font-size: 0.88rem; margin-top: 0.35rem; }
.ej-video-credit { font-size: 0.8rem; color: var(--muted); margin-top: 0.45rem; }

@media (max-width: 1180px) {
  .ej-nav-links { gap: 1.05rem; }
}
@media (max-width: 768px) {
  .ej-nav-links {
    background: linear-gradient(180deg, #0F1420, #0B1120);
    border-bottom-color: var(--gl-border);
  }
  .ej-nav-link { border-bottom-color: var(--gl-border); min-height: 48px; }
  .ej-logo-word { font-size: 0.92rem; letter-spacing: 0.1em; }
}

/* Pied de page illustré. On réutilise l'image de l'en-tête Chronologie :
   déjà en cache pour le visiteur, aucun octet de plus.
   Densité réglée à l'œil par le commanditaire : 0.90-0.97 jugé 17 % trop
   foncé, d'où 0.75-0.81. La marge de lisibilité est large de toute façon :
   la luminance moyenne de l'image est de 41/255 et son bloc le plus clair
   (1/256) ne monte qu'à (83, 67, 59), si bien que le texte gris tient le
   AAA dès 0.38. Le voile se densifie vers le bas, où les mentions légales
   sont en petit corps. La touche orange reprend celle des en-têtes. */
.ej-footer {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(158, 76, 8, 0.22), transparent 62%),
    linear-gradient(180deg, rgba(11, 17, 32, 0.75) 0%, rgba(9, 14, 26, 0.78) 55%, rgba(8, 12, 22, 0.81) 100%),
    url(../images/archive/chronologie-header-1920.webp);
  background-size: auto, auto, cover;
  background-position: center, center, 50% 45%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  border-top: 1px solid var(--gl-border);
}
.ej-footer-logo img { filter: none; opacity: 0.95; height: 72px; width: auto; mix-blend-mode: screen; }
.ej-footer-desc { color: var(--gl-steel); }
.ej-footer-col h4 { color: var(--gl-glacier); }
.ej-footer-col a { color: var(--gl-steel); }
.ej-footer-col a:hover { color: var(--gl-glacier); }
.ej-footer-bottom { border-top-color: var(--gl-border); }
.ej-footer-bottom p { color: var(--gl-steel); }

.ej-gen-tree.stammbaum {
  position: relative;
  margin: 2.5rem 0 1rem;
  padding: clamp(1.5rem, 3.5vw, 2.25rem) clamp(1.25rem, 3vw, 2rem);
  overflow-x: auto;
  background: linear-gradient(165deg, rgba(158, 76, 8, 0.16) 0%, transparent 46%), var(--gl-panel);
  border: 1px solid var(--gl-border);
  border-radius: var(--radius);
}
.ej-gen-tree.stammbaum::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gl-rex-mid) 18%, var(--gl-glacier) 50%, var(--gl-rex-mid) 82%, transparent);
  pointer-events: none;
}
.ej-gen-tree-header { margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--gl-border); }
.ej-gen-tree-kicker {
  display: inline-block; font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.16em; color: var(--gl-glacier); text-transform: uppercase; margin-bottom: 0.5rem;
}
.ej-gen-tree-note { margin: 0; max-width: 42rem; font-size: 0.875rem; line-height: 1.65; color: var(--gl-steel); }
.ej-gen-tree ul { list-style: none; padding: 0; margin: 0; }
.ej-gen-tree__root > li > ul {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 0.65rem 1rem; margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid var(--gl-border);
}
.ej-gen-tree__root > li > ul > li:has(.person--focal) { grid-column: 1 / -1; }
.ej-gen-tree__root > li > ul ul {
  display: block; margin-top: 0.65rem; padding-top: 0.5rem; padding-left: 1.15rem;
  border-left: 2px solid rgba(214, 138, 44, 0.55);
}
.ej-gen-tree .person {
  display: block; width: fit-content; max-width: min(100%, 26rem);
  padding: 0.8rem 1rem 0.9rem; margin: 0.2rem 0;
  background: rgba(10, 10, 10, 0.88); border: 1px solid var(--gl-border);
  border-left: 3px solid rgba(232, 168, 74, 0.45);
  border-radius: var(--radius-sm);
}
.ej-gen-tree .person-name { font-family: var(--font-display); color: var(--gl-ice-bright); }
.ej-gen-tree .person-dates, .ej-gen-tree .person-role, .ej-gen-tree .person-note {
  font-size: 0.8rem; color: var(--gl-steel); margin-top: 0.15rem;
}
.ej-gen-tree .person--union {
  width: 100%; max-width: 38rem; margin: 0 auto 0.25rem; padding: 1.15rem 1.35rem;
  text-align: center; border-left-width: 4px; border-left-color: var(--gl-rex-mid);
}
.ej-gen-tree .person--union .person-separator { margin: 0.45rem 0; letter-spacing: 0.35em; color: var(--gl-glacier); }
.ej-gen-tree .person--focal {
  max-width: min(100%, 30rem); border-left-color: var(--gl-rex-mid);
  background: linear-gradient(90deg, rgba(158, 76, 8, 0.28) 0%, rgba(10, 10, 10, 0.95) 46%);
}
.ej-gen-tree .person--label {
  max-width: min(100%, 34rem); padding: 0.55rem 0.95rem;
  background: rgba(7, 7, 7, 0.5); border: 1px dashed rgba(232, 168, 74, 0.28);
  border-left: 2px dashed rgba(214, 138, 44, 0.55);
}
.ej-gen-tree .person-marriage {
  font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gl-ice);
}
.ej-prose-family h2 { font-size: var(--h3); margin: 2rem 0 0.8rem; }
.ej-prose-family ul { margin: 0.6rem 0 1.2rem 1.1rem; color: var(--muted); }
.ej-prose-family li { margin: 0.25rem 0; }

.ej-pdf-link {
  display: inline-block; margin-top: 0.55rem;
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ej-pdf-disclaimer { font-size: 0.8rem; color: var(--muted); margin-top: 0.35rem; }

.ej-quotes-static { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 768px) { .ej-quotes-static { grid-template-columns: 1fr; } }
.ej-quote-card {
  background: linear-gradient(165deg, rgba(158, 76, 8, 0.14), #141A28);
  border: 1px solid var(--gl-border); padding: 1.4rem 1.5rem 1.5rem;
  border-radius: var(--radius);
}
.ej-quote-card__head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--gl-glacier); margin-bottom: 0.8rem; }
.ej-quote-card__body p { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.45; color: var(--gl-ice-bright); margin: 0; }
.ej-quote-card__cite { display: block; margin-top: 1rem; font-size: 0.8rem; color: var(--gl-steel); font-style: normal; }
.ej-quote-card--feature { grid-column: 1 / -1; }
.ej-axis-mark { width: 44px; height: 44px; margin-bottom: 1rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gl-border); border-radius: var(--radius-sm); }
.ej-axis-mark img { width: 28px; height: 28px; object-fit: contain; }
.ej-axis-mark--rex { width: 76px; height: 48px; }
.ej-axis-mark--rex img { width: 64px; height: 44px; mix-blend-mode: screen; }

@media (prefers-reduced-motion: reduce) {
  .ej-btn:hover, .ej-card:hover, .ej-work:hover { transform: none; }
}