/**
 * Thème littéraire & académique — Archive documentaire Maurice Bardèche (ARCHIV)
 * Direction éditoriale « grande biographie » : encre, papier, filets fins, respiration.
 * Chargé après main.css.
 * Les polices Google (Cormorant Garamond, EB Garamond, DM Mono, Inter) sont
 * déclenchées depuis chaque fichier HTML avec &display=swap (évite un @import
 * dans la feuille, source de blocage de rendu pour le navigateur).
 */

/* --- Alias sémantiques (compat. Webflow / anciennes variables) --- */
:root {
  --pleiade-bordeaux: #4F6157;
  --pleiade-gold: #6F8075;
  --pleiade-gold-soft: #A8AAA2;
  --pleiade-ink: #171A17;
  --_typography---type-font-body: "Inter", "EB Garamond", "Cormorant Garamond", Georgia, serif;
  --_typography---type-font-headings: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --_typography---type-font-badges: "Cormorant Garamond", Georgia, serif;
  --_color---color-brand: #4F6157;
  --_color---color-text-on-brand: #F5F2EA;

  /* Système UX — archives premium */
  --lfc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lfc-duration: 0.22s;
  --lfc-radius: 2px;
  --lfc-measure: 65ch;
  --lfc-tap-min: 44px;
  --lfc-gutter-x: clamp(1.25rem, 4vw, 3rem);
  --lfc-section-y: clamp(3.5rem, 9vw, 7.5rem);
  --lfc-section-y-quote: clamp(4.25rem, 11vw, 10rem);
}

/* ========== Mode sombre : cabinet d’archive minéral ========== */
:root[data-theme="dark"],
html[data-theme="dark"] {
  --lit-void: #252926;
  --lit-paper: #2F3A34;
  --lit-paper-raised: #3D423F;
  --lit-paper-card: #454C48;
  --lit-rule: #5A625C;
  --lit-rule-soft: #4A524D;
  --lit-ink: #ECE8DE;
  --lit-ink-muted: #A8AAA2;
  --lit-ink-faint: #7A8078;
  --lit-accent: #8A9B90;
  --lit-accent-strong: #A8B5AC;
  --lit-wine: #6F8075;
  --lit-wine-muted: #4F6157;

  --pleiade-bordeaux: var(--lit-wine-muted);
  --pleiade-bordeaux-muted: #2a1a1d;
  --pleiade-gold: var(--lit-accent);
  --pleiade-gold-soft: var(--lit-ink-faint);
  --pleiade-ink: var(--lit-ink);
  --pleiade-paper-dim: var(--lit-ink-muted);

  --metal-dark: var(--lit-void);
  --metal-mid: var(--lit-paper);
  --metal-blue: var(--lit-paper-raised);
  --metal-steel: var(--lit-rule);
  --metal-silver: var(--lit-ink-muted);
  --metal-line: var(--lit-rule);

  --accent-blue-steel: #5a6a82;
  --accent-cyan-steel: var(--lit-accent);

  --text-primary: var(--lit-ink);
  --text-secondary: #c4c2bc;
  --text-muted: var(--lit-ink-muted);
  --text-accent: var(--lit-accent-strong);

  --bg-primary: var(--lit-paper);
  --bg-secondary: var(--lit-paper-raised);
  --bg-card: var(--lit-paper-card);
  --bg-overlay: rgba(8, 9, 12, 0.92);

  --border-primary: var(--lit-rule);
  --border-secondary: var(--lit-rule-soft);
  --border-accent: var(--lit-accent);

  --bg: var(--bg-primary);
  --bg-alt: var(--bg-secondary);
  --bg-section: var(--lit-paper-raised);
  --text: var(--text-primary);
  --text-alt: var(--text-secondary);
  --text-light: var(--text-primary);
  --text-white: var(--text-primary);
  --border: var(--border-primary);
  --border-alt: var(--border-secondary);
  --border-light: var(--metal-silver);
  --accent: var(--lit-accent);
  --steel: var(--metal-silver);

  --lfc-focus: #c9b8a8;
  --lfc-focus-offset: #101218;
}

