/* ============================================================================
   CROSSFIT WODA GAP — monde visuel « salle de sport, plein pot » (25/09/2026)
   Refonte complète. Référence épinglée par le client : f7.vamtam.com.
   Ce fichier remplace woda.css + pages.css sur la page d'accueil.

   Le parti : un fond noir qui tient 60 % de la page, des aplats teal qui
   occupent des bandes entières plutôt que des boutons, des coupes en biais,
   un chevron qui sert de signe partout, et des photos en noir et blanc qui
   ne reprennent leurs couleurs qu'au survol. Rien n'est arrondi mollement :
   les angles sont coupés, pas adoucis.
   ============================================================================ */

/* ---------- Fontes, déjà hébergées ici : aucune requête tierce ---------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;
  font-display:swap;src:url('../fonts/archivo-latin.woff2') format('woff2')}
@font-face{font-family:'Azeret Mono';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('../fonts/azeretmono-latin.woff2') format('woff2')}

/* ---------- Jetons ---------- */
:root{
  /* Le noir n'est pas neutre : il tire légèrement vers le bleu de la dalle. */
  --noir:#07090C;
  --noir-2:#0C1015;
  --noir-3:#141A21;
  --craie:#F2F3F4;
  --craie-2:#B9BFC6;
  --craie-3:#7C858F;

  /* Le teal du logo. Il porte les actions ET les grands aplats. */
  --teal:#009FBA;
  --teal-clair:#3CC8E0;
  --teal-sombre:#00687A;
  --encre:#04222A;      /* le seul texte admis sur un aplat teal : 5,26:1 */

  /* Les autres couleurs du logo, réservées aux séries. */
  --orange:#F86D0C;
  --rouge:#D33339;
  --peche:#F9E3C8;
  --vert:#5C845F;

  --filet:rgba(242,243,244,.12);
  --filet-fort:rgba(242,243,244,.26);

  --page:min(104rem,100% - 3rem);
  --biais:4.5vw;                 /* la pente des coupes, partout la même */
  --sortie:cubic-bezier(.16,1,.3,1);

  --e1:.25rem; --e2:.5rem; --e3:.75rem; --e4:1rem; --e5:1.5rem;
  --e6:2rem; --e7:3rem; --e8:4.5rem; --e9:6.5rem; --e10:9rem;
}

/* ---------- Socle ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--noir);color:var(--craie);
  font-family:'Archivo',system-ui,sans-serif;font-weight:400;font-size:1.0625rem;line-height:1.65;
  font-variation-settings:'wdth' 100;
  overflow-x:hidden;
}
img,picture,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--teal-clair);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.page{width:var(--page);margin-inline:auto;position:relative;z-index:1}
.saut{position:absolute;left:-9999px;top:0;z-index:100;background:var(--teal);color:var(--encre);
  padding:.9rem 1.4rem;font-weight:800}
.saut:focus{left:1rem;top:1rem}
.hors-ecran{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}

/* ---------- La voix : capitales condensées, très lourdes ---------- */
.titre{font-weight:900;font-variation-settings:'wdth' 70;text-transform:uppercase;
  line-height:.86;letter-spacing:-.01em;text-wrap:balance}
.t-geant{font-size:clamp(3rem,1rem + 9.4vw,9.5rem);line-height:.82;letter-spacing:-.025em}
.t1{font-size:clamp(2.4rem,1.2rem + 4.6vw,5.5rem)}
.t2{font-size:clamp(1.9rem,1.2rem + 2.6vw,3.4rem)}
.t3{font-size:clamp(1.5rem,1.15rem + 1.5vw,2.3rem);font-variation-settings:'wdth' 78}
.chiffres{font-family:'Azeret Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* Le point final de chaque titre porte le teal : la seule ponctuation colorée du site. */
.pt{color:var(--teal)}

/* ---------- Le chevron, signe de la maison ---------- */
.chev{display:inline-block;width:.62em;height:.86em;background:currentColor;
  clip-path:polygon(0 0,45% 0,100% 50%,45% 100%,0 100%,55% 50%)}

/* ---------- Boutons ---------- */
.bouton{display:inline-flex;align-items:center;gap:.7rem;min-height:56px;padding:0 1.6rem;
  font-weight:800;font-variation-settings:'wdth' 84;text-transform:uppercase;letter-spacing:.06em;
  font-size:.88rem;text-decoration:none;border:0;cursor:pointer;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  transition:background-color .3s ease,color .3s ease,transform .3s var(--sortie)}
.bouton svg{width:1.15em;height:1.15em;flex:none}
.bouton--plein{background:var(--teal);color:var(--encre)}
.bouton--plein:hover,.bouton--plein:focus-visible{background:var(--teal-clair);transform:translateY(-2px)}
/* Un trait ne suit pas un angle coupe : le contour laissait deux angles ouverts et le bouton
   avait l'air casse. Sur la video, une plaque sombre translucide tient la forme et reste lisible. */
.bouton--ligne{background:rgba(12,16,21,.8);color:var(--craie);box-shadow:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.bouton--ligne:hover,.bouton--ligne:focus-visible{background:rgba(12,16,21,.94);color:var(--teal-clair)}
.bouton--encre{background:var(--encre);color:var(--craie)}
.bouton--encre:hover,.bouton--encre:focus-visible{background:#06303a;transform:translateY(-2px)}
.boutons{display:flex;flex-wrap:wrap;gap:.9rem}

/* ---------- En-tête ---------- */
/* Au-dessus de la barre d'appel du telephone (z-index 80) : sinon, menu ouvert, la barre
   passe par-dessus les derniers liens. */
.entete{position:fixed;inset:0 0 auto;z-index:90;display:flex;align-items:center;gap:var(--e5);
  padding:.9rem clamp(1rem,3vw,2.2rem);
  background:transparent;transition:background-color .35s ease}
/* Opaque une fois collee : a 94 %, les boutons et les titres de la page transparaissaient
   a travers la barre et donnaient l'impression d'un defaut d'affichage. */
.entete[data-fixee]{background:var(--noir);padding-block:.55rem;
  box-shadow:0 1px 0 var(--filet)}
.entete__logo{margin-right:auto;display:flex;align-items:center;position:relative;z-index:2}
.entete__logo img{height:38px;width:auto;transform-origin:left center;
  transition:transform .35s var(--sortie)}
.entete[data-fixee] .entete__logo img{transform:scale(.8)}

.nav{display:flex;align-items:center;gap:clamp(.9rem,1.8vw,2rem)}
.nav a,.nav__bascule{font-weight:800;font-variation-settings:'wdth' 84;text-transform:uppercase;
  letter-spacing:.08em;font-size:.76rem;color:var(--craie);text-decoration:none;background:none;border:0;
  padding:.6rem .1rem;cursor:pointer;position:relative;transition:color .25s ease}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:.15rem;height:2px;background:var(--teal);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--sortie)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a:hover,.nav a[aria-current="page"],.nav__bascule:hover{color:var(--teal-clair)}
.nav__groupe{position:relative;display:flex;align-items:center}
.nav__bascule{display:inline-flex;align-items:center;gap:.45rem}
.nav__bascule .chev{transform:rotate(90deg);transition:transform .3s var(--sortie)}
.nav__groupe:hover .nav__bascule .chev,.nav__groupe:focus-within .nav__bascule .chev{transform:rotate(-90deg)}

/* Le panneau deroulant : pose sous la barre, pas au milieu du bouton, avec un trait teal
   en tete pour le detacher de la page et l'angle coupe de la maison. */
.nav__sous{position:absolute;top:calc(100% + .7rem);left:-1.1rem;min-width:17rem;display:grid;
  padding:.45rem;background:var(--noir-2);
  box-shadow:inset 0 2px 0 var(--teal),0 30px 60px -26px #000,0 0 0 1px var(--filet);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s ease,transform .3s var(--sortie),visibility .3s;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
/* Le survol doit tenir pendant que la souris traverse l'espace sous le bouton. */
.nav__groupe::after{content:'';position:absolute;top:100%;left:0;right:0;height:.8rem}
.nav__groupe:hover .nav__sous,.nav__groupe:focus-within .nav__sous,
.nav__bascule[aria-expanded="true"] + .nav__sous{opacity:1;visibility:visible;transform:none}
.nav__sous a{padding:.85rem .95rem;font-size:.76rem;color:var(--craie-2);white-space:nowrap}
.nav__sous a::after{display:none}
.nav__sous a:hover,.nav__sous a:focus-visible,.nav__sous a[aria-current="page"]{background:var(--teal);color:var(--encre)}
.nav__titre{display:none}

.entete__actions{display:flex;align-items:center;gap:.7rem}
.entete .bouton{min-height:46px;font-size:.76rem;padding:0 1.1rem;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
/* Un trait ne suit pas un angle coupe : le contour laissait deux angles ouverts et le bouton
   avait l'air casse. Le bouton secondaire devient une plaque pleine, meme famille que l'appel. */
.entete .bouton--ligne{background:var(--noir-3);color:var(--craie);box-shadow:none}
.entete .bouton--ligne:hover,.entete .bouton--ligne:focus-visible{background:var(--noir-2);
  color:var(--teal-clair);box-shadow:none}

.burger{display:none;width:48px;height:48px;background:none;border:0;cursor:pointer;padding:12px;
  position:relative;z-index:2}
.burger span{display:block;height:2px;background:var(--craie);margin:5px 0;transition:.3s var(--sortie)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Le menu du telephone ---------- */
@media (max-width:64rem){
  .burger{display:block}
  .entete__actions{display:none}

  /* Voile plein, jamais translucide : le heros transparaissait derriere les liens. Le menu
     commence sous le logo et se fait defiler s'il depasse la hauteur de l'ecran. */
  .nav{position:fixed;inset:0;z-index:1;display:block;background:var(--noir);
    padding:calc(4.6rem + env(safe-area-inset-top)) clamp(1.25rem,6vw,2rem)
            calc(2.5rem + env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
  .nav[data-ouvert]{opacity:1;visibility:visible}

  /* Cale a gauche, comme tout le reste du site, et separe par des filets. */
  .nav a{display:flex;align-items:center;min-height:56px;padding:.2rem 0;
    border-bottom:1px solid var(--filet);
    font-size:clamp(1.25rem,1.05rem + .9vw,1.75rem);letter-spacing:-.01em;
    font-variation-settings:'wdth' 70;font-weight:900}
  .nav a::after{display:none}
  .nav a[aria-current="page"]{color:var(--teal-clair)}

  .nav__bascule{display:none}
  .nav__groupe{display:block;margin-bottom:var(--e5)}
  /* « Nos cours » devient un intertitre : sans lui, les six cours et les cinq pages se
     suivaient a l'identique, sans dire lesquels allaient ensemble. */
  .nav__titre{display:flex;align-items:center;gap:.6rem;margin:0 0 .3rem;
    font-family:'Azeret Mono',monospace;font-size:.76rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--craie-3)}
  .nav__titre .chev{background:var(--teal)}
  .nav__sous{position:static;opacity:1;visibility:visible;transform:none;background:none;
    box-shadow:none;padding:0;clip-path:none;display:block}
  .nav__sous a{padding:.2rem 0 .2rem 1.1rem;font-size:clamp(1.0625rem,.98rem + .4vw,1.3rem);
    font-variation-settings:'wdth' 74;font-weight:800;color:var(--craie);white-space:normal;
    position:relative}
  .nav__sous a::before{content:'';position:absolute;left:0;top:50%;margin-top:-.45rem;
    width:.55rem;height:.7rem;background:var(--c,var(--teal));
    clip-path:polygon(0 0,45% 0,100% 50%,45% 100%,0 100%,55% 50%)}
  .nav__sous li:nth-child(1) a{--c:var(--s1)}
  .nav__sous li:nth-child(2) a{--c:var(--s2)}
  .nav__sous li:nth-child(3) a{--c:var(--s3)}
  .nav__sous li:nth-child(4) a{--c:var(--s4)}
  .nav__sous li:nth-child(5) a{--c:var(--s5)}
  .nav__sous a:hover,.nav__sous a:focus-visible,.nav__sous a[aria-current="page"]{
    background:none;color:var(--teal-clair)}

  /* Les coordonnees ferment le menu : c'est la seule action qui compte. */
  .nav__pied{display:grid;gap:.7rem;margin-top:var(--e6)}
  .nav__pied a{min-height:56px;justify-content:center;border:0;font-size:.88rem;
    font-variation-settings:'wdth' 84;letter-spacing:.06em;text-transform:uppercase;
    clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
  .nav__pied a:first-child{background:var(--teal);color:var(--encre)}
  .nav__pied a:last-child{background:var(--noir-3);color:var(--craie)}
  .nav__pied svg{width:1.15em;height:1.15em;flex:none;margin-right:.6rem}
}
@media (min-width:64.0625rem){.nav__pied{display:none}}

/* ---------- Héros : la vidéo, plein cadre ---------- */
.hero{position:relative;isolation:isolate;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;padding-top:9rem;overflow:hidden;background:var(--noir-2)}
.hero__fond{position:absolute;inset:0;z-index:-2;
  background-image:image-set(url('../img/hero-fond-1400.avif') type('image/avif'),
                             url('../img/hero-fond-1400.webp') type('image/webp'));
  background-size:cover;background-position:58% 50%}
@media (max-width:52rem){
  .hero__fond{background-image:image-set(url('../img/hero-fond-900.avif') type('image/avif'),
                                         url('../img/hero-fond-900.webp') type('image/webp'))}
}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,9,12,.9) 0%,rgba(7,9,12,.45) 30%,rgba(7,9,12,.55) 62%,var(--noir) 100%)}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:#06202b;mix-blend-mode:color;opacity:.35}

.hero__corps{padding-bottom:clamp(2rem,5vw,4rem)}
.hero h1{color:var(--craie);max-width:16ch}
.hero__chapo{margin-top:clamp(1.2rem,2.4vw,2rem);max-width:44ch;font-size:clamp(1.0625rem,.98rem + .4vw,1.3rem);
  color:var(--craie-2)}
.hero .boutons{margin-top:clamp(1.6rem,3vw,2.4rem)}

/* Les faits, en bas du héros : une bande de cellules sur un filet. */
.faits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--filet);
  border-top:1px solid var(--filet);margin-top:clamp(2rem,4vw,3.5rem)}
.faits > div{background:var(--noir);padding:clamp(1.1rem,2.2vw,1.6rem) 0 0;display:grid;gap:.3rem}
.faits > div:nth-child(n+2){padding-left:clamp(1rem,2vw,1.8rem)}
.fait__nb{font-family:'Azeret Mono',monospace;font-weight:700;font-variant-numeric:tabular-nums;
  font-size:clamp(1.5rem,1.15rem + 1.5vw,2.3rem);line-height:1;color:var(--craie)}
.fait__lab{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--craie-3);font-weight:700}
@media (max-width:40rem){
  .faits{grid-template-columns:minmax(0,1fr)}
  .faits > div:nth-child(n+2){padding-left:0;padding-top:1rem}
}

/* ---------- Sections et coupes en biais ---------- */
.section{position:relative;padding-block:clamp(4rem,9vw,8rem);
  background-image:radial-gradient(1500px 560px at 50% -120px,
    rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 70%)}
.section--serree{padding-block:clamp(2.5rem,6vw,5rem)}
.clair{background-color:#E7EAED;color:#0B0E12;
  background-image:
    radial-gradient(1700px 560px at 50% -50px, #FFFFFF 0%, rgba(255,255,255,0) 80%),
    radial-gradient(1200px 380px at 50% 10px, rgba(0,159,186,.12) 0%, rgba(0,159,186,0) 76%)}
.clair .titre{color:#0B0E12}
.clair .fait__lab,.clair .doux{color:#5A626B}
.clair .pt{color:var(--teal-sombre)}
.biais-haut{clip-path:polygon(0 var(--biais),100% 0,100% 100%,0 100%);margin-top:calc(var(--biais) * -1);
  padding-top:calc(clamp(2.6rem,5vw,4.5rem) + var(--biais))}
.biais-bas{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--biais)),0 100%);
  padding-bottom:calc(clamp(4rem,9vw,8rem) + var(--biais))}

/* Le titre de section : un chevron, un sur-titre de mesure, le titre. */
.tete-section{display:grid;gap:clamp(.9rem,1.6vw,1.2rem);margin-bottom:clamp(2rem,4vw,3.2rem);
  max-width:34ch}
.tete-section--large{max-width:none}
.tete-section__mesure{display:flex;align-items:center;gap:.6rem;font-family:'Azeret Mono',monospace;
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.tete-section p{color:var(--craie-2);max-width:56ch}
.clair .tete-section p{color:#4A525B}

/* ---------- Bande teal pleine largeur : le geste de la référence ---------- */
.bande{position:relative;background:var(--teal);color:var(--encre);
  padding-block:clamp(2.6rem,5vw,4.5rem)}
.bande__grille{display:grid;gap:clamp(1.4rem,3vw,2.5rem);align-items:end}
@media (min-width:60rem){.bande__grille{grid-template-columns:minmax(0,1.6fr) auto}}
.bande h2{color:var(--encre);max-width:20ch}
.bande p{color:var(--encre);max-width:48ch;margin-top:.9rem}

/* ---------- Tuiles de cours ---------- */
.tuiles{display:grid;gap:1px;background:var(--filet)}
@media (min-width:60rem){.tuiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tuile:nth-child(4),.tuile:nth-child(5){grid-column:span 1}}
.tuile a{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(20rem,30vw,27rem);
  padding:clamp(1.4rem,2.4vw,2rem);text-decoration:none;color:var(--craie);background:var(--noir-2);
  overflow:hidden;isolation:isolate}
.tuile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  filter:grayscale(1) contrast(1.1) brightness(.7);transition:filter .6s ease,transform .9s var(--sortie)}
.tuile a::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,9,12,.1) 30%,rgba(7,9,12,.88) 100%)}
.tuile a:hover img,.tuile a:focus-visible img{filter:grayscale(0) contrast(1.05) brightness(.82);transform:scale(1.04)}
.tuile__num{font-family:'Azeret Mono',monospace;font-size:.76rem;letter-spacing:.14em;color:var(--teal-clair)}
.tuile h3{margin-top:auto;padding-top:1.2rem}
.tuile p{color:var(--craie-2);font-size:.96rem;margin-top:.5rem;max-width:32ch}
.tuile__lire{display:flex;align-items:center;gap:.5rem;margin-top:1rem;font-size:.76rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.1em;color:var(--teal-clair)}
.tuile a:hover .tuile__lire .chev{transform:translateX(4px)}
.tuile__lire .chev{transition:transform .3s var(--sortie)}

