/* Châssis archive, habillage néon : base portée de l'archive Bret Easton Ellis (lignée Jünger). Les couleurs sont des rôles de la palette (archive-palette.js), pontés par le CSS de thème généré. */
/* ==========================================================================
   Bret Easton Ellis : Archive
   archive.css · système de design : structure, composants, grille.
   La couleur est définie ici en tokens neutres puis retargetée par
   neon-noir.css (thème « LA noir 80s ») et affinée par finish.css.
   ========================================================================== */

:root {
  /* --- Palette de base : Los Angeles, la nuit --- */
  --color-asphalt: #0B0B0D;      /* noir bitume, fond */
  --color-carbon: #121216;       /* noir secondaire */
  --color-neon-rose: #E8557A;    /* néon rose : l'enseigne */
  --color-neon-cyan: #4FD8E8;    /* néon cyan : la piscine */
  --color-bone: #EDEDED;         /* texte, blanc cassé */
  --color-smoke: #9A9AA2;        /* texte secondaire */
  --color-white: #ffffff;

  /* --- Rôles sémantiques --- */
  --bg: var(--color-asphalt);
  --bg-2: var(--color-carbon);
  --surface: #16161B;
  --surface-2: #1D1D24;
  --border: #26262E;
  --border-strong: #35353F;
  --text: var(--color-bone);
  --muted: var(--color-smoke);
  --gold: var(--color-neon-rose);      /* nom historique du token d'accent */
  --gold-soft: #F08AA5;

  /* --- Typographie --- */
  --font-display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --font-body: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --h1: clamp(2.4rem, 6vw, 4.6rem);
  --h2: clamp(1.9rem, 3.4vw, 2.9rem);
  --h3: clamp(1.3rem, 2vw, 1.7rem);

  /* --- Mesures --- */
  --container: 75rem;
  --container-wide: 86rem;
  --radius: 14px;
  --radius-sm: 8px;
  --gutter: clamp(1.1rem, 4vw, 2.2rem);
  --section-y: clamp(4rem, 9vw, 8rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.08; margin: 0; }
p { margin: 0 0 1.1em; }

::selection { background: var(--gold); color: #14060B; }

/* Texture de fond très discrète (grain + voile vert profond) */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgb(var(--gold-rgb, 232 85 122) / 0.10), transparent 60%),
    radial-gradient(80% 60% at 100% 0%, rgb(var(--accent-2-rgb, 79 216 232) / 0.05), transparent 55%);
}

/* ---------- Helpers ---------- */
.ej-container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.ej-container--wide { max-width: var(--container-wide); }
.ej-section { padding: var(--section-y) 0; }
.ej-hidden { display: none !important; }
.ej-center { text-align: center; }

/* Kicker / sur-titre archivistique (HUD) */
.ej-kicker {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold);
}
.ej-kicker::before { content: ""; width: 26px; height: 1px; background: var(--gold); opacity: 0.7; }

/* En-tête de section */
.ej-section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.ej-section-head.is-center { margin-left: auto; margin-right: auto; text-align: center; }
.ej-section-head.is-center .ej-kicker::before { display: none; }
.ej-section-title { font-size: var(--h2); letter-spacing: -0.01em; margin: 0.9rem 0 0; }
.ej-section-lead { color: var(--muted); margin-top: 1rem; font-size: 1.05rem; }

/* ---------- Boutons ---------- */
.ej-btn {
  display: inline-flex; align-items: center; gap: 0.65rem;
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 0.95rem 1.5rem; border-radius: 999px;
  border: 1px solid transparent; transition: all 0.4s var(--ease); white-space: nowrap;
}
.ej-btn svg, .ej-btn img { width: 15px; height: 15px; }
.ej-btn--primary { background: var(--gold); color: #181206; border-color: var(--gold); }
.ej-btn--primary:hover { background: var(--gold-soft); border-color: var(--gold-soft); transform: translateY(-2px); }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.ej-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.ej-nav.is-scrolled {
  background: rgba(15, 15, 15, 0.82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--border);
}
.ej-nav-row {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
}
/* flex-shrink: 0 : sans lui, le wordmark se fait comprimer en largeur
   par la barre aux tailles intermédiaires et se retrouve déformé. */
.ej-logo { display: flex; align-items: center; gap: 0.7rem; flex: 0 0 auto; }
/* Wordmark : 44px. Il mesure 7,19 fois sa hauteur, donc 316px de large ;
   les paliers du bloc RESPONSIVE le retiennent là où la barre se remplit. */
.ej-logo img { height: 44px; width: auto; filter: brightness(0) invert(1); opacity: 0.92; }
.ej-nav-links { display: flex; align-items: center; gap: 1.9rem; }
.ej-nav-link {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); transition: color 0.3s var(--ease);
  position: relative; padding: 0.3rem 0;
}
.ej-nav-link:hover, .ej-nav-link.is-active { color: var(--text); }
.ej-nav-link.is-active::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--gold);
}
.ej-nav-right { display: flex; align-items: center; gap: 1.1rem; }

