/* =====================================================================
   CRAFT : motion + finition (chargée EN DERNIER)
   ---------------------------------------------------------------------
   Un seul moment orchestré (rideau d'accueil, une fois par session).
   Puis le site se tient : reveals courts, une seule fois, hover en
   transform/opacity. Pas de pulse infini, pas de sheen de bouton.
   Courbe : cubic-bezier(0.16, 1, 0.3, 1) — décélération muséale,
   jamais de bounce, jamais d'ease linéaire.
   ===================================================================== */

:root {
  --craft-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --craft-in:   cubic-bezier(0.22, 1, 0.36, 1);
  --craft-hover: 280ms;
  --craft-move:  320ms;
  --craft-reveal: 420ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------------
   Selection, focus, scrollbar : la même encre vin que les liens
   --------------------------------------------------------------------- */
::selection { background: #9E4C08; color: #F5F4F2; }
::-moz-selection { background: #9E4C08; color: #F5F4F2; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gl-focus, #FFA94D);
  outline-offset: 3px;
}
.ej-skip-link:focus-visible {
  top: 1rem;
  outline: 2px solid #9E4C08;
  outline-offset: 3px;
}
.ej-gallery-item:focus-visible,
.ej-video:focus-visible,
.ej-access-card:focus-visible,
.ej-logo:focus-visible,
.ej-footer-logo:focus-visible {
  outline: 2px solid var(--gl-focus, #FFA94D);
  outline-offset: 3px;
}

html {
  scrollbar-width: thin;
  scrollbar-color: #9E4C08 #0B1120;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0B1120; }
::-webkit-scrollbar-thumb {
  background: #9E4C08;
  border: 2px solid #0B1120;
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: #F0801A; }

/* Grain : patine d'archive, pas un filtre Instagram.
   Couvre tout le viewport, y compris le hero, sous l'UI. */
body > .ej-grain {
  display: none; /* le grain reste sur main::after ; on l'anoblit ici */
}
main::after {
  opacity: 0.032;
  z-index: 2;
}

/* ---------------------------------------------------------------------
   1. RIDEAU D'ENTRÉE (accueil, une fois par session)
   Voile noir. Un filament vin pousse, puis le voile se lève.
   Le texte attend. Rien d'autre ne bouge.
   --------------------------------------------------------------------- */
html.is-entering { overflow: hidden; }

.ej-enter {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  background: #050505;
  pointer-events: none;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity var(--craft-reveal) var(--craft-ease),
    transform 480ms var(--craft-ease);
}
html.is-entered .ej-enter {
  opacity: 0;
  transform: translate3d(0, -10%, 0);
  visibility: hidden;
  transition:
    opacity var(--craft-reveal) var(--craft-ease),
    transform 480ms var(--craft-ease),
    visibility 0s linear 480ms;
}

.ej-enter-filament {
  display: block;
  width: 1px;
  height: 0;
  background: #FFA94D;
  transform-origin: center top;
}
html.is-entering .ej-enter-filament {
  animation: ejFilament 360ms var(--craft-ease) forwards;
}
@keyframes ejFilament {
  from { height: 0; opacity: 0; }
  to   { height: 72px; opacity: 1; }
}

/* Pendant le rideau, le hero reste retenu (archive.js ne le révèle pas) */
html.is-entering .ej-hero .ej-reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(18px);
}

/* Indice de défilement : mot, puis un filament. Pas de pulse, pas de ::after. */
.ej-hero::after {
  content: none;
  animation: none;
}
.ej-hero:has(.ej-scroll-cue) .ej-hero-inner {
  padding-bottom: clamp(6rem, 11vw, 9rem);
}

.ej-hero-credit {
  margin: 1.6rem 0 0;
  max-width: 46ch;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  line-height: 1.55;
  color: var(--gl-steel, #B8B5B0);
}
.ej-hero-credit a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 168, 74, 0.35);
  transition: opacity var(--craft-hover) var(--craft-ease), border-color var(--craft-hover) var(--craft-ease);
}
.ej-hero-credit a:hover,
.ej-hero-credit a:focus-visible {
  opacity: 1;
  border-bottom-color: var(--gl-glacier, #FFA94D);
}

.ej-rights {
  margin: 1.2rem 0 1.4rem;
  max-width: 46rem;
}
.ej-rights > div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0.6rem 1.2rem;
  padding: 0.7rem 0;
  border-top: 1px solid rgba(200, 198, 194, 0.12);
}
.ej-rights > div:last-child { border-bottom: 1px solid rgba(200, 198, 194, 0.12); }
.ej-rights dt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gl-glacier, #FFA94D);
}
.ej-rights dd {
  margin: 0;
  color: var(--gl-ice, #EDECEA);
}
#hero, #images, #methodologie { scroll-margin-top: 5.5rem; }
@media (max-width: 640px) {
  .ej-rights > div { grid-template-columns: 1fr; gap: 0.25rem; }
}
.ej-gallery-item .ej-rights--gallery {
  margin: 0.45rem 0 0;
  max-width: none;
}
.ej-gallery-item .ej-rights--gallery > div {
  grid-template-columns: 1fr;
  gap: 0.12rem;
  padding: 0.32rem 0;
}
.ej-gallery-item .ej-rights--gallery dt {
  font-size: 0.56rem;
  letter-spacing: 0.1em;
}
.ej-gallery-item .ej-rights--gallery dd {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  color: var(--gl-steel, #B8B5B0);
}

.ej-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.35rem, 3.2vh, 2.25rem);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.9rem 0.2rem;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  text-decoration: none;
  color: var(--gl-steel, #B8B5B0);
  transition: opacity 480ms var(--craft-ease), color var(--craft-hover) var(--craft-ease);
}
html.is-entered .ej-scroll-cue:not(.is-gone) {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 420ms;
}
.ej-scroll-cue.is-gone {
  opacity: 0 !important;
  pointer-events: none;
}
.ej-scroll-cue:hover,
.ej-scroll-cue:focus-visible {
  color: var(--gl-ice, #EDECEA);
}
.ej-scroll-cue-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  line-height: 1;
  margin-right: -0.32em;
  color: inherit;
}
.ej-scroll-cue-line {
  position: relative;
  display: block;
  width: 1px;
  height: 56px;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(232, 168, 74, 0.58) 0%,
    rgba(232, 168, 74, 0.22) 62%,
    rgba(232, 168, 74, 0) 100%
  );
  transform-origin: top center;
  opacity: 0.9;
  transition: opacity var(--craft-hover) var(--craft-ease);
}
.ej-scroll-cue:hover .ej-scroll-cue-line,
.ej-scroll-cue:focus-visible .ej-scroll-cue-line {
  opacity: 1;
}
.ej-scroll-cue-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: -16px;
  width: 1px;
  height: 16px;
  background: linear-gradient(180deg, transparent, #F5F4F2 45%, #FFA94D);
}
html.is-entered .ej-scroll-cue:not(.is-gone) .ej-scroll-cue-line::after {
  animation: ejCueDrop 2.6s cubic-bezier(0.22, 1, 0.36, 1) 0.7s infinite;
}
@keyframes ejCueDrop {
  0%   { transform: translateY(0); opacity: 0; }
  12%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(72px); opacity: 0; }
}

/* ---------------------------------------------------------------------
   2. RÉVÉLATIONS : 420ms, une fois, translation courte
   --------------------------------------------------------------------- */
.ej-reveal {
  transform: translateY(16px);
  transition:
    opacity var(--craft-reveal) var(--craft-ease),
    transform var(--craft-reveal) var(--craft-ease);
}
.ej-reveal.is-in { opacity: 1; transform: none; }

.ej-kicker::before {
  transition: transform var(--craft-reveal) var(--craft-ease), opacity var(--craft-move) var(--craft-ease);
}
.ej-section-head::after {
  transition: transform 480ms var(--craft-ease) 80ms;
}
.ej-kicker::after {
  transition: opacity var(--craft-move) var(--craft-ease) 120ms;
}

/* Citations : fondu d'opacity, plus de blur (coûteux, hors brief) */
.ej-quote-item {
  filter: none;
  transform: none;
  transition: opacity var(--craft-reveal) var(--craft-ease);
}

/* ---------------------------------------------------------------------
   3. HOVER : CHAQUE interactif, transform / opacity uniquement
   Pas de box-shadow animé, pas de background interpolé, pas de sheen.
   --------------------------------------------------------------------- */
.ej-btn--primary::after { content: none; display: none; }

.ej-logo {
  transition: transform var(--craft-hover) var(--craft-ease), opacity var(--craft-hover) var(--craft-ease);
  filter: none;
}
.ej-logo:hover,
.ej-logo:focus-visible { transform: translateY(-1px); filter: none; }

.ej-nav-link {
  transition: color var(--craft-hover) var(--craft-ease), transform var(--craft-hover) var(--craft-ease);
}
.ej-nav-link:hover { transform: translateY(-1px); }

.ej-burger { transition: opacity var(--craft-hover) var(--craft-ease); }
.ej-burger:hover { opacity: 0.7; }
.ej-burger span {
  transition: transform var(--craft-move) var(--craft-ease), opacity var(--craft-hover) var(--craft-ease);
}

.ej-btn {
  transition: transform var(--craft-hover) var(--craft-ease), opacity var(--craft-hover) var(--craft-ease);
}
.ej-btn:hover { transform: translateY(-2px); }
.ej-btn--ghost:hover { opacity: 0.92; }

.ej-filter-btn {
  transition: transform var(--craft-hover) var(--craft-ease), opacity var(--craft-hover) var(--craft-ease);
}
.ej-filter-btn:hover { transform: translateY(-1px); }
.ej-filter-btn.active:hover { transform: none; }

.ej-card,
.ej-work,
.ej-edition,
.ej-source-card {
  transition: transform var(--craft-move) var(--craft-ease);
}
.ej-card:hover,
.ej-work:hover,
.ej-edition:hover {
  transform: translateY(-4px);
  box-shadow: var(--rz-shadow-soft, 0 2px 14px rgba(0, 0, 0, 0.45)),
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 18px 26px -22px rgba(232, 168, 74, 0.10);
}

/* Liseré de carte : scaleX, pas width (évite le layout) */
.ej-card::before {
  width: 72px;
  transform: scaleX(0.42);
  transform-origin: left center;
  transition: transform var(--craft-move) var(--craft-ease), opacity var(--craft-move) var(--craft-ease);
}
.ej-card:hover::before { width: 72px; transform: scaleX(1); opacity: 1; }

.ej-access-card .ej-card-arrow {
  transition: transform var(--craft-hover) var(--craft-ease), opacity var(--craft-hover) var(--craft-ease);
}
.ej-access-card:hover .ej-card-arrow {
  gap: 0.5rem;
  transform: translateX(6px);
}

.ej-work-cover img,
.ej-video-thumb img,
.ej-gallery-item img {
  transition: transform var(--craft-reveal) var(--craft-ease), opacity var(--craft-move) var(--craft-ease);
}
.ej-work:hover .ej-work-cover img { transform: scale(1.035); }
.ej-work-cover::after {
  transition: opacity var(--craft-move) var(--craft-ease);
}

.ej-video { transition: transform var(--craft-move) var(--craft-ease); }
.ej-video:hover { transform: translateY(-3px); }
.ej-play span {
  transition: transform var(--craft-hover) var(--craft-ease), opacity var(--craft-hover) var(--craft-ease);
}
.ej-video:hover .ej-play span { transform: scale(1.08); }

.ej-gallery-item {
  display: block;
  transition: transform var(--craft-move) var(--craft-ease);
}
.ej-gallery-item:hover { transform: translateY(-3px); }
.ej-gallery-item:hover img { transform: scale(1.035); }

.ej-pdf-link,
.ej-source-link,
.ej-prose a:not(.ej-btn),
.ej-video-credit a,
.ej-note a,
.ej-contact-mail {
  transition: opacity var(--craft-hover) var(--craft-ease), transform var(--craft-hover) var(--craft-ease);
}
.ej-pdf-link:hover,
.ej-source-link:hover { transform: translateX(3px); }
.ej-prose a:not(.ej-btn):hover,
.ej-video-credit a:hover,
.ej-note a:hover { opacity: 0.82; }
.ej-contact-mail:hover { opacity: 0.88; }

.ej-footer-col a {
  transition: transform var(--craft-hover) var(--craft-ease), opacity var(--craft-hover) var(--craft-ease);
}
.ej-footer-col a:hover { transform: translateX(3px); }
.ej-footer-col a::after {
  transition: transform var(--craft-hover) var(--craft-ease);
}

.ej-footer-logo {
  display: inline-block;
  transition: opacity var(--craft-move) var(--craft-ease), transform var(--craft-hover) var(--craft-ease);
}
.ej-footer-logo:hover { opacity: 0.75; transform: translateY(-1px); }

.ej-to-top {
  transition: opacity var(--craft-move) var(--craft-ease), transform var(--craft-move) var(--craft-ease);
}
.ej-to-top:hover { transform: translateY(-2px); }
.ej-to-top.is-visible:hover { transform: translateY(-2px); }

.ej-modal-close,
.ej-lightbox-close {
  transition: transform var(--craft-hover) var(--craft-ease), opacity var(--craft-hover) var(--craft-ease);
}
.ej-modal-close:hover,
.ej-lightbox-close:hover { transform: scale(1.08); opacity: 0.85; }

.ej-lightbox-nav {
  transition: transform var(--craft-hover) var(--craft-ease), opacity var(--craft-hover) var(--craft-ease);
}
.ej-lightbox-nav.prev:hover { transform: translateY(-50%) scale(1.08); }
.ej-lightbox-nav.next:hover { transform: translateY(-50%) scale(1.08); }

.ej-lightbox img {
  opacity: 1;
  transition: opacity var(--craft-reveal) var(--craft-ease);
}
.ej-lightbox img.is-wait { opacity: 0; }

.ej-skip-link { transition: opacity var(--craft-hover) var(--craft-ease); }

/* ---------------------------------------------------------------------
   4. NAVBAR : barre d'archive, pas un menu de template
   Wordmark = accueil. Accueil n'apparaît que dans le sommaire.
   Desktop : filet d'item, pas de translateY (la rangée doit rester calme).
   ≤1080px : panneau plein écran, cotes numérotées, verrouillage.
   Scroll : se condense, s'efface en descendant, revient en remontant.
   Pages intérieures : solide d'emblée (lisibilité sur le page-hero).
   --------------------------------------------------------------------- */
.ej-hero {
  overflow: visible;
}
.ej-hero-bg {
  overflow: hidden;
}

.ej-nav {
  overflow: visible;
  z-index: 200;
}
.ej-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(10, 10, 10, 0.78);
  opacity: 0;
  transition: opacity var(--craft-move) var(--craft-ease);
}
.ej-nav.is-scrolled::before,
.ej-nav.is-solid::before,
.ej-nav.is-open::before {
  opacity: 1;
  -webkit-backdrop-filter: saturate(120%) blur(16px);
  backdrop-filter: saturate(120%) blur(16px);
}
.ej-nav.is-scrolled,
.ej-nav.is-solid {
  border-bottom-color: var(--gl-border, rgba(200, 198, 194, 0.16));
  box-shadow: none;
  background: transparent;
}

