/* OSE, feuille commune aux PAGES D'ÉVÉNEMENT.
   Chargée uniquement par sejour-tunisie.html, mind-motion.html et
   retraite-nendaz.html, après css/style.css.

   POURQUOI CE FICHIER EXISTE, écrit le 03/09/2026 en même temps que les deux
   nouvelles pages. Le héros d'événement, le compte à rebours, la grille de
   programme, l'encadré tarif et la galerie ont été écrits le 02/09 dans le
   <style> de sejour-tunisie.html, seule page d'événement à l'époque. Les deux
   pages ajoutées le 03/09 en avaient besoin à l'identique : les recopier aurait
   fait vivre trois exemplaires des mêmes 130 lignes, donc trois endroits à
   corriger le jour où un padding bouge, et deux qu'on oublierait.

   CE QUI RESTE DANS LE <style> D'UNE PAGE : ce qui n'existe que là. Le compte à
   rebours de la Tunisie est ici parce que Nendaz l'utilise aussi ; l'affiche
   carrée du héros de Mind & Motion reste chez elle, aucune autre page n'en a.

   .meta ÉTAIT UN BUG. sejour-tunisie.html s'en servait depuis le 02/09 sans
   jamais le définir : la règle de base vit dans le <style> d'evenements.html,
   qui n'est pas chargé ailleurs. La fiche pratique du séjour s'affichait donc
   en <dl> nu, sans filets ni alignement, du 02/09 au 03/09. Elle est ici
   maintenant. ATTENTION, evenements.html garde SA copie locale et n'a pas été
   touché : deux définitions identiques dans deux fichiers, à faire bouger
   ensemble. C'est le prix payé pour ne pas toucher à une page qui marche. */

/* Mesure resserrée par rapport au reste du site : une page d'événement porte de
   la prose et une fiche technique, pas des aplats pleine largeur. */
:root{--wrap:1200px;--lh:1.6;--h2:clamp(2.2rem,5.2vw,4.4rem);--sect:clamp(80px,10vw,140px)}

/* ══════════ HÉROS D'ÉVÉNEMENT ══════════
   Contrairement à evenements.html, qui n'a pas de héros photo faute de rush
   large libre, une page d'événement EN A BESOIN : elle se partage seule, elle
   s'ouvre depuis une carte, et le visiteur doit savoir en un coup d'œil où il
   atterrit. La photo est celle de la fiche, pour qu'on reconnaisse la carte
   sur laquelle on vient de cliquer. Continuité, pas décoration.

   VARIANTE SANS PHOTO : .ehero.flat, voir plus bas. Mind & Motion n'a aucune
   image en paysage, et forcer un portrait de 720 px dans un cadre de 1440 le
   grossirait deux fois. Un héros net sans photo vaut mieux qu'un héros flou. */
.ehero{position:relative;min-height:min(86svh,760px);display:flex;align-items:flex-end;padding:clamp(120px,15vh,180px) 0 clamp(44px,5.5vw,72px);overflow:hidden;border-bottom:1px solid var(--line)}
.ehero-bg{position:absolute;inset:0;z-index:0}
.ehero-bg img{width:100%;height:100%;object-fit:cover;object-position:20% 50%}
/* Deux voiles superposés, pas un seul. Un aplat uniforme assez dense pour que
   le texte passe en bas éteint le ciel en haut et la photo ne sert plus à rien.
   Le dégradé porte la lisibilité là où il y a du texte, l'aplat léger unifie
   le reste et enlève le côté carte postale. Contraste mesuré au fil des pages. */
.ehero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,15,12,.94) 0%,rgba(14,15,12,.82) 32%,rgba(14,15,12,.42) 62%,rgba(14,15,12,.5) 100%)}
.ehero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(28px,4.5vw,64px);align-items:end}
.ehero h1{font-family:var(--disp);text-transform:uppercase;font-weight:400;font-size:clamp(3rem,9vw,7rem);line-height:.93;margin-top:14px}
.ehero h1 span{color:var(--acc)}
/* .ehero .tag N'EST PLUS UTILISÉE PAR AUCUNE DES TROIS PAGES depuis le
   04/09/2026. Les trois paragraphes d'accroche ont été retirés : chacun
   recopiait le texte de sa propre vignette sur evenements.html, et une page
   dédiée n'a pas à se présenter comme son propre résumé, le visiteur vient de
   cliquer dessus. La règle reste ici comme .cours et .chip restent ailleurs,
   ce n'est pas un oubli de nettoyage. */
