/* ══════════ LES POLICES SONT SERVIES PAR LE SITE, 06/09/2026 (v3.38) ══════════
   Elles venaient de fonts.googleapis.com, seule ressource externe du site.
   CE QUE LE RAPATRIEMENT FAIT GAGNER, ET CE N'EST PAS DES OCTETS. Un visiteur
   telechargeait deja a peu pres le meme poids de woff2 ; ce qui coutait, c'etait
   le chemin pour y arriver. Le navigateur devait resoudre un nom de domaine,
   ouvrir une connexion chiffree, lire une feuille de style distante, y trouver
   l'adresse des fichiers, resoudre UN SECOND nom de domaine, ouvrir une SECONDE
   connexion chiffree, et alors seulement commencer a charger une police. Ici,
   les @font-face sont dans la feuille que le navigateur est deja en train de
   lire, et les fichiers sont sur le domaine ou il est deja connecte. Deux
   resolutions DNS, deux poignees de main TLS et un aller-retour en moins, sur
   le chemin critique, c'est-a-dire avant le premier texte affiche.
   ET LE VISITEUR NE PARLE PLUS A GOOGLE. Aucune requete vers un tiers depuis
   une page du site, donc aucune adresse IP transmise a personne. Le site n'a
   plus aucune ressource externe : la politique de securite du contenu a ete
   refermee sur 'self' dans netlify.toml le meme jour.
   QUATORZE FICHIERS, DEUX SOUS-ENSEMBLES. `latin` couvre le francais courant,
   `latin-ext` sert au seul caractere du site qui en sort, le OE lie de « coeur »
   et « soeur ». Le navigateur ne telecharge un sous-ensemble que si un caractere
   de la page tombe dans son unicode-range : ces deux lignes ne coutent rien
   quand elles ne servent pas. NE PAS retirer latin-ext en croyant nettoyer.
   font-display:swap est conserve tel quel : le texte s'affiche tout de suite
   dans la police de secours, puis bascule. Jamais de page blanche.
   POUR METTRE A JOUR une graisse ou en ajouter une : reprendre la feuille de
   Google avec un vrai en-tete de navigateur (sans lui, elle renvoie du TTF au
   lieu du WOFF2), telecharger les .woff2 dans fonts/, recopier les @font-face
   ici en changeant l'adresse. Les fichiers ont un nom stable et un an de cache. */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/anton-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/anton-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/archivo-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/archivo-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/archivo-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/archivo-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/archivo-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/archivo-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/archivo-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/archivo-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* OSE, noyau partagé par toutes les pages.
   Ce qui est propre à une page (héros, préloader, sections uniques) reste dans son <style>. */

/* ════════ TOKENS ════════ */
:root{
  --ink:#0E0F0C;
  --paper:#EFEEE9;
  /* Palette refaite le 28/08/2026 : les clients ont refusé l'olive et le grenat.
     Juan = argent, Emy = or, et la marque suit Emy comme avant. Les deux tiennent sur
     fond ink (10,85:1 et 5,51:1). Aucun des deux ne supporte du blanc par-dessus
     (l'or plafonne à 3,49:1) : tout aplat prend du texte ink, qui remonte à 5,51:1
     sur l'or. --cta reste le ton de remplissage, c'est l'or lui-même.
     Deux limites connues et assumées. L'or a exactement la même clarté que --mut
     (1,01:1) : les deux ne se distinguent que par la saturation, ne jamais les poser
     l'un contre l'autre en petit corps. L'argent n'est qu'à 1,53:1 du --paper :
     il sert d'accent sur fond sombre, jamais de nuance au milieu d'un texte clair.
     C'est tout l'objet de --acctxt plus bas, lire ce commentaire avant d'y toucher. */
  --juan:#CAC2AF;
  --emy:#D4A542;
  --cta:#D4A542;
  --cta-h:#DAB15A;
  --mut:#8B8A82;
  --line:rgba(239,238,233,.14);

  --disp:'Anton',sans-serif;
  --body:'Archivo',sans-serif;
  --mono:'IBM Plex Mono',monospace;

  /* Réglages de gabarit : les pages de contenu (profils, coaching) resserrent la colonne
     et respirent davantage entre les blocs, parce qu'elles portent de la prose. */
  --gut:clamp(20px,4vw,64px);
  --wrap:1360px;
  --lh:1.55;
  --h2:clamp(2.4rem,6vw,5.2rem);
  --sect:clamp(90px,12vw,170px);

  /* Accent de la page. Or par défaut, les pages profil basculent sur leur couleur.
     L'aplat, lui, ne bascule pas : il reste or partout, c'est la couleur de marque. */
  --acc:#D4A542;
  --oacc:#CAC2AF;
  --accfill:#D4A542;
  --accfill-h:#DAB15A;
  --acctext:#0E0F0C;

  /* --acctxt : l'accent quand il est ENTOURÉ de texte clair, pas posé sur le fond sombre.
     Les deux situations n'ont pas les mêmes contraintes et une seule variable ne peut pas
     servir les deux. Sur fond ink l'argent est parfait (10,85:1). Au milieu d'un
     paragraphe il tombe à 1,06:1 contre le gris de prose, autant dire invisible :
     la lettrine de la page de Juan ne se voyait plus. Un argent plus sombre ne sauve
     rien, il faudrait viser une luminance de 0,24 et --mut est déjà à 0,253.
     Donc l'or, couleur de marque, reprend ces cinq endroits sur les deux pages profil.
     Par défaut --acctxt suit --acc : sur toutes les pages sauf juan.html, ils sont
     identiques et rien ne change. */
  --acctxt:var(--acc);
}

/* ════════ BASE ════════ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);background:var(--ink);color:var(--paper);
  line-height:var(--lh);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
/* Le `height:auto` est arrivé le 29/08/2026 et il n'est pas décoratif. Toutes les images
   du site portent leurs attributs `width` et `height`, ce qui est voulu : le navigateur
   réserve la place et la page ne saute pas au chargement. Mais sans `height:auto`, le jour
   où `max-width:100%` réduit la largeur, la hauteur reste clouée à l'attribut et l'image
   est écrasée. C'est arrivé à `groupe-soiree.jpg` sur evenements.html, carrée de 951 px
   affichée dans une colonne de 432 px : les gens sur la photo étaient étirés de 55 % en
   hauteur. Alexandre l'a vu à l'œil avant qu'aucune mesure ne le dise.
   Sans risque pour les images en `object-fit:cover` : elles passent toutes par une règle
   de classe (`.ph-bg img`, `.wk-img img`, `.ev-img img`…) qui gagne en spécificité.
   Audit fait après coup sur les 8 pages, zéro image déformée. */
img{display:block;max-width:100%;height:auto}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}
::selection{background:var(--emy);color:var(--ink)}
:focus-visible{outline:2px solid var(--emy);outline-offset:3px}

/* grain cinéma */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
}

