/* =====================================================================
   SAINT-CYPRIEN · "LA NOUVELLE GÉNÉRATION" — home.css (the showroom at night)
   The dark room, and LIGHT as the object: beams sweep from above, chrome
   catches on the type, the white-hot CTA is the brightest thing on screen.
   Loaded on EVERY page (shared component layer: .media/.essai/.tarif/.config/
   .coachcard/.gong…). Home architecture = hero · manifesto · CONFIGURATEUR ·
   teaser coachs · carte essai 10€ · quartier/accès · gong. NO planning grid,
   NO tarifs grid, NO SEO pavé on the home (client law).
   ===================================================================== */

/* media — showroom grade: photos lit like objects under a spot */
.media { position: relative; overflow: hidden; background: var(--paper-2); border-radius: var(--radius); }
.media img, .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.08) brightness(.92) saturate(.92); }
.media::after { content: attr(data-label); position: absolute; left: .9rem; bottom: .8rem; z-index: 2; font: 600 .66rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: rgba(var(--void-rgb),.7); padding: .5em .85em; border-radius: 100px; backdrop-filter: blur(4px); border: 1px solid var(--line); }
.media[data-label=""]::after { display: none; }

/* ==================== HERO — l'ouverture sous les spots =========== */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(6rem,12vh,8rem); padding-bottom: clamp(2.5rem,5vh,4rem); overflow: hidden; background: var(--void); }
/* the beams — two crossed spotlights + a top wash, slowly breathing */
.hero::before { content: ""; position: absolute; inset: -10% -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 85% at 50% -12%, rgba(var(--spark-rgb),.17), transparent 62%),
    linear-gradient(112deg, transparent 42%, rgba(var(--spark-rgb),.07) 49%, transparent 56%),
    linear-gradient(68deg, transparent 55%, rgba(var(--spark-rgb),.05) 62%, transparent 69%);
  animation: beams 9s var(--ease) infinite alternate; }
@keyframes beams { from { transform: translateX(-1.5%); opacity: .85; } to { transform: translateX(1.5%); opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .hero::before { animation: none; } }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; z-index: 0; background: linear-gradient(180deg, transparent, var(--paper)); pointer-events: none; }
/* THE SPOTLIGHT — light is a thing you move. Follows the cursor over the
   hero, brightening whatever it passes. The concept, made literal. */
.hero__spot { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity .55s var(--ease);
  background: radial-gradient(300px circle at var(--sx,50%) var(--sy,32%), rgba(var(--spark-rgb),.14), rgba(var(--spark-rgb),.05) 34%, transparent 66%); }
.hero.is-lit .hero__spot { opacity: 1; }
@media (hover: none) { .hero__spot { display: none; } }

/* LA COMPOSITION — trois étages empilés, jamais deux colonnes qui se disputent
   la hauteur. L'étage 2 (.hero__front) aligne la parole et la photo sur le MÊME
   trait de départ (align-items:start) : c'est ce qui empêche définitivement
   l'image de « glisser » sous le texte, ce que faisait l'ancien align-items:center
   sur une colonne de texte deux fois plus haute que la photo. */
.hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; }
.hero__inner > .eyebrow { align-self: flex-start; }

/* LE TITRE — calibré, plus jamais un mur. La ligne la plus longue de l'accroche
   fait 26 signes ; la taille est plafonnée pour que cette ligne tienne dans la
   largeur de .wrap (1280px max) — donc DEUX lignes, à toutes les tailles utiles,
   au lieu des quatre à cinq d'avant. C'est la même police, le même chrome, la
   même accroche : on ne perd pas la voix, on lui rend son impact. */
.hero__title { font-size: clamp(1.9rem, 6.4vw, 5.7rem); margin-top: clamp(.9rem,2vw,1.4rem); }