.ehero .tag{margin-top:20px;color:#D3D2CA;max-width:46ch;font-size:clamp(15.5px,1.4vw,17.5px);line-height:1.62}
.ehero .d{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-top:16px}
/* 40 et non 28 depuis le retrait des accroches : les 28 px étaient calculés
   pour suivre un paragraphe. Derrière une ligne de mono de 12 px, ils
   collaient les boutons à la ligne de date sur les trois pages. */
.ehero-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}

/* ══════════ LE HÉROS ARRIVE COMME UN CARTON DE TITRE ══════════
   Écrit pour sejour-tunisie.html le 04/09/2026, descendu ici le jour même
   quand Alexandre a demandé « exactement pareil sur les autres pages des
   événements ». Règle de partage du projet : un composant descend dans une
   feuille commune à partir de la deuxième page qui l'utilise.

   LE DÉFAUT CORRIGÉ ÉTAIT DE COMPOSITION, PAS DE MOUVEMENT. Les trois titres
   empilaient deux mots à la même taille. Deux mots de même poids ne font
   aucune hiérarchie et rien ne dit lequel est le sujet. Le premier mot descend
   au rang d'étiquette, le second monte et occupe l'écran.

   LE POINT FINAL EST EN OR, SEUL ACCENT DU TITRE. Le logo est « OSE. », un mot
   et un point d'or : le titre se termine comme la marque se termine. Ne pas
   repasser le mot entier en or, à cette taille il écrase tout et le point n'a
   plus rien à dire.

   LA TAILLE EST UNE VARIABLE, --hero-w, parce que les trois mots n'ont pas la
   même longueur. « Tunisie » tient à 10,5 rem, « Spirituelle » et « Mind &
   Motion » débordent de la colonne à cette taille. Adapter le corps à la
   longueur du mot, c'est le même traitement, pas une exception.

   L'ARRIVÉE : la photo se pose d'un dézoom, le mot monte derrière un masque,
   puis la date, les boutons et la colonne de droite entrent l'un après
   l'autre. La photo dérive ensuite en boucle pour que la page ne se fige
   jamais. Principe pris à coronagymbdx.fr, la référence d'Alexandre : son
   héros tient par une motion continue plutôt que par un effet d'entrée.

   Aucun retard ne dépasse 1,25 s, au-delà on croit que la page rame.

   POURQUOI TOUT EST PRÉFIXÉ PAR .js-hero, ET C'EST UN DÉFAUT PAYÉ LE JOUR
   MÊME. La première version posait ces animations sans condition, en
   `fill-mode: both`, donc `opacity:0` tant qu'elles n'avaient pas démarré.
   Mesuré dans un onglet en arrière-plan : Chrome gèle les animations CSS,
   `currentTime` reste à 0, et **tout le héros restait invisible**, titre
   compris. Le titre est l'élément principal de la page. Le faire dépendre
   d'une animation, c'est parier la page sur un moteur d'animation qui tourne.
   Désormais : l'état de base est l'état FINAL, tout est visible sans une ligne
   de CSS animée. Un script d'une ligne en tête de chaque page ajoute
   `.js-hero` avant le premier rendu, et le retire au bout de 4,5 s. Si les
   animations n'ont pas démarré, le retrait rend la main à l'état de base et
   la page s'affiche entière. L'animation est un supplément, jamais un péage.
   NE PAS retirer le préfixe pour « simplifier ».

   hDrift n'est pas préfixée, volontairement : elle ne touche que `transform`,
   gelée elle laisse la photo à scale(1.06), donc visible. */
.ehero h1{margin-top:0;font-size:0;line-height:1}
/* Le filet d'or sépare. Sans lui l'étiquette tombe juste sous le fil d'Ariane,
   deux lignes de mono en capitales à trois pixels l'une de l'autre, et l'œil
   lit le chemin et le titre d'une seule traite. */
.ehero h1 .k{display:flex;align-items:center;gap:clamp(11px,1.2vw,16px);
             font-family:var(--mono);font-weight:500;
             font-size:clamp(11px,1.05vw,13px);letter-spacing:.36em;text-transform:uppercase;
             color:var(--juan);margin:clamp(20px,2.4vw,32px) 0 clamp(12px,1.5vw,20px)}
