/* ============================================================
   BODY VIP — v4 Lovable
   Palette : noir profond + OR AMBRÉ chaud, type "fight poster
   cinéma" — calée sur les photos officielles (images 1-5) :
   étalonnage teal & orange, glow ambré, brume, grain pellicule.
   ============================================================ */

:root {
  /* Noirs légèrement réchauffés (charbon photo, pas noir pur froid) */
  --bg: #0B0A08;
  --bg-2: #121009;
  --bg-3: #17140C;
  --card: #15120B;
  --card-2: #1C1810;
  --border: #2A2317;
  --border-2: #332B1B;
  --ink: #FFFFFF;
  --ink-80: rgba(255,255,255,0.85);
  --ink-60: rgba(255,255,255,0.65);
  --ink-40: rgba(255,255,255,0.45);
  --ink-20: rgba(255,255,255,0.20);
  /* Or ambré chaud du logo « 2 » et des contre-jours (images 1-5).
     Les variables gardent leur nom --jaune* pour ne rien casser. */
  --jaune: #D9A227;
  --jaune-2: #EAB53C;
  --jaune-deep: #A87C18;
  --jaune-glow: rgba(217,162,39,0.20);
  --jaune-soft: rgba(217,162,39,0.08);
  /* Contre-couleur cinéma : teal froid (étalonnage teal & orange, image 5) */
  --teal: #1F6F6A;
  --teal-glow: rgba(38,150,140,0.16);
  /* Halo de spot ambré (rim light / brume des photos) */
  --spot: rgba(224,165,42,0.22);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shell: 1280px;
  --pad: 24px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Défilement smooth pour toutes les ancres internes */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Ancres respectent topbar + header sticky */
section[id], div[id] { scroll-margin-top: 140px; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ========== Ambiance cinéma globale (calée sur images 1-5) ========== */
/* Grain pellicule sur toute la page.
   IMPORTANT perf : pas de mix-blend-mode sur un calque fixe (forçait
   un repeint plein écran à chaque frame de scroll = saccades).
   On isole le calque sur sa propre couche GPU (translateZ + contain)
   pour qu'il reste statique pendant le défilement. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.045;
  transform: translateZ(0);
  contain: strict;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='gn'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23gn)' opacity='0.55'/></svg>");
}
/* Lueurs d'ambiance ambré + teal — calque fixe statique, sans blend,
   isolé sur sa propre couche pour ne pas repeindre au scroll. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform: translateZ(0);
  contain: strict;
  background:
    radial-gradient(ellipse 60% 50% at 88% 8%, var(--jaune-soft), transparent 60%),
    radial-gradient(ellipse 55% 45% at 6% 96%, var(--teal-glow), transparent 60%);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ========== Typography ========== */
h1, h2, h3, h4 {
  font-family: 'Oswald', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0;
}

h1 { font-size: clamp(2.8rem, 6vw, 5.2rem); text-transform: uppercase; }
h2 { font-size: clamp(2.2rem, 4.5vw, 3.8rem); text-transform: uppercase; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.06em; }

.accent { color: var(--jaune); }

.eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jaune);
}

.lede {
  color: var(--ink-60);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 60ch;
}

/* ========== Buttons ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: all 0.25s ease;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.btn--jaune {
  background: linear-gradient(165deg, var(--jaune-2), var(--jaune) 55%, var(--jaune-deep));
  color: #0A0A0A;
  box-shadow: 0 8px 24px -8px rgba(217,162,39,0.55), 0 0 0 1px rgba(242,201,76,0.3) inset;
}
.btn--jaune:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 14px 38px -8px rgba(217,162,39,0.7), 0 0 28px -6px rgba(217,162,39,0.4);
}

.btn--ghost {
  background: transparent;
  color: var(--jaune);
  border-color: var(--jaune);
}
.btn--ghost:hover {
  background: var(--jaune);
  color: #0A0A0A;
}

.btn--dark {
  background: var(--card);
  color: var(--ink);
  border-color: var(--border);
}
.btn--dark:hover {
  background: var(--card-2);
  border-color: var(--jaune);
}

/* Bouton « site perso » : fond doré atténué + halo + icône lien externe →
   plus visible qu'un ghost, distinct du CTA principal plein. */
.btn--site {
  background: rgba(217,162,39,0.18);
  color: var(--jaune-2);
  border-color: var(--jaune);
  box-shadow: 0 0 20px -6px rgba(217,162,39,0.4), 0 0 0 1px rgba(217,162,39,0.22) inset;
}
.btn--site:hover {
  background: var(--jaune);
  color: #0A0A0A;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -10px rgba(217,162,39,0.65);
}
.btn--site svg { width: 15px; height: 15px; flex-shrink: 0; }

.btn--lg { padding: 20px 36px; font-size: 1rem; }
.btn--block { width: 100%; }

/* ========== Topbar (jaune) ========== */
.topbar {
  background: var(--jaune);
  color: #0A0A0A;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding-block: 8px;
  flex-wrap: wrap;
  gap: 12px;
}
.topbar__addr,
.topbar__hours {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.topbar__addr svg,
.topbar__hours svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Adresse cliquable → Google Maps */
a.topbar__addr { color: inherit; text-decoration: none; transition: opacity .15s ease; }
a.topbar__addr:hover { text-decoration: underline; opacity: 0.8; }

/* ========== Header ========== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10,10,10,0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
/* Hauteur du header (zone logo) — spécificité renforcée sinon les
   règles mobiles .shell { padding:0 16px } remettraient le vertical à 0. */
.site-header .site-header__inner { padding-block: 24px; }
.brand { flex-shrink: 0; }
.brand img { height: 46px; width: auto; }

.nav {
  display: flex;
  gap: 22px;
  flex: 1;
  justify-content: center;
  align-items: center;
}
.nav > a,
.nav-dd > a {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-80);
  position: relative;
  padding: 6px 0;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.nav > a:hover, .nav > a[aria-current="page"], .nav > a.is-active,
.nav-dd > a:hover, .nav-dd > a[aria-current="page"], .nav-dd > a.is-active,
.nav-dd:hover > a { color: var(--jaune); }
.nav > a[aria-current="page"]::after, .nav > a.is-active::after,
.nav-dd > a[aria-current="page"]::after, .nav-dd > a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--jaune);
}

/* Dropdown menu */
.nav-dd {
  position: relative;
}
.nav-dd > a .nav-arrow {
  font-size: 0.7em;
  opacity: 0.7;
  transition: transform 0.25s;
}
.nav-dd:hover > a .nav-arrow { transform: rotate(180deg); opacity: 1; }
/* Parent de sous-menu sans lien (ex. « Disciplines ») : non cliquable mais curseur cohérent. */
.nav-dd > a:not([href]) { cursor: pointer; }

.nav-dd__menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 240px;
  padding: 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 48px -12px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,204,0,0.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 100;
}
.nav-dd__menu::before {
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0; height: 14px;
}
.nav-dd__menu::after {
  content: "";
  position: absolute;
  top: -6px; left: 50%;
  width: 12px; height: 12px;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  transform: translateX(-50%) rotate(45deg);
}
.nav-dd:hover .nav-dd__menu,
.nav-dd:focus-within .nav-dd__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dd__menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-80);
  transition: all 0.15s ease;
  white-space: nowrap;
}
.nav-dd__menu a::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-40);
  transition: background 0.15s;
}
.nav-dd__menu a:hover {
  background: var(--card);
  color: var(--jaune);
  padding-left: 18px;
}
.nav-dd__menu a:hover::before { background: var(--jaune); }
/* Lien du sous-menu correspondant à la page courante */
.nav-dd__menu a.is-active,
.nav-dd__menu a[aria-current="page"] { color: var(--jaune); background: var(--card); }
.nav-dd__menu a.is-active::before,
.nav-dd__menu a[aria-current="page"]::before { background: var(--jaune); }

.site-header__right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.social-mini {
  display: flex;
  gap: 12px;
  color: var(--ink-60);
}
.social-mini a { display: inline-flex; transition: color 0.2s; }
.social-mini a:hover { color: var(--jaune); }
.social-mini svg { width: 30px; height: 30px; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  background: var(--jaune);
  color: #0A0A0A;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  transition: all 0.2s;
}
.nav-cta:hover { background: var(--jaune-2); transform: translateY(-1px); }

/* Portables 13"/14" : le conteneur est plafonné à 1280px, donc on resserre le
   menu sur cette plage pour que tout tienne (sinon le bouton « Pass journée »
   déborde et se fait couper). Au-delà de 1380px, marges suffisantes → inchangé. */
@media (min-width: 981px) and (max-width: 1380px) {
  .site-header__inner { gap: 18px; }
  .nav { gap: 15px; }
  .nav > a, .nav-dd > a { font-size: 0.71rem; letter-spacing: 0.07em; }
  .site-header__right { gap: 11px; }
  .social-mini { gap: 9px; }
  .social-mini svg { width: 26px; height: 26px; }
  .nav-cta { padding: 9px 13px; font-size: 0.8rem; }
  .brand img { height: 42px; }
}

/* CTA Pass journée — visible uniquement dans le menu mobile (cf. media 980px).
   Spécificité .nav .nav__cta-m (0,2,0) pour battre .nav > a (0,1,1) en desktop. */
.nav .nav__cta-m { display: none; }

.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  width: 42px; height: 42px;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0;
}
.menu-toggle span {
  display: block; width: 18px; height: 2px; background: var(--ink);
}

/* CTA téléphone intégré au menu — visible uniquement en mobile */
.nav a.nav__phone { display: none; }
.nav .nav__social { display: none; } /* visible uniquement dans le menu mobile */

