@charset "UTF-8";
/* =========================================================================
   TACTICAL FIGHT TEAM — ALBI (81000)
   Direction artistique du réseau Tactical Fight Team : industriel & tactique.
   Acier noir, jaune signal #FFE100, diagonales, grillage de cage,
   typographie condensée en capitales.
   ========================================================================= */

/* --------------------------------------------------------- 0. POLICES
   Auto-hébergées : aucun appel vers les serveurs de Google (RGPD).
   ------------------------------------------------------------------- */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/saira-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/saira-condensed-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/saira-condensed-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/saira-condensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------- 1. TOKENS */
:root {
  /* Couleurs */
  --noir:        #08090a;
  --noir-profond:#050506;
  --charbon:     #101214;
  --acier:       #17191c;
  --acier-clair: #23262b;
  --fumee:       #3a3f46;   /* traits décoratifs uniquement */
  --gris-texte:  #868d96;   /* texte secondaire */
  --trait:       #6b727b;   /* contours de composants (WCAG 1.4.11) */
  --craie:       #f2f0ec;
  --craie-douce: #b9b7b2;

  --jaune:       #FFE100;   /* jaune TFT — aplats, traits, boutons */
  --accent-texte: var(--jaune);  /* jaune en TEXTE ; réécrit sur fond clair */

  /* Surfaces claires (sections « respiration ») */
  --creme:       #F5F3EE;
  --creme-fonce: #EBE8E1;
  --encre:       #15171b;
  --encre-douce: #4c5056;
  --or-sombre:   #6a5c00;   /* le jaune, lisible sur crème */
  --jaune-vif:   #ffec59;
  --jaune-sombre:#c9b200;
  --sang:        #c1121f;

  /* Couleurs de discipline (planning) */
  --c-mma:    #FFE100;
  --c-boxe:   #ff8c42;
  --c-kick:   #ff5b5b;
  --c-grap:   #9b7bff;
  --c-fem:    #ff6b9d;
  --c-jeune:  #4ecdc4;
  --c-prepa:  #7ed855;
  --c-libre:  #868d96;
  --c-handi:  #50a0ff;

  /* Typographie */
  --f-titre:  "Anton", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --f-tech:   "Saira Condensed", "Oswald", "Arial Narrow", sans-serif;
  --f-texte:  "Archivo", "Helvetica Neue", sans-serif;

  /* Échelle typographique fluide */
  --t-hero:  clamp(3rem, 8.2vw, 7.4rem);
  --t-h1:    clamp(2.5rem, 6.8vw, 5.2rem);
  --t-h2:    clamp(2rem, 4.6vw, 3.6rem);
  --t-h3:    clamp(1.35rem, 2.2vw, 1.85rem);
  --t-lead:  clamp(1.05rem, 1.55vw, 1.3rem);
  --t-base:  clamp(1rem, 1.05vw, 1.075rem);

  /* Rythme */
  --gouttiere: clamp(1.25rem, 4vw, 3.5rem);
  --section-y: clamp(5.25rem, 11vw, 10.5rem);
  --max:       1280px;
  --max-texte: 68ch;

  --transi: 260ms cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------- 2. RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--noir);
  color: var(--craie);
  font-family: var(--f-texte);
  font-size: var(--t-base);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, picture, video { display: block; max-width: 100%; height: auto; }

/* Les <picture> qui servent de cadre plein doivent transmettre leur hauteur
   à l'<img> : sans cela l'image ne remplit pas son conteneur (fond noir). */
.heros__photo picture,
.entete-page__photo picture,
.carte__media picture,
.coach__visuel picture,
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; }
::selection { background: var(--jaune); color: var(--noir); }

/* Grain global : donne de la matière au noir */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------- 3. UTILITAIRES / MISE EN PAGE */
.conteneur {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: var(--section-y); position: relative; }
.section--acier { background: var(--charbon); --fond-local: var(--charbon); }
.section--serre { padding-block: clamp(3.5rem, 7vw, 6rem); }

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--jaune);
  color: var(--noir);
  padding: .85rem 1.4rem;
  font-family: var(--f-tech);
  font-weight: 700;
  text-transform: uppercase;
}
.lien-evitement:focus { left: 0; }

.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Trame « grillage de cage » — signature visuelle du réseau TFT */
.trame-cage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    repeating-linear-gradient(45deg,  transparent 0 26px, rgba(255,255,255,.045) 26px 27px),
    repeating-linear-gradient(-45deg, transparent 0 26px, rgba(255,255,255,.045) 26px 27px);
  mask-image: radial-gradient(ellipse 90% 75% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 40%, #000 20%, transparent 78%);
}

/* ------------------------------------------------------------- 4. TITRAGE */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent-texte);
  margin-bottom: 1.1rem;
}
.kicker::before { content: ""; width: 2.4rem; height: 2px; background: var(--accent-texte); }

.scotch {
  display: inline-block;
  background: var(--noir-profond);
  color: var(--craie);
  font-family: var(--f-titre);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.08;
  padding: .35em .7em .3em;
  transform: rotate(-1.6deg);
  box-shadow: 4px 4px 0 rgba(255,225,0,.22);
}
.scotch em { font-style: normal; color: var(--jaune); }

h1, h2, h3, h4 {
  font-family: var(--f-titre);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -0.005em;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.15; }

.jaune { color: var(--jaune); }
.contour { color: transparent; -webkit-text-stroke: 2px #5c5a46; }

.chapeau {
  font-size: var(--t-lead);
  color: var(--craie-douce);
  max-width: var(--max-texte);
}

.prose > * + * { margin-top: 1.15rem; }
.prose p, .prose li { color: var(--craie-douce); max-width: var(--max-texte); }
.prose h2 { margin-top: 2.6rem; }
.prose h3 { margin-top: 2rem; color: var(--craie); }
.prose strong { color: var(--craie); font-weight: 700; }
.prose a:not(.btn):not(.lien-fleche) {
  color: var(--jaune);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:not(.btn):not(.lien-fleche):hover { color: var(--jaune-vif); }
.prose ul { list-style: none; }
.prose ul li { position: relative; padding-left: 1.6rem; }
.prose ul li + li { margin-top: .55rem; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: .55rem; height: .55rem;
  background: var(--jaune);
  transform: rotate(45deg);
}

/* -------------------------------------------------------------- 5. BOUTONS */
.btn {
  --btn-fond: var(--jaune);
  --btn-texte: var(--noir);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: .68rem 1.35rem;
  background: var(--btn-fond);
  color: var(--btn-texte);
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  text-align: center;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition: background var(--transi), color var(--transi), transform var(--transi);
}
.btn:hover, .btn:focus-visible { transform: translate(-2px, -2px); background: var(--jaune-vif); }
.btn:active { transform: translate(0, 0); }

.btn--fantome { --btn-fond: var(--trait); --btn-texte: var(--craie); }
.btn--fantome::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  background: var(--fond-local, var(--noir));
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  transition: background var(--transi);
}
.btn--fantome:hover, .btn--fantome:focus-visible { background: var(--craie); color: var(--noir); }
.btn--fantome:hover::before, .btn--fantome:focus-visible::before { background: var(--craie); }

.btn--large { width: 100%; }

.groupe-btn { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-tech);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .85rem;
  color: var(--accent-texte);
}
.lien-fleche span { transition: transform var(--transi); }
.lien-fleche:hover span, a:hover .lien-fleche span { transform: translateX(6px); }

/* -------------------------------------------------------------- 6. EN-TÊTE */
.entete {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(8,9,10,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--acier-clair);
}
.entete__inner { display: flex; align-items: center; gap: 1.25rem; min-height: 4.6rem; }

.marque { display: flex; align-items: center; gap: .8rem; margin-right: auto; }
/* Le sigle est détouré : il se pose sur le fond de la barre sans carré noir.
   Un filet vertical le relie au bloc de texte plutôt que de le laisser flotter. */
.marque img { width: 46px; height: 46px; display: block; }
.marque__texte {
  padding-left: .8rem;
  border-left: 1px solid var(--trait);
}
.marque__texte { display: flex; flex-direction: column; line-height: 1; justify-content: center; }
.marque__nom {
  font-family: var(--f-titre);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.marque__lieu {
  font-family: var(--f-tech);
  font-weight: 600;
  font-size: .62rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent-texte);
  margin-top: .22rem;
}