.ehero h1 .k::before{content:"";flex:none;width:clamp(20px,2.4vw,34px);height:1px;background:var(--acc)}
/* PIÈGE PAYÉ LE 04/09/2026 : cette marge basse était écrite en `.06em` et
   valait donc zéro. `.ehero h1` porte `font-size:0` pour tuer l'espace entre
   blocs en ligne, et un `em` chez un enfant se calcule sur la taille du
   parent, pas sur la sienne. Toute la protection était inopérante. En clamp de
   pixels elle existe, et le volet part de 118 % pour franchir le mot ET cette
   marge avant d'être hors champ. */
.ehero h1 .msk{display:block;overflow:hidden;padding-bottom:clamp(5px,.85vw,14px)}
.ehero h1 .v{display:block;font-family:var(--disp);font-weight:400;text-transform:uppercase;
             font-size:var(--hero-w,clamp(3.4rem,12.5vw,10.5rem));line-height:.84;color:var(--paper)}
/* Le point d'Anton est un carré plein. À 10 rem il devient un bloc d'or qui
   pèse autant qu'une lettre, et le titre se lit « TUNISIE » suivi d'un
   rectangle. À 0,42 em il redevient une ponctuation et reprend la proportion
   qu'il a dans le logo. Ne pas le remonter. */
.ehero h1 .v i{font-style:normal;color:var(--acc);font-size:.42em;line-height:0}
/* ── LES SEPT LIGNES CI-DESSOUS SONT LA TOTALITÉ DE L'ANIMATION D'ENTRÉE ──
   Rien d'autre n'est conditionné à .js-hero : au-dessus se trouve la mise en
   forme, elle s'applique toujours. C'est la raison d'être de cette coupure.
   Une première version avait mélangé les deux, et le titre aurait perdu sa
   taille et sa couleur au retrait de la classe, quatre secondes et demie après
   le chargement. Garder la frontière nette : forme au-dessus, mouvement ici. */
.js-hero .ehero .crumb{animation:hFade .7s .16s both}
.js-hero .ehero h1 .k{animation:hFade .75s .3s both}
.js-hero .ehero h1 .v{animation:hRise 1.05s .42s cubic-bezier(.16,.84,.28,1) both}
.js-hero .ehero .d{animation:hFade .8s .92s both}
.js-hero .ehero .ehero-act{animation:hFade .8s 1.06s both}
/* aside sur la Tunisie et la retraite, .affiche sur Mind & Motion : la colonne
   de droite entre en dernier, quoi qu'elle contienne. */
.js-hero .ehero aside,.js-hero .ehero .affiche{animation:hFade .9s 1.2s both}
/* Le dézoom vit sur l'image, la dérive sur son conteneur : deux transforms sur
   le même élément s'écrasent, sur deux éléments ils se composent. Le conteneur
   reste à 1.06 en permanence, c'est cette marge qui autorise le déplacement de
   1 % sans jamais découvrir un bord. Sans effet sur .ehero.flat, qui n'a pas
   de .ehero-bg : Mind & Motion garde son dégradé fixe. */