/* ════════ GABARIT ════════ */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sect{padding-block:var(--sect);position:relative}
.eyeb{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.h2{font-family:var(--disp);text-transform:uppercase;font-weight:400;line-height:.96;font-size:var(--h2);margin-top:16px}
.h2 em{font-style:normal;color:var(--acctxt)}

/* ════════ NAV ════════ */
/* Au repos la barre est pleine largeur et transparente. Passé 40px de défilement
   (le seuil est dans js/site.js et dans le script de l'accueil, il n'a pas bougé)
   elle se replie en capsule flottante : .nav-in perd de la largeur, se décolle du
   bord haut, prend le verre sombre, une bordure au cheveu et des coins pleins.
   Demandé par Alexandre le 30/08/2026 d'après mita-core.github.io/epoch.

   Trois écarts volontaires avec leur version, le premier est le plus important.
   Leur capsule est un aplat vert acide opaque qui passe par-dessus le titre géant
   et le tranche net au défilement. Ici le fond est le verre sombre déjà utilisé
   partout ailleurs sur le site : le contenu passe derrière, floute, et se lit
   encore. Ensuite leur capsule est centrée, parce que leur nav est une série
   d'ancres sur une page unique ; la nôtre garde le logo à gauche et Réserver à
   droite, le site a six vraies pages et une seule action. Enfin la leur ne
   s'anime pas, elle apparaît d'un coup.

   Le fond et la bordure ont quitté .nav pour .nav-in : c'est .nav-in qui rétrécit.
   .nav garde inset:0 pour rester ancré en haut sur toute la largeur. */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;pointer-events:none}
/* Voile dégradé pleine largeur sous la capsule. Constaté au premier essai : dès que
   la barre rétrécit, le contenu de la page remonte jusqu'au bord haut de l'écran de
   chaque côté de la capsule et vient s'y coller. Sur l'accueil le paragraphe du héros
   est centré exactement là où la capsule se pose, on lisait une ligne coupée en deux
   au ras du cadre. C'est le défaut de la référence, reproduit à l'identique.
   Un dégradé sans bord ni filet ne redevient pas une barre : il n'a pas d'arête, la
   capsule continue de flotter, et plus rien n'arrive au ras du bord.
   150px parce que la capsule fait 87px de haut, marge comprise : le dégradé doit
   mourir franchement en dessous, sinon on devine sa limite. */
.nav::before{
  content:'';position:absolute;inset:0 0 auto 0;height:150px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(14,15,12,.92),rgba(14,15,12,0));
  opacity:0;transition:opacity .35s;
}
.nav.on::before{opacity:1}
/* Menu ouvert, le panneau est déjà un aplat ink plein écran : le voile n'ajoute rien
   et assombrirait le haut des liens. */
.nav-open .nav::before{opacity:0}
/* Sans ça, la bande transparente à gauche et à droite de la capsule continue
   d'avaler les clics sur toute la largeur. Invisible et pourtant bloquante :
   avant la capsule la barre occupait vraiment l'écran, ce n'est plus le cas. */
.nav-in{
  pointer-events:auto;
  max-width:var(--wrap);margin-inline:auto;padding:18px var(--gut);
  display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1;
  border:1px solid transparent;
  transition:max-width .5s cubic-bezier(.22,.61,.36,1),
             padding .5s cubic-bezier(.22,.61,.36,1),
             margin-top .5s cubic-bezier(.22,.61,.36,1),
             border-radius .5s cubic-bezier(.22,.61,.36,1),
             background-color .35s,border-color .35s;
}
/* --cap est la largeur visée de la capsule sur grand écran. Mesurée dans le
   navigateur polices chargées, pas devinée : logo 38,5px + les 6 liens 453,6px +
   Réserver 116,8px = 608,9px de contenu, plus 24+10 de padding et 2 de bordure,
   soit 645px au plus serré. 740 laisse deux respirations d'environ 47px entre les
   trois groupes, ce qui se lit comme une capsule et pas comme une barre coupée.
   La remesurer si un septième lien entre dans la barre ou si un libellé rallonge :
   trop serré les groupes se collent, trop large l'effet disparaît. */
.nav.on .nav-in{
  max-width:min(var(--cap,740px),calc(100% - 2 * var(--gut)));
  margin-top:12px;padding:10px 10px 10px 24px;
  border-radius:999px;border-color:var(--line);
  /* .88 et pas .74. Constaté à 375px : la capsule se pose pile sur le bouton or du
     héros, un aplat vif et large que 14px de flou n'atténuent pas. À .74 on lisait
     « ejoindre le prochain départ J-53 » au travers, en plein sur le logo. À .88 on
     devine encore le mouvement derrière, c'est ce qu'on veut d'un verre, mais plus
     aucun texte ne traverse. La barre pleine largeur d'avant n'avait pas ce souci :
     elle couvrait toute la ligne, il n'y avait rien à côté d'elle. */
  background:rgba(14,15,12,.88);backdrop-filter:blur(14px);
}
/* Menu mobile ouvert : la capsule se déplie. Sinon elle flotte avec son propre
   fond au-dessus du panneau plein écran, et le logo comme la croix se retrouvent
   rentrés de 44px vers l'intérieur (20 de marge + 24 de padding) alors que les liens
   du menu, eux, s'alignent sur --gut à 20px. Le décalage se voit.
   .nav.on dans le sélecteur n'est pas décoratif : sans lui la règle pèse deux classes
   contre trois et ne passe jamais. Vérifié dans le navigateur, la capsule restait
   pliée menu ouvert. Le cas sans .on n'a pas besoin d'être couvert, la barre est
   déjà dépliée. */
.nav-open .nav.on .nav-in{
  max-width:var(--wrap);margin-top:0;padding:18px var(--gut);
  border-radius:0;border-color:transparent;background:transparent;backdrop-filter:none;
}
.brand{font-family:var(--disp);font-size:22px;letter-spacing:.04em}
.brand em{font-style:normal;color:var(--emy)}
.nav-l{display:flex;gap:28px;font-size:14px;font-weight:500}
.nav-l a{opacity:.75;transition:opacity .2s}
.nav-l a:hover,.nav-l a.act{opacity:1}
.nav-l a.act{color:var(--acctxt)}

/* Menu mobile. Le site est passé de 3 à 6 pages : sans ça, sous 900px le visiteur
   n'a plus aucun chemin vers les autres pages, seulement le logo et Réserver.
   Le panneau est un frère de <header>, pas un enfant : .nav.on porte un backdrop-filter,
   qui en fait un bloc conteneur pour les positions fixes et écrasait le plein écran
   à la hauteur de la barre. L'état vit sur <html> pour la même raison. */
/* flex et pas grid : en grid les 3 pistes s'étirent sur les 44px et les barres
   finissent trop écartées pour se croiser, la croix se lit comme un chevron. */
.burger{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;background:none;border:0;cursor:pointer}
.burger span{display:block;width:22px;height:1.5px;background:var(--paper);transition:transform .3s,opacity .2s}
.burger span+span{margin-top:6px}
.nav-open .burger span:first-child{transform:translateY(7.5px) rotate(45deg)}
.nav-open .burger span:nth-child(2){opacity:0}
.nav-open .burger span:last-child{transform:translateY(-7.5px) rotate(-45deg)}
.menu{
  position:fixed;inset:0;z-index:99;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 var(--gut);
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;
}
.nav-open .menu{opacity:1;visibility:visible}
.menu a{
  font-family:var(--disp);text-transform:uppercase;font-weight:400;font-size:clamp(2.4rem,11vw,3.4rem);
  line-height:1.06;opacity:0;transform:translateY(14px);
  transition:opacity .4s,transform .4s,color .2s;
}
.nav-open .menu a{opacity:.9;transform:none;transition-delay:calc(var(--i,0) * .045s + .06s)}
/* --acctxt et pas --acc : les 5 autres liens du menu sont en --paper, un lien actif
   en argent ne s'en détacherait pas. Même cas que .nav-l a.act. */
