/* ==========================================================
   PLUTON PROD — « LA SÉANCE »
   ========================================================== */

:root {
  --c-black: #070707;
  --c-ink: #0e0e0e;
  --c-anthracite: #161616;
  --c-graphite: #2a2a2a;
  --c-ash: #8a8782;
  --c-silver: #e8e4dc;
  --c-amber: #e3a35b;
  --c-rec: #e5382b;

  --f-sans: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --f-serif: 'Instrument Serif', 'Times New Roman', serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  --gutter: clamp(16px, 4vw, 64px);
  --gap: clamp(16px, 2vw, 32px);
  --sec-y: clamp(96px, 16vh, 200px);

  --ease-cine: cubic-bezier(.77, 0, .175, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--c-graphite) var(--c-black); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--c-black);
  color: var(--c-silver);
  font-family: var(--f-sans);
  font-size: clamp(16px, 1.1vw, 19px);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
em { font-style: italic; }
::selection { background: var(--c-amber); color: var(--c-black); }
:focus-visible { outline: 2px solid var(--c-amber); outline-offset: 4px; }

/* ---------- Typo utilitaires ---------- */
.display {
  font-family: var(--f-sans);
  font-stretch: 62%;
  font-weight: 900;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: -.01em;
}
.serif, .display .serif {
  font-family: var(--f-serif);
  font-stretch: 100%;
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: -.01em;
}
.mono {
  font-family: var(--f-mono);
  font-size: clamp(10px, .72vw, 12px);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.5;
}
.label { color: var(--c-ash); margin-bottom: clamp(16px, 2.4vh, 32px); }
.label::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 10px; background: var(--c-amber); border-radius: 50%; vertical-align: middle; transform: translateY(-1px); }

/* Mots / caractères découpés */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .16em .04em .14em; margin: -.16em -.04em -.14em; }
.w__i { display: inline-block; will-change: transform; }
.c { display: inline-block; will-change: transform; }

.skip { position: fixed; top: 8px; left: 8px; z-index: 300; padding: 10px 16px; background: var(--c-amber); color: var(--c-black); transform: translateY(-200%); }
.skip:focus { transform: none; }

/* ---------- Boutons & liens ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid var(--c-silver);
  border-radius: 999px;
  overflow: hidden;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  isolation: isolate;
  transition: border-color .5s var(--ease-cine);
}
.btn__fill { position: absolute; inset: 0; z-index: -1; background: var(--c-amber); transform: translateY(101%); transition: transform .5s var(--ease-cine); border-radius: inherit; }
.btn__label { display: inline-flex; gap: 10px; align-items: center; transition: color .4s var(--ease-cine); }
.btn__label i { font-style: normal; transition: transform .5s var(--ease-cine); }
.btn--small { min-height: 44px; padding: 0 20px; font-size: 11px; }
.btn--big { min-height: 64px; padding: 0 40px; font-size: 13px; }
.btn:focus-visible { border-color: var(--c-amber); }
@media (hover: hover) {
  .btn:hover { border-color: var(--c-amber); }
  .btn:hover .btn__fill { transform: none; }
  .btn:hover .btn__label { color: var(--c-black); }
  .btn:hover .btn__label i { transform: translateX(6px); }
}
.link-arrow { display: inline-block; padding: 12px 0; color: var(--c-silver); border-bottom: 1px solid var(--c-graphite); transition: color .3s, border-color .3s; }
@media (hover: hover) { .link-arrow:hover { color: var(--c-amber); border-color: var(--c-amber); } }

/* ==========================================================
   COUCHES FIXES
   ========================================================== */
.grain {
  position: fixed; inset: -100%; z-index: 150; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .11;
  mix-blend-mode: overlay;
  animation: grain .7s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); }
  60% { transform: translate(-2%, 6%); } 80% { transform: translate(5%, 2%); } 100% { transform: translate(-3%, -3%); }
}
.flash { position: fixed; inset: 0; z-index: 140; pointer-events: none; background: var(--c-amber); opacity: 0; }
.letterbox { position: fixed; left: 0; right: 0; height: 9vh; z-index: 130; background: #000; pointer-events: none; transform: scaleY(0); }
.letterbox--top { top: 0; transform-origin: top; }
.letterbox--bottom { bottom: 0; transform-origin: bottom; }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 160; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--c-amber); transform: scaleX(0); transform-origin: left; }