.ehero-bg{animation:hDrift 40s 2.2s ease-in-out infinite alternate backwards}
.js-hero .ehero-bg img{animation:hSettle 2.2s cubic-bezier(.16,.84,.28,1) both}
@keyframes hFade{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@keyframes hRise{from{transform:translateY(118%)}to{transform:translateY(0)}}
@keyframes hSettle{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes hDrift{from{transform:scale(1.06) translateX(-1%)}to{transform:scale(1.06) translateX(1%)}}

/* Héros sans photo de fond. Plus court, puisque rien ne se joue derrière le
   texte : garder 760 px de haut pour un aplat sombre ne ferait qu'un grand vide
   avant le premier mot. Le filet supérieur remplace le contraste que donnait la
   photo, sinon le bloc flotte sous une barre de navigation transparente. */
.ehero.flat{min-height:0;padding-top:clamp(128px,16vh,190px);background:
  radial-gradient(120% 90% at 78% 8%,rgba(212,165,66,.09),transparent 62%),
  linear-gradient(to bottom,#131410,var(--ink) 70%)}
.ehero.flat .ehero-in{align-items:center}

/* Le fil d'Ariane est cliquable ici, alors qu'il ne l'est nulle part ailleurs :
   c'est le seul type de page du site où l'on peut atterrir sans être passé par
   le niveau au-dessus, depuis un partage ou un moteur. Le lien est donc le seul
   chemin de remontée. Souligné en permanence et non au survol : un fil d'Ariane
   à 11 px que rien ne distingue d'un libellé ne se voit pas. */
.crumb a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);transition:text-decoration-color .3s}
.crumb a:hover{text-decoration-color:currentColor}

/* ══════════ COMPTE À REBOURS ══════════
   Repris d'evenements.html au pixel près : même balisage, même script, même
   cible. Deux pages qui comptent le même départ doivent afficher le même
   nombre, et le seul moyen fiable est de partager le code plutôt que de le
   réécrire.
   IL NE SERT QU'AUX ÉVÉNEMENTS À DATE UNIQUE, Tunisie et Nendaz. Mind & Motion
   revient : décompter les secondes jusqu'à une soirée qui se répète donnerait
   une urgence que l'événement n'a pas, et la prochaine date y est complète. */
.cd-lab{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--juan)}
.count{display:flex;gap:clamp(12px,2.2vw,26px);margin-top:16px}
.count b{font-family:var(--disp);font-weight:400;font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1;display:block;font-variant-numeric:tabular-nums}
.count div:first-child b{color:var(--juan)}
.count div:last-child b{color:var(--acc)}
.count span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);display:block;margin-top:7px}
.cdate{margin-top:16px;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;color:#C9C8C0}

/* ══════════ ACCROCHE ══════════
   Une seule phrase, en grand, reprise mot pour mot du texte de Juan et Emy.
   Elle tient toute la section : rien d'autre ne doit y entrer, c'est le seul
   endroit de la page où on ne donne aucune information pratique. */
.hook{text-align:center}
.hook h2{font-family:var(--disp);text-transform:uppercase;font-weight:400;line-height:1.02;font-size:clamp(2rem,5vw,4rem);max-width:18ch;margin-inline:auto}
.hook h2 em{font-style:normal;color:var(--acc)}
.hook p{margin-top:24px;color:#C9C8C0;max-width:52ch;margin-inline:auto;font-size:16.5px;line-height:1.68}

/* ══════════ PROGRAMME ══════════
   Deux colonnes, pas trois cartes alignées : la gauche énumère ce qu'on fait,
   la droite ce qui est compris. C'est la seule distinction qui compte quand on
   compare deux séjours. */
.prog{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,5.5vw,84px);align-items:start}
/* PIÈGE PAYÉ LE 05/09/2026 : ces deux règles étaient accrochées à .prog, la
   grille à deux colonnes. Le jour où retraite-nendaz.html a coupé cette grille
   en deux sections, ses titres ont perdu Anton et sont ressortis en Archivo
   16 px, au milieu d'une page par ailleurs intacte. Une règle de typographie
   n'a rien à faire sous un sélecteur de mise en page : le jour où la mise en
   page change, la typographie tombe avec elle.
   Les trois sélecteurs couvrent les deux formes, l'ancienne grille et les
   sections séparées. */
.prog h3,#programme h3,.compris h3{font-family:var(--disp);text-transform:uppercase;font-weight:400;font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.04}
.prog h3+p,#programme h3+p,.compris h3+p{margin-top:14px;color:#C9C8C0;font-size:15.5px;line-height:1.68;max-width:46ch}
.bloc+.bloc{margin-top:clamp(38px,4.5vw,58px)}

/* Les cours en étiquettes plutôt qu'en liste à puces. Ce sont des noms propres
   courts, treize mots au total : en liste verticale ils font une colonne maigre
   de treize lignes, en étiquettes ils forment un bloc qui se parcourt d'un coup
   d'œil et qui dit « il y en a beaucoup » sans avoir à l'écrire. */

/* Liste des activités et des inclus. Filet or à gauche au lieu d'une coche :
   la coche est le réflexe de toutes les pages de vente, et elle promet une
   validation qu'un tiret ne promet pas. */
.lst{list-style:none;margin-top:20px;display:grid;gap:2px}
.lst li{padding:11px 0 11px 18px;border-left:2px solid var(--line);color:#D8D7CF;font-size:15px;line-height:1.55;transition:border-color .35s}
.lst li:hover{border-left-color:var(--acc)}
.lst li b{color:var(--paper);font-weight:600}
.lst.hors li{border-left-color:transparent;color:var(--mut);padding-left:18px}

/* ══════════ SÉQUENCE EN PHASES ══════════
   Trois moments qui s'enchaînent dans une même soirée. Ni trois cartes alignées,
   que le site s'interdit partout ailleurs, ni une liste à puces : ces phases se
   suivent dans le temps, et une colonne numérotée le dit mieux qu'une rangée.
   Le numéro est un ordre de passage, pas une note ni un palier de prix. */
.phase{list-style:none;margin-top:26px}
.phase li{display:grid;grid-template-columns:auto 1fr;gap:clamp(15px,2vw,24px);padding:19px 0;border-top:1px solid var(--line)}
.phase li:last-child{border-bottom:1px solid var(--line)}
.phase .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--acc);padding-top:6px}
/* :is(h3,h4) DEPUIS LE 06/09/2026, ET LES DEUX NIVEAUX SONT LÉGITIMES.
   Les phases portent un h4 sur mind-motion et sur la retraite, où un h3 les
   introduit ; elles portent un h3 sur la Tunisie, où la section s'ouvre
   directement sur un h2 et où un h4 sautait un cran. Le niveau d'un titre
   dépend de ce qui le précède, pas du composant : c'est la page qui décide,
   le style suit. `:is()` prend ici la spécificité d'un élément, comme avant. */
