/* ==========================================================================
   Mongi Ouerfelli — Une vie en lumière · cinematic scrollytelling
   Un rideau se lève, cinq actes plein écran, pellicules d'époque,
   générique de fin. Version Claude — indépendante de index.html.
   ========================================================================== */

:root {
  /* Affiche de théâtre : encre noire, os, rouge de scène. */
  --stage: #0b0908;
  --stage-2: #131009;
  --stage-3: #1c1712;
  --gold: #e6392b;          /* accent principal : rouge de scène */
  --gold-bright: #ff6b4a;   /* rouge chauffé */
  --prize: #d4a24e;         /* l'or, réservé aux prix */
  --cream: #efe7d3;
  --dim: #b3a894;
  --faint: #776c5a;
  --curtain: #6e1414;
  --curtain-2: #380a0a;
  --line: rgba(230, 57, 43, 0.30);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --arabic: Amiri, "Traditional Arabic", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--stage);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.68;
  overflow-x: hidden;
}

::selection { background: var(--gold); color: var(--stage); }
button, input, select { font: inherit; }
img { max-width: 100%; }

/* grain de pellicule */
body::after {
  content: "";
  position: fixed; inset: -50px;
  pointer-events: none;
  z-index: 60;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(2) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  50% { transform: translate(18px, -12px); }
  100% { transform: translate(-14px, 16px); }
}

/* ---------- Le rideau (chargement) ---------- */
.curtain {
  position: fixed; inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.curtain-panel {
  position: absolute; top: 0; bottom: 0; width: 51%;
  background:
    repeating-linear-gradient(90deg, var(--curtain) 0 34px, var(--curtain-2) 34px 68px);
  box-shadow: inset 0 -120px 160px rgba(0, 0, 0, 0.65);
  transition: transform 1.6s cubic-bezier(0.7, 0, 0.2, 1);
}
.curtain-panel.left { left: 0; }
.curtain-panel.right { right: 0; }
.curtain-title {
  position: relative;
  text-align: center;
  color: var(--gold-bright);
  font-family: var(--serif);
  font-size: clamp(18px, 2.6vw, 30px);
  font-style: italic;
  letter-spacing: 0.06em;
  opacity: 1;
  transition: opacity 0.7s;
}
.curtain-title small {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 12px;
}
body.open .curtain-panel.left { transform: translateX(-102%); }
body.open .curtain-panel.right { transform: translateX(102%); }
body.open .curtain-title { opacity: 0; }
body.open .curtain { transition: visibility 0s 1.7s; visibility: hidden; }

/* ---------- Rail de progression (les actes) ---------- */
.rail {
  position: fixed; right: 22px; top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  display: grid; gap: 16px;
  justify-items: center;
}
.rail a {
  width: 10px; height: 10px;
  border: 1px solid var(--faint);
  border-radius: 50%;
  display: block;
  text-decoration: none;
  position: relative;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.rail a.on {
  border-color: var(--gold-bright);
  background: var(--gold-bright);
  box-shadow: 0 0 14px rgba(240, 198, 116, 0.7);
}
.rail a i {
  position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  font-family: var(--serif);
  font-size: 12px;
  color: var(--gold-bright);
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.25s;
  pointer-events: none;
}
.rail a:hover i { opacity: 1; }
@media (max-width: 900px) { .rail { display: none; } }

/* ---------- Navigation ---------- */
.topnav {
  position: fixed; inset: 0 0 auto;
  z-index: 40;
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 14px clamp(16px, 4vw, 48px);
  background: transparent;
  transition: background 0.35s, border-color 0.35s;
  border-bottom: 1px solid transparent;
}
.topnav.scrolled {
  background: rgba(7, 6, 5, 0.9);
  border-bottom-color: var(--line);
  backdrop-filter: blur(10px);
}
/* le programme : entrées numérotées, soulignement qui balaie */
.topnav div { counter-reset: prog; }
.topnav div > a {
  counter-increment: prog;
  position: relative;
  color: var(--dim);
  text-decoration: none;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 4px 0;
  transition: color 0.25s;
  background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 100% / 0 2px;
  transition: color 0.25s, background-size 0.35s;
}
.topnav div > a::before {
  content: counter(prog, decimal-leading-zero);
  font-family: var(--serif);
  color: var(--gold);
  font-size: 10px;
  margin-right: 6px;
  vertical-align: super;
}
.topnav div > a:hover {
  color: var(--cream);
  background-size: 100% 2px;
}
/* la ligne rouge : où en est le spectacle */
#progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--curtain), var(--gold));
  z-index: 60;
  box-shadow: 0 0 10px rgba(230, 57, 43, 0.5);
}
.topnav a.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--gold);
  letter-spacing: 0.1em;
  white-space: nowrap;
  text-decoration: none;
}
/* le quadrilobe : l'emblème de la troupe du Kef, cachet des pages d'album */
.brand-mark {
  width: 27px;
  height: 27px;
  flex: none;
}
.brand-mark circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.brand-mark .bm-dot { fill: var(--gold-bright); stroke: none; }
.brand:hover .brand-mark { transform: rotate(45deg); transition: transform 0.6s ease; }
.brand-word { display: grid; line-height: 1.15; }
.brand-word small {
  font-family: var(--arabic);
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0;
}
.topnav div { display: flex; flex-wrap: wrap; gap: 16px; justify-content: end; align-items: center; }