/* Badge « MMA FACTORY » — fond jaune, coins arrondis, texte blanc */
.badge-mmaf {
  display: inline-block;
  background: var(--jaune);
  color: #FFFFFF;
  border-radius: 6px;
  padding: 2px 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Hero baseline : « · » en desktop ; retour à la ligne + espace en mobile */
.meta-sep { display: inline; }
.meta-line2 { display: inline; }

/* ============================================================
   HERO — Cinematic Poster (index.html uniquement)
   Photo plein-bleed, double letterbox jaune, typographie monumentale
   ============================================================ */
.hero {
  position: relative;
  /* La bande jaune "disciplines" doit rester visible sans scroller :
     --nav-h est mesuré en JS (topbar + header réels, peu importe la barre
     de favoris/extensions). Fallback 134px si JS désactivé. */
  min-height: calc(100svh - var(--nav-h, 134px));
  max-height: calc(100svh - var(--nav-h, 134px));
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #050505;
}
/* Photo plein-bleed */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  /* Étalonnage chaud type photos officielles : contraste + bascule ambrée */
  filter: contrast(1.07) saturate(1.06) brightness(0.98) sepia(0.12) hue-rotate(-6deg);
  animation: heroZoom 22s ease-out forwards;
}
@keyframes heroZoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* Vignette — protège la typographie sans assombrir l'image entière */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* Halo de spot ambré marqué (rim light / contre-jour doré des photos) */
    radial-gradient(ellipse 58% 64% at 80% 26%, rgba(232,170,45,0.34) 0%, rgba(224,165,42,0.10) 36%, transparent 66%),
    /* Contre-jour teal froid opposé — étalonnage teal & orange (image 5) */
    radial-gradient(ellipse 52% 58% at 12% 20%, rgba(38,150,140,0.22) 0%, transparent 58%),
    /* Bottom-up dark gradient pour lisibilité du titre */
    linear-gradient(180deg,
      rgba(7,6,3,0.78) 0%,
      rgba(7,6,3,0.20) 16%,
      rgba(7,6,3,0.28) 30%,
      rgba(7,6,3,1) 100%),
    /* Vignette radiale concentrée bas-gauche, sous le titre */
    radial-gradient(ellipse 72% 68% at 22% 78%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.55) 34%, transparent 70%);
}

/* Brume / fumée ambrée — atmosphère des photos officielles */
.hero__overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 280px at 82% 64%, rgba(224,165,42,0.10), transparent 70%),
    radial-gradient(circle 220px at 12% 88%, rgba(38,150,140,0.07), transparent 70%);
  mix-blend-mode: screen;
}

/* Film grain — texture cinéma subtile */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
}

/* Bloc typographique central */
.hero__content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 32px 28px;
  position: relative;
  z-index: 1;
}
.hero__content > .shell {
  width: 100%;
}
.hero__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
}

/* Titre monumental — bombshell typographie */
.hero__title {
  font-family: 'Antonio', 'Oswald', sans-serif;
  font-weight: 700;
  /* Taille pilotée par la largeur ET la hauteur du viewport : sur les laptops
     13"/15" (peu hauts), le titre sur 4 lignes dépassait la hauteur plafonnée
     du hero et se faisait rogner par le haut (sous la barre jaune). Le terme
     vh borne le titre pour qu'il rentre toujours dans la hauteur disponible. */
  font-size: clamp(2.6rem, min(7.8vw, 11vh), 6.2rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #FFFFFF;
  /* Inclinaison agressive façon logo BODY VIP (images 1-5) */
  transform: skewX(-6deg);
  transform-origin: left;
  /* Réserve pour les jambages (q/p) de la dernière ligne */
  padding-bottom: 0.06em;
  /* Multi-couches d'ombre + halo or — défini, dramatique, ciné poster */
  text-shadow:
    0 0 1px rgba(0,0,0,0.95),
    0 2px 6px rgba(0,0,0,0.95),
    0 4px 20px rgba(0,0,0,0.85),
    0 12px 60px rgba(0,0,0,0.7),
    0 0 70px rgba(217,162,39,0.18);
  margin: 0;
  max-width: 100%;
  animation: hero-titleReveal 1.4s 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes hero-titleReveal {
  from {
    opacity: 0;
    transform: translateY(36px) skewX(-6deg);
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    transform: translateY(0) skewX(-6deg);
    clip-path: inset(0 0 0 0);
  }
}

/* Esperluette — forme standard, jaune */
.hero__title em {
  font-family: inherit;
  font-style: normal;
  font-weight: 700;
  color: var(--jaune);
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.6));
}
/* Écart entre le bloc « Sports de combats & » et « transformation physique » */
.hero__title .ht-grp { display: block; }
.hero__title .ht-grp--2 { margin-top: 0.3em; }

/* Localité sous le titre (SEO local) — sous-ligne jaune plus petite */
.hero__title-loc {
  display: block;
  font-family: 'Antonio', 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.6vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--jaune);
  margin-top: 0.5em;
}

/* Filet jaune signature */
.hero__title-rule {
  display: block;
  width: 96px;
  height: 4px;
  background: linear-gradient(90deg, var(--jaune), var(--jaune-2));
  box-shadow: 0 0 20px rgba(217,162,39,0.6);
  margin-top: 6px;
  animation: hero-ruleReveal 0.7s 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transform-origin: left;
}
@keyframes hero-ruleReveal {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Ligne meta éditoriale */
.hero__meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  margin: 0;
  animation: hero-fadeUp 0.8s 1.2s ease-out both;
}

/* Stats inline mono */
.hero__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-top: 4px;
  animation: hero-fadeUp 0.8s 1.4s ease-out both;
}
.hero__stats > span {
  padding: 0 20px;
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.hero__stats > span + span::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 18px;
  background: rgba(255,255,255,0.3);
}
.hero__stats > span:first-child { padding-left: 0; }
.hero__stats > span:last-child  { padding-right: 0; }
.hero__stats strong {
  color: var(--jaune);
  font-weight: 700;
  font-size: 1.7rem;
  font-family: 'Antonio', sans-serif;
  letter-spacing: 0;
  line-height: 1;
}

@keyframes hero-fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Letterbox bas — marquee disciplines intégré */
.hero__bottom-bar {
  position: relative;
  z-index: 2;
  background: var(--jaune);
  color: #050505;
  padding: 16px 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;            /* Firefox : pas de scrollbar */
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  border-top: 1px solid rgba(0,0,0,0.12);
  /* Bandeau "disciplines" affiché immédiatement (pas d'animation d'entrée
     qui le masquait sous le pli au premier rendu). */
}
.hero__bottom-bar::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.hero__bottom-bar.is-dragging { cursor: grabbing; }
.hero__bottom-bar-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  font-family: 'Antonio', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* défilement piloté en JS (scrollLeft) → permet le drag souris */
}
.hero__bottom-bar-track span { cursor: inherit; }
.hero__bottom-bar-track span {
  display: inline-flex;
  align-items: center;
  padding: 0 26px;
}
.hero__bottom-bar-track i { display: none; }
@keyframes hero-marqueeFlow {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Hero · titre en bas à droite (front page, ≥ desktop) ──────────────
   La photo du hero est un portrait d'équipe pleine largeur : on cale le
   titre tout en bas à droite pour dégager les visages. La bande sombre du
   bas (overlay) assure déjà la lisibilité ; on ajoute une vignette ancrée
   à droite. Pour changer de position, remplacer la classe « hero--title-br »
   sur <section class="hero …"> dans front-page.php (bl = bas-gauche, etc.). */
@media (min-width: 981px) {
  .hero--title-br .hero__content { justify-content: flex-end; }
  .hero--title-br .hero__inner {
    margin-left: auto;        /* pousse le bloc (max 760px) vers la droite */
    align-items: flex-end;    /* aligne titre / filet / méta / stats à droite */
    text-align: right;
  }
  /* Titre incliné (skewX) + filet : on pivote depuis la droite pour un rendu net */
  .hero--title-br .hero__title,
  .hero--title-br .hero__title-rule { transform-origin: right; }
  .hero--title-br .hero__stats { justify-content: flex-end; }

  /* Vignette sombre additionnelle ancrée en bas-droite, sous le titre */
  .hero--title-br .hero__overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 64% at 80% 82%,
      rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.5) 38%, transparent 72%);
  }
}

/* ── Hero · titre centré + agrandi (front page, ≥ desktop) ───────────────────
   Centre toute la composition (titre / filet / méta / stats) et agrandit le H1.
   La position centrale dégage le bas (logo « BODY VIP » gravé dans la photo) et
   laisse les visages visibles au-dessus. Pour repasser en bas-droite : remettre
   la classe « hero--title-br » sur <section class="hero …"> dans front-page.php. */
@media (min-width: 981px) {
  .hero--title-cc .hero__inner {
    max-width: none;        /* le grand titre tient sans rétrécir prématurément */
    margin-inline: auto;
    align-items: center;    /* centre titre / filet / méta / stats */
    text-align: center;
    transform: translateY(7vh);  /* descend le bloc sous les visages de la photo */
  }
  .hero--title-cc .hero__title,
  .hero--title-cc .hero__title-rule { transform-origin: center; }
  .hero--title-cc .hero__stats { justify-content: center; }
  /* Police du H1 agrandie */
  .hero--title-cc .hero__title {
    font-size: clamp(2.9rem, min(8.8vw, 12.5vh), 7.2rem);
  }
  /* Respiration entre le grand titre et la ligne « à Saint-Maur… » + infos dessous.
     En vh → l'écart se resserre sur les écrans peu hauts (laptops). */
  .hero--title-cc .hero__title-loc { margin-top: clamp(1.4rem, 4.6vh, 3.2rem); }
}

/* ── Variante · H1 sur une seule ligne (combinée à hero--title-cc) ───────────
   Groupes en inline + <br> masqués (les retours de ligne du contenu fournissent
   les espaces), nowrap, et corps dimensionné en vw pour remplir la largeur sur
   une seule ligne. Titre long (43 caractères) → la taille reste plafonnée.
   Retirer « hero--title-1l » pour repasser au titre multi-lignes. */
@media (min-width: 981px) {
  .hero--title-1l .hero__title {
    white-space: nowrap;
    /* Pleine largeur viewport : la ligne se centre sur l'écran sans être bridée
       par le .shell (≈1232px) → plus de coupe de « PHYSIQUE » à droite sur les
       grands écrans. La taille reste plafonnée pour garder une marge latérale. */
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    text-align: center;
    font-size: clamp(1.7rem, 4.6vw, 5rem);
  }
  .hero--title-1l .hero__title .ht-grp    { display: inline; }
  .hero--title-1l .hero__title .ht-grp--2 { margin-top: 0; }
  .hero--title-1l .hero__title br         { display: none; }
}

