/* ══════════ LE CSS DE L'ACCUEIL, SORTI DE LA PAGE LE 08/09/2026 ══════════
   Ces règles vivaient dans un <style> de 43 Ko en tête d'index.html. Elles n'ont
   pas changé d'une déclaration, seulement de fichier.

   POURQUOI. Un style embarqué se retélécharge à CHAQUE visite de la page, une
   feuille se met en cache. L'accueil pesait 115 Ko à lui seul, dont ces 43.

   POURQUOI PAS DANS style.css, ET C'EST LA VRAIE QUESTION. La règle du projet
   fait descendre un composant dans la feuille commune à sa DEUXIÈME page. Aucune
   de ces règles n'a de deuxième page : le préloader, le curseur, les mots géants,
   le rail horizontal, le split et le mur d'avis n'existent que sur l'accueil. Les
   descendre ferait payer 43 Ko aux dix autres pages pour rien. La passe du
   07/09 l'avait déjà vérifié règle par règle et conclu qu'aucune n'est
   partageable ; ce fichier est la conclusion qui manquait.

   L'ORDRE DE CASCADE EST INCHANGÉ, ET C'EST CE QUI REND L'OPÉRATION SÛRE : le
   <style> venait après style.css dans le <head>, ce <link> vient exactement au
   même rang. Toutes les égalités de spécificité se résolvent comme avant.
   Le piège du 07/09 sur `.work` ne s'applique pas ici : là-bas une règle de
   média passait AVANT sa règle de base en changeant de feuille. Ici rien ne
   change de rang. Vérifié par empreinte avant et après sur seize éléments. */

body.lock{overflow:hidden}

/* ════════ PRÉLOADER ════════ */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:flex;align-items:center;justify-content:center;gap:.04em;
  animation:lift .7s cubic-bezier(.7,0,.2,1) 1.5s forwards;
}
.loader span{
  font-family:var(--disp);font-size:clamp(4rem,14vw,10rem);line-height:1;color:var(--paper);
  transform:translateY(120%);animation:up .7s cubic-bezier(.2,.7,.2,1) forwards;
}
.loader span:nth-child(2){animation-delay:.08s}
.loader span:nth-child(3){animation-delay:.16s}
.loader span:nth-child(4){animation-delay:.24s;color:var(--emy)}
@keyframes up{to{transform:translateY(0)}}
@keyframes lift{to{transform:translateY(-101%)}}
html.warm .loader{display:none}

/* ════════ CURSEUR ════════ */
.cur,.cur2{position:fixed;top:0;left:0;pointer-events:none;z-index:150;border-radius:50%;transform:translate(-50%,-50%)}
.cur{width:6px;height:6px;background:var(--emy)}
.cur2{width:34px;height:34px;border:1px solid rgba(239,238,233,.35);transition:width .25s,height .25s,border-color .25s}
body.cgrow .cur2{width:64px;height:64px;border-color:var(--emy)}
@media (hover:none){.cur,.cur2{display:none}}

/* ════════ HERO ════════ */
/* Refonte du 26/08/2026, arbitrée par Alexandre sur deux maquettes comparées
   (planche _tools-site-v2/hero-variantes.html, variante A retenue).

   Point de départ : un dashboard de Halo Lab, photo cinématographique plein cadre
   et cartes de verre flottant autour du sujet. Deux constats ont fait dévier.

   La photo, d'abord. L'effet tient à 80% sur la qualité de l'image, un cycliste
   dans un brouillard doré, lumière rasante, immense espace négatif pour poser les
   cartes. Mesuré sur tout le dossier images/ : coach-foule.jpg, l'ancien fond,
   fait 1482x872, déjà sous-dimensionné pour un plein écran Retina, plein soleil
   de midi, ombres dures, et saturé d'un orange qui n'existe pas dans la palette.
   La seule image large du lot fait 2400x1350 et c'est une photo de vacances en
   quad. Un verre dépoli posé là-dessus ne fait pas haut de gamme, il fait gabarit.
   D'où le choix d'Alexandre : pas de photo du tout.

   Les chiffres, ensuite. La référence affiche BPM, calories, cadence, classement.
   La section Preuves du BRIEF est vide, donc chaque métrique aurait été inventée.
   Les bulles portent des faits vérifiables : les deux coachs, les trois formats de
   séance du BRIEF, et les deux dates d'événements lues dans le JSON-LD ci-dessus.

   Ce qui remplace la photo, en trois couches empilées. Le filigrane n'est pas
   décoratif : sans matière derrière, un backdrop-filter sur du noir plat ne
   produit rien et les bulles retombent en rectangles gris. C'est lui qui donne
   au verre quelque chose à flouter. */
.vh{
  position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);
  place-items:center;overflow:hidden;isolation:isolate;
  /* Le padding bas réserve la place de la bande. Sans lui le bloc central se
     centre sur toute la hauteur et le bouton principal finit sous elle : l'action
     unique de la page masquée par une décoration. */
  padding:clamp(96px,13vh,132px) 0 clamp(120px,17vh,158px);
}

/* Couche 1, la lumière. Deux sources très étalées, argent côté Juan (à gauche),
   or côté Emy (à droite). Le flou de 90px casse le bord du dégradé : sans lui on
   lit deux cercles et on retombe sur le fond à orbes lumineuses que le CLAUDE.md
   global proscrit. C'est une lumière de salle vue de loin, pas un néon.
   L'or est à .14 et l'argent à .12, et l'écart n'est pas arbitraire : l'or est
   2,16 fois plus sombre (luminance 0,251 contre 0,542), à opacité égale sa
   source se voyait nettement moins. */
.vh-glow{
  position:absolute;inset:-14%;z-index:0;pointer-events:none;filter:blur(90px);
  background:
    radial-gradient(46% 52% at 22% 62%, rgba(202,194,175,.12), transparent 70%),
    radial-gradient(52% 56% at 78% 44%, rgba(212, 165, 66,.14), transparent 72%);
  animation:breathe 18s ease-in-out infinite alternate;
}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.08) translate3d(0,-1.6%,0)}}

/* Couche 2, le filigrane, retiré le 02/09/2026 avec les bulles. C'était un OSE
   de 34vw à 10 % d'opacité derrière le titre. Deux raisons de le retirer
   ensemble, et pas une seule : il n'existait que pour donner au backdrop-filter
   des bulles quelque chose à flouter, et les bulles sont parties ; et le nom de
   marque fait maintenant 248 px au premier plan, donc le filigrane afficherait
   le mot OSE deux fois dans le même écran.
   Sa parallaxe JS est partie avec, voir le commentaire à sa place en bas de
   page. Le CSS mobile et la ligne de prefers-reduced-motion aussi. */

/* z-index sans position:relative, volontairement : .vh-in est un élément de
   grille, donc son z-index s'applique. S'il était positionné il deviendrait le
   référent des bulles en absolu, et la bande du bas se calerait sous le bloc de
   texte au lieu du bas de l'écran, par-dessus le bouton. Mesuré : 483px au lieu
   de 734 sur un écran de 820. */
.vh-in{z-index:3;width:min(var(--wrap),100%);max-width:100%;padding-inline:var(--gut);text-align:center}

/* 5.9vw et pas 9.5 comme avant. Mesuré à 1280 : les deux colonnes de bulles
   mangent 2 x 240px, il reste 800px au centre. L'ancienne taille réclamait 750px
   hors marges et le titre passait sous la carte Tunisie. Le héros perd en échelle
   typographique ce qu'il gagne en couches, c'est l'arbitrage assumé. */