/* ========== Mode clair : papier grisé, vert-de-gris ========== */
:root[data-theme="light"],
html[data-theme="light"] {
  --lit-void: #D8D8CC;
  --lit-paper: #ECE8DE;
  --lit-paper-raised: #D8D8CC;
  --lit-paper-card: #F5F2EA;
  --lit-rule: #B9B7AA;
  --lit-rule-soft: #C9C7BC;
  --lit-ink: #171A17;
  --lit-ink-muted: #5D625B;
  --lit-ink-faint: #A8AAA2;
  --lit-accent: #6F8075;
  --lit-accent-strong: #4F6157;
  --lit-wine: #6F8075;
  --lit-wine-muted: #4F6157;

  --pleiade-bordeaux: var(--lit-wine);
  --pleiade-paper: var(--lit-paper-card);
  --pleiade-paper-edge: var(--lit-rule);

  --metal-dark: var(--lit-paper-raised);
  --metal-mid: var(--lit-paper);
  --metal-blue: var(--lit-rule-soft);
  --metal-steel: var(--lit-ink-faint);
  --metal-silver: var(--lit-ink-muted);
  --metal-line: var(--lit-rule);

  --accent-blue-steel: var(--lit-accent);
  --accent-cyan-steel: #4a6678;

  --text-primary: var(--lit-ink);
  --text-secondary: #3a3d44;
  --text-muted: var(--lit-ink-muted);
  --text-accent: var(--lit-accent-strong);

  --bg-primary: var(--lit-paper);
  --bg-secondary: var(--lit-paper-raised);
  --bg-card: var(--lit-paper-card);
  --bg-overlay: rgba(250, 250, 248, 0.96);

  --border-primary: var(--lit-rule);
  --border-secondary: var(--lit-rule-soft);
  --border-accent: var(--lit-accent);

  --bg: var(--bg-primary);
  --bg-alt: var(--bg-secondary);
  --bg-section: var(--lit-paper-raised);
  --text: var(--text-primary);
  --text-alt: var(--text-secondary);
  --text-light: var(--text-primary);
  --text-white: var(--text-primary);
  --border: var(--border-primary);
  --border-alt: var(--border-secondary);
  --border-light: var(--metal-silver);
  --accent: var(--lit-accent);
  --steel: var(--metal-silver);

  --lfc-focus: #6F8075;
  --lfc-focus-offset: #ECE8DE;
}

/* --- Fond : calme, légère profondeur (pas de cuir ni de dorure) --- */
html[data-theme="dark"] body,
html[data-theme="dark"] {
  background-color: var(--lit-paper);
  background-image: radial-gradient(ellipse 100% 70% at 50% -15%, rgba(111, 128, 117, 0.1) 0%, transparent 52%);
}

html[data-theme="light"] body,
html[data-theme="light"] {
  background-color: var(--lit-paper);
  background-image: none;
}

body {
  font-family: "EB Garamond", "Cormorant Garamond", Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.72;
  letter-spacing: 0.01em;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  text-shadow: none;
}

.ej-section-title-archival,
.ej-leitmotive-title,
.gallery-title,
.ej-title,
.ej-drogen-title,
.ej-bibliography-title {
  font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif !important;
  font-weight: 600 !important;
}

.ej-leitmotive-card-title,
.ej-drogen-card-title,
.ej-link-card-title,
.ej-timeline-year,
.ej-bibliography-year {
  font-family: "EB Garamond", Georgia, serif !important;
}