/* HUD */
.hud { position: fixed; inset: 0; z-index: 120; pointer-events: none; color: var(--c-ash); opacity: 0; }
.hud__corner { position: absolute; width: 14px; height: 14px; border: 0 solid rgba(232, 228, 220, .35); }
.hud__corner--tl { top: 12px; left: 12px; border-top-width: 1px; border-left-width: 1px; }
.hud__corner--tr { top: 12px; right: 12px; border-top-width: 1px; border-right-width: 1px; }
.hud__corner--bl { bottom: 12px; left: 12px; border-bottom-width: 1px; border-left-width: 1px; }
.hud__corner--br { bottom: 12px; right: 12px; border-bottom-width: 1px; border-right-width: 1px; }
.hud__rec { position: absolute; left: 36px; bottom: 16px; display: flex; align-items: center; gap: 8px; color: var(--c-silver); }
.hud__rec b { width: 8px; height: 8px; border-radius: 50%; background: var(--c-rec); animation: rec 1.2s steps(2, jump-none) infinite; }
.hud__tc { color: var(--c-ash); font-variant-numeric: tabular-nums; }
@keyframes rec { 0% { opacity: 1; } 100% { opacity: .15; } }
.hud__reel { position: absolute; right: 36px; bottom: 16px; }
.hud__reel-n, .hud__reel-t { color: var(--c-silver); }

/* Curseur */
.cursor { position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none; display: none; }
.cursor__dot, .cursor__ring { position: absolute; top: 0; left: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor__dot { width: 6px; height: 6px; background: var(--c-silver); }
.cursor__ring {
  width: 36px; height: 36px; border: 1px solid rgba(232, 228, 220, .55);
  display: grid; place-items: center;
  transition: width .45s var(--ease-out), height .45s var(--ease-out), border-radius .45s var(--ease-out), background-color .3s, border-color .3s;
}
/* En haut de page : le curseur devient une souris dont la molette descend en boucle */
.cursor__wheel { position: absolute; left: 50%; top: 8px; width: 2px; height: 8px; margin-left: -1px; border-radius: 2px; background: var(--c-amber); opacity: 0; }
.cursor.is-scroll .cursor__ring { width: 26px; height: 42px; border-radius: 14px; border-color: rgba(232, 228, 220, .85); }
.cursor.is-scroll .cursor__dot { opacity: 0; }
.cursor.is-scroll .cursor__wheel { animation: wheel 1.7s var(--ease-out) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 70%, 100% { transform: translateY(14px); opacity: 0; } }
.cursor__ring span { font-size: 10px; color: var(--c-black); opacity: 0; transition: opacity .2s; }
.cursor.is-link .cursor__ring { width: 60px; height: 60px; border-color: var(--c-amber); }
.cursor.is-media .cursor__ring { width: 92px; height: 92px; background: var(--c-amber); border-color: var(--c-amber); }
.cursor.is-media .cursor__ring span { opacity: 1; }
.cursor.is-media .cursor__dot { opacity: 0; }
html.has-cursor .cursor { display: block; }
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor label { cursor: none; }
html.has-cursor input[type="text"], html.has-cursor input[type="email"], html.has-cursor textarea { cursor: text; }

/* ==========================================================
   00 · AMORCE
   ========================================================== */
.loader { position: fixed; inset: 0; z-index: 250; background: var(--c-black); display: grid; place-items: center; }
.loader__leader { position: relative; width: min(46vw, 46vh); aspect-ratio: 1; display: grid; place-items: center; animation: jitter .18s steps(2) infinite; }
.loader__leader::before, .loader__leader::after { content: ''; position: absolute; background: rgba(232, 228, 220, .22); }
.loader__leader::before { left: -40vw; right: -40vw; top: 50%; height: 1px; }
.loader__leader::after { top: -40vh; bottom: -40vh; left: 50%; width: 1px; }
.loader__ring { position: absolute; inset: 0; border: 1px solid rgba(232, 228, 220, .5); border-radius: 50%; }
.loader__ring--in { inset: 8%; }
.loader__sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(232, 228, 220, .16) var(--a, 0deg), transparent 0); }
.loader__count { position: relative; font-family: var(--f-sans); font-stretch: 62%; font-weight: 900; font-size: min(26vw, 26vh); line-height: 1; color: var(--c-silver); }
.loader__label { position: absolute; bottom: 5vh; left: 0; right: 0; text-align: center; color: var(--c-ash); }
@keyframes jitter { 0% { transform: translate(0, 0); } 100% { transform: translate(1px, -1px); } }