/* Sélecteur de langue */
.ej-lang-selector { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; }
.ej-lang-btn {
  background: transparent; color: var(--muted); border: 0; padding: 0.35rem 0.7rem;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; transition: all 0.3s var(--ease);
}
.ej-lang-btn.active { background: var(--gold); color: #181206; }

/* Bouton menu mobile */
.ej-burger { display: none; background: transparent; border: 0; padding: 10px;
  min-width: 44px; min-height: 44px; justify-content: center; align-items: center; cursor: pointer; }
.ej-burger-icon { display: block; width: 22px; }
.ej-burger-icon span {
  display: block; height: 1.5px; background: var(--text);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.ej-burger-icon span + span { margin-top: 6px; }
.ej-burger.is-open .ej-burger-icon span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.ej-burger.is-open .ej-burger-icon span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

/* En-tête de page intérieure (sous la nav fixe) */
.ej-page-hero { padding: calc(76px + clamp(3rem, 7vw, 5.5rem)) 0 clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--border); position: relative; }
.ej-page-hero .ej-section-title { font-size: var(--h1); letter-spacing: -0.02em; margin: 0.9rem 0 0; }
.ej-page-hero .ej-section-lead { max-width: 50rem; }
.ej-page-note { margin-top: 1.4rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--muted); max-width: 60rem; }

/* ==========================================================================
   HERO
   ========================================================================== */
.ej-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.ej-hero-bg { position: absolute; inset: 0; z-index: 0; }
.ej-hero-bg picture { display: block; width: 100%; height: 100%; }
.ej-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0.5; }
.ej-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,15,15,0.5) 0%, rgba(15,15,15,0.2) 35%, rgba(15,15,15,0.92) 92%);
}
.ej-hero-inner { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(3.5rem, 8vw, 7rem); padding-top: 120px; }
.ej-hero-title {
  font-size: var(--h1); letter-spacing: -0.02em; max-width: 18ch; margin: 1.3rem 0 0;
}
.ej-hero-sub { color: var(--color-cool-gray); font-size: clamp(1.05rem, 2vw, 1.35rem); margin-top: 1.2rem; font-family: var(--font-display); font-style: italic; }
.ej-hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }

/* ==========================================================================
   GRILLE DES AXES (leitmotive) + cartes génériques
   ========================================================================== */
.ej-grid { display: grid; gap: 1.2rem; }
.ej-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ej-grid--3 { grid-template-columns: repeat(3, 1fr); }

.ej-card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.8rem 1.6rem; transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), background 0.4s var(--ease);
  overflow: hidden;
}
.ej-card::before { /* liseré HUD doré en haut */
  content: ""; position: absolute; top: 0; left: 1.6rem; width: 34px; height: 2px; background: var(--gold); opacity: 0.55; transition: width 0.4s var(--ease);
}
.ej-card:hover::before { width: 64px; opacity: 1; }
.ej-card-index { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--gold); }
.ej-card-title { font-size: var(--h3); margin: 1rem 0 0.7rem; }
.ej-card-text { color: var(--muted); font-size: 0.95rem; margin: 0; }

/* Cartes d'accès (liens vers sous-pages) */
.ej-access-card { display: flex; flex-direction: column; min-height: 230px; justify-content: space-between; }
.ej-access-card .ej-card-arrow { margin-top: 1.4rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em; color: var(--gold); display: inline-flex; align-items: center; gap: 0.5rem; }
.ej-access-card:hover .ej-card-arrow { gap: 0.9rem; }

/* ==========================================================================
   BANDEAU CITATION
   ========================================================================== */