.nav-principale > ul { display: flex; align-items: center; gap: clamp(.6rem, 1.4vw, 1.5rem); }
.nav-principale a {
  position: relative;
  display: inline-block;
  font-family: var(--f-tech);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--craie-douce);
  padding: .4rem 0;
  transition: color var(--transi);
}
.nav-principale > ul > li > a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--jaune);
  transition: width var(--transi);
}
.nav-principale a:hover, .nav-principale a:focus-visible { color: var(--craie); }
.nav-principale > ul > li > a:hover::after,
.nav-principale > ul > li > a[aria-current="page"]::after { width: 100%; }
.nav-principale a[aria-current="page"] { color: var(--jaune); }

/* Accès rapide aux disciplines */
.nav-sous { position: relative; }
.nav-sous__panneau {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 15rem;
  background: var(--noir-profond);
  border: 1px solid var(--acier-clair);
  border-top: 2px solid var(--jaune);
  padding: .5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transi), transform var(--transi), visibility var(--transi);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
.nav-sous:hover .nav-sous__panneau,
.nav-sous:focus-within .nav-sous__panneau { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-sous__panneau a { display: block; padding: .55rem .8rem; font-size: .82rem; }
.nav-sous__panneau a:hover { background: var(--acier); color: var(--jaune); }
.nav-sous > a::before { content: ""; position: absolute; inset: 0 -.4rem -12px; }

.entete .btn { padding: .7rem 1.25rem; font-size: .78rem; }

.burger {
  display: none;
  width: 46px; height: 46px;
  background: none;
  border: 1px solid var(--acier-clair);
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.burger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--craie);
  transition: transform var(--transi), opacity var(--transi);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.tiroir {
  position: fixed;
  inset: 4.6rem 0 auto 0;
  z-index: 890;
  background: var(--noir-profond);
  --fond-local: var(--noir-profond);
  border-bottom: 2px solid var(--jaune);
  padding: 1.25rem var(--gouttiere) 2.5rem;
  transform: translateY(-115%);
  visibility: hidden;
  transition: transform 340ms cubic-bezier(.22,.61,.36,1), visibility 340ms;
  max-height: calc(100dvh - 4.6rem);
  overflow-y: auto;
}
.tiroir[data-ouvert="true"] { transform: translateY(0); visibility: visible; }
.tiroir a {
  display: block;
  padding: .8rem 0;
  border-bottom: 1px solid var(--acier);
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tiroir a[aria-current="page"] { color: var(--jaune); }
.tiroir .btn { margin-top: 1.6rem; }
.tiroir__groupe { padding: .5rem 0 .2rem; }
.tiroir__groupe > p {
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--jaune);
  padding-top: .9rem;
}
.tiroir__groupe a { font-size: .95rem; padding-left: 1rem; color: var(--craie-douce); }

@media (max-width: 1100px) {
  .nav-principale, .entete__inner > .btn { display: none; }
  .burger { display: flex; }
}

/* ---------------------------------------------------------------- 7. HÉROS */
.heros {
  position: relative;
  min-height: min(92dvh, 900px);
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 10vw, 7rem);
  /* Noir profond travaillé : une lueur jaune très basse côté titre, et un
     dégradé qui referme le bas vers la section suivante. */
  background:
    radial-gradient(ellipse 62% 72% at 50% 46%, rgba(255,225,0,.1), transparent 66%),
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(120,130,150,.09), transparent 70%),
    linear-gradient(180deg, #0a0a0c 0%, var(--noir) 55%, #050506 100%);
  --fond-local: var(--noir);
  overflow: hidden;
}
/* Sigle du club en filigrane : il occupe la moitié droite laissée vide par la
   suppression de la photo, sans jamais concurrencer le titre. */
.heros__sigle {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: min(78vw, 600px);
  height: auto;
  opacity: .075;
  pointer-events: none;
}
/* Filet jaune sur le bord bas : la césure avec la section suivante devient
   une ligne nette plutôt qu'un simple changement de fond. */
.heros::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,225,0,.5) 25%, var(--jaune) 50%, rgba(255,225,0,.5) 75%, transparent);
  z-index: 3;
}
.heros__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.heros__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: grayscale(.18) contrast(1.08) brightness(.86);
  transform: scale(1.04);
}
/* Voile sombre : lisibilité du texte par-dessus la photo */
.heros__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(5,5,6,.9) 0%, rgba(5,5,6,.72) 26%, rgba(5,5,6,.3) 62%, rgba(5,5,6,.46) 100%),
    linear-gradient(180deg, rgba(5,5,6,.72), rgba(5,5,6,.1) 34%, rgba(5,5,6,.88));
}
.heros__contenu {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.heros__contenu > * { max-width: 60ch; }
.heros__titre {
  font-family: var(--f-titre);
  text-transform: uppercase;
  line-height: .88;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* « CLUB DE MMA » est plus court que « GRAPPLING ET BOXE » : on l'écarte pour
   que les deux lignes forment un bloc de largeur égale, comme sur une affiche.
   La marge de gauche compense l'espacement ajouté après la dernière lettre. */
.heros__ligne { display: block; font-size: var(--t-hero); letter-spacing: -.012em; }
.heros__ligne:first-child {
  letter-spacing: .19em;
  margin-inline-start: .19em;
  color: var(--craie);
}
.heros__titre .jaune { text-shadow: 0 0 70px rgba(255,225,0,.3); }

/* « ALBI » en bandeau : deux filets et un mot très espacé, ça pose la ville
   sans lui donner le poids d'une troisième ligne de titre. */
.heros__lieu {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2.4vw, 1.8rem);
  margin-top: clamp(1rem, 2vw, 1.6rem);
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: clamp(.95rem, 1.65vw, 1.4rem);
  letter-spacing: .58em;
  text-indent: .58em;
  color: var(--jaune);
  line-height: 1;
}
.heros__lieu::before,
.heros__lieu::after {
  content: "";
  height: 1px;
  width: clamp(2.5rem, 9vw, 7rem);
  background: linear-gradient(90deg, transparent, rgba(255,225,0,.65));
}
.heros__lieu::after { background: linear-gradient(90deg, rgba(255,225,0,.65), transparent); }
/* Phrase d'accroche en Saira Condensed : la même condensée que les libellés
   du site, elle prolonge le titre en Anton au lieu de retomber en texte courant. */
.heros .chapeau {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  margin-inline: auto;
  text-align: center;
  color: #e6e4df;
  font-family: var(--f-texte);
  font-weight: 400;
  font-size: clamp(1.02rem, 1.35vw, 1.24rem);
  line-height: 1.62;
  letter-spacing: .015em;
  max-width: 46ch;
}
.heros .groupe-btn { justify-content: center; margin-top: clamp(1.8rem, 3.5vw, 2.8rem); }

.badge-essai {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: rgba(255,225,0,.1);
  border: 1px solid rgba(255,225,0,.35);
  color: var(--jaune);
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .5rem 1rem;
  margin-bottom: 1.6rem;
}
.badge-essai::before {
  content: "";
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--jaune);
  box-shadow: 0 0 0 0 rgba(255,225,0,.6);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 10px rgba(255,225,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,225,0,0); }
}

/* Repères chiffrés sous le héros */
.heros__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.4rem, 4vw, 3rem);
  margin-top: 2.8rem;
  max-width: none;
}
.heros__repere { display: flex; flex-direction: column; }
.heros__repere b {
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1;
  color: var(--jaune);
}
.heros__repere span {
  font-family: var(--f-tech);
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--craie-douce);
  margin-top: .35rem;
}

/* En-tête de page intérieure */
.entete-page {
  position: relative;
  padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 6vw, 4.5rem);
  background:
    radial-gradient(ellipse 60% 100% at 15% 0%, rgba(255,225,0,.09), transparent 60%),
    linear-gradient(180deg, var(--noir-profond), var(--noir) 70%);
  --fond-local: var(--noir);
  border-bottom: 1px solid var(--acier-clair);
  overflow: hidden;
}
.entete-page--photo { background: var(--noir); }
.entete-page__photo { position: absolute; inset: 0; z-index: 0; }
.entete-page__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: grayscale(.22) contrast(1.05) brightness(.8);
}
.entete-page__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(5,5,6,.94) 0%, rgba(5,5,6,.76) 42%, rgba(5,5,6,.36) 100%),
    linear-gradient(180deg, rgba(5,5,6,.66), transparent 42%, rgba(8,9,10,.88));
}
.entete-page__inner { position: relative; z-index: 2; }
.entete-page .chapeau { margin-top: 1.5rem; }

