/* =====================================================================
   CHARTE DA LEGACY — RÈGLE PERMANENTE (prime sur toute préférence de design)
   Référence : l'Instagram du club @legacy_boxing_gym.
   - Ambiance : brute, sombre, « old school gym », salle sous un projecteur
     dans la pénombre. Sérieux et intense, aucun effet gadget.
   - Couleurs : noir profond (--noir) + blanc cassé (--craie), monochrome
     à fort contraste. UNE seule couleur d'accent, le jaune-or (--or),
     UNIQUEMENT pour les prix, offres et promotions. Jamais pour la déco,
     les titres ou les boutons ordinaires. Ni rouge, ni bleu, ni dégradé coloré.
   - Typo : titres = Graduate (slab varsity, capitales, épais) ;
     sous-titres/labels = Barlow Condensed (capitales, lettres espacées) ;
     prix = Permanent Marker (feutre), anciens prix barrés d'un trait de
     marqueur jaune ; texte courant = Barlow, sobre et lisible.
   - Signes : logotype « LEGACY » / « **BOXING GYM** » / « -SINCE 2025- »
     centré ; fines barres verticales blanches entre les piliers ; icônes
     simples, blanches et pleines (gant, haltère, calendrier, sac) ;
     textures grain, fumée, poussière, usure (grain.png, poussiere.png, usure.png).
   - Photos : toujours noir et blanc, contrastées, grain, lumière de
     projecteur, fonds sombres (conversion N&B automatique à conserver).
   - Ton : tutoiement, phrases courtes, vocabulaire de la boxe. Slogans :
     « Rejoins l'héritage, deviens une légende. »
     « Construis avec nous la meilleure version de toi-même. »
   ===================================================================== */

/* =====================================================================
   LEGACY BOXING GYM — FEUILLE DE STYLE
   Concept : l'affiche de gym. Bandes noires pleine largeur, titres
   collégiaux, filets doubles blancs, grain photo. L'or est réservé
   aux prix et aux offres, nulle part ailleurs.
   (Le contenu se modifie dans assets/js/config.js, pas ici.)
   ===================================================================== */

/* ---------- Polices (hébergées avec le site) ---------- */
@font-face { font-family: "Graduate"; src: url("../fonts/Graduate-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("../fonts/PermanentMarker-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* ---------- Jetons de design ---------- */
:root {
  color-scheme: dark;

  /* Couleurs */
  --noir:    #0b0b0a;   /* fond principal */
  --charbon: #171716;   /* surfaces surélevées */
  --acier:   #34332f;   /* filets et bordures */
  --craie:   #f3f1ec;   /* texte principal, blanc cassé "bande de boxe" */
  --fumee:   #aeaba3;   /* texte secondaire (contraste 8:1 sur noir) */
  --or:      #f4c430;   /* PRIX ET OFFRES UNIQUEMENT */

  /* Traitement unique des photos (DA : noir et blanc contrasté, plutôt sombre) */
  --filtre-photo: grayscale(1) contrast(1.15) brightness(0.9);

  /* Polices */
  --f-titre: "Graduate", "Rockwell", "Courier New", serif;
  --f-texte: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --f-label: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --f-prix:  "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;

  /* Échelle typographique (mobile d'abord) */
  --t-xs:   0.875rem;   /* 14 px : plus petite taille de texte du site */
  --t-sm:   0.9375rem;
  --t-base: 1.0625rem;
  --t-lg:   1.25rem;
  --t-xl:   clamp(1.5rem, 1.1rem + 2vw, 2.1rem);
  --t-2xl:  clamp(2.1rem, 1.2rem + 4.6vw, 3.6rem);
  --t-3xl:  clamp(2.6rem, 1.2rem + 7vw, 5.4rem);

  /* Mise en page */
  --gouttiere: clamp(1rem, 4.5vw, 2.5rem);
  --largeur: 72rem;
  --entete-h: 4rem;
  --section: clamp(3.5rem, 9vw, 6.5rem);
  --rayon: 3px;
  --epaisseur-titre: 0.035em; /* épaississement des titres collégiaux */
  --duree: 220ms;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--entete-h) + 1rem); }
body {
  margin: 0;
  background: var(--noir);
  color: var(--craie);
  font-family: var(--f-texte);
  font-size: var(--t-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Grain photo sur tout le site */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background: url("../img/grain.png") repeat;
  background-size: 200px;
  opacity: 0.38;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--craie); color: var(--noir); }

:focus-visible {
  outline: 3px solid var(--craie);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.lien-evitement {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--craie); color: var(--noir);
  padding: 0.75rem 1rem; font-family: var(--f-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none;
}
.lien-evitement:focus { top: 1rem; }

/* Bandeau d'erreur affiché si assets/js/config.js est cassé (pas de couleur : DA monochrome) */
.alerte-config {
  position: relative; z-index: 60;
  padding: 0.9rem var(--gouttiere);
  background: var(--craie); color: var(--noir);
  border-bottom: 4px solid var(--noir);
  outline: 3px solid var(--craie);
  font-family: var(--f-label); font-weight: 700; font-size: var(--t-lg);
  text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.25;
  text-align: center;
}

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* ---------- Typographie récurrente ---------- */
.titre {
  font-family: var(--f-titre);
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: 0.005em;
  -webkit-text-stroke: var(--epaisseur-titre) currentColor;
}
.titre--xl { font-size: var(--t-3xl); }
.titre--l  { font-size: var(--t-2xl); }
.titre--m  { font-size: var(--t-xl); }

.surtitre {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--f-label);
  font-weight: 600;
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fumee);
}
.surtitre::before { content: ""; width: 1.6rem; height: 2px; background: currentColor; }

/* Le filet double des affiches ("Suivi sur-mesure selon ton objectif") */
.filet-double {
  display: inline-block;
  padding-block: 0.45rem;
  border-block: 3px solid var(--craie);
  font-family: var(--f-label);
  font-weight: 700;
  font-size: var(--t-lg);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.15;
}

