/* =====================================================================
   MINIMES · home.css (v3) — raw, loud, kinetic. Bleu profond + navy.
   ⚠ `.media` (fond, bordure, ::before/::after, grade N&B) vit dans base.css
   — UNE définition pour les 8 pages. Ici on n'override QUE le filtre par
   contexte. Avant, home.css et club.css se contredisaient et le site
   ressemblait à deux sites.
   ===================================================================== */

/* filtres photo par contexte (le grade de base est dans base.css) */
.palmares__bg .media img { filter: grayscale(1) contrast(1.3) brightness(.3); }
.gong__bg .media img { filter: grayscale(1) contrast(1.3) brightness(.28); }

/* ============================ HERO — A/B ========================= */
/* 226 px de vide au-dessus du lettrage et 158 sous la copie : 41 % du hero
   ne portait rien, et le bloc flottait. On resserre des deux cotes. */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(4.5rem,9.5vh,7rem); overflow: hidden; background: var(--black); }
.hero__stage { position: absolute; inset: 0; z-index: 0; isolation: isolate; }
.hero__src { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.15) contrast(1.08) brightness(1.12); }
/* stacked wordmark — BOXING CENTER / MINIMES (Portet-spirit, footage knockout) */
/* Le lettrage etait centre pendant que TOUTE la copie est calee a gauche :
   deux axes verticaux dans le meme ecran, a 76 px l un de l autre. Il prend
   la largeur du wrap et cale ses lignes a gauche — un seul axe pour tout. */