/* ---------- Frise de la séance ---------- */
.frise{display:grid;gap:clamp(1.4rem,2.6vw,2.2rem)}
@media (min-width:60rem){.frise{grid-template-columns:repeat(4,minmax(0,1fr))}}
.frise > li{position:relative;padding-top:2.2rem;border-top:2px solid var(--filet)}
.frise > li::before{content:'';position:absolute;top:-2px;left:0;width:var(--part,25%);height:2px;
  background:var(--c,var(--s1))}
.frise > li:nth-child(2){--c:var(--s2)}
.frise > li:nth-child(3){--c:var(--s3)}
.frise > li:nth-child(4){--c:var(--s4)}
.frise__h{font-family:'Azeret Mono',monospace;font-weight:700;font-variant-numeric:tabular-nums;
  font-size:clamp(1.5rem,1.15rem + 1.5vw,2.3rem);line-height:1;color:var(--craie)}
.frise h3{margin:.9rem 0 .5rem}
.frise p{color:var(--craie-2);font-size:.96rem}

/* ---------- Curseur d'échelle ---------- */
.echelle{display:grid;gap:clamp(1.6rem,3vw,2.6rem)}
@media (min-width:64rem){.echelle{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}}
.levier{background:var(--noir-2);padding:clamp(1.4rem,2.4vw,2rem);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%)}
.levier label{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--craie-3);font-weight:700;margin-bottom:1rem}
.levier input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;
  display:block;margin:0;cursor:pointer}
.levier input[type=range]::-webkit-slider-runnable-track{height:4px;
  background:linear-gradient(90deg,var(--teal) var(--part,0%),var(--filet-fort) var(--part,0%))}
.levier input[type=range]::-moz-range-track{height:4px;
  background:linear-gradient(90deg,var(--teal) var(--part,0%),var(--filet-fort) var(--part,0%))}
.levier input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:36px;margin-top:-16px;
  background:var(--teal);border:0;box-shadow:0 0 0 2px var(--noir)}
.levier input[type=range]::-moz-range-thumb{width:24px;height:36px;background:var(--teal);border:0;
  border-radius:0;box-shadow:0 0 0 2px var(--noir)}
.levier__crans{display:flex;justify-content:space-between;margin-top:.6rem;font-family:'Azeret Mono',monospace;
  font-size:.76rem;letter-spacing:.08em;color:var(--craie-3)}
.levier__crans span[data-actif]{color:var(--teal-clair)}
.wod{background:var(--noir-2);padding:clamp(1.4rem,2.6vw,2.2rem);
  box-shadow:inset 0 0 0 1px var(--filet-fort);clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}
.wod__tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.8rem;
  padding-bottom:1rem;border-bottom:1px solid var(--filet)}
.wod__nom{font-weight:900;font-variation-settings:'wdth' 74;text-transform:uppercase;
  font-size:clamp(1.5rem,1.15rem + 1.5vw,2.3rem);line-height:1}
.wod__type{font-family:'Azeret Mono',monospace;font-size:.76rem;letter-spacing:.1em;color:var(--craie-3)}
.wod ol{display:grid;gap:0;margin-top:.4rem}
.wod li{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid var(--filet)}
.wod__rep{font-family:'Azeret Mono',monospace;font-size:.76rem;color:var(--craie-3)}
.wod__charge{font-family:'Azeret Mono',monospace;font-size:.88rem;color:var(--teal-clair);text-align:right}

/* ---------- Coach ---------- */
.coach{display:grid;gap:clamp(1.6rem,3vw,3rem)}
@media (min-width:64rem){.coach{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    align-items:stretch}
  /* La photo tient les deux rangees ; le texte reste dans sa colonne au lieu de retomber
     sous elle, dans le tiers gauche, avec deux tiers de vide a droite. */
  .coach__photo,.coach__portrait{grid-row:1 / span 2;aspect-ratio:auto;min-height:26rem}
  .coach__corps{grid-column:2}}
.coach__photo{position:relative;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%)}
.coach__photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;filter:grayscale(1) contrast(1.08)}
.coach__titres{display:grid;gap:0;margin-top:1.6rem}
.coach__titres li{display:flex;align-items:flex-start;gap:.8rem;padding:.85rem 0;border-bottom:1px solid var(--filet)}
.coach__titres .chev{color:var(--teal);margin-top:.35em;flex:none}
.coach__gouts{display:grid;gap:0;margin-top:1.4rem}
.coach__gouts div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1rem;
  padding:.8rem 0;border-bottom:1px solid var(--filet)}
.coach__gouts dt{font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.76rem}
.coach__gouts dd{color:var(--craie-2)}