.vh h1{
  font-family:var(--disp);text-transform:uppercase;font-weight:400;
  font-size:clamp(2.6rem,5.9vw,5.2rem);line-height:.94;letter-spacing:-.012em;
  max-width:760px;margin-inline:auto;
}
/* Le mot accentué suit la couleur de marque, aujourd'hui l'or. Il avait basculé
   sur l'accent de Juan du temps du héros photo, parce que l'accent de marque de
   l'époque, le grenat, se noyait dans l'orange de la foule. Deux raisons pour que
   la question soit close : la photo est partie avec le passage au verre, et l'or
   se tiendrait de toute façon à 28,3 degrés de cet orange contre 18,2 pour le
   grenat. Mesuré le 28/08/2026, le chiffre de 22 degrés écrit ici avant était faux. */
.vh h1 em{font-style:normal;color:var(--emy)}
/* Le masque de révélation coupait l'accent circonflexe du Î de « ENTRAÎNE ».
   Mesuré dans Anton : une capitale nue monte à 0,865 em au-dessus de la ligne de
   base, un Î monte à 1,105 em, et la boîte n'offrait que 0,887 em (line-height
   0,94, baseline à 67 px pour un corps de 75,5). Il manquait 0,218 em, l'accent
   était rasé net et le mot se lisait ENTRAINE.
   On ouvre donc le masque de 0,26 em par le haut et on le remonte d'autant : la
   hauteur de boîte gagne ce que la marge lui reprend, le bas du masque ne bouge
   pas d'un pixel, et le texte reste exactement où il était. Vérifié à la mesure
   avant et après, les deux lignes sont au même y. Le masque garde tout son sens,
   il sert à cacher le texte par le BAS pendant qu'il monte.
   Ne pas régler ça en desserrant le line-height : à 1,16 les deux lignes du titre
   se décollent et le bloc perd sa densité de titrage. */
.vh h1 .l{display:block;overflow:hidden;padding-top:.26em;margin-top:-.26em}
.vh h1 .l span{display:inline-block;transform:translateY(115%);animation:up .9s cubic-bezier(.2,.7,.2,1) forwards}
.vh .l span{animation-delay:1.35s}
.vh h1 .l:nth-child(2) span{animation-delay:1.47s}

/* ──── LA MARQUE EN PREMIER ────
   Héros refait le 02/09/2026. Les quatre règles .l juste au-dessus ne servent
   plus : elles habillaient le titre en deux lignes « On t'entraîne. / On
   t'embarque. », remplacé par le nom de marque seul. Elles restent en place
   parce que ce héros est un arbitrage encore ouvert et que le titre peut
   revenir tel quel en une minute. Le jour où l'arbitrage est clos, les
   supprimer avec la ligne .vh h1 .l span de prefers-reduced-motion.

   D'où vient cette composition : coronagymbdx.fr, référence donnée par
   Alexandre le 01/09/2026. Ce qui en a été retenu tient en une phrase, son
   premier écran n'a pas de slogan. Le plus gros texte est le nom, tout ce qui
   explique est petit. C'est l'inverse exact de ce que faisait le héros
   précédent, où le plus gros texte de l'écran ne disait pas le métier.

   Le corps du nom n'est pas un clamp comme les autres titres. OSE fait trois
   lettres là où CORONAGYM en fait neuf : au même réglage le mot occuperait le
   tiers de la largeur et l'effet tomberait. La taille est donc en vw pour que
   le mot remplisse la ligne quelle que soit la fenêtre, plafonnée en rem pour
   ne pas devenir absurde sur un très grand écran.

   59vw, arbitré à l'œil par Alexandre le 02/09/2026, cadres comparés à 375 px
   dans _tools-site-v2/2026-09-02_ose_apercu-mobile.html. 23vw ne donnait que
   35 % de la ligne, 30vw 45 %, toujours loin du logotype de la référence qui
   va d'un bord à l'autre. 59vw donne 334 px de mot sur 375, soit 89 %, et pose
   exactement sur la gouttière de 20 px. Au-dessus, le nom passe sous la
   gouttière et ne s'aligne plus sur le reste de la page.

   Le premier écran n'est jamais la contrainte : à 59vw le bas du bouton tombe
   à 690 sur 812, il reste 122 px. Ce qui limite est latéral.

   Le plafond de 15,5 rem mord dès 420 px de large, contre 1078 px en 23vw. Le
   grand écran ne bouge pas d'un pixel, il était déjà au plafond : 248 px de
   corps et 374 px de mot, avant comme après. Entre 420 et 1078 px en revanche,
   tablettes et petits portables, le nom grandit, 248 px au lieu de 177 à
   768 px. Vérifié à treize largeurs de 320 à 1470 : aucun débordement nulle
   part, et le bas du bouton ne dépasse jamais 698.

   La proportion tient d'un téléphone à l'autre, 89 % de la ligne de 320 à
   420 px. Sous 360 px le mot mord sur la gouttière, 5 px à 320 px, parce que
   0,89 fois la largeur passe devant la largeur moins 40. Ça ne fait pas
   défiler la page et ça ne concerne que les téléphones d'avant 2017.

   Le sélecteur porte .vh h1 et pas seulement .vh-brand : .vh h1 pèse 0,1,1 et
   écrase une classe seule, le mot sortait à 83 px au lieu de 248. Une classe
   ne suffit pas tant que .vh h1 fixe une taille. */
.vh h1.vh-brand{
  font-family:var(--disp);text-transform:uppercase;font-weight:400;
  font-size:min(59vw,15.5rem);line-height:.86;letter-spacing:-.02em;
  color:var(--paper);margin:0;max-width:none;
}
/* Le point est en or et pas la lettre : c'est la forme exacte du logo de la
   nav, <a class="brand">OSE<em>.</em></a>. Le premier écran et la nav doivent
   montrer la même marque, sinon on en apprend deux en trois secondes.
   Anton dessine le point comme un carré plein, il fait ~48 px de côté à 248 px
   de corps. C'est voulu et c'est le seul aplat d'or de l'écran avec le bouton. */
.vh-brand em{font-style:normal;color:var(--emy)}

/* L'équivalent du filet tricolore de la référence, qui tient le logotype par en
   dessous. Ici une seule couleur : la marque en a une, l'or, et le tricolore de
   Bordeaux disait la France, ce que rien n'a à dire ici.

   L'enveloppe reste en width:fit-content, et pas en inline-block, pour une
   raison qui n'a rien à voir avec le filet : en inline-block elle se plaçait
   sur la ligne du sur-titre, lui-même en inline-flex, et « Lausanne → Monde »
   finissait collé à gauche du O au lieu d'être au-dessus. Elle doit se
   rétracter sur le mot tout en restant de niveau bloc. Ne pas y toucher.

   LE FILET FAIT LA LARGEUR DU MOT, et cette largeur a été rejugée deux fois de
   suite début septembre 2026. Ne pas la prendre pour un réglage d'origine
   jamais réexaminé, c'est l'inverse.

   Le 02/09, le nom étant passé à 59vw, quatre traitements ont été comparés à
   l'œil sur des cadres de 375 px dans _tools-site-v2/2026-09-02_ose_trait-59vw.html :
   pleine largeur en 3 px, sans filet, pleine largeur en 1 px, et 72 px centrés.
   Alexandre a pris les 72 px, appliqués le jour même.

   Le 03/09, la même comparaison a été refaite sur des fenêtres de 1440 x 900,
   _tools-site-v2/2026-09-03_ose_trait-1440.html, parce que le choix de la veille
   avait été fait à 375 px seulement et que le mot cesse de grandir à 420. Ce que
   la planche a montré : le filet court garde 19 % du mot partout, mais il tombe
   de 19 % à 5 % de la LIGNE entre le téléphone et l'ordinateur, où il se lit
   comme un petit tiret perdu au milieu de la page. Alexandre a repris la pleine
   largeur. C'est donc un retour en arrière informé, pas un oubli de la décision
   du 02/09.

   Conséquence à assumer, elle avait été dite avant : à 59vw le filet mesure
   334 px sur 375 au téléphone et 374 px sur grand écran. C'est une barre, pas un
   trait. Elle tient le logotype par en dessous au lieu de le ponctuer, ce que
   fait le filet de la référence.

   L'ancienne largeur en dur de 560 px, essayée bien avant sous un mot de 1242,
   n'a rien à voir : elle datait de l'époque où l'enveloppe n'existait pas. */