.phase :is(h3,h4){font-family:var(--disp);text-transform:uppercase;font-weight:400;font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.05}
.phase p{margin-top:7px;color:#C9C8C0;font-size:14.5px;line-height:1.6}

/* ══════════ SÉANCES D'UN RENDEZ-VOUS RÉCURRENT ══════════
   Recopié d'evenements.html, où il sert à la fiche Mind & Motion. Même remarque
   que pour .meta : deux copies, à faire bouger ensemble.
   Volontairement différent de .meta : .meta est une fiche technique qu'on
   parcourt, ceci est un choix qu'on fait. D'où des lignes encadrées plutôt que
   des lignes de tableau.
   Pas d'opacity sur la séance complète, même si c'est le réflexe. Mesuré le
   29/08/2026 : à .62 le gris --mut se composite vers le fond et tombe à 2,80:1,
   sous le seuil AA. L'état « complet » se dit par la couleur du texte et un fond
   très légèrement relevé, jamais en éteignant la ligne. */
.seances{list-style:none;margin-top:22px;display:grid;gap:8px}
.seances li{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 15px;border:1px solid var(--line);border-radius:10px;font-family:var(--mono);font-size:12.5px;
}
.seances .s-d{color:#D8D7CF;letter-spacing:.04em}
.seances .s-e{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);white-space:nowrap}
.seances .s-e.libre{color:var(--acc)}
.seances .pris{background:rgba(255,255,255,.025)}
.seances .pris .s-d{color:var(--mut)}

/* ══════════ FICHE PRATIQUE ══════════
   Le détail pratique est en liste plutôt qu'en phrases : un futur participant
   cherche une date, un lieu et un prix, il ne lit pas un paragraphe pour les
   trouver. Copie de la règle d'evenements.html, voir l'avertissement en tête. */
.meta{margin-top:24px;border-top:1px solid var(--line)}
.meta div{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12.5px}
.meta dt{color:var(--mut);letter-spacing:.06em;text-transform:uppercase;font-size:11px;padding-top:2px}
.meta dd{color:#D8D7CF;text-align:right}
.meta dd em{font-style:normal;color:var(--mut)}

/* ══════════ ENCADRÉ TARIF ══════════
   Seul de son espèce sur la page, et il ne doit pas ressembler à un palier parmi
   d'autres : un seul prix, un seul bouton. */
.tarif{margin-top:clamp(30px,3.5vw,44px);border:1px solid var(--line);border-radius:14px;padding:clamp(22px,2.6vw,30px);background:#131411b8}
.tarif .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.tarif .prix{font-family:var(--disp);font-weight:400;font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;margin-top:10px;color:var(--acc)}
.tarif .prix small{font-family:var(--body);font-size:14px;letter-spacing:.02em;color:var(--mut);display:block;margin-top:10px;font-weight:400}
.tarif .btn{margin-top:22px;width:100%;justify-content:center}

/* ══════════ GALERIE DES ÉDITIONS PASSÉES ══════════
   LES CADRES SUIVENT LES PHOTOS, PAS L'INVERSE, et c'est une correction faite
   le 03/09/2026 avant même de montrer la page. Premier jet : une mosaïque
   4 colonnes avec une grande vignette carrée et deux bandeaux 2:1. Calculé sur
   les vraies dimensions plutôt que jugé à l'œil, ça donnait un rognage de 33 %
   en largeur sur tunisie-chevaux (1400×933 dans un carré) et surtout de 50 %
   en HAUTEUR sur mains et groupe-soiree, deux fichiers carrés de 925 et 951 px
   posés dans des bandeaux 2:1. La moitié d'une photo de groupe coupée, c'est
   la rangée de têtes qui part.
   D'où cette grille : une rangée large en 3:2, qui est exactement le ratio de
   tunisie-chevaux, puis deux carrés qui sont exactement le ratio des deux
   autres. Rognage nul sur les trois. Le rythme large-puis-deux évite en prime
   la rangée de trois vignettes égales que le site s'interdit ailleurs.
   SI UNE PHOTO EST REMPLACÉE, remesurer son ratio avant de la déposer ici. */

/* ══════════ LE FILM DE L'ÉVÉNEMENT ══════════
   .vfilm N'EST PLUS ICI. Déplacé dans css/style.css le 03/09/2026, le jour où
   Alexandre a demandé de poser la vidéo collectif sur emy.html, qui n'est pas
   une page d'événement et ne charge donc pas cette feuille. C'est la règle de
   partage du projet appliquée telle quelle : un composant descend dans
   style.css à partir du moment où une deuxième famille de pages l'utilise.
   L'autre option aurait été de charger event.css sur emy.html, ce qui lui
   aurait fait avaler .ehero, .prog, .phase, .seances, .meta, .tarif et .gal
   pour six lignes de grille. */

@media (max-width:980px){
  .ehero{min-height:0;padding-top:clamp(112px,14vh,150px)}
  .ehero-in,.prog{grid-template-columns:1fr}
  .ehero-in{align-items:start;gap:36px}
}
/* Sous 620 px, deux carrés côte à côte tombent à 155 px de large : le bandeau
   de légende en occupe alors le tiers bas et le sujet n'est plus lisible. On
   empile, chaque photo reprend toute la largeur.
   ON NE TOUCHE PAS AUX RATIOS EN PASSANT EN PILE. Premier jet : un
   `aspect-ratio:3/2` posé ici « pour que ça respire », qui remettait 34 % de
   rognage sur les deux photos carrées, exactement le défaut corrigé au-dessus.
   Un carré de 335 px de côté ne prend pas trop de place sur un téléphone, il
   prend la place d'une photo. */
@media (max-width:620px){
}
@media (max-width:560px){
  .meta div{flex-direction:column;gap:4px}
  .meta dd{text-align:left}
  .ehero-act .btn{width:100%;justify-content:center}
  .seances li{flex-direction:column;align-items:flex-start;gap:6px}
  .phase li{grid-template-columns:1fr;gap:6px}
  .phase .n{padding-top:0}
}

/* ══════════ AGRANDISSEMENT AU CLIC ══════════
   Demande d'Alexandre le 04/09/2026. Il m'a envoyé un composant React de
   21st.dev, « drag to explore, click to expand », qui suppose React,
   Tailwind, shadcn, framer-motion et une étape de build npm. Hors stack : ce
   site est du HTML qui s'ouvre sans rien compiler. Son composant est en plus
   une grille bento, interdite par son propre CLAUDE.md.
   CE QUI EST REPRIS, C'EST L'INTENTION : voir une photo en grand. Le reste
   du composant, le défilement horizontal à la souris et les cases de tailles
   inégales, se bat avec une série qu'on vient justement de faire régulière.

   ZÉRO DÉPENDANCE, ZÉRO OCTET DE PLUS. <dialog> natif, déjà employé sur ce
   site pour les mentions légales, donc rien de neuf à comprendre pour la
   prochaine session. showModal() apporte gratuitement le piège de focus, la
   touche Échap et le fond inerte.
   AUCUNE IMAGE SUPPLÉMENTAIRE : les fichiers font 760x950, et en plein écran
   un 4:5 à 90vh mesure 629x786 sur un écran de 1470. Le fichier est donc
   déjà plus grand que son affichage, un second jeu ne servirait à rien. */
.lb-go{display:block;position:relative;width:100%;padding:0;border:0;background:none;
       cursor:zoom-in;border-radius:10px;overflow:hidden}
.lb-go:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
/* Le voile et le mot vivent en pseudo-éléments : zéro balisage en plus sur
   onze photos, et rien à cliquer par-dessus le bouton. */
.lb-go::before{content:"";position:absolute;inset:0;pointer-events:none;
               background:linear-gradient(to top,rgba(14,15,12,.84) 0%,rgba(14,15,12,.18) 44%,transparent 68%);
               opacity:0;transition:opacity .45s ease}
.lb-go::after{content:"Agrandir";position:absolute;left:15px;bottom:14px;pointer-events:none;
              font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
              color:var(--acc);opacity:0;transform:translateY(9px);
              transition:opacity .45s ease,transform .45s cubic-bezier(.16,.84,.28,1)}
@media (hover:hover){
  .lb-go:hover::before,.lb-go:focus-visible::before{opacity:1}
  .lb-go:hover::after,.lb-go:focus-visible::after{opacity:1;transform:none}
}
.lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100%;height:100%}
.lb::backdrop{background:rgba(8,9,7,.94)}
.lb-in{display:flex;flex-direction:column;align-items:center;justify-content:center;
       height:100%;gap:16px;padding:clamp(14px,3vw,34px)}
.lb img{max-width:100%;max-height:76vh;width:auto;height:auto;display:block;border-radius:10px}
.lb figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--mut);text-align:center}
.lb figcaption b{color:var(--acc);font-weight:500;margin-right:10px}
.lb-bar{display:flex;align-items:center;gap:10px}
.lb-bar button{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
               color:var(--paper);background:transparent;border:1px solid var(--line);
               border-radius:999px;padding:9px 17px;cursor:pointer;transition:border-color .3s,color .3s}