.heading---h2,
.heading---h1 {
  font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

/* Numéros de section : petites capitales discrètes */
.ej-section-number {
  font-family: "EB Garamond", Georgia, serif !important;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--lit-ink-faint, #6a6e7a) !important;
  font-size: 0.68rem !important;
  text-transform: uppercase;
}

html[data-theme="light"] .ej-section-number {
  color: var(--lit-ink-muted, #5a5d64) !important;
}

.ej-technical-subtitle,
.ej-archival-label,
.ej-military-subtitle {
  font-family: "EB Garamond", Georgia, serif !important;
  letter-spacing: 0.12em;
  font-weight: 500;
}

.ej-hud-mark,
.ej-hud-line {
  background: var(--lit-rule, #2a3140);
  opacity: 1;
  box-shadow: none;
}

html[data-theme="light"] .ej-hud-mark,
html[data-theme="light"] .ej-hud-line {
  background: var(--lit-rule, #dcdad6);
}

/* --- Navigation : bandeau sobre, institutionnel --- */
.navbar .nav-link {
  font-family: "EB Garamond", Georgia, serif;
  letter-spacing: 0.06em;
}

.navbar .nav-link:hover,
.navbar .nav-link.w--current {
  color: var(--lit-accent-strong, #d4c4b4) !important;
}

html[data-theme="light"] .navbar .nav-link:hover,
html[data-theme="light"] .navbar .nav-link.w--current {
  color: var(--lit-accent-strong, #2a3442) !important;
}

/* Contenu nav (logo + liens) au-dessus du voile .navbar-bg */
.navbar .main-container.navbar-container {
  position: relative;
  z-index: 3 !important;
}

.navbar-bg {
  background: var(--lit-paper-card, #1a1f28) !important;
  border-bottom: 1px solid var(--lit-rule, #2a3140) !important;
  box-shadow: none;
}

html[data-theme="light"] .navbar-bg {
  background: var(--lit-paper-card, #fff) !important;
  border-bottom: 1px solid var(--lit-rule, #dcdad6) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

/* Logotype : fond sombre = tons clairs SVG ; fond clair = filtre encre (lisible) */
.nav-logo-link {
  padding: 0.15rem 0;
  align-self: center;
  position: relative;
  z-index: 4;
  flex-shrink: 0;
}

.nav-logo-link .nav-logo,
.navbar .nav-logo {
  width: auto !important;
  max-width: min(360px, 54vw) !important;
  max-height: 46px !important;
  min-width: 160px;
  min-height: 28px;
  height: auto !important;
  object-fit: contain;
  object-position: left center;
  display: block;
  visibility: visible;
  opacity: 1;
  mix-blend-mode: normal;
  filter: none !important;
  transition: filter var(--lfc-duration) var(--lfc-ease), opacity var(--lfc-duration) var(--lfc-ease);
}

html[data-theme="dark"] .nav-logo-link .nav-logo,
html[data-theme="dark"] .navbar .nav-logo {
  filter: none !important;
  opacity: 1 !important;
}

html[data-theme="light"] .nav-logo-link .nav-logo,
html[data-theme="light"] .navbar .nav-logo {
  /* Silhouette noire lisible sur fond clair (le SVG est dessiné pour fond sombre) */
  filter: brightness(0) saturate(100%) !important;
  opacity: 1 !important;
}

html[data-theme="light"] .nav-logo-link:hover .nav-logo {
  filter: brightness(0) saturate(100%) !important;
  opacity: 0.88 !important;
}

.ej-lang-btn {
  font-family: "EB Garamond", Georgia, serif;
  letter-spacing: 0.12em;
}

.ej-lang-btn.active {
  color: var(--lit-accent-strong, #d4c4b4);
  border-bottom-color: var(--lit-accent, #b8a89a);
}

html[data-theme="light"] .ej-lang-btn.active {
  color: var(--lit-accent-strong, #2a3442);
  border-bottom-color: var(--lit-accent, #3d4a5c);
}

/* --- Cartes : panneau de lecture, bord net --- */
.ej-leitmotive-card,
.ej-drogen-card,
.ej-link-card {
  border: 1px solid var(--lit-rule, #2a3140) !important;
  background: var(--lit-paper-card, #1a1f28) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px;
}

html[data-theme="light"] .ej-leitmotive-card,
html[data-theme="light"] .ej-drogen-card,
html[data-theme="light"] .ej-link-card {
  background: var(--lit-paper-card, #fff) !important;
  border-color: var(--lit-rule, #dcdad6) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.ej-leitmotive-card:hover,
.ej-drogen-card:hover {
  border-color: var(--lit-ink-muted, #9b9da8) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18) !important;
}

html[data-theme="light"] .ej-leitmotive-card:hover,
html[data-theme="light"] .ej-drogen-card:hover {
  border-color: var(--lit-ink-faint, #8a8d95) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07) !important;
}

.ej-timeline-dot {
  background: var(--lit-paper-raised, #151922) !important;
  border: 2px solid var(--lit-ink-muted, #9b9da8) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .ej-timeline-dot {
  background: var(--lit-paper-card, #fff) !important;
  border-color: var(--lit-accent, #3d4a5c) !important;
}

.ej-timeline-line {
  background: var(--lit-rule, #2a3140) !important;
}

html[data-theme="light"] .ej-timeline-line {
  background: var(--lit-rule, #dcdad6) !important;
}

.ej-filter-btn.active {
  color: var(--lit-accent-strong, #d4c4b4) !important;
  border-color: var(--lit-ink-muted, #9b9da8) !important;
  box-shadow: none;
}

html[data-theme="light"] .ej-filter-btn.active {
  color: var(--lit-accent-strong, #2a3442) !important;
  border-color: var(--lit-accent, #3d4a5c) !important;
}

/* --- Héros : boutons type catalogue --- */
.hero-section .buttons .button.ej-hero-cta-timeline,
.hero-section .buttons .button.ej-hero-cta-interview {
  font-family: "EB Garamond", Georgia, serif !important;
  border: 1px solid var(--lit-rule, #2a3140) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--lit-ink, #e8e6e1) !important;
}

.hero-section .buttons .button.ej-hero-cta-interview {
  border-color: var(--lit-accent-strong, #d4c4b4) !important;
  color: var(--lit-ink, #e8e6e1) !important;
}

.hero-section .buttons .button.ej-hero-cta-timeline:hover,
.hero-section .buttons .button.ej-hero-cta-interview:hover {
  border-color: var(--lit-accent-strong, #d4c4b4) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.hero-section .buttons .button.ej-hero-cta-timeline .button-text,
.hero-section .buttons .button.ej-hero-cta-interview .button-text {
  font-family: "EB Garamond", Georgia, serif !important;
}

html[data-theme="light"] .hero-section .buttons .button.ej-hero-cta-timeline,
html[data-theme="light"] .hero-section .buttons .button.ej-hero-cta-interview {
  background: var(--lit-paper-card, #fff) !important;
  border-color: var(--lit-rule, #dcdad6) !important;
  color: var(--lit-ink, #14161a) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .hero-section .buttons .button.ej-hero-cta-interview {
  border-color: var(--lit-accent, #3d4a5c) !important;
}

html[data-theme="light"] .hero-section .buttons .button.ej-hero-cta-timeline:hover,
html[data-theme="light"] .hero-section .buttons .button.ej-hero-cta-interview:hover {
  border-color: var(--lit-accent, #3d4a5c) !important;
  background: var(--lit-paper-raised, #f2f1ed) !important;
}

/* --- Citation : filet typographique --- */
.ej-quote-section {
  border-top: 1px solid var(--lit-rule, #2a3140);
  border-bottom: 1px solid var(--lit-rule, #2a3140);
  background: transparent;
}

html[data-theme="light"] .ej-quote-section {
  background: var(--lit-paper-raised, #f2f1ed);
}

.ej-quote-text {
  font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.28rem, 2.5vw, 1.85rem);
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

/* --- Pied de page --- */
.ej-footer {
  border-top: 1px solid var(--lit-rule, #5A625C);
  background: var(--lead-gray, #3D423F);
}

html[data-theme="light"] .ej-footer {
  background: var(--lead-gray, #3D423F);
  border-top-color: var(--accent-dark, #2F3A34);
}

.ej-footer-section-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: var(--bg-card, #F5F2EA);
  font-weight: 600;
}

html[data-theme="light"] .ej-footer-section-title {
  color: var(--bg-card, #F5F2EA);
}

.ej-footer-link a,
.ej-stammbaum-content a,
.ej-link-card-btn,
.gallery-more-button {
  color: var(--lit-accent, #b8a89a);
}

.ej-footer-link a:hover,
.ej-stammbaum-content a:hover,
.ej-link-card-btn:hover,
.gallery-more-button:hover {
  color: var(--lit-ink, #e8e6e1);
}

html[data-theme="light"] .ej-footer-link a,
html[data-theme="light"] .ej-stammbaum-content a,
html[data-theme="light"] .ej-link-card-btn,
html[data-theme="light"] .gallery-more-button {
  color: var(--lit-accent, #3d4a5c);
}

html[data-theme="light"] .ej-footer-link a:hover,
html[data-theme="light"] .ej-stammbaum-content a:hover,
html[data-theme="light"] .ej-link-card-btn:hover,
html[data-theme="light"] .gallery-more-button:hover {
  color: var(--lit-ink, #14161a);
}

/* --- Grain imperceptible (papier / halftone) --- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E");
}

html[data-theme="light"] body::before {
  opacity: 0.018;
}

/* --- Galerie --- */
.gallery-section {
  background: var(--lit-paper-raised, #151922) !important;
}

html[data-theme="light"] .gallery-section {
  background: var(--lit-paper-raised, #f2f1ed) !important;
}

.gallery-card {
  min-height: 0;
  border: 1px solid var(--lit-rule, #2a3140) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .gallery-card {
  border-color: var(--lit-rule, #dcdad6) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.gallery-card > img.gallery-card-image,
.gallery-card > img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.gallery-grid .gallery-card:first-child picture img,
.gallery-grid .gallery-card:first-child > img.gallery-card-image,
.gallery-grid .gallery-card:first-child > img {
  object-position: top center;
}

.gallery-grid .gallery-card:nth-child(2) picture img,
.gallery-grid .gallery-card:nth-child(2) > img.gallery-card-image,
.gallery-grid .gallery-card:nth-child(2) > img {
  object-position: top center;
}

/* --- Bibliographie --- */
.ej-bibliography-item {
  border-bottom: 1px solid var(--lit-rule-soft, #222833) !important;
}

html[data-theme="light"] .ej-bibliography-item {
  border-bottom-color: var(--lit-rule-soft, #e8e6e1) !important;
}

.ej-bibliography-title {
  text-shadow: none;
}

html[data-theme="light"] .ej-bibliography-title {
  text-shadow: none;
}

/* ========== UX / UI : finition « archive d’exception » ========== */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

html[data-theme="dark"] ::selection {
  background-color: rgba(201, 184, 168, 0.38);
  color: #f4f2ee;
}

html[data-theme="light"] ::selection {
  background-color: rgba(42, 82, 128, 0.22);
  color: #14161a;
}

/* Lien d’évitement (WCAG 2.4.1) */
.lfc-skip-link {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100000;
  padding: 0.65rem 1.1rem;
  margin: 0.5rem;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--lit-paper, #fafaf8);
  background: var(--lit-accent-strong, #2a3442);
  border: 1px solid var(--lit-rule, #2a3140);
  border-radius: var(--lfc-radius);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

.lfc-skip-link:focus {
  clip-path: none;
  width: auto;
  height: auto;
  overflow: visible;
  outline: 2px solid var(--lfc-focus);
  outline-offset: 3px;
}

.lfc-main:focus {
  outline: none;
}

.lfc-main:focus-visible {
  outline: 2px solid var(--lfc-focus);
  outline-offset: 4px;
}

/* Anneau de focus cohérent (clavier) */
.nav-link:focus-visible,
.dropdown-link:focus-visible,
.ej-nav-dropdown-toggle:focus-visible,
.ej-lang-btn:focus-visible,
.ej-filter-btn:focus-visible,
.ej-scroll-to-top:focus-visible,
.gallery-lightbox-close:focus-visible,
.gallery-lightbox-nav:focus-visible,
.bibliography-lightbox-close:focus-visible,
.ej-video-modal-close:focus-visible,
.hero-section .buttons .button:focus-visible,
.book-avatar.bibliography-image-clickable:focus-visible,
.gallery-card:focus-visible,
.ej-video-item:focus-visible {
  outline: 2px solid var(--lfc-focus);
  outline-offset: 3px;
}

.menu-button.w-nav-button:focus-visible {
  outline: 2px solid var(--lfc-focus);
  outline-offset: 2px;
}

/* Barre de navigation : une seule couche lisible */
.navbar {
  background-color: transparent !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

.navbar-bg {
  opacity: 0.97;
}

/* Menus déroulants : même langage que le thème */
.ej-nav-dropdown-toggle.w-dropdown-toggle,
.ej-nav-dropdown-toggle.w-dropdown-toggle .text-block-7 {
  font-family: "EB Garamond", Georgia, serif !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
}

.ej-nav-dropdown-list.w-dropdown-list {
  background-color: color-mix(in srgb, var(--lit-paper-card, #1a1f28) 94%, transparent) !important;
  border: 1px solid var(--lit-rule, #2a3140) !important;
  border-radius: var(--lfc-radius) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

html[data-theme="light"] .ej-nav-dropdown-list.w-dropdown-list {
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.08);
}

.ej-nav-dropdown-link.dropdown-link {
  border-radius: 1px;
  transition: background-color var(--lfc-duration) var(--lfc-ease), color var(--lfc-duration) var(--lfc-ease);
}

/* Filtres chronologie / bibliographie */
.ej-filter-btn {
  font-family: "EB Garamond", Georgia, serif !important;
  letter-spacing: 0.06em;
  border-radius: var(--lfc-radius);
  transition: border-color var(--lfc-duration) var(--lfc-ease), color var(--lfc-duration) var(--lfc-ease),
    background-color var(--lfc-duration) var(--lfc-ease);
}

html[data-theme="dark"] .ej-filter-btn:not(.active) {
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: var(--lit-ink-muted, #9b9da8) !important;
  border-color: var(--lit-rule, #2a3140) !important;
}

html[data-theme="dark"] .ej-filter-btn:not(.active):hover {
  color: var(--lit-ink, #e8e6e1) !important;
  border-color: var(--lit-ink-muted, #9b9da8) !important;
}

html[data-theme="light"] .ej-filter-btn:not(.active) {
  background-color: var(--lit-paper-raised, #f2f1ed) !important;
  color: var(--lit-ink-muted, #5a5d64) !important;
}

html[data-theme="light"] .ej-filter-btn:not(.active):hover {
  color: var(--lit-ink, #14161a) !important;
  border-color: var(--lit-rule, #dcdad6) !important;
}

/* Cartes : micro-interaction */
.ej-leitmotive-card,
.ej-drogen-card,
.ej-link-card {
  transition: border-color var(--lfc-duration) var(--lfc-ease), box-shadow var(--lfc-duration) var(--lfc-ease),
    transform var(--lfc-duration) var(--lfc-ease);
}

@media (hover: hover) and (pointer: fine) {
  .ej-leitmotive-card:hover,
  .ej-drogen-card:hover,
  .ej-link-card:hover {
    transform: translateY(-2px);
  }
}

/* Couvertures cliquables */
.book-avatar.bibliography-image-clickable {
  cursor: zoom-in;
  border-radius: 1px;
  transition: box-shadow var(--lfc-duration) var(--lfc-ease), opacity var(--lfc-duration) var(--lfc-ease);
}

@media (hover: hover) {
  .book-avatar.bibliography-image-clickable:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  }
}

html[data-theme="light"] .book-avatar.bibliography-image-clickable:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* Galerie : carte focusable au clavier */
.gallery-card {
  cursor: pointer;
  transition: border-color var(--lfc-duration) var(--lfc-ease), box-shadow var(--lfc-duration) var(--lfc-ease),
    transform var(--lfc-duration) var(--lfc-ease);
}

@media (hover: hover) and (pointer: fine) {
  .gallery-card:hover {
    transform: translateY(-2px);
  }
}

.gallery-card:focus:not(:focus-visible) {
  outline: none;
}

/* Vidéos */
.ej-video-item {
  border-radius: var(--lfc-radius);
  transition: box-shadow var(--lfc-duration) var(--lfc-ease), transform var(--lfc-duration) var(--lfc-ease);
}

@media (hover: hover) and (pointer: fine) {
  .ej-video-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  }
}

html[data-theme="light"] .ej-video-item:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}

/* Modales & lightbox */
.gallery-lightbox-close,
.gallery-lightbox-nav,
.bibliography-lightbox-close,
.ej-video-modal-close {
  min-width: var(--lfc-tap-min);
  min-height: var(--lfc-tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--lfc-radius);
  transition: background-color var(--lfc-duration) var(--lfc-ease), color var(--lfc-duration) var(--lfc-ease),
    border-color var(--lfc-duration) var(--lfc-ease);
}

.gallery-lightbox-content,
.bibliography-lightbox-content {
  border-radius: var(--lfc-radius);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

html[data-theme="light"] .gallery-lightbox-content,
html[data-theme="light"] .bibliography-lightbox-content {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.ej-video-modal {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Citations : mesure de lecture */
.ej-quote-wrapper,
.ej-quote-slider {
  max-width: var(--lfc-measure);
  margin-left: auto;
  margin-right: auto;
}

/* Section Citations (#citations) : colonne plus large que 65ch */
.mm-citations-section .ej-quote-wrapper,
.mm-citations-section .ej-quote-slider {
  max-width: min(1180px, 96vw);
}

.mm-citations-section .ej-quote-text {
  text-wrap: pretty;
}

/* Hero : lisibilité sur image d’en-tête + hiérarchie */
.hero-section {
  isolation: isolate;
}

.hero-bg {
  z-index: 0;
}

.hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(8, 10, 14, 0.88) 0%,
    rgba(8, 10, 14, 0.55) 38%,
    rgba(8, 10, 14, 0.12) 62%,
    transparent 78%
  );
}

html[data-theme="light"] .hero-section::after {
  background: linear-gradient(
    100deg,
    rgba(252, 252, 250, 0.94) 0%,
    rgba(252, 252, 250, 0.65) 40%,
    rgba(252, 252, 250, 0.2) 65%,
    transparent 82%
  );
}

.hero-1-content {
  z-index: 2 !important;
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  background-image: linear-gradient(103deg, rgba(16, 18, 24, 0.72) 18%, rgba(16, 18, 24, 0.28) 55%, transparent 85%) !important;
  padding-bottom: max(2rem, env(safe-area-inset-bottom, 0px)) !important;
  padding-left: max(var(--_grid---grid-window-gutter, 1.25rem), env(safe-area-inset-left, 0px)) !important;
}

html[data-theme="light"] .hero-1-content {
  background-image: linear-gradient(103deg, rgba(250, 250, 248, 0.88) 18%, rgba(250, 250, 248, 0.35) 55%, transparent 88%) !important;
}

.title.hero-1-title {
  max-width: min(36rem, 92vw);
}

.title.hero-1-title > div:not(.dot-title) {
  font-size: clamp(1rem, 2.1vw, 1.2rem);
  line-height: 1.55;
  color: var(--lit-ink-muted, #9b9da8);
  max-width: 42rem;
}

html[data-theme="light"] .title.hero-1-title > div:not(.dot-title) {
  color: var(--lit-ink-muted, #5a5d64);
}

.lfc-hero-title-link {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.18em;
  transition: color var(--lfc-duration) var(--lfc-ease);
}

.lfc-hero-title-link:hover {
  color: var(--lit-accent-strong, #d4c4b4);
}

html[data-theme="light"] .lfc-hero-title-link:hover {
  color: var(--lit-accent-strong, #2a3442);
}

@media screen and (max-width: 767px) {
  /* Empilement : le bloc texte doit rester au-dessus de l’image (main.css met .hero-bg en z-index 2) */
  .hero-bg {
    z-index: 0 !important;
  }

  .hero-section::after {
    z-index: 1;
    background: linear-gradient(180deg, transparent 0%, rgba(8, 10, 14, 0.25) 45%, rgba(8, 10, 14, 0.75) 100%);
  }

  html[data-theme="light"] .hero-section::after {
    background: linear-gradient(180deg, transparent 0%, rgba(252, 252, 250, 0.35) 50%, rgba(252, 252, 250, 0.92) 100%);
  }

  .hero-1-content {
    z-index: 2 !important;
    background-image: linear-gradient(180deg, rgba(16, 18, 24, 0.92) 0%, rgba(16, 18, 24, 0.98) 100%) !important;
  }

  html[data-theme="light"] .hero-1-content {
    background-image: linear-gradient(180deg, rgba(250, 250, 248, 0.96) 0%, rgba(242, 241, 237, 1) 100%) !important;
  }
}

/* Emblème pied de page — sceau sur fond sombre ; encre sur fond clair */
.ej-footer-logo {
  width: 76px !important;
  height: auto !important;
  max-width: 88px !important;
  margin-bottom: 1.35rem !important;
  opacity: 0.94 !important;
  filter: none !important;
  transition: opacity var(--lfc-duration) var(--lfc-ease), transform var(--lfc-duration) var(--lfc-ease),
    filter var(--lfc-duration) var(--lfc-ease);
}

html[data-theme="light"] .ej-footer-logo {
  filter: brightness(0.22) contrast(1.08) !important;
  opacity: 0.88 !important;
}

.ej-footer-logo:hover {
  opacity: 1 !important;
  transform: scale(1.03);
}

html[data-theme="light"] .ej-footer-logo:hover {
  filter: brightness(0.16) contrast(1.1) !important;
}

html[data-theme="dark"] .ej-footer-logo:hover {
  filter: none !important;
}

.ej-footer-logo-section {
  position: relative;
  padding-left: 0.65rem;
}

.ej-footer-logo-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 2rem;
  width: 1px;
  background: linear-gradient(180deg, var(--lit-accent, #b8a89a) 0%, transparent 100%);
  opacity: 0.4;
  pointer-events: none;
}

html[data-theme="light"] .ej-footer-logo-section::before {
  background: linear-gradient(180deg, var(--lit-accent, #3d4a5c) 0%, transparent 100%);
  opacity: 0.25;
}

/* Pied : hiérarchie des listes */
.ej-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ej-footer-link a {
  display: inline-block;
  padding: 0.2rem 0;
  text-underline-offset: 0.2em;
}

/* Bouton retour haut */
.ej-scroll-to-top {
  border-radius: var(--lfc-radius);
  transition: transform var(--lfc-duration) var(--lfc-ease), opacity var(--lfc-duration) var(--lfc-ease),
    border-color var(--lfc-duration) var(--lfc-ease);
}

@media (hover: hover) {
  .ej-scroll-to-top:hover {
    transform: translateY(-2px);
  }
}

/* ========== Disposition : cohérence, scan, densité utile ========== */

.ej-container,
.ej-leitmotive-container,
.ej-drogen-container,
.gallery-container {
  padding-left: var(--lfc-gutter-x) !important;
  padding-right: var(--lfc-gutter-x) !important;
}

.ej-footer-container {
  padding-left: var(--lfc-gutter-x) !important;
  padding-right: var(--lfc-gutter-x) !important;
}

.ej-quote-wrapper {
  padding-left: var(--lfc-gutter-x) !important;
  padding-right: var(--lfc-gutter-x) !important;
}

.navbar .main-container.navbar-container {
  padding-left: var(--lfc-gutter-x);
  padding-right: var(--lfc-gutter-x);
}

.ej-timeline-section,
.ej-leitmotive-section,
.gallery-section,
.ej-drogen-section {
  padding-top: var(--lfc-section-y) !important;
  padding-bottom: var(--lfc-section-y) !important;
}

.ej-quote-section {
  padding-top: var(--lfc-section-y-quote) !important;
  padding-bottom: var(--lfc-section-y-quote) !important;
}

/* Grille œuvre & temps : chronologie un peu plus large, bibliographie avec largeur mini stable */
@media (min-width: 992px) {
  .ej-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr) !important;
    gap: clamp(1.75rem, 4vw, 3.25rem) !important;
    margin-top: clamp(2.25rem, 5vw, 3.75rem) !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .ej-grid {
    gap: 2.25rem !important;
  }
}

/* Filtres : ligne fluide, cibles confortables */
.ej-filters {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  row-gap: 0.65rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem) !important;
}

.ej-filter-btn {
  min-height: 44px;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 1 auto;
}

/* Axes de lecture : 4 colonnes sur grand écran = parcours plus direct */
@media (min-width: 1100px) {
  .ej-leitmotive-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.125rem !important;
  }

  .ej-leitmotive-card {
    padding: clamp(1.25rem, 2.2vw, 1.85rem) !important;
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .ej-leitmotive-grid {
    gap: 1.25rem !important;
  }
}

/* Bloc thèmes : même logique que les axes */
@media (min-width: 1100px) {
  .ej-drogen-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.125rem !important;
  }

  .ej-drogen-card {
    padding: clamp(1.25rem, 2.2vw, 1.85rem) !important;
  }
}

/* Vidéos : colonnes adaptatives plus serrées sur tablette */
.ej-videos-grid {
  gap: clamp(1rem, 2.5vw, 1.65rem) !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)) !important;
}

.gallery-grid {
  gap: clamp(0.875rem, 2vw, 1.5rem) !important;
}

.hero-section .buttons {
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
}

.navigation-wrap {
  min-width: 0;
  flex: 1 1 auto;
}

.navbar-row {
  column-gap: clamp(0.75rem, 2vw, 1.25rem);
}

/* Pied : une colonne sur mobile, moins d’air perdu */
@media (max-width: 767px) {
  .ej-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    margin-bottom: 2.5rem !important;
  }

  .ej-header,
  .ej-leitmotive-header,
  .ej-drogen-header,
  .gallery-header {
    padding-left: max(0.75rem, var(--lfc-gutter-x)) !important;
    margin-bottom: clamp(1.75rem, 5vw, 2.75rem) !important;
  }

  .ej-filters {
    padding-left: max(0.75rem, var(--lfc-gutter-x)) !important;
  }

  .ej-drogen-intro {
    padding-left: max(0.75rem, var(--lfc-gutter-x)) !important;
  }

  .ej-bibliography-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem !important;
    margin-bottom: 1.75rem !important;
    padding-bottom: 1.5rem !important;
  }

  .book-avatar {
    width: 88px;
    max-width: 100%;
  }
}

/* ============================================================
   Page Crédits / Méthode / Mentions
   ============================================================ */

.ej-credits-section {
  padding-top: clamp(3rem, 6vw, 5rem) !important;
  padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}

.ej-credits-block {
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  max-width: 78ch;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background: rgba(var(--lfc-paper-rgb, 245, 240, 228), 0.025);
  border: 1px solid rgba(var(--lfc-ink-rgb, 32, 28, 24), 0.18);
  border-radius: 2px;
}

.ej-credits-block h2 {
  font-family: var(--lfc-font-display, 'Cormorant Garamond', 'EB Garamond', Georgia, serif);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  letter-spacing: 0.01em;
  margin: 0 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(var(--lfc-ink-rgb, 32, 28, 24), 0.22);
}

.ej-credits-block p {
  font-family: var(--lfc-font-body, 'EB Garamond', Georgia, serif);
  font-size: clamp(1rem, 1.15vw, 1.075rem);
  line-height: 1.65;
  margin: 0 0 0.85rem;
}

.ej-credits-block ul {
  margin: 0 0 1rem 1.2rem;
  padding: 0;
  font-family: var(--lfc-font-body, 'EB Garamond', Georgia, serif);
  line-height: 1.6;
}

.ej-credits-block li { margin: 0 0 0.45rem; }

.ej-credits-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1rem;
  font-family: var(--lfc-font-body, 'EB Garamond', Georgia, serif);
  font-size: 0.95rem;
}

.ej-credits-table th,
.ej-credits-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid rgba(var(--lfc-ink-rgb, 32, 28, 24), 0.15);
}

.ej-credits-table th {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: rgba(var(--lfc-ink-rgb, 32, 28, 24), 0.78);
}

.ej-credits-table code {
  font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: rgba(var(--lfc-ink-rgb, 32, 28, 24), 0.06);
  padding: 0.05rem 0.35rem;
  border-radius: 2px;
}

@media (max-width: 640px) {
  .ej-credits-table,
  .ej-credits-table thead,
  .ej-credits-table tbody,
  .ej-credits-table tr,
  .ej-credits-table th,
  .ej-credits-table td {
    display: block;
    width: 100%;
  }
  .ej-credits-table thead { display: none; }
  .ej-credits-table tr {
    margin-bottom: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(var(--lfc-ink-rgb, 32, 28, 24), 0.18);
  }
  .ej-credits-table td { border: 0; padding: 0.2rem 0; }
}

/* ============================================================
   En-tête sur la section Citations (#zitat)
   ============================================================ */

.ej-quote-section-header {
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
}

.ej-quote-section-header .ej-section-title-archival {
  justify-content: center;
}

/* ============================================================
   Note de source sous un sous-titre
   ============================================================ */

.ej-source-note {
  font-family: var(--lfc-font-body, 'EB Garamond', Georgia, serif);
  font-size: 0.92rem;
  font-style: italic;
  line-height: 1.5;
  margin: 0.65rem 0 0;
  opacity: 0.78;
  max-width: 70ch;
}

.ej-source-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gallery-section .ej-gallery-attribution {
  max-width: 58rem;
  margin-top: 0.35rem;
  margin-bottom: 0.5rem;
}

.ej-credits-table-note td {
  font-style: italic;
  line-height: 1.55;
  padding-top: 0.85rem !important;
  border-bottom-color: rgba(var(--lfc-ink-rgb, 32, 28, 24), 0.12);
}
/* ============================================================
   Navigation desktop : éviter le débordement sur écrans étroits
   ============================================================ */

@media (min-width: 992px) {
  .navbar-menu.w-nav-menu .nav-links {
    column-gap: clamp(0.4rem, 1.2vw, 1.5rem) !important;
    flex-wrap: nowrap !important;
  }

  .nav-link.w-nav-link,
  .ej-nav-dropdown-toggle.w-dropdown-toggle .text-block-7 {
    font-size: clamp(0.78rem, 0.85vw, 0.95rem) !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap;
  }

  .ej-nav-dropdown-toggle.w-dropdown-toggle {
    padding-left: clamp(0.4rem, 0.8vw, 0.9rem) !important;
    padding-right: clamp(0.4rem, 0.8vw, 0.9rem) !important;
  }

  .nav-link.w-nav-link {
    padding-left: clamp(0.4rem, 0.8vw, 0.9rem) !important;
    padding-right: clamp(0.4rem, 0.8vw, 0.9rem) !important;
  }
}

/* Sur écrans intermédiaires (≤ 1200px) la nav reste compacte */
@media (min-width: 992px) and (max-width: 1200px) {
  .navbar-row {
    column-gap: 0.5rem !important;
  }

  .nav-logo {
    max-width: 220px;
    height: auto;
  }
}

/* Bascule sur le hamburger plus tôt si jamais le débordement persiste */
@media (max-width: 1100px) and (min-width: 992px) {
  /* Marge supplémentaire pour les langues / hamburger */
  .navbar-right-contents {
    gap: 0.5rem !important;
  }
}

/* Héro : voir medieval-modern.css + archive-ux.css (portrait N&B, voile papier) */