.vh-brandwrap{display:block;width:fit-content;margin-inline:auto}
.vh-rule{
  height:3px;background:var(--emy);margin-top:14px;width:100%;
  transform-origin:center;animation:ruleIn .9s 1.55s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes ruleIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Le rang des pratiques, équivalent de « Musculation · Hyrox · Powerlifting »
   dans la référence. Repris mot pour mot de coaching.html ligne 123. Aucune
   icône : quatre pictogrammes inventés pour salle, visio, entreprise et séjour
   seraient quatre dessins approximatifs. Le point médian suffit à séparer. */
.vh-chips{
  display:flex;gap:0 26px;flex-wrap:wrap;justify-content:center;margin-top:30px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#A9A89F;
  opacity:0;animation:fadeUp .8s 2.15s forwards;
}
.vh-chips span{display:inline-flex;align-items:center;gap:26px}
.vh-chips span::after{content:"·";color:var(--mut);opacity:.5}
.vh-chips span:last-child::after{content:none}

/* Le paragraphe porte les faits, donc il porte du gras, ce que .vh-sub ne fait
   nulle part ailleurs. Repris de la référence : le gris dit le contexte, le
   blanc dit qui et quoi, et l'œil attrape les deux séparément sans avoir à lire
   la phrase entière. 46ch et pas les 50 de .vh-sub : la phrase est plus courte,
   elle doit tenir sur deux lignes sous un mot qui en occupe toute la largeur. */
.vh-lede{max-width:46ch}
.vh-lede b{color:var(--paper);font-weight:600}

.vh-sub{
  margin:24px auto 0;max-width:50ch;font-size:clamp(15px,1.3vw,17.5px);color:#C9C8C0;
  opacity:0;animation:fadeUp .8s 1.8s forwards;
}
.vh-sub strong{color:var(--paper);font-weight:600}
.vh-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:32px;opacity:0;animation:fadeUp .8s 2s forwards}
.chip{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.06em;padding:13px 20px;border-radius:999px;border:1px solid var(--line);color:#D8D7CF;
  transition:border-color .25s,color .25s;background:rgba(239,238,233,.02);
}
.chip b{color:var(--emy);font-weight:500}
.chip:hover{border-color:var(--emy);color:var(--paper)}
/* Le J-xx a suivi le départ dans le bouton principal le 28/08/2026. Dans la
   pastille il était or sur fond sombre ; sur un bouton or, .chip b ne s'applique
   plus et sans règle il hériterait de la couleur du libellé, donc un J-55 aussi
   lourd que le verbe qui le précède. Il reste dans l'encre du bouton, en mono,
   juste assez estompé pour passer au second plan.
   L'opacité est mesurée, pas choisie à l'œil : l'encre #0E0F0C pleine donne
   5,51:1 sur l'or, et le premier palier qui tient encore le 4,5:1 de l'AA est
   0,84, qui rend 4,57:1. Un premier essai à 0,66 tombait à 3,36:1 et ne passait
   pas. Ne pas redescendre sous 0,84 pour gagner en discrétion, c'est du texte
   de 14 px, il n'a pas droit au seuil des grands caractères. */
.vh-cta .btn.solid .jd{font-family:var(--mono);font-weight:600;font-size:.92em;margin-left:6px;opacity:.84}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* align-items:start et pas center : sous 400px la ligne passe en deux et un
   centrage vertical renvoyait la pastille au milieu du bloc, seule à gauche,
   détachée du texte. Les 5px la recalent optiquement sur la première ligne. */
.vh-eyeb{display:inline-flex;gap:12px;align-items:flex-start;margin-bottom:24px;opacity:0;animation:fadeUp .8s 1.7s forwards}
.vh-eyeb .dot{width:7px;height:7px;border-radius:50%;background:var(--emy);flex:none;margin-top:5px;animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.28}}

/* ──── Les bulles, retirées le 02/09/2026 ────
   Quatre cartes de verre flottaient autour du titre : qui vous coache, où l'on
   se voit, le prochain départ avec ses dates, la retraite de novembre. Elles
   partent avec le passage au héros de marque, et c'est le geste central de ce
   changement, pas un effet de bord. Le reproche d'Alexandre au héros précédent,
   le 31/08/2026, était « on se perd un peu » : neuf blocs de texte réclamaient
   l'attention au même volume sonore, et les quatre bulles en portaient 64 mots
   à elles seules, toutes du même poids visuel, donc aucune à lire en premier.
   Rien de ce qu'elles disaient n'est perdu pour autant. Les deux dates sont sur
   la galerie d'événements plus bas et sur evenements.html, les lieux de
   séance sont dans le rang .vh-chips et sur coaching.html, le couple est dans le
   paragraphe et dans la section #coachs, qui suit directement le héros depuis
   le 03/09/2026.
   Sont partis avec : le HTML, la surcharge mobile, la ligne de
   prefers-reduced-motion, et les keyframes bubIn et float qui ne servaient
   qu'à elles. Le balisage complet est récupérable dans la sauvegarde
   _tools-site-v2/2026-09-02_ose_index-avant-heros-marque.html, hors du dossier
   déployé et hors du périmètre du script de vérification. */