.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  margin-left: 6px;
}
.lang-toggle button {
  background: none; border: 0;
  color: var(--dim);
  font-size: 11px; letter-spacing: 0.1em;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.lang-toggle button.active { background: var(--gold); color: var(--stage); font-weight: 600; }

/* ---------- Révélations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1s cubic-bezier(0.2, 0.6, 0.2, 1), transform 1s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.reveal.on { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.12s; }
.reveal.d2 { transition-delay: 0.24s; }
.reveal.d3 { transition-delay: 0.36s; }

/* ---------- Héros ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  /* assez d'air en bas pour que les stats ne touchent jamais l'appel au scroll */
  padding: 90px clamp(16px, 4vw, 48px) 150px;
}
.hero-bg {
  position: absolute; inset: -6%;
  background-size: cover;
  background-position: center 18%;
  filter: grayscale(0.55) sepia(0.25) brightness(0.4) contrast(1.1);
  animation: kenburns 36s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.02) translateY(0); }
  to { transform: scale(1.12) translateY(-2.5%); }
}
.hero-shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 50% at var(--sx, 50%) var(--sy, 38%),
      rgba(240, 198, 116, 0.25) 0%,
      rgba(240, 198, 116, 0.08) 38%,
      rgba(7, 6, 5, 0.87) 76%,
      rgba(7, 6, 5, 0.99) 100%);
  transition: background 0.1s linear;
}
/* Héros composé comme une affiche : tout à gauche, l'arabe en colonne à droite. */
.hero { place-items: end start; text-align: left; }
.hero-copy { position: relative; z-index: 2; max-width: 1100px; }
.hero-eyebrow {
  display: inline-block;
  margin: 0 0 26px;
  padding: 6px 14px;
  background: var(--gold);
  color: var(--stage);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  transform: rotate(-1.2deg);
}
h1 {
  margin: 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 460;
  font-size: clamp(58px, 12vw, 170px);
  line-height: 0.84;
  letter-spacing: -0.02em;
}
h1 .l1 { display: block; color: var(--cream); }
h1 .l2 {
  display: block;
  margin-left: clamp(20px, 6vw, 120px);
  color: transparent;
  -webkit-text-stroke: 2px var(--gold);
}
.ar-vertical {
  position: absolute;
  top: 50%; right: clamp(6px, 2.5vw, 40px);
  transform: translateY(-50%);
  z-index: 2;
  writing-mode: vertical-rl;
  font-family: var(--arabic);
  /* Une seule colonne : la taille suit la hauteur de l'écran, jamais de retour. */
  font-size: min(9vh, 6vw, 88px);
  white-space: nowrap;
  max-height: 96svh;
  color: var(--gold);
  opacity: 0.85;
  letter-spacing: 0.08em;
  pointer-events: none;
  text-shadow: 0 0 40px rgba(230, 57, 43, 0.35);
}
.hero-line {
  width: 120px; height: 4px;
  margin: 30px 0 24px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 14px, transparent 14px 22px);
}
.lead {
  max-width: 620px;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  color: var(--cream);
  opacity: 0.9;
  font-size: clamp(16px, 2vw, 21px);
  line-height: 1.6;
}
.lead small {
  display: block;
  margin-top: 10px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}
.hero-stats {
  display: flex; flex-wrap: wrap;
  gap: clamp(22px, 5vw, 64px);
  margin-top: 42px;
}
.hero-stats span {
  display: grid;
  color: var(--faint);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hero-stats strong {
  font-family: var(--serif);
  color: var(--gold-bright);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 500;
  line-height: 1.15;
}
.hero-stats em { font-style: normal; }
.scroll-cue {
  position: absolute; bottom: 30px; left: clamp(18px, 6vw, 90px);
  z-index: 3;
  z-index: 2;
  color: var(--gold);
  text-decoration: none;
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}
.scroll-cue::after {
  content: "";
  display: block;
  width: 1px; height: 44px;
  margin: 10px auto 0;
  background: linear-gradient(var(--gold), transparent);
  animation: cue 2.2s infinite;
}
@keyframes cue {
  0% { transform: scaleY(0); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: top; }
  56% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Marquee : les titres défilent comme une enseigne ---------- */
.marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  background: var(--stage-2);
}
.marquee-track span, .marquee-track i, .marquee-track b { line-height: 1.4; }
.marquee-track {
  display: inline-flex;
  align-items: baseline;
  gap: 3.2rem;
  white-space: nowrap;
  will-change: transform;
  animation: marq 60s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--cream);
  opacity: 0.85;
}
.marquee-track i {
  font-style: normal;
  font-family: var(--arabic);
  color: var(--gold);
  font-size: 18px;
  margin-inline-start: 10px;
}
.marquee-track b { color: var(--gold); font-weight: 400; }
@keyframes marq {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Chapitres (les actes) : doubles pages d'album ---------- */
.chapter { position: relative; isolation: isolate; }
.chapter-scroll { height: 150svh; }
.chapter-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  padding: clamp(70px, 10vh, 110px) clamp(18px, 6vw, 90px) 40px;
  overflow: hidden;
}
/* la photo est un panneau cadré, pas un fond : rien ne la recouvre */
.chapter-visual {
  margin: 0;
  position: relative;
  height: min(74vh, 680px);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--stage-3);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.chapter-visual img {
  width: 100%;
  height: 106%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.15) sepia(0.08) brightness(0.92);
  will-change: transform;
}
/* actes impairs : texte à gauche, photo à droite ; pairs : miroir */
.chapter:nth-of-type(odd) .chapter-stage .chapter-inner { order: 1; }
.chapter:nth-of-type(odd) .chapter-stage .chapter-visual { order: 2; }
.chapter:nth-of-type(even) .chapter-stage .chapter-inner { order: 2; }
.chapter:nth-of-type(even) .chapter-stage .chapter-visual { order: 1; }
.chapter-inner { max-width: 880px; position: relative; }
/* le texte d'un acte ne se coupe jamais : la typographie se resserre sur les
   écrans bas, et si la colonne dépasse encore, le défilement de l'acte la fait
   panoramiquer — jamais d'ascenseur dans une mise en scène */