.ej-quote { text-align: center; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ej-quote-text { font-family: var(--font-display); font-size: clamp(1.5rem, 3.6vw, 2.6rem); line-height: 1.3; max-width: 24ch; margin: 0 auto; }
.ej-quote-author { display: block; margin-top: 1.5rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.14em; color: var(--gold); text-transform: uppercase; }
/* Slider : items empilés dans la même cellule de grille pour un fondu enchaîné */
.ej-quote-slider { display: grid; }
.ej-quote-item {
  grid-area: 1 / 1;
  opacity: 0;
  filter: blur(18px);
  transform: translateY(30px) scale(0.96);
  transition: opacity 1.7s var(--ease), filter 1.7s var(--ease), transform 1.7s var(--ease);
  pointer-events: none;
}
/* La citation active se condense, nette, depuis la brume */
.ej-quote-item.is-active {
  opacity: 1;
  filter: blur(0);
  transform: none;
  pointer-events: auto;
}

/* ==========================================================================
   TIMELINE / CHRONOLOGIE
   ========================================================================== */
.ej-era { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.ej-era-head { display: flex; align-items: baseline; gap: 1.1rem; flex-wrap: wrap; margin-bottom: 1.6rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.ej-era-years { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.14em; color: var(--gold); }
.ej-era-title { font-size: var(--h3); }
.ej-timeline { position: relative; margin-left: 0.5rem; padding-left: 2rem; border-left: 1px solid var(--border-strong); }
.ej-tl-item { position: relative; padding: 0 0 2rem; }
.ej-tl-item:last-child { padding-bottom: 0; }
.ej-tl-item::before {
  content: ""; position: absolute; left: calc(-2rem - 5px); top: 6px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--bg); border: 1.5px solid var(--gold);
}
.ej-tl-year { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.08em; color: var(--gold-soft); }
.ej-tl-text { margin: 0.35rem 0 0; color: var(--text); max-width: 52ch; }
.ej-tl-text em { color: var(--color-cool-gray); }

/* ==========================================================================
   ŒUVRES / BIBLIOGRAPHIE
   ========================================================================== */
.ej-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2.4rem; }
.ej-filter-btn {
  background: transparent; border: 1px solid var(--border-strong); color: var(--muted);
  padding: 0.5rem 1.1rem; border-radius: 999px; font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s var(--ease);
}
.ej-filter-btn:hover { color: var(--text); border-color: var(--muted); }
.ej-filter-btn.active { background: var(--gold); color: #181206; border-color: var(--gold); }

/* ==========================================================================
   ÉDITIONS FRANÇAISES : catalogue bibliographique (sans couverture)
   ========================================================================== */
.ej-editions { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.3rem; }
.ej-edition {
  position: relative; padding: 1.3rem 1.4rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease), transform 0.35s var(--ease);
}
.ej-edition-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.7rem; }
.ej-edition-fr { font-family: var(--font-display); font-style: italic; font-size: 1.18rem; line-height: 1.25; margin: 0; color: var(--text); }
.ej-edition-de { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ej-edition-meta { margin: 0.55rem 0 0; font-size: 0.85rem; line-height: 1.55; color: var(--muted); }
.ej-edition-flag {
  display: inline-block; margin-top: 0.75rem; font-family: var(--font-mono);
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.22rem 0.65rem;
}

.ej-works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.ej-work {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
  display: flex; flex-direction: column;
}
.ej-work-cover { aspect-ratio: 3 / 4; background: var(--bg-2); overflow: hidden; }
.ej-work-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.ej-work:hover .ej-work-cover img { transform: scale(1.04); }
.ej-work-body { padding: 1.1rem 1.1rem 1.3rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.ej-work-year { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--gold); }
.ej-work-title { font-family: var(--font-display); font-size: 1.15rem; font-style: italic; }
.ej-work-desc { color: var(--muted); font-size: 0.85rem; line-height: 1.55; margin: 0; }
.ej-work-cat { margin-top: auto; padding-top: 0.6rem; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--border-strong); }

/* ==========================================================================
   VIDÉOS
   ========================================================================== */