.scroll-cue{
  position:absolute;z-index:4;right:var(--gut);bottom:36px;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mut);writing-mode:vertical-rl;
  opacity:0;animation:fadeUp .8s 2.8s forwards;
}
.scroll-cue::after{content:"";display:block;width:1px;height:46px;background:var(--mut);margin:12px auto 0;animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ════════ MARQUEE OUTLINE ════════ */
.mq{border-block:1px solid var(--line);overflow:hidden;padding-block:18px;background:var(--ink)}
.mq-t{display:flex;width:max-content;animation:scroll 30s linear infinite}
.mq-t span{
  font-family:var(--disp);text-transform:uppercase;font-size:clamp(2rem,5vw,4rem);line-height:1;
  padding-inline:28px;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(239,238,233,.5);
}
.mq-t span i{font-style:normal;-webkit-text-stroke:0;color:var(--emy)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ════════ MOTS GÉANTS (scrub) ════════ */
/* Ces mots portent les apports du coaching. Avant le dégraissage du 26/08/2026
   l'accueil les disait deux fois : une liste numérotée dans une section « Ce qu'on
   t'apporte », puis les mêmes idées en sous-titre des mots géants 3 000 px plus
   bas. La liste a disparu, le mot géant est devenu son propre titre. Le détail
   complet reste sur coaching.html, où le bouton du bloc sticky envoie.

   SCROLL ACCROCHÉ, arbitré par Alexandre le 26/08/2026. Trois réglages ont été
   essayés dans l'ordre. 180vh puis 220vh : allonger ne réglait rien, un geste de
   trackpad avec inertie parcourt 800 à 1500 px et grandit avec la section, on
   passait toujours du premier mot au dernier sans voir ceux du milieu. Une pose
   minimum de 600 ms par mot en JS : ils s'enchaînaient enfin, mais la page
   continuait de filer pendant l'animation. Verdict d'Alexandre : « je scroll un
   mot, je scroll un mot ». D'où les points d'accroche ci-dessous.

   HAUTEUR ET POINTS D'ARRÊT, À RECALCULER À CHAQUE CHANGEMENT DU NOMBRE DE MOTS.
   Le JS ne lit pas ces valeurs, il lit le nombre de .wd présents : les laisser
   telles quelles après avoir touché à la liste désynchronise l'arrêt et le mot
   affiché, sans qu'aucune erreur ne s'affiche nulle part.

   Deux découpages cohabitent ici, et c'est toute la difficulté. Le JS partage la
   course en N zones égales et affiche le mot k dans la zone k. Les points d'arrêt,
   eux, se répartissent sur toute la course avec le premier au tout début et le
   dernier tout à la fin, donc à k × course/(N−1). Ces deux découpages ne coïncident
   pas, et c'est voulu : chaque arrêt tombe ainsi à l'intérieur de sa zone, avec de
   la marge de part et d'autre. Un arrêt posé sur une frontière de zone bascule
   d'un mot pour un pixel d'écart entre le point demandé et le point atteint.
   Vérifié le 28/08/2026 : un premier réglage à N parts égales plaçait le deuxième
   point exactement sur le seuil, et la page s'arrêtait au bon endroit en affichant
   le mot précédent. Découpage corrigé, pas la hauteur.

   Réglage retenu, une part de 37,5vh par mot, tenue depuis le 26/08/2026 quelle
   que soit la liste, pour que la vitesse de lecture ne change pas sous les doigts.
   La section a fait 340vh, puis 250vh à quatre mots, puis 212,5vh pendant quelques
   heures le 28/08/2026 quand la liste est tombée à trois, et elle est revenue à
   250vh le même jour quand OSE. est venu clore la série. Quatre mots donc 150vh de
   course, donc 250vh de hauteur, et des points à 0, 50vh, 100vh et 150vh, soit une
   progression de 0, 33 %, 67 % et 100 % de la course pour des zones qui commencent
   à 0, 25 %, 50 % et 75 %. Chaque arrêt tombe bien dans sa zone. */
.words{height:250vh;position:relative}
/* scroll-snap-stop:always est la clé : sans lui le navigateur choisit le point
   d'arrivée en fonction de l'élan et en franchit plusieurs d'un coup, ce qui
   ramènerait exactement le problème de départ. Avec lui il s'arrête à chaque
   point, quelle que soit la force du geste.
   Les quatre repères sont vides, hauts d'un pixel et hors flux : ils ne servent
   qu'à poser une position d'arrêt, la hauteur de la section reste dictée par
   .words. aria-hidden en HTML, ils n'ont rien à raconter. */
/* L'accroche se déclare sur l'élément qui défile, donc html, et pas sur .words.
   Elle reste dans cette page et ne descend pas dans style.css : les quatre points
   n'existent que sur l'accueil, et les 7 autres pages n'ont rien à accrocher.

   « proximity » et surtout pas « mandatory ». Mesuré le 26/08/2026 : avec
   mandatory, les quatre points capturent la page entière et pas seulement la
   section. Une demande d'arrêt à 300 px atterrissait à 902, une à 4 200 px
   revenait à 2 102. Autrement dit le héros, la galerie d'événements et les
   témoignages devenaient impossibles à regarder tranquillement, le navigateur
   ramenait toujours vers le mot le plus proche. En proximity, les mêmes quatre
   demandes tombent au pixel exact et le reste de la page redevient libre.
   C'est scroll-snap-stop:always ci-dessous qui tient l'arrêt sur chaque mot,
   pas la sévérité du type. */
html{scroll-snap-type:y proximity}
.wsnap{position:absolute;left:0;width:100%;height:1px;scroll-snap-align:start;scroll-snap-stop:always;pointer-events:none}
/* Position nommée et pas nth-of-type : le bloc sticky est un div lui aussi, une
   règle fondée sur l'ordre se décalerait au premier élément ajouté dans la
   section. Ces valeurs se relisent à côté du calcul de course ci-dessus. */
.wsnap.s1{top:0}
.wsnap.s2{top:50vh}
.wsnap.s3{top:100vh}
/* LE QUATRIÈME ARRÊT EST PASSÉ DE 150vh À 131.25vh LE 08/09/2026. Alexandre :
   « quand on arrive sur le dernier mot, ça switche directement vers le bas, on
   n'a pas le temps de le voir, mets un petit temps d'attente comme pour les
   autres ». Il décrivait exactement le défaut.
   LA CAUSE, MESURÉE. La course fait 150vh et le script la partage en quatre
   zones égales de 37,5vh, `target = floor(p * 4)`. Les arrêts, eux, suivaient
   `k × course/(N−1)`, soit 0, 50, 100 et 150. Les trois premiers tombent bien
   À L'INTÉRIEUR de leur zone ; le quatrième tombait sur 150, c'est-à-dire sur
   le dernier pixel d'épinglage. Le scroll s'y immobilisait au moment précis où
   la section se dépingle : OSE. s'affichait et partait dans le même geste,
   avec 0 vh de course restante contre 50, 100 et 150 pour les autres.
   131.25vh est le MILIEU de la zone du mot 3, [112.5 ; 150[. C'est le point le
   plus éloigné des deux seuils, donc celui qui résiste aux arrondis de pixels :
   le carnet garde trace d'un réglage antérieur qui posait un arrêt pile sur un
   seuil et affichait le mot précédent. Il reste 18,75vh de course après lui, du
   même ordre que les 12,5vh qui séparent s3 du mot suivant.
   SI UN MOT EST AJOUTÉ OU RETIRÉ, tout se recalcule : hauteur = (N+2) × 37,5vh,
   course = hauteur − 100vh, et le dernier arrêt au milieu de sa zone. */
.wsnap.s4{top:131.25vh}
.words-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;gap:18px}
.wline{position:relative;height:clamp(5rem,17vw,13rem);width:100%;display:flex;justify-content:center}
.wd{
  position:absolute;font-family:var(--disp);text-transform:uppercase;line-height:1;
  font-size:clamp(4.6rem,16vw,12.5rem);
  opacity:0;filter:blur(14px);transform:scale(.92);transition:opacity .45s,filter .45s,transform .45s;
}
.wd.on{opacity:1;filter:blur(0);transform:scale(1)}
/* Une couleur par mot depuis le 28/08/2026. Le premier reste neutre parce qu'il
   ouvre la série, puis chaque coach a le sien, l'argent de Juan puis l'or d'Emy,
   et le quatrième revient au blanc parce qu'il porte la marque et doit ressembler
   au logo, pas à un troisième accent. Ne pas colorer le premier, on aurait alors
   quatre couleurs vives d'affilée à 12,5rem de corps.
   Contraste sur le fond ink : argent 10,85:1, or 5,51:1, les deux passent. */
.wd:nth-child(1){color:var(--paper)}
.wd:nth-child(2){color:var(--juan)}
.wd:nth-child(3){color:var(--emy)}
.wd:nth-child(4){color:var(--paper)}
/* Reprise exacte de .brand em dans style.css, la règle du point du logo. Elle est
   recopiée ici plutôt que descendue dans le noyau partagé : .wd n'existe que sur
   l'accueil, et la règle du projet veut qu'un composant descende dans style.css à
   partir de la deuxième page qui l'utilise, jamais avant. Si le point du logo
   change de couleur un jour, il faut changer les deux. */
.wd em{font-style:normal;color:var(--emy)}
.wsub-t{
  font-family:var(--disp);text-transform:uppercase;font-size:clamp(1.15rem,2.1vw,1.75rem);
  line-height:1.1;text-align:center;min-height:1.1em;transition:opacity .3s;padding-inline:20px;
}
.wsub{
  font-size:clamp(14.5px,1.35vw,16.5px);line-height:1.6;color:#C9C8C0;
  text-align:center;min-height:3.2em;max-width:44ch;transition:opacity .3s;padding-inline:20px;
}
.words-sticky .btn{margin-top:10px}

/* ════════ SPLIT COACHS ════════ */
/* Le bandeau reprend la phrase de crédibilité (diplômes, parcours) qui vivait
   dans l'ancienne section « Ce qu'on t'apporte ». Elle parle des deux coachs :
   sa place est juste au-dessus de leurs deux portraits, pas 3 000 px plus haut. */
/* padding-block et pas le raccourci « padding » : celui-ci remettait à zéro le
   padding-inline hérité de .wrap et collait le titre au bord gauche de l'écran. */
.chead{padding-block:clamp(58px,7vw,96px) clamp(26px,3.4vw,42px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:end}
.chead-p{color:#C9C8C0;font-size:16.5px;max-width:50ch}

/* ══════════ POURQUOI CE NOM, 09/09/2026 ══════════
   Le bloc qui ferme la section des deux coachs. Le raisonnement éditorial est dans
   le commentaire d'index.html ; ici, la forme.
   UNE BANDE ET PAS UN PARAGRAPHE POSÉ. Première version, le texte était simplement
   aligné sous le split : Alexandre a demandé « un vrai paragraphe/bloc ». Il sort
   donc du .wrap et va d'un bord à l'autre, même technique que le triptyque de
   mind-motion.html, fond relevé d'un cran et deux filets. Le bord de l'écran fait
   le cadre, ce qui suffit à en faire un objet sans lui ajouter ni encadré ni ombre.
   ELLE SERT AUSSI DE RESPIRATION. Le split fait 92svh et le rail des événements
   s'épingle juste après : sans elle, un plein écran de photos touche une section
   qui retient le défilement pendant 2,8 écrans.
   LE TEXTE EST CENTRÉ DEPUIS LE 09/09/2026, SUR DEMANDE D'ALEXANDRE, « centre le
   texte ». LA MISE EN GARDE DU 05/09 RESTE VRAIE ET ELLE EST COMPENSÉE, PAS IGNORÉE :
   au-delà de quatre ou cinq lignes, l'œil cherche le début de chaque ligne ailleurs.
   La mesure est donc RESSERRÉE à 52ch, contre 62 quand le texte était aligné à
   gauche, et le texte lui-même a été raccourci. MESURÉ, PAS ESTIMÉ : à 44ch le
   paragraphe tombait sur SEPT lignes de 403 px et le bloc se lisait comme un losange ;
   à 52ch il en fait cinq. SI LE TEXTE S'ALLONGE UN JOUR, C'EST LUI QU'IL FAUT COUPER,
   pas la mesure qu'il faut élargir : au-delà de six lignes centrées, le défaut du
   05/09 revient.
   LE SÉLECTEUR EXCLUT .eyeb NOMMÉMENT, ET CE N'EST PAS DE LA PRUDENCE DÉCORATIVE.
   Écrit « .why p », il pèserait une classe et un élément et battrait « .eyeb », qui
   n'en pèse qu'une : le surtitre sortirait en Archivo 18 px gris au lieu du mono
   11 px argent des dix autres surtitres du site. Ce piège a déjà coûté quatre
   corrections sur ce projet, .jhead p le 03/09, .signe .sg-t p le 05/09,
   .prose.esc p le 05/09 et .pq-sign le 08/09. */
.whyband{width:100vw;margin-left:calc(50% - 50vw);
  padding-block:clamp(52px,6vw,88px);
  padding-inline:max(var(--gut),calc((100vw - var(--wrap)) / 2 + var(--gut)));
  background:#131410;border-block:1px solid var(--line)}
.why{max-width:52ch;margin-inline:auto;text-align:center}
.why > p:not(.eyeb){margin-top:clamp(16px,1.8vw,22px);color:#C9C8C0;
  font-size:clamp(17px,1.5vw,19.5px);line-height:1.76}
/* L'or du logo sur le premier « Ose », et sur lui seul. `em` est le même balisage que
   `.brand em` du logo et que `.wd em` du dernier mot géant : c'est la marque qui
   s'écrit, pas une emphase. L'italique est donc annulée, comme aux deux autres endroits. */
.why em{color:var(--emy);font-style:normal}
.split{display:flex;height:92svh;min-height:560px}
.pane{position:relative;flex:1;overflow:hidden;transition:flex .65s cubic-bezier(.6,0,.2,1);display:flex;align-items:flex-end}
.pane:hover{flex:1.9}
.pane img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s;filter:saturate(.92)}
.pane:hover img{transform:scale(1.05)}
/* z-index obligatoire : sans lui le pseudo-element se peint SOUS l'image (tout en auto,
   ::before passe avant img dans l'ordre du DOM) et le voile n'a aucun effet. */
.pane::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,15,12,.22),rgba(14,15,12,.5) 50%,rgba(14,15,12,.96) 90%)}
.pane .in{position:relative;z-index:2;padding:clamp(24px,3.5vw,48px);width:100%}
/* Les marques sont des SVG depuis le 05/09/2026, plus des caractères : la
   taille ne se règle donc plus en font-size. Le trait suit la couleur du
   panneau par currentColor. */