.ej-nav-row {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 1.2rem;
  overflow: visible;
  flex-wrap: nowrap;
  transition: height var(--craft-move) var(--craft-ease);
}
.ej-nav.is-scrolled .ej-nav-row,
.ej-nav.is-solid .ej-nav-row { height: 64px; }

.ej-nav-links {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 201;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 76px;
  max-width: var(--container-wide, 86rem);
  margin: 0 auto;
  padding: 0 var(--gutter, 1.5rem);
  pointer-events: none;
  background: none;
  transition: transform var(--craft-move) var(--craft-ease);
}
.ej-nav.is-scrolled + .ej-nav-links:not(.is-open),
.ej-nav.is-solid + .ej-nav-links:not(.is-open) { height: 64px; }
.ej-nav-links > a { pointer-events: auto; }

.ej-logo {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.22rem;
  line-height: 1;
  position: relative;
  z-index: 3;
  min-width: 0;
  flex: 1 1 auto;
}
.ej-logo-word {
  font-size: 0.98rem;
  letter-spacing: 0.16em;
}
.ej-logo-kicker {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gl-glacier, #FFA94D);
}
.ej-logo:hover,
.ej-logo:focus-visible { transform: none; opacity: 0.78; }

/* Filet d'item : scaleX, 1px, vin pour l'actif. Pas de dégradé. */
.ej-nav-link {
  transform: none;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
}
.ej-nav-link:hover { transform: none; }
.ej-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.55rem;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0.55;
  box-shadow: none;
  transition: transform var(--craft-hover) var(--craft-ease), opacity var(--craft-hover) var(--craft-ease);
}
.ej-nav-link:hover::after { transform: scaleX(1); }
.ej-nav-link.is-active::after {
  transform: scaleX(1);
  background: #FFA94D;
  opacity: 1;
  height: 1px;
  box-shadow: none;
}
.ej-nav-link--home,
.ej-nav-contact { display: none; }