/* ==========================================================
   NAVIGATION
   ========================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 110;
  display: flex; align-items: center; gap: var(--gap);
  padding: 18px var(--gutter);
  transition: transform .6s var(--ease-cine), background-color .4s, backdrop-filter .4s;
}
.nav.is-solid { background: rgba(7, 7, 7, .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nav.is-hidden { transform: translateY(-110%); }
.nav__logo { font-stretch: 62%; font-weight: 900; font-size: 22px; letter-spacing: .02em; line-height: 1; min-height: 44px; display: inline-flex; align-items: center; gap: 5px; }
.nav__logo span { color: var(--c-amber); }
.nav__links { margin-left: auto; display: flex; gap: clamp(20px, 2.6vw, 44px); }
.nav__links a { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; position: relative; display: inline-block; overflow: hidden; padding: 14px 0; line-height: 1.4; }
.nav__links a span { display: block; transition: transform .5s var(--ease-cine); }
.nav__links a::after { content: attr(data-label); position: absolute; left: 0; top: 14px; color: var(--c-amber); transform: translateY(240%); transition: transform .5s var(--ease-cine); }
@media (hover: hover) {
  .nav__links a:hover span { transform: translateY(-240%); }
  .nav__links a:hover::after { transform: none; }
}
.nav__burger { display: none; min-height: 44px; padding: 0 4px; margin-left: auto; color: var(--c-silver); }

.menu { position: fixed; inset: 0; z-index: 105; background: var(--c-black); display: flex; flex-direction: column; justify-content: flex-end; padding: 96px var(--gutter) 40px; visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease-cine), visibility 0s .8s; }
.menu.is-open { visibility: visible; clip-path: inset(0); transition: clip-path .8s var(--ease-cine), visibility 0s; }
.menu__links { display: flex; flex-direction: column; }
.menu__links a { font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(48px, 15vw, 96px); line-height: 1; padding: 8px 0; display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--c-graphite); opacity: 0; transform: translateY(30px); transition: opacity .6s, transform .8s var(--ease-out); }
.menu__links a span { color: var(--c-amber); font-stretch: 100%; font-weight: 400; }
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu.is-open .menu__links a:nth-child(1) { transition-delay: .25s; }
.menu.is-open .menu__links a:nth-child(2) { transition-delay: .31s; }
.menu.is-open .menu__links a:nth-child(3) { transition-delay: .37s; }
.menu.is-open .menu__links a:nth-child(4) { transition-delay: .43s; }
.menu.is-open .menu__links a:nth-child(5) { transition-delay: .49s; }
.menu__mail { margin-top: 32px; color: var(--c-ash); padding: 12px 0; text-transform: none; }

/* ==========================================================
   01 · HERO
   ========================================================== */
.hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--c-black); }
.hero__media { position: absolute; inset: 0; }
.hero__video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: contrast(1.05) saturate(.9); }
.hero__shade { position: absolute; inset: 0; background:
  linear-gradient(to top, rgba(7, 7, 7, .92) 0%, rgba(7, 7, 7, .25) 42%, rgba(7, 7, 7, .15) 70%, rgba(7, 7, 7, .6) 100%),
  radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .5) 100%); }
.hero__content { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 96px var(--gutter) 44px; }
.hero__top { display: flex; justify-content: space-between; gap: 16px; color: var(--c-silver); opacity: .85; }
.hero__sides { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--gap); padding-bottom: clamp(12px, 2vh, 28px); }
.hero__side--l { max-width: 30ch; }
.hero__tagline { font-size: clamp(30px, 3.4vw, 60px); line-height: 1.02; margin-bottom: 14px; font-style: normal; }
.hero__sub { color: rgba(232, 228, 220, .78); font-size: clamp(14px, 1vw, 17px); max-width: 38ch; }
.hero__side--r { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; }
.hero__hint { display: flex; align-items: center; gap: 10px; color: var(--c-ash); margin-top: 6px; }
.hero__hint b { width: 1px; height: 28px; background: var(--c-amber); transform-origin: top; animation: hint 1.8s var(--ease-cine) infinite; }
@keyframes hint { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.hero__wordmark { font-size: 18vw; line-height: .82; white-space: nowrap; overflow: hidden; padding-top: .05em; margin: 0 -0.02em; }
.hero__wordmark .fit { display: inline-block; }
.hero__word { display: inline-block; overflow: hidden; vertical-align: top; padding: .05em .02em 0; }
.hero__word--b { color: transparent; -webkit-text-stroke: 1.5px var(--c-silver); }
.hero__gap { display: inline-block; width: .18em; }
.hero__quote { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 14vh; text-align: center; font-size: clamp(28px, 4.4vw, 80px); line-height: 1.05; opacity: 0; pointer-events: none; text-shadow: 0 2px 40px rgba(0, 0, 0, .6); }
.hero__blackout { position: absolute; inset: 0; background: var(--c-black); opacity: 0; pointer-events: none; }

/* ==========================================================
   02 · STATS
   ========================================================== */
.stats { background: var(--c-anthracite); position: relative; }
/* Bande de pellicule : perforations, marquage de bord, 4 photogrammes */
.stats__perf { height: 30px; opacity: .9;
  background-image: repeating-linear-gradient(to right, transparent 0 14px, var(--c-black) 14px 28px, transparent 28px 42px);
  background-size: 42px 13px; background-repeat: repeat-x; background-position: 0 center; }
.stats__edge { display: flex; justify-content: space-between; gap: 16px; padding: 6px var(--gutter) 12px; color: var(--c-amber); opacity: .75; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stats__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, .9vw, 14px); padding: 0 var(--gutter) clamp(18px, 3vh, 30px); }
.stat {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  min-height: clamp(250px, 25vw, 400px);
  padding: clamp(16px, 1.6vw, 28px);
  background: #0a0a0a; border: 1px solid var(--c-graphite); border-radius: 6px;
  transition: border-color .6s var(--ease-cine);
}
/* Lueur de projecteur qui traverse le photogramme au survol */
.stat::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 0% 0%, rgba(227, 163, 91, .2), transparent 62%); opacity: 0; transition: opacity .7s var(--ease-cine); }
.stat__idx { display: flex; justify-content: space-between; gap: 12px; color: var(--c-ash); }
.stat__idx span:first-child { color: var(--c-amber); }
.stat__n { margin-top: auto; padding-top: 28px; font-size: clamp(76px, 10vw, 190px); line-height: .8; color: var(--c-silver); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .6s var(--ease-cine); }
.stat__n small { font-size: .36em; color: var(--c-amber); margin-left: .12em; }
.stat__t { margin-top: clamp(14px, 1.4vw, 22px); padding-top: clamp(12px, 1.2vw, 18px); border-top: 1px solid var(--c-graphite); font-size: clamp(16px, 1.25vw, 21px); font-weight: 500; line-height: 1.25; box-sizing: content-box; min-height: 2.5em; }
.stat__d { margin-top: 6px; color: var(--c-ash); font-size: clamp(14px, .95vw, 16px); line-height: 1.45; max-width: 32ch; min-height: 2.9em; }
@media (hover: hover) {
  .stat:hover { border-color: rgba(227, 163, 91, .6); }
  .stat:hover::before { opacity: 1; }
  .stat:hover .stat__n { color: var(--c-amber); }
}
.marquee { overflow: hidden; background: var(--c-black); border-bottom: 1px solid var(--c-graphite); padding: clamp(18px, 3vh, 36px) 0; }
.marquee__track { display: flex; width: max-content; font-size: clamp(40px, 6vw, 110px); line-height: 1; white-space: nowrap; will-change: transform; color: transparent; -webkit-text-stroke: 1px rgba(232, 228, 220, .55); }
.marquee__track i { font-style: normal; color: var(--c-amber); -webkit-text-stroke: 0; font-size: .5em; vertical-align: middle; margin: 0 .5em; }