.lb-bar button:hover{border-color:var(--acc);color:var(--acc)}
.lb-bar .lb-c{color:var(--mut);border:0;padding:0 6px;cursor:default;font-size:11.5px}
/* Le bouton de fermeture est en haut à droite, hors du flux : sur un
   téléphone en portrait la photo occupe presque tout, il ne doit pas pousser
   la légende hors de l'écran. */
.lb-x{position:fixed;top:14px;right:14px;width:42px;height:42px;border-radius:50%;
      border:1px solid var(--line);background:rgba(14,15,12,.7);color:var(--paper);
      font-size:19px;line-height:1;cursor:pointer}
.lb-x:hover{border-color:var(--acc);color:var(--acc)}

/* .phase arrive de css/event.css, où il découpe une soirée en trois moments
   dans la colonne étroite de mind-motion. Ici il est seul dans un .wrap qui
   mesure 1082 px à 1470, et le composant tel quel laissait une ligne de
   14,5 px courir sur toute cette largeur.
   Deux essais avant celui-ci, mesurés le 04/09/2026 : plafonner la liste à
   820 px arrêtait les filets au milieu de nulle part, sans rapport avec la
   grille de la page. Séparer le titre du moment et sa description en deux
   colonnes règle les deux à la fois, les filets tiennent toute la largeur
   comme partout ailleurs et la ligne de lecture reste courte.
   Le seuil est à 861 px et non au 560 px du composant : en dessous, 200 px
   de titre plus le texte à côté font deux colonnes étroites, l'empilement
   redevient plus lisible bien avant le téléphone. */