.ej-burger {
  display: none;
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -6px;
  padding: 0;
  color: var(--gl-ice, #EDECEA);
  background: transparent;
}
.ej-burger-icon {
  position: relative;
  display: block;
  width: 18px;
  height: 12px;
  flex: 0 0 auto;
  background: none !important;
  transform: none !important;
}
.ej-burger-icon span {
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  transform-origin: center;
}
.ej-burger-icon span:nth-child(1) { top: 1px; }
.ej-burger-icon span:nth-child(2) { bottom: 1px; }
.ej-burger:hover { opacity: 1; }
.ej-burger:hover .ej-burger-icon { opacity: 0.7; }
.ej-burger.is-open .ej-burger-icon span:nth-child(1) {
  top: 5px;
  transform: rotate(45deg);
}
.ej-burger.is-open .ej-burger-icon span:nth-child(2) {
  top: 5px;
  bottom: auto;
  transform: rotate(-45deg);
}

html.is-nav-open { overflow: hidden; }
html.is-nav-open .ej-to-top,
html.is-nav-open .ej-scroll-cue {
  opacity: 0 !important;
  pointer-events: none;
}

.ej-nav-right {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
}

.ej-page-hero {
  padding-top: calc(64px + env(safe-area-inset-top) + clamp(3rem, 7vw, 5.5rem));
}

@media (max-width: 1280px) and (min-width: 1081px) {
  .ej-nav-links { gap: 1.15rem; }
  .ej-nav-link { font-size: 0.64rem; letter-spacing: 0.11em; }
}

@media (min-width: 1081px) {
  .ej-burger { display: none !important; }
  .ej-nav-links {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.55rem;
    background: none !important;
    border: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    overflow: visible;
  }
  .ej-nav-link {
    width: auto;
    border: 0 !important;
    padding: 0.7rem 0;
  }
  .ej-nav-link--home,
  .ej-nav-contact { display: none !important; }
}

@media (max-width: 1080px) {
  .ej-nav::before { opacity: 1; }
  .ej-burger {
    display: inline-flex !important;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0;
  }
  .ej-logo { margin-right: auto; padding-right: 52px; }
  .ej-nav-row { justify-content: space-between; }
  .ej-nav-links:not(.is-open) {
    display: none !important;
  }
  .ej-nav-links.is-open {
    display: flex !important;
    position: fixed;
    inset: 0;
    z-index: 190;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    max-width: none;
    width: auto;
    height: auto !important;
    min-height: 100dvh;
    margin: 0;
    padding: calc(92px + env(safe-area-inset-top)) var(--gutter, 1.5rem) 3rem;
    background: #050505;
    border: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    overflow: auto;
    overscroll-behavior: contain;
    counter-reset: cote;
  }
  .ej-nav-link,
  .ej-nav-contact,
  .ej-nav-link--home {
    display: flex;
    align-items: baseline;
    gap: 1.1rem;
    width: 100%;
    min-height: 56px;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(200, 198, 194, 0.12);
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 5vw, 2.1rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gl-ice, #EDECEA);
  }
  .ej-nav-link::before {
    content: counter(cote, decimal-leading-zero);
    counter-increment: cote;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    color: var(--gl-glacier, #FFA94D);
    min-width: 1.8em;
  }
  .ej-nav-link::after,
  .ej-nav-contact::after { content: none; }
  .ej-nav-link:hover,
  .ej-nav-link:focus-visible { transform: translateX(8px); color: #fff; }
  .ej-nav-link.is-active { color: #fff; }
  .ej-nav-contact {
    margin-top: 1.4rem;
    border-bottom: 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: var(--gl-steel, #B8B5B0);
    min-height: 44px;
    padding-top: 1.2rem;
  }
  .ej-nav-contact:hover,
  .ej-nav-contact:focus-visible {
    transform: translateX(8px);
    color: var(--gl-glacier, #FFA94D);
  }
  .ej-nav-links.is-open .ej-nav-link,
  .ej-nav-links.is-open .ej-nav-contact {
    animation: ejNavCote var(--craft-reveal) var(--craft-ease) both;
  }
  .ej-nav-links.is-open .ej-nav-link:nth-child(1) { animation-delay: 40ms; }
  .ej-nav-links.is-open .ej-nav-link:nth-child(2) { animation-delay: 90ms; }
  .ej-nav-links.is-open .ej-nav-link:nth-child(3) { animation-delay: 140ms; }
  .ej-nav-links.is-open .ej-nav-link:nth-child(4) { animation-delay: 190ms; }
  .ej-nav-links.is-open .ej-nav-link:nth-child(5) { animation-delay: 240ms; }
  .ej-nav-links.is-open .ej-nav-link:nth-child(6) { animation-delay: 290ms; }
  .ej-nav-links.is-open .ej-nav-link:nth-child(7) { animation-delay: 340ms; }
  .ej-nav-links.is-open .ej-nav-link:nth-child(8) { animation-delay: 390ms; }
  .ej-nav-links.is-open .ej-nav-contact { animation-delay: 440ms; }
}
@keyframes ejNavCote {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 700px) {
  .ej-hero {
    min-height: 100svh;
    align-items: flex-end;
  }
  .ej-hero-inner {
    padding-top: calc(72px + env(safe-area-inset-top) + 1.2rem);
    padding-bottom: 1.8rem;
  }
  .ej-hero:has(.ej-scroll-cue) .ej-hero-inner {
    padding-bottom: 1.8rem;
  }
  .ej-scroll-cue { display: none; }
  .ej-hero-title { font-size: clamp(2.1rem, 11vw, 3.2rem); }
  .ej-hero-cta { margin-top: 1.4rem; }
  .ej-hero-credit { margin-top: 1.1rem; }
}

@media (max-width: 480px) {
  .ej-logo-word { font-size: 0.84rem; letter-spacing: 0.12em; }
}

/* ---------------------------------------------------------------------
   5. ÉTATS : vide, chargement, erreur : même soin que le hero
   --------------------------------------------------------------------- */
.ej-empty {
  margin: 3rem auto 1rem;
  max-width: 36ch;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--gl-steel, #B8B5B0);
}
.ej-empty[hidden] { display: none !important; }

.ej-media-status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gl-steel, #B8B5B0);
  background: #000;
  z-index: 1;
  pointer-events: none;
}
.ej-modal-inner { position: relative; }

.ej-empty-page {
  min-height: 78vh;
  display: grid;
  place-items: center;
  padding: 140px var(--gutter, 1.5rem) 5rem;
  text-align: center;
}
.ej-empty-page .ej-enter-filament--static {
  width: 1px;
  height: 56px;
  margin: 0 auto 1.6rem;
  background: #FFA94D;
  opacity: 0.85;
}
.ej-empty-page .ej-section-title { margin-top: 1rem; }
.ej-empty-page .ej-section-lead { margin-left: auto; margin-right: auto; }
.ej-empty-page .ej-hero-cta { justify-content: center; }

/* ---------------------------------------------------------------------
   6. prefers-reduced-motion : repli intégral
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.is-entering { overflow: visible; }

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

  .ej-enter { display: none !important; }
  .ej-reveal,
  .ej-hero-bg img,
  .ej-parallax,
  .ej-card,
  .ej-work,
  .ej-edition,
  .ej-video,
  .ej-gallery-item,
  .ej-btn,
  .ej-logo,
  .ej-nav-link,
  .ej-nav,
  .ej-to-top.is-visible {
    opacity: 1 !important;
    transform: none !important;
  }
  .ej-nav-links.is-open .ej-nav-link,
  .ej-nav-links.is-open .ej-nav-contact { animation: none; }
  .ej-scroll-cue { opacity: 0.9; pointer-events: auto; transform: translateX(-50%); }
  .ej-scroll-cue-line::after { display: none; }
  .ej-quote-item { filter: none !important; transform: none !important; }
  main::after { opacity: 0.018; }
}

/* Pied de page : logo texte identique à la barre de navigation */
.ej-footer-logo--text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.24rem;
  line-height: 1;
  text-decoration: none;
}
.ej-footer-logo--text .ej-logo-word { font-size: 1.05rem; }

/* Encart « Citer cette page » */
.ej-cite {
  border-top: 1px solid var(--border, #1f1f1f);
  padding: 1.6rem 0;
  background: var(--bg-2, #0B1120);
}

/* Masqué sur l'accueil seulement : la citation y répète le pied de page
   (même nom de site, même date, URL racine). Sur les pages internes elle
   apporte le titre de la page et son URL, absents du pied de page, donc
   elle reste utile. On cible l'accueil via .ej-enter, que le moteur
   n'insère que sur les fichiers de HOME_FILES : rien à changer dans
   engine.py, partagé avec les autres archives. */
body:has(> .ej-enter) .ej-cite { display: none; }
.ej-cite-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold, #FFA347);
  margin: 0 0 0.5rem;
}
.ej-cite-text {
  font-size: 0.85rem;
  color: var(--muted, #9a9a9a);
  margin: 0;
  max-width: 70ch;
}
.ej-cite-text a { color: inherit; text-decoration: underline; }

/* ==========================================================================
   Bandes claires « pierre » : sections de lecture sur parchemin
   Texture SVG inline (grain + veinage), accents bordeaux/or recalibrés AA.
   ========================================================================== */
main > .ej-section.ej-clair.ej-clair,
.ej-clair {
  --bg: #F4F0E7;
  --bg-2: #EDE8DC;
  --surface: #FBF8F1;
  --surface-2: #F0EBDF;
  --border: rgba(28, 25, 20, 0.16);
  --border-strong: rgba(28, 25, 20, 0.32);
  --text: #1D1A14;
  --muted: #57503F;
  --gold: #A8540A;
  --gold-soft: #7E4606;
  background-color: #F4F0E7;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.009' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.32 0 0 0 0 0.27 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23v)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.32 0 0 0 0 0.30 0 0 0 0 0.26 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  color: var(--text);
  border-top: 1px solid rgba(28, 25, 20, 0.2);
  border-bottom: 1px solid rgba(28, 25, 20, 0.2);
}

/* Surcharges des couleurs explicites du thème sombre (glacial-noir) */
.ej-clair .ej-section-title,
.ej-clair .ej-card-title,
.ej-clair .ej-era-title,
.ej-clair .ej-work-title,
.ej-clair h2, .ej-clair h3, .ej-clair h4 { color: #17140F; }
.ej-clair .ej-section-lead,
.ej-clair .ej-page-note,
.ej-clair .ej-figure-cap { color: #57503F; }
.ej-clair .ej-kicker,
.ej-clair .ej-era-years,
.ej-clair .ej-tl-year,
.ej-clair .ej-card-index,
.ej-clair .ej-source-cat { color: #9E4C08; }
.ej-clair p, .ej-clair li, .ej-clair .ej-tl-text, .ej-clair .ej-card-text { color: #2A251C; }
.ej-clair em, .ej-clair cite, .ej-clair strong { color: inherit; }
.ej-clair .ej-source-link { color: #9E4C08; }
.ej-clair .ej-source-link:hover { color: #17140F; }
.ej-clair .ej-work-year, .ej-clair .ej-work-cat { color: #57503F; }
.ej-clair .ej-filter-btn { color: #2A251C; border-color: rgba(28,25,20,0.32); }
.ej-clair .ej-filter-btn:hover { color: #9E4C08; }
.ej-clair .ej-rights dt { color: #9E4C08; }
.ej-clair .ej-rights dd { color: #2A251C; }
.ej-clair a:not(.ej-source-link):not(.ej-filter-btn) { color: #9E4C08; }
.ej-clair a:not(.ej-source-link):not(.ej-filter-btn):hover { color: #17140F; }

.ej-clair .ej-card,
.ej-clair .ej-work {
  background: #FBF8F1;
  border-color: rgba(28, 25, 20, 0.18);
  box-shadow: 0 2px 10px rgba(28, 25, 20, 0.10);
}
.ej-clair .ej-card:hover,
.ej-clair .ej-work:hover {
  background: #FFFDF8;
  border-color: rgba(28, 25, 20, 0.36);
  box-shadow: 0 16px 40px rgba(28, 25, 20, 0.16), inset 0 0 0 1px rgba(158, 76, 8, 0.10);
}
.ej-clair .ej-work-cover { background: #ECE6D8; box-shadow: inset 0 0 0 1px rgba(28, 25, 20, 0.10); }
.ej-clair .ej-work-cover--typo span { color: rgba(28, 25, 20, 0.30); }
.ej-clair .ej-gen-tree p, .ej-clair .ej-gen-tree li { color: #B8B5B0; }
.ej-clair .ej-note, .ej-clair .ej-note p, .ej-clair .ej-note strong { color: #57503F; }
.ej-clair .ej-note { border-color: rgba(28, 25, 20, 0.22); background: rgba(28, 25, 20, 0.04); }

/* Sources par période (chronologie) */
.ej-era-sources {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 1.1rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--border);
}
.ej-era-sources a { color: inherit; text-decoration: underline; }

/* Bascule de langue FR | DE */
.ej-lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--gl-border-strong, rgba(200,198,194,0.34));
  border-radius: 999px;
  overflow: hidden;
  margin-left: 0.5rem;
  pointer-events: auto;
  flex: none;
}
.ej-lang-opt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  padding: 0.4rem 0.8rem;
  color: var(--muted);
  transition: color 200ms cubic-bezier(0.22,1,0.36,1), background 200ms cubic-bezier(0.22,1,0.36,1);
}
.ej-lang-opt:hover { color: var(--text); }
.ej-lang-opt.is-on {
  background: var(--gl-ice-bright, #F5F4F2);
  color: #101010;
}
@media (max-width: 1080px) {
  .ej-nav-links.is-open .ej-lang-switch { margin: 1.2rem auto 0; }
}

/* ==========================================================================
   Thème Venner : palette « esprit du chasseur » (forêt, bronze, os)
   Remplace les accents bordeaux Rex par vert forêt et bronze.
   ========================================================================== */
:root {
  --gl-rex: #9E4C08;
  --gl-rex-mid: #C96410;
  --gl-rex-bright: #F0801A;
  --gl-glacier: #FFA94D;
  --gl-glacier-soft: #FFC178;
  --gl-focus: #FFA94D;
  --gold: #F79020;
  --gold-soft: #FFA347;
}
.ej-clair .ej-kicker,
.ej-clair .ej-era-years,
.ej-clair .ej-tl-year,
.ej-clair .ej-card-index,
.ej-clair .ej-source-cat { color: #8A5410; }
.ej-clair .ej-source-link { color: #8A5410; }
.ej-clair .ej-source-link:hover { color: #17140F; }
.ej-clair a:not(.ej-source-link):not(.ej-filter-btn) { color: #8A5410; }
.ej-clair .ej-rights dt { color: #8A5410; }

/* Hero Venner : gravure de Dürer en ton parchemin, voile sombre à gauche sous le texte */
.ej-hero-bg img {
  filter: sepia(0.38) brightness(0.85) contrast(1.03);
  opacity: 0.92;
  object-position: 80% 18%;
}
.ej-hero-bg::after {
  background:
    linear-gradient(90deg, rgba(8, 10, 8, 0.97) 0%, rgba(8, 10, 8, 0.86) 32%, rgba(8, 10, 8, 0.42) 60%, rgba(8, 10, 8, 0.28) 100%),
    linear-gradient(180deg, rgba(8, 10, 8, 0.30) 0%, rgba(8, 10, 8, 0.12) 40%, rgba(7, 8, 7, 0.92) 100%) !important;
}

/* Carmack : survol des cartes « éclaté de lumière » ambre */
.ej-card:hover,
.ej-card.ej-access-card:hover {
  background: linear-gradient(165deg, rgba(232, 168, 74, 0.30) 0%, rgba(214, 138, 44, 0.10) 34%, #161E2E 62%) !important;
  border-color: rgba(232, 168, 74, 0.55) !important;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.55),
    0 0 34px rgba(232, 168, 74, 0.28),
    inset 0 0 0 1px rgba(240, 200, 130, 0.35),
    inset 0 40px 60px -30px rgba(232, 168, 74, 0.22) !important;
  transform: translateY(-6px);
}
.ej-card:hover .ej-card-title { color: #FDE9C6; }
.ej-card:hover .ej-card-index { color: #F3B24C; }
.ej-source-card:hover .ej-source-cat { color: #F3B24C; }

/* Hero « décor » (SVG couloir) : bien visible, voile latéral sous le texte */
.ej-hero-bg--art img {
  filter: none;
  opacity: 1;
  object-position: center 42%;
}
.ej-hero-bg--art::after {
  background:
    linear-gradient(90deg, rgba(8, 7, 5, 0.94) 0%, rgba(8, 7, 5, 0.72) 34%, rgba(8, 7, 5, 0.30) 60%, rgba(8, 7, 5, 0.20) 100%),
    linear-gradient(180deg, rgba(8, 7, 5, 0.55) 0%, rgba(8, 7, 5, 0.05) 34%, rgba(6, 5, 4, 0.80) 100%) !important;
}

/* Jaquettes originales SVG de la ludographie */
.ej-work-cover--art { background: #070C18; overflow: hidden; }
.ej-work-cover--art svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.ej-work:hover .ej-work-cover--art svg { transform: scale(1.03); transition: transform 400ms cubic-bezier(0.22,1,0.36,1); }

/* Lien « voir la jaquette » sur les cartes de jeu */
.ej-work-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--gold);
  margin: 0.3rem 0 0.7rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 168, 74, 0.35);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.ej-work-link:hover { color: #F3B24C; border-color: #F3B24C; }

/* Hero vidéo (lecteur YouTube intégré) + médaillon portrait */
.ej-hero-bg--video { background-size: cover; background-position: center; }
.ej-hero-video { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.ej-hero-video iframe {
  position: absolute; top: 50%; left: 50%;
  width: 100vw; height: 56.25vw;              /* 16:9 */
  min-height: 100%; min-width: 177.78vh;
  transform: translate(-50%, -50%);
  border: 0; pointer-events: none;
}
.ej-hero-bg--video::after {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(8,7,5,0.92) 0%, rgba(8,7,5,0.66) 34%, rgba(8,7,5,0.28) 62%, rgba(8,7,5,0.20) 100%),
    linear-gradient(180deg, rgba(8,7,5,0.45) 0%, rgba(8,7,5,0.10) 36%, rgba(6,5,4,0.86) 100%) !important;
}
.ej-hero-inner { position: relative; z-index: 2; }

.ej-hero-medallion {
  position: absolute; top: 50%; right: 0; transform: translateY(-58%);
  width: 230px; height: 230px; border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(232,168,74,0.6);
  box-shadow: 0 0 0 6px rgba(232,168,74,0.10), 0 18px 50px rgba(0,0,0,0.55), 0 0 40px rgba(232,168,74,0.22);
}
.ej-hero-medallion img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
@media (max-width: 900px) {
  .ej-hero-medallion { position: static; transform: none; width: 128px; height: 128px; margin: 0 0 1.2rem; }
}

/* Portrait retravaillé : désaturé et viré vers le duotone ambre/nuit du site */
.ej-graded {
  filter: grayscale(1) sepia(0.5) saturate(2.1) hue-rotate(-12deg) brightness(0.9) contrast(1.08);
}
.ej-hero-medallion .ej-graded { filter: grayscale(1) sepia(0.5) saturate(2.1) hue-rotate(-12deg) brightness(0.92) contrast(1.06); }

/* Correctif : survol des cartes SUR SECTION CLAIRE (garde le fond clair, halo ambre lisible) */
.ej-clair .ej-card:hover,
.ej-clair .ej-card.ej-access-card:hover,
.ej-clair .ej-source-card:hover {
  background: linear-gradient(165deg, rgba(232,168,74,0.20) 0%, rgba(240,200,130,0.09) 40%, #FBF8F1 74%) !important;
  border-color: rgba(214,138,44,0.6) !important;
  box-shadow:
    0 18px 44px rgba(28,25,20,0.16),
    0 0 30px rgba(232,168,74,0.22),
    inset 0 0 0 1px rgba(214,138,44,0.30) !important;
  transform: translateY(-6px);
}
.ej-clair .ej-card:hover .ej-card-title { color: #17140F !important; }
.ej-clair .ej-card:hover .ej-card-text { color: #2A251C !important; }
.ej-clair .ej-card:hover .ej-card-index,
.ej-clair .ej-source-card:hover .ej-source-cat { color: #A5620F !important; }

/* Garantie anti-dégradé sombre : sur section claire, aucune carte ne s'assombrit au survol */
.ej-clair .ej-card:hover,
.ej-clair .ej-card:hover.ej-access-card,
.ej-clair .ej-source-card:hover,
.ej-clair .ej-work:hover {
  background-image: none !important;
  background-color: #FBF8F1 !important;
}

/* Ouvrages de référence : fiches couverture + texte */
.ej-biblio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.ej-biblio-item { display: flex; gap: 1.1rem; align-items: flex-start; }
.ej-biblio-cover { flex: 0 0 96px; width: 96px; border-radius: 6px; overflow: hidden; box-shadow: 0 8px 22px rgba(0,0,0,0.35); background: #0E1424; }
.ej-biblio-cover img { display: block; width: 100%; height: auto; }
.ej-biblio-title { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.25; margin: 0 0 0.3rem; }
.ej-biblio-meta { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.03em; color: var(--gold); margin: 0 0 0.5rem; }
.ej-biblio-note { font-size: 0.9rem; margin: 0 0 0.6rem; }
.ej-clair .ej-biblio-meta { color: #A5620F; }
@media (max-width: 720px) { .ej-biblio-grid { grid-template-columns: 1fr; } }

/* Hero montage illustré : image visible, voile bleu-nuit sous le texte */
.ej-hero-bg--collage img { filter: none; opacity: 1; object-fit: cover; object-position: center 30%; }
.ej-hero-bg--collage::after {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(7,10,20,0.94) 0%, rgba(7,10,20,0.66) 34%, rgba(7,10,20,0.28) 60%, rgba(7,10,20,0.18) 100%),
    linear-gradient(180deg, rgba(7,10,20,0.42) 0%, rgba(7,10,20,0.10) 36%, rgba(6,9,18,0.86) 100%) !important;
}
/* Accent bleu secondaire (écho du montage) sur quelques éléments */
::selection { background: rgba(74,144,208,0.35); }
.ej-scroll-cue-line { background: linear-gradient(180deg, #4A90D0, transparent); }