.hero__front { display: grid; gap: clamp(1.6rem,3.6vw,3.2rem); grid-template-columns: 1fr; align-items: start; margin-top: clamp(1.6rem,3.4vw,2.6rem); }
@media (min-width: 900px){ .hero__front { grid-template-columns: 1fr 1fr; } }
.hero__say { display: flex; flex-direction: column; gap: clamp(1.1rem,2.4vw,1.7rem); }
.hero__sub { margin-top: 0; max-width: 42ch; }
.hero__sub b { color: var(--spark); font-weight: 650; }
/* Sous la photo, les quatre repères tiennent sur UNE ligne à la largeur de la
   colonne : un badge orphelin sur une deuxième ligne a l'air d'un oubli. Le
   rembourrage est resserré juste ce qu'il faut — la cible tactile reste tenue
   par la hauteur de ligne du mono. */
.hero__badges { display: flex; flex-wrap: wrap; gap: .42rem; margin-top: 0; }
.hero__badges span { display: inline-flex; align-items: center; gap: .55ch; font: 600 var(--step--1)/1 var(--f-mono); letter-spacing: .04em; color: var(--ink); background: rgba(var(--paper-2-rgb),.7); border: 1px solid var(--line); border-radius: 100px; padding: .55em .8em; backdrop-filter: blur(6px); }
.hero__badges span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--spark); box-shadow: 0 0 10px rgba(var(--spark-rgb),.8); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 0; }
.hero__media { position: relative; display: flex; flex-direction: column; gap: clamp(.8rem,1.6vw,1.1rem); }
/* La photo du plateau est un panoramique (~2:1). Le cadre portrait 4/4.1 en
   jetait plus de la moitié hors champ ; le cadre paysage en montre nettement
   plus — la salle gagne à l'échange, l'objet reste sous son spot. */