/* ---------- Avis ---------- */
.avis{display:grid;gap:1px;background:var(--filet)}
@media (min-width:60rem){.avis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.avis__carte{background:var(--noir);padding:clamp(1.4rem,2.4vw,2rem);display:flex;flex-direction:column}
.avis__texte{color:var(--craie);font-size:1.0625rem;line-height:1.62}
.avis__src{margin-top:auto;padding-top:1.2rem;display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:baseline}
.avis__auteur{font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.76rem}
.avis__date{font-family:'Azeret Mono',monospace;font-size:.76rem;color:var(--craie-3)}
.avis__note{display:inline-flex;align-items:baseline;gap:.5rem;background:var(--teal);color:var(--encre);
  padding:.9rem 1.4rem;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.avis__chiffre{font-weight:900;font-variation-settings:'wdth' 70;font-size:clamp(1.9rem,1.2rem + 2.6vw,3.4rem);
  line-height:.85;font-variant-numeric:tabular-nums}
.avis__sur{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800}

/* ---------- Galerie ---------- */
.galerie{display:grid;gap:1px;background:var(--filet)}
@media (min-width:52rem){.galerie{grid-template-columns:repeat(6,minmax(0,1fr))}
  .galerie figure:nth-child(1){grid-column:span 4;grid-row:span 2}
  .galerie figure:nth-child(2){grid-column:span 2;grid-row:span 2}
  .galerie figure:nth-child(n+3){grid-column:span 2}}
.galerie figure{position:relative;margin:0;background:var(--noir-2);overflow:hidden;min-height:11rem}
.galerie img{width:100%;height:100%;object-fit:cover;filter:grayscale(.85) contrast(1.05);
  transition:filter .6s ease,transform .9s var(--sortie)}
.galerie figure:hover img{filter:grayscale(0);transform:scale(1.03)}
.galerie figcaption{position:absolute;left:0;bottom:0;background:var(--noir);color:var(--craie-2);
  font-family:'Azeret Mono',monospace;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.5rem .8rem}

/* ---------- Venir ---------- */
.venir{display:grid;gap:clamp(1.6rem,3vw,3rem)}
@media (min-width:64rem){.venir{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* La photo suit la hauteur de la colonne de texte : sans cela, son rapport 4/5 creuse
   trois cents pixels de vide sous les coordonnees. */
@media (min-width:64rem){
  .venir > .acces{aspect-ratio:auto;height:100%;min-height:22rem}
}
.nap div{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:1rem;padding:1rem 0;
  border-bottom:1px solid var(--filet)}
.nap dt{font-family:'Azeret Mono',monospace;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--craie-3)}
.nap dd{color:var(--craie)}
.nap a{color:var(--teal-clair);text-decoration:none;border-bottom:1px solid currentColor}
@media (max-width:34rem){.nap div{grid-template-columns:minmax(0,1fr);gap:.2rem}}
.zones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2rem;margin-top:1.6rem}
.zones div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.7rem 0;
  border-bottom:1px solid var(--filet)}
.zones dd{font-family:'Azeret Mono',monospace;font-size:.76rem;color:var(--craie-3)}

/* ---------- Appel final ---------- */
.final{position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(5rem,10vw,9rem)}
.final img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  filter:grayscale(1) brightness(.4)}
.final::after{content:'';position:absolute;inset:0;z-index:-1;background:#06202b;mix-blend-mode:color;opacity:.5}
.final h2{max-width:18ch}
.final p{margin:1.2rem 0 2rem;max-width:46ch;color:var(--craie-2)}

/* ---------- Pied ---------- */
.pied{background:var(--noir-2);padding-block:clamp(3rem,6vw,5rem) 2rem}
.pied__num{display:inline-block;font-weight:900;font-variation-settings:'wdth' 70;
  font-size:clamp(2.4rem,1.2rem + 4.6vw,5.5rem);line-height:.9;letter-spacing:-.01em;color:var(--craie);
  text-decoration:none;font-variant-numeric:tabular-nums;transition:color .3s ease}
.pied__num:hover{color:var(--teal-clair)}
/* Le numero et les horaires tiennent la meme ligne : le numero ne laisse plus les deux
   tiers droits du pied de page vides. */
.pied__tete{display:grid;gap:clamp(1.2rem,3vw,2.5rem);align-items:end;
  padding-bottom:clamp(1.6rem,3vw,2.4rem);border-bottom:1px solid var(--filet)}
@media (min-width:64rem){.pied__tete{grid-template-columns:auto minmax(0,1fr)}}
.pied__heures{margin:0;display:grid;gap:0;align-content:end}
@media (min-width:48rem){.pied__heures{grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(1.5rem,3vw,3rem)}}
.pied__heures div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.55rem 0;border-bottom:1px solid var(--filet)}
.pied__heures dt{color:var(--craie-2);font-weight:700;font-size:.96rem}
.pied__heures dd{margin:0;font-family:'Azeret Mono',monospace;font-size:.76rem;color:var(--craie-3);
  white-space:nowrap}
