/* Châssis archive : porté du moteur ARCHIV (lignée Degrelle/Carmack), version Carmack 2026-08. Les jetons de couleur et de police sont pontés par le CSS de thème généré. */
/* =====================================================
   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. 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.

   L'image n'est pas dans le châssis : chaque site la fournit par le bloc
   archive-page-hero, qui pose --ej-page-hero-image (et, en option,
   --ej-page-hero-image-narrow et --ej-page-hero-position-narrow) sur la
   section et lui donne la classe ej-page-hero--illustrated. */
.ej-page-hero.ej-page-hero--illustrated {
  background-size: cover, cover;
  background-position: center, 50% 42%;
  background-repeat: no-repeat, no-repeat;
  background-image:
    linear-gradient(180deg, rgba(11, 17, 32, 0.30) 0%, rgba(11, 17, 32, 0.55) 62%, var(--gl-navy) 100%),
    var(--ej-page-hero-image);
}

@media (max-width: 700px) {
  .ej-page-hero.ej-page-hero--illustrated {
    background-image:
      linear-gradient(180deg, rgba(11, 17, 32, 0.44) 0%, rgba(11, 17, 32, 0.68) 62%, var(--gl-navy) 100%),
      var(--ej-page-hero-image-narrow, var(--ej-page-hero-image));
    background-position: center, var(--ej-page-hero-position-narrow, 50% 42%);
  }
}
.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%),
    var(--ej-footer-image, none);
  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; }
}