/* ==========================================================
   03 · MISSION
   ========================================================== */
.mission { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.mission__media { position: absolute; inset: 0; }
.bgvideo { width: 100%; height: 100%; object-fit: cover; }
.mission__media .bgvideo { opacity: .5; object-position: 50% 30%; }
.mission__shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(7, 7, 7, .35) 0%, rgba(7, 7, 7, .9) 80%), linear-gradient(to bottom, var(--c-black) 0%, transparent 18%, transparent 82%, var(--c-black) 100%); }
.mission__inner { position: relative; width: 100%; padding: 96px var(--gutter) 64px; max-width: 1500px; margin: 0 auto; }
.mission__title { font-size: clamp(34px, 6.2vw, 124px); line-height: .9; max-width: 16ch; }
.mission__title .serif { display: block; font-size: .78em; line-height: 1; margin-top: .14em; color: var(--c-amber); }
.mission__text { margin-top: clamp(24px, 4vh, 48px); max-width: 52ch; font-size: clamp(17px, 1.5vw, 26px); line-height: 1.45; margin-left: auto; }
.mission__sign { margin-top: clamp(20px, 3vh, 40px); color: var(--c-ash); text-align: right; }

/* ==========================================================
   SECTIONS — en-têtes communs
   ========================================================== */
.sec-head { padding: 0 var(--gutter); margin-bottom: clamp(40px, 8vh, 104px); }
.sec-title { font-size: clamp(48px, 9vw, 180px); max-width: 12ch; }
.sec-title .serif { font-size: .8em; color: var(--c-amber); }
.sec-title--xl { font-size: clamp(72px, 17vw, 340px); max-width: none; }
.pillars .sec-title { max-width: none; }
.pillars .sec-title .serif { display: block; white-space: nowrap; }
.works .sec-title { margin-top: clamp(28px, 6vh, 72px); }
.sec-sub { margin-top: 18px; font-size: clamp(20px, 2vw, 34px); color: var(--c-ash); }

/* ==========================================================
   04 · PILIERS
   ========================================================== */