.texte-intro { color: var(--fumee); max-width: 38rem; font-size: var(--t-lg); line-height: 1.5; }
.texte-fumee { color: var(--fumee); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.1rem;
  padding: 0.8rem 1.4rem;
  border: 2px solid var(--craie);
  border-radius: var(--rayon);
  font-family: var(--f-label);
  font-weight: 700;
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--duree), color var(--duree), transform var(--duree);
}
.btn svg { width: 1.25rem; height: 1.25rem; flex: none; }
.btn--plein { background: var(--craie); color: var(--noir); }
.btn--plein:hover { background: transparent; color: var(--craie); }
.btn--contour { background: transparent; color: var(--craie); }
.btn--contour:hover { background: var(--craie); color: var(--noir); }
.btn--sombre { background: var(--noir); color: var(--craie); border-color: var(--noir); }
.btn--sombre:hover { background: transparent; color: var(--noir); }
.btn:active { transform: translateY(1px); }
.btn--bloc { width: 100%; }
.groupe-btn { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--f-label); font-weight: 700; font-size: var(--t-lg);
  text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none;
  border-bottom: 2px solid var(--acier); padding-bottom: 0.2rem;
  transition: border-color var(--duree), gap var(--duree);
}
.lien-fleche svg { width: 1.2rem; height: 1.2rem; }
.lien-fleche:hover { border-color: var(--craie); gap: 0.8rem; }

.icone { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- En-tête et navigation ---------- */
.entete {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: rgba(11, 11, 10, 0.94);
  border-bottom: 1px solid var(--acier);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.entete__barre {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: var(--entete-h);
}
.marque {
  display: inline-flex; flex-direction: column; align-items: center;
  text-decoration: none; line-height: 1; text-transform: uppercase;
}
.marque__legacy {
  font-family: var(--f-titre);
  font-size: 1.55rem;
  letter-spacing: -0.01em;
  -webkit-text-stroke: 0.04em currentColor;
  transform: scaleX(0.9);
}
.marque__gym {
  font-family: var(--f-titre);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  margin-top: 0.2rem;
}

.nav { display: none; }
.nav__liste { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.nav__lien {
  position: relative;
  font-family: var(--f-label); font-weight: 600; font-size: 1.0625rem;
  text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none;
  color: var(--fumee);
  padding-block: 0.4rem;
  transition: color var(--duree);
}
.nav__lien::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--craie);
  opacity: 0;
}
.nav__lien:hover, .nav__lien[aria-current="page"] { color: var(--craie); }
.nav__lien:hover::after, .nav__lien[aria-current="page"]::after { opacity: 1; }
.nav .btn { min-height: 2.6rem; padding: 0.6rem 1rem; font-size: 0.95rem; }

.btn-menu {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 2.75rem; padding: 0.5rem 0.25rem 0.5rem 0.75rem;
  background: none; border: 0; cursor: pointer;
  font-family: var(--f-label); font-weight: 700; font-size: 1rem;
  text-transform: uppercase; letter-spacing: 0.12em;
}
.btn-menu .icone { width: 1.75rem; height: 1.75rem; }

.menu-mobile {
  position: fixed;
  inset: calc(var(--entete-h) + env(safe-area-inset-top, 0px)) 0 0 0;
  z-index: 49;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: 2rem var(--gouttiere) calc(2rem + env(safe-area-inset-bottom, 0px));
  background: var(--noir);
  overflow-y: auto;
}
.menu-mobile[hidden] { display: none !important; }
.menu-mobile__liste { display: grid; gap: 0.35rem; }
.menu-mobile__lien {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--acier);
  font-family: var(--f-titre); font-size: clamp(1.9rem, 9vw, 2.6rem);
  text-transform: uppercase; text-decoration: none; line-height: 1;
  -webkit-text-stroke: var(--epaisseur-titre) currentColor;
  color: var(--fumee);
}
.menu-mobile__lien[aria-current="page"] { color: var(--craie); }
.menu-mobile__pied { display: grid; gap: 1rem; }
.menu-mobile__adresse { font-family: var(--f-label); font-size: var(--t-lg); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fumee); }
body.menu-ouvert { overflow: hidden; }

@media (min-width: 60em) {
  .nav { display: block; }
  .btn-menu, .menu-mobile { display: none !important; }
  .marque__legacy { font-size: 1.8rem; }
  .marque__gym { font-size: 0.64rem; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
.section--charbon { background: var(--charbon); border-block: 1px solid var(--acier); }
.section__tete { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.section__tete--ligne { align-items: end; }
@media (min-width: 48em) {
  .section__tete--ligne { grid-template-columns: 1fr auto; }
}

/* En-tête des pages intérieures */
.page-tete {
  position: relative;
  padding-block: clamp(3rem, 10vw, 6rem) clamp(2rem, 6vw, 3.5rem);
  border-bottom: 1px solid var(--acier);
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 90% at 50% -20%, rgba(243, 241, 236, 0.13), transparent 70%),
    var(--noir);
}
.page-tete::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/poussiere.png") center / 700px repeat;
  opacity: 0.35; pointer-events: none;
}
.page-tete .conteneur { position: relative; display: grid; gap: 1.1rem; }

/* ---------- ACCUEIL : en-tête "projecteur" ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  background: var(--noir);
}
.hero__photo {
  position: absolute; inset: 0; z-index: -3;
  background-size: cover; background-position: center 35%;
  filter: var(--filtre-photo);
}
/* Voile noir : la photo reste très sombre, le titre reste lisible (contraste > 4.5:1) */
.hero__photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(11,11,10,.55), rgba(11,11,10,.2) 30%, rgba(11,11,10,.2) 70%, rgba(11,11,10,.85)),
    rgba(11,11,10,.7);
}
/* Cône de lumière tombant du plafond */
.hero__projecteur {
  position: absolute; z-index: -2;
  left: 50%; top: 0;
  width: min(62rem, 170vw); height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(243, 241, 236, 0.22), rgba(243, 241, 236, 0.05) 55%, transparent 85%);
  clip-path: polygon(41% 0, 59% 0, 88% 100%, 12% 100%);
  filter: blur(18px);
}
.hero__halo {
  position: absolute; z-index: -2; left: 50%; top: -14rem;
  width: 38rem; height: 26rem; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(243, 241, 236, 0.28), transparent 65%);
}
.hero__poussiere {
  position: absolute; inset: 0; z-index: -1;
  background: url("../img/poussiere.png") center top / 760px repeat;
  opacity: 0.55;
  pointer-events: none;
}
.hero__contenu {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: 1.6rem;
  padding-block: clamp(3rem, 11vw, 6.5rem) clamp(2.5rem, 7vw, 4rem);
}