.fil-ariane {
  font-family: var(--f-tech);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris-texte);
  margin-bottom: 1.4rem;
}
.fil-ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.fil-ariane li + li::before { content: "/"; margin-right: .5rem; color: var(--fumee); }
/* Cible tactile d'au moins 24 px de haut : ces liens sont isolés, pas noyés
   dans un paragraphe, la règle de taille minimale s'y applique. */
.fil-ariane a { display: inline-block; padding-block: .3rem; }

/* Même règle pour les autres liens isolés : listes du plan du site et liens
   fléchés. Un lien au fil du texte en est dispensé, il suit la ligne. */
[data-page="plan-du-site"] .prose li > a,
a.lien-fleche,
.lien-fleche a { display: inline-block; padding-block: .25rem; }
.fil-ariane a:hover { color: var(--jaune); }

/* ------------------------------------------------------ 8. BANDE DÉFILANTE */
.bandeau {
  background: var(--jaune);
  color: var(--noir);
  padding: .9rem 0;
  overflow: hidden;
  border-block: 2px solid var(--noir-profond);
}
.bandeau__piste { display: flex; width: max-content; animation: defile 38s linear infinite; }
.bandeau ul { display: flex; align-items: center; }
.bandeau li {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  padding-right: 2.2rem;
  font-family: var(--f-titre);
  font-size: 1.15rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bandeau li::after { content: "◆"; font-size: .55rem; }
@keyframes defile { to { transform: translateX(-50%); } }
.bandeau:hover .bandeau__piste { animation-play-state: paused; }

/* ------------------------------------------------------------- 9. GRILLES */
.grille { display: grid; gap: clamp(1.1rem, 2vw, 1.6rem); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* Cinq éléments dans une grille de trois : la première carte occupe deux
   colonnes, ce qui remplit exactement deux rangées au lieu de laisser une
   carte orpheline. */
@media (min-width: 62rem) {
  .grille--cinq { grid-template-columns: repeat(3, 1fr); }
  .grille--cinq > :first-child { grid-column: span 2; }
  /* La carte large passe en deux colonnes (photo | texte) pour garder la même
     hauteur que les cartes simples de la rangée. */
  .grille--cinq > .carte--visuel:first-child { display: grid; grid-template-columns: 1fr 1fr; }
  .grille--cinq > .carte--visuel:first-child .carte__media { aspect-ratio: auto; height: 100%; }
}

.duo {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.entete-section {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2.2rem, 4vw, 3.4rem);
}
.entete-section__texte { max-width: 46ch; }

/* -------------------------------------------------------------- 10. CARTES */
.carte {
  position: relative;
  background: var(--acier);
  --fond-local: var(--acier);
  border: 1px solid var(--acier-clair);
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  transition: border-color var(--transi), transform var(--transi), background var(--transi);
  overflow: hidden;
}
.carte::after {
  content: "";
  position: absolute;
  right: 0; top: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 26px 26px 0;
  border-color: transparent var(--acier-clair) transparent transparent;
  transition: border-color var(--transi);
}
.carte:hover { border-color: rgba(255,225,0,.5); transform: translateY(-5px); background: #1b1e22; --fond-local: #1b1e22; }
.carte:hover::after { border-right-color: var(--jaune); }

.carte__num {
  font-family: var(--f-titre);
  font-size: 2.6rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--fumee);
  margin-bottom: .9rem;
}
.carte h3 { margin-bottom: .7rem; }
.carte h3 a::after { content: ""; position: absolute; inset: 0; }
.carte p { color: var(--craie-douce); font-size: .96rem; }
.carte .lien-fleche { margin-top: 1.2rem; }
.carte--discipline h3 { color: var(--accent-texte); }

/* Carte discipline avec photo */
.carte--visuel { padding: 0; display: flex; flex-direction: column; }
.carte--visuel .carte__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--charbon); }
.carte--visuel .carte__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.45) contrast(1.05) brightness(.85);
  transition: transform 700ms cubic-bezier(.22,.61,.36,1), filter var(--transi);
}
.carte--visuel:hover .carte__media img { transform: scale(1.06); filter: grayscale(.1) brightness(.95); }
.carte--visuel .carte__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(8,9,10,.9));
}
.carte--visuel .carte__num {
  position: absolute;
  left: 1.1rem; top: .6rem;
  z-index: 2;
  margin: 0;
  -webkit-text-stroke: 1.5px rgba(255,225,0,.75);
}
.carte--visuel .carte__corps { padding: clamp(1.3rem, 2.4vw, 1.9rem); display: flex; flex-direction: column; flex: 1; }
.carte--visuel .lien-fleche { margin-top: auto; padding-top: 1.2rem; }

.etiquette {
  display: inline-block;
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  background: rgba(255,225,0,.12);
  color: var(--jaune);
  border: 1px solid rgba(255,225,0,.3);
}
.etiquette--neutre { background: var(--acier-clair); color: var(--craie-douce); border-color: var(--trait); }

/* --------------------------------------------------------- 10bis. COACHS */
/* Fiches coachs en bandes pleine largeur, portrait à gauche puis à droite.
   Une bio de quatre lignes y respire, et la rangée reste équilibrée quel que
   soit le nombre de coachs — ce qu'une grille de cartes ne garantit pas. */
.coachs {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.coach {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--acier);
  --fond-local: var(--acier);
  border: 1px solid var(--acier-clair);
  overflow: hidden;
  transition: border-color var(--transi), transform var(--transi);
}
.coach:hover { border-color: rgba(255,225,0,.45); transform: translateY(-4px); }
@media (min-width: 48rem) {
  .coach { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
  /* Une rangée sur deux inverse l'ordre : le portrait passe à droite et la
     colonne large suit le texte, sinon la bio se retrouve dans la gouttière. */
  .coach:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
  .coach:nth-child(even) .coach__visuel { order: 2; }
  .coach__texte { display: grid; align-content: center; }
}
.coach__visuel { position: relative; background: var(--charbon); min-height: 16rem; }
.coach__visuel img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--cadrage, center 18%);
  filter: grayscale(.4) contrast(1.06) brightness(.95);
}
/* Portrait pas encore fourni : monogramme sobre, jamais d'image cassée. */
.coach__visuel--vide {
  min-height: 9rem;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, rgba(255,255,255,.022) 10px 20px),
    var(--charbon);
}
.coach__visuel--vide span {
  font-family: var(--f-titre);
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  letter-spacing: .06em;
  color: rgba(255,225,0,.22);
  line-height: 1;
}
.section--clair .coach__visuel--vide {
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, rgba(21,23,27,.03) 10px 20px),
    #eceae4;
}
.section--clair .coach__visuel--vide span { color: rgba(21,23,27,.16); }

.coach__visuel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg, transparent 58%, rgba(255,225,0,.16)),
    linear-gradient(180deg, transparent 62%, rgba(8,9,10,.55));
  pointer-events: none;
}
.coach__texte {
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  text-align: left;
}
.coach__nom {
  font-family: var(--f-titre);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  text-transform: uppercase;
  line-height: 1.05;
}
.coach__role {
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-texte);
  margin-top: .5rem;
}
.coach__texte p {
  color: var(--craie-douce);
  font-size: .96rem;
  margin-top: 1rem;
  max-width: 54ch;
}
.coach__faits {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.coach__faits li {
  font-family: var(--f-tech);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--craie-douce);
  background: var(--charbon);
  border: 1px solid var(--acier-clair);
  padding: .32rem .7rem;
}

/* ------------------------------------------------------------- 12. PLANNING */
.planning { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }

.jour { background: var(--acier); border: 1px solid var(--acier-clair); display: flex; flex-direction: column; }
.jour__titre {
  background: var(--noir-profond);
  color: var(--craie);
  font-family: var(--f-titre);
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  text-align: center;
  padding: .5rem .4rem;
  border-bottom: 2px solid var(--jaune);
}
.jour__case { display: flex; flex-direction: column; gap: .35rem; padding: 0 .5rem; }
.jour__case:first-of-type { padding-top: .5rem; }
.jour__case:last-of-type { padding-bottom: .5rem; }
.jour__case:empty { display: none; }

/* Sur grand écran, les six colonnes partagent les mêmes lignes : un cours de
   11 h se lit à la même hauteur du lundi au samedi. Sans subgrid, la mise en
   page reste correcte, simplement non alignée. */