@media (max-height: 1000px) {
  .chapter-stage { padding-top: 48px; }
  .act-num { font-size: clamp(44px, 7vh, 96px); }
  .chapter h2 { font-size: clamp(26px, 4.6vh, 48px); margin-bottom: 12px; }
  .beats { font-size: clamp(13.5px, 1.9vh, 16.5px); line-height: 1.6; }
  .pull { margin-top: 14px; font-size: clamp(14px, 2vh, 18px); }
}
/* un acte sur deux bascule à droite : pas deux écrans avec le même rythme */
.chapter:nth-of-type(even) .chapter-inner { margin-left: auto; text-align: right; }
.chapter:nth-of-type(even) .chapter p { margin-left: auto; }
.chapter:nth-of-type(even) .pull {
  margin-left: auto;
  border-left: 0;
  border-right: 2px solid var(--gold);
  padding-left: 0;
  padding-right: 18px;
}
/* étiquette verticale d'acte sur le bord */
.act-side {
  position: absolute;
  top: 50%; left: 10px;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 10px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.75;
  z-index: 1;
}
.chapter:nth-of-type(even) .act-side { left: auto; right: 10px; }
/* Le numéral d'acte vit DANS le flux : posé sur le titre, jamais en vadrouille. */
.act-num {
  font-family: var(--serif);
  font-size: clamp(64px, 8vw, 130px);
  line-height: 0.72;
  color: transparent;
  -webkit-text-stroke: 1px rgba(230, 57, 43, 0.5);
  display: block;
  margin: 0 0 -0.1em;
  user-select: none;
}
.act-years {
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.chapter h2 {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(34px, 5.4vw, 66px);
  line-height: 1.02;
}
.chapter h2 .ar {
  display: block;
  font-family: var(--arabic);
  color: var(--gold-bright);
  font-size: 0.55em;
  margin-top: 8px;
}
.chapter p {
  margin: 0;
  max-width: 640px;
  color: var(--cream);
  opacity: 0.9;
  font-size: clamp(15.5px, 1.6vw, 18px);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}


/* Le récit en battements : chaque phrase s'allume quand le lecteur l'atteint. */
.beats {
  margin: 0;
  max-width: 640px;
  font-size: clamp(15.5px, 1.6vw, 18px);
  line-height: 1.75;
}
.beat {
  opacity: 0.14;
  transition: opacity 0.6s ease, text-shadow 0.6s ease;
}
.beat.lit {
  opacity: 1;
  text-shadow: 0 0 22px rgba(230, 57, 43, 0.12);
}
blockquote.pull.beat { opacity: 0.1; transition: opacity 0.7s ease; }
blockquote.pull.beat.lit { opacity: 1; }

/* ---------- Citation extraite ---------- */
.pull {
  margin: 26px 0 0;
  max-width: 620px;
  padding-left: 18px;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.5;
  color: var(--gold-bright);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
.pull cite {
  display: block;
  margin-top: 10px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ---------- Les chiffres de la presse ---------- */
.numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(22px, 4vw, 48px);
}
.number {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.number strong {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(44px, 6vw, 76px);
  line-height: 1;
  color: var(--gold-bright);
}
.number span {
  display: block;
  margin-top: 10px;
  color: var(--dim);
  font-size: 14px;
  line-height: 1.5;
  max-width: 300px;
}

/* ---------- Pellicule (film strip) ---------- */
.strip-wrap {
  grid-column: 1 / -1; margin-top: clamp(40px, 7vh, 70px); }
.strip-hint {
  margin: 0 0 6px;
  color: var(--faint);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 16px 4px 22px;
  cursor: grab;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
  /* perforations de pellicule */
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-image: repeating-linear-gradient(90deg, transparent 0 6px, rgba(212, 162, 78, 0.35) 6px 12px) 8;
}
.strip.dragging { cursor: grabbing; scroll-snap-type: none; }
.strip figure {
  margin: 0;
  flex: 0 0 auto;
  width: clamp(200px, 24vw, 300px);
  scroll-snap-align: start;
  display: grid;
  gap: 9px;
  position: relative;
  transition: transform 0.5s ease;
}
/* tirages collés de travers, comme sur un mur de loge */
.strip figure:nth-child(3n) { transform: rotate(-1.4deg); }
.strip figure:nth-child(3n+1) { transform: rotate(0.9deg); }
.strip figure:nth-child(5n) { transform: rotate(1.8deg); }
.strip figure:hover { transform: rotate(0deg) scale(1.01); z-index: 2; }
/* le morceau de ruban adhésif */
.strip figure::before {
  content: "";
  position: absolute;
  top: -9px; left: 50%;
  width: 70px; height: 20px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(239, 231, 211, 0.28);
  border-left: 1px dashed rgba(239, 231, 211, 0.35);
  border-right: 1px dashed rgba(239, 231, 211, 0.35);
  z-index: 3;
  pointer-events: none;
}
.strip button {
  padding: 0; cursor: pointer;
  background: var(--stage-3);
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid rgba(212, 162, 78, 0.18);
  height: clamp(230px, 30vw, 330px);
}
.strip video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.strip img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  /* la photo « se développe » quand on l'atteint */
  filter: sepia(0.55) grayscale(0.7) brightness(0.55) contrast(0.9) blur(2px);
  transform: scale(1.04);
  transition: filter 1.3s cubic-bezier(0.2, 0.6, 0.2, 1), transform 1.3s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.strip figure.lit img {
  filter: grayscale(0.25) sepia(0.1) brightness(0.92) contrast(1) blur(0);
  transform: none;
  /* une fois développée, la photo vit : elle respire et dérive dans son cadre,
     façon journal de Harry Potter. Variante, durée et retard posés par JS. */
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.strip figure.lit:hover img { animation-play-state: paused; }
@keyframes vivre-a {
  from { transform: scale(1.07) translate(-1.6%, -1%); }
  to { transform: scale(1.13) translate(1.6%, 1.3%); }
}
@keyframes vivre-b {
  from { transform: scale(1.1) translate(1.4%, 1.2%); }
  to { transform: scale(1.05) translate(-1.2%, -1.5%); }
}
@keyframes vivre-c {
  from { transform: scale(1.06) translate(0.8%, -1.4%) rotate(-0.5deg); }
  to { transform: scale(1.12) translate(-1%, 1%) rotate(0.5deg); }
}
.strip figure.lit button:hover img { filter: none; transform: scale(1.06); }
.strip button { transition: transform 0.35s ease, box-shadow 0.35s ease; transform-style: preserve-3d; }
.strip button:hover { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 36px rgba(212, 162, 78, 0.14); }
.strip figcaption {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.9s 0.35s, transform 0.9s 0.35s;
}
.strip figure.lit figcaption { opacity: 1; transform: none; }
.strip figcaption {
  font-size: 11.5px;
  color: var(--dim);
  line-height: 1.45;
  border-left: 2px solid var(--gold);
  padding-left: 9px;
}

/* ---------- Sections éditoriales ---------- */
main > section.paper {
  padding: clamp(80px, 12vh, 150px) clamp(18px, 6vw, 90px);
  max-width: 1420px;
  margin: 0 auto;
  position: relative;
}
main > section.paper::before {
  content: "";
  position: absolute; top: 0; left: clamp(18px, 6vw, 90px); right: clamp(18px, 6vw, 90px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}
.section-head { max-width: 900px; margin-bottom: 48px; position: relative; z-index: 1; }
/* le mot fantôme : un immense mot arabe respire derrière chaque section */
main > section[data-ghost] { position: relative; overflow: hidden; }
main > section[data-ghost]::before {
  content: attr(data-ghost);
  position: absolute;
  top: clamp(-30px, -3vw, -10px);
  right: clamp(-20px, -2vw, 0px);
  font-family: var(--arabic);
  font-size: clamp(140px, 24vw, 340px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(230, 57, 43, 0.13);
  pointer-events: none;
  user-select: none;
}
main > section[data-ghost]:nth-of-type(even)::before { right: auto; left: clamp(-20px, -2vw, 0px); }
/* La rubrique : un filet, des petites capitales — de la typographie, pas un autocollant. */
.section-head .kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  color: var(--gold-bright);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.section-head .kicker::before {
  content: "";
  width: 46px;
  height: 1px;
  background: currentColor;
  flex: none;
}
/* Le folio : le numéro de page du programme, immense et en creux. */
.section-head[data-no]::before {
  content: attr(data-no);
  position: absolute;
  top: -0.32em;
  left: -12px;
  z-index: -1;
  font-family: var(--serif);
  font-size: clamp(110px, 14vw, 210px);
  font-weight: 500;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(230, 57, 43, 0.22);
  pointer-events: none;
  user-select: none;
}
.section-head h2 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 440;
  font-size: clamp(30px, 4.6vw, 58px);
  line-height: 1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* La bande des chiffres de carrière : UNE ligne, les quatre côte à côte. */
.stats-band {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--stage-2);
  padding: 18px clamp(10px, 2vw, 32px);
}
.stats-band span {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  padding: 0 clamp(8px, 1.4vw, 28px);
  color: var(--faint);
  font-size: clamp(8.5px, 0.72vw, 11px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.stats-band span + span { border-left: 1px solid var(--line); }
.stats-band strong {
  font-family: var(--serif);
  color: var(--gold-bright);
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 500;
  line-height: 1;
}
.stats-band em { font-style: normal; }
@media (max-width: 760px) {
  .stats-band { flex-wrap: wrap; }
  .stats-band span { flex: 1 1 45%; padding: 8px 10px; }
  .stats-band span + span { border-left: 0; }
}
.section-head p:last-child { color: var(--dim); font-size: 16.5px; max-width: 700px; }

/* ---------- Les pages imprimées du programme : encre sur papier os ----------
   Le site alterne comme un programme de théâtre : scènes sombres, pages claires.
   La direction vient des albums de l'artiste : crème, cadres rouges, encre. */
main > section.paper-bone {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(178deg, #f0e8d5, #e5dabf);
  color: #191410;
}
main > section.paper-bone[data-ghost]::before { -webkit-text-stroke-color: rgba(143, 29, 18, 0.14); }
.paper-bone .section-head h2 { color: #14100c; }
.paper-bone .section-head .kicker { color: #8f1d12; }
.paper-bone .section-head[data-no]::before { -webkit-text-stroke-color: rgba(143, 29, 18, 0.28); }
.paper-bone .section-head p:last-child { color: rgba(25, 20, 16, 0.72); }
/* la chronique devient un carnet de billets imprimés */
.paper-bone .era-title { color: #8f1d12; }
.paper-bone .era-note { color: rgba(25, 20, 16, 0.6); }
.paper-bone .tickets { scrollbar-color: #8f1d12 transparent; }
.paper-bone .ticket {
  border-color: rgba(25, 20, 16, 0.3);
  background:
    radial-gradient(circle at 0 50%, #ece3cd 7px, transparent 7.5px),
    radial-gradient(circle at 100% 50%, #ece3cd 7px, transparent 7.5px),
    linear-gradient(165deg, rgba(255, 253, 247, 0.9), rgba(244, 238, 222, 0.9));
  box-shadow: 0 6px 16px rgba(25, 20, 16, 0.12);
}
.paper-bone .ticket::before { border-top-color: rgba(143, 29, 18, 0.35); }
.paper-bone .ticket b { color: #14100c; }
.paper-bone .ticket .era-ar { color: #8f1d12; }
.paper-bone .ticket span { color: rgba(25, 20, 16, 0.55); }
.paper-bone .tk-count { color: #8f1d12; }
.paper-bone .ticket.has-img:hover { border-color: #8f1d12; }
/* les autres vies : cartes d'encre sur le papier */
.paper-bone .vie {
  border-color: rgba(25, 20, 16, 0.25);
  background: rgba(255, 253, 246, 0.65);
  box-shadow: 0 8px 20px rgba(25, 20, 16, 0.1);
}
.paper-bone .vie h3 { color: #14100c; }
.paper-bone .vie-ar { color: #8f1d12; }
.paper-bone .vie p { color: rgba(25, 20, 16, 0.72); }
.paper-bone .vie-ev button { border-color: rgba(143, 29, 18, 0.3); background: #ded2b6; }

/* ---------- Dossiers : une liste qui respire, le détail au clic ---------- */
.role-dossiers { display: grid; }
.dossier { border-top: 1px solid var(--line); }
.dossier-head {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 20px 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  text-align: left;
  transition: padding-left 0.3s;
}
.dossier-head:hover { padding-left: 10px; }
.dossier-head h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 460;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.05;
  transition: color 0.25s;
}
.dossier.open .dossier-head h3, .dossier-head:hover h3 { color: var(--gold-bright); }
.dossier-head .dossier-ar {
  margin: 0;
  font-family: var(--arabic);
  color: var(--gold);
  font-size: 20px;
}
.dossier-toggle {
  margin-left: auto;
  font-family: var(--serif);
  font-size: 26px;
  color: var(--gold);
  transition: transform 0.3s;
}
.dossier.open .dossier-toggle { transform: rotate(45deg); }
.dossier-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.6, 0.2, 1), padding 0.45s;
}
.dossier-inner { overflow: hidden; min-height: 0; }
.dossier.open .dossier-body { grid-template-rows: 1fr; padding-bottom: 34px; }
.dossier-fact {
  margin: 0 0 18px;
  max-width: 720px;
  color: var(--dim);
  font-size: 15px;
  line-height: 1.65;
}
.dossier-ancien {
  display: grid;
  grid-template-columns: minmax(260px, 0.44fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 52px);
  align-items: center;
  padding: 54px 0;
  border-top: 1px solid var(--line);
}
.dossier:first-child { border-top: 0; }
.dossier-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.dossier-images button {
  padding: 0; cursor: pointer;
  background: var(--stage-3);
  overflow: hidden;
  border-radius: 2px;
  border: 1px solid rgba(212, 162, 78, 0.14);
}
.dossier-images img {
  width: 100%; height: 100%; min-height: 235px;
  object-fit: cover; display: block;
  filter: grayscale(0.3) sepia(0.12) brightness(0.87);
  transition: filter 0.4s;
  animation: vivre-a 12s ease-in-out infinite alternate;
}
.dossier-images button:nth-child(even) img { animation-name: vivre-b; animation-duration: 15s; }
.dossier-images button:nth-child(3n) img { animation-name: vivre-c; animation-duration: 11s; }
.dossier-images button:hover img { filter: none; animation-play-state: paused; }
.dossier-images span { display: none; }

/* ---------- Chronique : billets de théâtre ---------- */
.era { margin-bottom: 48px; }
.era h3 {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 2.3vw, 28px);
  color: var(--gold-bright);
}
.era-note { margin: 0 0 18px; color: var(--faint); font-size: 13.5px; max-width: 760px; }
.tickets {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 6px 4px 18px;
  cursor: grab;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
.tickets.dragging { cursor: grabbing; }
.ticket {
  flex: 0 0 auto;
  min-width: 210px;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 14px 16px 12px;
  background:
    radial-gradient(circle at 0 50%, var(--stage) 7px, transparent 7.5px),
    radial-gradient(circle at 100% 50%, var(--stage) 7px, transparent 7.5px),
    linear-gradient(165deg, rgba(212, 162, 78, 0.09), rgba(212, 162, 78, 0.02));
  position: relative;
}
.ticket::before {
  content: "";
  position: absolute; left: 10px; right: 10px; bottom: 34px;
  border-top: 1px dashed rgba(212, 162, 78, 0.3);
}
.ticket:nth-child(odd) { transform: rotate(-0.8deg); }
.ticket:nth-child(3n) { transform: rotate(0.9deg); }
.ticket b { display: block; font-weight: 400; color: var(--cream); font-size: 14.5px; line-height: 1.3; }
.ticket .era-ar { font-family: var(--arabic); color: var(--gold); font-size: 17px; display: block; margin: 3px 0 14px; }
.ticket span {
  display: block;
  color: var(--faint);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-top: 8px;
}
/* Un billet qui possède des images s'ouvre comme une étoile. */
.ticket.has-img { cursor: pointer; transition: border-color 0.25s, transform 0.25s; }
.ticket.has-img:hover { border-color: var(--gold-bright); transform: translateY(-3px); }
.tk-count {
  position: absolute;
  top: 8px; right: 10px;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--gold-bright);
}

/* ---------- Les autres vies ---------- */
.vies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.vie {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 24px 22px 18px;
  background: linear-gradient(165deg, rgba(230, 57, 43, 0.07), transparent 55%);
}
.vie h3 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 21px;
  color: var(--gold-bright);
}
.vie-ar {
  font-style: normal;
  font-family: var(--arabic);
  color: var(--gold);
  font-size: 19px;
  margin-inline-start: 8px;
}
.vie p { margin: 0 0 16px; color: var(--dim); font-size: 14px; line-height: 1.6; }
.vie-ev { display: flex; gap: 8px; }
.vie-ev button {
  flex: 1;
  height: 110px;
  padding: 0; border: 1px solid rgba(230, 57, 43, 0.16); cursor: pointer;
  background: var(--stage-3);
  border-radius: 2px;
  overflow: hidden;
}
.vie-ev img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(0.35) sepia(0.12) brightness(0.85);
  transition: filter 0.35s, transform 0.45s;
}
.vie-ev button:hover img { filter: none; transform: scale(1.06); }

/* ---------- La constellation ---------- */
.constel-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  margin-bottom: 8px;
}
.constel-toggle button {
  background: none;
  border: 0;
  color: var(--dim);
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 10px 22px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.constel-toggle button.active { background: var(--gold); color: var(--stage); font-weight: 600; }
.constellation-wrap { position: relative; }
#constellation { width: 100%; height: auto; display: block; }
.c-orbit {
  fill: none;
  stroke: rgba(230, 57, 43, 0.18);
  stroke-dasharray: 3 7;
}
.c-line {
  stroke: rgba(230, 57, 43, 0.14);
  stroke-width: 1;
  transition: stroke 0.3s;
}
.c-line.on { stroke: var(--gold-bright); }
.c-node { cursor: pointer; }
.c-node circle {
  fill: var(--cream);
  transition: fill 0.3s, r 0.3s;
}
.c-node .c-halo {
  fill: rgba(230, 57, 43, 0.0);
  transition: fill 0.3s;
}
.c-node.on circle, .c-node:hover circle { fill: var(--gold-bright); }
.c-node.on .c-halo, .c-node:hover .c-halo { fill: rgba(230, 57, 43, 0.18); }
.c-node text {
  fill: var(--dim);
  font-family: var(--sans);
  font-size: 11.5px;
  text-anchor: middle;
  transition: fill 0.3s;
  pointer-events: none;
}
.c-node.on text, .c-node:hover text { fill: var(--cream); }
/* chaque étoile dérive et scintille à son rythme (durée/retard posés par JS) */
.c-node {
  animation-name: derive;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes derive {
  from { translate: 0 -4px; opacity: 0.75; }
  to { translate: 0 4px; opacity: 1; }
}
.c-center circle {
  fill: var(--gold);
}
.c-center .c-pulse {
  fill: none;
  stroke: var(--gold);
  animation: pulse 3.2s ease-out infinite;
}
@keyframes pulse {
  from { r: 26; stroke-opacity: 0.7; }
  to { r: 60; stroke-opacity: 0; }
}
.c-center text {
  fill: var(--stage);
  font-size: 22px;
  text-anchor: middle;
}
.c-center .c-name {
  fill: var(--gold-bright);
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
}
#node-card {
  position: absolute;
  z-index: 5;
  width: 270px;
  padding: 14px 16px;
  background: var(--stage-2);
  border: 1px solid var(--gold);
  border-radius: 3px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
#node-card b {
  display: block;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--gold-bright);
  margin-bottom: 6px;
}
#node-card p { margin: 0; color: var(--dim); font-size: 13px; line-height: 1.55; }
#node-card .nc-ar {
  font-family: var(--arabic);
  color: var(--gold);
  font-size: 16px;
  margin-bottom: 6px;
}
#node-card i {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.c-node { cursor: pointer; }
@media (max-width: 900px) {
  .c-node text { font-size: 15px; }
}

/* ---------- Générique ---------- */
.credits-section {
  text-align: center;
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(212, 162, 78, 0.07), transparent 70%);
}
.credits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(30px, 5vw, 60px);
  max-width: 1150px;
  margin: 0 auto;
  text-align: center;
}
.credit-group h3 {
  margin: 0 0 16px;
  color: var(--gold);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}
.credit-group ul { list-style: none; margin: 0; padding: 0; }
.credit-group li {
  font-family: var(--serif);
  font-size: 16.5px;
  color: var(--cream);
  opacity: 0.88;
  padding: 3.5px 0;
}
.credit-group li.star { color: var(--prize); font-style: italic; }

/* ---------- Coulisses : presse + archive ---------- */
.press-wall { columns: 5 190px; column-gap: 10px; margin-bottom: 54px; }
.press-scan {
  display: inline-block; width: 100%;
  margin: 0 0 10px;
  padding: 0; cursor: pointer;
  background: var(--stage-3);
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid rgba(212, 162, 78, 0.1);
}
.press-scan img {
  width: 100%; display: block;
  filter: sepia(0.3) grayscale(0.3) brightness(0.85);
  transition: filter 0.35s;
}
.press-scan:hover img { filter: none; }
.press-scan.wide { border-color: var(--gold); }
.press-scan span { display: none; }

/* ---------- La revue de presse (billets) ---------- */
.press-blog { margin-bottom: 54px; }
/* Puces de filtre : la presse d'une pièce en un clic. */
.press-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}
.chip {
  border: 1px solid var(--line);
  background: none;
  color: var(--dim);
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  padding: 7px 14px;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.chip:hover { color: var(--cream); border-color: var(--gold); }
.chip.on { background: var(--gold); color: var(--stage); border-color: var(--gold); }
.press-chips.journals { margin-top: -14px; }
.press-chips.journals .chip { font-size: 10.5px; padding: 5px 11px; }
.chips-label {
  align-self: center;
  color: var(--faint);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-right: 6px;
}
.pp-journal { color: var(--gold-bright); font-weight: 600; letter-spacing: 0.1em; }

.press-feed { display: grid; margin-bottom: 54px; }
.pp-decade {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 44px 0 10px;
}
.pp-decade span {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 3vw, 32px);
  color: var(--gold-bright);
  white-space: nowrap;
}
.pp-decade::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.press-post {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 160px;
  gap: clamp(16px, 3vw, 36px);
  align-items: center;
  padding: 26px 0;
  border-top: 1px dotted rgba(230, 57, 43, 0.3);
}
.press-post:first-child { border-top: 0; }
.pp-year {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 38px);
  color: var(--gold);
  line-height: 1;
}
.pp-ref {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.pp-ref i { font-style: normal; color: var(--gold-bright); }
.pp-text { margin: 0; color: var(--cream); opacity: 0.88; font-size: 15px; line-height: 1.6; max-width: 640px; }
.pp-scan {
  padding: 0; cursor: pointer;
  border: 1px solid rgba(230, 57, 43, 0.2);
  background: var(--stage-3);
  border-radius: 2px;
  overflow: hidden;
  height: 110px;
}
.pp-scan img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: sepia(0.3) grayscale(0.3) brightness(0.85);
  transition: filter 0.35s;
}
.pp-scan:hover img { filter: none; }
@media (max-width: 760px) {
  .press-post { grid-template-columns: 60px 1fr; }
  .pp-scan { grid-column: 1 / -1; height: 140px; }
}

.filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 220px;
  gap: 10px;
  margin-bottom: 20px;
  max-width: 700px;
}
.filters input, .filters select {
  min-height: 44px;
  border: 1px solid var(--line);
  background: var(--stage-2);
  color: var(--cream);
  padding: 8px 12px;
  border-radius: 2px;
}
.filters input::placeholder { color: var(--faint); }
.filters input:focus, .filters select:focus { outline: 1px solid var(--gold); }
.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.archive-tile {
  height: 150px;
  padding: 0; border: 0; cursor: pointer;
  background: var(--stage-3);
  overflow: hidden;
  border-radius: 2px;
  position: relative;
}
.archive-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(0.45) brightness(0.82);
  transition: filter 0.3s;
}
.archive-tile:hover img { filter: none; }
.archive-tile span {
  position: absolute; inset: auto 0 0;
  padding: 6px 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
  color: var(--cream);
  font-size: 10px;
  text-align: left;
  opacity: 0;
  transition: opacity 0.25s;
}
.archive-tile:hover span { opacity: 1; }

/* ---------- Rideau final ---------- */
footer {
  position: relative;
  padding: 110px clamp(18px, 5vw, 72px) 70px;
  text-align: center;
  overflow: hidden;
}
footer::before {
  content: "";
  position: absolute; inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--curtain), var(--gold) 50%, var(--curtain));
}
.f-quote {
  margin: 0 auto;
  max-width: 640px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 30px);
  color: var(--cream);
}
.f-ar {
  margin: 16px 0 0;
  font-family: var(--arabic);
  color: var(--gold-bright);
  font-size: 24px;
}
.f-sig {
  margin: 40px 0 0;
  color: var(--faint);
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* ---------- Lightbox ---------- */
/* La salle de projection occupe tout l'écran : l'image prend chaque pixel
   disponible, le noir autour est l'obscurité de la salle, pas du vide. */
dialog {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  border: 0;
  padding: 0;
  background: #050403;
  color: var(--cream);
}
dialog[open] { display: flex; flex-direction: column; }
dialog::backdrop { background: rgba(3, 2, 2, 0.92); }
#close {
  position: absolute; top: 10px; right: 10px;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: rgba(240, 198, 116, 0.92);
  color: var(--stage);
  font-size: 26px;
  cursor: pointer;
  z-index: 2;
}
#lightbox-img,
#lightbox-video {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  display: block;
}
/* l'attribut hidden doit gagner : sinon le clip précédent hante les diapos suivantes */
#lightbox-video[hidden] { display: none; }
/* une seule barre : légende à gauche, compteur à droite */
.lb-bar {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
}
#lightbox-caption {
  margin: 0;
  flex: 1;
  color: var(--dim);
  font-size: 13px;
}
#lightbox-counter {
  margin: 0;
  color: var(--faint);
  font-size: 11px;
  letter-spacing: 0.2em;
  white-space: nowrap;
}
.lb-nav {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px; height: 64px;
  border: 0;
  background: rgba(7, 6, 5, 0.55);
  color: var(--gold-bright);
  font-size: 34px;
  cursor: pointer;
  transition: background 0.25s;
}
.lb-nav:hover { background: rgba(212, 162, 78, 0.25); }
#lb-prev { left: 0; border-radius: 0 3px 3px 0; }
#lb-next { right: 0; border-radius: 3px 0 0 3px; }
/* l'allumage du projecteur */
@keyframes projector {
  0% { opacity: 0; filter: brightness(2.2) contrast(0.6); transform: scale(0.985); }
  18% { opacity: 1; filter: brightness(0.7); }
  34% { filter: brightness(1.4); }
  52% { filter: brightness(0.92); }
  100% { opacity: 1; filter: none; transform: none; }
}
@keyframes vivre-lb {
  from { transform: scale(1); }
  to { transform: scale(1.045) translate(0.6%, -0.5%); }
}
#lightbox[open] #lightbox-img {
  animation: projector 0.85s ease-out, vivre-lb 18s ease-in-out 0.9s infinite alternate;
}
#lightbox[open] #lightbox-video {
  animation: projector 0.85s ease-out;
}