/* Écrans peu hauts (laptops 13"/15") — le hero est plafonné en hauteur
   (max-height: 100svh - nav). On resserre l'espacement vertical pour que le
   titre + sous-titre rentrent sans être rognés par le haut. */
@media (min-width: 981px) and (max-height: 860px) {
  .hero__content { padding-block: 18px 16px; }
  .hero__inner { gap: 12px; }
  .hero__title-loc { margin-top: 0.35em; }
  .hero--title-cc .hero__title-loc { margin-top: clamp(0.8rem, 2.4vh, 1.5rem); }
}
/* Écrans très courts (≤740px) : on garde TOUT visible (titre + localité + chiffres
   disciplines/ans/coachs) en compactant l'espacement et la taille des chiffres,
   plutôt que de masquer la ligne de stats. */
@media (min-width: 981px) and (max-height: 740px) {
  .hero__content { padding-block: 10px; }
  .hero__inner { gap: 7px; }
  .hero--title-cc .hero__title-loc { margin-top: 2.5rem; }
  .hero__stats { margin-top: 2px; font-size: 0.72rem; }
  .hero__stats strong { font-size: 1.45rem; }
}

/* Responsive */
@media (max-width: 980px) {
  .hero {
    min-height: calc(100svh - var(--nav-h, 134px));
    max-height: calc(100svh - var(--nav-h, 134px));
  }
  .hero__title { font-size: clamp(2.2rem, 6.5vw, 4.4rem); }
  .hero__bottom-bar-track { font-size: 1.2rem; }
  .hero__bottom-bar-track span { padding: 0 20px; }
  .hero__stats { font-size: 0.7rem; }
  .hero__stats > span { padding: 0 14px; gap: 6px; }
  .hero__stats strong { font-size: 1.4rem; }
  .hero__content { padding-block: 32px 28px; }
}
@media (max-width: 640px) {
  /* Sur format portrait mobile, le viewport est très haut → la photo plein-bleed
     laisse un grand vide noir entre les personnages et le titre (flex-end).
     On centre le bloc texte verticalement pour qu'il remonte vers la photo,
     et on agrandit tous les éléments pour mieux occuper l'espace dispo. */
  .hero__content {
    justify-content: center;
    padding-block: 40px 40px;
  }
  .hero__inner { gap: 24px; }
  .hero__title {
    font-size: clamp(3rem, 13.5vw, 4.6rem);
    line-height: 1.12;
    transform: skewX(-3deg);
  }
  .hero__title-rule { width: 140px; height: 6px; }
  .hero__meta { font-size: 0.9rem; }
  .meta-sep { display: none; }
  .meta-line2 { display: block; margin-top: 12px; }
  /* Stats : grille 3 colonnes égales, chiffres plus gros */
  .hero__stats {
    font-size: 0.88rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    width: 100%;
    max-width: 440px;
  }
  .hero__stats > span {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 0 8px;
  }
  .hero__stats strong { font-size: 2.5rem; }
  .hero__stats > span + span::before {
    top: 50%;
    height: 56%;
    transform: translateY(-50%);
  }
}

/* ========== Marquee jaune ========== */
.marquee {
  background: var(--jaune);
  color: #0A0A0A;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  border-block: 1px solid rgba(0,0,0,0.12);
}
.marquee::-webkit-scrollbar { display: none; }
.marquee.is-dragging { cursor: grabbing; }
.marquee__track {
  display: flex;
  width: max-content;
  gap: 48px;
  white-space: nowrap;
  padding-block: 18px;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.marquee__track span {
  display: inline-flex;
  align-items: center;
  gap: 48px;
}
.marquee__track .star { display: none; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ========== Sections génériques ========== */
/* Chaque section = panneau éclairé façon poster (spot ambré / brume) */
section {
  padding-block: 100px;
  position: relative;
  isolation: isolate;
}
section > .shell { position: relative; z-index: 1; }
section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Halo de spot ambré + contre-jour teal — alterné par section */
  background:
    radial-gradient(ellipse 50% 70% at 88% 0%, rgba(217,162,39,0.10), transparent 60%),
    radial-gradient(ellipse 45% 60% at 6% 100%, rgba(38,150,140,0.07), transparent 60%);
}
/* Le hero a déjà sa propre ambiance — pas de double calque */
.hero::before { display: none; }
.hero + section::after { display: none; }
/* On inverse les côtés une section sur deux → rythme cinéma */
section:nth-of-type(even)::before {
  background:
    radial-gradient(ellipse 50% 70% at 10% 0%, rgba(217,162,39,0.09), transparent 60%),
    radial-gradient(ellipse 45% 60% at 94% 100%, rgba(38,150,140,0.07), transparent 60%);
}
/* Filet or en haut de section — bord de bannière (image 5) */
section + section::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--jaune-glow) 30%, rgba(217,162,39,0.5) 50%, var(--jaune-glow) 70%, transparent);
}
.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
}
.section-head .eyebrow {
  margin-bottom: 16px;
  position: relative;
  padding-bottom: 14px;
}
.section-head .eyebrow::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 54px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--jaune), transparent);
}
.section-head h2 {
  margin-bottom: 18px;
  transform: skewX(-5deg);
}
.section-head p { color: var(--ink-60); font-size: 1.02rem; }
/* Accent dégradé or façon logo « 2 » */
.accent {
  background: linear-gradient(170deg, #F2C94C, var(--jaune) 50%, var(--jaune-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ========== Disciplines grid ========== */
.disc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.disc-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}
.disc-card:hover {
  border-color: var(--jaune);
  transform: translateY(-6px);
  box-shadow:
    0 28px 56px -18px rgba(0,0,0,0.7),
    0 0 0 1px rgba(217,162,39,0.4),
    0 0 40px -8px rgba(217,162,39,0.28);
}
.disc-card__media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}
.disc-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* Étalonnage chaud/contrasté façon photos officielles */
  filter: contrast(1.08) saturate(1.05) brightness(0.92) sepia(0.10);
  transition: transform 0.6s ease, filter 0.5s ease;
}
/* Scrim sombre + teinte ambrée bas — lisibilité badges, look poster */
.disc-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 38%, rgba(8,7,4,0.78) 100%),
    radial-gradient(ellipse 80% 60% at 50% 120%, rgba(217,162,39,0.22), transparent 70%);
  transition: opacity 0.4s ease;
}
.disc-card:hover .disc-card__media img {
  transform: scale(1.07);
  filter: contrast(1.12) saturate(1.12) brightness(1) sepia(0.06);
}
.disc-card__badges {
  position: absolute;
  z-index: 2;
  bottom: 14px; left: 14px;
  display: flex; gap: 6px;
}
.badge {
  background: var(--jaune);
  color: #0A0A0A;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.badge--dark {
  background: rgba(10,10,10,0.85);
  color: var(--jaune);
  border: 1px solid var(--jaune);
}
.disc-card__body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.disc-card__body h3 {
  font-size: 1.4rem;
  text-transform: uppercase;
}
.disc-card__body p {
  color: var(--ink-60);
  font-size: 0.92rem;
  flex: 1;
  margin: 0;
}
.disc-card__more {
  color: var(--jaune);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  transition: gap 0.2s;
}
.disc-card__more:hover { gap: 14px; }
.disc-card__more::after { content: "→"; }

/* Cartes disciplines de l'accueil — carte entière cliquable vers sa page */
.disc-grid .disc-card { position: relative; cursor: pointer; }
.disc-grid .disc-card__more::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}
.disc-grid .disc-card:hover .disc-card__more { gap: 14px; }

/* ========== Carrousel disciplines (page boxe-thai, dernière section) ========== */
.disc-carousel {
  position: relative;
  /* Espace latéral pour les flèches au-dessus du défilement */
  padding: 0 0 4px;
}
.disc-carousel__track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 6px 2px 18px;
  /* Petit padding scroll pour que la flèche/scrim ne coupe pas la carte snappée */
  scroll-padding-left: 2px;
}
.disc-carousel__track::-webkit-scrollbar { display: none; }
.disc-carousel__track > .disc-card {
  flex: 0 0 calc((100% - 36px) / 3);
  scroll-snap-align: start;
  min-width: 0;
}
/* Boutons de navigation — cercles flottants centrés verticalement */
.disc-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--jaune);
  font-family: 'Antonio', sans-serif;
  font-size: 1.6rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,0.8);
}
.disc-carousel__btn:hover {
  border-color: var(--jaune);
  background: var(--jaune);
  color: #0A0A0A;
  box-shadow: 0 10px 24px -8px rgba(217,162,39,0.55);
}
.disc-carousel__btn[disabled] {
  opacity: 0.35;
  pointer-events: none;
}
.disc-carousel__btn--prev { left: -24px; }
.disc-carousel__btn--next { right: -24px; }

@media (max-width: 1100px) {
  .disc-carousel__btn--prev { left: 4px; }
  .disc-carousel__btn--next { right: 4px; }
}
@media (max-width: 980px) {
  .disc-carousel__track > .disc-card {
    flex: 0 0 calc((100% - 18px) / 2);
  }
}
@media (max-width: 640px) {
  .disc-carousel__track {
    gap: 14px;
    padding: 6px 0 16px;
  }
  .disc-carousel__track > .disc-card {
    flex: 0 0 calc(85% - 7px);
  }
  .disc-carousel__btn { width: 40px; height: 40px; font-size: 1.4rem; }
}

.center-cta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 48px;
}

/* ========== Services (fitness, coaching privé, transformation) ========== */
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
/* Grille 2 colonnes générique (horaires, encadrants…) */
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.service {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}
.service::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--jaune), transparent 70%);
  opacity: 0.35;
  transition: opacity 0.3s;
}
.service:hover {
  border-color: var(--jaune);
  transform: translateY(-6px);
  box-shadow:
    0 28px 56px -18px rgba(0,0,0,0.6),
    0 0 36px -10px rgba(217,162,39,0.25);
}
.service:hover::before { opacity: 1; }
.service__icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--jaune-soft);
  border: 1px solid var(--jaune-glow);
  color: var(--jaune);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.service__icon svg { width: 26px; height: 26px; }