@media (min-width: 62rem) {
  .planning { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto repeat(7, auto); }
  .jour { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; }
  .jour__case { padding: 0 .5rem; }
  .jour__case:empty { display: block; }
  .jour__case:first-of-type { padding-top: .5rem; }
  .jour__case:last-of-type { padding-bottom: .5rem; }
}

.creneau {
  border-left: 3px solid var(--jaune);
  background: var(--charbon);
  padding: .45rem .55rem;
  transition: transform var(--transi), background var(--transi);
}
.creneau:hover { transform: translateX(4px); background: var(--acier-clair); }
.creneau__cours {
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: .84rem;
  line-height: 1.15;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--craie);
}
.creneau__heure {
  font-family: var(--f-tech);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--craie-douce);
  margin-top: .1rem;
}
.creneau__niveau {
  display: inline-block;
  font-family: var(--f-tech);
  font-weight: 600;
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris-texte);
  margin-top: .18rem;
}
.creneau--boxe  { border-left-color: var(--c-boxe); }
.creneau--kick  { border-left-color: var(--c-kick); }
.creneau--grap  { border-left-color: var(--c-grap); }
.creneau--fem   { border-left-color: var(--c-fem); }
.creneau--jeune { border-left-color: var(--c-jeune); }
.creneau--prepa { border-left-color: var(--c-prepa); }
.creneau--libre { border-left-color: var(--c-libre); }
.creneau--handi { border-left-color: var(--c-handi); }

/* Deux cours en parallèle sur le même créneau */
.creneau-duo { display: grid; gap: .35rem; grid-template-columns: 1fr; }
.creneau-duo::before {
  content: "En parallèle";
  font-family: var(--f-tech);
  font-weight: 600;
  font-size: .56rem;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fumee);
}

.legende { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; margin-top: 1.3rem; }
.legende li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-tech);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--craie-douce);
}
.legende i { width: 1rem; height: 4px; background: var(--jaune); flex: 0 0 auto; }

/* --------------------------------------------------------------- 13. TARIFS */
.tarifs { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); }

.tarif {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--acier);
  --fond-local: var(--acier);
  border: 1px solid var(--acier-clair);
  padding: clamp(1.7rem, 3vw, 2.3rem);
  transition: transform var(--transi), border-color var(--transi);
}
.tarif:hover { transform: translateY(-6px); border-color: rgba(255,225,0,.45); }
.tarif--vedette { border-color: var(--jaune); background: linear-gradient(180deg, rgba(255,225,0,.07), var(--acier) 45%); }
.tarif__ruban {
  position: absolute;
  top: 0; right: 0;
  background: var(--jaune);
  color: var(--noir);
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .35rem .85rem;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
}
.tarif__nom { font-family: var(--f-titre); font-size: 1.55rem; text-transform: uppercase; color: var(--accent-texte); }
.tarif--vedette .tarif__nom { color: var(--jaune-vif); }
.tarif__sous {
  font-family: var(--f-tech);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--craie-douce);
  margin-top: .35rem;
  min-height: 2.4em;
}
.tarif__prix { display: flex; align-items: baseline; gap: .3rem; margin: 1.3rem 0 .2rem; }
.tarif__montant { font-family: var(--f-titre); font-size: clamp(2.8rem, 5vw, 3.6rem); line-height: 1; color: var(--craie); }
.tarif__unite {
  font-family: var(--f-tech);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--craie-douce);
}
.tarif__mention {
  font-family: var(--f-tech);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris-texte);
}
.tarif__alt {
  font-family: var(--f-tech);
  font-weight: 600;
  font-size: .84rem;
  letter-spacing: .05em;
  color: var(--accent-texte);
  border-top: 1px dashed var(--fumee);
  margin-top: 1rem;
  padding-top: .9rem;
}
.tarif ul { margin-top: 1.1rem; flex: 1; }
.tarif ul li { position: relative; padding-left: 1.5rem; font-size: .92rem; color: var(--craie-douce); }
.tarif ul li + li { margin-top: .5rem; }
.tarif ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .52em;
  width: .5rem; height: .5rem;
  background: var(--jaune);
  transform: rotate(45deg);
}
.tarif .btn { margin-top: 1.6rem; }

.encart { border-left: 4px solid var(--jaune); background: var(--charbon); padding: 1.3rem 1.5rem; margin-top: 2rem; }
.encart p { color: var(--craie-douce); }
.encart p + p { margin-top: .7rem; }
.encart strong { color: var(--craie); }
.encart a { color: var(--jaune); text-decoration: underline; text-underline-offset: 3px; }
.encart--alerte { border-left-color: var(--sang); }

/* ------------------------------------------------------------- 14. GALERIE */
/* -------------------------------------------------------------- 15. AVIS */
.avis-global {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  border: 1px solid var(--acier-clair);
  background: var(--acier);
  padding: clamp(1.3rem, 3vw, 2rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
}
.avis-global__note { font-family: var(--f-titre); font-size: clamp(3rem, 6vw, 4.2rem); line-height: 1; color: var(--jaune); }
.avis-etoiles { color: var(--jaune); letter-spacing: .18em; font-size: 1.05rem; }
.avis-global__meta {
  font-family: var(--f-tech);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--craie-douce);
  margin-top: .3rem;
}
.avis-global__source {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--f-tech);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris-texte);
  border: 1px solid var(--acier-clair);
  padding: .5rem .9rem;
}
.avis { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.avis__carte {
  position: relative;
  background: var(--charbon);
  border: 1px solid var(--acier-clair);
  padding: 1.5rem;
  overflow: hidden;
  transition: border-color var(--transi), transform var(--transi);
}
.avis__carte:hover { border-color: rgba(255,225,0,.4); transform: translateY(-4px); }
.avis__haut { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; }
.avis__initiales {
  width: 2.5rem; height: 2.5rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: rgba(255,225,0,.12);
  border: 1px solid rgba(255,225,0,.3);
  color: var(--jaune);
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
}
.avis__nom { font-family: var(--f-tech); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .9rem; }
.avis__texte { color: var(--craie-douce); font-size: .94rem; position: relative; z-index: 1; }
.avis__carte::after {
  content: "”";
  position: absolute;
  right: .4rem; bottom: -2.6rem;
  font-family: var(--f-titre);
  font-size: 7rem;
  color: rgba(255,225,0,.07);
  line-height: 1;
}

/* -------------------------------------------------------- 16. PARTENAIRES */
/* Mur de partenaires : le logo tient la vignette, le texte se lit dessous.
   La grille se remplit d'elle-même, donc rien ne dépend du nombre exact de
   partenaires — une dernière ligne incomplète reste naturelle. */
.partenaires-majeurs {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1.2rem, 2.4vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.partenaire {
  display: flex;
  flex-direction: column;
  background: none;
  --fond-local: var(--noir);
}
.partenaire__logo {
  display: grid;
  place-items: center;
  height: clamp(8rem, 11vw, 9.5rem);
  padding: clamp(1rem, 2vw, 1.5rem);
  overflow: hidden;
  background: var(--acier);
  border: 1px solid var(--acier-clair);
  transition: border-color var(--transi), background var(--transi);
}
.partenaire:hover .partenaire__logo { border-color: rgba(255,225,0,.55); }

/* Distinction discrète des partenaires principaux : un liseré jaune en haut
   de la vignette et une étiquette. Même taille, même grille que les autres. */
.partenaire--principal .partenaire__logo { border-top: 3px solid var(--jaune); }
.partenaire__rang {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-texte);
  border: 1px solid currentColor;
  padding: .16rem .45rem;
  margin-bottom: .5rem;
}
/* Le <picture> se comporte comme l'image qu'il contient et se plie à la
   hauteur de la tuile ; l'image reçoit en plus un plafond absolu. */
.partenaire__logo picture {
  display: grid;
  place-items: center;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
}
.partenaire__logo img {
  max-height: clamp(5rem, 7.5vw, 6.5rem);
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.partenaire__logo .logo-case__nom { opacity: .8; text-align: center; }
.partenaire__logo--lien { cursor: pointer; }
.partenaire__logo--lien img { transition: transform var(--transi); }
.partenaire__logo--lien:hover img { transform: scale(1.05); }

.partenaire__corps {
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.partenaire__secteur {
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-texte);
  margin-bottom: .3rem;
}
.partenaire__nom { font-family: var(--f-titre); font-size: 1.25rem; text-transform: uppercase; line-height: 1.1; }
.partenaire__liens { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: .7rem; }
.partenaire__liens a {
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-texte);
  border-bottom: 1px solid currentColor;
  padding-bottom: .12rem;
}

/* Grille « ils nous accompagnent » — logos harmonisés */
.logos {
  display: grid;
  gap: clamp(.9rem, 1.8vw, 1.4rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
}
.logo-case {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: 1.4rem;
  background: var(--charbon);
  border: 1px solid var(--acier-clair);
  transition: border-color var(--transi), background var(--transi), transform var(--transi);
}
.logo-case:hover { border-color: rgba(255,225,0,.45); background: var(--acier); transform: translateY(-4px); }
.logo-case img {
  max-width: 100%;
  max-height: 4.2rem;
  width: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(1.7) contrast(.9);
  opacity: .82;
  transition: filter var(--transi), opacity var(--transi);
}
.logo-case:hover img { filter: none; opacity: 1; }
.logo-case__nom {
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--craie-douce);
  text-align: center;
}

/* Emplacement partenaire libre */
.emplacement {
  display: grid;
  place-items: center;
  align-content: center;
  gap: .7rem;
  text-align: center;
  padding: 1.6rem;
  border: 1px dashed var(--fumee);
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(255,255,255,.025) 12px 13px),
    var(--charbon);
  min-height: 10.5rem;
}
.emplacement span {
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gris-texte);
  line-height: 1.7;
}
.emplacement b { color: var(--jaune); font-weight: 700; display: block; }