.pied__grille{display:grid;gap:var(--e6);margin-top:clamp(2.4rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.pied h2{font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;color:var(--craie-3);
  font-weight:800;margin-bottom:1rem}
.pied nav a{display:inline-block;padding:.35rem 0;color:var(--craie-2);text-decoration:none;font-size:.96rem}
.pied nav a:hover{color:var(--teal-clair)}
.pied address{font-style:normal;color:var(--craie-2)}
.pied__bas{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center;
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.4rem;border-top:1px solid var(--filet);
  font-size:.76rem;color:var(--craie-3)}
.pied__bas a{color:var(--craie-3);text-decoration:none}
.pied__bas a:hover{color:var(--teal-clair)}
.pied__signature{display:flex;align-items:center;gap:.6rem}
.pied__signature a{display:inline-flex;align-items:center;min-height:44px;padding:.4rem}
.pied__signature img{height:17px;width:auto;opacity:.6;transition:opacity .3s ease}
.pied__signature a:hover img{opacity:1}

/* ---------- Barre de contact mobile ---------- */
.barre{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;
  grid-template-columns:repeat(3,1fr);padding-bottom:env(safe-area-inset-bottom)}
.barre a{display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:58px;
  font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.76rem;text-decoration:none}
.barre a svg{width:1.15em;height:1.15em;flex:none}
.barre a:first-child{background:var(--teal);color:var(--encre)}
.barre a:nth-child(2),.barre a:nth-child(3){background:var(--noir-3);color:var(--craie)}
.barre a:nth-child(3){box-shadow:inset 1px 0 0 var(--filet)}
/* A trois, le libelle se serre : l'icone garde sa place, le mot rapetisse. */
@media (max-width:26rem){.barre a{gap:.4rem;font-size:.72rem;letter-spacing:.03em}}
@media (max-width:64rem){.barre{display:grid}body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}}

/* ---------- Marqueur de contenu manquant ---------- */
.afournir{display:inline-block;background:repeating-linear-gradient(135deg,rgba(0,159,186,.16) 0 7px,
  transparent 7px 14px);box-shadow:inset 0 -2px 0 var(--teal);color:var(--craie-2);
  font-family:'Azeret Mono',monospace;font-size:.76rem;padding:.15rem .45rem}
.clair .afournir{color:#4A525B}

/* ---------- Révélations, seulement si le script a pris la main ---------- */
.js .rev{opacity:0;transform:translateY(24px)}

/* ---------- Impression ---------- */
@media print{
  .entete,.barre,.hero__video,.galerie,.final img{display:none!important}
  *,*::before,*::after{color:#111!important;background:#fff!important;box-shadow:none!important;
    clip-path:none!important}
  .section{padding-block:1rem!important}
}

/* En-tete du bloc des avis : le titre a gauche, la note en aplat teal a droite. */
.avis__entete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;margin-bottom:clamp(2rem,4vw,3.2rem)}
.avis__entete h2{margin-top:.9rem}
.avis__compte{margin-top:.9rem;color:var(--craie-2);max-width:52ch}
.avis__compte a{color:var(--teal-clair)}

/* ============================================================================
   Premier tour d'inspection (25/09/2026)
   ============================================================================ */

/* Le titre n'est pas soumis à la mesure de lecture : seul le chapô l'est. */
.tete-section{max-width:none}
.tete-section h2{max-width:22ch}
.tete-section p{max-width:54ch}

/* La section qui précède une coupe en biais doit laisser passer le biseau, sinon il rogne
   le bas de son contenu. */
.section:has(+ .biais-haut),.bande:has(+ .biais-haut){padding-bottom:clamp(2.6rem,5vw,4.5rem)}

/* Sur téléphone, la barre d'appel occupe le bas de l'écran : le héros lui laisse la place. */
@media (max-width:64rem){
  .hero{min-height:calc(100svh - 58px);padding-top:7rem}
  .hero__corps{padding-bottom:1.5rem}
  .faits{margin-top:1.6rem}
}

/* La frise reste lisible quand les colonnes se resserrent. */
@media (max-width:60rem){
  .frise{gap:1.6rem}
  .frise > li{padding-top:1.4rem}
}

/* Une section claire n'est pas une couleur de fond : c'est un jeu de jetons inversé. Sans ça,
   les textes gardent les gris du monde sombre et tombent à 3,4:1 sur le blanc. */
.clair{
  --craie:#0B0E12;
  --craie-2:#41484F;
  --craie-3:#525A62;
  --teal-clair:#00758A;
  --filet:rgba(11,14,18,.16);
  --filet-fort:rgba(11,14,18,.3);
}
.clair a{color:var(--teal-sombre)}

/* Au doigt, tout ce qui se touche fait au moins 44 px de haut : le logo, les coordonnées,
   les liens du pied et les mentions légales étaient entre 15 et 39 px. */
@media (pointer:coarse),(max-width:64rem){
  .entete__logo,.pied nav a,.pied__bas a,.nap a,.pied address a,.pied__num{
    display:inline-flex;align-items:center;min-height:44px}
  .pied__bas a{padding-inline:.15rem}
  .nap dd{display:flex;flex-wrap:wrap;gap:0 .6rem;align-items:center}
}


/* ============================================================================
   Le titre du heros : le collage du logo, translucide (25/09/2026)
   Le client tient a voir la video a travers les lettres et a retrouver les couleurs du logo.
   Deux lignes portent le collage en aplats nets (SVG en ligne, opacite .7), cernees de peche
   comme le WODA du logo ; la ligne du milieu est a la craie, elle aussi translucide.
   ============================================================================ */
.hero h1 .ligne{display:block}
.hero h1 .collage,.hero h1 .craie{background-repeat:no-repeat;background-size:100% 100%;
  color:rgba(242,243,244,.72)}
.hero h1 .collage{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 100' preserveAspectRatio='none'%3E%3Cg opacity='.7'%3E%3Crect x='0' y='0' width='800' height='100' fill='%230B8FA2'/%3E%3Cpolygon points='0,0 140,0 95,100 0,100' fill='%23057989'/%3E%3Cpolygon points='430,0 520,0 470,100 380,100' fill='%23057989'/%3E%3Cpolygon points='700,0 800,0 800,100 735,100' fill='%23057989'/%3E%3Cpolygon points='150,100 230,35 300,40 350,100' fill='%232DACBE'/%3E%3Cpolygon points='600,100 650,55 720,60 700,100' fill='%232DACBE'/%3E%3Cpolygon points='300,0 380,0 350,30 290,25' fill='%232DACBE'/%3E%3Cpolygon points='60,100 150,20 205,0 250,0 160,100' fill='%23F86D0C'/%3E%3Cpolygon points='515,100 585,30 640,0 660,0 590,100' fill='%23F86D0C'/%3E%3Cpolygon points='330,60 362,46 352,80 322,90' fill='%23F86D0C'/%3E%3Cpolygon points='255,0 300,0 262,55 238,45' fill='%23D33339'/%3E%3Cpolygon points='745,40 782,24 770,72' fill='%23D33339'/%3E%3Cpolygon points='360,0 395,0 372,22' fill='%235C845F'/%3E%3Cpolygon points='680,100 705,72 722,100' fill='%235C845F'/%3E%3Cpath d='M200 70Q230 55 262 72T318 70L312 84Q280 94 248 82T205 86Z' fill='%23F9E3C8'/%3E%3Cpath d='M540 20Q575 8 610 22L600 34Q570 26 545 32Z' fill='%23F9E3C8'/%3E%3Cpath d='M20 82L112 14' stroke='%23F4EFE6' stroke-width='3' fill='none'/%3E%3Cpath d='M468 96L562 40' stroke='%23F4EFE6' stroke-width='3' fill='none'/%3E%3Ccircle cx='120' cy='30' r='6' fill='%23F9E3C8'/%3E%3Ccircle cx='410' cy='78' r='5' fill='%23F9E3C8'/%3E%3Ccircle cx='476' cy='18' r='7' fill='%23F9E3C8'/%3E%3Ccircle cx='660' cy='84' r='5' fill='%23F9E3C8'/%3E%3Ccircle cx='772' cy='14' r='6' fill='%23F9E3C8'/%3E%3Ccircle cx='238' cy='20' r='4' fill='%23F9E3C8'/%3E%3C/g%3E%3C/svg%3E")}
.hero h1 .collage--b{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 100' preserveAspectRatio='none'%3E%3Cg opacity='.7' transform='translate(800 0) scale(-1 1)'%3E%3Crect x='0' y='0' width='800' height='100' fill='%230B8FA2'/%3E%3Cpolygon points='0,0 140,0 95,100 0,100' fill='%23057989'/%3E%3Cpolygon points='430,0 520,0 470,100 380,100' fill='%23057989'/%3E%3Cpolygon points='700,0 800,0 800,100 735,100' fill='%23057989'/%3E%3Cpolygon points='150,100 230,35 300,40 350,100' fill='%232DACBE'/%3E%3Cpolygon points='600,100 650,55 720,60 700,100' fill='%232DACBE'/%3E%3Cpolygon points='300,0 380,0 350,30 290,25' fill='%232DACBE'/%3E%3Cpolygon points='60,100 150,20 205,0 250,0 160,100' fill='%23F86D0C'/%3E%3Cpolygon points='515,100 585,30 640,0 660,0 590,100' fill='%23F86D0C'/%3E%3Cpolygon points='330,60 362,46 352,80 322,90' fill='%23F86D0C'/%3E%3Cpolygon points='255,0 300,0 262,55 238,45' fill='%23D33339'/%3E%3Cpolygon points='745,40 782,24 770,72' fill='%23D33339'/%3E%3Cpolygon points='360,0 395,0 372,22' fill='%235C845F'/%3E%3Cpolygon points='680,100 705,72 722,100' fill='%235C845F'/%3E%3Cpath d='M200 70Q230 55 262 72T318 70L312 84Q280 94 248 82T205 86Z' fill='%23F9E3C8'/%3E%3Cpath d='M540 20Q575 8 610 22L600 34Q570 26 545 32Z' fill='%23F9E3C8'/%3E%3Cpath d='M20 82L112 14' stroke='%23F4EFE6' stroke-width='3' fill='none'/%3E%3Cpath d='M468 96L562 40' stroke='%23F4EFE6' stroke-width='3' fill='none'/%3E%3Ccircle cx='120' cy='30' r='6' fill='%23F9E3C8'/%3E%3Ccircle cx='410' cy='78' r='5' fill='%23F9E3C8'/%3E%3Ccircle cx='476' cy='18' r='7' fill='%23F9E3C8'/%3E%3Ccircle cx='660' cy='84' r='5' fill='%23F9E3C8'/%3E%3Ccircle cx='772' cy='14' r='6' fill='%23F9E3C8'/%3E%3Ccircle cx='238' cy='20' r='4' fill='%23F9E3C8'/%3E%3C/g%3E%3C/svg%3E")}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 .collage{color:transparent;-webkit-background-clip:text;background-clip:text;
    -webkit-text-stroke:2px rgba(249,227,200,.92)}
  @media (max-width:52rem){.hero h1 .collage{-webkit-text-stroke-width:1.25px}}
}
/* Le voile du heros s'allege : sinon la video ne passe plus a travers les lettres. */
.hero::before{background:linear-gradient(180deg,rgba(7,9,12,.72) 0%,rgba(7,9,12,.2) 26%,
  rgba(7,9,12,.3) 58%,var(--noir) 100%)}
.hero::after{opacity:.3}
/* Sans video, les lettres restent lisibles sur la photo de fond. */
.hero:not([data-video]) h1 .collage{-webkit-text-stroke-width:2.4px}

/* ============================================================================
   Colorisation (25/09/2026) : le site prend les couleurs du logo.
   Le teal garde les actions — boutons, liens, focus, aplats d'appel. Les autres
   couleurs numérotent les séries, dans le même ordre partout : turquoise, orange,
   vert, rouge, pêche. Elles ne portent jamais de texte courant : filets, chevrons,
   numéros et repères seulement.
   ============================================================================ */
:root{--s1:var(--teal);--s2:var(--orange);--s3:var(--vert);--s4:var(--rouge);--s5:var(--peche)}

/* Les cinq cours : un filet, un numéro et un lien de la couleur de la tuile. */
.tuile a::before{content:'';position:absolute;left:0;top:0;width:3.4rem;height:4px;z-index:1;
  background:var(--c,var(--teal))}
.tuile:nth-child(1) a{--c:var(--s1)}
.tuile:nth-child(2) a{--c:var(--s2)}
.tuile:nth-child(3) a{--c:var(--s3)}
.tuile:nth-child(4) a{--c:var(--s4)}
.tuile:nth-child(5) a{--c:var(--s5)}
.tuile:nth-child(6) a{--c:var(--s1)}
.tuile__num{color:var(--c,var(--teal-clair))}
.tuile__lire{color:var(--teal-clair)}
.section.clair .tuile__lire{color:var(--teal-clair)}

/* La galerie : un filet de couleur au-dessus de chaque légende. */
.galerie figcaption{box-shadow:inset 0 3px 0 var(--c,var(--teal))}
.galerie figure:nth-child(1){--c:var(--s1)}
.galerie figure:nth-child(2){--c:var(--s2)}
.galerie figure:nth-child(3){--c:var(--s3)}
.galerie figure:nth-child(4){--c:var(--s4)}
.galerie figure:nth-child(5){--c:var(--s5)}

/* Les avis : le filet haut de chaque carte suit la même série. */
.avis__carte{box-shadow:inset 0 3px 0 var(--c,var(--teal))}
.avis__carte:nth-child(1){--c:var(--s1)}
.avis__carte:nth-child(2){--c:var(--s2)}
.avis__carte:nth-child(3){--c:var(--s3)}
.avis__carte:nth-child(4){--c:var(--s4)}

/* Les diplômes du coach : un chevron par couleur. */
.coach__titres li:nth-child(1) .chev{color:var(--s1)}
.coach__titres li:nth-child(2) .chev{color:var(--s2)}
.coach__titres li:nth-child(3) .chev{color:var(--s3)}
.coach__titres li:nth-child(4) .chev{color:var(--s4)}

/* Les faits du héros : un repère coloré sous chaque chiffre. */
.faits > div{position:relative}
.faits > div::after{content:'';position:absolute;left:0;bottom:-1px;width:2.4rem;height:3px;
  background:var(--c,var(--teal))}
.faits > div:nth-child(1){--c:var(--s1)}
.faits > div:nth-child(2){--c:var(--s2)}
.faits > div:nth-child(3){--c:var(--s4)}
@media (max-width:40rem){.faits > div::after{display:none}}

/* Les sur-titres de section alternent, sans jamais rejouer le teal deux fois de suite. */
.section:nth-of-type(2) .tete-section__mesure{color:var(--s2)}
.section:nth-of-type(3) .tete-section__mesure{color:var(--s3)}
.section:nth-of-type(4) .tete-section__mesure{color:var(--s4)}
.clair .tete-section__mesure{color:var(--teal-sombre)}
.clair .section:nth-of-type(2) .tete-section__mesure{color:#B0521A}

/* ============================================================================
   La bande de faits du héros, revue (25/09/2026)
   Elle flottait comme un rectangle noir posé sur la vidéo. C'est maintenant un bandeau d'un
   bord à l'autre, collé au bas du héros. La gouttière se calcule en unités d'écran seulement :
   la mêler à un pourcentage faisait déborder la première cellule et chevaucher les libellés.
   ============================================================================ */
.hero{padding-bottom:0}
.hero__corps{padding-bottom:clamp(1.6rem,3vw,2.6rem)}
.faits{width:100%;margin:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  background:var(--noir);border-top:1px solid var(--filet);
  padding-inline:max(clamp(1rem,3vw,2.2rem),calc((100vw - 104rem) / 2))}
.faits > div{background:none;gap:.45rem;border-left:1px solid var(--filet);
  padding:clamp(1rem,1.8vw,1.4rem) clamp(1rem,2.2vw,1.8rem)}
.faits > div:first-child{border-left:0;padding-left:0}
.faits > div:last-child{padding-right:0}
.faits > div::after{display:none}
.fait__lab{display:flex;align-items:center;gap:.5rem;color:var(--craie-3);font-size:.76rem;
  letter-spacing:.14em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.faits > div:nth-child(1) .chev{color:var(--s1)}
.faits > div:nth-child(2) .chev{color:var(--s2)}
.faits > div:nth-child(3) .chev{color:var(--s4)}
/* Les chiffres restent en mesure ; l'adresse est du texte et se compose comme tel. */
.fait__nb{font-family:'Azeret Mono',monospace;letter-spacing:-.02em;
  font-size:clamp(1.5rem,1.15rem + 1.5vw,2.3rem)}
.fait__u{font-family:'Archivo',sans-serif;font-weight:800;font-variation-settings:'wdth' 78;
  font-size:.6em;margin-left:.12em;letter-spacing:0}
.fait__nb--texte{font-family:'Archivo',sans-serif;font-weight:800;font-variation-settings:'wdth' 84;
  font-size:clamp(1.0625rem,.98rem + .4vw,1.3rem);letter-spacing:.01em;line-height:1.3;white-space:normal}
@media (max-width:48rem){
  .faits{grid-template-columns:minmax(0,1fr);padding-inline:clamp(1rem,5vw,1.6rem)}
  .faits > div{border-left:0;border-top:1px solid var(--filet);padding-inline:0}
  .faits > div:first-child{border-top:0}
  .fait__lab{white-space:normal}
}

/* ============================================================================
   La galerie, revue (25/09/2026)
   Le noir et blanc éteignait la salle, la grande tuile laissait une zone morte de sol, et les
   légendes flottaient sur des bandes noires sous les images. Grille régulière, cadres pleins,
   couleurs rendues, légende posée dans l'image.
   ============================================================================ */
.galerie{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
@media (min-width:52rem){.galerie{grid-template-columns:repeat(3,minmax(0,1fr))}}
.galerie figure,
.galerie figure:nth-child(1),.galerie figure:nth-child(2),.galerie figure:nth-child(n+3){
  grid-column:auto;grid-row:auto;min-height:0;aspect-ratio:4/3;overflow:hidden;position:relative}
.galerie picture{display:block;width:100%;height:100%}
.galerie img{width:100%;height:100%;object-fit:cover;
  filter:saturate(1.02) contrast(1.04) brightness(.96);transition:transform .9s var(--sortie)}
.galerie figure:hover img{filter:saturate(1.08) contrast(1.05) brightness(1);transform:scale(1.04)}
.galerie figcaption{left:0;bottom:0;background:rgba(7,9,12,.88);color:var(--craie-2);
  padding:.55rem .9rem;box-shadow:inset 0 3px 0 var(--c,var(--teal))}
/* La première vue, plus large : elle montre la salle entière. */
@media (min-width:52rem){
  .galerie figure:nth-child(1){grid-column:span 2;aspect-ratio:8/3}
}

/* Les photos de la galerie se passent de legende a l'ecran : le sujet est dans le texte
   alternatif de chaque image. Le filet de couleur passe en haut du cadre. */
.galerie figure{box-shadow:inset 0 3px 0 var(--c,var(--teal))}
.galerie figcaption{display:none}

/* ============================================================================
   LES PAGES INTÉRIEURES (25/09/2026)
   Même monde que l'accueil : noir dominant, aplats teal, coupes en biais, chevrons.
   ============================================================================ */

/* ---------- En-tête de page ---------- */
.tete{position:relative;isolation:isolate;display:flex;overflow:hidden;background:var(--noir-2);
  min-height:clamp(22rem,58svh,34rem)}
.tete--nue{min-height:0;padding-top:7rem;background:var(--noir)}
.tete__fond{position:absolute;inset:0;z-index:-2;display:block}
/* L'etalonnage : un peu desaturee, contrastee, assombrie. Une photo brute derriere un
   titre reste une photo derriere un titre ; etalonnee, elle entre dans la palette. */
.tete__fond img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.26) contrast(1.16) brightness(.88) saturate(1.08)}
.tete::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    /* la lumiere tombe du haut a droite ; le titre, en bas a gauche, se pose sur le plus sombre */
    linear-gradient(105deg,rgba(7,9,12,.72) 0%,rgba(7,9,12,.24) 56%,rgba(7,9,12,.04) 100%),
    /* le haut reste franchement sombre pour la barre du menu, le bas se ferme sur le noir */
    linear-gradient(180deg,rgba(7,9,12,.76) 0%,rgba(7,9,12,.26) 24%,rgba(7,9,12,0) 42%,
                    rgba(7,9,12,.52) 76%,var(--noir) 100%),
    /* vignette : les angles rentrent, l'oeil va au centre */
    radial-gradient(126% 100% at 50% 38%,rgba(7,9,12,0) 48%,rgba(7,9,12,.42) 100%)}
.tete::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:#06202b;mix-blend-mode:color;opacity:.34}
.tete--nue::before,.tete--nue::after{display:none}
.tete__contenu{display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(1rem,2.4vw,1.8rem);
  padding-top:clamp(6.5rem,10vw,8rem);padding-bottom:clamp(2rem,4vw,3.4rem)}
.tete__bas{display:grid;gap:clamp(1rem,2.2vw,1.8rem)}
@media (min-width:64rem){.tete__bas{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:end}}
.tete h1{color:var(--craie)}
.tete__chapo{color:var(--craie-2);font-size:clamp(1.0625rem,.98rem + .4vw,1.3rem);
  padding-left:1.1rem;box-shadow:inset 2px 0 0 var(--teal)}
  margin:0;background:rgba(7,9,12,.88);color:var(--craie-2);padding:.45rem .8rem;
  font-family:'Azeret Mono',monospace;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase}

