/* =====================================================
   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:        #070707;
  --gl-navy:         #0A0A0A;
  --gl-navy-2:       #111111;
  --gl-panel:        #161616;
  --gl-panel-2:      #1E1E1E;
  --gl-steel:        #B8B5B0;   /* platine — 10:1 */
  --gl-ice:          #EDECEA;   /* texte — 17:1 */
  --gl-ice-bright:   #F5F4F2;   /* titres */
  --gl-glacier:      #E87884;   /* vin AAA liens / kickers — 7.2:1 */
  --gl-glacier-soft: #F0A0A8;
  --gl-frost:        #F5F4F2;
  --gl-rex:          #6B1220;
  --gl-rex-mid:      #7A1828;
  --gl-rex-bright:   #8B1E30;
  --gl-border:       rgba(200, 198, 194, 0.16);
  --gl-border-strong:rgba(200, 198, 194, 0.34);
  --gl-focus:        #E87884;

  --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: #7A1828 var(--gl-navy);
}

body {
  background:
    radial-gradient(90% 50% at 50% -8%, rgba(107, 18, 32, 0.22), transparent 55%),
    linear-gradient(180deg, #111111 0%, #0A0A0A 40%, #070707 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, #7A1828, #3A3A3A); border: 3px solid var(--gl-navy); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #8B1E30; }

body::before {
  background:
    radial-gradient(120% 70% at 50% -12%, rgba(122, 26, 40, 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(107, 18, 32, 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-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, #8B1E30 0%, #6B1220 100%);
  color: var(--gl-ice-bright);
  border: 1px solid #8B1E30;
}
.ej-btn--primary:hover {
  background: linear-gradient(180deg, #A0283A 0%, #7A1828 100%);
  border-color: #A0283A;
  color: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(232, 120, 132, 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(122, 26, 40, 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, #8B1E30, #6B1220);
  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, #8B1E30, #6B1220);
  color: var(--gl-ice-bright);
  border-color: #8B1E30;
}

/* ==========================================================================
   CARTES — relief du template
   ========================================================================== */
.ej-card {
  background: linear-gradient(165deg, rgba(122, 26, 40, 0.14) 0%, #161616 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(139, 30, 48, 0.22) 0%, #1E1E1E 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, 120, 132, 0.12);
  transform: translateY(-6px);
}
.ej-card-index { color: var(--gl-glacier); }
.ej-access-card { background: linear-gradient(180deg, rgba(122, 26, 40, 0.12), #161616); }
.ej-work {
  background: linear-gradient(180deg, #1A1A1A, #111111);
  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: #0C0C0C; 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(139, 30, 48, 0.45) 0%, transparent 55%),
    linear-gradient(180deg, #1A1A1A, #0C0C0C);
}
.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, #7A1828, #4A0C16);
  border-color: #8B1E30;
  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(122, 26, 40, 0.18) 0%, rgba(10, 10, 10, 0.92) 100%);
  border-color: var(--gl-border);
}
.ej-page-hero {
  background: linear-gradient(180deg, rgba(122, 26, 40, 0.16) 0%, rgba(10, 10, 10, 0) 100%);
  border-bottom: 1px solid var(--gl-border);
}
.ej-note {
  background: linear-gradient(90deg, rgba(122, 26, 40, 0.16), #161616);
  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, #111111, #0A0A0A);
    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; }
}

.ej-footer {
  background: linear-gradient(180deg, #111111 0%, #070707 100%);
  border-top: 1px solid var(--gl-border);
}
.ej-footer-logo img { filter: none; opacity: 0.95; height: 72px; width: auto; }
.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(122, 26, 40, 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(139, 30, 48, 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, 120, 132, 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(122, 26, 40, 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, 120, 132, 0.28);
  border-left: 2px dashed rgba(139, 30, 48, 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(122, 26, 40, 0.14), #161616);
  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; }

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