.pillars { padding: var(--sec-y) 0; background: var(--c-black); }
.pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 var(--gutter); border-top: 1px solid var(--c-graphite); border-bottom: 1px solid var(--c-graphite); }
.pillar { position: relative; padding: clamp(24px, 3vw, 48px); padding-top: clamp(120px, 15vw, 260px); border-left: 1px solid var(--c-graphite); overflow: hidden; transition: background-color .6s var(--ease-cine); }
.pillar:first-child { border-left: 0; }
.pillar__n { position: absolute; top: clamp(12px, 1.6vw, 28px); left: clamp(20px, 2.6vw, 44px); font-size: clamp(96px, 13vw, 240px); line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(232, 228, 220, .4); transition: color .6s var(--ease-cine), -webkit-text-stroke-color .6s; }
.pillar__k { color: var(--c-amber); margin-bottom: 10px; }
.pillar__t { font-size: clamp(36px, 4.4vw, 84px); margin-bottom: 18px; }
.pillar p:last-child { color: rgba(232, 228, 220, .78); max-width: 34ch; }
.pillar p .serif { font-size: 1.15em; color: var(--c-silver); }
.pillar::after { content: ''; position: absolute; inset: 10px; border: 1px solid var(--c-amber); opacity: 0; clip-path: inset(0 100% 0 0); transition: clip-path .8s var(--ease-cine), opacity .3s; pointer-events: none; }
@media (hover: hover) {
  .pillar:hover { background: var(--c-ink); }
  .pillar:hover .pillar__n { color: var(--c-amber); -webkit-text-stroke-color: var(--c-amber); }
  .pillar:hover::after { opacity: .7; clip-path: inset(0); }
}

/* ==========================================================
   05 · À PROPOS
   ========================================================== */
.about { background: var(--c-ink); padding-top: var(--sec-y); }
.about__portrait { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 5vw, 96px); align-items: center; padding: 0 var(--gutter) var(--sec-y); }
.frame { position: relative; }
.about__frame { aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.about__frame .bgvideo { filter: contrast(1.06); }
.frame__c { position: absolute; width: 18px; height: 18px; border: 0 solid var(--c-silver); z-index: 2; }
.frame__c--tl { top: 12px; left: 12px; border-top-width: 1px; border-left-width: 1px; }
.frame__c--tr { top: 12px; right: 12px; border-top-width: 1px; border-right-width: 1px; }
.frame__c--bl { bottom: 12px; left: 12px; border-bottom-width: 1px; border-left-width: 1px; }
.frame__c--br { bottom: 12px; right: 12px; border-bottom-width: 1px; border-right-width: 1px; }
.about__frame figcaption { position: absolute; left: 40px; bottom: 14px; z-index: 2; color: var(--c-silver); text-shadow: 0 1px 8px #000; }
.about__text .sec-title { font-size: clamp(48px, 7vw, 140px); margin-bottom: clamp(20px, 3vh, 40px); }
.about__text .sec-title .serif { display: block; white-space: nowrap; }
.about__lead { font-family: var(--f-serif); font-size: clamp(24px, 2.2vw, 38px); line-height: 1.15; margin-bottom: 16px; }
.about__text p:not(.label):not(.about__lead) { color: rgba(232, 228, 220, .78); max-width: 44ch; margin-bottom: 20px; }

.rail { position: relative; overflow: hidden; background: var(--c-black); border-top: 1px solid var(--c-graphite); }
.rail__track { display: flex; width: max-content; height: 100vh; height: 100svh; align-items: center; padding: 0 var(--gutter); gap: clamp(48px, 8vw, 160px); will-change: transform; }
.rail__panel { flex: none; }
.rail__panel--intro { width: min(46vw, 700px); }
.rail__title { font-size: clamp(56px, 7.6vw, 150px); }
.rail__title .serif { color: var(--c-amber); font-size: .82em; }
.rail__hint { margin-top: 32px; color: var(--c-ash); }
.chapter { display: flex; align-items: center; gap: clamp(24px, 4vw, 72px); width: min(78vw, 1200px); }
.chapter__media { flex: none; width: min(34vw, 50vh); aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-anthracite); }
.chapter__media img, .chapter__media video { width: 100%; height: 100%; object-fit: cover; }
.chapter__body { position: relative; max-width: 44ch; }
.chapter__n { display: block; font-size: clamp(96px, 13vw, 260px); line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(232, 228, 220, .4); margin-bottom: 12px; }
.chapter__t { font-size: clamp(36px, 4.6vw, 88px); margin-bottom: 18px; }
.chapter__body p { color: rgba(232, 228, 220, .78); margin-bottom: 24px; }
.chapter--end { width: min(60vw, 760px); padding-right: 10vw; }
.rail__bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 56px; height: 1px; background: var(--c-graphite); }
.rail__bar span { display: block; height: 100%; background: var(--c-amber); transform: scaleX(0); transform-origin: left; }

/* ==========================================================
   06 · SERVICES
   ========================================================== */
