/* ============================================================
   OUROBOROS — page projet longue (générique + coulisses du film)
   Charge APRÈS style.css : hérite des tokens, du subnav, de la carte
   cover (.proj-header) et du .reveal. Même vocabulaire que les autres
   pages projet : Space Grotesk, capitales serrées, rouge #d20000, et le
   papier crème du ticket pour les chapitres « documents ».
   ============================================================ */

/* Grenze Gotisch : chargée avec Space Grotesk par le <link> de ouroboros.html */

:root {
  --pc-gothic: 'Grenze Gotisch', 'Space Grotesk', serif;
  --pc-ink:   #151311;
  --pc-paper: #f0ede6;
  --pc-red:   #d20000;
  --pc-max:   1760px;
  --pc-pad:   clamp(1.25rem, 3vw, 3rem);
}

body.ouro-page {
  background: #0d0d0d;
  color: #fff;
  overflow-x: hidden;
}
.pc-wrap { max-width: var(--pc-max); margin: 0 auto; padding: 0 var(--pc-pad); }

/* Étiquettes miniatures — même vocabulaire que .proj-eyebrow */
.pc-eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.pc-eyebrow b { color: var(--pc-red); font-weight: 600; }

/* Titres : la lettre gothique de l'affiche */
.pc-title {
  font-family: var(--pc-gothic);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.005em;
}

/* ------------------------------------------------------------
   HERO — horizontal : une image du plateau en fond, le titre dessus
   ------------------------------------------------------------ */