/* les étoiles brillent vraiment : halo de scène derrière la constellation */
.constellation-wrap { background: radial-gradient(ellipse 60% 50% at 50% 45%, rgba(230, 57, 43, 0.055), transparent 70%); }
.c-node circle { filter: drop-shadow(0 0 7px rgba(255, 107, 74, 0.35)); }

/* ---------- Le journal vivant : des pages de presse dont la photo bouge ---------- */
.living-wall {
  columns: 3 300px;
  column-gap: 30px;
  max-width: 1180px;
  margin: 0 auto;
}
.living-page {
  break-inside: avoid;
  margin: 0 0 34px;
  padding: 16px 16px 18px;
  background: linear-gradient(175deg, #f2ead7, #e7dcc2);
  color: #191410;
  transform: rotate(-1deg);
  transition: transform 0.45s ease, box-shadow 0.45s ease;
  position: relative;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.living-page:nth-child(2n) { transform: rotate(1.2deg); }
.living-page:nth-child(3n) { transform: rotate(-0.4deg); }
.living-page:hover { transform: rotate(0deg) scale(1.02); z-index: 2; box-shadow: 0 26px 54px rgba(0, 0, 0, 0.55); }
/* la manchette : filets doubles de une, rubrique et date en petites capitales */
.living-page .lp-mast {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 6px;
  border-bottom: 3px double #191410;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.living-page .lp-head {
  margin: 10px 0 12px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.15;
  color: #14100c;
}
.living-page button {
  display: block;
  width: 100%;
  padding: 0;
  cursor: zoom-in;
  border: 1px solid rgba(25, 20, 16, 0.55);
  background: #14100c;
}
.living-page video,
.living-page img { width: 100%; display: block; }
/* le point rouge d'antenne : cette page est en direct */
.living-page::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold-bright);
  animation: live-dot 2.6s ease-in-out infinite;
}
@keyframes live-dot {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}
.living-page .lp-lede {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(25, 20, 16, 0.78);
}