.menu a.act,.menu a:hover{color:var(--acctxt);opacity:1}
.menu .m-foot{margin-top:34px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--mut)}

/* ════════ BOUTONS ════════ */
.btn{
  display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:14.5px;
  padding:14px 26px;border-radius:999px;border:1px solid var(--paper);color:var(--paper);
  transition:background .25s,color .25s,border-color .25s,transform .2s;
}
.btn:hover{background:var(--paper);color:var(--ink);transform:translateY(-2px)}
/* L'aplat or passe SOUS le grain, et c'est voulu faute de mieux. Tentative du 28/08/2026 :
   isolation:isolate + z-index:6 sur ce bouton pour le sortir du body::after (z-index 5).
   Inerte, vérifié en remplaçant le grain par un aplat opaque : le bouton restait dessous.
   En cause, les ancêtres qui créent déjà leur contexte d'empilement, .vh-cta par sa
   transform et section.vh par son isolation. Le sortir vraiment obligerait à monter
   toute la section au-dessus de 5, donc à retirer le grain du héros entier. Hors de
   question. Le grain est un bruit centré sur le gris moyen, il texture l'or sans le
   décaler en teinte : le rendu tient. Seul le bouton de la nav y échappe, la nav étant
   à z-index 100. Ne pas retenter, mesurer avant. */
.btn.solid{background:var(--accfill);border-color:var(--accfill);color:var(--acctext)}
.btn.solid:hover{background:var(--accfill-h);border-color:var(--accfill-h)}

/* ════════ PAGE INTÉRIEURE ════════ */
/* Héros commun à toutes les pages hors accueil : image plein cadre, fil d'Ariane, titre Anton. */
.ph{position:relative;min-height:86svh;display:flex;align-items:flex-end;overflow:hidden}
.ph-bg{position:absolute;inset:-5%;z-index:-2}
.ph-bg img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.ph::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,15,12,.55),rgba(14,15,12,.14) 30%,rgba(14,15,12,.68) 66%,rgba(14,15,12,.96) 100%)}
.ph-in{width:100%;padding:0 var(--gut) clamp(44px,6vh,80px)}
/* ══════════ LA MARQUE DU COACH ══════════
   Posée le 05/09/2026 au-dessus du nom, sur les deux pages de profil.
   Alexandre a demandé la place et posé la question en même temps : « est-ce
   que c'est une bonne idée de le mettre au-dessus du nom, je sais pas ».
   OUI, ET POUR UNE RAISON DE TAILLE. Le nom fait jusqu'à 11 rem en Anton. À
   côté de lui, une marque de 40 px se bat avec la ligne de base des capitales
   et se lit comme un caractère égaré. En dessous, elle passe pour un
   soulignement décoratif et perd son sens de marque. Au-dessus, elle a sa
   propre ligne et introduit le nom, comme un écusson au-dessus d'un titre.
   CE QUI MANQUAIT N'ÉTAIT PAS LA POSITION MAIS L'AIR : « j'ai l'impression que
   c'est trop attaché ». Anton porte très peu d'approche haute, donc l'écart
   visuel est plus serré que l'écart mesuré. D'où une marge basse propre à la
   marque, qui s'ajoute aux 10 px du titre.
   LA COULEUR EST POSÉE PAR CHAQUE PAGE, pas ici : argent pour Juan, or pour
   Emy, par currentColor. Le dessin ne porte aucune couleur en dur. */
/* LES MARGES DE SŒURS FUSIONNENT, PIÈGE À CONNAÎTRE ICI. Le h1 porte déjà
   margin-top:10px : elle ne s'ajoute pas à la marge basse de la marque, les
   deux se réduisent à la plus grande des deux. L'écart réel est donc celui
   écrit ci-dessous, pas la somme.
   VALEUR CALÉE SUR LE RAPPORT DES PANNEAUX DE L'ACCUEIL, où 18 px sous un
   titre de 86 px donnent 0,21. Le titre de profil monte à 176 px, d'où 38.
   Une première version à 22 px tombait à 0,125 et se lisait encore collée. */