/* Logo en texte stylisé, LEGACY en arc */
.logo-hero { display: grid; justify-items: center; line-height: 1; }
.logo-hero__legacy {
  display: flex;
  /* marge intérieure : les lettres décalées par l'arc restent dans la zone du masque d'usure */
  padding: 0.12em 0.18em 0.22em;
  margin: -0.12em 0 -0.22em;
  font-family: var(--f-titre);
  font-size: clamp(4.3rem, 23vw, 10.5rem);
  text-transform: uppercase;
  letter-spacing: -0.035em;
  -webkit-text-stroke: 0.045em currentColor;
  transform: scaleX(0.9);
  -webkit-mask-image: url("../img/usure.png");
  mask-image: url("../img/usure.png");
  -webkit-mask-size: 600px; mask-size: 600px;
}
.logo-hero__legacy > span {
  display: inline-block;
  transform: translateY(calc(var(--i) * var(--i) * 0.024em)) rotate(calc(var(--i) * 1.8deg));
}
.logo-hero__gym {
  margin-top: 0.42em;
  text-transform: uppercase;
  font-family: var(--f-titre);
  font-size: clamp(1.45rem, 7.4vw, 3.4rem);
  letter-spacing: 0.035em;
  -webkit-text-stroke: 0.02em currentColor;
  transform: scaleX(0.9);
}
.logo-hero__gym .etoiles { font-size: 0.62em; vertical-align: 0.42em; letter-spacing: 0.08em; }
.logo-hero__depuis {
  margin-top: 0.75rem;
  font-family: var(--f-label); font-weight: 600;
  font-size: clamp(0.95rem, 3.3vw, 1.35rem);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.hero__slogan {
  font-family: var(--f-label); font-weight: 700;
  font-size: clamp(1.35rem, 5.2vw, 2.1rem);
  line-height: 1.15;
  text-transform: uppercase; letter-spacing: 0.04em;
  text-wrap: balance;
  max-width: 30rem;
  text-shadow: 0 2px 14px rgba(0,0,0,.85);
}
.hero__accroche { color: var(--craie); max-width: 32rem; text-shadow: 0 1px 10px rgba(0,0,0,.9); }
.hero .groupe-btn { justify-content: center; width: 100%; }
.hero .groupe-btn .btn { flex: 1 1 15rem; max-width: 20rem; }
.hero__rappel {
  margin-top: -0.6rem;
  font-family: var(--f-label); font-weight: 600; font-size: var(--t-sm);
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--craie); text-shadow: 0 1px 10px rgba(0,0,0,.9);
}
.hero .btn--contour { background: rgba(11, 11, 10, 0.55); }
.hero .btn--contour:hover { background: var(--craie); }

/* Bandeau des piliers, comme la story Instagram */
.piliers-bande {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(243, 241, 236, 0.18);
  background: linear-gradient(to bottom, rgba(11,11,10,.4), rgba(11,11,10,.94));
}
.piliers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pilier {
  display: grid; justify-items: center; align-content: start; gap: 0.6rem;
  padding: 1.4rem 0.4rem 1.6rem;
  text-align: center;
  min-width: 0;
}
.pilier + .pilier { border-left: 1px solid rgba(243, 241, 236, 0.28); }
.pilier .icone { width: 2rem; height: 2rem; stroke-width: 1.5; }
.pilier__titre {
  font-family: var(--f-label); font-weight: 700;
  font-size: clamp(0.875rem, 3.1vw, 1.1rem);
  line-height: 1.15; text-transform: uppercase; letter-spacing: 0.06em;
  text-wrap: balance;
}
.pilier__texte { display: none; color: var(--fumee); font-size: var(--t-sm); line-height: 1.5; max-width: 17rem; }
@media (min-width: 48em) {
  .pilier { padding: 2rem 1.5rem 2.25rem; }
  .pilier__texte { display: block; }
  .pilier .icone { width: 2.4rem; height: 2.4rem; }
}

/* ---------- Disciplines : la "carte" du gala ---------- */
.disciplines { display: grid; border-top: 1px solid var(--acier); }
.discipline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 1rem;
  padding: 1.25rem 0.25rem;
  border-bottom: 1px solid var(--acier);
  text-decoration: none;
  transition: background-color var(--duree), padding var(--duree);
}
.discipline__nom {
  font-family: var(--f-titre); text-transform: uppercase;
  font-size: clamp(1.35rem, 1rem + 1.8vw, 1.85rem); line-height: 1.05;
  -webkit-text-stroke: var(--epaisseur-titre) currentColor;
}
.discipline__public {
  align-self: center;
  font-family: var(--f-label); font-weight: 600; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fumee);
  border: 1px solid var(--acier);
  padding: 0.3rem 0.55rem 0.25rem;
  white-space: nowrap;
}
.discipline__texte { grid-column: 1 / -1; color: var(--fumee); max-width: 34rem; }
.discipline__suite {
  grid-column: 1 / -1;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: var(--t-sm);
}
.discipline__suite .icone { width: 1.1rem; height: 1.1rem; transition: transform var(--duree); }
.discipline:hover { background: var(--charbon); }
a.discipline:hover .discipline__suite .icone { transform: translateX(4px); }
@media (min-width: 48em) {
  .disciplines { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4rem); border-top: 0; }
  .discipline { padding: 1.5rem 0.75rem; }
  .discipline:nth-child(-n+2) { border-top: 1px solid var(--acier); }
}

/* ---------- Les coachs (accueil) ---------- */
.section--suite { padding-top: 0; }
.coachs-equipe { display: grid; gap: 1rem; }
.carte-coach {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  background: var(--charbon);
  border: 1px solid var(--acier);
  border-radius: var(--rayon);
  overflow: hidden;
  min-width: 0;
}
.carte-coach__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--charbon); }
.carte-coach__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
  filter: var(--filtre-photo);
  transition: transform 600ms cubic-bezier(.2,.8,.2,1);
}