.service__tag {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jaune);
}
.service h3 {
  font-size: 1.45rem;
  text-transform: uppercase;
  font-family: 'Oswald', sans-serif;
  line-height: 1.05;
}
.service > p {
  color: var(--ink-60);
  font-size: 0.95rem;
  margin: 0;
  flex: 1;
}
.service ul {
  list-style: none;
  padding: 16px 0 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-top: 1px solid var(--border);
}
.service ul li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--ink-80);
}
.service ul li::before {
  content: "";
  width: 16px; height: 1px;
  background: var(--jaune);
  flex-shrink: 0;
}

/* ========== Access section ========== */
.access {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.access__map {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card);
  aspect-ratio: 4/3;
}
.access__map iframe { width: 100%; height: 100%; border: 0; filter: invert(0.92) hue-rotate(180deg); }
.access__map img { width: 100%; height: 100%; object-fit: cover; }

.access__info { display: flex; flex-direction: column; gap: 18px; }
.info-row {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.info-row__icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--jaune-soft);
  border: 1px solid var(--jaune-glow);
  color: var(--jaune);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.info-row__icon svg { width: 20px; height: 20px; }
.info-row__text { display: flex; flex-direction: column; gap: 2px; }
.info-row__text span { font-size: 0.78rem; color: var(--ink-60); text-transform: uppercase; letter-spacing: 0.12em; }
.info-row__text strong { font-size: 1.02rem; font-weight: 600; }

.hours {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.hours h4 {
  color: var(--jaune);
  margin-bottom: 14px;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
}
.hours ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.hours li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
  padding-block: 6px;
  border-bottom: 1px solid var(--border);
}
.hours li:last-child { border-bottom: 0; }
.hours li span:first-child { color: var(--ink-60); }
.hours li span:last-child { color: var(--ink); font-weight: 600; }
/* Note sous les tableaux d'horaires — en italique, centrée */
.hours__note {
  margin: 22px auto 0;
  text-align: center;
  font-style: italic;
  color: var(--ink-60);
  font-size: 0.95rem;
  max-width: 64ch;
}
/* Zone CTA horaires : essai gratuit (principal) + formules (secondaire) */
.hours__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 44px;
}
.abo-head {
  margin: 14px 0 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jaune);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
/* Filets dorés courts de chaque côté du titre de groupe */
.abo-head::before,
.abo-head::after {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--jaune), transparent);
}
/* Conteneur centré réutilisable (page tarifs) */
.abo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.abo-grid + .abo-head { margin-top: 36px; }
/* Sous-section « Formules par discipline » : sous-titres discipline secondaires */
.abo-disc { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.abo-disc .abo-head { margin-top: 28px; color: var(--ink); font-size: 0.72rem; }
.abo-disc > .abo-head:first-child { margin-top: 4px; }
.abo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  max-width: 920px;
}
.abo-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 640px;
}
/* Carte unique mise en avant (ex. Pass journée) — centrée, un peu plus large */
.abo-grid--solo {
  grid-template-columns: minmax(0, 460px);
  justify-content: center;
  max-width: none;
}
/* Ruban dédié (au lieu de « Populaire ») */
.abo-grid--solo .abo-card--feat::after { content: "Sans engagement"; }
/* Carte tarif seule dans son bloc → centrée */
.abo-grid:has(> .abo-card:only-child),
.abo-grid--2:has(> .abo-card:only-child) {
  grid-template-columns: minmax(0, 380px);
  justify-content: center;
}
.abo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 28px 24px 22px;
  background: linear-gradient(180deg, var(--card-2) 0%, var(--card) 60%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
  isolation: isolate;
}
/* Halo doré subtil en haut de chaque carte */
.abo-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217,162,39,0.55), transparent);
}
.abo-card:hover {
  border-color: var(--jaune);
  transform: translateY(-4px);
  box-shadow:
    0 22px 44px -20px rgba(0,0,0,0.7),
    0 0 30px -12px rgba(217,162,39,0.28);
}
/* Carte mise en avant — bord doré, fond légèrement teinté, ruban */
/* Carte « Populaire » : comme les autres cartes, distinguée par une bordure dorée
   + le ruban. Le liseré d'âge (box-shadow de .abo-card--age) s'affiche par-dessus. */
.abo-card--feat {
  border-color: var(--jaune);
}
.abo-card--feat::after {
  content: "Populaire";
  position: absolute;
  top: 14px; right: 14px;
  background: var(--jaune);
  color: #0A0A0A;
  padding: 4px 10px 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 4px;
  box-shadow: 0 4px 12px -2px rgba(217,162,39,0.4);
  z-index: 2;
}
/* ----- Code couleur par tranche d'âge (page Tarifs) ----- */
.abo-card--enfant { --age: #4F9E86; --age-bg: rgba(79,158,134,0.16); --age-bd: rgba(79,158,134,0.5); --age-tx: #74C2A8; }
.abo-card--ados   { --age: #4E86A8; --age-bg: rgba(78,134,168,0.16); --age-bd: rgba(78,134,168,0.5); --age-tx: #79AACB; }
.abo-card--adulte { --age: #D2553F; --age-bg: rgba(210,85,63,0.16);  --age-bd: rgba(210,85,63,0.5);  --age-tx: #E58168; }
/* Carte « Populaire » : SEUL le liseré passe en doré (cohérent avec la bordure or) ;
   le badge garde la couleur d'âge. Sélecteur à 2 classes → bat .abo-card--adulte. */
.abo-card--feat.abo-card--age { --liseret: var(--jaune); }
/* Liseré coloré à gauche de la carte (--liseret si défini, sinon couleur d'âge) */
.abo-card--age { box-shadow: inset 3px 0 0 var(--liseret, var(--age)); }
.abo-card--age:hover {
  box-shadow:
    inset 3px 0 0 var(--liseret, var(--age)),
    0 22px 44px -20px rgba(0,0,0,0.7),
    0 0 30px -12px rgba(217,162,39,0.28);
}
/* Badge âge (pastille en haut de carte) */
.abo-card__age {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px 4px;
  border-radius: 999px;
  background: var(--age-bg);
  color: var(--age-tx);
  border: 1px solid var(--age-bd);
}
.abo-card__age i { width: 7px; height: 7px; border-radius: 50%; background: var(--age); }
.abo-card__price {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  background: linear-gradient(170deg, #F2C94C 0%, var(--jaune) 55%, var(--jaune-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.01em;
}
.abo-card__price small {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-60);
  margin-left: 4px;
  letter-spacing: 0.02em;
  -webkit-text-fill-color: var(--ink-60);
}
.abo-card__term {
  font-size: 0.76rem;
  color: var(--ink-60);
  line-height: 1.4;
  margin-top: -2px;
}
.abo-card__label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  align-self: stretch;
}
.abo-card__desc {
  font-size: 0.82rem;
  color: var(--ink-60);
  line-height: 1.5;
  flex: 1;
}
.abo-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.abo-card__list li {
  position: relative;
  padding-left: 18px;
}
.abo-card__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--jaune);
}
.abo-card__cta {
  margin-top: 8px;
  align-self: stretch;
  text-align: center;
  padding: 12px 16px;
  border-radius: 10px;
  background: linear-gradient(165deg, var(--jaune-2), var(--jaune) 55%, var(--jaune-deep));
  color: #0A0A0A;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px -8px rgba(217,162,39,0.5), 0 0 0 1px rgba(242,201,76,0.25) inset;
  transition: filter .2s ease, transform .2s ease;
}
.abo-card:hover .abo-card__cta {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.abo-note {
  margin: 12px 0 0;
  font-size: 0.8rem;
  color: var(--ink-40);
  text-align: center;
}
@media (max-width: 760px) {
  .abo-grid { grid-template-columns: 1fr; max-width: 420px; }
  .abo-card { padding: 24px 20px 20px; }
  .abo-card__price { font-size: 2.3rem; }
}
/* Niveau du créneau — petit tag or */
.hours__lvl {
  font-style: normal;
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jaune);
  margin-left: 8px;
}

.access__cta {
  margin-top: 8px;
}

/* ========== FAQ ========== */
.faq {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq__item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s;
}
.faq__item:hover { border-color: var(--border-2); }
.faq__item[open] { border-color: var(--jaune); background: var(--card-2); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  cursor: pointer;
  font-weight: 500;
  font-size: 1.02rem;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  font-size: 1.5rem;
  color: var(--jaune);
  font-weight: 300;
  transition: transform 0.3s;
  line-height: 1;
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__a {
  padding: 0 24px 22px;
  color: var(--ink-60);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ========== Contact ========== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.contact-left { display: flex; flex-direction: column; gap: 28px; }
.contact-left h2 { margin-bottom: 0; }
.contact-left p { color: var(--ink-60); max-width: 46ch; }
.contact-channels { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }

.contact-form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 36px 32px;
  position: relative;
  overflow: hidden;
}
.contact-form::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--jaune), transparent);
  opacity: 0.4;
}
.contact-form h3 {
  font-size: 1.5rem;
  margin-bottom: 22px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.01em;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.field label {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-80);
}
.field input, .field textarea {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--ink);
  font: inherit;
  transition: border-color 0.2s, background 0.2s;
  outline: none;
}
.field input:focus, .field textarea:focus {
  border-color: var(--jaune);
  background: var(--bg-3);
}
.field textarea { resize: vertical; min-height: 120px; }