.ph .mark{line-height:0;margin-top:clamp(16px,2vw,26px);margin-bottom:clamp(20px,2.6vw,38px)}
.ph .mark svg{display:block;width:clamp(34px,3.4vw,46px);height:auto}
.ph h1{font-family:var(--disp);text-transform:uppercase;font-weight:400;font-size:clamp(4rem,14vw,11rem);line-height:.92;margin-top:10px}
.ph h1 span{color:var(--acctxt)}
.ph .tag{margin-top:14px;font-size:clamp(15px,1.5vw,18px);color:#D8D7CF;max-width:60ch}
.ph .hand{margin-top:10px;font-family:var(--mono);font-size:12.5px;color:var(--mut)}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#C9C8C0}
.crumb b{color:var(--acctxt);font-weight:500}

/* AÉRÉ LE 05/09/2026, Alexandre : « je ne veux pas que ce soit trop compact,
   un gros bloc, je veux que ce soit aéré ». Il regardait la bio de Juan, mais
   la cause était dans ce composant, partagé avec celle d'Emy : les deux font
   1 780 signes et tournaient à --lh, c'est-à-dire 1,55. C'est l'interligne du
   site pour des phrases courtes ; sur cinq paragraphes de prose il fabrique
   un mur.
   1,78 ici, entre le commun (1,72) et la respiration de la retraite (1,88).
   Et l'écart entre paragraphes passe de 20 px à 26-40, ce qui donne au blanc
   la même valeur qu'à une ligne : c'est lui qui dit où un paragraphe s'arrête.
   MESURE À 66ch ET PLUS 70 : à 17,5 px, 70 caractères font 735 px de ligne,
   le haut de la fourchette lisible. Les deux bios ont chacune un paragraphe
   de plus de 280 signes, c'est là que la ligne trop longue se paie. */
/* LA MESURE EST SUR LES PARAGRAPHES, PAS SUR LE CONTENEUR, et c'est
   l'escalier qui l'a imposé. Tant qu'elle était sur .prose, le conteneur
   faisait 605 px et décaler un paragraphe à l'intérieur le RÉTRÉCISSAIT :
   mesuré le 05/09/2026, le cinquième tombait à 493 px, soit onze caractères
   de moins par ligne que le premier. Un escalier doit déplacer le texte, pas
   le comprimer. La mesure descendue sur le p, chaque paragraphe garde ses
   605 px et se contente de glisser. */
.prose{max-width:none}
.prose p{max-width:66ch;margin-top:clamp(26px,3vw,40px);color:#C9C8C0;line-height:1.78;font-size:clamp(15.5px,1.35vw,17.5px)}
.prose p b{color:var(--paper)}
/* ══════════ L'ESCALIER ══════════
   Idée d'Alexandre, 05/09/2026 : « décaler un petit peu vers la droite pour
   chaque paragraphe, que ce soit un escalier ». Puis, devant une première
   version à marches de 28 px : « je ne suis pas trop fan, on ne peut pas plus
   se décaler vers la droite ? Que ça commence à gauche et que ça finisse à
   droite. »
   ELLE MARCHE ICI POUR UNE RAISON QUI N'EST PAS DÉCORATIVE : les deux bios
   sont chronologiques, chaque paragraphe est une étape, et le titre au-dessus
   dit « Du tatami au monde ». L'escalier fait voir ce que le texte raconte.
   Sur un texte qui n'avance pas dans le temps il n'aurait aucun sens, d'où la
   classe .esc, opt-in, plutôt qu'une règle posée sur .prose.

   MARCHE À 60 px, ARBITRÉE PAR ALEXANDRE LE 05/09/2026 APRÈS COMPARAISON.
   Trois valeurs essayées. 28 px : trop timide, il n'a pas aimé. Puis un pas
   calculé pour que le cinquième paragraphe tombe EXACTEMENT sur le bord droit
   de la colonne, soit 126 px de marche et 502 px de déport : l'escalier était
   spectaculaire, mais P1 allait de 194 à 774 et P5 de 696 à 1276, ils ne
   partageaient plus que 78 px sur 580. Cinq paragraphes qui dérivent au lieu
   d'une colonne, et l'œil qui doit retrouver un départ 126 px plus loin à
   chaque fois. Sur une bio de 1 220 signes que quelqu'un lit vraiment, ça se
   paie. 60 px garde la diagonale parfaitement lisible comme intention ET une
   colonne commune aux cinq paragraphes.
   CE QUI EST PERDU AVEC : le cinquième ne touche plus le bord droit. C'était
   la partie la plus jolie et la moins utile.
   LE MIN() RESTE UNE SÉCURITÉ. Le pas ne dépassera jamais ce que la place
   permet, quelle que soit la largeur : le jour où le .wrap change, rien ne
   déborde et rien n'est à retoucher.
   LA MESURE REVIENT À 66 CARACTÈRES. Elle était descendue à 58 uniquement
   pour libérer de la course à l'escalier plein ; à 60 px il n'en a plus
   besoin, la lisibilité repasse devant.
   ELLE EST SUR LE PARAGRAPHE, PAS SUR LE CONTENEUR. Tant qu'elle était sur
   .prose, décaler un paragraphe le RÉTRÉCISSAIT : mesuré le 05/09, le
   cinquième tombait à 493 px contre 605, onze caractères de moins par ligne.
   Un escalier déplace le texte, il ne le comprime pas.

   COUPÉ SOUS 1000 px. En dessous, décaler prendrait sur la largeur du texte
   et l'effet ne se verrait plus. La bio reprend son bord gauche. Un escalier
   a besoin d'un mur à côté, pas d'un couloir. */
/* ══════════ LE PAS NE PEUT PLUS DEVENIR NÉGATIF, 05/09/2026, v3.36 ══════════
   TROUVÉ SUR MOBILE, ET IL RENDAIT LES DEUX BIOGRAPHIES ILLISIBLES. Mesuré à
   375 px sur emy.html : le conteneur fait 335 px, donc `(100% - 660px) / 4`
   vaut -81,25 px, et `min(60px, -81,25px)` retient le plus petit des deux,
   c'est-à-dire le négatif. Les paragraphes partaient alors VERS LA GAUCHE, de
   -61 px pour le deuxième jusqu'à -305 px pour le cinquième : les trois quarts
   du dernier paragraphe étaient hors de l'écran. `min()` prend le plus petit,
   pas le plus raisonnable.
   POURQUOI LE GARDE-FOU EXISTANT NE GARDAIT RIEN, et c'est le vrai
   enseignement. La ligne `@media (max-width:1000px){ .prose.esc p{margin-left:0} }`
   était bien là depuis le premier jour de l'escalier. Elle ne s'appliquait
   jamais : `.prose.esc p` pèse deux classes et un élément, alors que
   `.prose.esc p:nth-child(2)` en pèse TROIS, parce qu'une pseudo-classe compte
   comme une classe. La règle d'annulation perdait contre celles qu'elle devait
   annuler, malgré sa position plus basse dans la feuille. TROISIÈME PIÈGE DE
   SPÉCIFICITÉ DE LA SEMAINE, après `.signe .sg-t p` contre `.eyeb` et
   `.jhead p` contre `p.eyeb`.
   LE CORRECTIF NE SE BAT PAS SUR LA SPÉCIFICITÉ, IL LA CONTOURNE. On neutralise
   la VARIABLE et non les marges : une propriété personnalisée se transmet par
   héritage, elle ne se dispute pas. Les quatre règles `nth-child` restent
   intactes et calculent toutes sur zéro.
   ET LE `max(0px, …)` REND LE CALCUL SÛR À TOUTE LARGEUR, pas seulement sous
   1000 px. Si quelqu'un pose un jour cet escalier dans une colonne étroite au
   milieu d'une page large, la requête de média ne le protégera pas, la borne
   basse si. Deux protections pour deux menaces différentes.
   NE PAS remplacer ce bloc par un `!important` ni par un sélecteur plus lourd.
   Voir plus haut pourquoi la mesure vit sur le paragraphe et pas sur .prose. */
.prose.esc{--pas:max(0px, min(60px, calc((100% - 660px) / 4)))}
.prose.esc p:nth-child(2){margin-left:var(--pas)}
.prose.esc p:nth-child(3){margin-left:calc(var(--pas) * 2)}
.prose.esc p:nth-child(4){margin-left:calc(var(--pas) * 3)}
.prose.esc p:nth-child(5){margin-left:calc(var(--pas) * 4)}
@media (max-width:1000px){ .prose.esc{--pas:0px} }

/* ══════════ LA MARQUE EN SÉPARATEUR ══════════
   Idée d'Alexandre, 05/09/2026 : « le logo de Juan, entre sa biographie et le
   paragraphe en dessous, comme si ça serait la séparation de sa bio et de ce
   qu'il exerce ».
   LE PROCÉDÉ EST VIEUX DE CINQ SIÈCLES, c'est le fleuron d'imprimeur, un
   ornement posé entre deux parties d'un texte. Ce qui le rend juste ici, c'est
   qu'il n'est PAS générique : c'est la marque du coach, donc la coupure est
   signée. Elle sépare son histoire de son métier, et elle le fait avec son
   propre signe.
   CENTRÉ, ALORS QUE TOUTE LA PAGE EST ALIGNÉE À GAUCHE, et c'est exactement
   ce qui lui permet de fonctionner : un séparateur doit sortir de la colonne
   de lecture, sinon il se lit comme un élément du texte. C'est aussi ce qui
   referme l'escalier au-dessus, qui finit décalé à droite.
   PLUS PETIT QUE LES TITRES, TOUJOURS. 86 px au maximum quand les h2 montent
   à 5,2 rem. Un ornement de coupure qui rivalise avec un titre ne coupe plus
   rien, il ajoute un niveau de lecture. NE PAS l'agrandir « pour que ça se
   voie » : ce qui le fait exister, c'est le blanc autour, pas sa taille.
   La couleur vient de chaque page, argent chez Juan, or chez Emy. */
.sep-mark{display:flex;justify-content:center;margin-top:clamp(58px,7.5vw,110px);line-height:0}
.sep-mark svg{width:clamp(48px,6vw,86px);height:auto}
.prose p:first-child{margin-top:0}
.lead::first-letter{font-family:var(--disp);font-size:3.2em;float:left;line-height:.8;padding-right:12px;color:var(--acctxt)}

/* Carte photo. La grille (.work) et les valeurs fines du dégradé restent à la page :
   les lots de photos diffèrent trop d'une page à l'autre pour un réglage unique. */
.work-lede{margin-top:26px;max-width:62ch;color:#C9C8C0;font-size:clamp(15.5px,1.35vw,17.5px)}
.wk-img{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--line);background:#151612}
.wk-img img{width:100%;height:100%;object-fit:cover}
.wk-img::after{content:"";position:absolute;inset:0;pointer-events:none}
.wk:hover .wk-img img{transform:scale(1.05)}
/* ══════════ LA CARTE BANNIÈRE ══════════
   VENUE DE juan.html LE 05/09/2026, quand emy.html est devenue la deuxième
   page à s'en servir. Une carte qui occupe toute la largeur de la grille,
   pour une photo que le format des cartes ne peut pas accueillir : chez Juan
   la seule source paysage du lot, chez Emy celle qu'Alexandre a voulu voir
   « en dessous des autres, avec un texte comme les autres ».
   aspect-ratio:auto ET height:auto SONT INDISSOCIABLES : sans le second,
   .wk-img img garde height:100% et object-fit:cover se remet à recadrer dans
   une boîte qui n'a plus de hauteur définie. L'image sort alors coupée alors
   que tout le point de ce composant est de la montrer entière. */
.wk.wide{grid-column:1 / -1}
.wk.wide .wk-img{aspect-ratio:auto}
.wk.wide .wk-img img{height:auto}

/* ════════ BANDE CTA ════════ */
.cta-band{border-block:1px solid var(--line);text-align:center}
.cta-band .h2{font-size:clamp(2.6rem,7vw,5.6rem)}
.cta-act{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}

/* Carte croisée vers l'autre coach, en bas des pages profil. */
.other{display:flex;align-items:center;gap:22px;justify-content:center;margin-top:64px;padding:26px;border:1px solid var(--line);border-radius:14px;max-width:640px;margin-inline:auto}
.other img{width:74px;height:74px;object-fit:cover;border-radius:50%;border:2px solid var(--oacc)}
.other b{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:1.5rem}
.other span{display:block;color:var(--mut);font-size:13.5px;margin-top:2px}
.other .go{margin-left:auto;color:var(--oacc);font-weight:700;white-space:nowrap}
@media (max-width:900px){.other{flex-wrap:wrap}.other .go{margin-left:0}}

/* ════════ FOOTER / WHATSAPP / DIALOGS ════════ */
footer{border-top:1px solid var(--line);padding-block:38px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--mut)}
.foot a{border-bottom:1px solid var(--line)}
.foot a:hover{color:var(--paper)}
/* flex-wrap ajouté le 08/09/2026 avec l'adresse mail : à trois entrées le bloc
   mesurait 388 px dans un cadre de 371 à 375 px, et débordait la page. Le .foot
   qui l'entoure enroulait déjà, lui pas. Toute quatrième entrée repassera par
   cette mesure. */
.legal{display:flex;gap:16px;flex-wrap:wrap}
.flink{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--mut);border-bottom:1px solid var(--line);padding:0}
.flink:hover{color:var(--paper)}
.wa{
  position:fixed;right:22px;bottom:22px;z-index:60;width:58px;height:58px;border-radius:50%;
  background:#1B1C17;border:1px solid var(--line);display:grid;place-items:center;
  box-shadow:0 12px 34px rgba(0,0,0,.5);transition:transform .2s,background .2s;
}
.wa:hover{background:#25D366;transform:translateY(-3px)}
/* Sous 640 px la bulle mordait sur la puce « prochain départ » du héros et sur
   l'indicateur de scroll. Elle recule dans le coin, le repère vertical disparaît :
   sur un téléphone, personne n'a besoin qu'on lui dise que la page continue. */
@media (max-width:640px){
  .wa{right:14px;bottom:14px;width:50px;height:50px}
  .scroll-cue{display:none}
}

/* ════════ AÉRATION MOBILE, 10/09/2026 ════════
   Alexandre : « j'aimerais de l'aération niveau mobile, tout est trop compact ».
   RELEVÉ AVANT DE TOUCHER À QUOI QUE CE SOIT, à 375 px, sur cinq pages : gouttière
   20 px partout, texte de carte à 14,5 ou 15,5 px sur un interligne de 1,66 à 1,68,
   12 px entre deux paragraphes, 22 à 24 px entre deux cartes empilées, 7 px entre
   les pastilles. Le padding vertical des sections, lui, était déjà à 80 et 90 px :
   il n'a pas bougé, ce n'est pas là que ça serrait.
   CE QUI PORTE D'ICI ET CE QUI NE PEUT PAS. `--gut` n'est redéfini par AUCUNE page,
   la règle ci-dessous porte donc sur les onze. Le reste, le texte des cartes et
   l'écart des grilles, vit dans les `<style>` locaux : une règle de média posée dans
   cette feuille commune se lit AVANT eux et perd à spécificité égale. C'est le piège
   du 07/09 sur `.work`, payé une fois, et c'est pour ça que chaque page porte sa
   propre media query d'aération plutôt qu'un bloc unique ici.
   LE SEUIL EST 640 px ET PAS 900. À 900 on toucherait les tablettes, où la mise en
   page passe déjà en deux colonnes et où rien ne serrait. */
@media (max-width:640px){
  /* 20 px de gouttière laissaient le texte à six pixels du bord de l'écran une fois
     le rayon des cartes déduit. À 26, la colonne perd 12 px et le bloc respire. */
  :root{--gut:26px}
  /* La prose partagée : +1 px de corps et un interligne de lecture longue. */
  .prose p{font-size:16.5px;line-height:1.8}
  /* PAS DE `.pills{gap}` ICI : les deux seules pages qui s'en servent, coaching et
     emy, le posent dans leur `<style>` local, qui se lit après cette feuille et
     gagnerait. Le réglage est donc chez elles. Deuxième fois dans la même passe
     après `.work`, et c'est la démonstration du piège décrit plus haut. */
}
/* margin:auto RÉTABLI LE 08/09/2026. Un <dialog> ouvert en showModal() est centré
   par un margin:auto que le NAVIGATEUR pose lui-même ; le reset `*{margin:0}` de
   la ligne 100 l'écrasait, et les trois fenêtres du site se collaient en haut à
   gauche. Vu par Alexandre sur celle qui fait choisir entre les deux numéros.
   Ne pas centrer avec position:fixed et translate : le navigateur sait le faire,
   il faut juste cesser de l'en empêcher. */
dialog{border:0;border-radius:12px;padding:0;max-width:600px;width:calc(100% - 40px);margin:auto}
dialog::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.dlg-in{padding:clamp(24px,4vw,36px);background:#151612;color:var(--paper)}
/* h2 ET NON h3 DEPUIS LE 06/09/2026. L'audit a relevé un saut de niveau sur
   404.html et merci.html : leur contenu s'arrête au h1, et le premier titre
   suivant dans l'ordre du document était le h3 de ce dialog. Un lecteur d'écran
   qui parcourt les titres sautait donc un cran. Les deux dialogs sont recopiés
   à l'identique sur les onze pages, la correction vaut partout d'un coup. */
.dlg-in h2{font-family:var(--disp);text-transform:uppercase;font-size:1.5rem}
.dlg-in p{margin-top:14px;color:var(--mut);font-size:14.5px;line-height:1.6}
.dlg-in .btn{margin-top:22px}

/* ════════ FILM ════════ */
/* Descendu de css/event.css le 03/09/2026, quand emy.html est devenue la
   quatrième page à porter une vidéo et la première hors événement.

   Les quatre fichiers sont en 9:16 : ce sont des téléphones qui ont filmé, pas
   des caméras. Pleine largeur il faudrait les rogner des trois quarts ; seuls
   au centre d'une colonne de 1200 px ils se perdent. D'où deux colonnes, le
   texte à gauche puisque c'est par là qu'on lit, la vidéo à droite dans sa
   proportion native.

   AUCUN object-fit ET AUCUN aspect-ratio ICI, contrairement à .gal. Les quatre
   fichiers n'ont pas le même ratio (576×1024 pour Mind & Motion et la Tunisie,
   464×832 pour Nendaz, 460×818 pour le collectif) et aucun ne doit être rogné :
   width et height sont déclarés sur la balise, le navigateur réserve la bonne
   place et rien ne saute au chargement.

   LÉGENDE SOUS LE CADRE, pas par-dessus comme dans .gal : une vidéo porte une
   barre de contrôles en bas dès qu'on la survole, et une légende posée dessus
   viendrait se glisser sous le bouton de lecture. */
.vfilm{display:grid;grid-template-columns:1fr minmax(0,340px);gap:clamp(30px,5vw,72px);align-items:start;margin-top:clamp(30px,3.5vw,46px)}
.vfilm figure{margin:0;border-radius:12px;overflow:hidden;background:#151612;border:1px solid var(--line)}
.vfilm video{width:100%;height:auto;display:block;background:#151612}
.vfilm figcaption{padding:11px 14px 13px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);border-top:1px solid var(--line)}
.vfilm .vtxt p{margin-top:18px;color:#C9C8C0;font-size:15.5px;line-height:1.68;max-width:50ch}
/* La vidéo repasse sous son texte et cesse d'être bridée à 340 px : sur une
   colonne unique, un cadre étroit centré serait plus petit que sur mobile.
   Plafonné à 400 px quand même, un 9:16 pleine largeur sur tablette ferait
   712 px de haut et prendrait tout l'écran. */
@media (max-width:980px){
  .vfilm{grid-template-columns:1fr;gap:30px}
  .vfilm figure{max-width:400px}
}

/* ════════ RÉVÉLATIONS ════════ */
/* --d échelonne les blocs qui entrent ensemble (cartes, galerie). */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--d,0s),transform .8s var(--d,0s)}
.rv.in{opacity:1;transform:none}

/* ════════ TRANSITION DE PAGE ════════ */
@view-transition{navigation:auto}
.nav{view-transition-name:site-nav}
::view-transition-group(coach-face),
::view-transition-group(coach-name){animation-duration:.8s;animation-timing-function:cubic-bezier(.72,0,.16,1)}
::view-transition-old(coach-face),
::view-transition-new(coach-face){height:100%;width:100%;object-fit:cover;animation-duration:.8s}
::view-transition-old(root){animation:vtout .45s cubic-bezier(.6,0,.4,1) forwards}
::view-transition-new(root){animation:vtin .55s cubic-bezier(.4,0,.2,1) .12s backwards}
@keyframes vtout{to{opacity:0}}
@keyframes vtin{from{opacity:0}}

/* ════════ RESPONSIVE COMMUN ════════ */
@media (max-width:900px){
  .nav-l{display:none}
  .burger{display:flex}
  /* Le bouton Réserver sort de la barre : il est repris en bas du menu.
     Sinon il se bat avec le burger sur 375px. */
  .nav-in>.btn{display:none}
}
@media (min-width:901px){.menu{display:none}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .nav-open .menu a{opacity:.9;transform:none}
  @view-transition{navigation:none}
}

/* ══════════ LECTEUR VIDÉO ══════════
   Écrit le 05/09/2026. Alexandre voulait le composant 21st.dev
   « preetsuthar17/video-player », qui suppose shadcn, React et npm : hors
   stack, comme la galerie bento la veille. Ce qu'il apportait de réel, des
   contrôles dessinés au lieu de ceux du navigateur, est repris ici en vanilla.

   POURQUOI ÇA VALAIT LE COUP. Les quatre <video> du site sortaient la barre
   native de Chrome et de Safari : gris système, coins carrés, police du système
   d'exploitation. C'est le seul endroit du site où l'interface d'un autre
   passait devant celle-ci, et ça se voyait d'autant plus que les films sont
   posés dans des blocs soignés.

   UN BOUTON DE VOLUME DEPUIS LE 05/09/2026. Il n'y en avait pas jusque-là : les
   fichiers étaient muets, et proposer un réglage sur du silence aurait été une
   promesse en l'air. Le son est revenu sur demande d'Alexandre, cinq films sur
   six ont retrouvé leur piste, le bouton avec. Le sixième, emy-collectif, n'a
   pas de son dans sa source et ne montre pas le bouton : le critère est son
   attribut `muted`, lu dans le balisage, voir js/site.js.

   LES CONTRÔLES SONT CONSTRUITS PAR js/site.js, PAS ÉCRITS DANS LES PAGES.
   Le balisage garde `controls`, donc sans JavaScript le lecteur du navigateur
   fonctionne comme avant. Le script retire l'attribut et pose le sien. Même
   principe que le héros : un supplément, jamais un péage. */
.vp{position:relative;line-height:0;border-radius:12px;overflow:hidden;background:#151612}
.vp video{width:100%;height:auto;display:block}
/* ══════════ DESCENDUES DES PAGES LE 07/09/2026 (v3.42) ══════════
   Alexandre a demandé de traiter l'écart de poids entre le CSS de l'accueil et
   la feuille commune. LE DIAGNOSTIC DE L'AUDIT ÉTAIT JUSTE SUR LE CHIFFRE ET
   FAUX SUR LE REMÈDE : l'accueil porte bien 177 règles locales contre 162 ici,
   mais AUCUNE n'est partageable. Ses sections n'existent nulle part ailleurs.
   Ce qui se partageait vraiment était ailleurs, et personne ne l'avait vu :
   entre 404 et merci, entre coaching et emy, entre juan et emy, entre les deux
   pages d'événement. Comparaison faite règle par règle sur les onze pages,
   déclarations normalisées et triées, contextes de media inclus.
   LE SEUIL DU PROJET S'APPLIQUE : un composant descend à sa DEUXIÈME page.
   Chaque bloc ci-dessous est présent au mot près sur deux pages au moins.
   TROIS CANDIDATS ONT ÉTÉ ÉCARTÉS APRÈS VÉRIFICATION, ne pas les redescendre
   sans relire pourquoi :
   · `.ph-in h1{view-transition-name:coach-name}`, identique sur juan et emy,
     mais contact.html porte aussi un <h1> dans un `.ph-in`. Descendre la règle
     donnerait à « Contact. » le nom de transition des noms de coach.
   · les jetons `--wrap` et `--lh`, surchargés sur sept pages. Ce n'est pas une
     dérive mais deux familles assumées : 1200 px et 1,6 pour les pages de
     contenu, 1360 px et 1,55 pour l'accueil et les trois pages d'événement.
     Retourner la valeur par défaut économiserait sept déclarations et en
     coûterait quatre. Ça n'en vaut pas la peine.
   · la famille `.wk` des cartes, présente sur juan et emy avec des valeurs qui
     ont DIVERGÉ : taille de titre, écart de grille, voile du dégradé, couleur
     du paragraphe. Certaines différences sont voulues, le format des photos
     par exemple, d'autres ressemblent à de la dérive. Signalé à Alexandre,
     pas tranché tout seul : unifier restylerait deux pages. */

/* .mid : la mise en page centrée de 404.html et merci.html, les deux seules
   pages sans héros ni sections. Identique au mot près sur les deux. */
.mid{display:grid;place-items:center;text-align:center;min-height:100svh;padding:120px var(--gut) 80px}
.mid h1{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(3rem,9vw,7rem);line-height:.94;
  margin-top:.24em}
.mid h1 span{color:var(--acc)}
.mid p{margin-top:22px;color:#C9C8C0;font-size:clamp(15.5px,1.5vw,18px);max-width:46ch;margin-inline:auto}
.mid .cta-act{margin-top:38px}

/* .pills li : les étiquettes de format, sur coaching.html et emy.html.
   SEUL `li` DESCEND. Le conteneur `.pills` garde 2 px d'écart de margin-top
   entre les deux pages, 14 contre 16, et cette différence-là est locale. */
.pills li{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:6px 11px}

/* `.work` À DEUX COLONNES N'EST PAS DESCENDUE ICI, ET L'ESSAI A ÉTÉ ANNULÉ LE
   JOUR MÊME. La règle `@media (max-width:900px){.work{grid-template-columns:
   1fr 1fr}}` est identique sur juan et emy, elle remplissait donc le critère.
   MAIS LA RÈGLE DE BASE `.work` RESTE DANS CHAQUE PAGE, leurs écarts de grille
   ayant divergé. Descendue ici, la règle de média se retrouvait AVANT la règle
   de base dans la cascade, à spécificité égale, 0-0-1-0 des deux côtés : la
   base l'emportait et les cartes restaient sur trois colonnes à 880 px.
   Mesuré, pas supposé : trois colonnes de 253 px là où il en fallait deux.
   RÈGLE GÉNÉRALE QUI EN SORT : on ne descend pas une règle de média sans
   descendre la règle de base qu'elle corrige. Une feuille commune se lit avant
   les styles de page, donc tout ce qu'elle contient perd les égalités. */

/* ══════════ LE PLEIN ÉCRAN NE COUPE PLUS LE FILM, 05/09/2026 ══════════
   Alexandre : « lorsque nous les mettons en plein écran, que nous voyions la
   vidéo en entier car elles sont coupées ».

   LA CAUSE, ET ELLE ÉTAIT DANS LA RÈGLE JUSTE AU-DESSUS. En page, le cadre
   prend la largeur qu'on lui donne et la hauteur suit, `width:100%` et
   `height:auto` : c'est exactement ce qu'il faut. En plein écran, c'est le
   conteneur .vp qui devient l'écran, et cette même règle continue de dire
   « prends toute la largeur ». Un film vertical 9:16 étalé sur la largeur d'un
   écran 16:9 réclame alors 3,16 fois la hauteur disponible, et `overflow:hidden`,
   posé sur .vp pour tenir l'arrondi des coins, tranche le reste sans un mot.
   Le visiteur voyait donc une bande centrale : la tête et les pieds passaient
   à la trappe, et c'est pire sur les films verticaux, qui sont cinq sur six.

   LE CORRECTIF. En plein écran seulement, la vidéo prend les DEUX dimensions
   de l'écran et `object-fit:contain` la loge dedans en entier, quitte à laisser
   du noir sur les côtés. C'est ce que fait le lecteur natif du navigateur, et
   ce que tout le monde attend. Le fond passe au noir franc plutôt qu'au gris
   du site : à côté d'une image, un gris clair se lit comme une bordure.

   TROIS RÈGLES ET PAS UNE LISTE. `:fullscreen` et `:-webkit-full-screen` ne se
   séparent pas par une virgule : un navigateur qui ne comprend pas l'un des
   sélecteurs jette la déclaration entière, et le correctif tomberait là où il
   sert. Écrites séparément, chacune s'applique où elle est comprise.

   SAFARI SUR IPHONE NE PASSE PAS PAR ICI. Il ne connaît que le plein écran de
   l'élément vidéo lui-même, `webkitEnterFullscreen`, qui ouvre le lecteur natif
   du système : il montre déjà le film entier, il n'y a rien à corriger.

   NE PAS REMETTRE `display:grid;place-items:center` ICI. C'est ce que ce bloc
   disait dans sa première version, le même jour, et ça ne corrigeait rien : le
   film débordait toujours de 2 333 px sur un écran 1920×1080, exactement comme
   avant le correctif. La raison est que `display:grid` sans `grid-template-rows`
   crée une rangée en `auto`, dont la taille dépend du contenu ; la hauteur en
   pourcentage de la vidéo n'a alors rien de défini contre quoi se résoudre, elle
   retombe sur la hauteur naturelle du fichier, et on est revenu au point de
   départ. `display:block` donne au contraire une hauteur définie, héritée du
   `height:100%` que le navigateur pose lui-même sur tout élément en plein écran.
   Mesuré en reproduisant la boîte : block et flex donnent 1920×1080, grid donne
   1920×3413. Le centrage ne manque à personne, `object-fit:contain` place déjà
   l'image au milieu de son cadre. */
.vp:fullscreen{display:block;background:#000;border-radius:0}
.vp:fullscreen video{width:100%;height:100%;object-fit:contain}
.vp:-webkit-full-screen{display:block;background:#000;border-radius:0}
.vp:-webkit-full-screen video{width:100%;height:100%;object-fit:contain}
/* La barre garde une marge basse en plein écran : collée au bord de l'écran,
   elle tombe sous la zone confortable et, sur un portable, sous la barre
   d'accueil du système. */
.vp:fullscreen .vp-bar{padding-bottom:clamp(16px,3.4vh,34px)}
.vp:-webkit-full-screen .vp-bar{padding-bottom:clamp(16px,3.4vh,34px)}
/* Le gros bouton ne vit que tant que rien n'a démarré. Une fois lancé, il
   disparaît pour de bon : le remettre à chaque pause couvrirait l'image au
   moment précis où on veut la regarder. */
.vp-big{position:absolute;inset:0;margin:auto;width:clamp(64px,9vw,84px);height:clamp(64px,9vw,84px);
        border-radius:50%;border:1px solid rgba(239,238,233,.5);background:rgba(14,15,12,.42);
        backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
        display:grid;place-items:center;cursor:pointer;
        transition:background .35s,border-color .35s,transform .35s cubic-bezier(.16,.84,.28,1)}
.vp-big svg{width:26px;height:26px;fill:var(--paper);margin-left:3px;transition:fill .35s}
.vp-big:hover{background:rgba(14,15,12,.6);border-color:var(--acc);transform:scale(1.06)}
.vp-big:hover svg{fill:var(--acc)}
.vp.joue .vp-big{opacity:0;pointer-events:none;transform:scale(.9)}
/* La barre se retire pendant la lecture et revient au survol, au focus clavier
   ou à la pause. Sur écran tactile il n'y a pas de survol : elle reste posée. */
.vp-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;
        gap:clamp(9px,1.1vw,14px);padding:26px 14px 12px;
        background:linear-gradient(to top,rgba(14,15,12,.88) 0%,rgba(14,15,12,.3) 62%,transparent 100%);
        opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
.vp:hover .vp-bar,.vp:focus-within .vp-bar,.vp:not(.joue) .vp-bar{opacity:1;transform:none}
@media (hover:none){ .vp-bar{opacity:1;transform:none} }
.vp-bar button{flex:none;width:30px;height:30px;padding:0;border:0;background:none;cursor:pointer;
               display:grid;place-items:center;border-radius:6px}
.vp-bar button svg{width:16px;height:16px;fill:var(--paper);color:var(--paper);transition:fill .3s,color .3s}
/* Le bouton de son, revenu le 05/09/2026 avec les pistes audio. Il est POUSSÉ
   À DROITE contre le plein écran par la piste de lecture, qui prend le reste :
   les deux commandes qui touchent au confort d'écoute et d'affichage se
   retrouvent ensemble, la lecture reste seule à gauche.
   `.vp-v[hidden]` : le seul film sans piste audio du site, emy-collectif, ne
   montre pas ce bouton du tout. Un curseur de volume sur un fichier muet est
   une promesse qu'on ne tient pas. Voir js/site.js pour le critère. */
.vp-v svg{width:17px;height:17px}
/* `color` en plus de `fill` : l'icône de son est la seule des quatre à mêler
   des formes pleines (le haut-parleur) et des traits (les ondes, la croix du
   muet), et un trait se peint avec `stroke`, pas avec `fill`. Les traits sont
   en `currentColor`, donc c'est `color` qui les commande. Sans cette ligne, le
   survol dorait le haut-parleur et laissait ses ondes en crème. */
.vp-bar button:hover svg{fill:var(--acc);color:var(--acc)}
.vp-bar button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.vp-t{flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#C9C8C0;
      font-variant-numeric:tabular-nums;line-height:1}
/* La piste est haute de 14 px pour être attrapable au doigt, le filet visible
   n'en fait que 3 : c'est la zone de clic qui est généreuse, pas le trait. */
.vp-track{flex:1 1 auto;height:14px;display:flex;align-items:center;cursor:pointer;min-width:40px}
.vp-track::before{content:"";position:absolute;inset:0;pointer-events:none}
.vp-rail{position:relative;width:100%;height:3px;border-radius:2px;background:rgba(239,238,233,.22)}
.vp-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:var(--acc)}
.vp-fill::after{content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%);
                width:10px;height:10px;border-radius:50%;background:var(--acc);
                opacity:0;transition:opacity .25s}
.vp:hover .vp-fill::after,.vp-track:focus-visible .vp-fill::after{opacity:1}

/* ══════════ LES CAPITALES ACCENTUÉES MORDENT LE SURTITRE, 08/09/2026 ══════════
   Alexandre, sur une capture de `merci.html` : « ça gratte sur le bien reçu,
   fais un décalage pour que chaque mot soit bien visible ».
   LA CAUSE EST MESURÉE, PAS DEVINÉE. Anton monte à 1,179 em au-dessus de la
   ligne de base, et un À accentué occupe 1,101 em de cette hauteur. Les titres
   du site tournent à `line-height` .92 à .96, donc la boîte de ligne est PLUS
   COURTE que les glyphes : à 112 px, le À dépassait sa boîte de 23,1 px par le
   haut, et l'écart avec le surtitre valait 0. Le mot « Bien reçu » était
   traversé. Sur 404 le É de « filé » faisait la même chose sur 8,9 px.
   RELEVÉ SUR LES ONZE PAGES, quatre cas et quatre seulement : merci 23,1 px,
   404 8,9 px, sejour-tunisie et mind-motion 1,5 px chacun.
   LA MARGE EST EN `em`, JAMAIS EN PIXELS : le dépassement est proportionnel au
   corps, une valeur fixe serait juste à une seule taille et fausse partout
   ailleurs. .24em couvre les 0,206 em nécessaires avec de la réserve.
   NE PAS RÉGLER ÇA EN DESSERRANT LE `line-height` : le bloc de titre y perdrait
   sa densité, c'est la règle posée le 28/08 quand le masque du héros coupait
   l'accent du Î. On écarte les deux éléments, on ne gonfle pas le titre. */
.eyeb + h1,.eyeb + h3{margin-top:max(.24em,10px)}

/* ══════════ LIEN D'ÉVITEMENT, 08/09/2026 ══════════
   Ajouté après l'audit du jour, qui l'a trouvé absent des onze pages. C'est un
   critère WCAG 2.4.1 de niveau A, le plus bas, et le seul que le site manquait.
   CE QU'IL COÛTE À QUELQU'UN QUI NAVIGUE AU CLAVIER SANS LUI : six liens de
   navigation plus le bouton Réserver à franchir avant le contenu, sur CHAQUE
   page. Le site en a onze, donc soixante-dix-sept tabulations pour rien.
   IL EST INVISIBLE JUSQU'AU FOCUS, ET C'EST TOUT L'INTÉRÊT : il ne coûte rien
   à la mise en page, il n'apparaît que pour qui en a besoin. `transform` plutôt
   que `left:-9999px` : un élément poussé hors écran reste dans le flux de
   défilement de certains lecteurs, une transformation ne déplace que le rendu.
   Le `*{transition:none!important}` de prefers-reduced-motion le couvre déjà. */
.skip{position:fixed;top:0;left:0;z-index:200;
  transform:translateY(-130%);transition:transform .2s cubic-bezier(.22,.61,.36,1);
  padding:15px 22px;background:var(--ink);color:var(--paper);text-decoration:none;
  border:1px solid var(--cta);border-right-width:1px;border-radius:0 0 12px 0;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.07em}
.skip:focus{transform:none;outline:2px solid var(--cta);outline-offset:-4px}