/* au survol d'une page du journal, les filets s'embrasent */
.living-page .lp-mast,
.living-page .lp-head,
.living-page button { transition: border-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease; }
.living-page:hover .lp-mast {
  border-bottom-color: var(--gold);
  box-shadow: 0 12px 18px -14px rgba(230, 57, 43, 0.7);
}
.living-page:hover .lp-head { color: #8f1d12; }
.living-page:hover button {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(230, 57, 43, 0.35), 0 0 24px rgba(230, 57, 43, 0.28);
}

/* ---------- Le projecteur de poursuite : au survol, la lumière le trouve ---------- */
.has-spot { position: relative; }
.spot-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
}
.has-spot:hover .spot-layer,
.has-spot:focus-visible .spot-layer { opacity: 1; }
.spot-ring {
  position: absolute;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(255, 107, 74, 0.85);
  border-radius: 50%;
  box-shadow: 0 0 26px rgba(230, 57, 43, 0.35), inset 0 0 26px rgba(230, 57, 43, 0.18);
}
.spot-name {
  position: absolute;
  transform: translate(-50%, 8px);
  padding: 4px 10px;
  background: rgba(11, 9, 8, 0.85);
  border: 1px solid rgba(230, 57, 43, 0.5);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .topnav { position: absolute; display: grid; gap: 8px; }
  .topnav div { justify-content: start; }
  .chapter-scroll { height: 130svh; }
  .chapter-stage { grid-template-columns: 1fr; padding-top: 120px; }
  .chapter:nth-of-type(even) .chapter-visual, .chapter:nth-of-type(odd) .chapter-visual { order: 2; height: 46vh; }
  .chapter:nth-of-type(even) .chapter-inner, .chapter:nth-of-type(odd) .chapter-stage .chapter-inner { order: 1; }
  .act-num { position: static; margin-bottom: -18px; display: block; }
  .dossier-head { flex-wrap: wrap; }
  .dossier-images { grid-template-columns: repeat(2, 1fr); }
  .dossier-images img { min-height: 160px; }
  .filters { grid-template-columns: 1fr; }
}
/* ---------- Direction artistique : moins d'effets, mieux placés ---------- */
/* arêtes franches — les tirages sont des objets imprimés, pas des cartes d'app */
.strip button, .dossier-images button, .vie-ev button, .archive-tile,
.pp-scan, .press-scan, .vie, .filters input, .filters select { border-radius: 0; }
/* l'inclinaison devient l'exception, pas la règle */
.strip figure:nth-child(3n), .strip figure:nth-child(3n+1) { transform: none; }
.strip figure:nth-child(5n) { transform: rotate(-1.2deg); }
.ticket:nth-child(odd), .ticket:nth-child(3n) { transform: none; }
.ticket:nth-child(7n) { transform: rotate(-0.9deg); }
/* le survol éclaire, il ne fait plus flotter */
.strip button:hover { box-shadow: 0 0 0 1px var(--gold); }
/* les légendes attendent le regard : visibles au survol seulement */
.strip figure.lit figcaption { opacity: 0; transform: translateY(6px); }
.strip figure.lit:hover figcaption,
.strip figure.lit:focus-within figcaption { opacity: 1; transform: none; }