.services { position: relative; padding: var(--sec-y) 0; background: var(--c-black); }
.services__list { margin: 0 var(--gutter); border-top: 1px solid var(--c-graphite); }
.service { border-bottom: 1px solid var(--c-graphite); }
.service__head { width: 100%; display: grid; grid-template-columns: 56px 1fr auto 32px; align-items: center; gap: var(--gap); padding: clamp(18px, 2.6vw, 40px) 0; transition: opacity .4s; }
.service__n { color: var(--c-amber); }
.service__t { font-size: clamp(30px, 5.4vw, 104px); line-height: .92; transition: color .4s var(--ease-cine), transform .6s var(--ease-cine); }
.service__tags { color: var(--c-ash); text-align: right; }
.service__plus { position: relative; width: 20px; height: 20px; justify-self: end; }
.service__plus::before, .service__plus::after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: currentColor; transition: transform .5s var(--ease-cine); }
.service__plus::after { transform: rotate(90deg); }
.service.is-open .service__plus::after { transform: rotate(0); }
.service__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease-cine); }
.service__body > div { overflow: hidden; }
.service__body p { padding: 0 0 clamp(20px, 3vw, 40px) calc(56px + var(--gap)); max-width: 62ch; color: rgba(232, 228, 220, .8); font-size: clamp(16px, 1.3vw, 22px); }
.service.is-open .service__body { grid-template-rows: 1fr; }
.service.is-open .service__t { color: var(--c-amber); }
@media (hover: hover) {
  .services__list:hover .service:not(:hover) .service__head { opacity: .3; }
  .service:hover .service__t { color: var(--c-amber); transform: translateX(14px); }
}
.services__preview { position: fixed; top: 0; left: 0; z-index: 90; width: clamp(240px, 24vw, 420px); aspect-ratio: 16 / 9; overflow: hidden; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.6); background: var(--c-anthracite); }
.services__preview video { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================
   07 · TRAVAUX
   ========================================================== */
.works { padding: var(--sec-y) 0; background: var(--c-ink); }
.works__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(48px, 9vh, 140px) var(--gap); padding: 0 var(--gutter); align-items: start; }
.work { grid-column: span 12; }
.work--l { grid-column: span 7; }
.work--s { grid-column: span 5; }
.work--xl { grid-column: span 8; }
.work--v { grid-column: span 4; }
.work--v .work__media { aspect-ratio: 9 / 16; }
.work--v .work__info { grid-template-columns: 32px 1fr; }
.work--l + .work--s { margin-top: clamp(40px, 12vh, 180px); }
.work--xl + .work--v { margin-top: clamp(24px, 6vh, 88px); }
.work__media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.work--wide .work__media { aspect-ratio: 2.39 / 1; }
.work--tall .work__media { aspect-ratio: 4 / 5; }
.work__media video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease-out); }
.work__play { position: absolute; left: 16px; bottom: 14px; padding: 6px 10px; background: rgba(7, 7, 7, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--c-silver); }
.work__play::before { content: '▶'; margin-right: 8px; color: var(--c-amber); font-size: .9em; }
.work__info { display: grid; grid-template-columns: 56px 1fr; column-gap: var(--gap); padding-top: 18px; }
.work__i { color: var(--c-amber); grid-row: span 4; padding-top: .5em; }
.work__t { font-size: clamp(36px, 5vw, 96px); margin-bottom: 8px; }
.work__c { color: var(--c-silver); margin-bottom: 10px; }
.work__d { color: rgba(232, 228, 220, .75); max-width: 46ch; margin-bottom: 10px; }
.work__r { color: var(--c-ash); }
@media (hover: hover) { .work__media:hover video { transform: scale(1.07); } }

/* ==========================================================
   08 · PHOTOS
   ========================================================== */
.photos { padding: var(--sec-y) 0; background: var(--c-black); }
.photos__grid { columns: 3; column-gap: var(--gap); padding: 0 var(--gutter); }
.photo { position: relative; display: block; width: 100%; margin-bottom: var(--gap); overflow: hidden; break-inside: avoid; background: var(--c-anthracite); }
.photo img { width: 100%; height: auto; transition: transform 1.2s var(--ease-out), filter .6s; }
.photo span { position: absolute; left: 12px; bottom: 10px; padding: 5px 9px; background: rgba(7, 7, 7, .6); color: var(--c-silver); opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease-out); }
@media (hover: hover) {
  .photo:hover img { transform: scale(1.05); }
  .photo:hover span { opacity: 1; transform: none; }
}

/* ==========================================================
   09 · FINALE + BRIEF
   ========================================================== */