/* ===== Formulaire Contact Form 7 — rendu propre dans .contact-form ===== */
.contact-form .wpcf7-form-control-wrap { display: block; width: 100%; }
.contact-form .field input,
.contact-form .field textarea { width: 100%; }
.contact-form .field textarea,
.contact-form textarea { min-height: 72px; }
.contact-form p { margin: 0; }
.contact-form .wpcf7-submit { width: 100%; cursor: pointer; margin-top: 8px; }
.contact-form .wpcf7-not-valid-tip { color: #ff7a7a; font-size: 0.8rem; margin-top: 6px; display: block; }
.contact-form .wpcf7-spinner { margin: 14px auto 0; display: block; }
.contact-form .wpcf7-response-output {
  margin: 18px 0 0 !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  border-width: 1px !important;
  font-size: 0.9rem;
}
.contact-form form.sent .wpcf7-response-output {
  border-color: var(--jaune) !important;
  color: var(--jaune);
  background: rgba(217, 162, 39, 0.08);
}
.contact-form form.invalid .wpcf7-response-output,
.contact-form form.unaccepted .wpcf7-response-output {
  border-color: #ff7a7a !important;
  color: #ff7a7a;
  background: rgba(255, 122, 122, 0.06);
}

/* ===== Présentation coach (bio) — pages Fitness ===== */
.fc-bio {
  margin-top: 32px;
  padding: 26px 30px;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--jaune);
  border-radius: var(--radius);
  color: var(--ink-70);
  line-height: 1.75;
  font-size: 0.98rem;
}
.fc-bio strong { color: var(--ink); }

/* Bande « expertise » étalée en largeur, sous le bloc feature */
.fc-expertise {
  margin-top: 30px;
  padding: 22px 28px;
  background: linear-gradient(180deg, var(--card-2) 0%, var(--card) 70%);
  border: 1px solid var(--border);
  border-left: 3px solid var(--jaune);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.fc-expertise__label {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--jaune);
  flex-shrink: 0;
}
.fc-expertise__list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 26px;
}
.fc-expertise__list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--ink-70);
}
.fc-expertise__list li::before {
  content: "";
  position: absolute; left: 0; top: 6px;
  width: 8px; height: 8px;
  background: var(--jaune);
  transform: rotate(45deg);
}
@media (max-width: 900px) { .fc-expertise__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .fc-expertise { flex-direction: column; align-items: flex-start; gap: 16px; }
  .fc-expertise__list { grid-template-columns: 1fr; }
}

/* Présentation coach en grille de cartes (1 carte par intitulé) */
.fc-cards {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
  gap: 20px;
}
.fc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 28px 28px;
  background: linear-gradient(180deg, var(--card-2) 0%, var(--card) 65%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
/* Halo doré en haut (signature du site) */
.fc-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217,162,39,0.55), transparent);
}
.fc-card:hover {
  border-color: var(--jaune);
  transform: translateY(-4px);
  box-shadow: 0 24px 46px -22px rgba(0,0,0,0.72), 0 0 34px -16px rgba(217,162,39,0.3);
}
.fc-card__num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--jaune);
  opacity: 0.85;
}
.fc-card h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.12rem;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.28;
  letter-spacing: 0.01em;
  margin: 0;
}
.fc-card h3::after {
  content: "";
  display: block;
  width: 36px; height: 3px;
  margin-top: 14px;
  background: linear-gradient(90deg, var(--jaune), var(--jaune-2));
  border-radius: 2px;
}
.fc-card p { color: var(--ink-70); font-size: 0.93rem; line-height: 1.65; margin: 0; }
.fc-card p + p { margin-top: 8px; }
.fc-card ul { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.fc-card li {
  position: relative;
  padding-left: 24px;
  color: var(--ink-70);
  font-size: 0.92rem;
  line-height: 1.5;
}
.fc-card li::before {
  content: "";
  position: absolute; left: 2px; top: 7px;
  width: 8px; height: 8px;
  background: var(--jaune);
  transform: rotate(45deg);
}
@media (max-width: 900px) { .fc-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fc-cards { grid-template-columns: 1fr; } }

/* ========== Footer ========== */
.footer {
  background: #060606;
  border-top: 1px solid var(--border);
  padding: 64px 0 28px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
}
.footer__logo {
  height: 56px;
  width: auto;
  margin-bottom: 18px;
  display: block;
}
.footer__brand p { color: var(--ink-60); max-width: 38ch; font-size: 0.92rem; }
.footer__social {
  display: flex; gap: 10px; margin-top: 22px;
}
.footer__social a {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-60);
  transition: all 0.2s;
}
.footer__social a:hover { color: var(--jaune); border-color: var(--jaune); }
.footer__social svg { width: 26px; height: 26px; }

/* Couleurs d'origine des réseaux : Facebook en bleu officiel, conservé au survol.
   (Instagram utilise un dégradé défini directement dans son SVG.) */
a[aria-label="Facebook"],
a[aria-label="Facebook"]:hover { color: #1877f2 !important; }

/* Bloc « Suivez-nous » de la section Contact (accueil) — icônes réseaux agrandies. */
.contact-social { margin-top: 26px; }
.contact-social__label {
  display: block; margin-bottom: 12px;
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-60);
}
.contact-social__icons { display: flex; gap: 12px; }
.contact-social__icons a {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-60);
  transition: all 0.2s;
}
.contact-social__icons a:hover { color: var(--jaune); border-color: var(--jaune); }
.contact-social__icons svg { width: 24px; height: 24px; }

.footer__col h4 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-bottom: 18px;
  font-family: 'Inter', sans-serif;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__col a, .footer__col li { color: var(--ink-60); font-size: 0.92rem; transition: color 0.2s; }
.footer__col a:hover { color: var(--jaune); }
.footer__col li svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--jaune); margin-right: 6px; }

.footer__bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--ink-40);
}
.footer__bottom a { color: var(--ink-40); }
.footer__bottom a:hover { color: var(--jaune); }
.footer__legal { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
/* Crédit Ezer : sur la même ligne que « Mentions légales » (dans .footer__legal). */
.footer__credit {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--ink-40);
}
.footer__credit a {
  color: var(--jaune);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.footer__credit a:hover { opacity: 0.8; text-decoration: underline; }

/* ========== Page head (intérieures) ========== */
.page-head {
  position: relative;
  padding-block: 110px 90px;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--border);
}
.page-head__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  filter: brightness(0.4) contrast(1.05);
}
.page-head__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10,10,10,0.6), rgba(10,10,10,0.95));
}
/* Variante hero "coach mis en avant" : split — texte propre à gauche,
   portrait encadré du coach à droite. (n'affecte que cette page) */
.page-head--coach { padding-block: 88px 78px; }
.page-head--coach .page-head__bg,
.page-head--coach .page-head__overlay { display: none; }
.page-head__split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.page-head--coach .page-head__inner { max-width: 620px; }
.page-head--coach h1 { font-size: clamp(2.4rem, 4.4vw, 4rem); }

/* Desktop : photo seule en colonne droite (hero compact), légende
   en surimpression — nom, rôle puis bio « sous son nom ». */
.page-head__portrait {
  position: relative;
  margin: 0;
}
.page-head__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 540px;
  object-fit: cover;
  object-position: center 14%;
  display: block;
  filter: contrast(1.05) saturate(1.04);
  /* L'image se fond dans le hero : ses bords se dissolvent dans le fond */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 22%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 22%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 100%);
  mask-composite: intersect;
}
.page-head__portrait::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 38%, rgba(8,7,4,0.55) 60%, rgba(8,7,4,0.95) 90%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 90%, transparent 100%);
}
.page-head__portrait figcaption {
  position: absolute; left: 26px; right: 26px; bottom: 24px; z-index: 1;
  display: flex; flex-direction: column; gap: 8px;
}
.page-head__portrait figcaption strong {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 2.4rem;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.page-head__role {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jaune);
}
.page-head__bio {
  color: rgba(255,255,255,0.82);
  font-size: 0.9rem;
  line-height: 1.5;
}
.page-head__portrait figcaption .page-head__bio strong {
  font-family: 'Inter', sans-serif;
  text-transform: none;
  font-size: inherit;
  letter-spacing: normal;
  line-height: inherit;
  color: #fff;
}
/* Heros « coach » (pages discipline + Fitness) : sur portables 13"/14" (hauteur de
   viewport réduite), on compacte le padding et on plafonne la photo à la hauteur
   disponible pour que tout le hero tienne à l'écran sans scroller. */
@media (min-width: 981px) and (max-height: 860px) {
  .page-head--coach { padding-block: 44px 36px; }
  .page-head__portrait img { max-height: calc(100svh - 260px); }
}
@media (min-width: 981px) and (max-height: 720px) {
  .page-head--coach { padding-block: 32px 28px; }
  .page-head--coach h1 { font-size: clamp(2rem, 3.4vw, 3rem); }
  .page-head__split { gap: 40px; }
  .page-head__portrait img { max-height: calc(100svh - 230px); }
}
@media (max-width: 980px) {
  /* Hero mobile compacté : photo (bandeau) + encart sous l'image, puis pitch/CTA */
  .page-head--coach { padding-block: 32px 50px; }
  .page-head__split { grid-template-columns: 1fr; gap: 40px; }
  .page-head--coach .page-head__inner { max-width: 100%; }
  .page-head--coach h1 { font-size: clamp(2.1rem, 8.5vw, 3rem); }
  .page-head__portrait { order: -1; }
  .page-head__portrait img { aspect-ratio: 16 / 11; max-height: none; object-position: center 18%; }
  .page-head__portrait::after { display: none; }
  /* La légende passe sous l'image (bandeau trop court pour la superposer) */
  .page-head__portrait figcaption {
    position: static; left: auto; right: auto; bottom: auto;
    margin-top: 16px; padding-left: 16px; border-left: 3px solid var(--jaune);
  }
  .page-head__portrait figcaption strong { font-size: 2rem; }
  .page-head__cta { margin-top: 22px; gap: 12px; }
  .page-head__rea { margin-top: 20px; gap: 8px 18px; }
}
@media (max-width: 480px) {
  .page-head__portrait figcaption strong { font-size: 1.6rem; }
}

.page-head__inner { max-width: 820px; }
.page-head h1 { margin: 18px 0 22px; }
.page-head p { color: var(--ink-60); max-width: 60ch; font-size: 1.05rem; }
.page-head p strong { color: #fff; font-weight: 700; }
/* Hero : groupe de CTA + bandeau réassurance */
.page-head__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}
.page-head__rea {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.82);
}
.page-head__rea li { display: inline-flex; align-items: center; gap: 9px; }
.page-head__rea li::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--jaune);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.page-head__coach {
  margin: 26px 0 0;
  padding-left: 16px;
  border-left: 3px solid var(--jaune);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-60);
  max-width: 56ch;
}
.page-head__coach span {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jaune);
  margin-bottom: 5px;
}
.page-head__coach strong { color: var(--ink); }