/* Affiches des coachs : entières (4:5), en couleur, cliquables pour agrandir */
.affiche-coach {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: var(--charbon); cursor: zoom-in;
}
.affiche-coach:focus-visible { outline-offset: -4px; }
.carte-coach__photo .affiche-coach img,
.coach__visuel .affiche-coach img {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  filter: none; transform: none;
}
.carte-coach__texte {
  display: grid; align-content: center; gap: 0.6rem;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--craie);
  min-width: 0;
}
.carte-coach__nom {
  font-family: var(--f-titre); text-transform: uppercase;
  font-size: clamp(1.3rem, 1rem + 1.4vw, 1.75rem); line-height: 1.02;
  -webkit-text-stroke: var(--epaisseur-titre) currentColor;
}
.carte-coach__discipline {
  font-family: var(--f-label); font-weight: 600; font-size: var(--t-sm);
  text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.3;
  color: var(--fumee);
}
.carte-coach__insta {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 2.75rem;
  font-family: var(--f-label); font-weight: 700; font-size: var(--t-base);
  letter-spacing: 0.04em; text-decoration: none; overflow-wrap: anywhere;
  border-bottom: 2px solid var(--acier);
  transition: border-color var(--duree);
}
.carte-coach__insta .icone { width: 1.15rem; height: 1.15rem; flex: none; }
.carte-coach__insta:hover { border-color: var(--craie); }
@media (min-width: 40em) {
  .coachs-equipe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 2vw, 1.25rem); }
  .carte-coach { grid-template-columns: 1fr; align-content: start; }
  .carte-coach__texte { align-content: start; border-left: 0; border-top: 3px solid var(--craie); padding: 1.1rem 1.1rem 1.25rem; }
}

/* ---------- Prix (style des affiches : marqueur + croix dorée) ---------- */
.prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; }
.prix__montant {
  font-family: var(--f-prix);
  font-size: clamp(2.6rem, 1.8rem + 4vw, 3.8rem);
  line-height: 1;
  color: var(--craie);
  font-variant-numeric: tabular-nums;
}
.prix__unite { font-family: var(--f-prix); font-size: clamp(1.25rem, 1rem + 1.2vw, 1.6rem); line-height: 1; }
.prix--petit .prix__montant { font-size: clamp(1.9rem, 1.5rem + 2vw, 2.4rem); }
.prix--petit .prix__unite { font-size: 1.15rem; }
.prix__avant {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  font-family: var(--f-label); font-weight: 600; font-size: var(--t-base);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--fumee);
}

/* Ancien prix barré d'un seul trait fin, en or comme sur les affiches */
.barre {
  position: relative; display: inline-block;
  font-family: var(--f-prix); font-size: 1.75em; line-height: 1; color: var(--craie);
  letter-spacing: 0.05em; text-decoration: none; padding-inline: 0.1em;
}
.barre::after {
  content: ""; position: absolute; left: 0; right: 0; top: 52%;
  height: 2px; background: var(--or); border-radius: 2px;
  transform: rotate(-6deg);
}

.offre-mention {
  font-family: var(--f-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--or);
}

/* Bloc "Offre de lancement" (accueil) */
.offre {
  position: relative;
  display: grid; gap: 2rem;
  padding: clamp(1.75rem, 5vw, 3rem);
  border: 2px solid var(--or);
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(244, 196, 48, 0.08), transparent 70%),
    var(--charbon);
}
.offre__tete { display: grid; gap: 0.75rem; }
.offre__titre { color: var(--or); }
.offre__grille { display: grid; gap: 1.5rem; }
.offre__ligne { display: grid; gap: 0.5rem; padding-top: 1.25rem; border-top: 1px solid var(--acier); }
.offre__categorie { font-family: var(--f-label); font-weight: 700; font-size: var(--t-lg); text-transform: uppercase; letter-spacing: 0.08em; }
.offre__ou { font-family: var(--f-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fumee); }
@media (min-width: 48em) {
  .offre__grille { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

/* ---------- Galerie (mosaïque) ---------- */
/* Rangées de tuiles verticales (3:4) qui remplissent toujours la largeur :
   si une rangée n'est pas complète, ses photos s'élargissent (recadrage centré,
   jamais de déformation). Mobile : 2 colonnes. Ordinateur : 4 colonnes,
   une photo "large" ou "grand" occupe 2 colonnes. */
.mosaique {
  --cols: 2; --gap: 0.5rem;
  --col: calc((min(100vw, var(--largeur)) - 2 * var(--gouttiere) - (var(--cols) - 1) * var(--gap)) / var(--cols));
  display: flex; flex-wrap: wrap; gap: var(--gap);
}
@media (min-width: 48em) { .mosaique { --cols: 4; --gap: 0.75rem; } }
.tuile {
  position: relative; overflow: hidden; background: var(--charbon); border-radius: var(--rayon); min-width: 0;
  flex: 1 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  height: calc(var(--col) * 4 / 3);
}
@media (min-width: 48em) {
  .tuile--large, .tuile--grand { flex-basis: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols) * 2 + var(--gap)); }
}
.tuile__bouton {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left;
}
.tuile img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: var(--filtre-photo);
  transition: transform 600ms cubic-bezier(.2,.8,.2,1);
}