.hero__word { display: flex; flex-direction: column; align-items: flex-start; width: var(--wrap); margin-inline: auto; font-family: var(--f-display); text-transform: uppercase; color: #fff; line-height: .8; letter-spacing: -.02em; position: relative; z-index: 8; }
.hero__word-top { font-size: clamp(1.05rem, 4.3vw, 3rem); letter-spacing: .16em; margin-bottom: .06em; }
.hero__word-main { font-size: clamp(3.8rem, 19vw, 15rem); line-height: .76; letter-spacing: -.03em; }
/* prior 'knock' overlay disabled: remove tint/band that split the image */
/* Ce bloc porte le lettrage du mode « pochoir », celui par defaut. Il avait
   ete fige a opacity:0, ce qui le supprimait — et l opacite forcee du bloc
   !important ressuscitait alors celui du mode B par-dessus : deux lettrages
   a l ecran, puis zero une fois l !important retire. Il reprend son opacite,
   les regles de mode font le reste : un seul lettrage, celui du mode actif. */
.hero-a__knock { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: clamp(9rem,30vh,18rem); background: none; mix-blend-mode: normal; pointer-events: none; }
.hero-b__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__word--solid { position: absolute; inset: 0; justify-content: center; padding-bottom: clamp(9rem,30vh,18rem); color: var(--bone); }
.hero-b__canvas, .hero-a__knock, .hero__word--solid { transition: opacity .5s var(--ease); }
.hero[data-hero="a"] .hero-b__canvas, .hero[data-hero="a"] .hero__word--solid { opacity: 0; pointer-events: none; }
.hero[data-hero="b"] .hero-a__knock { opacity: 0; }
.hero[data-hero="b"].is-webgl .hero__src { opacity: 0; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: none; }

/* Prominent transparent wordmark: slight fill + thick stroke + deep shadow */
.hero__word-top, .hero__word-main {
   color: rgba(255,255,255,0.06);
   -webkit-text-stroke: 2.6px rgba(255,255,255,.98);
   text-shadow: 0 12px 32px rgba(0,0,0,.65);
   -moz-text-fill-color: rgba(255,255,255,0.06);
}
@media (min-width: 1024px){
   .hero__word-main { -webkit-text-stroke: 4px rgba(255,255,255,.98); }
   .hero__word-top { -webkit-text-stroke: 2px rgba(255,255,255,.98); }
}
/* ensure stacked word sits above other layers */
.hero__word, .hero__word * { z-index: 9; }

/* ------------------ Conservative layout adjustments ------------------ */
/* Move the small wordmark up to ensure no content overlaps it */
.hero__word { transform: translateY(-18%); }

/* Reduce dominance of the giant wordmark so it stays decorative */
.hero__word-main {
   /* Le minimum etait a 7rem = 112 px : sur 375 px de large, « MINIMES »
      reclame 530 px pour 345 disponibles — le mot se coupait en MINIM/ES.
      A 18vw il demande 319 px et tient sur une ligne, du petit telephone
      au grand ecran. nowrap garantit qu il ne se coupera plus jamais. */
   font-size: clamp(3.6rem, 18vw, 12rem);
   white-space: nowrap;
   -webkit-text-stroke: 2px rgba(255,255,255,.96);
   color: rgba(255,255,255,0.06);
}
.hero__word-top {
   -webkit-text-stroke: 1.6px rgba(255,255,255,.96);
   color: rgba(255,255,255,0.08);
}

/* Local subtle panel behind the copy to improve contrast without a global veil */
@media (min-width: 821px) {
   /* Le fond etait pose sur .hero__inner, c est-a-dire sur le wrap : il
      dessinait un carton gris de 1320 px, a bord franc et a ombre portee,
      flottant sur la video — et le lettrage geant lui rentrait dedans de
      49 px. Le voile passe sur un pseudo-element qui saigne jusqu aux
      bords et s eteint avant le milieu : plus aucune arete. */
   .hero__inner { padding: clamp(2rem,5vh,3rem) 0; }
   /* ensure giant word stays behind the inner content */
   .hero__word--solid { z-index: 4; }
   .hero__inner { z-index: 12; }
   /* increase top padding so the inner copy clears the decorative wordmark */
   .hero__inner { padding-top: clamp(6rem,12vh,9rem); }
   /* desktop-only: push the small stacked word further up to avoid overlap */
   /* Ce decalage vers le haut avait ete pose pour un lettrage a DEUX
      lignes. A trois, il fait passer « BOXING » sous la barre de
      navigation (haut du lettrage a 75 px pour une barre qui descend a 93).
      Reduit a -8 %, le verrouillage repasse sous la barre. */
   .hero__word { transform: translateY(-8%); }
}

/* Les trois vides du hero mobile mesuraient 239 / 166 / 77 px : 482 px
   d’air, mais tasses en bas. Ils sont ramenes a ~160 px chacun. Le
   lettrage remonte (padding-bottom qui le pousse vers le haut) et la copie
   remonte aussi (padding-bottom du hero, qui la decolle du bas). */
@media (max-width: 820px) {
   /* Le vide total vaut (hauteur - lettrage - copie), soit environ
      100svh - 330px. Divise en trois, chaque vide fait 33.33svh - 110px —
      une formule, pas une valeur : elle suit la hauteur de l ecran au lieu
      de deriver. Le lettrage est cale en HAUT et non centre, sinon sa
      position depend de la hauteur et le vide du milieu absorbe tout. */
   /* Sur telephone le lettrage est CENTRE, pas cale a gauche : « MINIMES »
      remplit presque toute la largeur, et « BOXING CENTER », plus court, se
      pose alors bien au milieu au-dessus de lui. L axe unique reste la loi
      du desktop, ou la copie et le lettrage se lisent cote a cote. */
   .hero__word { align-items: center; }
   /* le chapo se centre lui aussi, sous le lettrage — la copie qui suit
      (sous-titre, bouton, preuve) reste calee a gauche, comme le modele. */
   .hero__kicker { display: block; text-align: center; }
   /* Le bouton fait toute la largeur mais gardait 40 px de marge interieure
      de chaque cote : il restait 265 px pour un libelle qui en reclame 275,
      et « JE PROFITE DE / L OFFRE A 29€ » cassait en deux. */
   .hero__cta .btn { padding-inline: 1.4rem; }
   .hero { padding-bottom: calc(33.33svh - 105px); }
   /* Le bloc descend de 46 px pour occuper le centre de l ecran, et le vide
      qui le separait du chapo tombe de 133 a ~87 px. L espace INTERNE, lui,
      etait deja au minimum : 2 px entre BOXING et CENTER, 1 px entre CENTER
      et MINIMES — on le grignote encore via l interlignage. */
   .hero-a__knock { place-items: start center; padding-top: calc(33.33svh - 34px); padding-bottom: 0; }
}

/* ---------------- LE VERROUILLAGE DU LOGO ------------------------------
   Le hero portait « BOXING CENTER » sur une ligne, en contour ajoure. Il
   reprend le verrouillage de la marque : BOXING / —CENTER— / MINIMES, en
   blanc plein. Le contour fin se battait avec une video de corps en
   mouvement — deux graphismes fins qui s annulent ; un aplat tient. */
.hero__word-top, .hero__word-main {
   font-size: clamp(3.4rem, 17vw, 11rem);
   line-height: .84;
   letter-spacing: -.02em;
   color: #fff;
   -webkit-text-stroke: 0;
   text-shadow: 0 10px 30px rgba(0,0,0,.55);
   white-space: nowrap;
   margin-bottom: 0;
}
/* la ligne du milieu porte les deux filets du logo */
.hero__word-mid {
   display: flex; align-items: center; gap: .8ch;
   font-size: clamp(.72rem, 3.2vw, 1.5rem);
   letter-spacing: .34em; text-indent: .34em;
   line-height: 1; color: #fff; -webkit-text-stroke: 0;
   margin: .16em 0 .1em;
   text-shadow: 0 8px 24px rgba(0,0,0,.5);
   white-space: nowrap;
}
.hero__word-mid::before, .hero__word-mid::after {
   content: ""; flex: none; height: 2px;
   width: clamp(1.4rem, 6vw, 3.4rem);
   background: currentColor;
}

/* Sur telephone le bloc doit etre le plus compact possible : l interlignage
   des deux grandes lignes descend a .74 et CENTER colle a ses voisines. Ces
   regles viennent APRES le verrouillage, sinon elles sont ecrasees — une
   media query n ajoute pas de specificite, c est l ordre qui tranche. */
@media (max-width: 820px) {
   .hero__word-top, .hero__word-main { line-height: .74; }
   .hero__word-mid { margin: .02em 0; }
}

/* Mobile: hide the huge decorative word to avoid crowding */
@media (max-width: 820px) {
   .hero__word--solid { display: none; }
   .hero__inner { padding-top: clamp(1.2rem,4vh,2.2rem); }
}

/* Slightly reduce CTA minimum width to fit better beside the copy */
@media (min-width: 821px) {
   .hero__cta .btn { min-width: 240px; }
}

/* --------------------------------------------------------------------- */

/* Force-remove any residual navy/blue plating around hero text */
.hero .vignette-local,
.hero .hero-a__knock,
.hero .hero__word--solid,
.hero .band,
.hero [class*="navy"],
.hero [class*="mark"] {
   background: none !important;
   background-image: none !important;
   box-shadow: none !important;
   border-color: transparent !important;
   /* PAS d opacite ici : ce bloc sert a retirer des fonds, pas a forcer
      la visibilite. En la forçant, il annulait
      .hero[data-hero="a"] .hero__word--solid { opacity: 0 } — les DEUX
      lettrages s affichaient l un sur l autre, et le bouton « vue » ne
      basculait plus rien. */
   pointer-events: none !important;
}

/* Keep primary CTA visible but remove navy outlines around wrapper */
.hero .btn--primary { pointer-events: auto; }

/* La video devenue visible, le texte blanc perdait son fond. Ce degrade
   n assombrit que la colonne de gauche et s efface avant le milieu : la
   copie garde son contraste, l image reste nette la ou il n y a rien a lire. */
.hero__inner { position: relative; z-index: 12; width: var(--wrap); margin-inline: auto; padding-top: clamp(1.4rem,6vh,3.2rem); }
.hero__inner::before { content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -100vh; bottom: -100vh; left: -50vw; right: 8%;
  background: linear-gradient(90deg, rgba(6,8,20,.80) 0%, rgba(6,8,20,.74) 42%, rgba(6,8,20,.40) 72%, rgba(6,8,20,0) 100%); }

@media (min-width: 821px) {
   /* keep larger top padding so inner copy clears the decorative wordmark */
   .hero__inner { padding-top: clamp(6rem,12vh,9rem); }
   /* ensure inner copy sits above the decorative wordmark */
   .hero__inner { z-index: 12; }
   .hero__word--solid { z-index: 4; }
}

/* subtle dark mask directly behind the large wordmark to make it pop */
.hero__word--solid { position: absolute; inset: 0; justify-content: center; padding-bottom: clamp(9rem,30vh,18rem); color: var(--bone); }
.hero__word--solid::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
   background: radial-gradient(ellipse at center, rgba(0,0,0,.6) 0%, rgba(0,0,0,.5) 18%, rgba(0,0,0,0) 45%);
   transform: translateY(6%);
}
/* carries real info (location + founding year) → legible bone, not 4:1 red */
.hero__kicker { font: 700 var(--step--1)/1 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--bone); margin-bottom: clamp(1rem,2.2vw,1.5rem); }
.hero__kicker::before { content: ""; display: inline-block; width: 26px; height: 2px; background: var(--mark); vertical-align: middle; margin-right: .8ch; }
.hero__sub { max-width: 40ch; font-size: clamp(1.4rem,1.1rem+1.4vw,2.2rem); line-height: 1.15; color: var(--bone); font-weight: 600; }
.hero__sub b { color: var(--white); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(1.6rem,4vw,2.2rem); }
/* min-height 44px — c'est un bouton, pas une étiquette (QA) */
.hero-toggle { position: absolute; right: var(--gut); bottom: clamp(4.5rem,11vh,7rem); z-index: 6; display: inline-flex; align-items: center; gap: .6ch; min-height: 44px; padding: .6em 1em; border: 1px solid var(--line); border-radius: 100px; font: 700 var(--step--1)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); background: rgba(0,0,0,.4); backdrop-filter: blur(6px); transition: border-color .3s, color .3s; }
.hero-toggle span { color: var(--bone); }
.hero-toggle i { color: var(--mark); font-style: normal; }
.hero-toggle:hover, .hero-toggle:active { border-color: var(--mark); color: var(--bone); }
.hero-toggle[aria-pressed="true"] { border-color: var(--mark); }
.hero__foot { position: absolute; left: 0; right: 0; bottom: clamp(1rem,3vh,1.6rem); z-index: 5; width: var(--wrap); margin-inline: auto; display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid var(--line); padding-top: clamp(.9rem,2vw,1.2rem); }
.hero__round { font-family: var(--f-display); font-size: clamp(1.8rem,4vw,2.8rem); color: var(--bone); line-height: 1; letter-spacing: .02em; }
.hero__round i { font-style: normal; color: var(--bone-dim); font-size: .62em; margin-left: .08em; }
/* Le libellé « Round » : sans lui, « 01/07 » se lisait comme une DATE
   (1er juillet) — ambigu ET faux, puisque le compteur est un round de combat.
   Petites capitales mono, discrètes, dans la charte. */