.finale { background: var(--c-black); }
.finale__stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.finale__media { position: absolute; inset: 0; }
.finale__media .bgvideo { filter: contrast(1.05) saturate(.9); will-change: transform; }
.finale__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--c-black) 0%, rgba(7, 7, 7, .25) 25%, rgba(7, 7, 7, .35) 60%, var(--c-black) 100%); }
.finale__inner { position: relative; width: 100%; height: 100%; padding: 104px var(--gutter) 72px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.finale__inner .label { display: inline-block; }
.finale__title { font-size: clamp(46px, 9.4vw, 190px); line-height: .86; }
.finale__title .serif { display: block; font-size: .8em; color: var(--c-amber); line-height: 1; margin-top: .06em; }
.finale__cta { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.finale__cta .link-arrow { text-transform: none; }

.brief { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 120px); padding: var(--sec-y) var(--gutter); scroll-margin-top: 40px; }
.brief__title { font-size: clamp(64px, 10vw, 200px); margin-bottom: 24px; }
.brief__intro { font-family: var(--f-serif); font-size: clamp(22px, 2vw, 34px); line-height: 1.2; max-width: 24ch; margin-bottom: 28px; }
.brief__note { color: var(--c-ash); max-width: 40ch; }
.form { display: grid; gap: clamp(24px, 3.4vh, 40px); align-content: start; }
.field { position: relative; }
.field input, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--c-graphite); border-radius: 0;
  padding: 26px 0 12px; color: var(--c-silver); font: inherit; font-size: clamp(18px, 1.5vw, 24px); line-height: 1.4;
  transition: border-color .4s; resize: vertical;
}
.field textarea { min-height: 140px; }
.field label { position: absolute; left: 0; top: 26px; color: var(--c-ash); pointer-events: none; transform-origin: left top; transition: transform .4s var(--ease-out), color .3s; font-size: clamp(16px, 1.3vw, 20px); }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--c-amber); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-24px) scale(.68); color: var(--c-amber); }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--c-rec); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips legend { color: var(--c-ash); margin-bottom: 14px; padding: 0; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--c-graphite); border-radius: 999px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; transition: background-color .3s, color .3s, border-color .3s; }
.chip input:checked + span { background: var(--c-amber); border-color: var(--c-amber); color: var(--c-black); }
.chip input:focus-visible + span { outline: 2px solid var(--c-amber); outline-offset: 3px; }
@media (hover: hover) { .chip:hover span { border-color: var(--c-silver); } }
.form__error { color: var(--c-rec); }
.form__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.form__hint { color: var(--c-ash); max-width: 30ch; }
.form__done { border: 1px solid var(--c-amber); padding: clamp(20px, 3vw, 40px); }
.form__done .display { font-size: clamp(48px, 6vw, 110px); color: var(--c-amber); margin-bottom: 14px; }
.form__done p { margin-bottom: 10px; }
.form__done .mono { color: var(--c-ash); text-transform: none; letter-spacing: .04em; }
.form__done a { color: var(--c-silver); border-bottom: 1px solid currentColor; }
[hidden] { display: none !important; }

/* ==========================================================
   10 · FOOTER
   ========================================================== */
.footer { background: var(--c-ink); border-top: 1px solid var(--c-graphite); padding: clamp(48px, 8vh, 96px) var(--gutter) 56px; overflow: hidden; }
.footer__top { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: var(--gap); margin-bottom: clamp(40px, 8vh, 96px); }
.credits div { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; max-width: 460px; }
.credits dt { flex: 1; display: flex; gap: 12px; align-items: baseline; color: var(--c-ash); white-space: nowrap; }
.credits dt::after { content: ''; flex: 1; border-bottom: 1px dotted var(--c-graphite); transform: translateY(-3px); }
.credits dd { color: var(--c-silver); white-space: nowrap; }
.credits a { color: var(--c-amber); border-bottom: 1px solid currentColor; }
.footer__links { display: flex; flex-direction: column; align-items: flex-start; }
.footer__links a { padding: 8px 0; min-height: 36px; transition: color .3s; }
.footer__links a:first-child { text-transform: none; letter-spacing: .04em; color: var(--c-amber); }
.footer__meta { text-align: right; color: var(--c-ash); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.footer__top-link { padding: 8px 0; color: var(--c-silver); }
@media (hover: hover) { .footer__links a:hover, .footer__top-link:hover { color: var(--c-amber); } }
.footer__wordmark { font-size: 18vw; line-height: .82; white-space: nowrap; overflow: hidden; padding-top: .05em; }
.footer__wordmark .fit { display: inline-block; }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 24px; color: var(--c-ash); }

/* ==========================================================
   RETOUR EN HAUT
   ========================================================== */
.to-top {
  position: fixed; right: var(--gutter); bottom: 52px; z-index: 100;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; border: 1px solid rgba(232, 228, 220, .4); color: var(--c-silver);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .4s, visibility 0s .4s, transform .5s var(--ease-out), border-color .3s, color .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .4s, visibility 0s, transform .5s var(--ease-out), border-color .3s, color .3s; }
.to-top svg { transition: transform .5s var(--ease-out); }
@media (hover: hover) {
  .to-top:hover { border-color: var(--c-amber); color: var(--c-amber); }
  .to-top:hover svg { transform: translateY(-3px); }
}
@media (max-width: 768px) { .to-top { right: 16px; bottom: 44px; width: 46px; height: 46px; } }