/* ---------- Fil d'Ariane ---------- */
.ariane{margin:0}
.ariane ol{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;
  font-family:'Azeret Mono',monospace;font-size:.76rem;letter-spacing:.08em;color:var(--craie-3)}
.ariane a{color:var(--craie-2);text-decoration:none}
.ariane a:hover{color:var(--teal-clair)}
.ariane li + li::before{content:'/';margin-right:.45rem;color:var(--craie-3)}

/* ---------- Corps de texte : un titre, son contenu ---------- */
.prose{display:block;margin-top:clamp(1rem,2vw,2rem)}
.prose > .bloc + .bloc{margin-top:clamp(3rem,6vw,5.5rem)}
.prose h2{margin-bottom:clamp(1rem,2vw,1.4rem)}
.prose h2::after{content:'';display:block;width:2.8rem;height:4px;margin-top:1rem;
  background:var(--teal);transform:skewX(-20deg)}
.prose h3{margin:clamp(1.6rem,3vw,2.2rem) 0 .6rem}
.prose p{color:var(--craie-2);font-size:1.0625rem;line-height:1.7;max-width:70ch}
.prose p + p{margin-top:var(--e4)}
.prose strong{color:var(--craie);font-weight:800}
.prose a{color:var(--teal-clair);text-decoration:none;box-shadow:inset 0 -1px 0 currentColor}
.prose > ul,.prose > .bloc > ul{display:grid;grid-template-columns:minmax(0,1fr);gap:0;
  margin-top:var(--e4)}
/* Le chevron est pose en reperage absolu plutot qu'en element flex : un flex item anonyme
   ne se laisse pas retrecir, et une puce en flex faisait deborder la liste de 38 px sur
   telephone des qu'une ligne contenait une espace insecable. */
.prose > ul li,.prose > .bloc > ul li{position:relative;padding:.9rem 0 .9rem 1.5rem;
  border-bottom:1px solid var(--filet);color:var(--craie-2);max-width:70ch}
.prose > ul li::before,.prose > .bloc > ul li::before{content:'';position:absolute;left:0;
  top:calc(.9rem + .35em);width:.7rem;height:.9rem;
  background:var(--teal);clip-path:polygon(0 0,45% 0,100% 50%,45% 100%,0 100%,55% 50%)}
@media (min-width:64.0625rem){
  /* Le titre tient toute la largeur, le contenu se met en deux colonnes. Enferme dans une
     colonne de gauche, le titre laissait le tiers gauche vide sur toute la hauteur du bloc
     et le texte, cale a droite, laissait encore du vide a sa droite. */
  .prose > .bloc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 clamp(2rem,4vw,4.5rem);align-items:start}
  .prose > .bloc > h2{grid-column:1 / -1;margin:0 0 clamp(1.6rem,3vw,2.6rem);
    font-size:clamp(2.4rem,1.2rem + 4.6vw,5.5rem);line-height:.86;max-width:22ch}
  .prose > .bloc > p{margin-top:0;max-width:60ch}
  .prose > .bloc > p + p{margin-top:var(--e4)}
  /* Les objets larges tiennent la pleine largeur : ils ont deja leurs propres colonnes. */
  .prose > .bloc > :is(.lexique,.idees,.paliers,.formules,.minuterie,.colonnes,.coach,
    .coachs,.encart,.galerie,.ouverture,.planning__enveloppe,table,figure,.encart-avis,
    .frise,.echelle){grid-column:1 / -1;max-width:none}
  /* Une liste passe elle aussi sur deux colonnes plutot que de tenir une moitie d'ecran. */
  .prose > .bloc > ul{grid-column:1 / -1;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 clamp(2rem,4vw,4.5rem)}
  .prose > .bloc > ul li{max-width:none}
  /* Un h3 et ce qui le suit restent dans la meme colonne. */
  .prose > .bloc > h3{grid-column:1 / -1;margin-top:clamp(1.6rem,3vw,2.2rem)}

  /* Un bloc qui ne porte que du texte pose son titre a gauche et son texte a droite.
     Titre pleine largeur, un paragraphe seul laisserait la moitie droite vide. */
  .prose > .bloc:not(:has(> :is(ul,.lexique,.idees,.paliers,.formules,.minuterie,.colonnes,.coach,.coachs,.encart,.galerie,.ouverture,.planning__enveloppe,table,figure,.encart-avis,.frise,.echelle))){grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
    align-items:start}
  .prose > .bloc:not(:has(> :is(ul,.lexique,.idees,.paliers,.formules,.minuterie,.colonnes,.coach,.coachs,.encart,.galerie,.ouverture,.planning__enveloppe,table,figure,.encart-avis,.frise,.echelle))) > h2{grid-column:1;grid-row:1 / span 99;
    margin-bottom:0;font-size:clamp(1.9rem,1.1rem + 1.9vw,2.7rem);line-height:.9;
    padding-right:clamp(1.2rem,2.6vw,2.4rem);align-self:start}
  .prose > .bloc:not(:has(> :is(ul,.lexique,.idees,.paliers,.formules,.minuterie,.colonnes,.coach,.coachs,.encart,.galerie,.ouverture,.planning__enveloppe,table,figure,.encart-avis,.frise,.echelle))) > :not(h2){grid-column:2;max-width:62ch}
}

/* ---------- Lexique, idées reçues, paliers ---------- */
.lexique{display:grid;gap:0 clamp(1.5rem,3vw,3rem);margin:0}
@media (min-width:48rem){.lexique{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lexique > div{padding:1rem 0;border-bottom:1px solid var(--filet)}
.lexique dt{font-weight:900;font-variation-settings:'wdth' 74;text-transform:uppercase;
  font-size:clamp(1.0625rem,.98rem + .4vw,1.3rem);color:var(--craie)}
.lexique dd{margin:.4rem 0 0;color:var(--craie-2)}

.idees{display:grid;gap:clamp(1.8rem,3.4vw,2.8rem) clamp(1.5rem,3vw,3rem)}
@media (min-width:48rem){.idees{grid-template-columns:repeat(2,minmax(0,1fr))}}
.idee h3{margin:0 0 .7rem;font-weight:900;font-variation-settings:'wdth' 72;text-transform:uppercase;
  font-size:clamp(1.25rem,1.05rem + .9vw,1.75rem);line-height:.98;color:var(--craie)}
.idee h3::before{content:'';display:block;width:2.6rem;height:4px;margin-bottom:.9rem;
  background:var(--c,var(--teal));transform:skewX(-20deg)}
.idees .idee:nth-child(1){--c:var(--s1)}
.idees .idee:nth-child(2){--c:var(--s2)}
.idees .idee:nth-child(3){--c:var(--s3)}
.idees .idee:nth-child(4){--c:var(--s4)}
.idees .idee:nth-child(5){--c:var(--s5)}
.idee p{color:var(--craie-2)}

.paliers{display:grid;gap:clamp(1.4rem,2.6vw,2.4rem);position:relative;padding-top:2.2rem;margin:0}
@media (min-width:48rem){.paliers{grid-template-columns:repeat(3,minmax(0,1fr))}}
.paliers::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--filet-fort)}
.paliers li{position:relative;color:var(--craie-2)}
.paliers li::before{content:'';position:absolute;left:0;top:calc(-2.2rem - 4px);width:2.4rem;height:4px;
  background:var(--c,var(--teal))}
.paliers li:nth-child(1){--c:var(--s1)}
.paliers li:nth-child(2){--c:var(--s2)}
.paliers li:nth-child(3){--c:var(--s4)}
.palier__duree{display:block;font-weight:900;font-variation-settings:'wdth' 70;text-transform:uppercase;
  font-size:clamp(1.9rem,1.2rem + 2.6vw,3.4rem);line-height:.9;color:var(--craie);margin-bottom:.6rem}

/* ---------- Formules ---------- */
/* De vraies cartes : detachees, sombres meme sur fond clair, l'angle coupe de la maison,
   le filet de serie en tete. Jointes par un filet d'un pixel sur un fond clair, elles
   formaient une grille fade de six rectangles blancs. */