.hero__round-k { font-family: var(--f-mono); font-size: .34em; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--bone-dim); vertical-align: .42em; margin-right: .35em; }

/* ====================== STATS / LE PALMARÈS ====================== */
.palmares { background: var(--bg); border-block: 2px solid var(--mark); position: relative; overflow: hidden; }
.palmares__bg { position: absolute; inset: 0; z-index: 0; opacity: .3; }
.palmares__bg .media { position: absolute; inset: 0; }
.palmares .wrap { position: relative; z-index: 1; }
.palmares__eyebrow { padding-top: 1.4rem; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem,4vw,3rem); padding-block: clamp(2.4rem,6vw,4rem); }
@media (min-width: 820px){ .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { border-left: 2px solid var(--mark); padding-left: clamp(1rem,2vw,1.6rem); }
.stat__v { font-family: var(--f-display); font-size: clamp(3rem,8vw,6rem); line-height: .85; color: var(--bone); }
.stat__v sup { font-size: .38em; color: var(--bone); vertical-align: super; }
.stat__l { margin-top: .6rem; font: 700 var(--step--1)/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Une tuile dont la valeur est un MOT et non un nombre. « 3 » tient a
   6 rem dans une colonne du bandeau ; « Plusieurs » deborde et pousse la
   grille. Le corps descend, et le mot cesse d'etre coupe n'importe ou.
   La classe est posee par home.js quand la valeur n'est pas numerique —
   pas de liste a maintenir a la main. */
.stat--mot .stat__v { font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1; hyphens: none; overflow-wrap: normal; }

/* ============================ STORY ============================== */
.story__quote { font-family: var(--f-display); text-transform: uppercase; font-size: var(--step-2); line-height: .98; max-width: 14ch; color: var(--bone); }
.story__quote .tint { color: var(--mark); }
.story__body p + p { margin-top: 1.2rem; }
.feature { display: grid; gap: clamp(2rem,5vw,4rem); }
@media (min-width: 900px){ .feature { grid-template-columns: 1fr 1fr; align-items: center; } }
.feature__media { aspect-ratio: 5/6; }

/* ============= MUR DES CHAMPIONS (silhouette reveal) =============
   Real boxer cut-outs rise in one at a time as you scroll the pin —
   one enters as the previous exits. Distinct from "Pour qui". */
.berceau { position: relative; background: var(--bg); }
.berceau__title { margin: 1rem 0 1.2rem; max-width: 13ch; }
.berceau__intro { max-width: 40ch; }
.berceau__rail { margin-top: clamp(1.6rem,4vw,2.4rem); display: flex; gap: 5px; }
.berceau__tick { flex: 1; height: 3px; background: var(--line); position: relative; overflow: hidden; }
.berceau__tick::after { content: ""; position: absolute; inset: 0; background: var(--mark); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); }
.berceau__tick.is-active::after { transform: scaleX(1); }
.berceau__stage { position: relative; }
.berceau__fig { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .55s var(--ease); }
.berceau__fig.is-active { opacity: 1; visibility: visible; }
.berceau__bigname { position: absolute; inset: 0; display: grid; place-items: center; z-index: 0; font-family: var(--f-display); text-transform: uppercase; font-size: clamp(4rem,14vw,12rem); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--line); letter-spacing: -.02em; white-space: nowrap; transform: translateY(24px); transition: transform 1.1s var(--ease-out); }
.berceau__fig.is-active .berceau__bigname { transform: translateY(0); }
.berceau__cut { position: absolute; left: 50%; bottom: 0; z-index: 1; height: 100%; width: auto; transform: translate(-50%, 60px) scale(1.02); object-fit: contain; object-position: bottom center; filter: grayscale(1) contrast(1.08) brightness(.98) drop-shadow(0 24px 34px rgba(0,0,0,.55)); transition: transform 1.1s var(--ease-out); }
.berceau__fig.is-active .berceau__cut { transform: translate(-50%, 0) scale(1); }
.berceau__card { position: absolute; left: 0; bottom: 0; z-index: 2; max-width: 26ch; }
/* index : os + filet argent (loi du navy) */
.berceau__idx { display: inline-flex; align-items: center; gap: .7ch; font: 700 var(--step--1)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone); }
.berceau__idx::before { content: ""; width: 18px; height: 2px; background: var(--mark); flex: 0 0 18px; }
.berceau__idx i { color: var(--bone-dim); font-style: normal; }
.berceau__name { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(2rem,3.6vw,3.2rem); line-height: .95; margin: .55rem 0 .6rem; color: var(--white); }
.berceau__note { color: var(--muted); font-size: var(--step--1); }
@media (min-width: 821px){
  .berceau { height: 340vh; }
  .berceau__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
  .berceau__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
  .berceau__stage { height: 82vh; }
}
/* mobile (≤820px) : LE MÊME scroll-jack que le desktop — l'effet fait partie
   de l'identité de la page, il RESTE. Le chevauchement d'origine (capture
   client) venait d'un piège de grille : `align-items: start` + enfants tous
   absolus → la scène s'effondrait à 0 px de haut, et la carte ancrée en bas
   remontait sur le titre. Blindage en trois verrous :
   1. rangée `minmax(0,1fr)` ÉTIRÉE (stretch) → la scène a toujours sa hauteur ;
   2. `overflow: hidden` sur la scène → rien ne peut en sortir ;
   3. la carte repasse DANS LE FLUX (flex align-end) → physiquement incapable
      de chevaucher le rail, même dans un navigateur in-app très court. */