.hero__photo { aspect-ratio: 16/10.4; border-radius: calc(var(--radius) + 6px); box-shadow: var(--shadow), 0 0 0 1px var(--line); }
/* the object under its spot */
.hero__photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(85% 60% at 50% 0%, rgba(var(--spark-rgb),.14), transparent 65%), linear-gradient(180deg, transparent 55%, rgba(var(--void-rgb),.66)); pointer-events: none; }
/* stats fold INTO the hero — a light strip, not a separate section */
.hero__stats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: clamp(2rem,4.4vh,3rem); }
@media (min-width: 820px){ .hero__stats { grid-template-columns: repeat(4,1fr); } }
.stat { background: rgba(var(--paper-2-rgb),.65); backdrop-filter: blur(6px); padding: clamp(1rem,2vw,1.5rem); }
.stat__v { font-family: var(--f-display); font-weight: 700; letter-spacing: -.03em; font-size: clamp(1.7rem,3.6vw,2.6rem); color: var(--ink); display: flex; align-items: baseline; }
/* unit sits on the baseline as a UNIT, never as an exponent ("4 min", not "4^min") */
.stat__u { font-size: .5em; margin-left: .18em; font-weight: 700; letter-spacing: -.01em; align-self: baseline; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__l { margin-top: .35rem; font-size: .78rem; color: var(--muted); line-height: 1.4; }

/* ==================== MANIFESTO — one hard line ================== */
.manifesto { padding-block: clamp(4rem,9vw,7.5rem); text-align: center; }
.manifesto p { font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; font-size: clamp(1.6rem,1rem+2.6vw,3.2rem); color: var(--ink); max-width: 26ch; margin-inline: auto; }
.manifesto p .tint { white-space: nowrap; }

/* ================= LE CONFIGURATEUR — the instrument ============== *
   The core of the site: full-width dark stage, the active discipline's
   photo fills the stage behind; the list is BIG (you play it). */
/* le fond vient de la BANDE (bleue), plus d'une couleur en dur : c'est la
   bande qui decide du registre, la section n'a qu'a suivre */
.config { position: relative; background: var(--paper); border-block: 1px solid var(--line); overflow: hidden; }
/* full-bleed backdrop: active discipline photo, dimmed to keep text law */
.config__bg { position: absolute; inset: 0; z-index: 0; }
.config__bg .media { position: absolute; inset: 0; border-radius: 0; opacity: 0; transition: opacity .8s var(--ease); }
.config__bg .media img { filter: contrast(1.05) brightness(.38) saturate(.85); }
.config__bg .media.is-active { opacity: 1; }
.config__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--void-rgb),.94) 0%, rgba(var(--void-rgb),.72) 46%, rgba(var(--void-rgb),.35) 100%); }
.config .wrap { position: relative; z-index: 1; }
.config__grid { display: grid; gap: clamp(1.6rem,4vw,3.6rem); grid-template-columns: 1fr; padding-block: var(--sec); }
@media (min-width: 960px){ .config__grid { grid-template-columns: 1.05fr .95fr; align-items: center; } }
.config__list { display: flex; flex-direction: column; margin-top: clamp(1.4rem,3vw,2rem); border-top: 1px solid var(--line); }
.cfg { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 1.1rem; text-align: left; padding: clamp(.75rem,1.6vw,1.05rem) .3rem; border-bottom: 1px solid var(--line); background: none; transition: padding-left .35s var(--ease); }
.cfg__n { font: 600 .66rem/1 var(--f-mono); color: var(--muted); transition: color .3s; }
.cfg__name { font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.35rem,1rem+1.7vw,2.3rem); line-height: 1.05; color: var(--muted); transition: color .3s; }
.cfg__tag { font: 600 .62rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cfg:hover { padding-left: .7rem; }
.cfg:hover .cfg__name { color: var(--ink-soft); }
.cfg:active { padding-left: .95rem; }
.cfg:active .cfg__name { color: var(--ink); }
.cfg.is-active { padding-left: .7rem; }
.cfg.is-active .cfg__n { color: var(--spark); }
.cfg.is-active .cfg__name { color: var(--tint); }
.cfg.is-active .cfg__tag { color: var(--spark); opacity: 1; }
.cfg:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; border-radius: 6px; }
/* the sheet — a lit glass card */
.config__panel { position: relative; background: rgba(var(--paper-2-rgb),.72); backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); overflow: hidden; box-shadow: var(--shadow); }
.config__media { position: relative; aspect-ratio: 16/8.6; }
.config__media .media { position: absolute; inset: 0; border-radius: 0; opacity: 0; transition: opacity .55s var(--ease); }
.config__media .media.is-active { opacity: 1; }
.config__body { padding: clamp(1.2rem,2.4vw,1.7rem); }
.config__facts { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .9rem; }
.config__facts span { display: inline-flex; align-items: baseline; gap: .55ch; font: 600 .66rem/1.35 var(--f-mono); letter-spacing: .04em; color: var(--ink); background: rgba(var(--void-rgb),.55); border: 1px solid var(--line); border-radius: 100px; padding: .5em .85em; }
.config__facts b { color: var(--spark-2); font-weight: 600; text-transform: uppercase; font-size: .56rem; letter-spacing: .12em; }
.config__desc { color: var(--ink-soft); transition: opacity .3s var(--ease); font-size: var(--step--1); line-height: 1.6; }
.config__cta { margin-top: 1.1rem; display: flex; gap: .7rem; flex-wrap: wrap; }
.config__body.is-swapping .config__facts, .config__body.is-swapping .config__desc { opacity: 0; }

/* ========================== TARIFS =============================== *
 * Primitives partagées, rendues sur /tarifs/ (renderMore). Le plan « allumé »
 * de /tarifs/ est la carte .promo--duo (tarifs.css) — pas une variante .tarif. */
.tarifs { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 880px){ .tarifs { grid-template-columns: repeat(3,1fr); } }
.tarif { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.6rem,2.8vw,2.2rem); display: flex; flex-direction: column; gap: 1rem; position: relative; background: var(--paper-2); transition: transform .35s var(--ease-spring), box-shadow .35s, border-color .3s; }
.tarif:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(var(--ink-rgb),.3); }
.tarif__name { font-family: var(--f-display); font-weight: 700; font-size: var(--step-1); letter-spacing: -.01em; color: var(--ink); }
.tarif__price { font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(2.1rem,4.6vw,3rem); color: var(--ink); }
.tarif__price small { font-family: var(--f-mono); font-size: .3em; letter-spacing: .06em; opacity: .6; text-transform: uppercase; }
.tarif__feature { color: var(--spark-2); font-size: var(--step--1); font-weight: 600; }
.tarif__items { display: grid; gap: .55rem; margin-top: auto; }
/* ce que l'offre contient = le texte le plus décisif de /tarifs/ → --ink-soft */
.tarif__items li { display: flex; gap: .8ch; align-items: flex-start; font-size: var(--step--1); color: var(--ink-soft); }
.tarif__items li::before { content: ""; flex: 0 0 6px; height: 6px; border-radius: 50%; margin-top: .5em; background: var(--spark); }

