:root{
    --paper:#f3efe7; --paper-2:#ece5d9; --ink:#16130e; --ink-soft:#6d6456;
    --grad:linear-gradient(115deg,#F7C42B 0%,#F0972A 52%,#E3611A 100%);
    /* accent braise UNIQUE de la planche DA (da-board) : ponctuation, jamais remplir.
       Il était tout simplement absent du héros, remplacé par un dégradé 3 couleurs. */
    --ember:#D1451F;
    /* braise LISIBLE : la braise de marque plafonne a 4:1 sur papier et 4,04:1 sur
       encre, sous le seuil AA de 4,5 pour du texte. Ces deux variantes ne servent QUE
       quand la braise porte des mots. */
    --ember-texte:#BD3B18;   /* 4,82:1 sur papier */
    --ember-clair:#EF6335;   /* 5,74:1 sur encre  */
    --line:rgba(22,19,14,.14);
    --serif:"Clash Display",sans-serif; --grotesk:"Clash Display",sans-serif; --sans:"Supreme",system-ui,sans-serif;
    --ease:cubic-bezier(.16,1,.3,1);
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --nav-h:64px; --pad:clamp(16px,2.6vw,40px); --radius:34px;
    --gut:clamp(30px,3.1vw,50px);   /* gouttière intérieure des tranches */
    /* décalage horizontal induit par skewX(-8deg) au BAS du panneau = (h/2)*tan(8deg).
       Dépend de la hauteur du viewport : le coder en dur collapsait la marge de la
       tranche 01 (15px seulement en 1300px de haut). tan(8deg)=0.1405. */
    --skew-off:calc((50vh - var(--pad) / 2) * 0.1405);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  .grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.06;mix-blend-mode:multiply;background-image:var(--grain);background-size:200px}

  /* révélation orchestrée */
  .rv{opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  body.ready .rv{opacity:1;transform:none}
  body.ready .d1{transition-delay:.5s} body.ready .d2{transition-delay:.62s}
  body.ready .d3{transition-delay:.74s} body.ready .d4{transition-delay:.86s}

  /* ── NAV ── */
  /* le logo s'aligne sur la gouttière du panneau (--pad + --gut) : logo, titre et
     contenu des tranches partagent la même colonne de gauche */
  .nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:50;display:flex;align-items:center;
    justify-content:space-between;padding:0 calc(var(--pad) + var(--gut))}
  .brand{font-family:var(--grotesk);font-weight:700;font-size:17px;letter-spacing:.14em;text-transform:uppercase;color:#f4efe6;text-shadow:0 1px 12px rgba(0,0,0,.5)}
  .brand b{color:var(--ember-clair)}
  .nav-links{display:flex;gap:30px}
  .nav-links a{font-family:var(--grotesk);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,239,230,.74);text-shadow:0 1px 10px rgba(0,0,0,.5);transition:color .3s}
  .nav-links a:hover{color:#fff}
  .nav-right{display:flex;align-items:center;gap:16px}
  .lang{font-family:var(--grotesk);font-size:11px;letter-spacing:.1em;color:rgba(244,239,230,.66);text-shadow:0 1px 10px rgba(0,0,0,.5)}
  .lang b{color:#fff}
  /* CTA de nav = MÊME motif que les CTA des briques (pilule contour). Sur média sombre,
     contour papier + flèche braise : strictement le même bouton. Un seul langage. */
  .nav-cta{display:inline-flex;align-items:center;gap:12px;
    font-family:var(--grotesk);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
    color:#f4efe6;background:none;border:1px solid rgba(244,239,230,.45);border-radius:40px;padding:9px 18px;
    white-space:nowrap;transition:border-color .35s var(--ease),background .35s var(--ease)}
  .nav-cta .go{display:grid;place-items:center;font-size:15px;color:var(--ember);
    transition:transform .4s var(--ease)}
  .nav-cta:hover{border-color:var(--ember);background:rgba(209,69,31,.14)}
  .nav-cta:hover .go{transform:translateX(4px)}

  /* ── STAGE + PANNEAU (plein cadre) ── */
  /* le héros = une section de 100vh (plus un écran figé) : la page défile sous la nav */
  .stage{position:relative;height:100vh;padding:0 0 var(--pad)}
  /* clip (repli hidden) : l'oblique déborde par design, mais le panneau ne doit
     jamais devenir scrollable (un focus hors-champ décalerait tout le héros) */
  /* coins « à la Apple » = superellipse (courbure continue), pas un arc de cercle.
     Sans corner-shape le rayon reste un arc classique : dégradation propre. */
  /* silhouette sur mesure : pleine largeur en haut (le média passe DERRIÈRE la navbar,
     ce qui donne enfin de la matière au flou progressif) puis resserrement organique
     jusqu'à la largeur de cadre à 20% de la hauteur. Tracée par buildShape() au resize.
     Plus de border-radius/corner-shape : le clip-path porte toute la silhouette. */
  .panel{position:relative;width:100%;height:100%;overflow:hidden;overflow:clip;background:var(--ink);
    opacity:0;transform:scale(.985);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
  body.ready .panel{opacity:1;transform:none}

  /* ── FLOU PROGRESSIF : MATIÈRE DE LA BARRE DE NAV (composant de SITE) ──
     Sur les autres pages le contenu défilera dessous : c'est sa vraie raison d'être.
     Ici il floute le motif ballon du papier sous la nav.
     ⚠️ DOIT ÊTRE ENFANT DIRECT DU BODY, sans ancêtre `overflow:clip` + `corner-shape` :
     cette combinaison fait IGNORER le mask-image des backdrop-filter descendants
     (Chrome 150, mesuré) et le flou redevient un aplat uniforme au lieu d'une rampe.
     Voile PAPIER (thème clair) : un voile sombre rendrait la nav en encre illisible.
     Rayons pour un cumul LINÉAIRE 0->20px (σ_total=√Σσ², donc b_k=(20/N)·√(2k−1)). */
  /* Deux voiles superposés qui se croisent selon --voile (1 = le héros occupe la
     bande, 0 = c'est du papier). Avant, la bascule était binaire et se déclenchait
     quand le héros passait sous la barre (64 px) alors que la bande fait 150 px :
     le papier déjà visible sous le panneau se retrouvait sous un voile SOMBRE, et
     le héros semblait s'effacer avant d'être sorti de l'écran. */
  .topfade{position:fixed;left:0;right:0;top:0;height:92px;
    z-index:45;pointer-events:none;
    background:
      linear-gradient(180deg,rgba(8,7,5,calc(.60 * var(--voile,1))) 0%,
                             rgba(8,7,5,calc(.24 * var(--voile,1))) 55%,
                             rgba(8,7,5,0) 100%),
      linear-gradient(180deg,rgba(243,239,231,calc(.84 * (1 - var(--voile,1)))) 0%,
                             rgba(243,239,231,calc(.34 * (1 - var(--voile,1)))) 55%,
                             rgba(243,239,231,0) 100%)}
  .topfade span{position:absolute;inset:0;display:block}
  .topfade span:nth-child(1){backdrop-filter:blur(4.62px);-webkit-backdrop-filter:blur(4.62px);
    mask-image:linear-gradient(to top,transparent 0.0%,#000 12.5%,#000 100%);-webkit-mask-image:linear-gradient(to top,transparent 0.0%,#000 12.5%,#000 100%)}
  .topfade span:nth-child(2){backdrop-filter:blur(8.01px);-webkit-backdrop-filter:blur(8.01px);
    mask-image:linear-gradient(to top,transparent 12.5%,#000 25.0%,#000 100%);-webkit-mask-image:linear-gradient(to top,transparent 12.5%,#000 25.0%,#000 100%)}
  .topfade span:nth-child(3){backdrop-filter:blur(10.34px);-webkit-backdrop-filter:blur(10.34px);
    mask-image:linear-gradient(to top,transparent 25.0%,#000 37.5%,#000 100%);-webkit-mask-image:linear-gradient(to top,transparent 25.0%,#000 37.5%,#000 100%)}
  .topfade span:nth-child(4){backdrop-filter:blur(12.23px);-webkit-backdrop-filter:blur(12.23px);
    mask-image:linear-gradient(to top,transparent 37.5%,#000 50.0%,#000 100%);-webkit-mask-image:linear-gradient(to top,transparent 37.5%,#000 50.0%,#000 100%)}
  .topfade span:nth-child(5){backdrop-filter:blur(13.88px);-webkit-backdrop-filter:blur(13.88px);
    mask-image:linear-gradient(to top,transparent 50.0%,#000 62.5%,#000 100%);-webkit-mask-image:linear-gradient(to top,transparent 50.0%,#000 62.5%,#000 100%)}
  .topfade span:nth-child(6){backdrop-filter:blur(15.34px);-webkit-backdrop-filter:blur(15.34px);
    mask-image:linear-gradient(to top,transparent 62.5%,#000 75.0%,#000 100%);-webkit-mask-image:linear-gradient(to top,transparent 62.5%,#000 75.0%,#000 100%)}
  .topfade span:nth-child(7){backdrop-filter:blur(16.67px);-webkit-backdrop-filter:blur(16.67px);
    mask-image:linear-gradient(to top,transparent 75.0%,#000 87.5%,#000 100%);-webkit-mask-image:linear-gradient(to top,transparent 75.0%,#000 87.5%,#000 100%)}
  .topfade span:nth-child(8){backdrop-filter:blur(17.91px);-webkit-backdrop-filter:blur(17.91px);
    mask-image:linear-gradient(to top,transparent 87.5%,#000 100.0%,#000 100%);-webkit-mask-image:linear-gradient(to top,transparent 87.5%,#000 100.0%,#000 100%)}  @keyframes wUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
  @keyframes wDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}  .s-cta:focus-visible,.nav-cta:focus-visible,.nav-links a:focus-visible,.brand:focus-visible{
    outline:2px solid var(--ember);outline-offset:4px;border-radius:40px}
  /* ── TITRE ── */
  /* dans .stage et AU-DESSUS du flou (z 40 > 30), sinon la rampe le flouterait.
     Positionné depuis le viewport -> il faut réintégrer --pad pour rester aligné. */
  /* z-index 10 : au-dessus du panneau et de l'arc (3), mais SOUS la bande floutée
     (45). À 46 le titre passait par-dessus le flou et restait net en sortant,
     alors que la photo, elle, se floutait : les deux se désolidarisaient. */
  .title{position:absolute;top:calc(var(--nav-h) + var(--pad) + clamp(10px,1.6vw,24px));
    left:calc(var(--pad) + var(--gut));z-index:10;pointer-events:none;color:#f4efe6;max-width:56%}
  .title .k{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(14px,1.4vw,20px);color:rgba(244,239,230,.78);text-shadow:0 2px 16px rgba(0,0,0,.6);margin-bottom:6px}
  .title h1{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4.6vw,66px);line-height:.94;letter-spacing:-.01em;text-shadow:0 6px 40px rgba(0,0,0,.55)}
  .title h1 em{font-style:italic;font-weight:500}

  /* arc de trajectoire (motif ballon) : se trace au chargement */
  .arc{position:absolute;top:0;left:0;width:100%;height:44%;z-index:3;pointer-events:none;opacity:.5}
  .arc path{transition:stroke-dashoffset 2.4s var(--ease) .6s}

  /* rail = petit label vertical flottant (gauche) */


  /* ════════ MOTIF DE FOND : base (le motif choisi via data-mo, voir plus bas) ════════
     Un motif de fond suppose un FOND : le cadre papier (--pad) a été élargi, sinon
     il n'y a rien à décorer. Conséquence : la nav passe sur le papier (texte encre). */
  .bgmotif{position:fixed;inset:0;z-index:0;pointer-events:none;background-repeat:repeat;
    transition:opacity .4s var(--ease)}  .wrap{max-width:1180px;margin:0 auto;padding:0 calc(var(--pad) + var(--gut))}
  /* ════════ LA NAV CHANGE DE THÈME UNE FOIS LE HÉROS PASSÉ ════════
     Le voile sombre + texte clair marchent SUR LE MÉDIA du héros. Dès que le papier
     défile dessous, ce même voile pose une bande grise sale et le logo clair devient
     illisible. La nav bascule donc en encre-sur-papier (le flou progressif, lui, reste :
     c'est lui qui détache la nav du contenu qui passe dessous). */
  .nav,.brand,.nav-links a,.lang,.lang b,.nav-cta,.topfade{
    transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
  body.hors-heros .brand{color:var(--ink);text-shadow:none}
  body.hors-heros .brand b{color:var(--ember-texte)}
  body.hors-heros .nav-links a{color:var(--ink-soft);text-shadow:none}
  body.hors-heros .nav-links a:hover{color:var(--ink)}
  body.hors-heros .lang{color:var(--ink-soft);text-shadow:none}
  body.hors-heros .lang b{color:var(--ink)}
  body.hors-heros .nav-cta{color:var(--ink);border-color:rgba(22,19,14,.3)}
  /* ════════ CLÔTURE ════════ */
  .fin{position:relative;z-index:2;padding:clamp(70px,9vh,120px) 0}
  .fin-in{background:var(--ink);border-radius:30px;corner-shape:superellipse(2.4);
    padding:clamp(40px,6vh,76px) clamp(28px,4vw,64px);color:#f4efe6;
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
  .fin h2{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.6vw,50px);line-height:1;
    letter-spacing:-.015em;max-width:16ch}
  .fin p{margin-top:12px;font-size:14px;color:rgba(244,239,230,.7);max-width:38ch;line-height:1.5}  .pied{position:relative;z-index:2;padding:0 0 clamp(30px,4vh,50px);
    display:flex;flex-wrap:wrap;gap:14px 30px;align-items:baseline;
    font-family:var(--grotesk);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
  .pied a{transition:color .3s} .pied a:hover{color:var(--ember-texte)}
  .pied .sep{flex:1}

  /* ════════ LE MONDE POUR TERRAIN (teaser vers la page Histoire) ════════
     Vraie texture NOCTURNE de la Terre (earth-dark.jpg, équirectangulaire) en carte plate :
     les lumières de villes font le décor, ses villes sont en braise. Panneau sombre inséré
     dans le papier, comme le héros : les deux objets sombres se répondent.
     Positions calculées par projection : x=(lon+180)/360 · y=(90-lat)/180. Aucun pin à la main. */
  .monde{position:relative;z-index:2;padding:clamp(60px,8vh,110px) 0}  @keyframes ping{0%{box-shadow:0 0 0 0 rgba(209,69,31,.55)}70%{box-shadow:0 0 0 11px rgba(209,69,31,0)}100%{box-shadow:0 0 0 0 rgba(209,69,31,0)}}  /* ════════ 10 MOTIFS DE FOND (data-mo sur body) : labo de comparaison ════════ */

  /* ── TEXTURES MATIÈRE (autre famille que les motifs à traits) ── */
  body[data-mo="grain"] .bgmotif{background-image:url("/assets/tex/grain.webp");background-size:420px}
  body[data-mo="none"] .bgmotif{opacity:0}


  /* ════════ VIE DES SECTIONS : reveal au scroll + interactions ════════ */
  /* reveal : le contenu monte en fondu à l'entrée (JS ajoute .in) ; stagger via --i */
  .reveal{opacity:0;transform:translateY(26px);
    transition:opacity .75s var(--ease) calc(var(--i,0) * .07s),transform .8s var(--ease) calc(var(--i,0) * .07s)}
  .reveal.in{opacity:1;transform:none}  .b-kick.in::after{transform:scaleX(1)}
  /* eyebrows retirés (label capitales au-dessus = pattern trop template/IA) */
  body.no-eyebrow .b-kick{display:none}
  body.no-eyebrow .sec-h2,body.no-eyebrow .besoin h2,body.no-eyebrow .cb-head h2{margin-top:0}

  @media (max-width:860px){  }

  @media (max-width:860px){  }

  @media (max-width:860px){  }

  @media (max-width:860px){    .fin-in{flex-direction:column;align-items:flex-start}
  }

  @media (max-width:860px){  }

  @media (max-width:860px){
    body{overflow:auto}
    :root{--nav-h:58px;--radius:26px;--pad:8px}
    .nav-links{display:none}
    /* Mobile : pas de flou (trop cher) et le contenu défile sous la nav -> elle a besoin
       d'un FOND PAPIER SOLIDE, sinon le contenu transparaît salement sous le voile.
       La nav reste sur papier à toutes les positions : texte encre, CTA pilule sombre
       à texte clair. Le basculement hors-heros ne doit PAS toucher le CTA ici (il le
       remettait en encre-sur-encre = invisible). */
    /* La barre garde le FLOUTAGE DÉGRADÉ, comme sur desktop : un fond uni faisait
       perdre l'effet. Ici la teinte est toujours papier (le texte est en encre à
       toutes les positions), et les huit couches de flou restent identiques. */
    .nav{padding:0 16px;gap:10px;background:transparent;box-shadow:none}
    .topfade{display:block;height:92px;
      background:linear-gradient(180deg,rgba(243,239,231,.92) 0%,
                                        rgba(243,239,231,.62) 52%,
                                        rgba(243,239,231,0) 100%)}
    .brand{color:var(--ink);text-shadow:none;font-size:14px;letter-spacing:.1em}
    .brand b{color:var(--ember-texte)}
    /* Le burger annonce ici n'a jamais existe : masquer .lang rendait la version
       anglaise INATTEIGNABLE au telephone, alors que le bilingue est une exigence
       du projet. Elle reste donc dans la barre, en plus petit. */
    .lang{display:inline-flex;gap:3px;font-size:10px;letter-spacing:.1em;flex:none}
    .nav-cta,body.hors-heros .nav-cta{background:var(--ink);color:var(--paper);border:none;
      font-size:10px;padding:5px 5px 5px 14px;gap:8px}
    body.hors-heros .brand{color:var(--ink)}
    .nav-cta .go{width:26px;height:26px;font-size:12px;color:#16130e}
    .stage{position:relative;top:0;height:auto;padding:calc(var(--nav-h) + var(--pad)) var(--pad) var(--pad)}
    .panel{height:auto;opacity:1;transform:none}    /* mobile : on garde le voile de nav, mais 8 backdrop-filter empilés = trop cher */
    .title h1{font-size:32px}
    .arc{display:none}
  }
  /* mouvement réduit : couper les transitions ne suffisait pas, le mur défilait
     toujours (animation ≠ transition) et les vidéos jouaient. Tout doit s'arrêter. */
  @media (prefers-reduced-motion:reduce){
    *{transition-duration:.001s!important;animation-duration:.001s!important;animation-iteration-count:1!important}
    .wall-track{animation:none!important}
    .slice .media img,.slice .media video{transform:skewX(8deg) scale(1.24)}
    .panel{opacity:1;transform:none}
    .arc path{transition:none;stroke-dashoffset:0!important}
  }

  /* ════════ CONTACT : le formulaire de booking dans le panneau de cloture ════════
     Le panneau .fin-in est sombre (encre) : les champs sont donc clairs sur fond
     sombre. L'accent braise reste de la PONCTUATION (focus, fleche) et ne remplit
     jamais une surface : le bouton principal est en papier plein, pas en braise. */
  .ct-intro{flex:1 1 320px}
  .ct-direct{margin-top:18px;font-family:var(--grotesk);font-size:12px;letter-spacing:.06em;
    text-transform:uppercase;color:rgba(244,239,230,.55)}
  .ct-direct a{color:#f4efe6;border-bottom:1px solid rgba(209,69,31,.6);padding-bottom:2px;
    transition:border-color .3s var(--ease),color .3s var(--ease)}
  .ct-direct a:hover{color:var(--ember-clair);border-color:var(--ember-clair)}

  .ct-form{flex:1 1 430px;max-width:520px;display:flex;flex-direction:column;gap:14px}
  .ct-row{display:flex;gap:14px;flex-wrap:wrap}
  .ct-row .ct-field{flex:1 1 180px}
  .ct-field{display:flex;flex-direction:column;gap:6px;margin:0}
  .ct-field label{font-family:var(--grotesk);font-weight:600;font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;color:rgba(244,239,230,.6)}
  .ct-field input,.ct-field select,.ct-field textarea{
    font-family:var(--sans);font-size:14px;color:#f4efe6;background:rgba(244,239,230,.06);
    border:1px solid rgba(244,239,230,.22);border-radius:12px;padding:11px 13px;width:100%;
    transition:border-color .3s var(--ease),background .3s var(--ease)}
  .ct-field textarea{resize:vertical;min-height:78px;line-height:1.5}
  .ct-field select{appearance:none;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f4efe6' stroke-opacity='.6' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
  .ct-field select option{background:#16130e;color:#f4efe6}
  .ct-field input::placeholder,.ct-field textarea::placeholder{color:rgba(244,239,230,.34)}
  .ct-field input:focus-visible,.ct-field select:focus-visible,.ct-field textarea:focus-visible{
    outline:none;border-color:var(--ember);background:rgba(244,239,230,.1)}
  .ct-field [aria-invalid="true"]{border-color:#e8836d}

  .ct-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

  .ct-err{font-family:var(--sans);font-size:13px;line-height:1.5;color:#f0a292;margin:0}

  .ct-submit{align-self:flex-start;font-family:var(--grotesk);font-weight:600;font-size:13px;
    letter-spacing:.05em;text-transform:uppercase;color:var(--ink);background:#f4efe6;
    border:1px solid #f4efe6;border-radius:40px;padding:14px 26px;cursor:pointer;
    transition:transform .35s var(--ease),box-shadow .35s var(--ease),opacity .3s}
  .ct-submit:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.28)}
  .ct-submit:disabled{opacity:.55;cursor:progress;transform:none;box-shadow:none}

  .ct-note{font-family:var(--sans);font-size:12px;line-height:1.5;color:rgba(244,239,230,.5);margin:0}

  .ct-ok{flex:1 1 430px;max-width:520px}
  .ct-ok h3{font-family:var(--serif);font-weight:600;font-size:clamp(22px,2.4vw,32px);line-height:1.05;
    letter-spacing:-.01em;color:#f4efe6}
  .ct-ok h3::after{content:"";display:block;width:52px;height:1.5px;border-radius:2px;
    background:var(--ember);margin-top:14px}
  .ct-ok p{margin-top:12px;font-size:14px;color:rgba(244,239,230,.7);line-height:1.5;max-width:38ch}

  /* bascule de langue dans la nav */
  .lang a{color:inherit;opacity:.62;transition:opacity .3s var(--ease),color .3s var(--ease)}
  .lang a:hover{opacity:1;color:var(--ember-clair)}
  body.hors-heros .lang a:hover{color:var(--ember-texte)}

  @media (max-width:860px){
    .ct-form,.ct-ok{flex-basis:100%;max-width:none}
    .ct-submit{align-self:stretch;text-align:center}
  }

  /* ════════════════════════════════════════════════════════════════════════
     STRUCTURE « PREUVE PUIS DISPONIBILITÉ » (refonte du 05/08)
     Demande de Yoanna : arriver sur son nom, descendre sur ses réseaux, puis
     lire ce qu'elle a fait avant ce pour quoi elle est disponible. Jamais une
     grille de cartes identiques à choisir.
     ════════════════════════════════════════════════════════════════════════ */

  /* ── Héros : une seule photo, son nom par-dessus ── */
  .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%}
  /* scrim en haut et à gauche seulement : là où se posent le nom et la nav */
  .hero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,rgba(10,9,7,.66) 0%,rgba(10,9,7,.3) 32%,rgba(10,9,7,0) 62%),
               linear-gradient(90deg,rgba(10,9,7,.46) 0%,rgba(10,9,7,0) 58%)}
  .stage .title{max-width:72%}
  .stage .title h1{font-size:clamp(42px,7.6vw,116px);line-height:.9;letter-spacing:-.025em}
  /* le rôle passe SOUS le nom, en texte courant : le petit label capitales au-dessus
     d'un titre est le pattern template rejeté le 17/07, on ne le réintroduit pas */
  .stage .title .k{font-family:var(--sans);font-style:normal;font-weight:400;
    font-size:clamp(14px,1.55vw,19px);color:rgba(244,239,230,.84);margin:16px 0 0;letter-spacing:0}

  /* ── Réseaux : le chiffre porte la section, les plateformes se parcourent ──────
     Version précédente : une ligne de texte sous le héros, tout au même poids. Or
     c'est l'argument le plus fort de Yoanna et elle a demandé à le voir dès le début.
     Écart d'échelle assumé (le chiffre fait environ six fois le nom d'une plateforme),
     et chaque plateforme devient une ligne d'index qui réagit au survol. */
  .reseaux{position:relative;z-index:2;padding:clamp(44px,7vh,96px) 0 clamp(26px,4vh,52px)}
  .reseaux .wrap{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.2fr);
    gap:clamp(22px,4vw,72px);align-items:start}

  .rs-chiffre b{display:block;font-family:var(--grotesk);font-weight:600;
    font-size:clamp(62px,12vw,178px);line-height:.8;letter-spacing:-.045em;color:var(--ink)}
  .rs-label{display:block;margin-top:12px;font-family:var(--sans);font-size:clamp(14px,1.5vw,17px);
    color:var(--ink-soft)}
  .rs-note{display:block;margin-top:16px;font-family:var(--sans);font-size:14px;line-height:1.55;
    color:var(--ink-soft);max-width:28ch;padding-top:16px;border-top:1px solid var(--line)}

  .rs-liste{list-style:none;border-top:1px solid var(--line)}
  .rs-liste li{border-bottom:1px solid var(--line)}
  .rs-liste a{position:relative;display:grid;
    grid-template-columns:minmax(0,1fr) clamp(52px,5.2vw,74px) clamp(112px,12vw,158px) 18px;
    align-items:baseline;
    gap:10px 20px;padding:clamp(14px,2.1vh,21px) 2px;
    transition:background-color .45s var(--ease)}
  /* filet braise qui se trace à gauche : la ponctuation de la DA, jamais un aplat */
  .rs-liste a::before{content:"";position:absolute;left:0;top:50%;width:20px;height:2px;border-radius:2px;
    background:var(--ember);transform:translateY(-50%) scaleX(0);transform-origin:left;
    transition:transform .45s var(--ease)}
  .rs-nom{font-family:var(--serif);font-weight:600;font-size:clamp(19px,2.4vw,29px);line-height:1;
    letter-spacing:-.015em;color:var(--ink);transition:transform .45s var(--ease)}
  .rs-id{font-family:var(--sans);font-size:13.5px;color:var(--ink-soft);
    transition:color .45s var(--ease)}
  .rs-fleche{font-size:15px;color:var(--ember);transition:transform .45s var(--ease)}

  /* on translate le NOM plutôt que le padding du lien : jamais d'animation
     sur une propriété de mise en page */
  .rs-liste a:hover{background:linear-gradient(90deg,rgba(236,229,217,.85),rgba(236,229,217,0) 62%)}
  .rs-liste a:hover::before{transform:translateY(-50%) scaleX(1)}
  .rs-liste a:hover .rs-nom{transform:translateX(32px)}
  .rs-liste a:hover .rs-id{color:var(--ink)}
  .rs-liste a:hover .rs-fleche{transform:translate(3px,-3px)}
  .rs-liste a:focus-visible{outline:2px solid var(--ember);outline-offset:-2px}

  @media (prefers-reduced-motion:reduce){
    .rs-nom,.rs-fleche,.rs-liste a::before{transition:none}
    .rs-liste a:hover .rs-nom{transform:none}
  }

  @media (max-width:860px){
    .reseaux .wrap{grid-template-columns:1fr;gap:26px}
    .rs-chiffre b{font-size:clamp(58px,17vw,92px)}
    .rs-note{max-width:none}
    .rs-liste a{gap:12px;padding:15px 2px}
    .rs-liste a:hover .rs-nom{transform:translateX(24px)}
  }

  /* ── Palmarès ── */
  .pal{position:relative;z-index:2;padding:clamp(46px,7.5vh,104px) 0}
  .pal .wrap{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
    gap:clamp(26px,4vw,70px);align-items:center}
  .pal-photo{margin:0;border-radius:30px;corner-shape:superellipse(2.4);overflow:hidden;background:var(--ink)}
  .pal-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 26%}
  .pal-corps h2{font-family:var(--serif);font-weight:600;font-size:clamp(27px,3.3vw,44px);
    line-height:1;letter-spacing:-.015em;color:var(--ink)}
  .pal-liste{list-style:none;margin-top:clamp(16px,2.6vh,26px)}
  .pal-liste li{display:grid;grid-template-columns:auto 1fr;gap:3px 18px;align-items:baseline;
    padding:14px 0;border-top:1px solid var(--line)}
  .pal-an{font-family:var(--grotesk);font-weight:600;font-size:12.5px;letter-spacing:.06em;color:var(--ember-texte)}
  .pal-t{font-family:var(--serif);font-weight:600;font-size:clamp(17px,1.85vw,23px);line-height:1.15;color:var(--ink)}
  .pal-lieu{grid-column:2;font-family:var(--sans);font-size:13px;color:var(--ink-soft)}
  .pal-obj{margin-top:22px;font-family:var(--sans);font-size:clamp(14px,1.45vw,16.5px);color:var(--ink)}
  .pal-obj::before{content:"";display:inline-block;width:26px;height:1.5px;border-radius:2px;
    background:var(--ember);vertical-align:middle;margin-right:12px}

  /* ── Les blocs preuve puis disponibilité ── */
  .bloc{position:relative;z-index:2;padding:clamp(44px,7vh,92px) 0}
  .bloc .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
    gap:clamp(26px,4.4vw,74px);align-items:center}
  .bloc-inv .bl-photo{order:2}
  .bl-photo{margin:0}
  .bl-photo img{border-radius:30px;corner-shape:superellipse(2.4);background:var(--ink)}
  .bl-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
  .bl-preuve{font-family:var(--serif);font-weight:600;font-size:clamp(25px,3.4vw,46px);
    line-height:1.02;letter-spacing:-.02em;color:var(--ink);max-width:19ch}
  .bl-texte{margin-top:16px;font-family:var(--sans);font-size:clamp(14px,1.45vw,16.5px);
    line-height:1.62;color:var(--ink-soft);max-width:58ch}
  .bl-refs{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin-top:18px}
  .bl-refs li{font-family:var(--grotesk);font-weight:500;font-size:11px;letter-spacing:.04em;
    color:var(--ink-soft);border:1px solid var(--line);border-radius:30px;padding:5px 12px}
  /* la bascule du bloc : c'est cette ligne qui transforme la preuve en offre */
  .bl-dispo{display:flex;gap:14px;align-items:baseline;margin-top:clamp(22px,3.2vh,32px);
    font-family:var(--serif);font-weight:600;font-size:clamp(17px,1.95vw,24px);line-height:1.2;color:var(--ink)}
  .bl-dispo::before{content:"";flex:none;width:34px;height:2px;border-radius:2px;
    background:var(--ember);transform:translateY(-.34em)}
  .bl-fmts{list-style:none;counter-reset:f;margin-top:clamp(16px,2.4vh,24px)}
  .bl-fmts li{counter-increment:f;display:grid;grid-template-columns:auto 1fr;gap:2px 16px;
    padding:13px 0;border-top:1px solid var(--line)}
  .bl-fmts li::before{content:counter(f,decimal-leading-zero);grid-row:1 / span 2;padding-top:4px;
    font-family:var(--grotesk);font-weight:600;font-size:11px;letter-spacing:.08em;color:var(--ink-soft);opacity:.55}
  .bl-fmts h3{font-family:var(--grotesk);font-weight:600;font-size:14.5px;color:var(--ink)}
  .bl-fmts p{font-family:var(--sans);font-size:13.5px;line-height:1.55;color:var(--ink-soft);max-width:50ch}
  .bl-cta{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(20px,2.8vh,28px);
    font-family:var(--grotesk);font-weight:600;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
    color:var(--ink);border:1px solid rgba(22,19,14,.3);border-radius:40px;padding:13px 24px;
    transition:border-color .35s var(--ease),background .35s var(--ease)}
  .bl-cta span:last-child{color:var(--ember);font-size:15px;transition:transform .35s var(--ease)}
  .bl-cta:hover{border-color:var(--ember);background:rgba(209,69,31,.07)}
  .bl-cta:hover span:last-child{transform:translateX(4px)}

  /* ── L'automobile : une respiration, pas un pilier ── */
  .auto{position:relative;z-index:2;padding:clamp(34px,5.5vh,74px) 0}
  .auto .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.86fr);
    gap:clamp(22px,3.6vw,58px);align-items:center}
  .au-photo{margin:0;border-radius:26px;corner-shape:superellipse(2.4);overflow:hidden;background:var(--ink)}
  .au-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 44%}
  .au-corps h2{font-family:var(--serif);font-weight:600;font-size:clamp(20px,2.4vw,30px);
    line-height:1.05;letter-spacing:-.01em;color:var(--ink)}
  .au-corps p{margin-top:12px;font-family:var(--sans);font-size:14.5px;line-height:1.6;
    color:var(--ink-soft);max-width:44ch}
  .au-corps .bl-refs{margin-top:14px}

  @media (max-width:860px){
    .stage .title{max-width:88%}
    .pal .wrap,.bloc .wrap,.auto .wrap{grid-template-columns:1fr;gap:22px}
    .bloc-inv .bl-photo{order:0}
    .pal-photo img,.bl-photo img{aspect-ratio:3/4}
    .bl-cta{width:100%;justify-content:center}
  }

  /* ── Héros mobile ─────────────────────────────────────────────────────────
     L'ancienne règle mobile posait .panel{height:auto} : ce sont les 4 tranches,
     en flux, qui donnaient sa hauteur au panneau. Sans elles la photo (absolue)
     n'avait plus aucune place et le nom retombait sur la section suivante.
     Le panneau reprend donc une hauteur propre, et le nom se pose en bas de
     l'image, là où le regard arrive. */
  @media (max-width:860px){
    .stage{height:auto}
    .panel{height:auto;aspect-ratio:3/4;border-radius:26px;corner-shape:superellipse(2.4)}
    .hero-photo{object-position:50% 26%}
    /* le voile bascule en bas : c'est là que le nom se lit maintenant */
    .hero-scrim{background:linear-gradient(180deg,rgba(10,9,7,.34) 0%,rgba(10,9,7,0) 30%,
                rgba(10,9,7,.22) 56%,rgba(10,9,7,.76) 100%)}
    .stage .title{top:auto;bottom:clamp(18px,3.4vh,30px);
      left:calc(var(--pad) + clamp(14px,4vw,22px));max-width:calc(100% - var(--pad) * 2 - 28px)}
    .stage .title h1{font-size:clamp(30px,8.6vw,46px);line-height:.94}
    .stage .title .k{font-size:clamp(13px,3.6vw,16px);margin-top:8px}
  }

  /* ── Très petits téléphones (iPhone SE et assimilés) ──────────────────────
     À 320 px, marque + langue + bouton dépassaient la barre de 27 px. On
     resserre plutôt que de sacrifier l'accès à la version anglaise. */
  @media (max-width:360px){
    .nav{padding:0 12px;gap:8px}
    .brand{font-size:12px;letter-spacing:.06em}
    .lang{font-size:9px;letter-spacing:.06em}
    .nav-cta,body.hors-heros .nav-cta{font-size:9px;padding:5px 5px 5px 11px;gap:6px}
    .nav-cta .go{width:20px;height:20px;font-size:13px}
  }

  /* L'adresse email est un mot insécable : sa largeur minimale empêchait sa colonne
     de rétrécir sous 256 px, d'où 2 px de débordement de page à 320 px. */
  .ct-intro,.ct-form,.ct-ok{min-width:0}
  .ct-direct a{overflow-wrap:anywhere}

  /* La marque ne doit jamais passer sur deux lignes : elle chevauchait le sélecteur
     de langue au téléphone. Sous 480 px on garde « Yoanna. », son nom complet étant
     de toute façon en titre juste dessous. */
  .brand{white-space:nowrap}
  @media (max-width:480px){
    .brand-nom{display:none}
  }

  /* Au téléphone la barre est toujours sur papier : le sélecteur de langue doit
     donc être en encre, quel que soit l'état hors-heros (il héritait de la couleur
     claire prévue pour le héros sombre, et devenait illisible). */
  @media (max-width:860px){
    .lang,body.hors-heros .lang{color:var(--ink-soft);text-shadow:none}
    .lang b,body.hors-heros .lang b{color:var(--ink)}
    .lang a{color:var(--ink-soft);opacity:1}
    .lang a:hover,body.hors-heros .lang a:hover{color:var(--ember-texte)}
  }

  /* Le nombre d'abonnés est la donnée que cherche une marque : il a le poids d'un
     chiffre, pas d'une légende. Relevé sur chaque plateforme, éditable au portail. */
  .rs-nb{text-align:right;font-family:var(--grotesk);font-weight:600;
    font-size:clamp(15px,1.6vw,19px);line-height:1;letter-spacing:-.01em;color:var(--ink);
    font-variant-numeric:tabular-nums;transition:color .45s var(--ease)}
  .rs-id{text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rs-liste a:hover .rs-nb{color:var(--ember-texte)}

  @media (max-width:620px){
    /* sous 620 px, le chiffre prime sur l'identifiant */
    .rs-id{display:none}
    .rs-liste a{gap:12px}
  }

  /* colonnes resserrees quand l'identifiant disparait */
  @media (max-width:620px){
    .rs-liste a{grid-template-columns:minmax(0,1fr) clamp(52px,14vw,74px) 18px}
  }

  /* La preuve du Vélodrome est une image de stade : elle vit en paysage, pas en portrait.
     Source = un plan vidéo de 720p (le seul document de ce show) : la légende de lieu
     assume le grain documentaire au lieu de le subir. */
  #shows .bl-photo img{aspect-ratio:3/2}
  .bl-legende{margin-top:10px;font-family:var(--grotesk);font-weight:500;font-size:11px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
  .bl-legende::before{content:"";display:inline-block;width:14px;height:1px;background:var(--ember);
    vertical-align:middle;margin-right:9px}
  @media (max-width:860px){ #shows .bl-photo img{aspect-ratio:3/2} }

  /* ── Le monde : une bande d'escales qui défile ────────────────────────────
     La carte à pins disait la même chose de façon abstraite. Huit photos d'elle
     sur place le prouvent en une seconde. La bande défile lentement, s'arrête au
     survol et au focus clavier, et devient une simple liste défilable à la main
     quand le visiteur a demandé moins d'animation. */
  .monde{position:relative;z-index:2;padding:clamp(46px,7.5vh,104px) 0 clamp(34px,5vh,70px);overflow:hidden}
  .mo-tete{max-width:62ch}
  .mo-tete h2{font-family:var(--serif);font-weight:600;font-size:clamp(27px,3.4vw,46px);
    line-height:1;letter-spacing:-.018em;color:var(--ink)}
  .mo-tete p{margin-top:14px;font-family:var(--sans);font-size:clamp(14px,1.5vw,16.5px);
    line-height:1.6;color:var(--ink-soft);max-width:52ch}

  /* La bande est un VRAI conteneur défilable : on la manipule au doigt, à la souris
     et au clavier. Le défilement automatique est piloté en JS (et non par une
     animation CSS) pour qu'il puisse céder la main dès que le visiteur la touche. */
  /* PAS de scroll-snap : l'accrochage annule chaque incrément du défilement
     automatique (mesuré : scrollLeft += 1 reste sur place). Une bande continue
     ne s'accroche pas, elle glisse. */
  .mo-bande{margin-top:clamp(26px,4vh,46px);overflow-x:auto;overscroll-behavior-x:contain;
    cursor:grab;
    scrollbar-width:none;-ms-overflow-style:none;
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .mo-bande::-webkit-scrollbar{display:none}
  .mo-bande.glisse{cursor:grabbing}
  .mo-bande.glisse .mo-escale{pointer-events:none}      /* pas de sélection pendant le glissé */
  .mo-bande:focus-visible{outline:2px solid var(--ember);outline-offset:4px;border-radius:6px}
  .mo-piste{display:flex;gap:clamp(14px,1.8vw,26px);width:max-content;list-style:none;
    padding:0 clamp(16px,3vw,40px)}

  .mo-escale{flex:none;width:clamp(180px,22vw,300px)}
  .mo-escale img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
    border-radius:20px;corner-shape:superellipse(2.4);background:var(--ink)}
  .mo-lieu{margin-top:11px;display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 8px}
  .mo-lieu b{font-family:var(--grotesk);font-weight:600;font-size:14px;letter-spacing:-.005em;color:var(--ink)}
  .mo-lieu span{font-family:var(--sans);font-size:12.5px;color:var(--ink-soft)}
  .mo-lieu em{flex-basis:100%;font-family:var(--sans);font-style:normal;font-size:12px;color:var(--ink-soft)}
  .mo-lieu em::before{content:"";display:inline-block;width:12px;height:1px;background:var(--ember);
    vertical-align:middle;margin-right:7px}

  @media (prefers-reduced-motion:reduce){
    /* plus de défilement automatique (le JS le coupe aussi), mais la bande reste
       manipulable : c'est le visiteur qui décide quand elle bouge */
    .mo-bande{mask-image:none;-webkit-mask-image:none;padding-bottom:8px}
    .mo-piste > [aria-hidden="true"]{display:none}
  }

  /* ── Navigation par ancres : on glisse jusqu'à la section, on n'y saute pas ──
     `scroll-behavior` n'est pas héritée : la poser sur html n'affecte QUE le
     défilement de la page, jamais la bande des escales qui a son propre conteneur.
     `scroll-margin-top` empêche la barre fixe de manger le haut de la section. */
  @media (prefers-reduced-motion:no-preference){
    html{scroll-behavior:smooth}
  }
  section[id],main[id]{scroll-margin-top:calc(var(--nav-h) + clamp(10px,1.6vw,24px))}