@media (max-width: 820px){
  .berceau { height: 300vh; }
  .berceau__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; }
  .berceau__grid { display: grid; grid-template-rows: auto minmax(0,1fr); gap: .6rem; width: var(--wrap); margin-inline: auto; padding-block: clamp(3.2rem,7svh,5rem) max(3.6rem, calc(1.2rem + env(safe-area-inset-bottom))); height: 100%; align-items: stretch; }
  .berceau__title { font-size: clamp(1.7rem,7.5vw,2.4rem); margin: .6rem 0 0; }
  .berceau__intro { display: none; }
  .berceau__rail { margin-top: .8rem; }
  .berceau__stage { min-height: 0; overflow: hidden; }
  .berceau__fig { display: flex; align-items: flex-end; }
  .berceau__bigname { font-size: clamp(2.6rem,15vw,5rem); }
  .berceau__cut { height: 92%; }
  .berceau__card { position: relative; inset: auto; width: 100%; max-width: none; padding: 2.4rem 0 .2rem; background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 0%, transparent), color-mix(in srgb, var(--ink) 82%, transparent) 45%); }
  .berceau__name { font-size: clamp(1.5rem,6.5vw,2.2rem); }
  .berceau__note { font-size: .82rem; }
}
/* navigateur in-app / écran très court : tout se resserre, rien ne déborde */
@media (max-width: 820px) and (max-height: 660px){
  .berceau__grid { padding-block: 2.9rem 3.2rem; gap: .4rem; }
  .berceau__title { font-size: clamp(1.35rem,6vw,1.8rem); }
  .berceau__bigname { font-size: clamp(2rem,12vw,3.4rem); }
  .berceau__note { display: none; }
}