/* ========================= FINAL CTA ============================= */
.gong { position: relative; text-align: center; padding-block: clamp(4.5rem,10vw,8rem); overflow: hidden; background: var(--void); }
.gong::before { content: ""; position: absolute; inset: -10% -20%; pointer-events: none; background: radial-gradient(50% 70% at 50% -10%, rgba(var(--spark-rgb),.14), transparent 60%); }
.gong__inner { position: relative; width: min(92vw, 62ch); margin-inline: auto; }
.gong h2 { margin-block: 1rem 1.2rem; }
.gong .lead { margin-inline: auto; max-width: 46ch; }
.gong__cta { margin-top: 1.8rem; display: inline-flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }

/* configurateur : le 3e lien (détail) reste discret */
.config__link { background: transparent; border-color: var(--line-soft); color: var(--muted); }
.config__link:hover { color: var(--ink); border-color: var(--spark); }

/* ==================== TEASER COACHS =============================== *
   4 visages → /coachs/. Dadi = photo réelle sous son spot ; les autres =
   tuile-initiale chrome (jamais de stock). */
.coachrow__head { max-width: 60ch; }
.coachrow__title { margin-top: 1rem; font-size: clamp(1.9rem,1rem+2.6vw,3.2rem); }
.coachrow__lead { margin-top: .9rem; max-width: 46ch; color: var(--ink-soft); }
.coachrow__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; margin-top: clamp(1.8rem,4vw,2.6rem); }
@media (min-width: 780px){ .coachrow__grid { grid-template-columns: repeat(4,1fr); } }
.coachcard { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper-2); transition: transform .35s var(--ease-spring), box-shadow .35s, border-color .3s; }
.coachcard:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(var(--ink-rgb),.3); }
.coachcard__media { position: relative; aspect-ratio: 4/4.5; }
/* the tile fallback: a chrome initial, lit like an object under a spot */
.coachcard__media--tile { display: grid; place-items: center; background:
  radial-gradient(120% 90% at 50% 0%, rgba(var(--spark-rgb),.12), transparent 60%),
  linear-gradient(160deg, var(--paper-3), var(--void)); }
.coachcard__media--tile span { font-family: var(--f-display); font-weight: 700; font-size: clamp(3rem,7vw,4.6rem); line-height: 1; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.coachcard__media--tile::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 40% at 50% 120%, rgba(var(--void-rgb),.7), transparent 70%); }
.coachcard__body { padding: .95rem 1rem 1.1rem; }
.coachcard__tag { font: 600 .58rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--spark); }
.coachcard__name { font-family: var(--f-display); font-weight: 700; font-size: var(--step-1); letter-spacing: -.01em; color: var(--ink); margin-top: .5rem; }
.coachcard__role { font-size: .78rem; color: var(--muted); margin-top: .25rem; line-height: 1.4; }
.coachrow__more { margin-top: clamp(1.6rem,3vw,2.2rem); }

/* ==================== CARTE ESSAI — 10€ seule ==================== */
.essai { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); background:
  radial-gradient(120% 140% at 100% 0%, rgba(var(--spark-rgb),.08), transparent 55%),
  var(--paper-2);
  box-shadow: var(--shadow); display: grid; gap: 1.6rem; grid-template-columns: 1fr; align-items: center; padding: clamp(1.8rem,4vw,3rem); }
@media (min-width: 860px){ .essai { grid-template-columns: 1.4fr auto; gap: 2.4rem; } }
.essai__spot { position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity .55s var(--ease);
  background: radial-gradient(280px circle at var(--sx,80%) var(--sy,10%), rgba(var(--spark-rgb),.16), rgba(var(--spark-rgb),.05) 36%, transparent 68%); }