.formules{display:grid;gap:clamp(1.2rem,2.4vw,2.2rem);margin-top:clamp(1.8rem,3.4vw,2.8rem)}
/* Garde-fou : la lueur ne peut pas allonger la page, quel que soit le flou. */
.section:has(.formules){overflow-x:clip}
@media (min-width:52rem){.formules{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:76rem){.formules{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Chaque carte a son cadre. Le cadre porte les deux ombres, qui debordent librement ;
   la carte garde son fond et son angle coupe. Une ombre posee sur la carte elle-meme etait
   retiree par le clip-path, qui s'applique apres le filtre.

   Deux couches, et l'ordre compte : la lueur coloree (::before), large et lointaine, puis
   l'ombre sombre (::after), serree, par-dessus. C'est l'ombre sombre qui donne l'epaisseur ;
   une couleur diffuse seule ne fait que teinter le fond, et la carte reste a plat. */
.formule-halo{position:relative;isolation:isolate;display:flex;
  transition:transform .35s var(--sortie)}
/* Les ombres ne debordent que verticalement : lateralement, elles poussaient la page a
   1451 px pour 1440 de fenetre. Le flou suffit a les etaler sur les cotes. */
.formule-halo::before{content:'';position:absolute;inset:-3% 0 -11%;z-index:0;
  background:radial-gradient(66% 60% at 50% 54%, var(--lueur,rgba(0,159,186,.36)), transparent 70%);
  filter:blur(22px);transition:background .35s ease}
.formule-halo::after{content:'';position:absolute;inset:16% 5% -6%;z-index:0;
  background:radial-gradient(58% 52% at 50% 72%, rgba(7,9,12,.5), rgba(7,9,12,0) 74%);
  filter:blur(15px);transition:inset .35s var(--sortie),background .35s ease}
.formule{position:relative;z-index:1;flex:1;padding:clamp(1.8rem,3vw,2.6rem);
  display:flex;flex-direction:column;
  background:
    /* le filet de serie s'eteint vers la droite : une barre pleine qui traverse fait gabarit */
    linear-gradient(90deg, var(--c,var(--teal)) 0%, var(--c,var(--teal)) 34%,
                    rgba(0,0,0,0) 94%) top left/100% 3px no-repeat,
    radial-gradient(92% 64% at 14% -20%, var(--halo,rgba(0,159,186,.22)), transparent 72%),
    linear-gradient(162deg, var(--noir-3) 0%, var(--noir-2) 38%, #090C11 100%),
    var(--noir-2);
  /* un filet d'un pixel detache la silhouette du fond clair */
  box-shadow:inset 0 0 0 1px rgba(242,243,244,.08);
  clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px)}
@media (hover:hover){
  .formule-halo:hover{transform:translateY(-6px)}
  .formule-halo:hover::before{background:radial-gradient(72% 66% at 50% 54%,
    var(--lueur-forte,rgba(0,159,186,.5)), transparent 72%)}
  .formule-halo:hover::after{inset:20% 3% -10%;
    background:radial-gradient(62% 56% at 50% 74%, rgba(7,9,12,.58), rgba(7,9,12,0) 76%)}
}
@media (prefers-reduced-motion:reduce){
  .formule-halo,.formule-halo::before,.formule-halo::after{transition:none}
}
.formule-halo:nth-child(1),.formule-halo:nth-child(6){--c:var(--s1);
  --halo:rgba(0,159,186,.26);--lueur:rgba(0,159,186,.36);--lueur-forte:rgba(0,159,186,.5)}
.formule-halo:nth-child(2){--c:var(--s2);
  --halo:rgba(248,109,12,.22);--lueur:rgba(248,109,12,.3);--lueur-forte:rgba(248,109,12,.44)}
.formule-halo:nth-child(3){--c:var(--s3);
  --halo:rgba(92,132,95,.3);--lueur:rgba(92,132,95,.38);--lueur-forte:rgba(92,132,95,.52)}
.formule-halo:nth-child(4){--c:var(--s4);
  --halo:rgba(211,51,57,.22);--lueur:rgba(211,51,57,.3);--lueur-forte:rgba(211,51,57,.44)}
.formule-halo:nth-child(5){--c:var(--s5);
  --halo:rgba(249,227,200,.16);--lueur:rgba(200,160,100,.34);--lueur-forte:rgba(200,160,100,.46)}
.formule h2,.formule h3{font-family:'Azeret Mono',ui-monospace,monospace;font-weight:700;
  text-transform:uppercase;font-size:.76rem;letter-spacing:.14em;color:var(--craie-2)}
.formule__prix,.formule__prix--mot{display:block;font-weight:900;font-variation-settings:'wdth' 70;
  text-transform:uppercase;font-size:clamp(1.9rem,1.2rem + 2.6vw,3.4rem);line-height:.95;
  color:var(--craie);margin:.5rem 0 .2rem}
.formule__unite{display:block;margin-top:.5rem;font-weight:700;font-variation-settings:'wdth' 88;
  font-size:.76rem;letter-spacing:.1em;line-height:1.3;text-transform:uppercase;color:var(--craie-3)}
.formule__prix small,.formule__prix--mot small{display:block;margin-top:.5rem;font-weight:700;
  font-variation-settings:'wdth' 88;font-size:.76rem;letter-spacing:.1em;line-height:1.3;
  color:var(--craie-3)}
.formule ul{display:grid;gap:0;margin-top:auto;padding-top:1.2rem;border-top:1px solid var(--filet)}
.formule li{display:flex;gap:.7rem;padding:.55rem 0;color:var(--craie-2);font-size:.96rem}
.formule li::before{content:'';flex:none;width:.6rem;height:.8rem;margin-top:.4em;background:var(--c,var(--teal));
  clip-path:polygon(0 0,45% 0,100% 50%,45% 100%,0 100%,55% 50%)}

/* ---------- FAQ ---------- */
.faq-grille{display:grid;gap:clamp(1.6rem,3vw,2.4rem)}
/* Le titre et les questions se partagent la ligne. La colonne de titre etait si etroite
   (0,9fr contre 2,1fr) que le point teal debordait sur la premiere question. */
@media (min-width:64rem){
  .faq-grille{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);align-items:start;
    gap:clamp(2rem,4vw,4.5rem)}
  .faq-grille > .tete-section h2{font-size:clamp(1.9rem,1.1rem + 1.9vw,2.7rem);line-height:.9}
}
.faq{border-top:1px solid var(--filet-fort)}
.faq details{border-bottom:1px solid var(--filet)}
.faq summary{list-style:none;cursor:pointer;position:relative;padding:1.3rem 3rem 1.3rem 0;
  font-weight:800;font-size:clamp(1.0625rem,.98rem + .4vw,1.3rem);color:var(--craie);
  transition:color .25s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--teal-clair)}
.faq summary::after{content:'';position:absolute;right:.3rem;top:50%;width:14px;height:14px;
  transform:translateY(-50%);background:
    linear-gradient(var(--teal),var(--teal)) center/100% 2px no-repeat,
    linear-gradient(var(--teal),var(--teal)) center/2px 100% no-repeat;
  transition:transform .35s var(--sortie)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(135deg)}
.faq details[open] summary{color:var(--teal-clair)}
.faq .reponse{padding-bottom:1.4rem;color:var(--craie-2);max-width:70ch}
.faq .reponse > * + *{margin-top:var(--e4)}

/* ---------- Planning ---------- */
/* Une planche noire posee sur la page, pas une grille de tableur. Elle garde ses jetons
   sombres meme dans une section claire, et son angle coupe comme les cartes. */
.planning__enveloppe{overflow-x:auto;overscroll-behavior-x:contain;margin-top:clamp(1.4rem,3vw,2rem);
  background:var(--noir);padding:clamp(1rem,2vw,1.7rem);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}
.planning{width:100%;border-collapse:collapse;font-size:.96rem;
  --craie:#F2F3F4;--craie-2:#B9BFC6;--craie-3:#7C858F;--teal-clair:#3CC8E0;
  --filet:rgba(242,243,244,.12)}
.planning caption{text-align:left;color:var(--craie-3);padding-bottom:1.2rem;
  font-family:'Azeret Mono',monospace;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase}
/* Plus de grille : des filets horizontaux, et rien d'autre. */
.planning th,.planning td{padding:.7rem 1rem;text-align:left;border:0;
  border-bottom:1px solid var(--filet);white-space:nowrap;vertical-align:middle}
.planning tbody tr:last-child th,.planning tbody tr:last-child td{border-bottom:0}
.planning thead th{font-family:'Azeret Mono',monospace;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--craie-3);padding-bottom:1rem;
  border-bottom:1px solid rgba(242,243,244,.26)}
/* La colonne des heures reste en place quand la grille se fait glisser. */
.planning tbody th,.planning thead th:first-child{position:sticky;left:0;z-index:1;
  background:var(--noir);padding-left:0}
.planning tbody th{font-family:'Azeret Mono',monospace;font-weight:700;color:var(--craie);
  font-variant-numeric:tabular-nums;font-size:.88rem;letter-spacing:.06em}
.planning td{color:var(--craie-2)}
.planning tbody tr:hover td{background:rgba(242,243,244,.045)}