/* ====================== DISCIPLINES REEL =========================
   Photo FILLS THE ROW behind the text on hover (rumble/EBF pattern).
   Text always sits on top — the image reveals, never covers. */
.reel__head { width: var(--wrap); margin-inline: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: clamp(2rem,5vw,3rem); }
.disc-list { border-top: 2px solid var(--mark); }
.disc { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line); }
.disc__bg { position: absolute; inset: 0; z-index: 0; opacity: 0; transform: scale(1.12); transition: opacity .55s var(--ease), transform .9s var(--ease-out); }
/* 28 % convient aux photos larges du pool. Une prise serrée (un buste qui
   remplit le cadre) n’y survit pas : dans une bande de 4,7:1 on ne voit plus
   qu’un menton coupé. `--disc-focus` laisse la donnée corriger au cas par cas. */
.disc__bg img { filter: saturate(1.02) contrast(1.04) brightness(.72); object-position: center var(--disc-focus, 28%); }
.disc__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82) 20%, rgba(0,0,0,.25) 100%); }
.disc:hover .disc__bg, .disc:focus-within .disc__bg { opacity: 1; transform: scale(1); }
/* discipline sans photo (aucune image du pool ne montre ce geste) : le
   survol doit quand même RÉPONDRE, sinon la ligne a l'air morte. Le
   hachuré du système remplace la photo — même langage que les tuiles
   coach sans portrait, jamais une image empruntée. */
.disc--nobg::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; background: repeating-linear-gradient(120deg, #101830 0 9px, #17223c 9px 10px); transition: opacity .55s var(--ease); }
.disc--nobg:hover::before, .disc--nobg:focus-within::before { opacity: 1; }
.disc__row { position: relative; z-index: 1; width: var(--wrap); margin-inline: auto; display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center; padding-block: clamp(1.2rem,3vw,2.3rem); transition: padding .5s var(--ease); }
.disc:hover .disc__row, .disc:focus-within .disc__row { padding-left: clamp(1rem,3vw,2.5rem); padding-block: clamp(2.4rem,6vw,4.4rem); }
.disc__idx { font: 700 var(--step--1)/1 var(--f-mono); color: var(--bone-dim); }
.disc__name { font-family: var(--f-display); font-size: clamp(1.8rem,5.5vw,4.2rem); text-transform: uppercase; line-height: 1; color: var(--bone-dim); transition: color .4s var(--ease), transform .5s var(--ease-out); transform-origin: left; }
.disc:hover .disc__name, .disc:focus-within .disc__name { color: var(--white); transform: scale(1.04); }
/* La photo qui s’allume est sombre : elle passe sous l’index, le tag ET le
   teaser, pas seulement sous le titre. Sur data-surface="paper" ces trois-là
   restaient navy (#474D6D / #14162F) sur une photo noircie à 82 % : illisibles.
   On repointe les jetons de la ligne au lieu de repeindre chaque élément —
   même loi que .who et .tarif--hot plus bas. */
.disc:hover, .disc:focus-within { --bone: #fff; --read: #DCDDEE; --bone-dim: var(--navy-200); }
.disc__idx, .disc__tag { transition: color .4s var(--ease); }
.disc__tag { font: 700 var(--step--1)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bone); text-align: right; }
.disc__desc { position: relative; z-index: 1; width: var(--wrap); margin-inline: auto; max-width: 60ch; color: var(--read); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease), opacity .4s, padding .5s, color .4s; }
.disc:hover .disc__desc, .disc:focus-within .disc__desc { max-height: 8rem; opacity: 1; padding-bottom: clamp(1.2rem,3vw,2rem); padding-left: clamp(1rem,3vw,2.5rem); }

/* touch: no hover to reveal, so every discipline shows its photo + copy by
   default (mirrors the mobile treatment given to .berceau / .whofor) */
@media (hover: none), (max-width: 820px){
  .disc__bg { opacity: .32; transform: none; }
  /* PAS de titre blanc ici : sans survol la photo ne monte qu’à .32, donc sur
     fond clair la ligne reste un lavis pâle — du blanc dessus disparaît. Les
     jetons de la surface (navy sur paper, os sur fond sombre) sont déjà bons. */
  .disc__row { padding-block: clamp(1.6rem,5vw,2.4rem); }
  .disc__desc { max-height: none; opacity: 1; padding-bottom: clamp(1.2rem,3vw,1.8rem); padding-left: clamp(1rem,4vw,1.6rem); }
}

/* ========================== VALUES =============================== */
.values { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: 1fr; }
@media (min-width: 720px){ .values { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1040px){ .values { grid-template-columns: repeat(4,1fr); } }
.value { background: var(--char); padding: clamp(1.6rem,3vw,2.4rem); min-height: 17rem; display: flex; flex-direction: column; justify-content: space-between; border-top: 2px solid transparent; transition: background .35s, border-color .35s; }
.value:hover, .value:active { background: var(--line-soft); border-top-color: var(--mark); }
/* numéro : os + filet argent (loi du navy) */
.value__n { display: inline-flex; align-items: center; gap: .7ch; font-family: var(--f-mono); font-weight: 700; color: var(--bone); letter-spacing: .1em; }
.value__n::before { content: ""; width: 18px; height: 2px; background: var(--mark); flex: 0 0 18px; }
.value__t { font-family: var(--f-display); text-transform: uppercase; font-size: var(--step-1); line-height: .95; margin-bottom: .6rem; color: var(--bone-dim); transition: color .35s; }
.value:hover .value__t, .value:active .value__t { color: var(--white); }
.value__d { color: var(--muted); font-size: var(--step--1); line-height: 1.5; }
/* touch : pas de hover → le titre ne doit pas rester dim à vie
   (même traitement que .disc__name ci-dessus) */
@media (hover: none), (max-width: 820px){ .value__t { color: var(--white); } }

/* ==================== POUR QUI (scroll-jacked) =================== */
/* v3 peignait cette section en noir en dur. Elle porte maintenant un
   data-surface et suit son terrain : le meme composant sert sur fond
   clair (accueil) comme sur fond profond, sans double declaration. */
.whofor { position: relative; background: var(--bg); }
.whofor__title { margin: 1rem 0 1.2rem; }
.whofor__intro { max-width: 38ch; }
.whofor__rail { margin-top: clamp(1.6rem,4vw,2.6rem); border-bottom: 1px solid var(--line); }
.who__tick { display: flex; align-items: baseline; gap: 1ch; font: 700 var(--step--1)/1.5 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); padding: .7rem 0; border-top: 1px solid var(--line); transition: color .4s var(--ease), padding-left .4s var(--ease); }
/* 1.69:1 → ~3.5:1 : « pas encore visité » doit rester LISIBLE, pas
   disparaître — sinon le rail ne dit plus qu'il reste des rounds */