@media (max-width: 560px) {
  .page-head__cta { flex-direction: column; align-items: stretch; }
  .page-head__cta .btn { width: 100%; }
}

/* ========== Pillars (le club) ========== */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.pillar {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 0.3s;
}
.pillar:hover { border-color: var(--jaune); transform: translateY(-4px); }
.pillar__num {
  font-family: 'Oswald', sans-serif;
  font-size: 2.2rem;
  color: var(--jaune);
  line-height: 1;
}
.pillar h3 { font-size: 1.3rem; text-transform: uppercase; }
.pillar p { color: var(--ink-60); font-size: 0.95rem; flex: 1; margin: 0; }

/* ========== Coaches ========== */
.coaches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* Grille 2-colonnes contenant des coachs (pages discipline) : on plafonne
   la largeur pour éviter des cards monumentales sur écrans 1280px+. */
.cols-2:has(> .coach) { max-width: 860px; margin: 0 auto; gap: 20px; }
/* Layout horizontal compact : avatar carré à gauche, bio à droite.
   Avantage : photos portrait ET paysage se croppent bien en carré centré
   sur le visage (object-position bias vers le haut). */
.coach {
  position: relative;
  background: linear-gradient(180deg, var(--card-2) 0%, var(--card) 70%);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  gap: 22px;
  padding: 22px;
  align-items: center;
}
.coach:hover {
  border-color: var(--jaune);
  transform: translateY(-5px);
  box-shadow: 0 24px 48px -22px rgba(0,0,0,0.7), 0 0 30px -14px rgba(217,162,39,0.28);
}
.coach__photo {
  flex: 0 0 124px;
  width: 124px;
  height: 124px;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--border-2);
  box-shadow: 0 0 0 0 rgba(217,162,39,0);
  transition: box-shadow 0.3s ease;
}
.coach:hover .coach__photo { box-shadow: 0 0 0 2px rgba(217,162,39,0.45); }
.coach__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  transition: transform 0.45s ease;
}
.coach:hover .coach__photo img { transform: scale(1.06); }
.coach__body {
  flex: 1;
  min-width: 0;
  padding: 0;
}
.coach__role {
  display: inline-block;
  font-size: 0.68rem;
  color: var(--jaune);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
  padding: 4px 11px;
  border: 1px solid rgba(217,162,39,0.32);
  border-radius: 999px;
  background: rgba(217,162,39,0.08);
}
.coach h3 { font-size: 1.22rem; text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 8px; }
.coach p { color: var(--ink-60); font-size: 0.86rem; line-height: 1.55; margin: 0; }
.coach p strong { color: var(--ink); }
@media (max-width: 760px) {
  .cols-2:has(> .coach) { max-width: 100%; }
  .coach { padding: 16px; gap: 16px; }
  .coach__photo { flex: 0 0 96px; width: 96px; height: 96px; }
  .coach h3 { font-size: 1.08rem; }
}

/* ========== Formules (tarifs) ========== */
.formules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
/* Second bloc tarifs (étudiant / ado) — 2 colonnes desktop,
   se réduit via les media queries .formules ci-dessous (mobile = 1 col). */
.formules--split { grid-template-columns: repeat(2, 1fr); }
.formule {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  transition: all 0.3s;
}
.formule:hover { transform: translateY(-4px); }
.formule--feat {
  background: linear-gradient(180deg, rgba(255,204,0,0.06), var(--card));
  border-color: var(--jaune);
  box-shadow: 0 24px 48px -20px rgba(255,204,0,0.3);
}
.formule__ribbon {
  position: absolute;
  top: -12px; left: 24px;
  background: var(--jaune);
  color: #0A0A0A;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 6px;
}
.formule__name {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-60);
  font-weight: 600;
}
.formule h3 {
  font-size: 1.8rem;
  text-transform: uppercase;
  font-family: 'Oswald', sans-serif;
}
.formule__desc { color: var(--ink-60); font-size: 0.95rem; }
.formule__includes {
  list-style: none;
  padding: 0; margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.formule__includes li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.92rem;
  color: var(--ink-80);
}
.formule__includes li::before {
  content: "";
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFCC00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ========== Planning table ========== */
.planning {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.planning__head, .planning__row {
  display: grid;
  grid-template-columns: 140px repeat(7, 1fr);
}
.planning__head {
  background: var(--card-2);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-60);
  border-bottom: 1px solid var(--border);
}
.planning__head > div, .planning__row > div {
  padding: 14px 10px;
  border-right: 1px solid var(--border);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
}
.planning__head > div:last-child, .planning__row > div:last-child { border-right: 0; }
.planning__row { border-bottom: 1px solid var(--border); }
.planning__row:last-child { border-bottom: 0; }
.planning__row > div:first-child {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  color: var(--ink-80);
  background: rgba(0,0,0,0.2);
}
.slot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  width: 100%;
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1.25;
}
.slot strong { font-weight: 700; font-size: 0.82rem; }
.slot span { font-size: 0.72rem; opacity: 0.75; }
.slot--combat { background: var(--jaune); color: #0A0A0A; }
.slot--fit    { background: var(--card-2); color: var(--ink); border: 1px solid var(--border); }
.slot--kids   { background: rgba(255,204,0,0.22); color: var(--jaune); border: 1px solid rgba(255,204,0,0.35); }

.planning-legend {
  display: flex; flex-wrap: wrap; gap: 24px; margin-top: 20px;
  font-size: 0.85rem; color: var(--ink-60);
}
.planning-legend span { display: inline-flex; align-items: center; gap: 8px; }
.planning-legend i {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 4px;
}
.legend--combat { background: var(--jaune); }
.legend--fit    { background: var(--card-2); border: 1px solid var(--border); }
.legend--kids   { background: rgba(255,204,0,0.22); border: 1px solid rgba(255,204,0,0.35); }

/* ===== Planning par jour (refonte 2026 — calqué sur les affiches officielles) ===== */
.planning-legend--top { margin-top: 0; margin-bottom: 20px; }
.planning-week { display: flex; flex-direction: column; gap: 14px; }
.planning-day {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  align-items: start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.planning-day > h3 {
  margin: 0;
  padding-top: 6px;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--jaune);
}
.planning-day__slots { display: flex; flex-wrap: wrap; gap: 10px; }
.planning-day__slots .slot { width: auto; min-width: 148px; max-width: 230px; }
.slot__time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.9 !important;
  margin-bottom: 2px;
}
@media (max-width: 640px) {
  .planning-day { grid-template-columns: 1fr; gap: 10px; }
  .planning-day__slots .slot { flex: 1 1 140px; max-width: none; }
}

/* ===== Planning — code couleur par discipline (cohérent thème sombre & doré) ===== */
:root {
  --disc-thai:      #D9A227; /* doré (discipline phare) */
  --disc-mma:       #D2553F; /* terracotta */
  --disc-krav:      #4E86A8; /* bleu acier */
  --disc-anglaise:  #9B6FB0; /* violet sourd */
  --disc-grappling: #4F9E86; /* vert sapin */
  --disc-luta:      #E08A3C; /* orange */
  --disc-lutte:     #C76B9C; /* rose sourd */
  --disc-fitness:   #8A8F9A; /* ardoise */
}
.slot--thai      { --c: var(--disc-thai); }
.slot--mma       { --c: var(--disc-mma); }
.slot--krav      { --c: var(--disc-krav); }
.slot--anglaise  { --c: var(--disc-anglaise); }
.slot--grappling { --c: var(--disc-grappling); }
.slot--luta      { --c: var(--disc-luta); }
.slot--lutte     { --c: var(--disc-lutte); }
.slot--fitness   { --c: var(--disc-fitness); }

.planning-day__slots .slot {
  background: var(--card);
  background: color-mix(in srgb, var(--c, var(--border-2)) 14%, var(--card));
  border: 1px solid var(--border);
  border-color: color-mix(in srgb, var(--c, var(--border-2)) 30%, var(--border));
  border-left: 4px solid var(--c, var(--border-2));
  color: var(--ink);
}
.planning-day__slots .slot strong { color: var(--ink); }
.planning-day__slots .slot .slot__time { color: var(--c, var(--ink-60)); opacity: 1 !important; }
.planning-day__slots .slot > span:not(.slot__time) { color: var(--ink-60); opacity: 1; }

/* Légende couleurs compacte — pastilles au-dessus du planning */
.planning-legend--disc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 22px;
}
.disc-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 11px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-80);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.disc-chip__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c, var(--jaune));
  flex: none;
}

/* Disciplines en bref — cartes descriptives */
.planning-disc-head {
  margin: 40px 0 16px;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.05rem;
  color: var(--ink);
}
.planning-disciplines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
}
.disc-card-k {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.disc-card-k:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--c, var(--jaune)) 55%, var(--border));
  box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--c, var(--jaune)) 55%, transparent);
}
.disc-card-k__badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: #0A0A0A;
  background: var(--c, var(--jaune));
}
.disc-card-k__body h4 {
  margin: 3px 0 6px;
  font-size: 1rem;
  color: var(--c, var(--ink));
}
.disc-card-k__body p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-60);
}

/* ========== Image gallery (boxe-thai) ========== */
.gallery {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 18px;
}
.gallery figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 1/1;
}
.gallery figure:first-child {
  aspect-ratio: 4/5;
  grid-row: span 2;
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s;
}
/* Portrait Muay Thai (source 2/3) cadrée en 4/5 : recentrer un peu vers le bas
   pour garder le pied et la frappe en cadre, perdre les néons du plafond. */
.gallery figure:first-child img { object-fit: cover; object-position: center 30%; }
.gallery figure:hover img { transform: scale(1.05); }

