/* LA PAGE D'INSCRIPTION AU FESTIVAL — EXTRACTION de
   zegame-prototypes/festival-inscription-cible (Codex, `eeaca46`).

   ⚠️ EXTRACTION, PAS TRANSPOSITION — même méthode que `engagement.css`, et pour
   la même raison : la maquette de Codex n'est pas une page isolée, c'est une
   page PLUS une coque de site. La coque, ici, existe déjà. Sur les 321
   sélecteurs de sa feuille, 42 sont ceux de la coque et ne sont pas portés :
   `.site-header`, `.site-nav*`, `.brand*`, `.menu-toggle*`, `.skip-link*`,
   `.site-footer`, `.shell`, `.prototype-bar*`, et les règles de base que
   `styles.css` pose déjà (`*`, `html`, `body`).

   Chargée PAR LA VUE, jamais par la coque — comme `sommaire.css` et
   `engagement.css`. C'est ce qui rend sans danger les noms génériques de la
   maquette (`.hero`, `.faq`, `.button`, `.eyebrow`) : ils n'existent que sur
   cette page-ci.

   ── CINQ ÉCARTS, ET AUCUN AUTRE ──────────────────────────────────────────────

   1. ⚠️ LA PALETTE EST CELLE DU SITE (arbitrage de Boris, 4 septembre). La
      maquette redéfinit `--ink`, `--paper`, `--violet`, `--line`… avec des
      valeurs proches mais distinctes, et l'écart SE VOIT : mesuré ΔE 5,20 sur
      `--violet` (#8e246f contre #82246f), 4,97 sur `--paper-2`, 3,10 sur
      `--ink-2`. Or l'en-tête et le pied viennent de la coque : une palette
      propre à la page aurait fait une couture dans le même écran — bandeau d'un
      violet, corps d'un autre. Seules les couleurs que le Festival INVENTE sont
      portées : `--night`, `--night-2`, `--magenta`, `--gold`, `--gold-light`,
      `--acid`. Elles portent son identité ; le violet décalé de 5 ΔE, non.

   2. ⚠️ `.dialog-close` EST BORNÉE À SON DIALOGUE. La coque du site emploie ce
      même nom pour son dialogue de lecture, en CLAIR (fond blanc, bordure
      `--line`) ; celui de Codex est SOMBRE, fait pour se poser sur une vidéo.
      Porté nu, il aurait repeint en noir le bouton de fermeture du site sur
      cette page. Il est donc écrit `.video-dialog .dialog-close`.

   3. LE CSS DES SECTIONS QUE LE DOCUMENT NE PORTE PLUS N'EST PAS PORTÉ. La
      dernière version de la maquette a remplacé sa section « film » par une
      lecture depuis la couverture, mais sa feuille en a gardé les règles :
      `.film-section`, `.film-grid`, `.video-facade`, `.film-shade`, `.play`,
      `.film-caption`, plus `.circle-symbol`, `.doctor-signal`, `.motor-loop`,
      `.motor-pole`, `.motor-light`, `.omega-symbol`, `.shadow-symbol`. Quatorze
      classes que rien n'atteint. Une extraction ne porte pas ce qui ne peut
      rien styler — la règle appliquée est mécanique : aucune classe du sélecteur
      présente dans le document, aucun portage.

   4. LA GARDE « MOUVEMENT RÉDUIT » N'EST PAS PORTÉE, parce que celle du site est
      DÉJÀ PLUS FORTE : `styles.css` l. 546 pose
      `*, *::before, *::after { animation-duration: .01ms !important }`, là où la
      maquette se contente de `animation: none` sur deux sélecteurs. La porter
      aurait fait une seconde copie, plus faible, de la même intention.

   5. `.shell` ET `--shell` NE SONT PAS PORTÉS. Le site déclare déjà
      `.shell { width: min(1180px, calc(100% - 40px)) }` ; la maquette écrit
      48 px de gouttière. Garder les deux aurait donné à cette page une gouttière
      différente de celle de son propre en-tête. Le seul usage de `var(--shell)`
      était `.shell` elle-même.

   ⚠️ CE QUI EST GARDÉ ET QU'ON POURRAIT CROIRE DE COQUE : `body { padding-bottom:
   72px }`. Ce n'est pas un reste — c'est la place réservée au CTA mobile
   persistant, qui est en `position: fixed`. Sans elle, il recouvrirait le pied
   du site. La règle est nue, mais la feuille n'étant chargée que par cette vue,
   elle ne s'applique qu'ici.

   ⚠️ `--site-header-height: 76px` N'EST PAS UNE SUPPOSITION : mesuré au
   navigateur sur `/agenda`, l'en-tête du site fait bien 76 px et il est
   `sticky` en `z-index: 200`. La sous-navigation du Festival s'y cale.
*/