/* couleur v3 ecrite en dur (os clair) : elle disparaissait sur le fond
   blanc de la refonte. Elle passe par le token du terrain. */
.who__tick span { color: var(--steel); transition: color .4s; }
.who__tick.is-active { color: var(--bone); padding-left: .7rem; }
.who__tick.is-active span { color: var(--bone); }
/* la marque de l'actif : un filet argent, pas du texte navy à 1.3:1 */
.who__tick.is-active { box-shadow: inset 3px 0 0 var(--mark); }
.whofor__stage { position: relative; }
.who { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s var(--ease); }
.who.is-active { opacity: 1; visibility: visible; }
.who__media { position: absolute; inset: 0; overflow: hidden; }
.who__media img { filter: saturate(1.02) contrast(1.06) brightness(.72); object-position: 50% 35%; transform: scale(1.09); transition: transform 1.3s var(--ease-out); }
.who.is-active .who__media img { transform: scale(1); }
.who__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, transparent 32%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.9) 100%); }
/* ⚠ CE BLOC EST TOUJOURS POSE SUR UNE PHOTO ASSOMBRIE, quel que soit le
   terrain de la section. Il declare donc ses propres encres claires :
   sans cela, sur l accueil (terrain « papier »), --bone valait le navy
   fonce et le titre du profil devenait invisible sur la photo. */
.who__body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.5rem,3.2vw,2.4rem); z-index: 2;
  --bone:#fff; --read:#DCDDEE; --muted:#DCDDEE; --bone-dim:var(--navy-200); --mark:#fff; --steel:var(--navy-200); color:#fff; }
.who__idx { display: inline-flex; align-items: center; gap: .7ch; font: 700 var(--step--1)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone); }
.who__idx::before { content: ""; width: 18px; height: 2px; background: var(--mark); flex: 0 0 18px; }
.who__idx i { color: var(--bone-dim); font-style: normal; }
.who__t { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.8rem,4.6vw,3.8rem); line-height: .92; margin: .55rem 0 .7rem; color: var(--white); overflow-wrap: anywhere; }
.who__d { color: var(--read); max-width: 42ch; font-size: var(--step-0); }
@media (min-width: 821px){
  .whofor { height: 420vh; }
  .whofor__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
  .whofor__grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
  .whofor__stage { height: 74vh; border: 1px solid var(--line); }
}
/* Le cadre collant fait exactement 100vh et coupe ce qui déborde. Sur écran
   court la colonne de gauche — titre en --step-3 (5vw, aveugle à la hauteur),
   chapô, rail de cinq rounds — dépassait : 831 px de contenu dans 740 px de
   cadre, centrés, donc 45 px tranchés EN HAUT (première ligne du titre) et 45
   px en bas (fin du chapô). On compacte au lieu de tronquer : le chapô
   s’efface — il l’est déjà en tactile, la même information vit dans le rail —
   et le titre se plafonne à la hauteur disponible, plus à la seule largeur. */
@media (min-width: 821px) and (max-height: 880px){
  .whofor__title { font-size: min(var(--step-3), 11vh); }
  .whofor__intro { display: none; }
}
/* Second cran, pour le portable 1366×768 (≈ 660 px de viewport utile) : le
   rail garde 222 px quelle que soit la hauteur — cinq ticks à padding fixe.
   On le resserre, sinon la colonne repasse au ras du cadre. */
@media (min-width: 821px) and (max-height: 700px){
  .who__tick { padding: .45rem 0; }
  .whofor__rail { margin-top: .9rem; }
}
/* mobile (≤820px) : MÊME scroll-jack que le desktop — il RESTE (identité de
   la page). Même blindage que le mur des champions : rangée étirée
   minmax(0,1fr), scène overflow:hidden, corps du panneau remis dans le flux
   (flex align-end) → le texte ne peut physiquement plus chevaucher le rail. */