/* La pastille d'un cours : la couleur porte le sens, le texte reste lisible dessus. */
.cours{display:inline-flex;align-items:center;padding:.34rem .7rem;
  font-weight:800;font-variation-settings:'wdth' 84;font-size:.74rem;letter-spacing:.07em;
  text-transform:uppercase;white-space:nowrap;background:var(--t);color:var(--c);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.cours + .cours{margin-left:.4rem}
.cours--wod{--t:rgba(0,159,186,.2);--c:#3CC8E0}
.cours--halt{--t:rgba(248,109,12,.18);--c:#FF8A3D}
.cours--endu{--t:rgba(92,132,95,.26);--c:#7FB184}
.cours--free{--t:rgba(242,243,244,.08);--c:#B9BFC6}

/* Le jour d'aujourd'hui, pose par le script. Sans script, la grille se lit pareil. */
.planning td[data-aujourdhui],.planning thead th[data-aujourdhui]{background:rgba(0,159,186,.09)}
.planning thead th[data-aujourdhui]{color:var(--teal-clair)}

/* Hors de la planche noire, la pastille prend ses teintes sombres : sur le fond clair de
   la legende, le teal clair sur un voile teal ne fait que 1,9:1. */
.section.clair .legende .cours--wod{--t:rgba(0,159,186,.14);--c:#00647A}
.section.clair .legende .cours--halt{--t:rgba(248,109,12,.14);--c:#B0521A}
.section.clair .legende .cours--endu{--t:rgba(92,132,95,.18);--c:#3F6A45}
.section.clair .legende .cours--free{--t:rgba(11,14,18,.07);--c:#41484F}

/* La legende reprend les memes pastilles que la grille. */
.legende{margin:0;display:grid;gap:0}
.legende > div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.4rem 1rem;
  align-items:baseline;padding:.75rem 0;border-bottom:1px solid var(--filet)}
@media (max-width:36rem){.legende > div{grid-template-columns:minmax(0,1fr)}}
.legende dt{margin:0}
.legende dd{margin:0;color:var(--craie-2);font-size:.96rem}
/* La legende tient une colonne, la mise en garde l'autre : elles n'ont pas la meme densite. */
@media (min-width:64rem){.colonnes--legende{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.ouverture{display:grid;gap:0 clamp(1.2rem,3vw,2.5rem);margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:52rem){.ouverture{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ouverture div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1rem;
  align-items:baseline;padding:.85rem 0;border-bottom:1px solid var(--filet)}
.ouverture dt{font-weight:800;color:var(--craie)}
.ouverture dd{margin:0;font-family:'Azeret Mono',monospace;font-size:.76rem;color:var(--craie-2);
  white-space:nowrap}
@media (max-width:34rem){
  .planning,.planning caption,.planning thead,.planning tbody,.planning tr,
  .planning th,.planning td{display:block}
  /* Une carte de creneau n'affiche que les jours ou il y a cours : sinon le samedi 9h
     produit cinq tirets a la suite, un ecran pour rien. */
  .planning td.vide{display:none}
  .planning thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .planning tbody tr{border:1px solid var(--filet);margin-bottom:.8rem;padding:.2rem .9rem .5rem;
    background:var(--noir-2)}
  .planning tbody th{border:0;padding:.7rem 0 .5rem;border-bottom:1px solid var(--filet)}
  .planning tbody td{border:0;border-bottom:1px solid var(--filet);padding:.6rem 0;white-space:normal;
    display:flex;justify-content:space-between;gap:1rem}
  .planning tbody td::before{content:attr(data-jour);font-family:'Azeret Mono',monospace;font-size:.76rem;
    letter-spacing:.08em;text-transform:uppercase;color:var(--craie-3)}
  .planning__enveloppe{overflow:visible}
}

/* ---------- Page 404, avis d'attente, accès ---------- */
.liens-404{display:grid;gap:0;margin-top:clamp(1.6rem,3vw,2.2rem);max-width:34rem;
  border-top:1px solid var(--filet-fort)}
.liens-404 li{border-bottom:1px solid var(--filet)}
.liens-404 a{display:flex;align-items:center;min-height:56px;text-decoration:none;color:var(--craie);
  font-weight:800;font-variation-settings:'wdth' 82;text-transform:uppercase;letter-spacing:.06em;
  font-size:.88rem;transition:color .25s ease,transform .3s var(--sortie)}
.liens-404 a:hover{color:var(--teal-clair);transform:translateX(.5rem)}
.encart-avis{background:var(--noir-2);box-shadow:inset 0 0 0 1px var(--filet-fort);clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);padding:1.1rem 1.3rem;
  margin:0 0 clamp(1.4rem,3vw,2rem);color:var(--craie-2)}
.encart-avis strong{color:var(--craie)}
.acces{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--noir-2)}
@media (max-width:64rem){.acces{aspect-ratio:16/10}}
.acces picture{display:block;position:absolute;inset:0}
.acces img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.22) contrast(1.1) brightness(.92) saturate(1.04)}
.acces__cartouche{position:absolute;left:0;right:0;bottom:0;background:rgba(7,9,12,.9);padding:1rem 1.2rem}
.coachs{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 3rem;
  padding-top:clamp(1.4rem,3vw,2.2rem);margin-top:clamp(1.4rem,3vw,2.2rem);
  border-top:1px solid var(--filet-fort)}
.coachs__texte{flex:1 1 28rem;margin:0;color:var(--craie-2);max-width:62ch}
.plomb{color:var(--craie-2);font-size:1.0625rem;line-height:1.7}
.mesure{max-width:64ch}

/* Le teal plein sur le noir ne fait que 4,08:1 en petit texte : les sur-titres prennent la
   version claire, qui passe à 7,3:1. Les aplats et les boutons gardent le teal plein. */
.tete-section__mesure{color:var(--teal-clair)}
.section:nth-of-type(2) .tete-section__mesure{color:#FF8A3D}
.section:nth-of-type(3) .tete-section__mesure{color:#7FB184}
.section:nth-of-type(4) .tete-section__mesure{color:#F06A70}

/* Le tableau défile dans son cadre ; sans ce rognage, son débordement remonte au document. */
.section:has(.planning__enveloppe){overflow-x:clip}

/* Le titre du héros, comme en première version : moins condensé (largeur 100 au lieu de 70) et
   plafonné par la hauteur d'écran, pour qu'il occupe toute la largeur sans chasser le reste
   du premier écran. Trois lignes, à toutes les tailles. */
.hero h1{font-variation-settings:'wdth' 100;letter-spacing:-.03em;line-height:.84;
  font-size:min(clamp(2.6rem,.2rem + 10.6vw,11rem),17vh)}
@media (max-width:64rem){.hero h1{font-size:min(clamp(2.4rem,.2rem + 10.8vw,6rem),16vh)}}

/* Une section qui ne contient qu'une galerie n'a pas besoin de marges : l'image commence tout de
   suite, sans bande vide au-dessus. */
.section:has(> .page > .galerie),.section:has(> .large > .galerie),.section:has(> .galerie){
  padding-block:0;background:var(--noir)}
.section:has(> .large > .galerie) > .large{width:100%}


/* ============================================================================
   Le fil d'Ariane et le rythme des pages interieures (25/09/2026)
   ============================================================================ */

/* Le fil d'Ariane est une barre a part, sous l'en-tete fixe : il ne se colle plus au logo
   et ne passe plus par-dessus la photo. */
/* Pose dans l'en-tete de page, le fil d'Ariane n'a ni fond ni filet : il precede le titre.
   La barre a part, sous le menu fixe, ne sert plus qu'aux pages sans en-tete. */
.ariane{padding:0 0 clamp(1rem,2vw,1.6rem);margin:0}
.ariane--barre{background:var(--noir-2);border-bottom:1px solid var(--filet);padding-block:.7rem}
.ariane--barre{}
main > .ariane--barre:first-child{padding-top:calc(.7rem + 4.6rem)}
.tete{margin-top:0}
.tete--nue{padding-top:clamp(2.5rem,5vw,4rem)}
.tete__contenu{padding-top:clamp(2.5rem,5vw,4rem)}
main > .ariane--barre + .tete .tete__contenu{padding-top:clamp(3rem,6vw,5rem)}

/* Les sections claires des pages interieures : memes jetons inverses que l'accueil. */
/* Le dome retombe sur la couleur de base avant le bas de la section : deux sections
   claires qui se suivent ne montrent donc pas de raccord. */
.section.clair{background-color:#E7EAED;color:#0B0E12;
  background-image:
    radial-gradient(1700px 560px at 50% -50px, #FFFFFF 0%, rgba(255,255,255,0) 80%),
    radial-gradient(1200px 380px at 50% 10px, rgba(0,159,186,.12) 0%, rgba(0,159,186,0) 76%);
  --craie:#0B0E12;--craie-2:#41484F;--craie-3:#525A62;--teal-clair:#00758A;
  --filet:rgba(11,14,18,.16);--filet-fort:rgba(11,14,18,.3)}
.section.clair a{color:var(--teal-sombre)}
.section.clair .titre{color:#0B0E12}

/* Une section claire suivie d'une sombre se termine aussi en biais. */
.section.clair + .section:not(.clair){margin-top:0}

/* ============================================================================
   Les composants dans une section claire (25/09/2026)
   Ceux qui portent un fond sombre en dur devenaient illisibles quand la section passait au
   clair : texte encre sur fond noir. Ils prennent le blanc, et gardent leur filet de couleur.
   ============================================================================ */
.section.clair .avis__carte,.section.clair .levier,.section.clair .wod{background:#FFFFFF}
/* La carte de formule, elle, reste sombre sur le fond clair : c'est ce qui la detache et
   ramene du noir sur la page des tarifs. Elle reprend donc les jetons du noir, serie comprise. */
/* Seule la couleur de fond est reecrite : le raccourci « background » effacerait le
   degrade du halo, et la carte perdrait sa lumiere sur les sections claires. */
.section.clair .formule{background-color:var(--noir-2);color:#F2F3F4;
  --craie:#F2F3F4;--craie-2:#B9BFC6;--craie-3:#7C858F;--teal-clair:#3CC8E0;
  --filet:rgba(242,243,244,.14);--filet-fort:rgba(242,243,244,.3);
  --s1:#009FBA;--s2:#F86D0C;--s3:#5C845F;--s4:#D33339;--s5:#F9E3C8}
.section.clair .formule h2,.section.clair .formule h3{color:#C7CDD3}
.section.clair .encart-avis{background:#E8EAEC}
/* Le cartouche reste sombre sur une section claire : ses couleurs sont donc ecrites en
   clair. En reprenant --craie-2, il passait au gris fonce sur du noir, soit 2,15:1. */
.section.clair .acces__cartouche{background:rgba(7,9,12,.9)}
.section.clair .acces__cartouche,.section.clair .acces__cartouche *{color:#B9BFC6}
.section.clair .acces__cartouche .faible,.section.clair .acces__cartouche .mono{color:#9AA2AA}
.section.clair .tuile a,.section.clair .galerie figure{background:var(--noir-2)}
.section.clair .tuile a,.section.clair .tuile a *{color:var(--craie)}
.section.clair .tuile p{color:var(--craie-2)}

/* La série prend ses teintes sombres dès qu'elle passe sur le blanc : la pêche pleine
   ne fait que 1,14:1 sur #F3F4F5, le filet et la puce disparaissent purement et simplement. */
.section.clair{--s1:#00758A;--s2:#B0521A;--s3:#3F6A45;--s4:#A8262C;--s5:#8A6A3C}

/* Les sur-titres colorés ont deux jeux : les teintes claires sur le noir, les teintes sombres
   sur le blanc. Sans cette séparation, un orange clair sur blanc tombe à 2,2:1. */
.section.clair .tete-section__mesure{color:#00647A}
.section.clair:nth-of-type(2) .tete-section__mesure{color:#B0521A}
.section.clair:nth-of-type(3) .tete-section__mesure{color:#3F6A45}
.section.clair:nth-of-type(4) .tete-section__mesure{color:#A8262C}
.section.clair .chev{color:currentColor}

/* ============================================================================
   LE VOCABULAIRE HÉRITÉ (25/09/2026)
   Le contenu des pages intérieures est écrit avec les classes de l'ancien système :
   display, d1..d4, large, plomb, mono, faible, titre-section, lien, plaque, encart.
   Elles sont ici traduites dans le monde actuel, plutôt que réécrites une à une dans
   quinze pages de contenu. C'est ce qui manquait : sans elles, les titres tombaient en
   graisse normale et les largeurs de colonne disparaissaient.
   ============================================================================ */

/* Les titres héritent de la voix d'affiche. */
.display{font-weight:900;font-variation-settings:'wdth' 70;text-transform:uppercase;
  line-height:.88;letter-spacing:-.01em;text-wrap:balance;color:var(--craie)}
.d1{font-size:clamp(2.4rem,1.2rem + 4.6vw,5.5rem);line-height:.86}
.d2{font-size:clamp(1.9rem,1.2rem + 2.6vw,3.4rem)}
.d3{font-size:clamp(1.5rem,1.15rem + 1.5vw,2.3rem)}
.d4{font-size:clamp(1.25rem,1.05rem + .9vw,1.75rem);font-variation-settings:'wdth' 78}

/* Les conteneurs et les utilitaires de texte. */
.large{width:var(--page);margin-inline:auto;position:relative;z-index:1}
.plomb{color:var(--craie-2);font-size:1.0625rem;line-height:1.7}
.mono{font-family:'Azeret Mono',ui-monospace,monospace;font-size:.76rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--craie-3)}
.faible{color:var(--craie-3)}
.regle{border-top:1px solid var(--filet)}

/* Les titres de section hérités prennent la barre en biais du monde actuel. */
.titre-section{max-width:none;margin-bottom:clamp(1.6rem,3vw,2.6rem)}
.titre-section h2::after{content:'';display:block;width:2.8rem;height:4px;margin-top:1rem;
  background:var(--teal);transform:skewX(-20deg)}
.section.clair .titre-section h2::after{background:var(--teal-sombre)}
.titre-section p{color:var(--craie-2);margin-top:var(--e4);max-width:56ch}

/* Les liens et les plaques d'appel. */
.lien{color:var(--teal-clair);text-decoration:none;box-shadow:inset 0 -1px 0 currentColor}
.section.clair .lien{color:var(--teal-sombre)}
.plaque{display:inline-flex;align-items:center;gap:.7rem;min-height:56px;padding:0 1.6rem;
  font-weight:800;font-variation-settings:'wdth' 84;text-transform:uppercase;letter-spacing:.06em;
  font-size:.88rem;text-decoration:none;border:0;cursor:pointer;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  transition:background-color .3s ease,color .3s ease,transform .3s var(--sortie)}
.plaque svg{width:1.15em;height:1.15em;flex:none}
.plaque--tel{background:var(--teal);color:var(--encre)}
.plaque--tel:hover,.plaque--tel:focus-visible{background:var(--teal-clair);transform:translateY(-2px)}
.plaque--wa{background:transparent;color:var(--craie);box-shadow:inset 0 0 0 2px var(--filet-fort)}
.plaque--wa:hover,.plaque--wa:focus-visible{box-shadow:inset 0 0 0 2px var(--teal);color:var(--teal-clair)}
.section.clair .plaque--wa{color:#0B0E12}
.plaques{display:flex;flex-wrap:wrap;gap:.9rem}

/* L'adresse n'est pas une citation : pas d'italique. */
address{font-style:normal}

/* Les fiches de coordonnées héritées. */
.nap{margin:0}
.nap__ligne{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:1rem;padding:1rem 0;
  border-bottom:1px solid var(--filet)}
@media (max-width:34rem){.nap__ligne{grid-template-columns:minmax(0,1fr);gap:.2rem}}
.nap__cle{font-family:'Azeret Mono',monospace;font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--craie-3)}
.nap__val{color:var(--craie)}
.nap__val a{color:var(--teal-clair);text-decoration:none;box-shadow:inset 0 -1px 0 currentColor}
.section.clair .nap__val a{color:var(--teal-sombre)}
.zones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2rem;margin-top:1.4rem}
@media (max-width:34rem){.zones{grid-template-columns:minmax(0,1fr)}}
.zones div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.7rem 0;
  border-bottom:1px solid var(--filet)}
.zones dt{color:var(--craie);font-weight:700}
.zones dd{margin:0;font-family:'Azeret Mono',monospace;font-size:.76rem;color:var(--craie-3)}

/* L'encart d'appel hérité, rendu dans le monde actuel. */
.encart{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 2rem;
  background:var(--noir-2);padding:clamp(1.4rem,2.6vw,2.2rem);
  box-shadow:inset 0 0 0 1px var(--filet-fort);clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}
.section.clair .encart{background:#FFFFFF}
.encart h2,.encart h3{margin-bottom:.5rem}
.encart p{color:var(--craie-2);max-width:46ch}

/* Le biseau ne doit jamais trancher l'en-tête ni le fil d'Ariane : il ne remonte que sur une
   section, jamais sur la barre d'Ariane ou l'en-tête de page. */
.biais-haut{margin-top:0}
.section + .section.biais-haut,.bande + .section.biais-haut{margin-top:calc(var(--biais) * -1)}

/* ============================================================================
   Aucune image ne peut être étirée (25/09/2026)
   Les images portent des attributs width et height. Quand la largeur est contrainte par une
   grille et que la hauteur reste celle de l'attribut, l'image est déformée : c'est ce qui
   arrivait au portrait du coach sur La box, affiché en 493x1200 pour un rapport naturel de 3:4.
   La hauteur devient donc automatique par défaut, et seuls les cadres qui veulent la remplir
   la reprennent explicitement, avec un recadrage et jamais un étirement.
   ============================================================================ */
img{height:auto}
.tete__fond img,.tuile img,.galerie img,.final img,.acces img,.coach__photo img,
.coach__portrait img,.hero__video{height:100%;object-fit:cover}

/* Le portrait du coach, dans les pages intérieures : même cadre que sur l'accueil. */
.coach__portrait{margin:0;position:relative;overflow:hidden;aspect-ratio:3/4;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%)}
.coach__portrait picture{display:block;width:100%;height:100%}
.coach__portrait img{width:100%;object-position:50% 18%;filter:grayscale(1) contrast(1.08)}
@media (max-width:52rem){.coach__portrait{aspect-ratio:4/5}}

/* ============================================================================
   LES COMPOSANTS QUI N'AVAIENT AUCUNE RÈGLE (25/09/2026)
   Relevé automatiquement : quinze classes utilisées par les pages n'existaient pas dans le
   nouveau système. C'est ce qui donnait aux pages intérieures leur air inachevé.
   ============================================================================ */

/* Le point final des titres : le générateur produit « point », le monde connaissait « pt ». */
.point{color:var(--teal)}
.section.clair .point,.clair .point{color:var(--teal-sombre)}

/* La mosaïque de la galerie de La box : la grille régulière du monde actuel la remplace. */
.g-a,.g-b,.g-c,.g-d,.g-e{grid-column:auto;grid-row:auto}
@media (min-width:52rem){.galerie .g-a{grid-column:span 2;aspect-ratio:8/3}}

/* La fiche du coach sur les pages intérieures. */
.coach__tete h3{margin-bottom:.6rem}
.coach__role{color:var(--craie-2);margin:0 0 1.4rem;max-width:40ch}
.coach__corps > * + *{margin-top:var(--e5)}
.coach__corps p{color:var(--craie-2);max-width:62ch}
.coach__titres{display:grid;gap:0;margin:0}
.coach__titres li{display:flex;gap:.8rem;align-items:flex-start;padding:.85rem 0;
  border-bottom:1px solid var(--filet);color:var(--craie)}
.coach__titres li::before{content:'';flex:none;width:.7rem;height:.9rem;margin-top:.4em;
  background:var(--c,var(--teal));
  clip-path:polygon(0 0,45% 0,100% 50%,45% 100%,0 100%,55% 50%)}
.coach__titres li:nth-child(1){--c:var(--s1)}
.coach__titres li:nth-child(2){--c:var(--s2)}
.coach__titres li:nth-child(3){--c:var(--s3)}
.coach__titres li:nth-child(4){--c:var(--s4)}
.coach__gouts{display:grid;gap:0;margin:1.4rem 0 0}
.coach__gouts div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1rem;
  padding:.8rem 0;border-bottom:1px solid var(--filet)}
.coach__gouts dt{font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.76rem;
  color:var(--craie)}
.coach__gouts dd{margin:0;color:var(--craie-2)}
.coach__manque{margin-top:var(--e4)}

/* La frise de la séance, sur « Ta première séance » : même objet que sur l'accueil. */
.minuterie{display:grid;gap:clamp(1.4rem,2.6vw,2.2rem);margin:0}
@media (min-width:60rem){.minuterie{grid-template-columns:repeat(4,minmax(0,1fr))}}
.minuterie > li{position:relative;padding-top:2.2rem;border-top:2px solid var(--filet)}
.minuterie > li::before{content:'';position:absolute;top:-2px;left:0;width:var(--part,25%);height:2px;
  background:var(--c,var(--teal))}
.minuterie > li:nth-child(1){--c:var(--s1)}
.minuterie > li:nth-child(2){--c:var(--s2)}
.minuterie > li:nth-child(3){--c:var(--s3)}
.minuterie > li:nth-child(4){--c:var(--s4)}
.minuterie h3{margin:.9rem 0 .5rem}
.minuterie p{color:var(--craie-2);font-size:.96rem}
.chrono{display:block;font-family:'Azeret Mono',monospace;font-weight:700;
  font-variant-numeric:tabular-nums;font-size:clamp(1.5rem,1.15rem + 1.5vw,2.3rem);line-height:1;
  color:var(--craie)}

/* La formule mise en avant sur la page des tarifs. */
.formule-halo:has(> .formule--phare){--lueur:rgba(0,159,186,.5);--lueur-forte:rgba(0,159,186,.64)}
.formule--phare{box-shadow:inset 0 0 0 2px var(--teal)}
.formule--phare .formule__prix,.formule--phare .formule__prix--mot{color:var(--teal-clair)}
.section.clair .formule--phare .formule__prix,
.section.clair .formule--phare .formule__prix--mot{color:var(--teal-clair)}

/* Deux utilitaires du planning. */
.section--collee:not(.biais-haut){padding-top:0}
@media (min-width:64.0625rem){.seulement-tel{display:none}}

/* ============================================================================
   PASSE HARDEN (25/09/2026), sur le monde actuel
   ============================================================================ */

/* Mode contraste élevé de Windows : ce qui n'est porté que par une couleur de fond disparaît.
   On redonne un contour à ce qui portait l'information. */
@media (forced-colors: active){
  .hero h1 .collage{color:CanvasText!important;-webkit-text-fill-color:CanvasText;
    background-image:none!important;-webkit-text-stroke:0!important}
  .hero h1 .craie{color:CanvasText!important}
  .bouton,.plaque,.tuile a,.formule,.avis__carte,.wod,.levier,.encart,.nav__sous{
    border:1px solid CanvasText}
  .chev,.prose > ul li::before,.prose > .bloc > ul li::before,.coach__titres li::before,.formule li::before,
  .faq summary::after{background:CanvasText;forced-color-adjust:none}
  .bande,.avis__note{border-block:1px solid CanvasText}
}

/* Impression : le contenu, l'adresse et le numéro. Ni menu, ni vidéo, ni décor. */
@media print{
  .entete,.barre,.hero__video,.galerie,.tete__fond,.final img,.bande-photos,.ariane{display:none!important}
  *,*::before,*::after{color:#111!important;background:#fff!important;box-shadow:none!important;
    clip-path:none!important;text-shadow:none!important}
  a{color:#000!important;text-decoration:underline}
  .hero,.tete{min-height:0!important;padding-block:1rem!important}
  .hero h1 .collage{color:#111!important;-webkit-text-fill-color:#111;background-image:none!important;
    -webkit-text-stroke:0!important}
  .section,.bande,.final{padding-block:1.2rem!important}
  .section,.tuile,.formule,.coach,.avis__carte,details{break-inside:avoid}
  .formule-halo::after{display:none!important}
  .formule{background:#fff!important}
  .afournir{outline:1px dashed #999}
}

/* ============================================================================
   PASSE ADAPT (25/09/2026), sur le monde actuel
   ============================================================================ */

/* Téléphone en paysage : l'écran fait moins de 550 px de haut. Le héros se resserre pour que
   les boutons et le bandeau de faits restent atteignables. */
@media (orientation:landscape) and (max-height:34rem){
  .hero{min-height:calc(100svh - 58px);padding-top:5.5rem}
  .hero h1{font-size:min(clamp(1.9rem,.2rem + 5.4vw,3.2rem),22vh)}
  .hero__chapo{display:none}
  .hero__corps{padding-bottom:1rem}
  .tete{min-height:auto}
  .tete__contenu{padding-top:5rem;padding-bottom:1.5rem}
}

/* Sur un écran tactile, le survol n'existe pas : c'est l'appui qui répond. */
@media (hover:none){
  .tuile a:active img{transform:scale(1.03);filter:grayscale(0) brightness(.85)}
  .galerie figure:active img{filter:saturate(1.08) brightness(1)}
  .bouton:active,.plaque:active{transform:translateY(1px)}
  .liens-404 a:active{color:var(--teal-clair)}
}

/* Au doigt, tout ce qui se touche atteint 44 px, sur toutes les pages. */
@media (pointer:coarse),(max-width:64rem){
  .entete__logo,.pied nav a,.pied__bas a,.nap a,.nap__val a,.pied address a,.pied__num,
  .ariane a,.liens-404 a,.prose a{display:inline-flex;align-items:center;min-height:44px}
  .pied__bas a,.ariane a{padding-inline:.15rem}
  .prose a{min-height:0}
}


/* ============================================================================
   Deux colonnes de lecture (25/09/2026)
   Un paragraphe seul, cale a gauche sur soixante-quatre caracteres, laisse les deux tiers
   droits de l'ecran vides. Cote a cote, deux paragraphes occupent la largeur sans allonger
   la ligne de lecture.
   ============================================================================ */
.colonnes{display:grid;gap:clamp(1.4rem,3vw,3rem)}
@media (min-width:64rem){.colonnes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.colonnes > *{max-width:none;margin-top:0}

/* La tuile qui mene a la box n'est pas un cours : elle porte un libelle, pas un numero. */
.tuile__etiq{font-family:'Azeret Mono',monospace;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c,var(--teal-clair))}

/* La regle de hauteur du portrait doit passer apres la definition du cadre 3/4, plus bas
   dans la feuille : sinon le rapport d'image l'emporte et la photo, etiree sur deux
   rangees, deborde de sa colonne et recouvre le debut du texte. */
@media (min-width:64rem){
  .coach__photo,.coach__portrait{aspect-ratio:auto;grid-row:1 / span 2;min-height:26rem}
}


/* ============================================================================
   BANDEAU DE RECETTE - TEMPORAIRE (26/09/2026)
   A retirer avant la mise en ligne publique : ce bloc, la ligne dans index.html et le
   bloc BANDEAU dans _tools/build.py.
   ============================================================================ */
:root{--bandeau:34px}
.bandeau-test{position:fixed;top:0;left:0;right:0;z-index:95;height:var(--bandeau);
  display:flex;align-items:center;justify-content:center;
  background:var(--teal);color:var(--encre);
  font-family:'Azeret Mono',ui-monospace,monospace;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700}
.entete{top:var(--bandeau)}
@media (max-width:64rem){.nav{top:var(--bandeau)}}
@media print{.bandeau-test{display:none!important}.entete{top:0}}

/* La ligne d'introduction du planning porte son bouton de reservation. */
.planning__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem 2rem;margin-bottom:clamp(1.4rem,3vw,2rem)}
@media (max-width:40rem){.planning__actions .bouton{width:100%;justify-content:center}}