:root { --night:#110b10; --night-2:#21131f; --magenta:#c73794; --gold:#d8a64c; --gold-light:#f0cd81; --acid:#e5ff6e; --site-header-height:76px; --festival-nav-height:50px; }
a { color:inherit; }
button,
input { font:inherit; }
button,
a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.eyebrow { margin:0 0 14px; color:var(--violet); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.eyebrow.gold { color:var(--gold-light); }
h1,
h2,
h3 { font-family:var(--serif); font-weight:500; line-height:1.07; margin:0; letter-spacing:-.035em; }
h2 { font-size:clamp(38px,5vw,66px); }
p { margin:0; }
/* La gouttière du site, avec repli : cette feuille peut être lue avant que
   `tokens.css` ne porte les deux variables (PR séparée). */
.festival-nav { height:var(--festival-nav-height); position:sticky; top:var(--site-header-height); z-index:290; padding:0 max(var(--site-gouttiere, 20px), calc((100% - var(--site-largeur, 1180px)) / 2)); display:grid; grid-template-columns:260px 1fr auto; align-items:center; gap:30px; background:rgba(17,11,16,.95); color:white; border-bottom:1px solid rgba(255,255,255,.13); backdrop-filter:blur(14px); }
.festival-nav-title { text-decoration:none; display:flex; align-items:center; gap:10px; line-height:1; }
.festival-nav-title span { font-size:9px; color:var(--gold-light); letter-spacing:.12em; }
.festival-nav-title b { font-family:var(--serif); font-size:13px; font-weight:500; }
.festival-nav>div { display:flex; justify-content:center; gap:28px; }
.festival-nav>div a { font-size:10px; text-decoration:none; color:rgba(255,255,255,.68); }
.festival-nav>div a:hover { color:white; }
.festival-nav-cta { text-decoration:none; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--gold-light); display:flex; gap:10px; }
.hero { min-height:730px; height:calc(100vh - var(--site-header-height) - var(--festival-nav-height)); max-height:850px; display:grid; grid-template-columns:46% 54%; background:var(--night); color:white; overflow:hidden; }
.hero-copy { padding:clamp(55px,7vh,90px) clamp(34px,5vw,85px); display:flex; flex-direction:column; justify-content:center; position:relative; z-index:2; }
.hero-copy::after { content:""; position:absolute; z-index:-1; right:-130px; top:0; bottom:0; width:250px; background:linear-gradient(90deg,var(--night),transparent); }
.hero-date { font-size:13px; letter-spacing:.08em; color:rgba(255,255,255,.68); margin:0 0 28px; }
.hero h1 { font-size:clamp(42px,4.7vw,69px); }
.hero h1 em { color:var(--gold-light); font-style:normal; }
.hero-lead { font-family:var(--serif); font-size:clamp(18px,1.7vw,24px); margin-top:28px; color:rgba(255,255,255,.82); }
.hero-price { display:flex; align-items:center; gap:27px; margin-top:32px; }
.hero-price strong { font-family:var(--serif); font-size:36px; color:var(--gold-light); font-weight:500; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:50px; padding:10px 12px 10px 24px; border-radius:999px; text-decoration:none; font-size:13px; font-weight:600; }
.button-gold { background:var(--gold-light); color:var(--ink); }
.button i,
.submit-button i { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:white; font-style:normal; }
.hero-art { margin:0; position:relative; overflow:hidden; background:#28180f; }
.hero-art img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.hero-art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(17,11,16,.2),transparent 35%); }
.hero-art figcaption { position:absolute; z-index:2; right:24px; bottom:20px; color:rgba(255,255,255,.62); font-size:9px; letter-spacing:.15em; text-transform:uppercase; }
.anti-festival { padding:120px 0; background:var(--paper); }
.anti-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:start; }
.anti-grid h2 { max-width:520px; }
.old-formula { border-left:1px solid #baaa93; padding-left:45px; display:flex; flex-direction:column; font-family:var(--serif); font-size:clamp(20px,2.2vw,29px); line-height:1.7; }
.old-formula span { color:#71646b; text-decoration:line-through; text-decoration-color:rgba(142,36,111,.45); }
.old-formula strong { margin-top:13px; color:var(--violet); font-weight:500; }
.proposition { margin-top:100px; padding:48px 56px; background:var(--ink); color:white; display:grid; grid-template-columns:.55fr 1.2fr .8fr; gap:45px; align-items:center; }
.proposition>p { font-size:14px; color:rgba(255,255,255,.7); }
.proposition h3 { font-size:clamp(26px,3vw,41px); }
.proposition h3 em { font-style:normal; color:var(--gold-light); }
.prototypes { padding:120px 0 0; }
.section-heading { max-width:850px; margin-bottom:65px; }
.prototype-list { display:flex; flex-direction:column; }
.prototype-item { min-height:560px; padding:80px max(5vw,calc((100vw - 1180px)/2)); display:grid; grid-template-columns:110px minmax(0,1.15fr) minmax(280px,.85fr); gap:55px; align-items:center; }
.prototype-index { align-self:start; display:flex; align-items:center; gap:14px; }
.prototype-index span { font-family:var(--serif); font-size:28px; }
.prototype-index i { height:1px; flex:1; background:currentColor; opacity:.35; }
.prototype-copy h3 { font-size:clamp(34px,4.2vw,59px); margin-bottom:25px; }
.prototype-copy>p:not(.eyebrow) { font-size:16px; max-width:720px; color:inherit; opacity:.76; margin-top:16px; }
.prototype-punch { font-family:var(--serif); font-size:22px!important; opacity:1!important; border-left:3px solid var(--violet); padding-left:20px; }
.prototype-symbol { min-height:320px; display:grid; place-items:center; position:relative; }
.tone-light { background:var(--white); }
.tone-dark { background:var(--night); color:white; }
.tone-violet { background:linear-gradient(135deg,#4f143f,#9a2879); color:white; }
.tone-paper { background:#e9decc; }
.tone-shadow { background:linear-gradient(120deg,#090609,#25131f); color:white; }
.tone-dark .prototype-punch,
.tone-shadow .prototype-punch { border-color:var(--gold); }
.short-lines { display:flex; flex-direction:column; margin:24px 0; font-family:var(--serif); font-size:21px; color:var(--gold-light); }
.worlds { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:25px 0; }
.worlds span { padding:16px; border-top:1px solid rgba(23,18,24,.22); font-size:13px; }
.worlds b { display:block; color:var(--violet); font-size:11px; }
.motor-symbol { grid-template-columns:1fr auto 1fr; font-size:10px; letter-spacing:.12em; }
.motor-symbol b { font-family:var(--serif); font-size:105px; font-weight:400; color:var(--violet); }
.motor-symbol span:last-child { color:var(--violet); }
@keyframes omega-drift {0%,100%{transform:translateX(-80px)}50%{transform:translateX(80px)}}
.phone-symbol>div { width:175px; height:320px; border:8px solid var(--ink); border-radius:27px; background:linear-gradient(160deg,#421934,#111); color:white; display:flex; align-items:center; justify-content:center; flex-direction:column; box-shadow:0 25px 50px rgba(0,0,0,.18); }
.phone-symbol b { font-family:var(--serif); font-size:85px; line-height:1; }
.phone-symbol small { font-size:8px; letter-spacing:.2em; }
.phone-symbol i { width:1px; height:35px; background:var(--gold); margin:12px; }
.doctor { display:grid; grid-template-columns:220px 1fr; background:#0a090a; color:white; position:relative; overflow:hidden; }
.doctor::after { content:"Z.E.R.O."; position:absolute; right:-25px; bottom:-75px; font-family:var(--serif); font-size:190px; color:rgba(255,255,255,.035); }
.doctor-copy { padding:85px max(8vw,calc((100vw - 950px)/2)); max-width:1150px; position:relative; z-index:1; }
.eyebrow.acid { color:var(--acid); }
.doctor blockquote { font-family:var(--serif); font-size:clamp(36px,5vw,64px); margin:0 0 25px; }
.doctor-copy>p:not(.eyebrow) { font-family:var(--serif); font-size:clamp(19px,2.3vw,29px); margin-top:14px; max-width:900px; }
.doctor-copy>strong { display:block; margin-top:25px; color:var(--acid); font-family:var(--serif); font-size:34px; font-weight:500; }
.risk { padding:120px 0; background:var(--paper); }
.risk-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; }
.risk h2 em { font-style:normal; color:var(--violet); }
.risk-grid>div:first-child>p:not(.eyebrow) { margin-top:22px; color:#5e535b; max-width:590px; }
.firsts { padding:42px; border-left:1px solid #b7a58f; display:flex; flex-direction:column; }
.firsts>p { font-size:13px; margin-bottom:20px; }
.firsts span { font-family:var(--serif); font-size:clamp(22px,2.7vw,36px); line-height:1.5; }
.firsts strong { font-family:var(--serif); font-size:clamp(25px,3vw,40px); color:var(--violet); font-weight:500; margin-top:23px; }
.price-prototype { padding:120px 0; background:var(--night); color:white; }
.price-grid { display:grid; grid-template-columns:.8fr .8fr 1.2fr; margin-top:50px; }
.price-grid>div { padding:20px 45px 20px 0; margin-right:45px; border-right:1px solid rgba(255,255,255,.2); }
.price-grid>div:last-child { margin:0; padding:32px; background:var(--gold-light); color:var(--ink); border:0; }
.price-grid small { font-size:9px; letter-spacing:.15em; }
.price-grid strong { display:block; font-family:var(--serif); font-size:clamp(46px,5vw,70px); font-weight:500; margin:18px 0 0; color:var(--gold-light); }
.price-grid>div:last-child strong { color:var(--violet-deep); }
.price-grid span { font-size:11px; opacity:.6; }
.price-grid p { font-size:13px; color:rgba(255,255,255,.65); margin-top:24px; }
.price-grid>div:last-child p { color:#51444d; }
.price-grid h3 { font-size:28px; margin-top:-9px; }
.ticket-cost>p:first-of-type { font-family:var(--serif); font-size:19px; color:white; }
.returned h3 { text-transform:uppercase; letter-spacing:.06em; }
.after { padding:115px 0; background:#ded0ba; }
.after-grid { display:grid; grid-template-columns:1fr .8fr; gap:80px; align-items:center; }
.after h2 { font-size:clamp(38px,5vw,64px); }
.after-grid>div:first-child>p:not(.eyebrow) { margin-top:20px; color:#5c4f56; }
.member-offer { padding:38px; background:var(--white); border:1px solid rgba(23,18,24,.2); box-shadow:18px 18px 0 rgba(142,36,111,.12); }
.member-offer small,
.member-offer b,
.member-offer strong,
.member-offer span { display:block; }
.member-offer small { font-size:9px; letter-spacing:.14em; color:var(--violet); }
.member-offer b { font-family:var(--serif); font-size:27px; margin-top:18px; }
.member-offer strong { font-family:var(--serif); font-size:62px; color:var(--violet); font-weight:500; }
.member-offer strong em { font-family:var(--sans); font-size:15px; font-style:normal; }
.member-offer span { font-size:12px; color:#695c64; }
.member-offer p { border-top:1px solid var(--line); margin-top:22px; padding-top:18px; font-family:var(--serif); font-size:19px; }
.timeline { padding:120px 0; background:linear-gradient(rgba(17,11,16,.93),rgba(17,11,16,.97)),url("/site/assets/festival/festival-cover.webp") center/cover fixed; color:white; }
.timeline .section-heading { max-width:780px; }
.timeline ol { list-style:none; margin:70px 0 0; padding:0; position:relative; }
.timeline ol::before { content:""; position:absolute; left:205px; top:0; bottom:0; border-left:1px solid rgba(216,166,76,.5); }
.timeline li { display:grid; grid-template-columns:180px 1fr; gap:55px; padding:0 0 55px; position:relative; }
.timeline li::before { content:""; position:absolute; left:198px; top:4px; width:15px; height:15px; border-radius:50%; background:var(--night); border:2px solid var(--gold); }
.timeline time { font-size:10px; letter-spacing:.14em; color:var(--gold-light); text-align:right; }
.timeline h3 { font-size:clamp(25px,3vw,40px); }
.timeline li p { font-size:13px; color:rgba(255,255,255,.64); margin-top:7px; }
.timeline-question { padding-top:18px; }
.timeline-question div { padding:30px; border:1px solid rgba(216,166,76,.5); }
.timeline-question small { font-size:9px; letter-spacing:.18em; color:var(--gold-light); }
.place-opens { padding:115px 0; background:var(--paper); }
.open-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.open-grid article { padding:34px 30px; background:var(--white); border-top:4px solid var(--violet); }
.open-grid span { font-size:10px; letter-spacing:.15em; color:var(--violet); font-weight:600; }
.open-grid h3 { font-size:28px; margin:20px 0 13px; }
.open-grid p { font-size:13px; color:#665a62; }
.place-opens h2 { text-align:center; margin-top:70px; }
.place-opens h2 em { font-style:normal; color:var(--violet); }
.fit { display:grid; grid-template-columns:1fr 1fr; }
.fit-column { padding:80px max(5vw,calc((100vw - 1180px)/2)); min-height:620px; }
.fit-yes { background:#eadfcd; }
.fit-no { background:#24111f; color:white; }
.fit-column ul { list-style:none; padding:0; margin:36px 0 0; }
.fit-column li { font-family:var(--serif); font-size:clamp(19px,2vw,26px); padding:16px 0 16px 35px; border-bottom:1px solid rgba(23,18,24,.15); position:relative; }
.fit-column li::before { content:"+"; position:absolute; left:0; color:var(--violet); }
.fit-no li { border-color:rgba(255,255,255,.14); }
.fit-no li::before { content:"−"; color:var(--gold); }
.doctor-signoff { margin-top:35px; font-size:12px; color:#e4a8d1; border-left:2px solid var(--gold); padding-left:15px; }
.faq { padding:115px 0; background:var(--white); }
.faq-grid { display:grid; grid-template-columns:.65fr 1.35fr; gap:100px; }
.faq-list details { border-top:1px solid var(--line); padding:20px 0; }
.faq-list details:last-child { border-bottom:1px solid var(--line); }
.faq-list summary { font-family:var(--serif); font-size:23px; font-weight:500; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px; }
.faq-list summary::after { content:"+"; color:var(--violet); }
.faq-list details[open] summary::after { content:"−"; }
.faq-list details p { font-size:14px; color:#655961; max-width:720px; padding:16px 45px 0 0; }
.final-call { padding:120px 0; background:var(--night); color:white; position:relative; overflow:hidden; }
.final-art { position:absolute; inset:0 50% 0 0; opacity:.19; }
.final-art img { width:100%; height:100%; object-fit:cover; }
.final-call::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(17,11,16,.2),var(--night) 55%); pointer-events:none; }
.final-grid { display:grid; grid-template-columns:1fr .8fr; gap:90px; align-items:center; position:relative; z-index:1; }
.final-grid h2 { font-size:clamp(55px,7vw,95px); }
.final-grid>div>p:not(.eyebrow) { margin-top:20px; max-width:600px; color:rgba(255,255,255,.68); }
.final-event { margin-top:35px; padding-top:24px; border-top:1px solid rgba(255,255,255,.23); }
.final-event b,
.final-event span,
.final-event small { display:block; }
.final-event b { font-family:var(--serif); font-size:22px; color:var(--gold-light); }
.final-event span { font-size:13px; margin-top:4px; }
.final-event small { font-size:11px; color:rgba(255,255,255,.57); margin-top:8px; }
.booking-form { background:var(--white); color:var(--ink); padding:38px 42px; }
.form-head { margin-bottom:27px; }
.form-head span { float:right; background:#ead7e5; color:var(--violet-deep); border-radius:99px; padding:5px 10px; font-size:10px; font-weight:600; }
.form-head b,
.form-head small { display:block; }
.form-head b { font-family:var(--serif); font-size:30px; font-weight:500; }
.form-head small { font-size:11px; color:#776d75; }
.booking-form label:not(.check) { display:block; font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-top:17px; }
.booking-form input:not([type=checkbox]) { width:100%; display:block; border:0; border-bottom:1px solid #cfc4cb; background:transparent; padding:10px 2px; font-size:15px; color:var(--ink); border-radius:0; }
.booking-form input::placeholder { color:#a89ea5; }
.check { display:flex; align-items:flex-start; gap:10px; font-size:11px; color:#655b63; margin:22px 0; }
.check input { margin-top:4px; }
.submit-button { width:100%; min-height:58px; border:0; border-radius:99px; padding:10px 12px 10px 25px; background:var(--ink); color:white; font-weight:600; display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.submit-button:hover { background:var(--violet-deep); }
.submit-button i { background:white; color:var(--ink); }
.secure { text-align:center; font-size:9px; color:#8d838a; margin:10px 0 0; }
.form-message { text-align:center; font-size:12px; color:var(--violet); min-height:20px; margin-top:8px; }

/* ⚠️ CINQ RÈGLES DE COQUE RETIRÉES À LA MAIN LE 4 SEPTEMBRE, et le filtre
   automatique ne pouvait pas les voir : il compare des sélecteurs ENTIERS, or
   `.site-footer>p`, `.site-footer>div`, `.site-footer>div a`, `.footer-brand
   small` et `.brand-mark.light i` n'en sont pas — ce sont des descendants de
   la coque.
   Laissées là, elles auraient repeint le pied du SITE sur cette page : texte à
   11 px, liens à 10 px, et une bordure blanche sur la marque.

   La leçon : un filtre par égalité attrape les sélecteurs, pas leur FAMILLE. */
.mobile-book { display:none; }
.video-dialog { width:min(1040px,calc(100% - 30px)); padding:0; border:0; background:#080608; color:white; box-shadow:0 30px 100px rgba(0,0,0,.6); }
.video-dialog::backdrop { background:rgba(11,6,12,.9); backdrop-filter:blur(7px); }
.video-dialog .dialog-close { position:absolute; z-index:2; right:10px; top:10px; width:38px; height:38px; border:1px solid rgba(255,255,255,.5); border-radius:50%; background:rgba(8,6,8,.72); color:white; font-size:24px; cursor:pointer; }
.video-frame { aspect-ratio:16/9; }
.video-frame iframe { width:100%; height:100%; border:0; display:block; }
@media(max-width:1050px) {
  .prototype-item { grid-template-columns:80px 1fr 260px; gap:30px; }
  .proposition { grid-template-columns:1fr; }
  .price-grid>div { padding-right:25px; margin-right:25px; }
}
@media(max-width:820px) {
  :root { --site-header-height:64px; --festival-nav-height:46px; }
  .festival-nav { grid-template-columns:1fr auto; padding:0 18px; }
  .festival-nav>div { display:none; }
  .festival-nav-title span { display:none; }
  .hero { height:auto; max-height:none; min-height:0; grid-template-columns:1fr; }
  .hero-copy { order:2; padding:55px 24px 65px; }
  .hero-copy::after { display:none; }
  .hero-art { height:58vw; min-height:340px; order:1; }
  .hero-art img { object-position:center; }
  .anti-grid,
  .risk-grid,
  .after-grid,
  .faq-grid,
  .final-grid { grid-template-columns:1fr; }
  .anti-grid,
  .risk-grid,
  .after-grid,
  .faq-grid,
  .final-grid { gap:45px; }
  .proposition { padding:40px; }
  .prototype-item { grid-template-columns:70px 1fr; min-height:0; padding-block:65px; }
  .prototype-symbol { grid-column:2; min-height:250px; }
  .price-grid { grid-template-columns:1fr; }
  .price-grid>div { border-right:0; border-bottom:1px solid rgba(255,255,255,.2); margin:0 0 25px; padding:20px 0 35px; }
  .open-grid { grid-template-columns:1fr; }
  .fit { grid-template-columns:1fr; }
  .fit-column { min-height:0; }
  .final-art { inset:0; opacity:.1; }
}
@media(max-width:600px) {
  :root { --site-header-height:58px; --festival-nav-height:44px; }
  body { padding-bottom:72px; }
  .festival-nav { top:var(--site-header-height); padding:0 14px; }
  .festival-nav-title b { font-size:11px; }
  .festival-nav-cta { font-size:9px; }
  .hero-art { height:70vw; min-height:270px; }
  .hero-copy { padding:44px 18px 58px; text-align:center; }
  .hero-date { margin-bottom:19px; }
  .hero h1 { font-size:37px; }
  .hero-lead { font-size:18px; }
  .hero-price { display:grid; grid-template-columns:auto 1fr; gap:16px; text-align:left; }
  .hero-price strong { font-size:32px; }
  .button { padding-left:19px; }
  .anti-festival,
  .prototypes,
  .risk,
  .price-prototype,
  .after,
  .timeline,
  .place-opens,
  .faq,
  .final-call { padding-block:75px; }
  .anti-grid h2,
  .section-heading h2,
  .risk h2,
  .after h2,
  .faq h2 { font-size:37px; }
  .old-formula { padding-left:23px; font-size:20px; }
  .proposition { margin-top:55px; margin-inline:-15px; padding:30px 22px; }
  .proposition h3 { font-size:28px; }
  .section-heading { margin-bottom:40px; }
  .prototype-item { display:block; padding:55px 20px; }
  .prototype-index { width:72px; margin-bottom:35px; }
  .prototype-copy h3 { font-size:34px; }
  .prototype-copy>p:not(.eyebrow) { font-size:14px; }
  .prototype-punch { font-size:19px!important; }
  .prototype-symbol { min-height:220px; margin-top:30px; }
  .motor-symbol b { font-size:78px; }
  .phone-symbol>div { transform:scale(.8); margin-block:-28px; }
  .doctor { grid-template-columns:38px 1fr; }
  .doctor-copy { padding:65px 23px; }
  .doctor blockquote { font-size:38px; }
  .doctor-copy>p:not(.eyebrow) { font-size:20px; }
  .risk-grid { gap:38px; }
  .firsts { padding:25px 0 0 24px; }
  .price-grid { margin-top:30px; }
  .price-grid>div:last-child { padding:28px; }
  .member-offer { padding:28px; }
  .timeline ol::before { left:7px; }
  .timeline li { grid-template-columns:1fr; gap:10px; padding:0 0 42px 34px; }
  .timeline li::before { left:0; }
  .timeline time { text-align:left; }
  .timeline-question div { padding:23px; }
  .open-grid article { padding:27px 24px; }
  .place-opens h2 { margin-top:48px; font-size:36px; }
  .fit-column { padding:62px 22px; }
  .fit-column li { font-size:19px; }
  .faq-grid { gap:25px; }
  .faq-list summary { font-size:19px; }
  .final-grid h2 { font-size:57px; }
  .booking-form { margin-inline:-15px; padding:30px 22px; }
  .mobile-book { position:fixed; z-index:400; left:10px; right:10px; bottom:9px; min-height:58px; border-radius:99px; background:var(--gold-light); color:var(--ink); text-decoration:none; display:flex; align-items:center; justify-content:space-between; padding:8px 10px 8px 22px; box-shadow:0 10px 35px rgba(21,9,20,.32); }
  .mobile-book span small,
  .mobile-book span b { display:block; }
  .mobile-book span small { font-size:8px; text-transform:uppercase; letter-spacing:.09em; }
  .mobile-book span b { font-size:13px; }
  .mobile-book>i { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:white; font-style:normal; }
  .video-dialog { width:100%; }
}
.hero-art::before { content:""; position:absolute; inset:-25px; background:url("/site/assets/festival/festival-cover.webp") center/cover; filter:blur(22px) brightness(.55); transform:scale(1.08); }
.hero-art img { object-fit:contain; position:relative; z-index:1; }
.hero-art::after { z-index:2; }
.hero-art figcaption { z-index:3; }
@media(max-width:820px) {
  .hero-art { height:56.25vw; min-height:0; }
}
@media(max-width:600px) {
  .hero-price { display:none; }
}
.cover-play { position:absolute; z-index:4; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.7); border-radius:999px; background:rgba(15,9,14,.48); color:white; display:grid; grid-template-columns:62px auto; grid-template-rows:1fr 1fr; column-gap:15px; align-items:center; padding:12px 22px 12px 12px; cursor:pointer; backdrop-filter:blur(8px); box-shadow:0 12px 45px rgba(0,0,0,.28); }
.cover-play>span { grid-row:1/3; width:62px; height:62px; border-radius:50%; display:grid; place-items:center; padding-left:4px; background:rgba(255,255,255,.9); color:var(--violet-deep); font-size:15px; }
.cover-play b { align-self:end; white-space:nowrap; font-size:12px; }
.cover-play small { align-self:start; text-align:left; color:rgba(255,255,255,.72); font-size:10px; }
.cover-play:hover { background:rgba(142,36,111,.72); }
.old-formula>b { font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--violet); }
.old-formula ul { margin:14px 0 12px; padding-left:26px; }
.old-formula li { padding:2px 0; color:#574b53; }
.old-formula strong { line-height:1.35; }
.motor-symbol { grid-template-columns:1fr minmax(180px,1.8fr) 1fr; gap:9px; }
@keyframes motor-circulation {to{offset-distance:100%}}
.doctor { grid-template-columns:minmax(320px,38vw) 1fr; }
.doctor-portrait { margin:0; position:relative; min-height:620px; background:#0a090a; overflow:hidden; }
.doctor-portrait::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 45%,#0a090a 100%); }
.doctor-portrait img { width:100%; height:100%; object-fit:cover; object-position:center; filter:contrast(1.04); }
.doctor-portrait figcaption { position:absolute; z-index:2; left:28px; bottom:25px; font-size:9px; letter-spacing:.15em; color:var(--acid); }
.doctor-copy { padding-inline:clamp(45px,7vw,115px); }
.doctor-evening { display:block; max-width:720px; margin-top:34px; padding-top:20px; border-top:1px solid rgba(229,255,110,.32); font-family:var(--sans); font-size:11px; line-height:1.6; color:rgba(255,255,255,.62); }
.ten-worlds { grid-column:1/-1; margin-top:30px; padding:35px 38px; background:var(--night); color:white; display:grid; grid-template-columns:1fr 1.4fr; gap:45px; align-items:center; }
.ten-worlds small { font-size:9px; letter-spacing:.15em; color:var(--gold-light); }
.ten-worlds h3 { font-size:27px; margin:10px 0; }
.ten-worlds p { font-size:12px; color:rgba(255,255,255,.65); }
.ten-worlds ol { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(10,1fr); position:relative; }
.ten-worlds ol::before { content:""; position:absolute; left:4%; right:4%; top:50%; border-top:1px solid rgba(255,255,255,.2); }
.ten-worlds li { position:relative; z-index:1; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; margin:auto; background:#30232e; border:1px solid rgba(255,255,255,.25); font-family:var(--serif); font-size:12px; color:rgba(255,255,255,.55); }
.ten-worlds li.open { background:var(--gold-light); color:var(--ink); border-color:var(--gold-light); }
.doctor-signoff { display:flex; align-items:center; gap:16px; padding-left:0; border-left:0; }
.doctor-signoff img { width:78px; height:78px; border-radius:50%; object-fit:cover; object-position:center; border:2px solid var(--gold); flex:none; }
.doctor-signoff p { font-size:11px; color:#e4a8d1; }
@media(max-width:820px) {
  .doctor { grid-template-columns:1fr; }
  .doctor-portrait { min-height:430px; }
  .doctor-portrait::after { background:linear-gradient(0deg,#0a090a,transparent 45%); }
  .ten-worlds { grid-template-columns:1fr; }
  .ten-worlds ol { grid-template-columns:repeat(10,1fr); }
}
@media(max-width:600px) {
  .cover-play { grid-template-columns:50px auto; padding:9px 16px 9px 9px; }
  .cover-play>span { width:50px; height:50px; }
  .cover-play b { font-size:10px; }
  .doctor-portrait { min-height:360px; }
  .doctor-copy { padding-inline:23px; }
  .ten-worlds { margin-inline:-15px; padding:28px 22px; }
  .ten-worlds ol { grid-template-columns:repeat(5,1fr); gap:13px 0; }
  .ten-worlds ol::before { display:none; }
  .motor-symbol { display:grid; grid-template-columns:1fr 2fr 1fr; transform:scale(.92); margin-inline:-12px; }
}
/* App extracts used in the three prototype cards */
.motor-symbol { display:block; min-height:0; }
.festival-motor { display:block; width:min(100%,430px); height:auto; margin:auto; border-radius:18px; box-shadow:0 22px 55px rgba(26,15,23,.18); }
.accomplishment-preview { min-height:340px; overflow:hidden; border:1px solid rgba(255,255,255,.13); border-radius:22px; background:radial-gradient(circle at 66% 50%,rgba(191,49,156,.28),transparent 31%),linear-gradient(145deg,#2c202b,#130e13); box-shadow:0 28px 65px rgba(0,0,0,.28); }
.app-preview-label { position:absolute; left:25px; top:25px; z-index:2; }
.app-preview-label small,
.app-preview-label b,
.app-preview-label span { display:block; }
.app-preview-label small { color:#d8a64c; font-size:8px; letter-spacing:.15em; }
.app-preview-label b { margin-top:6px; font-family:var(--serif); font-size:19px; }
.app-preview-label span { margin-top:3px; color:rgba(255,255,255,.56); font-size:9px; }
.constellation { width:225px; height:225px; position:absolute; right:24px; bottom:8px; border:1px solid #d9b441; border-radius:50%; animation:constellation-turn 30s linear infinite; }
.constellation::before,
.constellation::after { content:""; position:absolute; inset:24px; border:1px solid #925984; border-radius:50%; }
.constellation::after { inset:57px; border-color:#d9b441; }
.constellation span { position:absolute; inset:83px; display:grid; place-items:center; border-radius:50%; background:#fff5ce; color:#9f087f; font-size:31px; box-shadow:0 0 35px rgba(211,167,47,.53); }
.constellation i { width:14px; height:14px; position:absolute; border-radius:50%; background:#fff5ce; border:3px solid #d7ad32; }
.constellation i:nth-child(1) { top:-7px; left:105px; }
.constellation i:nth-child(2) { right:8px; top:60px; }
.constellation i:nth-child(3) { right:35px; bottom:17px; }
.constellation i:nth-child(4) { left:22px; bottom:29px; }
.constellation i:nth-child(5) { left:2px; top:66px; }
@keyframes constellation-turn {to{transform:rotate(360deg)}}
.omega-app-preview { display:block; min-height:0; overflow:hidden; border:1px solid rgba(255,255,255,.3); border-radius:20px; background:#fffdfa; color:#211921; text-align:left; box-shadow:0 28px 65px rgba(33,12,29,.3); }
.omega-app-bar { height:44px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; background:#211921; color:#fff; font-size:8px; letter-spacing:.08em; }
.omega-app-bar span { color:#d99aca; }
.omega-app-body { padding:23px 25px 19px; }
.omega-app-body small { display:block; color:#9f167d; font-size:7px; font-weight:700; letter-spacing:.13em; }
.omega-app-body>strong { display:block; margin-top:5px; font:700 41px/1 var(--serif); color:#7b195f; }
.omega-app-body>strong i { font-style:normal; color:#aa3b8b; }
.omega-app-body>span { font-size:9px; color:#766a72; }
.omega-app-body hr { border:0; border-top:1px solid #e0d6dc; margin:17px 0; }
.omega-app-body>b { display:block; margin-top:6px; font:700 30px/1 var(--serif); }
.omega-app-body p { margin:5px 0 10px; font-size:8px; color:#776d74; }
.omega-progress { height:5px; border-radius:9px; background:#e9dfe6; overflow:hidden; }
.omega-progress i { display:block; width:68%; height:100%; background:linear-gradient(90deg,#8e246f,#d1a13f); }
.omega-app-body em { display:block; margin-top:12px; padding:8px 10px; border-radius:8px; background:#f2e8ef; color:#7b195f; font-size:7px; font-style:normal; font-weight:600; }
.omega-app-preview footer { padding:11px 18px; background:#f0e9df; color:#635861; font-size:7px; line-height:1.4; }
.ticket-return { margin:10px 10px 0; text-align:center; color:#6f626b; font-size:10px; line-height:1.45; }
.shadow-art { position:relative; isolation:isolate; background:#100b0f url("/site/assets/festival/festival-shadow.webp") 65% center/cover no-repeat; }
.shadow-art::before { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(8,5,8,.92) 0%,rgba(13,7,11,.86) 42%,rgba(18,9,15,.48) 67%,rgba(8,5,8,.08) 100%); }
.shadow-art>* { position:relative; z-index:1; }
.shadow-reveal { min-height:360px; }
@media(max-width:1050px) {
  .festival-motor { width:min(100%,390px); }
  .accomplishment-preview { min-height:310px; }
  .constellation { width:205px; height:205px; }
  .constellation span { inset:75px; }
  .constellation i:nth-child(1) { left:95px; }
}
@media(max-width:820px) {
  .festival-motor { width:min(100%,520px); }
  .accomplishment-preview,
  .omega-app-preview { width:min(100%,430px); margin-inline:auto; }
  .accomplishment-preview { min-height:340px; }
}
@media(max-width:600px) {
  .festival-motor { width:100%; border-radius:14px; }
  .accomplishment-preview { min-height:300px; }
  .app-preview-label { left:20px; top:20px; }
  .constellation { width:205px; height:205px; right:12px; }
  .omega-app-preview { max-width:360px; }
  .ticket-return { font-size:9px; }
  .shadow-art { background-position:center; }
  .shadow-art::before { background:linear-gradient(180deg,rgba(8,5,8,.75) 0%,rgba(10,6,9,.88) 68%,rgba(8,5,8,.72) 100%); }
  .shadow-reveal { min-height:240px; margin-top:8px; }
}

/* ── TROIS RÈGLES QUI NE VIENNENT PAS DE LA MAQUETTE ──────────────────────────
   Elles habillent ce que la maquette ne pouvait pas connaître : un événement
   complet, une billetterie fermée, des erreurs de validation, et le
   rattachement d'un billet déjà acheté. Elles reprennent les valeurs de ses
   voisines (`.booking-form`, `.form-message`, `.ticket-return`) plutôt que d'en
   inventer : une page ne doit pas avoir deux grammaires. */

/* Un événement complet ou fermé garde la même carte blanche que le formulaire —
   ce n'est pas un message d'erreur, c'est un état de la billetterie. */
.booking-closed { align-self: start; }
.booking-closed .form-head { margin-bottom: 14px; }
.booking-closed .ticket-return { margin-top: 0; font-size: 12px; }

/* L'erreur de validation reprend `.form-message`, que la maquette réservait au
   message du faux paiement : même balise, même place, et elle cesse d'être un
   décor vide. Seule la couleur change — le violet du site dirait « information »
   là où il faut dire « il manque quelque chose ». */
.form-message--erreur { color: #a3243f; font-weight: 600; text-align: left; }

/* Le rattachement d'un billet déjà acheté : plus discret que `.ticket-return`,
   il s'adresse à quelqu'un qui n'a rien à acheter. */
.already-ticket { margin: 14px 0 0; text-align: center; font-size: 10px; line-height: 1.5; color: #8d838a; }
.already-ticket a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }

/* ══ APRÈS LE PREMIER REGARD ══════════════════════════════════════════════════

   Tout ce qui précède est l'extraction de la maquette. Ce qui suit vient de la
   page RENDUE, publiée en préprod le 4 septembre, et des remarques de Boris.
   Le bloc est séparé exprès : on doit pouvoir lire d'un côté ce que Codex a
   dessiné, de l'autre ce que l'écran a corrigé.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── 0. UNE RÉGRESSION QUE J'AVAIS INTRODUITE ────────────────────────────────
   Mon extraction écartait les règles `html` avec le reste de la coque. Or la
   maquette en posait UNE qui n'est pas de la coque : le décalage des ancres.
   Vérifié sur la page publiée — `scroll-padding-top: auto`, et un saut vers
   `#prix` atterrissait SOUS les deux barres collantes, 126 px de contenu
   masqués. Les cinq liens de la sous-navigation étaient donc tous fautifs.

   ⚠️ La leçon : « les règles de base sont à la coque » est vrai pour `body`,
   faux pour tout ce que `html` porte. Un filtre par NOM DE BALISE ne distingue
   pas une remise à zéro d'un réglage de page. */
html { scroll-padding-top: calc(var(--site-header-height) + var(--festival-nav-height) + 20px); }

/* ── 1. LA SOUS-NAVIGATION : TROP PETITE SUR GRAND ÉCRAN (Boris) ─────────────
   Mesuré sur la page publiée : liens et CTA à 10 px, date à 9 px. La barre du
   SITE, juste au-dessus, pose ses liens à 11 px et son bouton à 13 px — la
   sous-navigation était donc plus petite que sa mère, ce qui se lit comme un
   défaut avant de se lire comme une hiérarchie.

   ⚠️ L'augmentation est bornée à ≥ 821 px : en dessous, la barre se réduit
   déjà (la date disparaît, les liens aussi) et grossir n'y sert à rien. */
@media (min-width: 821px) {
  .festival-nav-title span { font-size: 10px; }
  .festival-nav-title b { font-size: 15px; }
  .festival-nav > div { gap: 32px; }
  .festival-nav > div a { font-size: 12px; }
  .festival-nav-cta { font-size: 12px; }
}

/* ── 2. TOUT LE CONTENU DANS LA COLONNE DU SITE (Boris) ──────────────────────
   Mesuré à 1000 px avant correction, en prenant `.anti-festival` (déjà juste)
   comme repère : quatre familles ne s'alignaient pas.

       .hero            contenu à   0   (repère 20)   →  −20
       .doctor          contenu à   0                 →  −20
       .fit             contenu à   0                 →  −20
       .prototype-item  contenu à  50                 →  +30
       .section-heading contenu à  68                 →  +48

   ⚠️ LES FONDS RESTENT PLEINE LARGEUR, ET C'EST LA RÈGLE DU SITE, pas une
   exception : `.site-header` fait déjà exactement cela — la bande occupe tout,
   son contenu s'arrête à la colonne. Ce sont les CONTENUS qu'on rentre, pas les
   bandes.

   Une seule expression, quatre consommateurs — et `100 %` s'y résout contre
   l'élément qui l'emploie, tous étant pleine largeur. */
.hero,
.doctor,
.fit,
.prototype-item {
  --gouttiere-page: max(var(--site-gouttiere, 20px), calc((100% - var(--site-largeur, 1180px)) / 2));
}
.hero { padding-inline: var(--gouttiere-page); }
/* La colonne de texte n'a plus besoin de sa propre gouttière à gauche : la page
   la lui donne. Elle garde un espace à DROITE, contre l'image. */
.hero-copy { padding-inline: 0 clamp(26px, 3vw, 58px); }
.doctor { padding-inline: var(--gouttiere-page); }
.doctor-copy { padding-inline: clamp(26px, 3vw, 58px) 0; max-width: none; }
.prototype-item { padding-inline: var(--gouttiere-page); }
/* ⚠️ `.section-heading` était CENTRÉE, pas décalée : `max-width: 850px` sur un
   `.shell` de 945 plus le `margin: 0 auto` du shell la ramenaient au milieu.

   ⚠️ ET LE PREMIER REMÈDE ÉTAIT FAUX : `margin-inline: 0 auto` retirait le
   centrage DU SHELL et collait le titre au bord de la fenêtre — mesuré à
   −202 px du repère. C'est la LARGEUR qu'il fallait rendre au shell, et borner
   le texte à l'intérieur. */
.section-heading { max-width: none; }
.section-heading > * { max-width: 850px; }

/* ── 3. « CE FESTIVAL EST POUR VOUS SI… » : LE CREUX CENTRAL (Boris) ─────────
   La maquette donne à CHAQUE colonne la gouttière de PAGE sur ses DEUX bords —
   y compris le bord intérieur. La gouttière se double donc au centre, et l'écart
   grandit avec l'écran. Mesuré à 1600 px :

       gouttière par bord   210 px
       texte par colonne    373 px
       creux central        420 px de vide

   À 1920 px cela donnerait 370 px de gouttière pour 220 px de texte. Le bloc ne
   se dégradait pas : il se vidait.

   ⚠️ LE DÉGRADÉ REMPLACE LES DEUX FONDS, et c'est ce qui permet de garder les
   deux moitiés colorées PLEINE LARGEUR tout en rentrant le texte dans la
   colonne. La bascule est à 50 %, l'espacement l'enjambe symétriquement : aucun
   texte ne passe de l'autre côté. */
.fit {
  padding-inline: var(--gouttiere-page);
  gap: clamp(34px, 4vw, 70px);
  background: linear-gradient(90deg, #eadfcd 0 50%, #24111f 50%);
}
.fit-column { padding-inline: 0; }
.fit-yes,
.fit-no { background: none; }

/* ── 4. LA COUVERTURE ENTRE 821 ET 1200 px (Boris) ───────────────────────────
   Signalée sur une résolution intermédiaire. Mesuré à 1000 px : la colonne de
   texte du hero faisait 281 px pour un titre en `clamp(42px, 4.7vw, 69px)` —
   « Cesser d'attendre la prochaine civilisation » tombait sur SIX lignes de un
   à deux mots, et la date se coupait entre « Paris » et « 18e ».

   La cause est le 46 / 54 de la maquette, dessiné pour ≥ 1400 px où 46 % vaut
   640 px. Le passage à une colonne n'arrive qu'à 820 px : entre les deux, la
   proportion tenait la place d'une largeur qu'elle n'avait plus.

   ⚠️ ON INVERSE LA PROPORTION PLUTÔT QUE DE RÉDUIRE LE TITRE. Rapetisser
   aurait sauvé le retour à la ligne en abîmant la promesse — c'est le premier
   écran de la page.

   ⚠️ CE PARAGRAPHE A VIEILLI LE JOUR MÊME, ET LA RÈGLE AVEC. L'inversion était
   un remède à un symptôme : la vraie cause était `.hero-copy` bridée à 62 %
   par la feuille du site (§5). Une fois celle-ci levée, la colonne de texte a
   retrouvé sa largeur, et la proportion est revenue à 46/54 — voir la règle
   elle-même. On garde le paragraphe : il dit comment on a cherché. */
@media (min-width: 821px) and (max-width: 1200px) {
  /* ⚠️ 46/54 DEPUIS QUE LA COVER PORTRAIT EXISTE (Codex `06703bb`). J'avais mis
     56/44 pour sauver le titre, quand la seule image disponible était en 1,78 et
     que la colonne d'image ne servait qu'à porter un flou. Mesuré depuis : sur
     toute cette bande le cadre reste PORTRAIT — 0,57 à 830 px, 0,84 à 1190 —
     donc c'est bien l'image portrait qui y sert, et elle mérite la place.

     ⚠️ ET L'ÉLARGISSEMENT NE COÛTE RIEN AU TITRE, mesuré aux deux bouts : 5
     lignes en 46/54 comme en 54/46. Les six lignes de un à deux mots du départ
     venaient de `.hero-copy` bridée à 62 % par la feuille du site, pas de la
     proportion. La corriger a rendu la marge que le titre demandait. */
  .hero { grid-template-columns: 46% 54%; }
  /* La taille du titre est posée par le §6, à ≥ 821 px et donc plus tard dans
     la feuille : une valeur ici serait morte. Elle y était, elle en part. */
  .hero-date { margin-bottom: 20px; }
}

/* ── 5. ⚠️ DEUX PROPRIÉTÉS QUE LE SITE IMPOSAIT SANS QUE RIEN NE L'ÉCRASE ────

   C'est la VRAIE cause du §4, et elle m'avait échappé. Mon plan disait que les
   noms partagés entre le site et la maquette seraient « comparés déclaration
   par déclaration ». Je l'ai fait pour `.dialog-close`, et je me suis contenté
   de constater que les autres étaient déclarés DES DEUX CÔTÉS.

   ⚠️ OR UNE COLLISION NE SE RÈGLE PAS AU NOM, ELLE SE RÈGLE PROPRIÉTÉ PAR
   PROPRIÉTÉ. Une propriété que le site déclare et que la maquette ne déclare
   PAS traverse : rien ne l'écrase, et elle gouverne.

   Le balayage — pour chaque sélecteur commun, les propriétés du site absentes
   de la feuille du Festival — en a trouvé cinq :

       .button      ← background, border, color, cursor, transition
       .hero-copy   ← width
       body         ← background, color, font-family, line-height, margin…
       h1, h3       ← font-size

   `body` est VOULUE : c'est l'arbitrage de palette du 4 septembre, le site donne
   le fond et l'encre. `h1` et `h3` sont sans effet — chaque contexte du Festival
   pose sa propre taille (mesuré : 27, 28, 30 et 42 px, aucune valeur du site).
   `.button` ne laissait passer qu'une bordure de 1 px, `.button-gold` couvrant
   le reste. Restait `.hero-copy`.

   ⚠️ ET CELLE-LÀ EXPLIQUAIT TOUT. Le site pose `.hero-copy { width: min(720px,
   62%) }` pour SON accueil ; la maquette, elle, n'en pose aucune — son hero est
   une grille, la colonne suffit. La règle du site s'appliquait donc au Festival :
   62 % de 529 = 328 px, exactement la colonne mesurée. Le titre sur six lignes
   n'était pas un défaut de proportion, c'était un mot du site prononcé dans une
   page qui ne le lui avait pas demandé.

   Le §4 corrige la proportion pour les largeurs intermédiaires ; celui-ci
   corrige la cause. Les deux se vérifient séparément. */
.hero-copy { width: auto; }
.button { border: 0; }

/* ── 6. LE BLOC DU DOCTEUR, ET LES GRANDS TITRES (Boris, second regard) ──────

   ⚠️ LE PREMIER POINT EST UNE CONSÉQUENCE DU §2, ET C'EST MOI QUI L'AI CAUSÉ.
   La feuille pose `.doctor { grid-template-columns: minmax(320px, 38vw) 1fr }`.
   `38vw` se mesure sur LA FENÊTRE. Tant que le bloc était pleine largeur, cela
   faisait bien 38 % de ce qu'on voyait ; rentré dans la colonne, le portrait a
   gardé ses 38 vw dans un conteneur plus étroit — soit 45 % de lui. Mesuré à
   1400 px :

       portrait   532 px   (38 vw, dans un conteneur de 1180)
       texte      648 px
       hauteur  1 344 px

   Le texte, serré dans 648 px avec une citation à 64 px et des paragraphes à
   29, tombait sur assez de lignes pour étirer le bloc — et le portrait, étiré
   avec lui, atteignait 1 344 px de haut.

   ⚠️ LA LEÇON EST LA MÊME QU'AU §3 : une mesure en `vw` cesse d'être juste dès
   que son bloc entre dans un conteneur. Une proportion se dit en `%` de ce qui
   la contient, pas en fraction de la fenêtre.

   Après : portrait 401 px (34 %), texte 779 px, hauteur 805 px — 40 % de moins.

   ── Les grands titres ───────────────────────────────────────────────────────

   Boris demande de réduire « tous les h1 », sur cette page seulement.

   ⚠️ SUR CETTE PAGE, LES GRANDS TITRES SONT SURTOUT DES `h2`. Mesuré : le `h1`
   du hero à 65,8 px, et les `h2` — « Ce que ce festival n'est pas », « Non pas
   des promesses », « Les questions qui restent »… — à 66 px. Les h2 étaient
   donc PLUS GROS que le h1 : une hiérarchie inversée. Réduire le seul h1
   n'aurait presque rien changé à l'écran, et aurait creusé l'inversion.

   Les deux baissent donc ensemble. Le h1 arrive à 57,4 px, c'est-à-dire
   exactement la valeur des h1 du reste du site : la page cesse au passage de
   crier plus fort que ses voisines.

   ⚠️ ET TOUT CE BLOC EST BORNÉ À ≥ 821 px, ce qui n'est pas un détail : la
   feuille de Codex pose des valeurs EXPLICITES pour le téléphone (`.hero h1`
   à 37 px, `.doctor` en une colonne). Une règle ajoutée en fin de fichier sans
   borne les aurait toutes écrasées en silence — essayé, mesuré : le portrait
   passait à 280 px sur un écran de 376. */
@media (min-width: 821px) {
  .doctor { grid-template-columns: minmax(280px, 34%) 1fr; }
  .doctor blockquote { font-size: clamp(32px, 3.5vw, 50px); }
  .doctor-copy > p:not(.eyebrow) { font-size: clamp(17px, 1.6vw, 23px); }
  .doctor-copy > strong { font-size: 28px; }
  .hero h1 { font-size: clamp(38px, 4.1vw, 58px); }
  h2 { font-size: clamp(33px, 4.2vw, 56px); }
}

/* ── 7. LA COVER PORTRAIT (Codex `06703bb`, demandée le 4 septembre) ─────────

   ⚠️ DEUX COMPOSITIONS, PAS DEUX TAILLES. L'emplacement change de FORME avec la
   fenêtre — portrait de 821 à 1920 px (0,57 → 0,84), paysage en dessous, quand
   le hero passe en une colonne. L'image d'origine, en 1,78, n'occupait que 44 %
   de son cadre sur le bureau ; le reste était le flou de `::before`.

   ⚠️ ET AUCUN RÉ-ENCODAGE N'AURAIT PU CORRIGER CELA. C'était l'issue que Boris
   envisageait, et elle ne pouvait pas marcher : un fichier repassé dans
   l'encodeur garde son CADRAGE. Deux contournements ont été essayés et écartés
   à l'écran — `object-fit: cover` remplit le cadre mais supprime la silhouette
   (au point de rendre l'`alt` faux), et l'image en fond du hero entier s'écarte
   du hero deux colonnes de Codex. Il a donc composé la version portrait.

   Le choix se fait dans le DOCUMENT, par `<picture>` : le navigateur ne
   télécharge que la source qui correspond. Le faire en CSS aurait chargé les
   deux — `display: none` n'empêche pas un téléchargement.

   `display: contents` sur le `<picture>` : sans lui, cet élément `inline`
   s'interposerait entre `.hero-art` et son `img`, et les règles de dimension de
   Codex (`width: 100%`, `height: 100%`) ne trouveraient plus leur cadre. */
.hero-art picture { display: contents; }