.seq{margin-top:clamp(28px,3.4vw,42px)}
.seq p{max-width:64ch}
@media (min-width:861px){
  .seq li>div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:baseline}
  .seq li>div p{margin-top:0}
}

/* ══════════ LES DEUX COLONNES DE « CE QUI EST COMPRIS » ══════════
   Posé le 05/09/2026 sur retraite-nendaz.html, quand la grille .prog a été
   coupée en deux sections. La liste des inclusions à gauche, l'encadré tarif
   et la fiche pratique à droite : deux objets de nature différente qui se
   lisent en parallèle, contrairement à deux paragraphes qui se disputent
   l'œil. Local à cette page pour l'instant, il monte ici parce que .prog, dont
   il reprend les proportions, y est déjà. */
.compris{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,5.5vw,84px);align-items:start}
.compris .cd{display:flex;flex-direction:column}
@media (max-width:980px){ .compris{grid-template-columns:1fr} }

/* ══════════ POURQUOI Y ALLER ══════════
   VENU DE retraite-nendaz.html LE 05/09/2026, quand mind-motion.html est
   devenue la deuxième page à s'en servir. Alexandre voulait sur la soirée le
   même traitement que sur la retraite : « je voudrais pareil y avoir une
   petite explication, tu fais ça à quoi ça sert, qu'est-ce que ça permet aux
   gens ». Le composant a donc changé de feuille avant d'être réutilisé.

   UNE SEULE COLONNE, UN PARAGRAPHE À LA FOIS, ET LE BLOC CENTRÉ.
   Les paragraphes étaient en deux colonnes, le premier en pleine largeur et
   les deux suivants côte à côte. Alexandre, 05/09/2026 : « il y a tellement
   d'informations, je comprends rien, il faut que ce soit fluide, qu'on arrive
   sur le texte, qu'on voie que le texte, et qu'après on enchaîne un autre
   texte. » DEUX PARAGRAPHES CÔTE À CÔTE SE FONT CONCURRENCE : l'œil ne sait
   pas lequel lire, il balaie les deux, il n'en lit aucun.

   BLOC CENTRÉ, seconde demande du même jour. Une colonne unique collée à
   gauche laissait la moitié droite de l'écran vide, et le vide se lisait comme
   un oubli plutôt que comme une respiration.

   LE TEXTE DES PARAGRAPHES RESTE ALIGNÉ À GAUCHE, ET C'EST DÉLIBÉRÉ. Centrer
   le texte lui-même sur cinq à six lignes oblige l'œil à chercher le début de
   chaque ligne à un endroit différent : ça se lit bien sur trois mots, mal sur
   cinquante. Le surtitre et le titre sont centrés, eux, ils tiennent en deux
   lignes. NE PAS passer les paragraphes en text-align:center.

   MESURE PORTÉE À 68 CARACTÈRES, troisième arbitrage d'Alexandre ce jour-là.
   Elle est passée par 58 puis 54, deux réglages trop étroits une fois le bloc
   centré : la colonne faisait une bande maigre au milieu d'un écran large.
   68 EST LE HAUT DE LA FOURCHETTE LISIBLE, qui va de 45 à 75. Au-delà, l'œil
   perd le début de la ligne suivante en revenant à la marge, et c'est pire sur
   un fond sombre où le contraste fatigue plus vite. Ne pas monter à la largeur
   du .wrap, qui ferait 118 caractères.

   INTERLIGNE À 1,72, LA VALEUR COMMUNE DU SITE. La retraite la remonte à 1,88
   dans son propre <style>, avec toute sa respiration : c'est sa singularité,
   elle vend trois jours pour ralentir. Ne pas remonter la valeur ici pour
   « harmoniser », ce serait faire respirer tout le site comme une retraite.

   LE FILET OR ENTRE DEUX PARAGRAPHES remplace un simple blanc : il donne à la
   section le rythme d'un texte en trois temps et signale que le paragraphe
   suivant change de sujet. La section porte sa propre marge basse, la balise
   <section> qui l'entoure est donc écrite en padding-bottom:0. */