/* La marge basse est arrivée le 05/09/2026 : « j'ai l'impression que c'est
   trop attaché ». Anton porte peu d'approche haute, l'écart visuel est plus
   serré que l'écart mesuré. */
.pane .sym{line-height:0;color:var(--paper);margin-bottom:clamp(12px,1.3vw,18px)}
.pane .sym svg{display:block;width:clamp(30px,2.6vw,38px);height:auto}
.pane.j .sym{color:var(--juan)}
.pane.e .sym{color:var(--emy)}
.pane h3{font-family:var(--disp);text-transform:uppercase;font-size:clamp(2.6rem,6vw,5.4rem);line-height:.95}
/* Le panneau portait une étiquette écrite par nous (« La force · arts martiaux,
   armée, aventure »), qui répétait la phrase de crédibilité du bandeau. Il porte
   maintenant les mots du coach lui-même : la promesse que Juan a dictée le
   25/08/2026, la devise qu'Emy a fournie le 23/08. Rien d'inventé, et le visiteur
   retrouve la même phrase en arrivant sur la page profil. */
/* min-height de deux lignes : la phrase de Juan en fait deux, celle d'Emy une
   seule, et le bloc est collé en bas du panneau. Sans ça les deux prénoms se
   retrouvent à 24 px de hauteur d'écart, ce qui se voit immédiatement sur un
   split. Sous 980 px les panneaux s'empilent, le point ne se pose plus. */
