/* FORMFORMA — une seule couleur à la fois.
   Aucun bloc, aucun cadre, aucun dégradé : la page entière change de teinte
   en franchissant les sections. Les grands textes arrivent flous et se révèlent
   exactement à la hauteur où le regard les atteint. */
:root{
  --bg:#101C16; --fg:#F2EDE1; --dim:rgba(242,237,225,.62); --acc:#C9A227;
  --serif:'Bodoni Moda','Didot','Bodoni MT',Georgia,serif;
  --sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --e:cubic-bezier(.19,.9,.27,1);
  --pad:clamp(20px,5vw,88px);
  --swap:1.1s;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-weight:400;
  line-height:1.72;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  transition:background-color var(--swap) var(--e),color var(--swap) var(--e)}
a{color:inherit}
::selection{background:var(--fg);color:var(--bg)}

/* ── entête : jamais de fond, il prend la couleur du texte courant ── */
.top{position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:baseline;
  justify-content:space-between;padding:22px var(--pad);color:var(--fg);
  background:var(--bg);
  transition:color var(--swap) var(--e),background-color var(--swap) var(--e)}
/* La page est monochrome : un bandeau de la couleur courante suffit à empêcher
   le texte de passer sous l'entête, sans jamais se voir. Un dégradé prolonge
   la teinte sur 28 px pour que la coupure ne soit pas nette. */
.top::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;
  background:linear-gradient(var(--bg),transparent);pointer-events:none;
  transition:background var(--swap) var(--e)}
.mark{font-family:var(--serif);font-size:clamp(13px,1.35vw,16px);font-weight:500;
  letter-spacing:.4em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.mark em{font-style:italic;letter-spacing:.04em}
.top nav{display:flex;gap:clamp(14px,2.2vw,30px);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.top nav a{text-decoration:none;opacity:.6;transition:opacity .4s var(--e)}
.top nav a:hover{opacity:1}
@media(max-width:700px){.top nav{display:none}}

/* ── grille ──────────────────────────────────────────────────── */
.g{display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(12px,2vw,28px);
  padding-left:var(--pad);padding-right:var(--pad)}
@media(max-width:820px){.g{grid-template-columns:repeat(6,1fr)}}
section{padding-top:clamp(96px,17vw,230px);padding-bottom:clamp(96px,17vw,230px)}

/* ── ouverture ───────────────────────────────────────────────── */
.open{position:relative;min-height:100svh;display:grid;grid-template-columns:repeat(12,1fr);
  align-content:center;padding:0 var(--pad);gap:0 clamp(12px,2vw,28px);overflow:hidden}
.open-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;filter:saturate(.8) contrast(1.06);pointer-events:none;
  transition:opacity 2.2s var(--e)}
/* La vidéo n'apparaît qu'une fois réellement décodable. Cloudflare Pages ne
   sert pas ce fichier par plages (une requête Range renvoie 200), le navigateur
   doit donc charger les 7,8 Mo avant de lire. Le hero est complet sans elle. */
.open-video.ready{opacity:.62}
.open::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(96deg,rgba(16,28,22,.94) 4%,rgba(16,28,22,.62) 40%,rgba(16,28,22,.18) 100%)}
@media(max-width:820px){.open::after{background:linear-gradient(to top,#101C16 14%,rgba(16,28,22,.62) 70%,rgba(16,28,22,.4))}}
.open-txt{position:relative;z-index:2;grid-column:1/span 9}
@media(max-width:820px){.open{grid-template-columns:repeat(6,1fr)}.open-txt{grid-column:1/span 6}}
.issue{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--acc);
  margin:0 0 clamp(26px,4vw,46px);display:flex;gap:16px;flex-wrap:wrap}
.issue span{opacity:.5}
h1{font-family:var(--serif);font-weight:400;font-optical-sizing:auto;
  font-size:clamp(40px,8.4vw,120px);line-height:1;letter-spacing:-.03em;margin:0;max-width:13ch}
h1 i{font-style:italic;color:var(--acc)}
.open-lede{margin:clamp(26px,3.6vw,44px) 0 0;max-width:46ch;
  font-size:clamp(14px,1.3vw,16.5px);line-height:1.95;color:var(--dim)}

/* ── article ─────────────────────────────────────────────────── */
.note{grid-column:1/span 3;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);line-height:2.1;padding-top:.7em}
.col{grid-column:5/span 7}
@media(max-width:820px){.note{grid-column:1/span 6;margin-bottom:22px;padding-top:0}
  .col{grid-column:1/span 6}}
.h2{font-family:var(--serif);font-weight:400;font-optical-sizing:auto;
  font-size:clamp(26px,4.2vw,56px);line-height:1.12;letter-spacing:-.025em;
  margin:0 0 clamp(24px,2.8vw,38px);max-width:19ch}
.h2 i{font-style:italic;color:var(--acc)}
.p{font-size:clamp(14.5px,1.22vw,16.5px);line-height:1.98;color:var(--dim);max-width:62ch;margin:0}
.p + .p{margin-top:1.5em}
.p strong{font-weight:500;color:var(--fg)}

/* ── citation pleine largeur : du texte, rien d'autre ────────── */
.say{padding-top:clamp(110px,20vw,260px);padding-bottom:clamp(110px,20vw,260px);text-align:center}
.say q{quotes:none;display:block;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(24px,5.2vw,72px);line-height:1.2;letter-spacing:-.028em;
  max-width:20ch;margin:0 auto}
.say .src{margin:clamp(28px,3.6vw,44px) 0 0;font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--dim)}