.pc-hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8rem 0 4rem;
  overflow: hidden;
  background: #0d0d0d;
}
.pc-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.pc-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  opacity: 0.85;
}
/* voile : lisible en bas à gauche, l'image respire à droite */
.pc-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(13,13,13,1) 0%, rgba(13,13,13,0.8) 28%, rgba(13,13,13,0.25) 62%, rgba(13,13,13,0.45) 100%),
    linear-gradient(to right, rgba(13,13,13,0.7) 0%, rgba(13,13,13,0.25) 55%, rgba(13,13,13,0.1) 100%);
}
.pc-hero-inner { position: relative; z-index: 1; width: 100%; }
.pc-hero-title {
  font-size: clamp(4.6rem, 12vw, 11.5rem);
  margin: 1rem 0 1.2rem;
  color: #fff;
}
.pc-hero-sub {
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  font-weight: 300;
  line-height: 1.45;
  color: rgba(255,255,255,0.7);
  max-width: 36ch;
}
.pc-hero-sub strong { color: #fff; font-weight: 500; }
.pc-hero .pc-facts { max-width: 720px; }
.pc-scroll-cue {
  position: absolute;
  right: var(--pc-pad);
  bottom: 2.2rem;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.pc-scroll-cue::after {
  content: '';
  width: 48px; height: 1px;
  background: rgba(255,255,255,0.35);
  transform-origin: left;
  animation: pc-cue 2.2s ease-in-out infinite;
}
@keyframes pc-cue { 0%,100% { transform: scaleX(0.3); } 50% { transform: scaleX(1); } }

/* ------------------------------------------------------------
   INTRO — sous la carte : faits + affiche + note
   ------------------------------------------------------------ */
.pc-intro {
  padding: clamp(3rem, 8vh, 6rem) 0 clamp(4rem, 10vh, 8rem);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.pc-intro-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.pc-intro-text p {
  font-size: clamp(1.4rem, 2.8vw, 2.4rem);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: 26ch;
  color: rgba(255,255,255,0.9);
  margin-top: 1.4rem;
}
.pc-intro-text p strong { font-weight: 600; }
.pc-intro-text p.pc-intro-note {
  margin-top: 1.6rem;
  max-width: 52ch;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0;
  color: rgba(255,255,255,0.6);
}
/* Encart « en festival » : doit se voir au premier coup d'œil (où est le film ?) */
.pc-intro-text p.pc-intro-festival {
  margin-top: 2rem;
  max-width: 46ch;
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--pc-red);
  background: rgba(210,0,0,0.1);
  border-radius: 0 6px 6px 0;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  color: rgba(255,255,255,0.78);
}
.pc-intro-text p.pc-intro-festival strong { color: #fff; font-weight: 600; }
.pc-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.2rem;
  margin-top: 2.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.pc-fact { display: flex; flex-direction: column; gap: 0.25rem; }
.pc-fact-k {
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
}
.pc-fact-v { font-size: 0.85rem; font-weight: 500; letter-spacing: 0.02em; }

.pc-affiche {
  margin: 0;
  width: clamp(260px, 30vw, 480px);
  cursor: zoom-in;
}
.pc-affiche img {
  width: 100%; height: auto; display: block;
  border-radius: 4px;
  box-shadow: 0 24px 50px rgba(0,0,0,0.55);
  transition: transform 0.6s var(--reveal);
}
.pc-affiche:hover img { transform: translateY(-4px); }

/* ------------------------------------------------------------
   CHAPITRES — bloc de titre commun
   ------------------------------------------------------------ */
.pc-section { padding: clamp(4.5rem, 11vh, 9rem) 0; }
.pc-section.is-paper {
  background: var(--pc-paper);
  color: var(--pc-ink);
}
.pc-section.is-paper .pc-eyebrow { color: rgba(21,19,17,0.65); }

.pc-chap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 clamp(1.2rem, 3vw, 2.5rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
.pc-chap-num {
  font-weight: 300;
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--pc-red);
  padding-bottom: 0.06em;
}
.pc-chap-title { font-size: clamp(2.6rem, 6.4vw, 6.4rem); white-space: nowrap; }
/* Le chapeau reste collé sous le titre, dans sa colonne */
.pc-chap-lead {
  grid-column: 2;
  margin-top: 1.2rem;
  max-width: 58ch;
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.62);
}
.is-paper .pc-chap-lead { color: rgba(21,19,17,0.62); }

/* Sous-titres (Storyboard, Plans de sol…) */
.pc-sub {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  margin: clamp(3rem, 7vh, 5rem) 0 1.4rem;
}
.pc-sub:first-of-type { margin-top: 0; }
.pc-sub h3 {
  font-family: var(--pc-gothic);
  font-weight: 500;
  font-size: 2.2rem;
  line-height: 1;
}
.pc-sub span {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.is-paper .pc-sub span { color: rgba(21,19,17,0.65); }

/* Bouton pilule */
.pc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.2rem;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.pc-btn:hover { background: #fff; color: #0d0d0d; border-color: #fff; }
.pc-btn small { font-weight: 400; letter-spacing: 0.1em; opacity: 0.5; }
.is-paper .pc-btn { border-color: rgba(21,19,17,0.3); color: var(--pc-ink); }
.is-paper .pc-btn:hover { background: var(--pc-ink); color: var(--pc-paper); border-color: var(--pc-ink); }

/* ------------------------------------------------------------
   I — L'IDÉE : synopsis + intention, sur papier
   ------------------------------------------------------------ */
.pc-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 8vw, 10rem);
}
.pc-col p { max-width: 64ch; }
.pc-col h3 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--pc-red);
  margin-bottom: 1.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(210,0,0,0.25);
}
.pc-col p {
  font-size: 0.95rem;
  line-height: 1.85;
  color: rgba(21,19,17,0.78);
  margin-bottom: 1rem;
}
.pc-col p strong { color: var(--pc-ink); font-weight: 600; }
.pc-col p.pc-big {
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 300;
  color: var(--pc-ink);
}

.pc-quote {
  margin: clamp(3rem, 8vh, 6rem) auto 0;
  text-align: center;
  max-width: 60ch;
}
.pc-quote p {
  font-family: var(--pc-gothic);
  font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  line-height: 1.15;
  text-wrap: balance;
}
.pc-quote p em { font-style: normal; font-weight: 700; color: var(--pc-red); }
.pc-quote small {
  display: block;
  margin-top: 1.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--pc-red);
  font-weight: 700;
}

/* ------------------------------------------------------------
   II — MISE EN SCÈNE : trois principes + démonstration du format
   ------------------------------------------------------------ */
.pc-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.pc-principle {
  padding: 1.8rem 1.6rem 2rem;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
}
.pc-principle-k {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--pc-red);
  font-weight: 700;
  margin-bottom: 1rem;
}
.pc-principle h3 {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 0.9rem;
}
.pc-principle p {
  font-size: 0.85rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.62);
}
.pc-principle p strong { color: rgba(255,255,255,0.85); font-weight: 500; }

/* Comparaison 2.35 / 2.00 : même hauteur, largeur = ratio. Les « troncs »
   sont espacés en pixels, donc le cadre le plus large en montre plus. */