.pane .tag{margin-top:14px;font-size:16px;line-height:1.5;color:#DCDBD4;max-width:32ch;min-height:3em;text-wrap:balance}
.pane .more{
  margin-top:16px;display:inline-flex;gap:10px;align-items:center;font-weight:700;font-size:14px;
  opacity:0;transform:translateY(8px);transition:opacity .35s .1s,transform .35s .1s;
}
.pane:hover .more{opacity:1;transform:none}
.pane + .pane{border-left:1px solid var(--line)}

/* Les deux teasers d'histoire ont quitté l'accueil le 26/08/2026 (`.story2`, `.sto`,
   `.chips`, et le titre « Deux parcours, un même déclic »). Ils racontaient en 1 040 px
   ce que juan.html et emy.html racontent en entier, juste sous un split qui invite
   déjà à y aller. Le split est le teaser. Ne pas les réinstaller. */

/* ════════ ÉVÉNEMENTS HORIZONTAUX ════════ */
/* 280vh et plus 340 : depuis que le détail vit sur evenements.html, la piste ne
   compte plus que 4 cartes. À 340vh le défilement horizontal traînait. */
.evh{height:280vh;position:relative}
.evh-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
/* Grille à deux colonnes depuis le 03/09/2026, même grammaire que .chead : titre
   à gauche, prose à droite, alignées par le bas. La prose est posée à côté et non
   dessous pour une raison mesurée, pas par goût. .evh-sticky tient dans une seule
   fenêtre, et le budget vertical y est serré : tête 193 px, marge 34, carte
   min(60svh,560px). À 798 px de haut il reste 91 px de marge, à 720 px il en reste
   60. Un paragraphe sous le titre porte la tête à 290 px et mange ces 91 px : le bas
   des cartes est rogné de 3 px à 798, de 18 px à 720, et le rayon de 14 px s'aplatit.
   À côté, la tête reste à 193 px quelle que soit la longueur du texte. Coût nul.
   Si le texte devait un jour passer dessous, il faudrait d'abord baisser la carte
   de 60svh à environ 52svh. */
.evh-head{padding:0 var(--gut);margin-bottom:34px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:end}
.evh-p{color:#C9C8C0;font-size:16.5px;line-height:1.6;max-width:50ch;margin:0}
.evh-track{display:flex;gap:clamp(16px,2vw,28px);padding-inline:var(--gut);will-change:transform}
.ecard{
  position:relative;flex:0 0 auto;width:min(78vw,540px);height:min(60svh,560px);
  border-radius:14px;overflow:hidden;border:1px solid var(--line);
}
.ecard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.95)}
/* Même correctif que .ev-img.sidibou sur evenements.html, pour la même raison et
   avec la même valeur, mais déclenché à l'inverse : là-bas le drapeau se perdait
   sur grand écran, ici il se perd sur téléphone.
   La carte fait width:min(78vw,540px) / height:min(60svh,560px). Sur un 1440×900
   ça donne 540×540, pile le format du fichier : zéro rognage, le drapeau est
   entier, rien à corriger. Sur un téléphone la carte devient 82vw × 60svh, mesuré
   308×487 à 375 px, soit un ratio de 0,63 contre 1 pour le fichier. `cover` ne
   montre alors que 63 % de la largeur, centrés, et les 18,5 % coupés à gauche
   emportaient la moitié du disque blanc. Vérifié à l'écran le 30/08/2026, pas
   déduit : il restait l'étoile et un bout de croissant, coupés net par le bord.
   Comparé à 50, 30, 20 et 10 % : à 30 % le disque touche encore le bord, à 10 %
   le palmier sort du cadre à droite. À 20 % le disque est entier avec 21 px de
   marge, le palmier, la coupole et la mer tiennent tous les trois.
   La règle est volontairement SANS media query. Le jeu de rognage vaut 340 px sur
   téléphone mais 0 à 33 px sur ordinateur, donc passer de 50 à 20 % y déplace
   l'image de 10 px au maximum, invisible. Une media query n'ajouterait qu'une
   condition à maintenir.
   NE PAS APPLIQUER À .ecard img EN GÉNÉRAL : les trois autres cartes du rail sont
   cadrées au centre, les décaler abîmerait leur composition. */