/* Bénéfices partenaires */
.benefices { display: grid; gap: 1px; background: var(--acier-clair); border: 1px solid var(--acier-clair); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.benefice { background: var(--acier); padding: clamp(1.3rem, 2.4vw, 1.8rem); transition: background var(--transi); }
.benefice:hover { background: #1b1e22; }
.benefice__num {
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .24em;
  color: var(--accent-texte);
}
.benefice h3 { font-size: 1.15rem; margin: .6rem 0 .5rem; }
.benefice p { color: var(--craie-douce); font-size: .92rem; }

/* Actualités partenaires */
.actus { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.actu {
  display: flex;
  flex-direction: column;
  background: var(--acier);
  border: 1px solid var(--acier-clair);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
}
.actu__date {
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris-texte);
}
.actu h3 { font-size: 1.2rem; margin: .6rem 0 .6rem; }
.actu p { color: var(--craie-douce); font-size: .93rem; }

/* ------------------------------------------------------------ 17. INFOS/CTA */
.ruban-cta {
  position: relative;
  background:
    radial-gradient(ellipse 80% 120% at 50% 0%, rgba(255,225,0,.14), transparent 62%),
    var(--noir-profond);
  --fond-local: var(--noir-profond);
  border-block: 1px solid var(--acier-clair);
  text-align: center;
  overflow: hidden;
}
.ruban-cta__inner { position: relative; z-index: 2; }
.ruban-cta .groupe-btn { justify-content: center; }
.ruban-cta .chapeau { margin-inline: auto; }

.info-bloc { display: flex; gap: 1.1rem; padding: 1.4rem 0; border-bottom: 1px solid var(--acier-clair); }
.info-bloc:last-child { border-bottom: none; }
.info-bloc__icone {
  flex: 0 0 auto;
  width: 2.6rem; height: 2.6rem;
  display: grid;
  place-items: center;
  background: rgba(255,225,0,.1);
  border: 1px solid rgba(255,225,0,.3);
  color: var(--jaune);
}
.info-bloc dt {
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-texte);
  margin-bottom: .3rem;
}
.info-bloc dd { color: var(--craie-douce); }
.info-bloc dd a { color: var(--jaune); text-decoration: underline; text-underline-offset: 3px; }
.info-bloc dd a:hover { color: var(--jaune-vif); }

.carte-plan {
  width: 100%;
  aspect-ratio: 16 / 11;
  border: 1px solid var(--acier-clair);
  filter: grayscale(1) invert(.92) contrast(.78) brightness(1.25);
}

.cadre { position: relative; border: 1px solid var(--acier-clair); background: var(--charbon); padding: .6rem; }
.cadre::before, .cadre::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--jaune); }
.cadre::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.cadre::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.cadre img { width: 100%; }

/* --------------------------------------------------------- 18. FAQ / DÉTAILS */
.faq { border-top: 1px solid var(--acier-clair); }
.faq details { border-bottom: 1px solid var(--acier-clair); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.3rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: color var(--transi);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--jaune); }
.faq summary::after {
  content: "+";
  font-family: var(--f-titre);
  font-size: 1.5rem;
  color: var(--jaune);
  line-height: 1;
  transition: transform var(--transi);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-bottom: 1.4rem; }
.faq details p { color: var(--craie-douce); max-width: var(--max-texte); }
.faq details p + p { margin-top: .9rem; }
.faq details a { color: var(--jaune); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------- 19. PIED DE PAGE */
.pied { background: var(--noir-profond); border-top: 2px solid var(--jaune); padding-block: clamp(2.2rem, 4vw, 3.2rem) 1.4rem; }
/* Le pied ne garde que l'identité du club : la navigation complète vit dans
   l'en-tête et sur le plan du site. */
.pied__haut {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: center;
  justify-content: space-between;
}
.pied__marque { max-width: 46ch; }
.pied__marque p { color: var(--craie-douce); font-size: .88rem; line-height: 1.5; margin-top: .8rem; }
.pied h2, .pied h3 {
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--jaune);
  margin-bottom: .75rem;
}
.pied li + li { margin-top: 0; }
.pied nav a, .pied address a { color: var(--craie-douce); font-size: .88rem; transition: color var(--transi); }
.pied nav a { display: inline-block; padding-block: .15rem; }
.pied__bas a { display: inline-block; padding-block: .25rem; }
.pied nav a:hover, .pied address a:hover { color: var(--jaune); }
.pied address { font-style: normal; color: var(--craie-douce); font-size: .88rem; line-height: 1.6; }

.reseaux { display: flex; gap: .55rem; }
.reseaux a {
  width: 2.35rem; height: 2.35rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--acier-clair);
  color: var(--craie-douce);
  transition: all var(--transi);
}
.reseaux a:hover { background: var(--jaune); color: var(--noir); border-color: var(--jaune); transform: translateY(-3px); }

/* Bas de page centré : copyright, liens légaux puis signature, empilés au
   milieu plutôt que renvoyés aux deux bords. */
.pied__bas {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: .9rem;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 1.8rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--acier);
  font-family: var(--f-tech);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris-texte);
}
.pied__bas ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1.2rem;
}
.pied__bas ul li + li { margin-top: 0; }
.pied__bas a:hover { color: var(--jaune); }

/* ------------------------------------------------------------ 20. FORMULAIRE */
.formulaire { display: grid; gap: 1.1rem; }
.champ { display: flex; flex-direction: column; gap: .45rem; }
.champ label {
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--craie-douce);
}
.champ input, .champ select, .champ textarea {
  background: var(--charbon);
  border: 1px solid var(--acier-clair);
  padding: .85rem 1rem;
  color: var(--craie);
  font-size: 1rem;
  width: 100%;
  transition: border-color var(--transi), background var(--transi);
}
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--jaune); background: var(--acier); outline: none; }
.champ textarea { resize: vertical; min-height: 8rem; }
.champ--duo { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.champ small { color: var(--gris-texte); font-size: .78rem; }
.consentement { display: flex; gap: .7rem; align-items: flex-start; font-size: .87rem; color: var(--craie-douce); }
.consentement input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--jaune); flex: 0 0 auto; }
.consentement a { color: var(--jaune); text-decoration: underline; text-underline-offset: 3px; }

.retour-formulaire { border-left: 4px solid var(--jaune); background: rgba(255,225,0,.08); padding: 1.2rem 1.4rem; margin-top: 1.2rem; }
.retour-formulaire p { color: var(--craie-douce); font-size: .93rem; }
.retour-formulaire strong { color: var(--jaune); font-family: var(--f-tech); letter-spacing: .1em; text-transform: uppercase; }

/* Marqueur d'information à renseigner avant mise en ligne (pages légales) */
.a-completer {
  background: rgba(193,18,31,.18);
  border-bottom: 2px dashed var(--sang);
  color: var(--craie);
  padding: .05em .35em;
  font-family: var(--f-tech);
  font-weight: 600;
}