.ej-videos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.ej-video { cursor: pointer; }
.ej-video-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-2); border: 1px solid var(--border); }
.ej-video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease), opacity 0.4s; }
.ej-video:hover .ej-video-thumb img { transform: scale(1.05); opacity: 0.8; }
.ej-play { position: absolute; inset: 0; display: grid; place-items: center; }
.ej-play span { width: 58px; height: 58px; border-radius: 50%; background: rgba(15,15,15,0.55); border: 1px solid rgba(247,248,238,0.4); display: grid; place-items: center; transition: all 0.3s var(--ease); }
.ej-video:hover .ej-play span { background: var(--gold); border-color: var(--gold); }
.ej-play svg { width: 18px; height: 18px; fill: var(--text); margin-left: 3px; }
.ej-video:hover .ej-play svg { fill: #181206; }
.ej-video-name { margin-top: 0.9rem; font-size: 0.95rem; color: var(--text); }

/* Modal vidéo */
.ej-modal { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; padding: 5vw; background: rgba(8,8,8,0.92); backdrop-filter: blur(6px); }
.ej-modal.is-open { display: grid; animation: neonFade 0.3s var(--ease); }
.ej-modal-inner { width: 100%; max-width: 980px; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.ej-modal-inner video, .ej-modal-inner iframe { width: 100%; height: 100%; border: 0; display: block; }
.ej-modal-close { position: absolute; top: 4vw; right: 5vw; width: 44px; height: 44px; border-radius: 50%; background: transparent; border: 1px solid var(--border-strong); color: var(--text); font-size: 1.4rem; display: grid; place-items: center; }
.ej-modal-close:hover { border-color: var(--gold); color: var(--gold); }

/* ==========================================================================
   PROSE / À PROPOS / THÈMES
   ========================================================================== */
.ej-prose { max-width: 44rem; }
.ej-prose p { color: var(--color-cool-gray); font-size: 1.08rem; }
.ej-prose p.ej-lead { font-size: 1.3rem; color: var(--text); font-family: var(--font-display); line-height: 1.5; }
.ej-prose h3 { font-size: var(--h3); margin: 2.4rem 0 0.8rem; color: var(--text); }
.ej-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.ej-split-media img { border-radius: var(--radius); border: 1px solid var(--border); width: 100%; }
.ej-figure-cap { margin-top: 0.7rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--muted); }

/* Encadré contexte (document sensible) */
.ej-note { border: 1px solid var(--border-strong); border-left: 2px solid var(--gold); border-radius: var(--radius-sm); padding: 1.3rem 1.5rem; background: var(--surface); color: var(--muted); font-size: 0.92rem; }
.ej-note strong { color: var(--text); }

/* ==========================================================================
   SOURCES
   ========================================================================== */
.ej-source-card { display: flex; flex-direction: column; gap: 0.7rem; }
.ej-source-cat { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.ej-source-link { margin-top: 0.8rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; border-bottom: 1px solid var(--border-strong); padding-bottom: 3px; transition: all 0.3s var(--ease); }
.ej-source-link:hover { color: var(--gold); border-color: var(--gold); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.ej-contact-box { text-align: center; max-width: 40rem; margin: 0 auto; }
.ej-contact-mail { display: inline-block; margin-top: 1.6rem; font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2.1rem); color: var(--gold); border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease); }
.ej-contact-mail:hover { border-color: var(--gold); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ej-footer { border-top: 1px solid var(--border); padding: clamp(3rem, 6vw, 5rem) 0 2.5rem; background: var(--bg-2); }
.ej-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; }
.ej-footer-logo img { height: 46px; width: auto; opacity: 0.85; }
.ej-footer-desc { color: var(--muted); font-size: 0.92rem; max-width: 34ch; margin-top: 1.1rem; }
.ej-footer-col h4 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; font-weight: 400; }
.ej-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.ej-footer-col a { color: var(--muted); font-size: 0.9rem; transition: color 0.3s var(--ease); }
.ej-footer-col a:hover { color: var(--text); }
.ej-footer-bottom { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.6rem; }
.ej-footer-bottom p { color: var(--muted); font-size: 0.8rem; margin: 0; }

/* Scroll to top */
.ej-to-top { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90; width: 46px; height: 46px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); display: grid; place-items: center; opacity: 0; pointer-events: none; transform: translateY(10px); transition: all 0.4s var(--ease); }
.ej-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.ej-to-top:hover { border-color: var(--gold); color: var(--gold); }