.pourquoi{text-align:center;padding-bottom:clamp(70px,8vw,110px)}
.pq-t{margin:clamp(34px,4vw,52px) auto 0;display:block;max-width:68ch;text-align:left}
.pq-t p{color:#C9C8C0;font-size:16.5px;line-height:1.72}
.pq-t p:first-child{font-size:clamp(17.5px,1.8vw,21px);color:#D8D7CF;line-height:1.72}
.pq-t p + p{margin-top:clamp(44px,5vw,76px);padding-top:clamp(30px,3.4vw,46px);position:relative}
.pq-t p + p::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:48px;height:1px;background:var(--acc);opacity:.55}

/* ══════════ DESCENDUES DES PAGES D'ÉVÉNEMENT LE 07/09/2026 (v3.42) ══════════
   Trois blocs de vidéo portaient exactement le même style sous trois noms
   différents, `.vwide` et `.vsuite` sur la retraite, `.vfeat` sur la Tunisie.
   Même composant, trois écritures, deux pages : le seuil du projet est atteint
   deux fois. Les noms restent distincts parce que la MISE EN PAGE de chaque
   bloc diffère, largeur, colonnes, position de la légende ; c'est le cadre du
   film qui était identique, pas le bloc entier.
   `.vsuite figcaption b` NE DESCEND PAS : il porte une taille de police que les
   deux autres n'ont pas. Seuls les deux qui se répètent au mot près descendent. */
.vwide video,.vsuite video,.vfeat video{
  width:100%;height:auto;display:block;background:#151612;
  border-radius:12px;border:1px solid var(--line);
}
.vwide figcaption b,.vfeat figcaption b{display:block;color:#C9C8C0;font-weight:600;margin-bottom:5px}