/* ---------------------------------------------------------- 21. ANIMATIONS */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms cubic-bezier(.22,.61,.36,1), transform 700ms cubic-bezier(.22,.61,.36,1);
}
[data-reveal].est-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- 22. IMPRESSION */
@media print {
  .entete, .tiroir, .bandeau, .ruban-cta, .btn, .reseaux { display: none !important; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
  .carte, .tarif, .jour, .partenaire { border: 1px solid #999; background: #fff; }
  .creneau__cours, .jour__titre, h1, h2, h3 { color: #000; }
}

/* ------------------------------------------------ 23. MODULE DE RÉSERVATION
   Intègre l'espace membre Deciplus du club directement dans la page. */
.module-resa {
  border: 1px solid var(--acier-clair);
  background: var(--noir-profond);
  overflow: hidden;
}
.module-resa__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--acier-clair);
  background: var(--charbon);
  font-family: var(--f-tech);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris-texte);
}
.module-resa__barre span:first-child { color: var(--jaune); font-weight: 700; }
.module-resa__cadre {
  display: block;
  width: 100%;
  /* Xplor Deciplus recommande ~1000 px de haut et bascule en affichage mobile
     sous 992 px de large : on laisse le module respirer au maximum. */
  height: 1000px;
  border: 0;
  background: #fff;   /* l'espace Deciplus est sur fond clair */
}
@media (max-width: 700px) {
  .module-resa__cadre { height: 78vh; min-height: 30rem; }
}

/* Conteneur élargi : le module de réservation a besoin de largeur */
.conteneur--large { max-width: 1440px; }

/* --------------------------------------------------- 24. SIGNATURE AGENCE */
.pied__signature {
  display: flex;
  justify-content: center;
  margin: 0;
}
.pied__signature a {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .2rem 0;
  transition: opacity var(--transi), transform var(--transi);
}
.pied__signature span {
  font-family: var(--f-tech);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gris-texte);
  transition: color var(--transi);
}
.pied__signature img {
  height: 1.7rem;
  width: auto;
  /* le logo est déjà au jaune TFT : on l'atténue au repos, plein au survol */
  opacity: .85;
  transition: opacity var(--transi);
}
.pied__signature a:hover span,
.pied__signature a:focus-visible span { color: var(--craie); }
.pied__signature a:hover img,
.pied__signature a:focus-visible img { opacity: 1; }
.pied__signature a:hover { transform: translateY(-2px); }

/* Jours d'un format de cours, sous la carte */
.carte__jours {
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px dashed var(--fumee);
  font-family: var(--f-tech) !important;
  font-weight: 700;
  font-size: .74rem !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-texte) !important;
}

/* ═══════════════════════════════════════════ 25. SECTIONS CLAIRES
   Une section « respiration » : on ne réécrit aucun composant, on redéfinit
   les jetons de couleur à l'intérieur du bloc. Cartes, boutons, formulaires
   et listes s'adaptent tout seuls. Le jaune reste le jaune en aplat ; en
   texte il bascule sur --or-sombre, lisible sur crème. */
.section--clair {
  background: var(--creme);
  color: var(--encre);

  --fond-local:   var(--creme);
  --noir:         var(--creme);
  --noir-profond: var(--creme-fonce);
  --charbon:      var(--creme-fonce);
  --acier:        #ffffff;
  --acier-clair:  #dcd8d0;
  --fumee:        #c4bfb5;
  --gris-texte:   #5d6167;
  --trait:        #9a958b;
  --craie:        var(--encre);
  --craie-douce:  var(--encre-douce);
  --accent-texte: var(--or-sombre);
}

/* Boutons : --noir est remappé sur du crème dans ce bloc, il ne peut donc plus
   servir de couleur de texte sur un aplat jaune. */
.section--clair .btn { --btn-texte: var(--encre); }
.section--clair .tarif__ruban { color: var(--encre); }