/* ==========================================================================
   ANIMATIONS DE RÉVÉLATION
   ========================================================================== */
.ej-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.ej-reveal.is-in { opacity: 1; transform: none; }
.ej-reveal[data-delay="1"] { transition-delay: 0.08s; }
.ej-reveal[data-delay="2"] { transition-delay: 0.16s; }
.ej-reveal[data-delay="3"] { transition-delay: 0.24s; }
@keyframes neonFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ej-reveal { opacity: 1 !important; transform: none !important; }
  .ej-quote-item { transition-duration: 0.4s; filter: none; transform: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .ej-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .ej-works-grid { grid-template-columns: repeat(2, 1fr); }
  .ej-videos-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Barre de navigation. Au-dessus de 1024px les huit liens sont en ligne et se
   disputent la largeur avec le wordmark ; en dessous, le burger les remplace et
   seuls le wordmark, le sélecteur de langue et le bouton restent. Le
   dimensionnement du wordmark suit cette contrainte, du plus large au plus
   étroit : le dernier palier applicable gagne. */
@media (max-width: 1100px) {
  .ej-nav-links { gap: 1.15rem; }
  .ej-logo img { height: 40px; }
}
/* Le sélecteur de langue vit désormais dans la navigation : elle pèse
   environ 72px de plus qu'avant sur les largeurs intermédiaires. */
@media (max-width: 1024px) {
  .ej-nav-links { gap: 0.95rem; }
  .ej-logo img { height: 34px; }
}
@media (max-width: 900px) {
  .ej-nav-links { gap: 0.66rem; }
  .ej-nav-link { font-size: 0.64rem; }
  .ej-logo img { height: 26px; }
}
/* Dernière bande avant la bascule en volet : tout est au plus serré. */
@media (max-width: 820px) {
  .ej-nav-links { gap: 0.5rem; }
}
@media (max-width: 768px) {
  .ej-grid--4, .ej-grid--3 { grid-template-columns: 1fr; }
  .ej-works-grid { grid-template-columns: repeat(2, 1fr); }
  .ej-videos-grid { grid-template-columns: 1fr; }
  .ej-split { grid-template-columns: 1fr; }
  .ej-split-media { order: -1; }
  .ej-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .ej-editions { grid-template-columns: 1fr; }
  .ej-hero { min-height: 92svh; }
  .ej-hero-bg img { object-position: 64% 34%; }
}
@media (max-width: 480px) {
  .ej-works-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  }

/* ==========================================================================
   AJUSTEMENTS : archive Bret Easton Ellis
   ========================================================================== */
/* Titre français (ou distribution) sous le titre original */
.ej-work-alt {
  margin: 0.1rem 0 0.15rem; font-family: var(--font-mono);
  font-size: 0.72rem; line-height: 1.5; color: var(--muted);
}
.ej-work-alt em { font-family: var(--font-display); font-style: italic; font-size: 0.92rem; color: var(--text); }

/* Les affiches d'écran sont au format portrait comme les couvertures */
.ej-work--screen .ej-work-cover { aspect-ratio: 2 / 3; }

/* Ligne « poche » sous chaque édition française */
.ej-edition-poche {
  margin: 0.5rem 0 0; font-family: var(--font-mono);
  font-size: 0.66rem; letter-spacing: 0.06em; color: var(--border-strong);
}

/* Le drapeau des éditions n'est plus un avertissement mais un cachet de
   provenance : la notice a été confirmée sur le catalogue de la BnF. */
.ej-edition-flag {
  color: var(--muted); border-color: var(--border);
  background: rgb(var(--hairline-rgb, 232 232 238) / 0.04);
}

/* Ligne de source sous chaque jalon de l'affaire American Psycho */
.ej-tl-src {
  margin: 0.45rem 0 0; font-family: var(--font-mono);
  font-size: 0.64rem; letter-spacing: 0.05em; line-height: 1.5;
  color: var(--border-strong);
}

/* ==========================================================================
   INDEX DES PERSONNAGES : la traversée d'un personnage, livre par livre
   ========================================================================== */
.ej-thread { list-style: none; margin: 1.1rem 0 0; padding: 0.9rem 0 0; border-top: 1px solid var(--border); }
.ej-thread li {
  display: grid; grid-template-columns: 3.4rem 1fr; gap: 0.1rem 0.7rem;
  padding: 0.42rem 0; font-size: 0.82rem; line-height: 1.45;
}
.ej-thread li + li { border-top: 1px solid var(--border); }
.ej-thread-y { font-family: var(--font-mono); font-size: 0.7rem; color: var(--gold); padding-top: 0.12rem; }
.ej-thread em { font-family: var(--font-display); font-style: italic; font-size: 0.98rem; color: var(--text); }
.ej-thread li > span:last-child { grid-column: 2; font-size: 0.74rem; color: var(--muted); }

/* Réception critique : le livre, la citation, la source, la glose */
.ej-rc-book { margin: 0 0 0.5rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--muted); }
.ej-rc-book em { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; letter-spacing: 0; color: var(--text); }
.ej-rc-quote {
  margin: 0 0 0.55rem; padding: 0 0 0 1rem; border-left: 2px solid var(--gold);
  font-family: var(--font-display); font-size: 1.02rem; font-style: italic;
  line-height: 1.45; color: var(--text);
}
.ej-tl-item > div { min-width: 0; }