/* ---------- Portes et « voir plus » ---------- */
.more-btn, .door-btn {
  display: block;
  margin: 30px 0 0;
  padding: 13px 30px;
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.more-btn:hover, .door-btn:hover { background: var(--gold); color: var(--stage); }
.door-btn { margin-top: 44px; }
#research-room { margin-top: 30px; }

@media (prefers-reduced-motion: reduce) {
  .hero-bg, body::after, .marquee-track,
  .strip figure.lit img, .dossier-images img, #lightbox[open] #lightbox-img { animation: none; }
  .reveal { transition: none; opacity: 1; transform: none; }
}

/* Le résultat du double filtre presse, en toutes lettres. */
.press-count {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--gold-bright);
}

/* Croisement vide : la puce s'éteint sans disparaître. */
.chip.off { opacity: 0.3; cursor: default; }
.chip.off:hover { color: var(--dim); border-color: var(--line); }

/* ---------- Mobile : la même pièce, jouée sur petite scène ---------- */
@media (max-width: 760px) {
  /* la calligraphie verticale cède la place au contenu */
  .ar-vertical { display: none; }
  /* la photo d'acte garde sa présence sans manger l'écran */
  .chapter-stage { padding-left: 16px; padding-right: 16px; }
  .chapter-visual { height: 38vh; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
  .act-num { font-size: 56px; }
  /* la constellation se parcourt au doigt, sans s'écraser */
  .constellation-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #constellation { min-width: 1050px; }
  .press-chips { gap: 6px; }
  .chip { font-size: 10.5px; padding: 6px 10px; }
}

.f-copy {
  margin: 14px 0 0;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.6;
  max-width: 560px;
  margin-inline: auto;
}

/* ---------- Protection des images (copyright) ---------- */
img {
  -webkit-user-drag: none;
  user-select: none;
}
/* filigrane de propriété sur la salle de projection */
#lightbox::after {
  content: "© Mongi Ouerfelli";
  position: absolute;
  right: 60px;
  top: 22px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(239, 231, 211, 0.55);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

/* ============================================================
   ÉDITION 2026 — la sophistication par soustraction.
   Couche finale : l'air, les filets, l'échelle typographique.
   Rien ne penche, rien n'est scotché — la mémoire vient du
   geste juste, pas de l'accumulation.
   ============================================================ */

/* Respiration : chaque section est une double page */
main > section.paper { padding-block: clamp(120px, 17vh, 220px); }
.section-head { margin-bottom: clamp(56px, 9vh, 104px); }
.section-head h2 {
  font-size: clamp(40px, 5.8vw, 80px);
  font-weight: 370;
  letter-spacing: -0.022em;
  line-height: 0.98;
}
.section-head p:last-child { font-size: 17.5px; line-height: 1.75; }
.section-head .kicker { letter-spacing: 0.4em; font-size: 10px; }

/* Rien ne penche : l'alignement est la nouvelle élégance */
.strip figure:nth-child(3n), .strip figure:nth-child(3n+1), .strip figure:nth-child(5n),
.ticket:nth-child(odd), .ticket:nth-child(3n), .ticket:nth-child(7n),
.living-page, .living-page:nth-child(2n), .living-page:nth-child(3n) { transform: none; }
.strip figure::before { display: none; } /* le ruban adhésif prend sa retraite */
.strip {
  border-image: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 22px;
}
.strip figure:hover { transform: translateY(-3px); }
.living-page:hover { transform: translateY(-4px); }
.living-page { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); }