.essai.is-lit .essai__spot { opacity: 1; }
@media (hover: none){ .essai__spot { display: none; } }
.essai__body, .essai__cta { position: relative; z-index: 1; }
.essai__title { margin-top: 1rem; font-size: clamp(1.9rem,1rem+3vw,3.4rem); }
.essai__lead { margin-top: 1rem; max-width: 44ch; font-size: var(--step-0); }
.essai__cta { display: flex; flex-direction: column; gap: .7rem; }
@media (max-width: 520px){ .essai__cta { flex-direction: row; flex-wrap: wrap; } }

/* ==================== QUARTIER / ACCÈS =========================== */
/* le quartier revient au clair : le noir doit rester rare (hero + gong),
   sinon il ne cogne plus */
.quartier { border-top: 1px solid var(--line); background: var(--paper); }
.quartier__grid { display: grid; gap: clamp(1.8rem,4vw,3.4rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px){ .quartier__grid { grid-template-columns: 1fr .9fr; } }
.quartier__title { margin-top: 1rem; font-size: clamp(2rem,1rem+3vw,3.4rem); }
.quartier__lead { margin-top: 1rem; max-width: 42ch; }
.quartier__cta { margin-top: 1.4rem; }
.quartier__facts { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.quartier__facts li { background: var(--paper-2); padding: clamp(.9rem,1.8vw,1.2rem) clamp(1rem,2vw,1.3rem); display: flex; flex-direction: column; gap: .3rem; transition: background .3s; }
.quartier__facts li:hover { background: var(--paper-3); }
.qk { font: 600 .6rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--spark); }
.qv { font-size: var(--step-0); color: var(--ink); font-weight: 500; }

/* ==================== TOUCH LIFE (hover: none) =================== *
 * BC.touchLife (site.js) bascule .is-inview quand une carte traverse le cadre
 * sur mobile (pas de hover). De la vie sur TOUTE la page, pas que le héros —
 * chaque famille reprend son geste de survol. Loaded partout (home.css). */
@media (hover: none) {
  .promo.is-inview, .codecard.is-inview, .level.is-inview, .pnote.is-inview,
  .rostercard.is-inview, .coachcard.is-inview, .tarif.is-inview, .review.is-inview {
    transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(var(--ink-rgb),.3);
  }
  .sister.is-inview { transform: translateX(6px); border-color: rgba(var(--ink-rgb),.3); }
  .slot.is-inview { background: var(--paper-3); box-shadow: inset 3px 0 0 var(--spark); }
  .coords li.is-inview { background: var(--paper-3); }
  .cfg.is-inview .cfg__name { color: var(--ink-soft); }
  .cfg.is-inview .cfg__n { color: var(--spark); }
  /* .act (activités) : on allume le faisceau au lieu de soulever tout l'écran */
  .act.is-inview .act__glow { opacity: 1; }
  .act.is-inview .act__media img { filter: contrast(1.08) brightness(.92) saturate(.95); transform: scale(1.012); }
}

/* ================ MOBILE PASS (≤820px, desktop untouched) ========= */
/* Le héros en UNE colonne (sous le point de bascule de .hero__front) : la salle
   passe JUSTE APRÈS l'accroche. On lit le titre, on voit la salle, puis on lit
   pourquoi et on clique. L'image n'est plus le wagon de queue — c'est la
   deuxième chose que l'œil rencontre. */
@media (max-width: 899px) {
  .hero { min-height: auto; }
  .hero__photo { aspect-ratio: 16/11; }
  .hero__front > .hero__media { order: -1; }
}

@media (max-width: 820px) {
  .config__grid { padding-block: clamp(3.5rem,8vw,5rem); }
  .cfg__tag { display: none; }
  .cfg__name { font-size: clamp(1.2rem,5.6vw,1.7rem); }
  .manifesto p { font-size: clamp(1.35rem,6vw,1.9rem); }
}

/* ------- Le configurateur : la ligne coach quand le nom manque ------ */
.config__facts .is-tbd { align-items: center; }
.config__tbd {
  margin-top: .85rem; padding-left: .9rem; border-left: 2px solid var(--spark-2);
  color: var(--ink-soft); font-size: var(--step--1); line-height: 1.6; max-width: 46ch;
}

/* =====================================================================
   LISIBILITÉ MOBILE — plancher de 12px sur les micro-labels mono.
   Sur desktop ces libellés décoratifs tiennent à 9-11px ; sur un
   téléphone ils devenaient illisibles (retour terrain client). Plancher
   unique à ≤ 600px, plus des cibles tactiles à 44px. Aucune régression
   desktop : tout est sous @media. Généré depuis l'audit des 60 classes
   sous 0.74rem. ===================================================== */
@media (max-width: 600px) {
  .act__facts dt { font-size: .75rem !important; }
  .cfg__n { font-size: .75rem !important; }
  .cfg__tag { font-size: .75rem !important; }
  .ck { font-size: .75rem !important; }
  .club__cap { font-size: .75rem !important; }
  .club__field > span { font-size: .75rem !important; }
  .club__filename { font-size: .75rem !important; }
  .club__hint { font-size: .75rem !important; }
  .club__play { font-size: .75rem !important; }
  .cmap-link { font-size: .75rem !important; }
  .coachcard__tag { font-size: .75rem !important; }
  .codecard__n { font-size: .75rem !important; }
  .config__facts b { font-size: .75rem !important; }
  .config__facts span { font-size: .75rem !important; }
  .dstep__k { font-size: .75rem !important; }
  .fgroup__k { font-size: .75rem !important; }
  .fk { font-size: .75rem !important; }
  .gchip__n { font-size: .75rem !important; }
  .gitem__cap { font-size: .75rem !important; }
  .gitem__zoom { font-size: .75rem !important; }
  .glight__count { font-size: .75rem !important; }
  .glight__zone { font-size: .75rem !important; }
  .hours__k { font-size: .75rem !important; }
  .infos__facts .qk { font-size: .75rem !important; }
  .level__age { font-size: .75rem !important; }
  .media::after { font-size: .75rem !important; }
  .menu__link .n { font-size: .75rem !important; }
  .netmesh__k { font-size: .75rem !important; }
  .pl-count { font-size: .75rem !important; }
  .planbtn__n { font-size: .75rem !important; }
  .promo__flag { font-size: .75rem !important; }
  .pulse__l { font-size: .75rem !important; }
  .qk { font-size: .75rem !important; }
  .rostercard__count { font-size: .75rem !important; }
  .rostercard__tag { font-size: .75rem !important; }
  .route__arrow { font-size: .75rem !important; }
  .route__pick { font-size: .75rem !important; }
  .scchat__kicker { font-size: .75rem !important; }
  .scchat__tel { font-size: .75rem !important; }
  .sister__here { font-size: .75rem !important; }
  .sister__tag { font-size: .75rem !important; }
  .station__specs li { font-size: .75rem !important; }
  .tbd-note__k { font-size: .75rem !important; }
  .wday__k { font-size: .75rem !important; }
  .week__link { font-size: .75rem !important; }
  .wrow__coach { font-size: .75rem !important; }
  .wrow__day { font-size: .75rem !important; }
  .wrow__time { font-size: .75rem !important; }
  .wsheet__count { font-size: .75rem !important; }
  .wslot__b i { font-size: .75rem !important; }
  .wtab__n { font-size: .75rem !important; }
  /* ---------------- L'ÉTAT « PAS ENCORE NOMMÉ » --------------------- *
   Le grappling tourne sans encadrant nommé au poster. Ce n'est pas un
   trou de données : c'est une décision, et elle doit se LIRE comme
   telle. Le token porte donc une vraie forme — cadre pointillé, mono,
   chrome — au lieu de se fondre dans le texte comme un oubli.
   Aucune teinte nouvelle : chrome (--spark-2) sur le noir de la salle. */
.tbd { font-size: .75rem !important; }
  /* EN COULEUR — loi §5 */
.pl-poster::after { font-size: .75rem !important; }
  /* créneaux + nom du coach = de l'INFORMATION, pas un label décoratif :
   --ink-soft (~11:1) et non --muted, sinon la seule donnée dure de la carte
   est aussi la moins lisible. */
.route__meta { font-size: .75rem !important; }
  /* le jour du palier école — la donnée manquait, la carte se lisait creuse */
.level__jours { font-size: .75rem !important; }

  /* cibles tactiles : 44px minimum sur tout ce qui se tape */
  .nav__links a, .menu__link, .menu__foot a, .footer__col a, .crumbs a,
  .chip, .act-chip, .week__link, .route__pick, .faq summary, .sister__link,
  .netmesh a, .coachrow__more, .config__link { 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; }
}

/* =====================================================================
   LE HÉROS — composition reprise de la maquette du club.
   ---------------------------------------------------------------------
   Verrou logo centré, accroche, deux lignes de fait, deux boutons, un
   bandeau de trois repères, un appel au défilement. Tout est axé sur
   la verticale centrale : c'est ce qui donne l'effet « affiche ».

   DEUX ÉCARTS ASSUMÉS PAR RAPPORT À LA MAQUETTE :
   · la maquette était rouge — ici c'est la palette du site (bleu nuit,
     blanc cassé, argent). Le rouge aurait été une sixième couleur ;
   · le logo de la maquette était inventé (des gants, « Saint-Cyprien »
     en rouge). On sert le vrai fichier du club, et le nom de la salle
     est composé dessous en mono espacé — pas dessiné dans l'image.
   ===================================================================== */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: clamp(6.5rem, 13vh, 9rem);
  padding-bottom: clamp(8rem, 16vh, 11rem);
  background: var(--void);
}