/* ── chiffres : filets seulement, aucun fond ─────────────────── */
.fig{grid-column:span 4;padding-right:clamp(14px,2vw,30px)}
.fig b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(50px,8.4vw,128px);
  line-height:.84;letter-spacing:-.045em;color:var(--acc)}
.fig .lbl{display:block;margin-top:20px;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim)}
.fig p{margin:14px 0 0;font-size:14px;line-height:1.9;color:var(--dim);max-width:30ch}
@media(max-width:820px){.fig{grid-column:span 6;margin-bottom:44px}}

/* ── fin ─────────────────────────────────────────────────────── */
.btn{display:inline-block;margin-top:clamp(30px,3.8vw,46px);padding:17px 42px;
  border:1px solid currentColor;border-radius:999px;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;text-decoration:none;
  transition:background-color .5s var(--e),color .5s var(--e)}
.btn:hover{background:var(--fg);color:var(--bg)}
footer{padding:clamp(48px,7vw,90px) var(--pad);font-size:12.5px;line-height:2.1;color:var(--dim)}
.foot{display:flex;flex-wrap:wrap;gap:20px 46px;justify-content:space-between;align-items:flex-end}
footer a{color:var(--fg);text-decoration:none;margin-right:22px;opacity:.72}
footer a:hover{opacity:1}
.foot .mark{color:var(--fg);display:block;margin-bottom:12px;opacity:1}

/* ── révélation : flou + opacité, déclenchés à la hauteur exacte ──
   La transition est confiée au compositeur (une seule animation) plutôt que
   recalculée image par image : un blur() continu sur du Bodoni 120 px gelait
   le rendu (mesuré le 08/09/2026). */
.js .fx{opacity:0;filter:blur(12px);transform:translateY(18px)}
.fx{transition:opacity 1.15s var(--e),filter 1.15s var(--e),transform 1.15s var(--e)}
.fx.on{opacity:1!important;filter:blur(0)!important;transform:none!important}
.fx.d1{transition-delay:.09s}.fx.d2{transition-delay:.18s}.fx.d3{transition-delay:.27s}
@media(prefers-reduced-motion:reduce){
  .js .fx{opacity:1!important;filter:none!important;transform:none!important}
  body,.top{transition:none}
}