/* Billets de la chronique : du carton perforé au filet d'encre */
.ticket, .paper-bone .ticket {
  border: 0;
  border-left: 1px solid rgba(25, 20, 16, 0.35);
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 4px 26px 10px 18px;
  min-width: 235px;
}
.ticket::before { display: none; }
.paper-bone .ticket.has-img:hover { transform: translateY(-2px); border-left-color: #8f1d12; }

/* Les autres vies : colonnes d'encre, sans boîtes */
.vie, .paper-bone .vie {
  border: 0;
  border-top: 1px solid rgba(25, 20, 16, 0.4);
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 26px 0 0;
}
.vies-grid { gap: clamp(28px, 4vw, 64px); }

/* La bande des chiffres : un fait typographique, pas une bannière */
.stats-band { padding: 30px clamp(10px, 2vw, 32px); background: var(--stage); }
.stats-band strong { font-size: clamp(26px, 3vw, 46px); font-weight: 380; }

/* Le mouvement : une seule respiration, lente */
.marquee-track { animation-duration: 70s; }

/* ---- Achèvement du système : les surfaces restantes rejoignent l'édition ---- */

/* Héros : l'autocollant du bandeau devient de la typographie */
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  background: none;
  padding: 0;
  transform: none;
  color: var(--gold-bright);
  font-size: 10.5px;
  letter-spacing: 0.4em;
}
.hero-eyebrow::before { content: ""; width: 46px; height: 1px; background: currentColor; flex: none; }
h1 { font-weight: 420; }
.hero-line { width: 64px; height: 1px; background: var(--gold); }