.ecard.sidibou img{object-position:20% 50%}
.ecard::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,15,12,.12) 30%,rgba(14,15,12,.9) 92%)}
.ecard .in{position:absolute;z-index:2;inset:auto 0 0 0;padding:clamp(20px,2.5vw,32px)}
.ecard .d{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--juan)}
.ecard h3{font-family:var(--disp);text-transform:uppercase;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1;margin-top:8px}
.ecard .loc{margin-top:8px;color:#C9C8C0;font-size:14px}
.ecard .btn{margin-top:16px;padding:11px 20px;font-size:13.5px}
/* Plus aucune carte n'est .nopic depuis le 29/08/2026 : la retraite, seule à l'avoir
   portée, a reçu sa photo. La règle reste, au même titre que le garde-fou :has() de
   la fiche correspondante sur evenements.html. Un événement annoncé avant d'avoir sa
   photo, ça arrive, et sans elle le rail afficherait un rectangle noir vide. */
.ecard.nopic{background:linear-gradient(150deg,#1A1B16,var(--ink));border-top:2px solid var(--emy)}
.ecard.nopic::before{background:none}
.ecard.cta-card{background:linear-gradient(150deg,#1A1B16,var(--ink));display:flex;align-items:center;justify-content:center;text-align:center}
.ecard.cta-card .in{position:static;padding:32px}
.ecard.cta-card h3 em{font-style:normal;color:var(--emy)}
.ecard .pill{
  position:absolute;z-index:2;top:16px;left:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:7px 13px;border-radius:999px;background:rgba(14,15,12,.55);
  border:1px solid var(--line);backdrop-filter:blur(6px);
}
.ecard .pill.hot{color:var(--ink);background:var(--emy);border-color:var(--emy)}
/* Trois états de pastille, et ils veulent dire trois choses différentes.
   Or plein : le prochain départ, il n'y en a qu'un sur le site à la fois.
   Filet gris (défaut) : un rendez-vous à date unique, on le rate si on le rate.
   Filet or : un rendez-vous récurrent, il revient.
   Le fond de la pastille récurrente est presque opaque, alors que les deux autres
   sont en verre. C'est la photo qui commande cette valeur, pas le goût.
   Mesuré le 29/08/2026 sur step.jpg : l'or sur un voile à .55 tombait à 1,56:1, cette
   photo ayant un rideau doré très clair (231,218,150) juste sous la pastille.
   Remesuré le 30/08/2026, la carte étant passée à l'affiche mind-motion.jpg, comme la
   consigne de la ligne suivante l'exigeait. Le verdict ne bouge pas, il s'aggrave :
   l'affiche est beige clair de bord à bord et le mot « Training » y est écrit en blanc
   pur juste sous la pastille. À .55 l'or tombe à 2,26:1 sur ordinateur et 3,20:1 sur
   téléphone, sous le seuil dans les deux cas. À .93 il donne 7,39:1 et 7,68:1, soit
   AAA. La valeur reste donc .93, pour une raison neuve.
   Même problème et même remède que le badge de juan.html sur son ciel pâle.
   Si la photo de cette carte change encore, refaire la mesure. */
.ecard .pill.loop{
  color:var(--emy);border-color:color-mix(in srgb,var(--emy) 55%,transparent);
  background:rgba(14,15,12,.93);
}

/* ════════ MUR D'AVIS ════════ */
/* A remplacé le bloc polaroïds le 28/08/2026. Les polaroïds étaient de vrais
   mots de vrais participants, mais anonymes, photographiés, et tous issus du
   seul séjour de Tunisie. Les avis Facebook sont nominatifs, datés, vérifiables
   par n'importe qui sur la page d'Emy. La photo images/polaroids.jpg n'est plus
   appelée nulle part : elle n'a pas été supprimée, elle attend une place sur la
   page du séjour. Ne pas la jeter au prochain nettoyage d'images. */

/* Anton place le circonflexe de Ô au-dessus de la hauteur de capitale. À
   line-height .96, le commun des .h2, l'accent de NÔTRES vient effleurer la
   virgule de LEURS MOTS, juste au-dessus. 1.05 décolle les deux sans que
   l'écart avec les autres titres du site se voie. Le réglage est attaché à ce
   titre-là : s'il perd son accent, il peut reprendre le .96 commun.
   Même risque latent sur evenements.html, « On ne part pas / de ZÉRO. » : il
   passe parce que ce titre est réduit à 2,9 rem. Signalé, pas corrigé ici. */
#avis .h2{line-height:1.05}

.av-src{margin-top:22px;max-width:74ch;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--mut);line-height:1.9}
.av-src b{font-weight:400;color:var(--emy)}
/* Les deux règles `.av-src a` sont parties le 30/08/2026 (v2.22) avec le lien vers
   la page Facebook d'Emy : le paragraphe ne contient plus qu'un chiffre. Si la
   provenance revient un jour, le lien souligné du footer donne le même style. */

/* La citation détachée. Anton écrirait ça en capitales condensées, donc en
   criant : une phrase dite par quelqu'un se lit en Archivo, corps large. */
.av-hero{
  margin-top:clamp(46px,6vw,84px);padding-block:clamp(32px,4.4vw,56px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.av-hero blockquote{font-size:clamp(1.45rem,3.2vw,3.05rem);line-height:1.2;letter-spacing:-.012em;color:var(--paper);max-width:28ch}
.av-hero blockquote em{font-style:normal;color:var(--emy)}
.av-hero figcaption{margin-top:20px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
/* Le nom ne s'éclaircit plus en --paper : il suivrait sinon une autre règle que
   les treize signatures du mur, à trois centimètres de distance. */
.av-hero figcaption b{font-weight:400}

.av-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(15px,1.5vw,22px);margin-top:clamp(38px,5vw,70px);align-items:start}
.av-col{display:flex;flex-direction:column;gap:clamp(15px,1.5vw,22px)}
.av-c{
  position:relative;border:1px solid var(--line);border-radius:14px;
  padding:clamp(20px,2vw,28px);
  background:linear-gradient(158deg,rgba(239,238,233,.04),transparent 60%);
  transition:border-color .35s;
}
/* Le filet vertical porte l'attribution : or pour Emy, argent pour Juan. C'est le
   seul endroit du site où la règle de couleur des deux coachs sert à trier une
   liste plutôt qu'à décorer. Le jour où les avis de Juan arrivent, ils prennent
   .av-c.juan et rien d'autre ne bouge. */
.av-c::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:2px;background:var(--emy);opacity:.6;transition:opacity .35s}
.av-c.juan::before{background:var(--juan)}
/* Un seul état au survol, sur la carte qu'on est en train de lire. Le filet
   passe à pleine opacité et le filet du cadre s'éclaircit, rien d'autre ne
   bouge : treize cartes qui réagissent chacune de trois façons, ce serait un
   sapin de Noël. */
.av-c:hover{border-color:rgba(239,238,233,.26)}
.av-c:hover::before{opacity:1}
.av-c blockquote{font-size:15px;line-height:1.62;color:#D8D7CF}
.av-c figcaption{margin-top:15px}
/* Nom et contexte partagent le même traitement depuis le 29/08/2026 : mono, bas
   corps, capitales espacées, gris sourd. La citation est ce qu'on lit, la
   signature est ce qu'on vérifie après coup, elle n'a plus à rivaliser avec
   elle. Les deux règles sont fusionnées exprès : les garder séparées inviterait
   à les faire diverger de nouveau, alors que c'est leur identité qui est voulue.
   Contraste mesuré le 29/08/2026 : 5,14:1 sur le fond de carte au point le plus
   clair du voile, 5,54:1 sur le fond nu. Au-dessus du seuil AA de 4,5 malgré les
   10,5 px. Si --mut est un jour assombri, revérifier ici d'abord : c'est le plus
   petit texte du site. */
.av-c .n,.av-c .m{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.av-c .m{margin-top:4px}
/* .av-note a été supprimée le 30/08/2026 (v2.22) en même temps que le paragraphe
   qu'elle habillait, en bas du mur d'avis. Rien d'autre ne l'utilisait. */

/* ════════ RESPONSIVE ════════ */
/* La règle @media (min-width:901px){.vh-strip{display:contents}} vivait ici,
   elle rendait aux bulles leur position absolue sur grand écran. Partie avec
   elles le 02/09/2026. */

@media (max-width:900px){
  .vh{min-height:auto;padding:118px 0 34px;align-items:start;justify-items:stretch}
  /* Le rang des pratiques passe en deux colonnes. Mesuré à 375 px : sur une
     ligne il réclame 335 px pour 335 disponibles et chaque libellé se coupe en
     deux, « EN / SALLE ». Les faire tenir de force demandait 9 px, trop petit
     pour une information qu'on veut lisible d'un coup d'œil.
     Les séparateurs sautent : un point médian en fin de ligne resterait pendu
     dans le vide, et aucun sélecteur ne sait dire « dernier de la ligne ». Sans
     séparateur, la grille sépare toute seule. */
  .vh-chips{display:grid;grid-template-columns:1fr 1fr;gap:12px 0;margin-top:26px;font-size:11.5px}
  .vh-chips span{justify-content:center;gap:0}
  .vh-chips span::after{content:none}
  .vh-cta{flex-direction:column;align-items:stretch}
  .vh-cta .btn,.vh-cta .chip{justify-content:center}
  /* Le repère de défilement vertical n'apprend rien à quelqu'un qui tient un
     téléphone. */
  .scroll-cue{display:none}
}

/* La bulle WhatsApp flottante occupe le coin bas droit. Sous 640 px le bas du
   héros remonte au-dessus d'elle : la bande garde sa dernière carte accessible
   au pouce au lieu de finir sous la pastille verte. */
@media (max-width:640px){.vh-in{padding-bottom:72px}}

/* ════════ LE BLANC AVANT CHAQUE TÊTE DE SECTION, MOBILE, 10/09/2026 ════════
   Alexandre, capture à l'appui : « le texte "notre terrain, nos événements" est
   trop collé par rapport au paragraphe au-dessus, et ça fait un espace différent
   à chaque paragraphe ».
   MESURÉ AVANT DE CORRIGER, à 375 px, en relevant le bas d'un bloc et le haut du
   suivant : **53 px** entre la fin du paragraphe du nom et le surtitre de la
   section des séjours, quand les autres passages de section en comptent 166 et 600.
   D'OÙ VIENT CE 53. `.evh` et `.words` sont les deux sections ÉPINGLÉES de
   l'accueil : sur grand écran elles occupent l'écran entier et n'ont aucun besoin
   de padding, leur contenu est centré verticalement dans `.evh-sticky`. Sous
   980 px l'épinglage ne joue plus, elles repassent en flux normal, et elles
   démarrent alors au ras du bloc précédent. **Le seul blanc qui restait était le
   padding bas du voisin.**
   L'ÉCHELLE EST LA MÊME POUR LES QUATRE TÊTES, c'est ce qu'il demande : 76 px
   avant un surtitre de section, quel que soit ce qui précède. Le padding bas de
   la bande du nom passe de 52 à 64 pour que le blanc se répartisse des deux
   côtés du filet plutôt que de tomber entièrement après lui.
   NE PAS RÉGLER ÇA SUR `.sect` : les sections ordinaires portent déjà 90 px et
   n'ont jamais serré. Le défaut ne concerne que les deux sections épinglées. */
@media (max-width:640px){
  .evh-head{padding-top:76px}
  .words-sticky{padding-top:76px}
  .chead{padding-block:76px 26px}
  .whyband{padding-block:64px}
  /* L'INTÉRIEUR DES TÊTES SUIT, sinon on aère autour d'un bloc qui reste serré.
     En colonne unique, l'écart titre → prose EST le `gap` de la grille, 24 px à
     375 : il passe à 34. Et l'écart surtitre → titre, 16 px, à 22.
     CE SECOND RÉGLAGE FAIT D'UNE PIERRE DEUX COUPS. `style.css` protège déjà
     `.eyeb + h1` et `.eyeb + h3` d'un `margin-top:max(.24em,10px)`, posé le
     08/09 quand les capitales accentuées d'Anton mordaient le surtitre : Anton
     monte à 1,179 em au-dessus de la ligne de base et les titres tournent à
     `line-height` .96, donc les glyphes débordent leur propre boîte par le haut.
     `.h2` n'était PAS dans cette liste, et « Là où tout prend vie » porte un À et
     un Ù. Les 22 px couvrent le dépassement en même temps qu'ils donnent l'air. */
  .chead,.evh-head{gap:34px}
  .eyeb + .h2{margin-top:22px}

  /* ════════ L'AFFICHE ENTIÈRE SUR TÉLÉPHONE, 10/09/2026 ════════
     Alexandre, capture à l'appui : « la photo de l'événement n'est pas entière,
     est-il possible de faire quelque chose sur mobile ? »
     LE CALCUL. La carte du rail mesure 308 × 487 à 375 px, ratio 0,63, quand
     l'affiche d'Emy est CARRÉE. En `cover`, il n'en restait donc que 63 % de la
     largeur : le titre et « Édition 4 » passaient, les trois pastilles rondes
     sortaient du cadre à gauche et à droite. Sur grand écran le problème n'existe
     pas, la carte y fait 540 × 540, exactement le format du fichier.
     `contain` PLUTÔT QU'UNE CARTE CARRÉE. Rendre la carte carrée aurait changé le
     rail entier, y compris les trois autres cartes qui sont des photos et que
     `cover` sert très bien. Ici l'affiche se pose au lieu de se recadrer, ce qui
     est déjà l'arbitrage du 29/08 sur `evenements.html` : « une affiche posée
     dans une marge se lit comme une affiche, une affiche étirée se lit comme un
     bug ». C'est une composition fermée, elle ne se recadre pas.
     ALIGNÉE EN HAUT ET PAS CENTRÉE. Centrée, elle laissait deux bandes de 90 px
     et le bloc de texte, qui en fait 171, remontait sur elle. Collée en haut,
     l'affiche occupe 308 px et libère 180 px dessous : le texte tombe sur le
     fond, l'affiche reste entière.
     ET LE VOILE RECULE. Il partait de 30 % de la hauteur pour asseoir du texte
     blanc sur une photo ; sur l'affiche entière il en aurait noirci le bas.
     Il ne commence donc qu'à 62 %, juste sous elle. */
  .ecard.poster img{object-fit:contain;object-position:50% 0;background:#12130F}
  .ecard.poster::before{background:linear-gradient(180deg,rgba(14,15,12,0) 62%,rgba(14,15,12,.92) 74%)}
}
@media (max-width:980px){
  .chead,.evh-head{grid-template-columns:1fr}
  .split{flex-direction:column;height:auto}
  .pane{height:52svh}
  .pane + .pane{border-left:0;border-top:1px solid var(--line)}
  .pane .more{opacity:1;transform:none}
  /* Le mur devient une bande qui défile au pouce, comme .evh-track juste en
     dessous. display:contents retire la boîte des trois colonnes sans toucher
     aux cartes : le HTML reste écrit une seule fois, et les treize cartes se
     remettent à la file dans l'ordre de lecture. La dérive JS s'applique aux
     colonnes, donc à des éléments qui n'ont plus de boîte : elle ne fait rien
     ici, sans qu'il y ait besoin de la débrancher. */
  .av-col{display:contents}
  .av-wall{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:4px var(--gut) 14px;margin-inline:calc(var(--gut) * -1);scrollbar-width:none;
  }
  .av-wall::-webkit-scrollbar{display:none}
  .av-c{flex:none;width:min(330px,80vw);scroll-snap-align:center}
  .av-hero blockquote{max-width:none}
  .evh{height:auto}
  .evh-sticky{position:static;height:auto;padding-block:0}
  .evh-track{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;-webkit-overflow-scrolling:touch}
  .ecard{scroll-snap-align:center;width:82vw;height:60svh}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .loader{display:none}
  .cur,.cur2{display:none}
  .vh h1 .l span{transform:none}
  /* Tout ce qui entre en opacity:0 doit être remis à 1 ici : animation:none fige
     l'état de départ, et le rang des pratiques resterait invisible pour de bon.
     .vh-rule n'y figure pas volontairement, elle n'anime qu'un scaleX et son
     état naturel est déjà le bon. .vhb et .vh-mark sont partis avec les bulles
     et le filigrane le 02/09/2026. */
  .vh-sub,.vh-cta,.vh-eyeb,.scroll-cue,.vh-chips{opacity:1}
  .words{height:auto;padding-block:90px}
  /* Les mots sont déjà tous à l'écran ici, il n'y a plus rien à faire
     défiler : garder l'accroche reviendrait à immobiliser la page sur des
     repères posés dans le vide, la section n'ayant plus sa hauteur en vh.
     Le premier réglage à couper pour qui utilise ce mode, précisément parce
     qu'il sert souvent à échapper aux défilements contraints. */
  html{scroll-snap-type:none}
  .wsnap{display:none}
  .words-sticky{position:static;height:auto;overflow:visible}
  .wline{height:auto;position:static;flex-direction:column;align-items:center;gap:10px}
  .wd{position:static;opacity:1;filter:none;transform:none}
  /* Sans défilement piloté, le sous-titre resterait figé sur le premier apport :
     le JS écrit les quatre d'un coup, chacun sous son mot (.wstatic). */
  .wstatic{text-align:center;margin-bottom:34px}
  .wstatic .wsub{min-height:0;margin-inline:auto}
  .evh{height:auto}
  .evh-sticky{position:static;height:auto}
  .evh-track{overflow-x:auto}
  .rv,.rvimg{opacity:1;transform:none;clip-path:none}
  html{scroll-behavior:auto}
  @view-transition{navigation:none}
}