/* Emplacement provisoire (avant les vraies photos) */
.emplacement {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background:
    radial-gradient(ellipse 75% 60% at var(--x, 50%) var(--y, 20%), rgba(243,241,236,.16), transparent 70%),
    linear-gradient(160deg, #1d1d1b, #0d0d0c);
}
.emplacement::after {
  content: ""; position: absolute; inset: 0;
  background: url("../img/poussiere.png") var(--x, 50%) var(--y, 20%) / 520px repeat;
  opacity: 0.45;
}
.emplacement__dessin {
  width: 38%; max-width: 7.5rem; height: auto;
  fill: none; stroke: var(--craie); stroke-width: 0.75; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.32;
  transition: transform 600ms cubic-bezier(.2,.8,.2,1), opacity 600ms;
}

/* Visionneuse plein écran */
.visionneuse {
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(5, 5, 5, 0.97); color: var(--craie);
}
.visionneuse::backdrop { background: rgba(0,0,0,.85); }
.visionneuse[open] { display: grid; grid-template-rows: auto 1fr auto; }
.visionneuse__barre {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: calc(0.75rem + env(safe-area-inset-top, 0px)) var(--gouttiere) 0.75rem;
  font-family: var(--f-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.visionneuse__scene { position: relative; display: grid; place-items: center; min-height: 0; padding-inline: var(--gouttiere); }
/* La photo est contenue dans la zone centrale, sans recouvrir les boutons (quelle que soit son orientation) */
.visionneuse__scene { overflow: hidden; }
.visionneuse__scene img {
  position: absolute; inset: 0; margin: auto;
  max-width: calc(100% - 2 * var(--gouttiere)); max-height: 100%;
  object-fit: contain; filter: var(--filtre-photo);
}
.visionneuse__scene .emplacement { position: relative; width: min(100%, 36rem); aspect-ratio: 4 / 5; max-width: 100%; max-height: 100%; border-radius: var(--rayon); }
.visionneuse--affiche[open] { grid-template-rows: auto 1fr; }
.visionneuse--affiche .visionneuse__scene { margin-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); cursor: zoom-out; }
.visionneuse--affiche .visionneuse__scene img { filter: none; cursor: default; }
.visionneuse__pied {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.75rem var(--gouttiere) calc(1rem + env(safe-area-inset-bottom, 0px));
}
/* Plus de légende affichée : l'élément sert seulement d'espace entre les deux flèches */
.visionneuse__legende { flex: 1; min-width: 0; }
.btn-rond {
  display: inline-grid; place-items: center;
  width: 3rem; height: 3rem; flex: none;
  border: 1px solid var(--acier); border-radius: 50%;
  background: var(--noir); cursor: pointer;
  transition: border-color var(--duree), background-color var(--duree);
}
.btn-rond:hover { border-color: var(--craie); }

/* ---------- Bandeau clair "Construis avec nous…" ---------- */
.bandeau-clair {
  background: var(--craie); color: var(--noir);
  padding-block: clamp(3rem, 8vw, 5rem);
}
.bandeau-clair .conteneur { display: grid; gap: 1.75rem; justify-items: start; }
.bandeau-clair .titre { max-width: 52rem; }
.bandeau-clair .btn--contour { color: var(--noir); border-color: var(--noir); }
.bandeau-clair .btn--contour:hover { background: var(--noir); color: var(--craie); }
.bandeau-clair .surtitre { color: #4a4843; }

/* ---------- TARIFS ---------- */
.banniere-offre {
  display: grid; gap: 0.6rem;
  padding: 1.25rem 1.4rem;
  border: 2px solid var(--or);
  border-radius: var(--rayon);
  background: rgba(244, 196, 48, 0.06);
}
.banniere-offre__titre { font-family: var(--f-titre); font-size: var(--t-xl); text-transform: uppercase; color: var(--or); -webkit-text-stroke: var(--epaisseur-titre) currentColor; line-height: 1; }
.banniere-offre__details { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }

.grille-tarifs { display: grid; gap: 1.25rem; }
@media (min-width: 48em) { .grille-tarifs { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.carte-tarif {
  display: grid; gap: 1.25rem; align-content: start;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--charbon);
  border: 1px solid var(--acier);
  border-radius: var(--rayon);
  transition: border-color var(--duree);
}
.carte-tarif:hover { border-color: var(--fumee); }
.carte-tarif__tete { display: grid; gap: 0.5rem; padding-bottom: 1.1rem; border-bottom: 3px solid var(--craie); }
.carte-tarif__formule { font-family: var(--f-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fumee); font-size: var(--t-sm); }
.carte-tarif__bloc { display: grid; gap: 0.4rem; }
.carte-tarif__ou {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fumee);
}
.carte-tarif__ou::before, .carte-tarif__ou::after { content: ""; flex: 1; height: 1px; background: var(--acier); }


/* Phrase d'accès aux cours et ligne Kids Academy */
.tarifs-acces {
  font-family: var(--f-label); font-weight: 700; font-size: var(--t-lg);
  text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.25;
}
.tarifs-acces--suite { color: var(--fumee); font-weight: 600; }
.pt__journee {
  font-family: var(--f-label); font-weight: 600; font-size: var(--t-lg);
  text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.25;
}
.ligne-tarif {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem;
  padding: 1.1rem clamp(1.25rem, 4vw, 2.25rem);
  background: var(--charbon); border: 1px solid var(--acier); border-radius: var(--rayon);
}
.ligne-tarif[hidden] { display: none; }
.ligne-tarif__nom {
  font-family: var(--f-titre); font-size: var(--t-xl); text-transform: uppercase; line-height: 1;
  -webkit-text-stroke: var(--epaisseur-titre) currentColor;
}
.ligne-tarif__prix { font-family: var(--f-prix); font-size: var(--t-xl); color: var(--or); line-height: 1.1; }

/* Deux versions de la page Tarifs (config.js : afficherPrix) */
[data-si-prix][hidden], [data-sans-prix][hidden] { display: none !important; }

/* Version « sur demande » : encadré « Tout est inclus », esprit affiche */
.sur-demande { display: grid; gap: clamp(2.5rem, 7vw, 3.5rem); }
@media (min-width: 60em) { .sur-demande { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; gap: 3.5rem; } }
.inclus {
  display: grid; gap: 1.5rem;
  padding: clamp(1.4rem, 5vw, 2.5rem);
  background: var(--charbon);
  border: 4px solid var(--craie);
  border-radius: var(--rayon);
}
.inclus__titre {
  font-family: var(--f-titre); font-size: var(--t-2xl); text-transform: uppercase; line-height: 1;
  -webkit-text-stroke: var(--epaisseur-titre) currentColor;
  padding-bottom: 1rem; border-bottom: 3px solid var(--craie);
}
.inclus__liste { display: grid; }
.inclus__liste li {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 1rem; align-items: start;
  padding-block: 1rem;
  border-bottom: 1px solid var(--acier);
  font-size: var(--t-lg); font-weight: 600; line-height: 1.4;
}
.inclus__liste li:first-child { padding-top: 0.25rem; }
.inclus__liste .icone { width: 2rem; height: 2rem; stroke-width: 1.6; }
.inclus__action { display: grid; gap: 0.75rem; justify-items: center; padding-top: 0.25rem; }
.btn--grand {
  min-height: 3.75rem; padding: 1rem 1.25rem;
  font-size: 1.125rem; line-height: 1.2; white-space: normal; text-align: center;
}
.btn--grand svg { width: 1.5rem; height: 1.5rem; }
.inclus__note { color: var(--fumee); font-size: var(--t-sm); text-align: center; }
.inclus__essai { font-size: var(--t-lg); line-height: 1.45; text-align: left; justify-self: stretch; margin-bottom: 0.4rem; }
.tarifs-adaptes { color: var(--fumee); font-size: var(--t-sm); margin-top: -1.25rem; }
@media (min-width: 60em) { .tarifs-adaptes { grid-column: 1; grid-row: 2; } }

.cours-inclus { display: grid; gap: 1.25rem; align-content: start; }
.cours-inclus__titre {
  font-family: var(--f-titre); font-size: var(--t-xl); text-transform: uppercase; line-height: 1.05;
  -webkit-text-stroke: var(--epaisseur-titre) currentColor;
}
.etiquettes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.etiquette {
  font-family: var(--f-label); font-weight: 600; font-size: var(--t-sm);
  text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.2;
  padding: 0.5rem 0.75rem 0.45rem;
  border: 1px solid var(--acier); border-radius: var(--rayon);
}

/* Personal training */
.pt__intro, .pt .coachs { min-width: 0; }
.pt__parlons { color: var(--fumee); font-size: var(--t-lg); line-height: 1.5; max-width: 34rem; }
.pt { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.pt__intro { display: grid; gap: 1.5rem; justify-items: start; }
.objectifs { display: grid; gap: 0.6rem; }
@media (min-width: 36em) { .objectifs { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
.objectifs li { display: flex; align-items: center; gap: 0.7rem; font-weight: 600; font-size: var(--t-lg); }
.objectifs li::before { content: ""; flex: none; border-left: 0.55em solid var(--craie); border-block: 0.36em solid transparent; }
.coachs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 48em) { .coachs { gap: 1.25rem; } }
.coach { display: grid; align-content: start; gap: 0.75rem; min-width: 0; }
/* Le nom passe sous l'image pour ne pas cacher le texte des affiches */
.coach__visuel { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--rayon); background: var(--charbon); }
.coach__visuel img { width: 100%; height: 100%; object-fit: cover; filter: var(--filtre-photo); }
.coach__nom {
  display: grid; gap: 0.1rem;
  line-height: 1;
}
.coach__nom small { font-family: var(--f-titre); font-size: clamp(0.875rem, 2.6vw, 1.15rem); text-transform: uppercase; -webkit-text-stroke: 0.02em currentColor; }
.coach__nom strong { font-family: var(--f-titre); font-weight: 400; font-size: clamp(1.5rem, 6vw, 2.6rem); text-transform: uppercase; -webkit-text-stroke: var(--epaisseur-titre) currentColor; }
.pt__prix { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.pt__prix-texte { font-family: var(--f-prix); font-size: var(--t-xl); color: var(--or); line-height: 1.1; }
@media (min-width: 60em) {
  .pt { grid-template-columns: 1.05fr 1fr; align-items: center; }
}

/* ---------- PLANNING ---------- */
.badge-provisoire {
  display: inline-flex; align-items: center; gap: 0.5rem; justify-self: start;
  font-family: var(--f-label); font-weight: 600; font-size: var(--t-sm);
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.4rem 0.75rem; border: 1px dashed var(--fumee); border-radius: var(--rayon);
  color: var(--fumee);
}

.badge-provisoire[hidden] { display: none; }

/* Filtre du planning : un seul menu déroulant, sur une ligne */
.filtre-planning { display: flex; align-items: center; gap: 0.75rem 1rem; margin-bottom: 1.5rem; max-width: 30rem; }
.filtre-planning[hidden] { display: none; }
.filtre-planning__label {
  flex: none;
  font-family: var(--f-label); font-weight: 700; font-size: var(--t-base);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--fumee);
}
.filtre-planning__select {
  flex: 1 1 auto; min-width: 0;
  min-height: 48px; padding: 0.6rem 2.75rem 0.6rem 1rem;
  -webkit-appearance: none; appearance: none;
  background: var(--charbon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f1ec' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.9rem center / 1.15rem;
  border: 2px solid var(--craie); border-radius: var(--rayon);
  color: var(--craie);
  font-family: var(--f-label); font-weight: 700; font-size: var(--t-lg);
  text-transform: uppercase; letter-spacing: 0.06em;
  cursor: pointer;
}
@media (max-width: 30em) {
  .filtre-planning { gap: 0.6rem; }
  .filtre-planning__label { font-size: var(--t-sm); }
  .filtre-planning__select { font-size: var(--t-base); letter-spacing: 0.03em; padding-left: 0.75rem; padding-right: 2.4rem; background-position: right 0.7rem center; }
}
.filtre-planning__select option { background: var(--charbon); color: var(--craie); text-transform: none; }
.planning-vide { margin-bottom: 1.5rem; font-size: var(--t-lg); }
.planning-vide[hidden] { display: none; }
.planning-vide a { color: var(--craie); text-underline-offset: 0.2em; }
.jour[hidden] { display: none; }

.jours { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 40em) { .jours { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .jours { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.jour {
  display: grid; align-content: start; gap: 0.25rem;
  padding: 1.25rem 1.25rem 0.75rem;
  background: var(--charbon);
  border: 1px solid var(--acier);
  border-radius: var(--rayon);
}
.jour--aujourdhui { border-color: var(--craie); box-shadow: inset 0 3px 0 var(--craie); }
.jour__tete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: 0.75rem; border-bottom: 3px solid var(--craie); }
.jour__nom { font-family: var(--f-titre); font-size: 1.6rem; text-transform: uppercase; -webkit-text-stroke: var(--epaisseur-titre) currentColor; line-height: 1; }
.jour__badge {
  font-family: var(--f-label); font-weight: 700; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.12em;
  background: var(--craie); color: var(--noir);
  padding: 0.3rem 0.55rem 0.25rem; border-radius: 2px;
}
.cours {
  display: grid; grid-template-columns: 4.1rem minmax(0, 1fr); gap: 0.9rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--acier);
}
.cours:last-child, .cours.cours--dernier { border-bottom: 0; }
.cours[hidden] { display: none !important; }
.cours__heure { font-family: var(--f-label); font-variant-numeric: tabular-nums; line-height: 1.1; display: grid; }
.cours__heure strong { font-weight: 700; font-size: 1.45rem; }
.cours__heure span { color: var(--fumee); font-weight: 500; font-size: var(--t-sm); }
.cours__info { display: grid; gap: 0.3rem; align-content: start; }
.cours__discipline { font-weight: 700; font-size: var(--t-lg); line-height: 1.2; }
.cours__niveau { font-family: var(--f-label); font-weight: 600; font-size: var(--t-sm); text-transform: uppercase; letter-spacing: 0.1em; color: var(--fumee); }
.jour__vide { padding-block: 1rem; color: var(--fumee); font-style: italic; }
/* Bloc « En journée » (libre accès et cours privés) — sobre, sans jaune */
.journee {
  display: grid; gap: 1rem; justify-items: start;
  margin-top: 1.75rem; max-width: 44rem;
  padding: 1.4rem clamp(1.25rem, 4vw, 1.75rem);
  background: var(--charbon);
  border: 1px solid var(--acier); border-top: 3px solid var(--craie);
  border-radius: var(--rayon);
}
.journee[hidden] { display: none; }
.journee__titre {
  font-family: var(--f-titre); font-size: var(--t-xl); text-transform: uppercase; line-height: 1.05;
  -webkit-text-stroke: var(--epaisseur-titre) currentColor;
}
.liste-puces { display: grid; gap: 0.6rem; }
.liste-puces li { display: flex; gap: 0.7rem; line-height: 1.45; }
.liste-puces li::before {
  content: ""; flex: none; align-self: flex-start; width: 0; height: 0; margin-top: 0.42em;
  border-left: 0.5em solid var(--craie); border-block: 0.33em solid transparent;
}
.note-planning { margin-top: 1.75rem; display: grid; gap: 0.35rem; color: var(--fumee); }

/* ---------- CONTACT ---------- */
.actions-contact { display: grid; gap: 0.75rem; align-items: start; }
/* autant de colonnes que de cartes (la carte Email disparaît si l'email est vide) */
@media (min-width: 48em) { .actions-contact { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1rem; } }
.contact-principal { display: grid; gap: 0.75rem; min-width: 0; }

/* Bloc « Ton premier cours » (sous la carte WhatsApp) */
.premier-cours {
  display: grid; gap: 0.9rem;
  padding: 1.25rem 1.4rem 1.4rem;
  border: 1px solid var(--acier);
  border-top: 3px solid var(--craie);
  border-radius: var(--rayon);
  background: var(--charbon);
}
.premier-cours__titre {
  font-family: var(--f-titre); font-size: 1.35rem; text-transform: uppercase; line-height: 1;
  -webkit-text-stroke: var(--epaisseur-titre) currentColor;
}
.premier-cours__liste { display: grid; gap: 0.6rem; }
.premier-cours__liste li { display: flex; gap: 0.7rem; line-height: 1.45; }
.premier-cours__liste li::before {
  content: ""; flex: none; align-self: flex-start; width: 0; height: 0; margin-top: 0.42em;
  border-left: 0.5em solid var(--craie); border-block: 0.33em solid transparent;
}
.action {
  display: grid; gap: 0.9rem; align-content: start;
  padding: 1.4rem;
  background: var(--charbon);
  border: 1px solid var(--acier);
  border-radius: var(--rayon);
  min-width: 0;
  transition: border-color var(--duree);
}
.action:hover { border-color: var(--fumee); }
.action--principale { background: var(--craie); color: var(--noir); border-color: var(--craie); }
.action--principale .action__detail { color: #4a4843; }
.action__tete { display: flex; align-items: center; gap: 0.75rem; }
.action__tete .icone { width: 1.9rem; height: 1.9rem; }
.action__titre { font-family: var(--f-titre); font-size: 1.45rem; text-transform: uppercase; -webkit-text-stroke: var(--epaisseur-titre) currentColor; line-height: 1; }
.action__detail { color: var(--fumee); overflow-wrap: anywhere; }
.action__valeur { font-family: var(--f-label); font-weight: 600; font-size: var(--t-lg); letter-spacing: 0.04em; overflow-wrap: anywhere; user-select: all; }
.action__secondaire { margin-top: -0.5rem; color: var(--fumee); font-size: var(--t-sm); overflow-wrap: anywhere; }
.action__secondaire a { color: var(--craie); text-underline-offset: 0.2em; }
.action__secondaire a:hover { text-decoration-thickness: 2px; }
.action .groupe-btn { gap: 0.5rem; }
.action .btn { min-height: 2.9rem; flex: 1 1 auto; }
.action--principale .btn--plein { background: var(--noir); color: var(--craie); border-color: var(--noir); }
.action--principale .btn--plein:hover { background: transparent; color: var(--noir); }

.infos { display: grid; gap: 1.25rem; }
@media (min-width: 48em) { .infos__colonne { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
.infos__colonne .bloc-info { align-content: start; }
.infos__colonne { display: grid; gap: 1.25rem; align-content: start; }
/* Infos pratiques (accueil) */
.section--compacte { padding-block: clamp(2.5rem, 6vw, 4rem); }
.infos-pratiques { display: grid; gap: 1rem; align-items: start; }
.infos-pratiques .bloc-info { align-content: start; }
@media (min-width: 48em) { .infos-pratiques { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }

.bloc-info { display: grid; gap: 0.9rem; padding: 1.4rem; border: 1px solid var(--acier); border-radius: var(--rayon); background: var(--charbon); }
.bloc-info__titre { display: flex; align-items: center; gap: 0.6rem; font-family: var(--f-label); font-weight: 700; font-size: var(--t-lg); text-transform: uppercase; letter-spacing: 0.1em; }
.adresse { font-style: normal; font-size: var(--t-lg); line-height: 1.45; }
/* Horaires (cours + libre accès) : accueil et page Contact */
.horaires-club { display: grid; gap: 0.7rem; justify-items: start; }
.horaires-club__ligne { line-height: 1.45; }
.horaires-club__lien { font-size: var(--t-base); }
.horaires-club__lien + .horaires-club__ligne { margin-top: 0.35rem; padding-top: 0.9rem; border-top: 1px solid var(--acier); justify-self: stretch; }
.horaires { display: grid; }
.horaires div { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.6rem; border-bottom: 1px solid var(--acier); }
.horaires div:last-child { border-bottom: 0; }
.horaires dt { color: var(--fumee); }
.horaires dd { margin: 0; font-family: var(--f-label); font-weight: 600; font-size: var(--t-lg); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.copie-ok { color: var(--craie); font-family: var(--f-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--t-sm); }

/* ---------- Pied de page ---------- */
.pied {
  border-top: 1px solid var(--acier);
  padding-block: clamp(3rem, 8vw, 4.5rem) calc(1.5rem + env(safe-area-inset-bottom, 0px));
  background: var(--noir);
}
.pied__grille { display: grid; gap: 2.25rem; }
/* Mobile : logo sur toute la largeur, puis les listes sur 2 colonnes (pied plus court) */
@media (max-width: 47.99em) {
  .pied { padding-top: 2rem; }
  .pied__grille { grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; }
  .pied__grille > :first-child { grid-column: 1 / -1; }
  .pied__grille > :last-child { grid-column: 2; grid-row: 2 / span 2; }
  .pied__bas { margin-top: 1.25rem; padding-top: 1.1rem; }
}
@media (min-width: 48em) { .pied__grille { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; } }
.pied .marque { align-items: flex-start; justify-content: center; min-height: 44px; }
.pied .marque__legacy { font-size: 2.2rem; transform-origin: left; }
.pied .marque__gym { font-size: 0.78rem; }
.pied__slogan { margin-top: 1rem; color: var(--fumee); max-width: 18rem; }
.pied__titre { font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--t-sm); color: var(--fumee); margin-bottom: 0.9rem; }
.pied__liste { display: grid; gap: 0; }
/* zone cliquable d'au moins 44 px de haut */
.pied__liste a, .pied__legal {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em;
  transition: text-decoration-color var(--duree);
}
.pied__liste a:hover, .pied__legal:hover { text-decoration-color: currentColor; }
.pied__bas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem;
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--acier);
  color: var(--fumee); font-size: var(--t-sm);
}

/* ---------- Barre d'action mobile (essai WhatsApp) ---------- */
.barre-essai {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 0.65rem var(--gouttiere) calc(0.65rem + env(safe-area-inset-bottom, 0px));
  background: rgba(11, 11, 10, 0.94);
  border-top: 1px solid var(--acier);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transform: translateY(110%);
  transition: transform 300ms ease;
}
.barre-essai.est-visible { transform: none; }
@media (min-width: 60em) { .barre-essai { display: none; } }
/* Pas de marge sous le pied : la barre « Réserver un essai » se cache dès que le pied de page apparaît */

/* ---------- Apparition au défilement ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.anim .reveal:not(.est-visible) { opacity: 0; transform: translateY(22px); }
  html.anim .reveal { transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.8,.2,1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Mentions légales ---------- */
.texte-legal { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); max-width: 46rem; }
.texte-legal__bloc { display: grid; gap: 0.7rem; padding-top: 1.25rem; border-top: 3px solid var(--craie); }
.texte-legal__titre { font-family: var(--f-titre); font-size: var(--t-xl); text-transform: uppercase; line-height: 1.05; -webkit-text-stroke: var(--epaisseur-titre) currentColor; }
.texte-legal p { color: var(--fumee); }
.texte-legal a { color: var(--craie); text-underline-offset: 0.2em; }
.a-completer { color: var(--craie); font-weight: 700; }

/* ---------- Accueil plus court sur mobile (objectif : 5 écrans) ---------- */
@media (max-width: 47.99em) {
  body[data-page="accueil"] .section__tete { margin-bottom: 1.25rem; gap: 0.75rem; }
  body[data-page="accueil"] .discipline { padding: 0.85rem 0.25rem; gap: 0.25rem 1rem; }
  body[data-page="accueil"] .discipline__texte { font-size: var(--t-sm); line-height: 1.45; }
  body[data-page="accueil"] .infos-pratiques { gap: 0.75rem; }
  body[data-page="accueil"] .infos-pratiques .bloc-info { padding: 1.1rem; gap: 0.7rem; }
  body[data-page="accueil"] #galerie-apercu .tuile { height: var(--col); }
  body[data-page="accueil"] { --section: 2.25rem; }
  body[data-page="accueil"] .hero__contenu { padding-block: 2.25rem 1.75rem; gap: 1.25rem; }
  body[data-page="accueil"] .pilier { padding: 1rem 0.4rem 1.1rem; }
  body[data-page="accueil"] .infos-pratiques__phrase { display: none; }
  body[data-page="accueil"] .carte-coach { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); }
  body[data-page="accueil"] .horaires-club { gap: 0.5rem; }
  body[data-page="accueil"] .horaires-club__lien + .horaires-club__ligne { margin-top: 0.15rem; padding-top: 0.6rem; }
  body[data-page="accueil"] .section__tete .lien-fleche { font-size: var(--t-base); }
  /* Adresse et bouton Itinéraire sur la même ligne */
  body[data-page="accueil"] .infos-pratiques .bloc-info:first-child { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 0.75rem; }
  body[data-page="accueil"] .infos-pratiques .bloc-info:first-child .bloc-info__titre { grid-column: 1 / -1; }
  body[data-page="accueil"] .infos-pratiques .bloc-info:first-child .adresse { font-size: var(--t-base); }
  .pied__slogan { display: none; }
}