/* ========== Documents à télécharger (certificats) ========== */
.doc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.doc-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.doc-card__preview {
  display: block;
  background: #ececea;
  padding: 22px 22px 0;
}
.doc-card__preview img {
  display: block;
  width: 100%;
  height: 380px;
  object-fit: contain;
  object-position: center top;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,0.30));
  transition: transform .4s ease;
}
.doc-card__preview:hover img { transform: translateY(-5px); }
.doc-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  padding: 24px 26px 28px;
}
.doc-card__tag {
  align-self: flex-start;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: #0A0A0A;
  background: var(--jaune);
  padding: 4px 10px;
  border-radius: 4px;
}
.doc-card h3 { font-size: 1.4rem; text-transform: uppercase; }
.doc-card__body p { color: var(--ink-60); font-size: 0.95rem; margin: 0; flex: 1; }
.doc-card .btn { margin-top: 6px; align-self: flex-start; }
.doc-note { text-align: center; color: var(--ink-60); font-size: 0.95rem; margin-top: 34px; }
.doc-note a { color: var(--jaune); }
@media (max-width: 720px) {
  .doc-grid { grid-template-columns: 1fr; }
  .doc-card__preview img { height: 320px; }
}

/* ========== CTA Band ========== */
.cta-band {
  position: relative;
  background: var(--jaune);
  color: #0A0A0A;
  padding-block: 80px;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.cta-band__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
}
.cta-band h2 { color: #0A0A0A; }
.cta-band p { font-size: 1.05rem; max-width: 50ch; }
.cta-band .btn--dark {
  background: #0A0A0A;
  color: var(--jaune);
  border: 0;
}
.cta-band .btn--dark:hover { background: #1A1A1A; }

/* ========== Disciplines list (le-club) ========== */
.disc-list {
  border-top: 1px solid var(--border);
}
.disc-row {
  display: grid;
  grid-template-columns: 60px 1fr 160px 140px 40px;
  align-items: center;
  gap: 24px;
  padding: 24px 8px;
  border-bottom: 1px solid var(--border);
  transition: all 0.25s;
  color: var(--ink);
}
.disc-row:hover { background: var(--card); padding-inline: 18px; }
.disc-row__num { font-family: 'Oswald', sans-serif; color: var(--jaune); }
.disc-row__title {
  font-family: 'Oswald', sans-serif;
  font-size: 1.4rem;
  text-transform: uppercase;
  font-weight: 600;
}
.disc-row__title em { font-style: normal; color: var(--ink-60); font-weight: 400; }
.disc-row__age, .disc-row__sessions {
  font-size: 0.85rem;
  color: var(--ink-60);
  letter-spacing: 0.04em;
}
.disc-row__arrow { color: var(--jaune); font-size: 1.4rem; text-align: right; transition: transform 0.2s; }
.disc-row:hover .disc-row__arrow { transform: translateX(6px); }

/* ========== Steps ========== */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.step__num {
  font-family: 'Oswald', sans-serif;
  font-size: 2rem;
  color: var(--jaune);
}
.step h3 { font-size: 1.1rem; text-transform: uppercase; }
.step p { color: var(--ink-60); font-size: 0.92rem; margin: 0; }

/* ========== Responsive ========== */
@media (max-width: 980px) {
  .menu-toggle { display: flex; }
  /* Cluster droit (social + CTA) retiré du header → CTA déplacé dans le menu */
  .site-header__right { display: none; }

  /* ---------- Tiroir de navigation mobile ---------- */
  /* position:fixed + 100vw → pleine largeur viewport, indépendant de
     .shell / .site-header__inner (max-width + padding).
     --menu-top est défini en JS sur setOpen(true) = position courante du
     bas du header sticky (varie selon scroll). Fallback --nav-h (134px). */
  .nav {
    display: flex;
    position: fixed;
    /* .site-header est le bloc conteneur du fixed (à cause de backdrop-filter),
       donc top:100% = exactement le bas du header, sans dépendre de --menu-top. */
    top: 100%;
    left: 0;
    right: 0;
    width: 100vw;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 24px 48px -12px rgba(0,0,0,0.75);
    padding: 6px 0 14px;
    height: calc(100svh - var(--menu-top, var(--nav-h, 134px)));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    /* état fermé */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav > a,
  .nav-dd > a {
    display: flex;
    width: 100%;
    padding: 15px 24px;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    border-bottom: 1px solid var(--border);
  }
  .nav-dd { position: static; }
  /* Sous-menus = accordéon repliable, fermé par défaut */
  .nav-dd__menu {
    position: static;
    opacity: 1;
    /* Hérite de l'état du tiroir .nav : fermé (visibility:hidden / pointer-events:none)
       → le sous-menu pré-ouvert (is-sub-open) ne capte AUCUN tap. Sinon, invisible mais
       cliquable, il se superpose aux boutons du hero et détourne le tap vers un lien du menu. */
    visibility: inherit;
    pointer-events: inherit;
    transform: none;
    min-width: 0;
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--bg-3);
    display: flex;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height .3s ease, padding .25s ease;
  }
  /* Neutralise le dropdown desktop (hover/focus garde un translateX(-50%)
     plus spécifique qui décalait le sous-menu hors écran) */
  .nav-dd:hover > .nav-dd__menu,
  .nav-dd:focus-within > .nav-dd__menu {
    transform: none;
    max-height: 0;
    padding: 0;
  }
  /* Ouverture pilotée UNIQUEMENT par la classe accordéon */
  .nav-dd.is-sub-open > .nav-dd__menu,
  .nav-dd.is-sub-open:hover > .nav-dd__menu,
  .nav-dd.is-sub-open:focus-within > .nav-dd__menu {
    transform: none;
    max-height: 80vh;
    padding: 2px 0 6px;
  }
  .nav-dd__menu::before,
  .nav-dd__menu::after { display: none; }
  .nav-dd__menu a {
    padding: 13px 24px 13px 42px;
    font-size: 0.78rem;
    white-space: normal;
  }
  .nav-dd__menu a:hover { padding-left: 46px; }
  /* Flèche d'accordéon : visible, alignée à droite, pivote à l'ouverture */
  .nav-dd > a { justify-content: space-between; }
  .nav-dd > a .nav-arrow {
    display: inline-block;
    margin-left: auto;
    font-size: 0.9em;
    transition: transform .25s ease;
  }
  .nav-dd.is-sub-open > a { color: var(--jaune); }
  .nav-dd.is-sub-open > a .nav-arrow { transform: rotate(180deg); }

  /* Bouton « Pass journée » intégré au menu mobile, pleine largeur */
  .nav .nav__cta-m {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 16px 18px 0;
    padding: 15px 20px;
    background: var(--jaune);
    color: #0A0A0A;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 0;
    white-space: nowrap;
  }
  .nav .nav__cta-m:hover { background: var(--jaune-2); }

  /* Bouton « Appelez-nous » intégré au menu, contour pour différencier du Pass */
  .nav a.nav__phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;                /* annule le width:100% de .nav>a (sinon +marges = débordement) */
    margin: 10px 18px 4px;
    padding: 15px 20px;
    background: transparent;
    color: var(--jaune);
    border: 1px solid var(--jaune);
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .nav a.nav__phone:hover { background: var(--jaune); color: #0A0A0A; }

  /* Réseaux sociaux dans le menu mobile */
  .nav .nav__social {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 16px 18px 4px;
  }
  .nav .nav__social a {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--card);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-60);
    transition: all .2s;
  }
  .nav .nav__social a:hover { color: var(--jaune); border-color: var(--jaune); }
  .nav .nav__social svg { width: 30px; height: 30px; }

  /* hamburger -> croix */
  .menu-toggle span { transition: transform .25s ease, opacity .2s ease; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* ---------- Grilles ---------- */
  .disc-grid { grid-template-columns: repeat(2, 1fr); }
  .services { grid-template-columns: 1fr; gap: 18px; }
  .access { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .pillars, .coaches { grid-template-columns: 1fr; }
  .cols-2 { grid-template-columns: 1fr; }
  .formules { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .cta-band__inner { grid-template-columns: 1fr; gap: 28px; }
  .planning { overflow-x: auto; }
  .planning__head, .planning__row { min-width: 900px; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery figure:first-child { aspect-ratio: 1/1; grid-row: auto; grid-column: span 2; }
  .disc-row { grid-template-columns: 40px 1fr 30px; }
  .disc-row__age, .disc-row__sessions { display: none; }
}

@media (max-width: 640px) {
  section { padding-block: 72px; }
  .shell { padding: 0 18px; }
  .brand img { height: 40px; }
  .disc-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .hero__title-loc { margin-left: 0.4em; }
  .topbar__hours { display: none; }
  .topbar__addr { font-size: 0.75rem; }
  .footer__top { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .gallery figure, .gallery figure:first-child { grid-column: auto; grid-row: auto; aspect-ratio: auto; }
  .gallery img { height: auto; }
  .contact-form { padding: 28px 22px; }
  .section-head { margin-bottom: 44px; }
  .center-cta .btn, .btn--lg { width: 100%; }
}

@media (max-width: 480px) {
  .shell { padding: 0 16px; }
  section { padding-block: 60px; }
  .brand img { height: 38px; }
  .topbar { font-size: 0.72rem; }
  .topbar__inner { justify-content: center; }
  h1 { font-size: clamp(2rem, 11vw, 2.8rem); }
  h2 { font-size: clamp(1.85rem, 9vw, 2.5rem); }
  h3 { font-size: 1.25rem; }
  .section-head { margin-bottom: 38px; }
  .nav-cta { padding: 9px 13px; font-size: 0.76rem; }
  .hero {
    min-height: calc(100svh - var(--nav-h, 134px));
    max-height: calc(100svh - var(--nav-h, 134px));
  }
  .hero__title { font-size: clamp(2.7rem, 12.5vw, 3.8rem); line-height: 1.1; }
  .hero__meta { font-size: 0.85rem; }
  .hero__stats { font-size: 0.84rem; }
  .hero__stats > span { padding: 0 8px; gap: 7px; }
  .hero__stats strong { font-size: 2.3rem; }
  .hero__bottom-bar-track { font-size: 1.05rem; }
  .hero__bottom-bar-track span { padding: 0 16px; }
  .hero__content { padding-block: 30px 26px; }
  .disc-card__body { padding: 20px 18px 22px; }
  .service { padding: 30px 22px 28px; }
  .info-row { padding: 16px 16px; }
}

/* ========== Reveal animation ========== */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========== Fitness & Coaching — feature rows ========== */
.fc-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.fc-feature + .fc-feature { margin-top: 30px; }
.fc-feature__media { position: relative; border-radius: 14px; overflow: hidden; }
.fc-feature__media img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s ease; }
.fc-feature__media:hover img { transform: scale(1.04); }
/* Variante deux photos côte à côte (ex. Cours collectifs : Fassel + Grégory). */
.fc-feature__media--duo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fc-feature__media--duo img { aspect-ratio: 3 / 4; }
.fc-feature__media::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  border-radius: 14px; pointer-events: none;
}
.fc-feature__body h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0 0 14px; line-height: 1.1; }
.fc-feature__body > p { margin: 0 0 18px; }
.fc-feature__body ul { list-style: none; margin: 0 0 22px; padding: 0; }
.fc-feature__body ul li { position: relative; padding: 0 0 0 26px; margin-bottom: 10px; }
.fc-feature__body ul li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 10px; height: 10px; background: var(--jaune); transform: rotate(45deg);
}
.fc-feature--rev .fc-feature__media { order: 2; }
@media (max-width: 860px) {
  .fc-feature { grid-template-columns: 1fr; gap: 22px; }
  .fc-feature--rev .fc-feature__media { order: -1; }
}

/* ========== Formules accueil — cartes tarifaires mises en avant ========== */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  max-width: 1140px;
  margin: 0 auto;
  align-items: stretch;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 44px 36px 36px;
  background: linear-gradient(180deg, var(--card-2) 0%, var(--card) 65%);
  border: 1px solid var(--border);
  border-radius: 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.plan:hover {
  border-color: var(--jaune);
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.75), 0 0 34px -14px rgba(217,162,39,.3);
}
.plan__label {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-60);
}
.plan__price {
  font-family: 'Antonio', 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(2.8rem, 4.2vw, 4.2rem);
  line-height: .95;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.plan__price small {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-60);
  margin-left: 8px;
  letter-spacing: 0;
}
.plan__sub {
  font-size: .92rem;
  color: var(--ink-60);
  margin-top: -8px;
}
.plan__features {
  list-style: none;
  margin: 10px 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
  flex: 1 1 auto;
}
.plan__features li {
  position: relative;
  padding-left: 28px;
  font-size: .96rem;
  line-height: 1.4;
  color: var(--ink-80);
}
.plan__features li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 9px;
  height: 9px;
  background: var(--jaune);
  transform: rotate(45deg);
}
.plan__cta {
  margin-top: auto;
  display: block;
  text-align: center;
  padding: 17px 20px;
  border-radius: 12px;
  border: 1px solid var(--ink-20);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.plan:hover .plan__cta {
  border-color: var(--jaune);
  background: var(--jaune);
  color: #0A0A0A;
}
/* Carte mise en avant */
.plan--feat {
  border-color: var(--jaune);
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(217,162,39,.12), transparent 70%),
    linear-gradient(180deg, var(--card-2) 0%, var(--card) 65%);
  box-shadow: 0 0 0 1px rgba(217,162,39,.35) inset, 0 22px 50px -26px rgba(217,162,39,.35);
}
.plan--feat .plan__cta {
  background: var(--jaune);
  color: #0A0A0A;
  border-color: var(--jaune);
}
.plan--feat:hover .plan__cta { filter: brightness(1.06); }
.plan__ribbon {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--jaune);
  color: #0A0A0A;
  padding: 7px 20px 6px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 20px -6px rgba(217,162,39,.55);
}
.plans__note {
  text-align: center;
  color: var(--ink-40);
  font-size: .85rem;
  margin: 26px auto 0;
  max-width: 720px;
}
@media (min-width: 992px) {
  /* La carte du milieu ressort légèrement (uniquement si la place le permet) */
  .plan--feat { transform: scale(1.04); }
  .plan--feat:hover { transform: scale(1.04) translateY(-6px); }
}
@media (max-width: 991px) and (min-width: 861px) {
  /* Tablette : 3 colonnes plus compactes, sans agrandissement */
  .plan { padding: 34px 24px 28px; }
}
@media (max-width: 860px) {
  .plans { grid-template-columns: 1fr; gap: 34px; max-width: 440px; }
}