/* LA SALLE EN FOND — une vraie photo, pas un décor. */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;   /* on garde le ring et les sacs, pas la charpente */
  z-index: 0;
}
/* Le voile est BLEU NUIT, jamais noir : un voile noir grise la photo,
   celui-ci la fait entrer dans l'identité. Plus dense en bas, pour que
   le bandeau de repères et le pied de section restent lisibles. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(78% 62% at 50% 42%, rgba(var(--navy-rgb), .38), transparent 72%),
    linear-gradient(180deg,
      rgba(var(--void-rgb), .74) 0%,
      rgba(var(--navy-rgb), .70) 34%,
      rgba(var(--navy-rgb), .84) 68%,
      rgba(var(--paper-rgb), .97) 100%);
  animation: none;
}
.hero::after { content: none; }

.hero__inner {
  position: relative;
  z-index: 2;
  align-items: center;
  gap: 0;
}

/* ---- LE VERROU : le logo, puis le nom de la salle ---- */
.hero__lockup { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.hero__logo {
  width: clamp(230px, 34vw, 430px);
  height: auto;
  filter: drop-shadow(0 6px 30px rgba(0, 0, 0, .6));
}
.hero__salle {
  font: 600 clamp(.72rem, 1.5vw, 1rem)/1 var(--f-mono);
  letter-spacing: .42em;      /* l'espacement fait le blason */
  text-transform: uppercase;
  color: var(--spark-2);
  padding-left: .42em;        /* compense l'espacement sur le dernier signe */
}

/* ---- L'ACCROCHE : à qui ça s'adresse, pas ce qu'on ressentira ---- */
.hero__claim {
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.6rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}

.hero__sub {
  margin-top: .85rem;
  max-width: 56ch;
  margin-inline: auto;
  color: var(--ink-soft);
  font-size: clamp(.95rem, 1.5vw, 1.08rem);
  line-height: 1.55;
}

.hero__cta {
  justify-content: center;
  margin-top: clamp(1.7rem, 3.5vw, 2.5rem);
  gap: .9rem;
}
.hero__cta .btn { min-width: clamp(200px, 26vw, 260px); }
/* le CTA secondaire doit se lire SUR une photo : le fond translucide
   lui donne son assise sans en faire un second bouton plein */
.hero__cta .btn:not(.btn--primary) {
  background: rgba(var(--void-rgb), .34);
  backdrop-filter: blur(8px);
  border-color: rgba(var(--spark-rgb), .45);
}
.hero__cta .btn:not(.btn--primary):hover { background: rgba(var(--void-rgb), .5); }

/* ---- LES TROIS REPÈRES ---- */
/* LE PIED DU HEROS. Le bandeau et l appel au defilement etaient deux
   elements absolus poses chacun a sa hauteur : a 1440x900 ils se
   mordaient de 2 px, et chaque correction de clamp deplacait le probleme
   sur une autre taille d ecran. Empiles dans UN conteneur, ils ne
   peuvent plus se chevaucher — a aucune hauteur de fenetre. */
.hero__foot {
  position: absolute;
  left: 50%;
  bottom: clamp(1.1rem, 2.6vh, 1.8rem);
  transform: translateX(-50%);
  z-index: 2;
  width: min(92vw, 1080px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.8rem, 1.8vh, 1.3rem);
}

.hero__facts {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  backdrop-filter: blur(10px);
}
@media (min-width: 780px) { .hero__facts { grid-template-columns: repeat(3, 1fr); } }
.hfact {
  display: flex;
  align-items: center;
  gap: .9rem;
  text-align: left;
  padding: clamp(.85rem, 1.8vw, 1.1rem) clamp(1rem, 2vw, 1.4rem);
  background: rgba(var(--paper-rgb), .62);
}
.hfact__i { width: 26px; height: 26px; flex: none; color: var(--spark); }
.hfact span { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.hfact b {
  font: 600 .74rem/1.3 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.hfact span { font-size: .8rem; line-height: 1.35; color: var(--muted); }

/* ---- L'APPEL AU DÉFILEMENT ---- */
.hero__scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  font: 600 .6rem/1 var(--f-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .3s;
}
.hero__scroll:hover { color: var(--ink); }
.hero__scroll-m {
  width: 20px; height: 30px;
  border: 1.5px solid currentColor;
  border-radius: 100px;
  position: relative;
}
.hero__scroll-m::after {
  content: "";
  position: absolute;
  left: 50%; top: 6px;
  width: 2px; height: 5px;
  border-radius: 2px;
  background: currentColor;
  transform: translateX(-50%);
  animation: heroMolette 1.9s var(--ease-out) infinite;
}
@keyframes heroMolette {
  0%   { opacity: 0; transform: translate(-50%, -3px); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 9px); }
}

/* ---- PETITS ÉCRANS : le bandeau repasse EN FLUX ----
   En absolu il chevauchait les boutons dès que la hauteur manquait. */
@media (max-width: 779.98px) {
  .hero { padding-bottom: clamp(2rem, 5vh, 3rem); }
  .hero__foot { position: static; transform: none; width: 100%; margin-top: clamp(2rem, 5vw, 2.6rem); }
  .hero__scroll { display: none; }
  .hero__cta { flex-direction: column; align-items: stretch; width: min(100%, 340px); margin-inline: auto; }
  .hero__cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-m::after { animation: none; opacity: 1; }
}

/* FENÊTRE BASSE — le bandeau repasse EN FLUX.
   Mesuré : à 1440x900 il reste 28 px entre le bandeau et l'appel au
   défilement. En dessous de 720 px de haut la marge disparaît et les
   deux se mordent, quelle que soit la largeur. On arrête alors de les
   empiler en absolu. */
@media (max-height: 720px) and (min-width: 780px) {
  .hero { padding-bottom: clamp(2.5rem, 6vh, 3.5rem); }
  .hero__foot { position: static; transform: none; margin-top: clamp(1.6rem, 3.5vh, 2.4rem); }
  .hero__scroll { display: none; }
}

/* LA PHOTO DE L'ÉCOLE EST EN PORTRAIT, la vignette du configurateur en
   paysage (16/8.6). Sans ancrage, `cover` coupe moitié en haut et moitié
   en bas : les deux gamines perdaient la tête. Ancré en haut, il ne
   saute que le bitume — les visages, les médailles et le maillot
   restent. Vérifié en simulant le recadrage avant de trancher. */
.config__media img[src*="educative"],
.media img[src*="educative"] { object-position: 50% 0%; }