/* Cartes : sur fond clair, une ombre douce remplace le contour d'acier */
.section--clair .carte,
.section--clair .tarif,
.section--clair .partenaire,
.section--clair .coach {
  box-shadow: 0 1px 2px rgba(21,23,27,.04), 0 10px 30px -18px rgba(21,23,27,.28);
}
.section--clair .carte:hover,
.section--clair .tarif:hover,
.section--clair .partenaire:hover {
  border-color: var(--or-sombre);
  background: #fff;
  box-shadow: 0 2px 4px rgba(21,23,27,.06), 0 22px 46px -24px rgba(21,23,27,.4);
}
.section--clair .carte:hover { --fond-local: #fff; }
.section--clair .carte::after { border-right-color: #e6e2da; }
.section--clair .carte:hover::after { border-right-color: var(--jaune); }

/* Le numéro ajouré des cartes a besoin d'un trait plus soutenu sur clair */
.section--clair .carte__num { -webkit-text-stroke-color: #c4bfb5; }

/* Étiquettes et pastilles : aplat jaune franc, texte noir */
.section--clair .etiquette {
  background: var(--jaune);
  color: var(--encre);
  border-color: var(--jaune);
}
.section--clair .tarif--vedette {
  border-color: var(--jaune);
  background: linear-gradient(180deg, rgba(255,225,0,.16), #fff 55%);
}
.section--clair .tarif__montant { color: var(--encre); }
.section--clair .encart { background: #fff; border-left-color: var(--jaune); }
.section--clair .benefices { background: #dcd8d0; }
.section--clair .benefice { background: #fff; }
.section--clair .benefice:hover { background: var(--creme-fonce); }
.section--clair .emplacement { background: var(--creme-fonce); border-color: #c4bfb5; }
.section--clair .logo-case { background: #fff; border-color: #dcd8d0; }
.section--clair .logo-case img { filter: grayscale(1) contrast(.85); }
.section--clair .champ input,
.section--clair .champ select,
.section--clair .champ textarea { background: #fff; border-color: #cfcabf; }
.section--clair .retour-formulaire { background: rgba(255,225,0,.18); }
.section--clair .cadre { background: var(--creme-fonce); }
.section--clair ::selection { background: var(--jaune); color: var(--encre); }

/* Photos : sur fond clair on les laisse respirer, moins de désaturation */
.section--clair .carte--visuel .carte__media img,
.section--clair .coach__visuel img { filter: grayscale(.15) contrast(1.02); }
.section--clair .carte--visuel .carte__media::after {
  background: linear-gradient(180deg, transparent 55%, rgba(21,23,27,.55));
}

/* Sur fond clair, le jaune vif est illisible en texte : tout ce qui s'écrit
   en jaune bascule sur --or-sombre. Les aplats, eux, restent jaune vif. */
.section--clair .prose a:not(.btn):not(.lien-fleche),
.section--clair .encart a,
.section--clair .faq details a,
.section--clair .info-bloc dd a,
.section--clair .consentement a,
.section--clair .partenaire__liens a,
.section--clair .retour-formulaire strong,
.section--clair .emplacement b,
.section--clair .tarif--vedette .tarif__nom,
.section--clair .faq summary::after,
.section--clair .jaune { color: var(--or-sombre); }

.section--clair .prose a:not(.btn):not(.lien-fleche):hover,
.section--clair .encart a:hover,
.section--clair .info-bloc dd a:hover,
.section--clair .partenaire__liens a:hover { color: #4d4400; }
.section--clair .partenaire__liens a { border-bottom-color: rgba(106,92,0,.4); }
.section--clair .faq summary:hover { color: var(--or-sombre); }

/* Pastilles d'icône : aplat jaune franc plutôt qu'un voile invisible */
.section--clair .info-bloc__icone {
  background: var(--jaune);
  border-color: var(--jaune);
  color: var(--encre);
}
.section--clair .info-bloc { border-bottom-color: #dcd8d0; }

/* Puces losange des listes : elles restent jaunes, on les fonce d'un cran
   pour qu'elles se détachent du crème */
.section--clair .prose ul li::before,
.section--clair .tarif ul li::before { background: var(--or-sombre); }
/* Marqueur « à compléter » : rouge lisible sur crème (pages légales) */
.section--clair .a-completer {
  background: rgba(193,18,31,.12);
  color: #8e0f1a;
  border-bottom-color: #c1121f;
}

/* ═══════════════════════════════════ 26. DISCIPLINES EN LIGNES ALTERNÉES
   La page Nos disciplines n'empile plus des cartes : chaque discipline
   occupe une bande large, photo d'un côté, texte de l'autre, en alternance.
   Beaucoup d'air vertical entre les bandes. */
.disciplines-liste {
  display: flex;
  flex-direction: column;
  gap: clamp(3.5rem, 8vw, 7rem);
}

.discipline-ligne {
  display: grid;
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 60rem) {
  .discipline-ligne { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  /* une bande sur deux inverse photo et texte */
  .discipline-ligne:nth-child(even) .discipline-ligne__media { order: 2; }
}

.discipline-ligne__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--charbon);
}
.discipline-ligne__media picture { display: block; width: 100%; height: 100%; }
.discipline-ligne__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* --cadrage : posé sur le conteneur quand la photo demande un autre point
     d'ancrage que le centre (sujet haut ou bas dans l'image). */
  object-position: var(--cadrage, center);
  filter: grayscale(.2) contrast(1.03);
  transition: transform 900ms cubic-bezier(.22,.61,.36,1);
}
.discipline-ligne:hover .discipline-ligne__media img { transform: scale(1.04); }
/* Repère d'angle, comme les cadres photo du reste du site */
.discipline-ligne__media::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 26px; height: 26px;
  border-left: 3px solid var(--jaune);
  border-bottom: 3px solid var(--jaune);
}

.discipline-ligne__texte { max-width: 46ch; }
.discipline-ligne__num {
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .3em;
  color: var(--accent-texte);
  display: flex;
  align-items: center;
  gap: .7rem;
}
.discipline-ligne__num::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--acier-clair);
}
.discipline-ligne__nom {
  font-family: var(--f-titre);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1;
  text-transform: uppercase;
  margin: 1.1rem 0 1.2rem;
}
.discipline-ligne__nom a { display: inline-block; }
.discipline-ligne__nom a:hover { color: var(--accent-texte); }
.discipline-ligne__texte p { color: var(--craie-douce); font-size: var(--t-lead); }
.discipline-ligne__texte .lien-fleche { margin-top: 1.6rem; }

/* ════════════════════════════════════ 27. ÉTAPES DISCRÈTES (réservation)
   Trois repères sur une ligne, juste au-dessus du module de réservation.
   Volontairement effacés : c'est le module qui doit attirer l'œil. */
.etapes-fines {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2.2rem;
  align-items: baseline;
  margin-bottom: 1.4rem;
  font-family: var(--f-tech);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--craie-douce);
}
.etapes-fines li { display: flex; align-items: baseline; gap: .55rem; }
.etapes-fines b {
  font-weight: 700;
  color: var(--accent-texte);
  font-size: .86rem;
  letter-spacing: .16em;
}
@media (max-width: 40rem) {
  .etapes-fines { gap: .5rem 1.5rem; font-size: .86rem; }
}
/* Le lien de secours vit désormais dans la barre du module */
.module-resa__barre a {
  color: var(--accent-texte);
  border-bottom: 1px solid rgba(255,225,0,.35);
  padding-bottom: .1rem;
  transition: color var(--transi);
}
.module-resa__barre a:hover { color: var(--jaune-vif); }

/* Ligne de liens sobres : remplace une grille de cartes quand il ne s'agit
   que de naviguer, pas de présenter. */
.liens-fins {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2.4rem;
  font-family: var(--f-tech);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.liens-fins a { color: var(--craie-douce); transition: color var(--transi); display: inline-block; padding-block: .3rem; }
.liens-fins a:hover { color: var(--accent-texte); }
.liens-fins b { color: var(--accent-texte); font-weight: 700; font-size: .74rem; letter-spacing: .18em; margin-right: .35rem; }

/* Valeurs : des blocs de texte séparés par un filet, plutôt que des cartes.
   Moins de matière, plus de lecture. */
/* Rangées centrées : avec cinq valeurs, la dernière ligne n'en compte que
   deux et une grille les laisserait collées à gauche. */
.valeurs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.8rem, 3.5vw, 3rem) clamp(2rem, 5vw, 4.5rem);
}
.valeur {
  flex: 0 1 min(100%, 19rem);
  border-top: 1px solid var(--acier-clair);
  padding-top: 1.2rem;
  text-align: center;
}
.valeur h3 { font-size: 1.3rem; margin-bottom: .6rem; }
.valeur p { color: var(--craie-douce); font-size: .96rem; }

/* La photo du héros montre déjà le grillage réel de la cage : la trame
   graphique se fait discrète pour ne pas doubler le motif. */
.heros .trame-cage { opacity: .5; }

/* En colonne étroite, le texte passe par-dessus le centre de la photo :
   le voile devient vertical pour garder le contraste. */
@media (max-width: 46rem) {
  .heros__photo img { object-position: center 38%; }
  .heros__photo::after {
    background: linear-gradient(180deg,
      rgba(5,5,6,.6) 0%, rgba(5,5,6,.84) 20%, rgba(5,5,6,.8) 60%, rgba(5,5,6,.92) 100%);
  }
}

/* ------------------------------------- BANDEAU AVEC PHOTO ENTIÈRE
   Une photo d'action verticale rognée en fond de bandeau ne montre plus rien.
   Ici elle est posée à côté du titre, dans son cadrage d'origine. */
.entete-page--visuel { background: linear-gradient(180deg, var(--noir-profond), var(--noir) 70%); }
.entete-page__duo {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
.entete-page__visuel {
  display: block;
  border: 1px solid var(--acier-clair);
  box-shadow: 14px 14px 0 rgba(255, 225, 0, .1);
  max-width: 26rem;
}
.entete-page__visuel img { display: block; width: 100%; height: auto; }
@media (min-width: 60rem) {
  .entete-page__duo { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .entete-page__visuel { justify-self: end; max-width: 28rem; }
}

/* -------------------------------------------------- SECTION JEUNES
   Une ligne par tranche d'âge : le nom, l'âge, ce qu'on y fait, et les deux
   créneaux réels. Pas de cartes : la lecture reste verticale et calme. */
.jeunes { margin-top: 2rem; display: flex; flex-direction: column; }
.jeune { border-top: 1px solid var(--acier-clair); padding: 1.15rem 0; }
.jeune dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem .9rem; }
.jeune__nom {
  font-family: var(--f-titre);
  font-size: 1.18rem;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.jeune__age {
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-texte);
  border: 1px solid currentColor;
  padding: .18rem .5rem;
}
.jeune dd { margin: .5rem 0 0; }
.jeune dd p { color: var(--craie-douce); font-size: .96rem; }
.jeune__creneaux {
  margin-top: .4rem;
  font-family: var(--f-tech);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-texte) !important;
}

/* Cadre photo réutilisable : filet + décalage jaune, comme les autres visuels */
.cadre-photo {
  display: block;
  border: 1px solid var(--acier-clair);
  box-shadow: 14px 14px 0 rgba(255, 225, 0, .12);
}
.cadre-photo img { display: block; width: 100%; height: auto; }

/* ------------------------------------------------ AVANTAGES (page tarifs)
   Les trois informations qui décident souvent de l'inscription : elles ont
   le même poids visuel que les formules, pas celui d'une note de bas de page. */
.avantages {
  display: grid;
  gap: 1px;
  margin-top: clamp(2rem, 4vw, 3.2rem);
  background: var(--acier-clair);
  border: 1px solid var(--acier-clair);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.avantage {
  background: var(--acier);
  padding: clamp(1.5rem, 2.8vw, 2.1rem);
}
.avantage__valeur {
  font-family: var(--f-titre);
  font-size: clamp(2.1rem, 3.8vw, 2.9rem);
  line-height: 1;
  color: var(--accent-texte);
}
.avantage__valeur small { font-size: .38em; letter-spacing: .04em; }
.avantage__titre {
  margin-top: .7rem;
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--craie);
}
.avantage p:last-child {
  margin-top: .7rem;
  color: var(--craie-douce);
  font-size: .95rem;
}

/* Le pavé du logo devient cliquable quand le partenaire a un site. */
.partenaire__logo--lien { cursor: pointer; }
.partenaire__logo--lien img { transition: transform var(--transi); }
.partenaire__logo--lien:hover img { transform: scale(1.04); }

/* Le <picture> du logo doit se comporter comme l'image qu'il contient. */


/* Sous-titre à l'intérieur d'une section : annonce un groupe sans ouvrir une
   nouvelle rubrique. Plus léger qu'un h2, plus net qu'un simple paragraphe. */
.sous-titre {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--craie-douce);
  margin-bottom: 1.6rem;
}
.sous-titre::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--acier-clair);
}
.sous-titre + .partenaires-majeurs { margin-bottom: clamp(2.6rem, 5vw, 4rem); }
.partenaires-majeurs:last-child { margin-bottom: 0; }

/* Sur téléphone, la page partenaires passe en une colonne : tout se recentre
   sur un axe unique, du bandeau aux vignettes. Ciblé sur cette page seule,
   les autres rubriques gardent leur alignement à gauche. */
@media (max-width: 48rem) {
  .sous-titre { justify-content: center; }
  .sous-titre::before,
  .sous-titre::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--acier-clair);
  }

}