@media (max-width: 820px){
  .whofor { height: 380vh; }
  .whofor__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; }
  .whofor__grid { display: grid; grid-template-rows: auto minmax(0,1fr); gap: .8rem; width: var(--wrap); margin-inline: auto; padding-block: clamp(3.2rem,7svh,5rem) max(3.6rem, calc(1.2rem + env(safe-area-inset-bottom))); height: 100%; align-items: stretch; }
  .whofor__title { font-size: clamp(1.7rem,7.5vw,2.5rem); }
  .whofor__intro { display: none; }
  .whofor__rail { margin-top: .8rem; }
  .who__tick { padding: .4rem 0; font-size: .75rem; }
  .whofor__stage { min-height: 0; border: 1px solid var(--line); overflow: hidden; }
  .who { display: flex; align-items: flex-end; }
  .who__body { position: relative; inset: auto; width: 100%; padding: clamp(.9rem,3.5vw,1.4rem); }
  .who__t { font-size: clamp(1.4rem,6.5vw,2.4rem); }
  .who__d { font-size: .85rem; max-width: 40ch; }
}
/* navigateur in-app / écran très court : compact, zéro débordement */
@media (max-width: 820px) and (max-height: 660px){
  .whofor__grid { padding-block: 2.9rem 3.2rem; gap: .5rem; }
  .whofor__title { font-size: clamp(1.35rem,6vw,1.9rem); }
  .who__tick { padding: .3rem 0; }
  .who__d { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ===================== GALLERY TEASER =========================== */
.gallery { position: relative; overflow: hidden; }
.gallery__grid { display: grid; gap: .6rem; grid-template-columns: repeat(2,1fr); }
@media (min-width: 760px){ .gallery__grid { grid-template-columns: repeat(4,1fr); } }
.gallery__cell { aspect-ratio: 1; overflow: hidden; position: relative; cursor: pointer; }
.gallery__cell:nth-child(1){ grid-column: span 2; grid-row: span 2; }
.gallery__cell img { object-position: 50% 35%; transition: transform 1s var(--ease-out), filter .6s; }
.gallery__cell:hover img, .gallery__cell:active img { transform: scale(1.08); filter: grayscale(1) contrast(1.1) brightness(1); }
.gallery__cell:hover, .gallery__cell:active { outline: 2px solid var(--mark); outline-offset: -2px; }
.gallery__cell.media::after { opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s var(--ease-out); }
.gallery__cell.media:hover::after { opacity: 1; transform: none; }
/* touch : sans hover, la légende n'apparaissait JAMAIS → 5 carrés gris muets.
   Même loi que .disc ci-dessus (§3 « captions mono », §5.4). */
@media (hover: none), (max-width: 820px){
  .gallery__cell.media::after { opacity: 1; transform: none; }
}

/* =========================== TARIFS ============================= */
.tarifs { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 880px){ .tarifs { grid-template-columns: repeat(3,1fr); } }
/* ⚠ INVERSION v4. En v3 la carte etait un aplat SOMBRE (--ink) et la
   carte mise en avant un aplat CLAIR (--bone). Les deux tokens ayant
   change de camp avec la refonte, la regle telle quelle donnait du
   navy #12142E sur du navy #14162F : un contraste de 1.02:1, soit un
   texte strictement invisible sur les trois cartes de tarifs.
   La carte est donc BLANCHE, et c est la carte mise en avant qui porte
   l aplat navy — la hierarchie que le regard attend. */
.tarif { border: 1px solid var(--hair); border-radius: var(--radius-lg); padding: clamp(1.8rem,3vw,2.6rem); display: flex; flex-direction: column; gap: 1.2rem; position: relative; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); background: var(--paper); color: var(--on-light); box-shadow: var(--shadow-sm); }
.tarif:hover, .tarif:active { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.tarif--hot { background: var(--navy-600); border-color: var(--navy-600); color: #fff; box-shadow: var(--shadow-lg);
  --bone:#fff; --read:#DCDDEE; --muted:#DCDDEE; --mark:#fff; --line:rgba(255,255,255,.18); --steel:var(--navy-200); }
.tarif--hot .tarif__feature { color: #fff; font-weight: 700; }
.tarif--hot .tarif__items li { color: #DCDDEE; }
.tarif--hot .tarif__items li::before { background: var(--mark); }
/* le badge prend la rouille du logo — le seul endroit de l accueil ou
   l accent secondaire apparait, donc le seul point ou l oeil s arrete. */
.tarif__badge { position: absolute; top: 0; right: 1.4rem; transform: translateY(-50%); border-radius: 100px; background: var(--rust-400); border: 0; color: #fff; font: 700 var(--step--1)/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: .5em .9em; }
.tarif__name { font-family: var(--f-display); text-transform: uppercase; font-size: var(--step-1); line-height: .95; color: inherit; }
.tarif__price { font-family: var(--f-display); font-size: clamp(2.6rem,6vw,4rem); line-height: .85; color: var(--bone); }
/* ⚠ JAMAIS d'opacity + couleur alpha sur le même nœud : les deux se
   multipliaient (rgba(0,0,0,.5) × opacity .6 = alpha .30 → 2.08:1 sur la
   carte bone). « les 12 mois » est le mot qui donne son sens au prix.
   Le dimming se résout DANS la couleur, jamais en opacity. */
.tarif__price small { font-family: var(--f-mono); font-size: .24em; letter-spacing: .08em; text-transform: uppercase; color: var(--read); }
.tarif--hot .tarif__price small { color: var(--navy-200); }
.tarif__feature { color: var(--bone); font-size: var(--step--1); font-weight: 600; }
.tarif__items { display: grid; gap: .6rem; margin-top: auto; }
.tarif__items li { display: flex; gap: .8ch; align-items: flex-start; font-size: var(--step--1); color: var(--read); }
.tarif__items li::before { content: ""; flex: 0 0 7px; height: 7px; margin-top: .5em; background: var(--mark); }

/* ========================= LOCAL SEO ============================ */
.localseo { background: var(--bg); border-block: 1px solid var(--line); }
/* strong dans un .lead = ~19px+ → au-dessus du seuil, mais on garde bone
   pour le corps et on laisse l'accent aux titres/filets */
.localseo .lead strong { color: var(--white); font-weight: 700; }

/* --------------------- SCORECARD HUD (rounds) ---------------------
   La colonne vertébrale « fight » de l'accueil. Elle vit ICI (home.css) et
   pas dans base.css : les [data-round] n'existent que sur l'accueil, donc
   17 lignes de CSS partaient mortes sur 7 pages (§5.8 « pas d'asset mort »).
   ⚠ Elle n'est plus `display:none` sous 560px : une signature qui ne se
   déclenche qu'au bureau n'est pas une signature, c'est une démo (§5.4
   « mobile révisé à chaque page »). Sur mobile → forme compacte. */
/* La pastille etait un verre SOMBRE, pensee pour une page noire. Sur
   fond blanc elle devenait une tache grise portant du texte invisible.
   Elle passe en verre CLAIR, avec l encre navy — et elle se cale au
   dessus de la barre d action sur mobile (cf. refonte.css §9). */
.hud { position: fixed; left: clamp(1rem,2.5vw,1.6rem); bottom: clamp(1rem,2.5vw,1.6rem); z-index: 8400; display: flex; flex-direction: column; gap: .4rem; padding: .75rem .95rem; min-width: 132px; background: rgba(255,255,255,.86); backdrop-filter: blur(10px) saturate(1.3); border: 1px solid var(--hair); border-radius: var(--radius); box-shadow: var(--shadow-sm); color: var(--on-light);
  --bone: var(--on-light); --bone-dim: var(--on-light-2); --mark: var(--navy-600); --line: var(--hair); opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease); pointer-events: none; will-change: transform; }
.hud.is-on { opacity: 1; transform: none; pointer-events: auto; }
.hud__top { display: flex; align-items: baseline; gap: .5ch; }
/* « ROUND » à 9.3px : trop petit pour un accent → os (loi du navy) */
.hud__label { font: 700 .58rem/1 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--bone-dim); }
.hud__num { font-family: var(--f-display); font-size: 1.5rem; line-height: 1; color: var(--bone); }
.hud__name { font: 700 var(--step--1)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--read); max-width: 18ch; }
.hud__ticks { display: flex; gap: 3px; margin-top: .2rem; }
.hud__ticks i { width: 12px; height: 3px; background: var(--line); transition: background .35s var(--ease); }
.hud__ticks i.on { background: var(--mark); }
.hud__sound { position: absolute; top: .5rem; right: .55rem; width: 24px; height: 24px; display: grid; place-items: center; color: var(--bone-dim); border: 1px solid var(--line); border-radius: 50%; transition: color .3s, border-color .3s; pointer-events: auto; }
/* invisible ≥44px hit area so a thumb can find it (QA) */
.hud__sound::after { content: ""; position: absolute; inset: -11px; }
.hud__sound svg { width: 12px; height: 12px; }
.hud__sound:hover, .hud__sound:active { color: var(--bone); border-color: var(--bone-dim); }
.hud.sound-on .hud__sound { color: var(--mark); border-color: var(--mark); }
/* mobile : la même signature, compactée — round + ticks, sans le nom.
   Reste à gauche : la pastille d'appel est à droite, elles ne se touchent pas. */
@media (max-width: 560px){
  .hud { min-width: 0; padding: .5rem .6rem; gap: .25rem; flex-direction: row; align-items: center; }
  .hud__top { gap: .45ch; }
  .hud__label { font-size: .5rem; letter-spacing: .16em; }
  .hud__num { font-size: 1.1rem; }
  .hud__name { display: none; }
  .hud__ticks { margin-top: 0; margin-left: .35rem; gap: 2px; }
  .hud__ticks i { width: 7px; height: 3px; }
  /* position:relative (pas static) : la cible tactile ::after (inset:-11px →
     44px) doit se référer au bouton, sinon elle se cale sur .hud et le tap
     réel retombe à 22px. */
  .hud__sound { position: relative; margin-left: .35rem; width: 22px; height: 22px; flex: 0 0 22px; }
  .hud__sound svg { width: 11px; height: 11px; }
}

/* LISIBILITÉ MOBILE — plancher 12px sur les micro-labels (retour terrain
   client : illisibles sur téléphone). @media ≤600px, desktop intact. */
@media (max-width: 600px) {
  .bcm-chat__chips button { font-size: .75rem !important; }
  .bcm-chat__status { font-size: .75rem !important; }
  .cm-field input[type="file"]::file-selector-button { font-size: .75rem !important; }
  .menu__link .n { font-size: .75rem !important; }
  .netcard__go { font-size: .75rem !important; }
  .netcard__tag { font-size: .75rem !important; }
  /* « ROUND » à 9.3px : trop petit pour un accent → os (loi du navy) */
.hud__label { font-size: .75rem !important; }

  /* .who__tick exclu : c'est un <li> indicateur, pas une cible tactile —
     4 × 44px gonflaient la tête du « Pour qui » et écrasaient la scène */
  .nav__links a, .menu__link, .menu__foot a, .footer__col a, .crumbs a, .chip, .disc a, .faq summary, .netband a, a.tab { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Supplément lisibilité mobile — labels en unités em (ratés par le scan rem) :
   les périodes de prix (« / an », « les 12 mois »), les numéros de rail, le
   libellé « Round ». Plancher 12px, jamais un exposant (sup). */
@media (max-width: 600px) {
  .tarif__price small, .price small, small:not(sup),
  .who__tick span, [class*="__tick"] span, [class*="__rail"] span,
  .hero__round-k, .oleg__n, .octa__now-tag, .cursor__label,
  .stat__l, .value__n { font-size: .78rem !important; }
}