/* ==========================================================================
   LIENS CROISÉS : le même objet vu depuis les autres tables
   ========================================================================== */
.ej-xref {
  margin: 0.9rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem;
}
.ej-xref a {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 0.22rem 0.6rem;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.ej-xref a:hover, .ej-xref a:focus-visible {
  color: var(--text); border-color: var(--gold); background: rgb(var(--gold-rgb, 232 85 122) / 0.08);
}

/* Une notice atteinte par ancre doit se signaler */
:target { scroll-margin-top: calc(76px + 2rem); }
.ej-work:target, .ej-edition:target, .ej-video:target, .ej-card:target, .ej-tl-item:target {
  outline: 1px solid var(--gold); outline-offset: 6px; border-radius: var(--radius-sm);
}

/* ==========================================================================
   INDEX DE L'ARCHIVE
   ========================================================================== */
.ej-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.ej-index li {
  display: grid; grid-template-columns: minmax(11rem, 20rem) 1fr; gap: 0.2rem 1.6rem;
  padding: 1rem 0; border-bottom: 1px solid var(--border); align-items: baseline;
}
.ej-index a { font-family: var(--font-display); font-size: 1.12rem; color: var(--text); }
.ej-index a:hover { color: var(--gold); }
.ej-index span { font-size: 0.86rem; line-height: 1.55; color: var(--muted); }
@media (max-width: 620px) { .ej-index li { grid-template-columns: 1fr; } }


/* ==========================================================================
   MENU MOBILE : volet déroulant pleine largeur (≤ 768px)
   Repris du site leondegrelle.com, qui partage ce chassis. La navigation
   elle-même devient le volet : elle se fixe sous la barre, occupe toute la
   largeur, et empile ses liens en pleine largeur. Le sélecteur de langue
   descend avec elle, ce qui laisse la barre au seul wordmark et au bouton.
   ========================================================================== */
@media (max-width: 768px) {
  .ej-nav-links {
    position: fixed; inset: 76px 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: rgb(var(--bg-rgb, 11 11 13) / 0.97);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem var(--gutter) 1.5rem;
    max-height: calc(100svh - 76px); overflow-y: auto;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
  }
  .ej-nav-links.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .ej-nav-link {
    width: 100%; padding: 0.9rem 0; font-size: 0.82rem;
    border-bottom: 1px solid var(--border);
  }
  .ej-nav-link.is-active::after { display: none; }
  .ej-burger { display: flex; }
  .ej-lang-selector { margin-top: 1.2rem; }
  body.ej-nav-open { overflow: hidden; }
  /* La barre ne porte plus que le wordmark et le bouton : il peut respirer. */
  .ej-logo img { height: 34px; }
}
@media (max-width: 380px) {
  .ej-logo img { height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .ej-nav-links { transition: none; }
  .ej-burger-icon span { transition: none; }
}

/* ==========================================================================
   Raccords de l'usine : éléments que la coquille du châssis ajoute et que la
   feuille d'origine ne connaissait pas.
   ========================================================================== */
/* Lien d'évitement : hors de l'écran jusqu'au focus clavier. */
.ej-skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  padding: 0.6rem 1rem; background: var(--text); color: var(--bg);
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em;
}
.ej-skip-link:focus { top: 1rem; }