/* ═══════════════════════════════════════════ CENTRAGE GÉNÉRAL DES TEXTES
   Bandeaux de page, en-têtes de section, accroches et groupes de boutons sont
   centrés sur tout le site. Les blocs de données (planning, listes de tarifs,
   réponses de FAQ, pages légales) gardent leur alignement à gauche : centrer
   une liste ou un paragraphe long nuit à la lecture. */
.entete-page__inner,
.entete-section,
.entete-section__texte { text-align: center; }
/* En-tête de section empilé et centré : titre au-dessus, accroche dessous,
   plutôt que renvoyés chacun à un bord. */
.entete-section {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.entete-section__texte { margin-inline: auto; }
.entete-section .chapeau { margin-inline: auto; }
.benefice { text-align: center; }
.section > .conteneur > .groupe-btn { justify-content: center; }
.entete-page__inner .kicker,
.entete-section .kicker,
.section > .conteneur > .kicker { justify-content: center; }
/* Une accroche posée directement dans la section, sans en-tête au-dessus. */
.section > .conteneur > .chapeau { text-align: center; margin-inline: auto; }
.fil-ariane ol { justify-content: center; }
.entete-page__inner .chapeau,
.entete-section .chapeau,
.entete-page__inner h1,
.entete-section h2 { margin-inline: auto; }
.entete-page__inner .groupe-btn,
.entete-section + .groupe-btn { justify-content: center; }

/* L'en-tête de section passe en colonne : titre puis bouton, sur l'axe. */
.entete-section {
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

/* Bloc de texte à côté d'une image : le texte se centre aussi. */
.duo > div { text-align: center; }
.duo .kicker { justify-content: center; }
.duo .prose p,
.duo .prose li,
.duo .chapeau { margin-inline: auto; }
.duo .groupe-btn { justify-content: center; }

/* Une liste à puces centrée devient illisible : les marqueurs se décalent et
   l'œil perd le point de départ de chaque ligne. Les listes restent à gauche,
   simplement centrées en bloc. */
.prose ul, .prose ol, .liste-check {
  text-align: left;
  width: fit-content;
  margin-inline: auto;
}

/* Ce qui reste aligné à gauche : les données et les textes longs. */
.planning, .tarif__points, .faq, .pied,
[data-page="mentions-legales"] .prose,
[data-page="politique-de-confidentialite"] .prose,
[data-page="plan-du-site"] .prose { text-align: left; }

/* En colonne étroite, l'écartement de la première ligne la fait passer à la
   ligne : on le retire, la largeur disponible fait le travail. */
@media (max-width: 48rem) {
  .heros__ligne:first-child { letter-spacing: .02em; margin-inline-start: 0; }
}


/* ------------------------------------------------------- 26. MODALE ESSAI
   Fenêtre d'accueil sur les deux séances offertes. Elle ne s'ouvre qu'une
   fois par visiteur (voir main.js) et se ferme au clavier comme à la souris. */
/* display:grid l'emporterait sur l'attribut hidden : on le remet en jeu. */
.modale[hidden] { display: none; }
.modale {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}
.modale__voile {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 6, .78);
  backdrop-filter: blur(3px);
  animation: modale-voile .35s ease both;
}
.modale__boite:focus { outline: none; }
.modale__boite {
  position: relative;
  width: min(100%, 52rem);
  max-height: calc(100vh - 2.5rem);
  overflow: auto;
  display: grid;
  gap: clamp(1.2rem, 3vw, 2rem);
  padding: clamp(1.6rem, 4vw, 2.4rem);
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0, rgba(255, 225, 0, .10), transparent 62%),
    var(--acier);
  border: 1px solid var(--acier-clair);
  border-top: 3px solid var(--jaune);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
  animation: modale-entree .45s cubic-bezier(.2, .8, .3, 1) both;
}
.modale__croix {
  position: absolute;
  top: .5rem; right: .5rem;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  z-index: 3;
  color: var(--craie-douce);
  background: rgba(8, 9, 10, .65);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--transi), background var(--transi);
}
.modale__croix:hover { color: var(--jaune); background: rgba(8, 9, 10, .85); }
.modale__kicker {
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-texte);
}
.modale__titre {
  margin-top: .7rem;
  font-family: var(--f-titre);
  font-size: clamp(2.1rem, 7vw, 2.9rem);
  line-height: .98;
  text-transform: uppercase;
  color: var(--craie);
}
.modale__titre span { color: var(--jaune); }
.modale__phrase {
  margin-top: 1rem;
  font-size: .94rem;
  color: var(--craie-douce);
}
.modale__boite .btn { margin-top: 1.6rem; }

/* Vidéo Instagram : cadre au format portrait, hauteur bornée par l'écran.
   Le lien de secours est posé dessous ; l'iframe le recouvre si elle charge. */
.modale__video {
  position: relative;
  align-self: center;
  width: min(100%, 20rem);
  margin-inline: auto;
  aspect-ratio: 9 / 14;
  max-height: 38vh;
  overflow: hidden;
  background: var(--charbon);
  border: 1px solid var(--acier-clair);
}
.modale__video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.modale__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Bouton de son, posé sur le film. Discret, mais toujours atteignable. */
.modale__son {
  position: absolute;
  left: 50%;
  bottom: .6rem;
  transform: translateX(-50%);
  z-index: 2;
  padding: .4rem .8rem;
  font-family: var(--f-tech);
  font-weight: 600;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--craie);
  background: rgba(8, 9, 10, .62);
  border: 1px solid rgba(255, 255, 255, .14);
  cursor: pointer;
  transition: background var(--transi), color var(--transi);
}
.modale__son:hover { background: rgba(8, 9, 10, .85); color: var(--jaune); }

/* Emplacement réservé tant que le fichier vidéo n'est pas fourni. */
.modale__attente {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: .5rem;
  padding: 1rem;
  font-family: var(--f-tech);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(240, 240, 235, .3);
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(255,255,255,.02) 12px 24px);
}
.modale__attente span {
  font-family: var(--f-titre);
  font-size: 1.5rem;
  letter-spacing: .06em;
  color: rgba(255, 225, 0, .28);
}
@media (min-width: 46rem) {
  .modale__boite {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    align-items: center;
    text-align: center;
    padding: clamp(1.6rem, 3vw, 2.2rem);
  }
  .modale__video { max-height: 64vh; }
}
.modale__plus-tard {
  display: block;
  margin: .9rem auto 0;
  padding: .3rem .4rem;
  font-family: var(--f-tech);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--craie-douce);
  background: none;
  border: 0;
  cursor: pointer;
  opacity: .7;
  transition: opacity var(--transi);
}
.modale__plus-tard:hover { opacity: 1; }
/* Petits téléphones : sur un écran de 568 px de haut, la vidéo et les marges
   repoussaient le bouton hors de vue. On resserre tout et on limite le film. */
@media (max-width: 46rem) and (max-height: 720px) {
  .modale { padding: .75rem; }
  .modale__boite { gap: .8rem; padding: 1.1rem; }
  .modale__video { max-height: 26vh; }
  .modale__titre { font-size: clamp(1.5rem, 6.5vw, 2rem); }
  .modale__phrase { margin-top: .55rem; font-size: .85rem; }
  .modale__boite .btn { margin-top: .9rem; }
  .modale__plus-tard { margin-top: .55rem; }
}
/* Écran vraiment court : la phrase d'explication passe à la trappe, le titre
   et le bouton disent déjà l'essentiel. */
@media (max-width: 46rem) and (max-height: 600px) {
  .modale__phrase { display: none; }
}

@keyframes modale-voile { from { opacity: 0; } to { opacity: 1; } }
@keyframes modale-entree {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modale__voile, .modale__boite { animation: none; }
}

/* Mention légère sous la grille des formules : présente, jamais encombrante. */
.note-tarifs {
  margin: clamp(1.4rem, 3vw, 2rem) auto 0;
  max-width: 52ch;
  text-align: center;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--craie-douce);
}