/* Actes : l'échelle typographique s'aligne */
.chapter h2 { font-weight: 420; letter-spacing: -0.02em; }
.act-num { -webkit-text-stroke-color: rgba(230, 57, 43, 0.35); }
.pull { border-left-width: 1px; padding-left: 22px; }
.chapter:nth-of-type(even) .pull { border-right-width: 1px; padding-right: 22px; }

/* Chiffres : des faits typographiques */
.number strong { font-weight: 380; }

/* Constellation : la carte d'étoile en verre d'encre */
#node-card {
  border: 1px solid rgba(230, 57, 43, 0.4);
  border-radius: 0;
  background: rgba(11, 9, 8, 0.9);
  backdrop-filter: blur(8px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* Presse : pastilles capsules, filets, murs plus aérés */
.press-wall { column-gap: 14px; margin-bottom: 72px; }
.press-scan { border: 1px solid var(--line); }
.chip {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--dim);
  letter-spacing: 0.08em;
}
.chip:hover { border-color: var(--gold-bright); color: var(--cream); }
.chip.on { background: var(--gold); border-color: var(--gold); color: var(--stage); }

/* Salle de recherche : champs et portes en filet */
.filters input, .filters select {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--cream);
  padding: 12px 14px;
}
.door-btn, .more-btn, #press-all {
  background: transparent;
  border: 1px solid rgba(230, 57, 43, 0.5);
  border-radius: 999px;
  color: var(--gold-bright);
  padding: 13px 30px;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.door-btn:hover, .more-btn:hover, #press-all:hover { background: var(--gold); color: var(--stage); }

/* Générique : un colophon typographié */
.credits { gap: clamp(34px, 5vw, 72px); }
.credit-group li { font-size: 15px; opacity: 0.82; padding: 3px 0; }

/* Rideau final : le pied de page respire */
footer { padding-block: clamp(90px, 14vh, 160px); border-top: 1px solid var(--line); }
.f-quote { font-size: clamp(21px, 2.6vw, 32px); font-weight: 380; }