/* ==========================================================
   VISIONNEUSE
   ========================================================== */
.lightbox { position: fixed; inset: 0; z-index: 220; background: rgba(3, 3, 3, .96); display: grid; place-items: center; padding: 64px clamp(16px, 4vw, 64px) 32px; opacity: 0; transition: opacity .4s; }
.lightbox.is-open { opacity: 1; }
.lightbox__stage { width: 100%; height: 100%; display: grid; place-items: center; min-height: 0; }
.lightbox__stage video, .lightbox__stage img { max-width: 100%; max-height: calc(100vh - 110px); max-height: calc(100svh - 110px); width: auto; height: auto; background: #000; }
.lightbox__close { position: absolute; top: 12px; right: clamp(12px, 3vw, 40px); min-height: 44px; padding: 0 12px; color: var(--c-silver); z-index: 2; }
html.has-cursor .lightbox video { cursor: auto; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1024px) {
  .stats__list { grid-template-columns: 1fr 1fr; }
  .service__head { grid-template-columns: 40px 1fr 32px; }
  .service__tags { display: none; }
  .service__body p { padding-left: calc(40px + var(--gap)); }
  .about__portrait { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__meta { grid-column: span 2; align-items: flex-start; text-align: left; }
}

@media (max-width: 768px) {
  .nav { padding: 10px var(--gutter); }
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: inline-flex; align-items: center; }
  .hud__corner, .hud__reel { display: none; }
  .hud__rec { left: 16px; bottom: 10px; }

  .hero__content { padding: 76px var(--gutter) 40px; }
  .hero__top-r { display: none; }
  .hero__sides { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hero__side--r { align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
  .hero__hint { width: 100%; }
  .hero__sub { display: none; }
  .hero__wordmark { white-space: normal; }
  .hero__wordmark .fit { display: inline-flex; flex-direction: column; }
  .hero__gap { display: none; }
  .hero__quote { bottom: 22vh; }

  .stats__list { grid-template-columns: 1fr; }
  .stats__edge span:last-child { display: none; }
  .stat { min-height: 0; display: grid; grid-template-columns: 124px 1fr; column-gap: 16px; align-items: start; }
  .stat__idx { grid-column: 1 / -1; margin-bottom: 14px; }
  .stat__n { grid-row: 2 / 4; margin-top: 0; padding-top: 0; font-size: 76px; align-self: center; }
  .stat__t { margin-top: 0; padding-top: 0; border-top: 0; min-height: 0; }
  .stat__d { min-height: 0; }

  .mission__text { margin-left: 0; }
  .mission__sign { text-align: left; }

  .pillars__grid { grid-template-columns: 1fr; }
  .pillar { border-left: 0; border-top: 1px solid var(--c-graphite); padding-top: 120px; }
  .pillar:first-child { border-top: 0; }

  .about__frame figcaption { left: 36px; font-size: 9px; }
  .rail__track { flex-direction: column; width: auto; height: auto; align-items: stretch; padding: 72px var(--gutter); gap: 72px; }
  .rail__panel--intro, .chapter, .chapter--end { width: auto; padding-right: 0; }
  .rail__hint, .rail__bar { display: none; }
  .chapter { flex-direction: column; align-items: flex-start; gap: 20px; }
  .chapter__media { width: 100%; }

  .works__grid { grid-template-columns: 1fr; }
  .work, .work--l, .work--s, .work--xl, .work--v { grid-column: auto; }
  .work--l + .work--s, .work--xl + .work--v { margin-top: 0; }
  .work--wide .work__media { aspect-ratio: 16 / 9; }
  .work__info { grid-template-columns: 32px 1fr; }

  .photos__grid { columns: 2; }
  .photo span { display: none; }

  .brief { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__meta { grid-column: auto; }
  .footer__bottom { flex-direction: column; gap: 4px; padding-left: 0; }
  .footer { padding-bottom: 48px; }
}

/* ==========================================================
   ACCESSIBILITÉ — mouvement réduit
   ========================================================== */
html.static .grain, html.static .hud__rec b, html.static .hero__hint b, html.static .loader__leader { animation: none; }
html.static .hero__hint { display: none; }
html.static .rail { overflow-x: auto; }

.motion-toggle {
  position: fixed; left: 50%; bottom: 14px; z-index: 170; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
  padding: 8px 8px 8px 16px; background: rgba(22, 22, 22, .92); border: 1px solid var(--c-graphite);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--c-ash);
}
.motion-toggle button { min-height: 36px; padding: 0 14px; background: var(--c-amber); color: var(--c-black); white-space: nowrap; }
.motion-toggle .motion-toggle__close { background: none; color: var(--c-silver); padding: 0 8px; }