/* Section Le Club — termes clés en blanc */
.club-intro .section-head p strong { color: var(--ink); }
.club-intro .section-head p { margin: 0; }
.club-intro .section-head p + p { margin-top: clamp(14px, 2.2vw, 20px); }

/* Section Le Club — bloc partenariat (logos) */
.club-partners { margin-top: clamp(30px, 4vw, 46px); display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2vw, 22px); }
.club-partners__label { font-family: "Oswald", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.26em; font-size: clamp(0.66rem, 1.4vw, 0.78rem); color: var(--ink-60); }
.club-partners__logos { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 5.5vw, 60px); flex-wrap: wrap; }
.club-partners__logo { width: auto; object-fit: contain; opacity: 0.9; transition: opacity 0.2s ease; }
.club-partners__logo:hover { opacity: 1; }
.club-partners__logo--bv { height: clamp(40px, 5.4vw, 62px); }
.club-partners__logo--mma { height: clamp(30px, 4vw, 46px); filter: invert(1); }
.club-partners__sep { width: 1px; height: clamp(36px, 4.4vw, 52px); background: rgba(255,255,255,0.18); }
@media (max-width: 600px) {
  .club-partners__sep { display: none; }
  .club-partners__logos { gap: 30px; }
}

/* Galerie photos uniforme (page Actus) */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.photo-grid figure { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 1 / 1; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.photo-grid figure:hover img { transform: scale(1.06); }
@media (max-width: 760px) { .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* Galerie « Diplômes & certifications » — documents affichés sans recadrage. */
.diploma-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: clamp(24px, 3vw, 36px); }
.diploma-grid figure {
  margin: 0; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px; aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.diploma-grid img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
@media (max-width: 600px) { .diploma-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* Sous-titre « nutrition » + galerie nutrition centrée (peu d'éléments). */
.diploma-subtitle {
  display: block; width: 100%;
  text-align: center;
  margin: clamp(30px, 4vw, 48px) auto clamp(16px, 2.4vw, 26px);
  font-size: 1.05rem; font-weight: 600;
  color: var(--ink-80); letter-spacing: 0.05em;
  text-transform: uppercase;
}
.diploma-grid--center { display: flex; flex-wrap: wrap; justify-content: center; }
.diploma-grid--center figure { flex: 0 0 clamp(180px, 30%, 240px); }

/* Lightbox — agrandissement des photos de galerie */
.gallery img, .photo-grid img { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 48px); background: rgba(6,5,3,0.93); backdrop-filter: blur(4px); }
.lightbox.is-open { display: flex; }
.lightbox__stage { margin: 0; max-width: min(94vw, 1280px); max-height: 88vh; display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.lightbox__img { max-width: 100%; max-height: 88vh; width: auto; height: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 90px -20px rgba(0,0,0,0.85); cursor: default; }
.lightbox__close, .lightbox__nav {
  position: absolute; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(20,18,12,0.6); color: #fff; border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px; cursor: pointer; line-height: 1; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--jaune); color: #0A0A0A; border-color: var(--jaune); }
.lightbox__close { top: clamp(14px, 3vw, 26px); right: clamp(14px, 3vw, 26px); width: 46px; height: 46px; font-size: 1.7rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 2rem; padding-bottom: 4px; }
.lightbox__nav:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__prev { left: clamp(10px, 2.5vw, 28px); }
.lightbox__next { right: clamp(10px, 2.5vw, 28px); }
.lightbox__nav[hidden] { display: none; }
@media (max-width: 600px) {
  .lightbox__nav { width: 44px; height: 44px; font-size: 1.6rem; }
  .lightbox__img { max-height: 82vh; }
}

/* ===================== CAROUSEL GALERIE (pages disciplines) ===================== */
.gal-carousel { position: relative; margin-top: clamp(24px, 3vw, 36px); }
.gal-carousel__track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.gal-carousel__track::-webkit-scrollbar { display: none; }
.gal-carousel__item {
  flex: 0 0 auto;
  width: clamp(240px, 32%, 360px);
  margin: 0;
  scroll-snap-align: start;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 4 / 3;
  background: var(--card);
}
.gal-carousel__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
  transition: transform 0.6s ease;
}
.gal-carousel__item:hover img { transform: scale(1.05); }
.gal-carousel__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; line-height: 1; padding-bottom: 4px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(20,18,14,0.86);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}
.gal-carousel__btn:hover { background: var(--jaune); color: #0A0A0A; border-color: var(--jaune); }
.gal-carousel__btn--prev { left: -8px; }
.gal-carousel__btn--next { right: -8px; }
.gal-carousel__btn[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 760px) {
  .gal-carousel__item { width: 78%; aspect-ratio: 4 / 3; }
  /* Flèches conservées en mobile : un peu plus compactes et rentrées. */
  .gal-carousel__btn { width: 40px; height: 40px; font-size: 1.6rem; }
  .gal-carousel__btn--prev { left: 6px; }
  .gal-carousel__btn--next { right: 6px; }
}

/* « Voir plus » des grandes galeries (.photo-grid) */
.photo-grid figure.is-hidden { display: none; }
.gallery-more {
  display: block;
  margin: clamp(20px, 3vw, 30px) auto 0;
  padding: 13px 30px;
  border-radius: 999px;
  border: 1px solid var(--border-2, var(--border));
  background: transparent;
  color: var(--ink, #fff);
  font: inherit; font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.gallery-more:hover { background: var(--jaune); color: #0A0A0A; border-color: var(--jaune); }

/* ===================== MENTIONS LÉGALES ===================== */
.legal { padding-block: clamp(48px, 7vw, 96px); }
.legal__body {
  max-width: 760px;
  margin: clamp(28px, 4vw, 44px) auto 0;
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3.6vw, 40px);
}
.legal__body h2 {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  color: var(--ink);
  margin: 0 0 10px;
}
.legal__body p {
  color: var(--ink-60);
  line-height: 1.7;
  font-size: 1rem;
  margin: 0;
}
.legal__body a { color: var(--jaune); text-decoration: none; }
.legal__body a:hover { text-decoration: underline; }
.legal__id strong { color: var(--ink); font-size: 1.05rem; }
.legal__body article[id] { scroll-margin-top: 140px; }