.pc-ratio {
  margin-top: clamp(3rem, 7vh, 5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 2rem clamp(1.5rem, 4vw, 3rem);
  align-items: flex-start;
}
.pc-ratio-text {
  flex: 0 0 100%;                 /* occupe toute la ligne : les cadres passent dessous */
  max-width: 100%;
  padding-right: max(0px, calc(100% - 62ch));   /* … mais le texte reste lisible */
  font-size: 0.9rem;
  line-height: 1.85;
  color: rgba(255,255,255,0.62);
  margin-bottom: 0.5rem;
}
.pc-ratio-text strong { color: #fff; font-weight: 500; }
.pc-frame { margin: 0; flex: 0 1 auto; max-width: 100%; }
.pc-frame-box {
  position: relative;
  height: clamp(150px, 17vw, 230px);
  aspect-ratio: var(--r) / 1;
  max-width: 100%;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, transparent 0 26px, rgba(255,255,255,0.14) 26px 28px, transparent 28px 47px, rgba(255,255,255,0.09) 47px 48.5px),
    linear-gradient(180deg, #141414, #0b0b0b);
  overflow: hidden;
}
/* Le personnage : une tête ronde sur un ovale étiré coupé en deux */
.pc-frame-box::before,
.pc-frame-box::after {
  content: '';
  position: absolute;
  left: 50%;
  background: rgba(255,255,255,0.9);
}
.pc-frame-box::before {            /* tête */
  width: 12px; height: 12px;
  margin-left: -6px;
  bottom: calc(14% + 38px);
  border-radius: 50%;
}
.pc-frame-box::after {             /* corps */
  width: 20px; height: 34px;
  margin-left: -10px;
  bottom: 14%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.pc-frame.is-chosen .pc-frame-box { border-color: var(--pc-red); box-shadow: 0 0 0 1px rgba(210,0,0,0.35); }
.pc-frame figcaption {
  margin-top: 0.9rem;
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.62);
}
.pc-frame figcaption b { font-family: var(--pc-gothic); font-weight: 500; font-size: 1.5rem; color: #fff; white-space: nowrap; }
.pc-frame.is-chosen figcaption b { color: var(--pc-red); }

.pc-stats {
  margin-top: clamp(3rem, 7vh, 5rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.pc-stat { padding: 1.6rem 1.2rem 1.6rem 0; border-right: 1px solid rgba(255,255,255,0.1); }
.pc-stat:last-child { border-right: none; }
.pc-stat + .pc-stat { padding-left: 1.4rem; }
.pc-stat-v {
  display: block;
  font-family: var(--pc-gothic);
  font-weight: 500;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.pc-stat-k {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
}

/* ------------------------------------------------------------
   III — L'IMAGE : moodboards (PNG transparents → WebP alpha)
   Aucun fond ni coin arrondi : les vignettes flottent sur le noir.
   ------------------------------------------------------------ */
.pc-mood {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 1.5rem clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.pc-mood-item { margin: 0; cursor: zoom-in; position: relative; }
.pc-mood-item img { width: 100%; height: auto; display: block; }
.pc-mood-item figcaption {
  margin-top: 0.7rem;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

.pc-refs {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
}
.pc-refs span {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  color: rgba(255,255,255,0.7);
}
.pc-refs span em { font-style: normal; color: rgba(255,255,255,0.55); }

.pc-image-cols {
  margin-top: clamp(3rem, 7vh, 5rem);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.pc-image-col h3 {
  font-family: var(--pc-gothic);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 1rem;
}
.pc-image-col p {
  font-size: 0.85rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.62);
  margin-bottom: 0.8rem;
}
.pc-image-col p strong { color: rgba(255,255,255,0.85); font-weight: 500; }

.pc-palette {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.4rem;
  margin: 1.4rem 0 0.8rem;
}
.pc-swatch { aspect-ratio: 1 / 1.3; border-radius: 6px; border: 1px solid rgba(255,255,255,0.08); }
.pc-palette-legend {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* ------------------------------------------------------------
   IV — DIRECTION ARTISTIQUE : pages du dossier, sur papier
   ------------------------------------------------------------ */
.pc-da-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.pc-da-item { margin: 0; cursor: zoom-in; }
.pc-da-item img {
  width: 100%; height: auto; display: block;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(21,19,17,0.18), 0 2px 6px rgba(21,19,17,0.1);
  transition: transform 0.6s var(--reveal);
}
.pc-da-item:hover img { transform: translateY(-4px); }
.pc-da-item figcaption {
  margin-top: 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(21,19,17,0.65);
}
.pc-da-item figcaption b { color: var(--pc-ink); font-weight: 700; }

.pc-da-statement {
  margin-top: clamp(3rem, 7vh, 5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 8vw, 10rem);
  align-items: start;
}
.pc-da-statement p + p { max-width: 64ch; }
.pc-da-statement p { font-size: 1.15rem; line-height: 1.55; font-weight: 300; color: var(--pc-ink); }
.pc-da-statement p + p { font-size: 0.9rem; line-height: 1.85; color: rgba(21,19,17,0.65); }

/* ------------------------------------------------------------
   V — DÉCOUPAGE : storyboard en bande, plans de sol, DT
   ------------------------------------------------------------ */

/* La bande file jusqu'aux bords de l'écran comme une pellicule. La molette
   la fait défiler quand la souris est dessus (voir script de la page). */
.pc-strip {
  --strip-pad: max(var(--pc-pad), calc(50vw - var(--pc-max) / 2 + var(--pc-pad)));
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin: 0 calc(50% - 50vw);
  padding: 0 var(--strip-pad);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pc-strip::-webkit-scrollbar { display: none; }
.pc-strip-item {
  flex: 0 0 auto;
  width: min(78vw, 640px);
  margin: 0;
  cursor: zoom-in;
}
.pc-strip-item img { width: 100%; height: auto; display: block; border-radius: 8px; background: #1a1a1a; }

/* Mosaïque calée sur les ratios réels (--r sur chaque figure) : le portrait
   de la séquence 3 prend deux rangs à droite, les deux autres s'empilent à
   gauche. Les cartes s'étirent pour fermer les rangs ; le plan reste centré
   sur fond blanc (object-fit: contain), donc l'étirement est invisible. */
.pc-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  align-items: stretch;
}
.pc-plan {
  margin: 0;
  background: #fff;
  color: var(--pc-ink);
  border-radius: 10px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.pc-plan.is-tall { grid-column: 2; grid-row: span 2; }
.pc-plan-img {
  position: relative;
  flex: 1 0 auto;
  aspect-ratio: var(--r, 4 / 3);
  cursor: zoom-in;
}
.pc-plan-img img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.pc-plan figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(21,19,17,0.65);
}
.pc-plan figcaption b { color: var(--pc-ink); font-weight: 700; }

/* --- Découpage technique : aperçu de quelques plans + version complète --- */
.pc-dt-intro {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
  margin-bottom: 1.6rem;
}
.pc-dt-intro p {
  max-width: 62ch;
  font-size: 0.88rem;
  line-height: 1.85;
  color: rgba(255,255,255,0.62);
}
.pc-dt-intro p strong { color: #fff; font-weight: 500; }

.pc-dt { display: grid; gap: 0.8rem; }
.pc-shot {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.4rem 1.6rem;
  padding: 1.3rem 1.5rem;
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 2px solid var(--pc-red);
  border-radius: 0 12px 12px 0;
  background: rgba(255,255,255,0.025);
}
.pc-shot-num {
  grid-row: 1 / 3;
  font-family: var(--pc-gothic);
  font-weight: 500;
  font-size: 1.9rem;
  line-height: 1;
  padding-top: 0.1rem;
}
.pc-shot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.pc-shot-meta b { color: #fff; font-weight: 600; }
.pc-shot-meta i { font-style: normal; color: var(--pc-red); }
.pc-shot-text { grid-column: 2; font-size: 0.92rem; line-height: 1.6; color: rgba(255,255,255,0.85); white-space: pre-line; }
.pc-shot-dir { grid-column: 2; font-size: 0.8rem; line-height: 1.6; color: rgba(255,255,255,0.55); white-space: pre-line; margin-top: 0.3rem; }
.pc-shot-num { grid-row: 1 / span 3; }
.pc-dt-more {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.6rem;
}
.pc-dt-more span { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.55); }

/* Version complète : plein écran, tableau défilant */
.pc-dt-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: #0d0d0d;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.pc-dt-overlay.is-open { opacity: 1; pointer-events: auto; }
.pc-dt-overlay-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 1.2rem var(--pc-pad);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex: 0 0 auto;
}
.pc-dt-overlay-head h3 { font-family: var(--pc-gothic); font-weight: 500; font-size: 1.6rem; line-height: 1; }
.pc-dt-overlay-head h3 small { display: block; margin-top: 0.3rem; font-size: 0.7rem; letter-spacing: 0.24em; color: rgba(255,255,255,0.55); font-weight: 600; }
.pc-dt-overlay-body { flex: 1 1 auto; overflow: auto; padding: 0 var(--pc-pad) 3rem; }

.pc-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  font-size: 0.74rem;
  line-height: 1.5;
}
.pc-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #0d0d0d;
  text-align: left;
  padding: 1rem 0.7rem 0.8rem;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  white-space: nowrap;
}
.pc-table td {
  padding: 0.8rem 0.7rem;
  vertical-align: top;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.72);
  white-space: pre-line;
}
.pc-table td:first-child { font-weight: 700; color: #fff; white-space: nowrap; }
.pc-table td.is-dim { color: rgba(255,255,255,0.55); }
.pc-table tr.is-seq td {
  padding: 1.6rem 0.7rem 0.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pc-red);
  font-weight: 700;
}
.pc-table td.is-num { white-space: nowrap; }

/* ------------------------------------------------------------
   VI — L'ÉQUIPE : page du dossier + générique typographique
   ------------------------------------------------------------ */
.pc-team {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.pc-team-img { margin: 0; cursor: zoom-in; }
.pc-team-img img {
  width: 100%; height: auto; display: block;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(21,19,17,0.18), 0 2px 6px rgba(21,19,17,0.1);
}
.pc-credits-title {
  font-family: var(--pc-gothic);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 1.2rem;
}
.pc-credits + .pc-credits-title { margin-top: 2.6rem; }
.pc-credit {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(21,19,17,0.12);
  font-size: 0.85rem;
  line-height: 1.5;
}
.pc-credit:first-child { border-top: 1px solid rgba(21,19,17,0.12); }
.pc-credit dt {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(21,19,17,0.65);
  font-weight: 600;
  padding-top: 0.25rem;
}
.pc-credit dd { color: var(--pc-ink); }

/* ------------------------------------------------------------
   VII — LE TOURNAGE : carte making-of
   ------------------------------------------------------------ */
.pc-film {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}
.pc-film-loop {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--reveal), opacity 0.6s ease;
}
.pc-film:hover .pc-film-loop { transform: scale(1.05); }
.pc-film-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 45%, transparent 70%);
  transition: opacity 0.5s ease;
}
.pc-film-title { font-size: clamp(2.4rem, 6vw, 5.5rem); margin: 0.5rem 0 1.4rem; }
.pc-film-play {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  align-self: flex-start;
  padding: 0.9rem 1.4rem 0.9rem 1rem;
  border-radius: 999px;
  background: #fff;
  color: #0d0d0d;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: transform 0.3s var(--reveal);
}
.pc-film-play svg { width: 14px; height: 14px; }
.pc-film:hover .pc-film-play { transform: translateX(4px); }
.pc-film.is-playing { cursor: default; }
.pc-film.is-playing .pc-film-overlay,
.pc-film.is-playing .pc-film-loop { opacity: 0; pointer-events: none; }
.pc-film-player { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; border: 0; }

/* ------------------------------------------------------------
   VIII — LE GÉNÉRIQUE : images fixes + renvoi vers la carte cover
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   DOCUMENTS — chaque ligne se déplie sur place (details/summary)
   ------------------------------------------------------------ */
.pc-docs { display: grid; grid-template-columns: 1fr; border-top: 1px solid rgba(255,255,255,0.1); }
.pc-doc { border-bottom: 1px solid rgba(255,255,255,0.1); }
.pc-doc-head {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
  transition: padding-left 0.35s var(--reveal);
}
.pc-doc-head::-webkit-details-marker { display: none; }
.pc-doc-head:hover { padding-left: 0.6rem; }
.pc-doc-num { font-family: var(--pc-gothic); font-weight: 500; font-size: 1.5rem; color: rgba(255,255,255,0.3); }
.pc-doc-name { font-size: 1rem; font-weight: 500; }
.pc-doc-name small { display: block; margin-top: 0.2rem; font-size: 0.72rem; font-weight: 400; color: rgba(255,255,255,0.55); }
.pc-doc-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  transition: color 0.3s ease;
}
.pc-doc-meta::before { content: 'Déplier'; }
.pc-doc[open] .pc-doc-meta::before { content: 'Replier'; }
/* la croix : un + qui tourne en × */
.pc-doc-meta::after {
  content: '';
  width: 26px; height: 26px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 10px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 10px no-repeat;
  transition: transform 0.4s var(--reveal), border-color 0.3s ease;
}
.pc-doc-head:hover .pc-doc-meta { color: #fff; }
.pc-doc-head:hover .pc-doc-meta::after { border-color: #fff; }
.pc-doc[open] .pc-doc-meta::after { transform: rotate(45deg); }

.pc-doc-body { padding: 0.5rem 0 clamp(2.5rem, 5vw, 4rem) 4.5rem; }
.pc-doc[open] .pc-doc-body { animation: pc-unfold 0.55s var(--reveal) both; }
@keyframes pc-unfold { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* textes : synopsis, notes */
.pc-doc-text { max-width: 70ch; }
.pc-doc-text p {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255,255,255,0.72);
  margin-bottom: 1.1em;
}
.pc-doc-text p:last-child { margin-bottom: 0; }
.pc-doc-text p.is-em { font-style: italic; color: rgba(255,255,255,0.9); }
.pc-doc-text strong { font-weight: 500; color: #fff; }
.pc-doc-text h4 {
  font-family: var(--pc-gothic);
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1;
  margin: 2rem 0 0.9rem;
}
.pc-doc-text h4:first-child { margin-top: 0; }

/* ------------------------------------------------------------
   LIGHTBOX — clic sur une image = plein écran
   ------------------------------------------------------------ */
.pc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(8,8,8,0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  cursor: zoom-out;
}
.pc-lightbox.is-open { opacity: 1; pointer-events: auto; }
.pc-lightbox img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 6px;
  transform: scale(0.96);
  transition: transform 0.4s var(--reveal);
}
.pc-lightbox.is-open img { transform: scale(1); }
.pc-close {
  position: absolute;
  top: 1.4rem; right: 1.6rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  background: rgba(13,13,13,0.6);
}
.pc-dt-overlay .pc-close { position: static; flex: 0 0 auto; }
.pc-lightbox-cap {
  position: absolute;
  left: 50%; bottom: 1.4rem;
  transform: translateX(-50%);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}
body.pc-lock { overflow: hidden; }

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1180px) {
  .pc-chap-title { white-space: normal; }
}
@media (max-width: 980px) {
  .pc-principles { grid-template-columns: 1fr; }
  .pc-image-cols { grid-template-columns: 1fr; }
  .pc-stats { grid-template-columns: 1fr 1fr; }
  .pc-stat:nth-child(2) { border-right: none; }
  .pc-stat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.1); }
  .pc-stat:nth-child(3) { padding-left: 0; }
  .pc-team { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .pc-hero { min-height: 78svh; padding-top: 6rem; }
  .pc-hero-bg img { object-position: 60% 40%; }
  .pc-scroll-cue { display: none; }
  .pc-intro-grid { grid-template-columns: 1fr; }
  .pc-affiche { width: min(100%, 320px); justify-self: center; }
  .pc-chap { grid-template-columns: 1fr; gap: 0.6rem 0; }
  .pc-chap-lead { grid-column: 1; }
  .pc-cols { grid-template-columns: 1fr; }
  .pc-ratio { grid-template-columns: 1fr; }
  .pc-mood { grid-template-columns: 1fr; }
  .pc-da-grid { grid-template-columns: 1fr; }
  .pc-da-statement { grid-template-columns: 1fr; }
  .pc-plans { grid-template-columns: 1fr; }
  .pc-plan.is-tall { grid-column: auto; grid-row: auto; }
  .pc-dt-intro { grid-template-columns: 1fr; align-items: start; }
  .pc-shot { grid-template-columns: 1fr; }
  .pc-shot-num { grid-row: auto; }
  .pc-credit { grid-template-columns: 1fr; gap: 0.2rem; }
  .pc-doc-head { grid-template-columns: 2.4rem 1fr auto; gap: 1rem; }
  .pc-doc-meta::before { content: none; }
  .pc-doc-body { padding-left: 0; }
  .pc-lightbox { padding: 1rem; }
  .pc-dt-overlay-body { padding: 0 1rem 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-film-loop, .pc-da-item img, .pc-affiche img { transition: none; }
  .pc-doc[open] .pc-doc-body { animation: none; }
}