/* ==========================================================================
   BASKET CLUB VILLEPINTE — TeamBCV93
   Feuille de style principale du site public.
   Réalisation : DamCompany
   --------------------------------------------------------------------------
   Sommaire :
     01. Tokens (couleurs, typo, espacements)
     02. Reset & base
     03. Utilitaires de mise en page
     04. Boutons
     05. Header / navigation
     06. Footer
     07. Hero (accueil + pages intérieures)
     08. Bandeau de chiffres clés
     08b. Bande des partenaires
     09. Cartes (aperçu, catégories, boutique, étapes)
     09b. Planning des entraînements
     09c. Grille tarifaire
     09d. Boutique : regroupement par famille
     10. Frise chronologique (Histoire)
     11. Palmarès
     12. Inscription (formulaire + QR)
     13. Contact
     14. États vides / contenus à venir
     15. Accessibilité & préférences système
   ========================================================================== */

/* == 01. TOKENS ========================================================== */
:root {
  /* Palette issue du blason : écusson bleu marine, ailes dorées, cheval rouge */
  --navy-950: #071231;
  --navy-900: #0b1a3f;
  --navy-800: #0e2050;
  --navy-700: #14295f;
  --navy-600: #1b356f;
  --navy-500: #24428a;
  --navy-line: rgba(255, 255, 255, .12);

  --gold-500: #f5c518;   /* CTA principal, chiffres clés */
  --gold-600: #d9a800;   /* survol CTA */
  --gold-300: #e6d089;   /* numéros d'étape, aplats discrets */
  --gold-olive: #8c8137; /* vagues décoratives du hero */

  --red-600: #c8281f;    /* accents : sur-titres, tranches d'âge */
  --red-700: #a41d16;

  --cream: #f6f1e4;      /* fond des sections claires */
  --cream-dark: #ece5d3;
  --white: #ffffff;

  --ink: #0e2050;              /* texte sur fond clair */
  --ink-soft: #4a5570;
  --ink-onnavy: rgba(255, 255, 255, .78);

  /* Typographie */
  --font-display: "Anton", "Arial Narrow", "Haettenschweiler", sans-serif;
  --font-cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Rythme */
  --container: 1240px;
  --gutter: 20px;
  --sec-y: 56px;          /* espacement vertical des sections (mobile) */
  --radius: 4px;
  --radius-lg: 8px;

  --shadow-card: 0 2px 4px rgba(7, 18, 49, .06), 0 12px 28px rgba(7, 18, 49, .07);
  --shadow-card-hover: 0 4px 8px rgba(7, 18, 49, .10), 0 20px 44px rgba(7, 18, 49, .16);

  --header-h: 68px;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

@media (min-width: 900px) {
  :root { --gutter: 32px; --sec-y: 92px; --header-h: 88px; }
}

/* == 02. RESET & BASE ==================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;               /* garde-fou anti-débordement horizontal */
}

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

a { color: inherit; }

h1, h2, h3, h4 { margin: 0; line-height: 1.05; font-weight: 400; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul { margin: 0; padding: 0; list-style: none; }

/* Familles typographiques */
.t-display { font-family: var(--font-display); letter-spacing: .01em; text-transform: uppercase; }
.t-cond    { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }

/* Titres */
.h1 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(2.4rem, 9vw, 5rem); line-height: .96; }
.h2 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.9rem, 5.4vw, 3.1rem); line-height: 1; }
.h3 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.15rem, 2.4vw, 1.4rem); }

/* Sur-titre rouge des sections claires */
.eyebrow {
  font-family: var(--font-cond);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 600;
  font-size: .82rem;
  color: var(--red-600);
  margin: 0 0 12px;
}
.eyebrow--gold { color: var(--gold-500); }

.lead { font-size: 1.02rem; color: var(--ink-soft); max-width: 62ch; }
.lead--onnavy { color: var(--ink-onnavy); }

@media (min-width: 900px) { .lead { font-size: 1.08rem; } }

/* == 03. UTILITAIRES DE MISE EN PAGE ===================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--sec-y); }
.section--cream { background: var(--cream); }
.section--navy { background: var(--navy-800); color: var(--white); }
.section--tight { padding-block: calc(var(--sec-y) * .7); }

.section__head { max-width: 62ch; margin-bottom: 34px; }
.section__head .h2 { margin-bottom: 14px; }

.grid { display: grid; gap: 20px; }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 860px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Lien d'évitement (accessibilité clavier) */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--gold-500); color: var(--navy-900);
  padding: 10px 18px; font-family: var(--font-cond); text-transform: uppercase;
  letter-spacing: .12em; font-weight: 700; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 12px; }

/* == 04. BOUTONS ========================================================= */
.btn {
  --btn-skew: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 30px;
  font-family: var(--font-cond);
  text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: .92rem;
  text-decoration: none; border: 0; cursor: pointer;
  background: var(--gold-500); color: var(--navy-900);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--btn-skew)) 100%, 0 100%);
  transition: background-color .18s var(--ease), transform .18s var(--ease), color .18s var(--ease);
}
.btn:hover { background: var(--gold-600); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  background: transparent; color: var(--gold-500);
  box-shadow: inset 0 0 0 2px var(--gold-500);
}
.btn--ghost:hover { background: var(--gold-500); color: var(--navy-900); }

.btn--red { background: var(--red-600); color: var(--white); }
.btn--red:hover { background: var(--red-700); }

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

/* Petit lien pilule des cartes */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px currentColor;
  font-family: var(--font-cond); text-transform: uppercase;
  letter-spacing: .14em; font-weight: 600; font-size: .78rem;
  color: var(--navy-600); text-decoration: none;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.pill:hover { background: var(--navy-600); color: var(--white); }
.pill[aria-disabled="true"] { color: var(--ink-soft); opacity: .7; pointer-events: none; }

/* == 05. HEADER / NAVIGATION ============================================= */
.header {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
  border-bottom: 3px solid var(--gold-500);
}

.header__inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--white); }
.brand__mark { width: 40px; height: auto; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 1.02rem; letter-spacing: .01em;
}
.brand__tag {
  font-family: var(--font-cond); font-weight: 600; font-size: .68rem;
  letter-spacing: .3em; color: var(--gold-500); margin-top: 3px;
}

@media (min-width: 900px) {
  .brand__mark { width: 52px; }
  .brand__name { font-size: 1.16rem; }
}

/* Navigation principale */
.nav { display: flex; align-items: center; gap: 26px; }
.nav__link {
  font-family: var(--font-cond); text-transform: uppercase;
  letter-spacing: .13em; font-weight: 600; font-size: .9rem;
  color: var(--white); text-decoration: none; padding: 6px 0;
  position: relative; white-space: nowrap;
  transition: color .18s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--gold-500); transform: scaleX(0); transform-origin: left;
  transition: transform .2s var(--ease);
}
.nav__link:hover { color: var(--gold-500); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--gold-500); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header__cta { display: none; }
@media (min-width: 1180px) { .header__cta { display: inline-flex; padding: 12px 24px; } }

/* Bouton hamburger */
.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px;
  background: transparent; border: 0; cursor: pointer;
}
.burger span {
  display: block; height: 2px; background: var(--white);
  transition: transform .22s var(--ease), opacity .18s var(--ease);
}
.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); }

/* Menu mobile : liste dépliante sous le header */
@media (max-width: 1023px) {
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy-900);
    border-bottom: 3px solid var(--gold-500);
    padding: 8px var(--gutter) 22px;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .nav__link { padding: 14px 2px; border-bottom: 1px solid var(--navy-line); font-size: 1rem; }
  .nav__link::after { display: none; }
  .nav .btn { margin-top: 18px; }
}
@media (min-width: 1024px) {
  .burger { display: none; }
  .nav .btn--mobile-only { display: none; }
}

/* == 06. FOOTER ========================================================== */
.footer { background: var(--navy-800); color: var(--ink-onnavy); padding-block: 52px 0; }
.footer__grid { display: grid; gap: 34px; }
@media (min-width: 720px)  { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; } }

.footer__brand { display: flex; align-items: center; gap: 12px; color: var(--white); text-decoration: none; margin-bottom: 16px; }
.footer__brand img { width: 44px; }
.footer__brand span { font-family: var(--font-display); text-transform: uppercase; font-size: 1rem; line-height: 1.1; }
.footer__about { font-size: .94rem; max-width: 34ch; }

.footer__title {
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .2em;
  font-weight: 700; font-size: .78rem; color: var(--gold-500); margin: 0 0 14px;
}
.footer__links li + li { margin-top: 9px; }
.footer__links a { text-decoration: none; font-size: .95rem; transition: color .16s var(--ease); }
.footer__links a:hover { color: var(--gold-500); }

.footer__bottom {
  margin-top: 40px; border-top: 1px solid var(--navy-line);
  padding-block: 20px 24px;
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  font-size: .82rem; color: rgba(255, 255, 255, .55);
}
.footer__bottom a { text-decoration: none; }
.footer__bottom a:hover { color: var(--gold-500); }

/* == 07. HERO ============================================================ */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 100% at 82% 0%, var(--navy-600) 0%, var(--navy-800) 46%, var(--navy-900) 100%);
  color: var(--white);
  isolation: isolate;
}

/* Trame de terrain : fines lignes en quadrillage */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}

/* Bande « ailes » dorée reprise du blason, en fond du hero */
.hero__wave {
  position: absolute; left: 0; right: 0; top: 15%;
  width: 100%; height: 64%;
  z-index: -1; pointer-events: none;
  opacity: .38; color: var(--gold-olive);
}
.hero--page .hero__wave { top: 6%; height: 58%; opacity: .32; }

.hero__inner { position: relative; padding-block: 54px 62px; }
@media (min-width: 980px) {
  .hero__inner {
    padding-block: 78px 86px;
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center; gap: 48px;
  }
}

.hero__kicker {
  font-family: var(--font-cond); text-transform: uppercase;
  letter-spacing: .3em; font-weight: 600; font-size: .8rem;
  color: var(--gold-500); margin: 0 0 16px;
}
.hero__title { margin-bottom: 20px; }
.hero__title em { font-style: normal; color: var(--gold-500); }
.hero__text { margin-bottom: 30px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__logo { margin: 40px auto 0; width: min(300px, 72%); filter: drop-shadow(0 18px 34px rgba(0,0,0,.42)); }
@media (min-width: 980px) { .hero__logo { margin: 0 0 0 auto; width: min(360px, 100%); } }

/* Mobile et tablette : le blason passe au-dessus du sur-titre, du titre et des
   boutons — l'ordre du HTML reste inchangé, seul l'affichage est réordonné. */
@media (max-width: 979.98px) {
  .hero:not(.hero--page) .hero__inner { display: flex; flex-direction: column; }
  .hero:not(.hero--page) .hero__logo {
    order: -1;
    margin: 0 auto 30px;
    width: min(240px, 62%);
  }
}

/* Variante « page intérieure » : plus courte, avec fil d'Ariane */
.hero--page .hero__inner { padding-block: 42px 52px; display: block; }
.hero--page .h1 { margin-bottom: 16px; }
@media (min-width: 980px) { .hero--page .hero__inner { padding-block: 66px 74px; } }

.breadcrumb {
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .18em;
  font-weight: 600; font-size: .76rem; color: rgba(255,255,255,.6); margin: 0 0 14px;
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-500); }
.breadcrumb span[aria-current] { color: var(--white); }

/* Transition biseautée entre le bandeau de chiffres et la section crème
   (reprise de la maquette d'accueil). Le fond reprend la couleur du bloc
   précédent, le triangle crème celle du bloc suivant. */
.slant { position: relative; height: 46px; margin-top: -1px; background: var(--navy-700); }
.slant::after {
  content: ""; position: absolute; inset: 0;
  background: var(--cream);
  clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
}

/* == 08. BANDEAU DE CHIFFRES CLÉS ======================================== */
.stats { background: var(--navy-700); border-top: 1px solid var(--navy-line); }
.stats__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }

.stat {
  padding: 26px 12px; text-align: center;
  border-right: 1px solid var(--navy-line);
  border-bottom: 1px solid var(--navy-line);
}
.stat:nth-child(2n) { border-right: 0; }
@media (min-width: 860px) {
  .stat { padding: 34px 16px; border-bottom: 0; }
  .stat:nth-child(2n) { border-right: 1px solid var(--navy-line); }
  .stat:last-child { border-right: 0; }
}
.stat__value {
  font-family: var(--font-display); font-size: clamp(2rem, 5vw, 2.9rem);
  color: var(--gold-500); line-height: 1; display: block;
}
.stat__label {
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .2em;
  font-weight: 600; font-size: .72rem; color: rgba(255,255,255,.72);
  margin-top: 10px; display: block;
}

/* == 08b. BANDE DES PARTENAIRES ========================================= */
/* Défilement continu : la piste contient 5 groupes de logos identiques et se
   déplace de -20 %, soit exactement la largeur d'un groupe. À la fin du cycle
   l'image est donc rigoureusement la même qu'au départ : la boucle est
   invisible, sans saut ni temps mort. */
.sponsors {
  background: var(--cream);
  border-block: 1px solid rgba(14, 32, 80, .1);
  padding-block: 16px;
  overflow: hidden;
}

.sponsors__viewport {
  overflow: hidden;
  /* Les logos entrent et sortent en fondu au lieu d'être coupés net */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.sponsors__track {
  display: flex;
  width: max-content;
  animation: sponsors-scroll 24s linear infinite;
}

.sponsors__group { display: flex; align-items: center; }

.sponsors__logo {
  flex: none;
  height: 46px; width: auto; max-width: 170px;
  object-fit: contain;
  margin-inline: 26px;
}

@keyframes sponsors-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-20%, 0, 0); }
}

@media (min-width: 900px) {
  .sponsors { padding-block: 22px; }
  .sponsors__logo { height: 58px; max-width: 210px; margin-inline: 42px; }
}

/* Mouvement réduit : la bande se fige. Les groupes étant identiques, l'arrêt
   se fait sur une image correcte quelle que soit la position. (Voir aussi la
   règle globale prefers-reduced-motion en fin de fichier.) */
@media (prefers-reduced-motion: reduce) {
  .sponsors__track { animation: none; }
}

/* == 09. CARTES ========================================================== */
.card {
  display: flex; flex-direction: column;
  background: var(--white); color: var(--ink);   /* indispensable sur fond navy */
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

/* Bandeau supérieur : rayures diagonales navy */
.card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, var(--navy-600), var(--navy-900));
  color: var(--white);
  overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__glyph { font-family: var(--font-display); font-size: clamp(2.2rem, 7vw, 3.4rem); line-height: 1; }
.card__icon { width: 46px; height: 46px; color: var(--gold-500); }

.card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card__title { font-family: var(--font-display); text-transform: uppercase; font-size: 1.18rem; color: var(--ink); }
.card__meta {
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .16em;
  font-weight: 600; font-size: .78rem; color: var(--red-600);
}
.card__text { font-size: .94rem; color: var(--ink-soft); margin: 0; }
.card__foot { margin-top: auto; padding-top: 8px; }

/* Cartes « étapes » de la page inscription */
.step {
  position: relative; background: var(--white); color: var(--ink); border-radius: var(--radius);
  padding: 26px 24px 28px; box-shadow: var(--shadow-card);
}
.step__num {
  position: absolute; top: 16px; right: 20px;
  font-family: var(--font-display); font-size: 2.6rem; line-height: 1;
  color: var(--gold-300);
}
.step__title { font-family: var(--font-display); text-transform: uppercase; font-size: 1.12rem; padding-right: 64px; margin-bottom: 8px; }
.step p { font-size: .94rem; color: var(--ink-soft); }

/* Cartes boutique */
.product {
  background: var(--white); color: var(--ink); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

.product__media {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--cream), var(--cream-dark));
  padding: 22px;
  overflow: hidden;                      /* le zoom reste contenu dans la vignette */
}
.product__media img, .product__media svg {
  width: min(60%, 150px); height: auto;
  transition: transform .35s var(--ease);
}
/* Loupe au survol et au focus clavier, pour examiner le marquage du blason */
.product:hover .product__media img,
.product:hover .product__media svg,
.product:focus-within .product__media img,
.product:focus-within .product__media svg { transform: scale(1.35); }
.product__body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product__name { font-family: var(--font-display); text-transform: uppercase; font-size: 1.02rem; }
.product__desc { font-size: .88rem; color: var(--ink-soft); margin: 0; }
.product__foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.product__price { font-family: var(--font-display); font-size: 1.16rem; color: var(--navy-600); }
.badge {
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .14em;
  font-weight: 700; font-size: .66rem; padding: 5px 11px; border-radius: 999px;
  background: var(--cream-dark); color: #3f4963;   /* contraste AA sur fond crème */
}
.badge--gold { background: var(--gold-500); color: var(--navy-900); }
.badge--red  { background: var(--red-600); color: var(--white); }

/* == 09b. PLANNING DES ENTRAÎNEMENTS ===================================== */
.venue-block + .venue-block { margin-top: 40px; }

.venue-block__head { margin-bottom: 16px; }
.venue-block__name { font-family: var(--font-display); text-transform: uppercase; font-size: 1.25rem; }
.venue-block__addr { font-size: .9rem; color: var(--ink-soft); margin: 4px 0 0; }

.planning-wrap { overflow-x: auto; }

.planning {
  width: 100%; border-collapse: collapse; background: var(--white);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card);
  min-width: 760px;
}
.planning th, .planning td {
  padding: 12px 14px; text-align: left; border-bottom: 1px solid rgba(14, 32, 80, .1);
  vertical-align: top; font-size: .92rem;
}
.planning thead th {
  background: var(--navy-800); color: var(--gold-500);
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .14em;
  font-weight: 700; font-size: .74rem; white-space: nowrap;
}
.planning tbody tr:last-child td { border-bottom: 0; }
.planning tbody tr:nth-child(2n) { background: rgba(14, 32, 80, .035); }
.planning th[scope="row"] {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 400;
  font-size: .96rem; color: var(--ink); white-space: nowrap;
}
.planning td.is-empty { color: rgba(14, 32, 80, .22); }
.slot { display: block; font-variant-numeric: tabular-nums; }
.slot__coach {
  display: block; margin-top: 2px;
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .1em;
  font-size: .68rem; color: var(--ink-soft);
}

/* Sous 860 px : le tableau devient une liste de cartes, sans défilement latéral */
@media (max-width: 859.98px) {
  .planning-wrap { overflow-x: visible; }
  .planning, .planning tbody, .planning tr, .planning td, .planning th { display: block; }
  .planning { min-width: 0; box-shadow: none; background: transparent; }
  .planning thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .planning tbody tr {
    background: var(--white); border-radius: var(--radius);
    box-shadow: var(--shadow-card); padding: 14px 16px; margin-bottom: 12px;
  }
  .planning tbody tr:nth-child(2n) { background: var(--white); }
  .planning th[scope="row"] { padding: 0 0 8px; border-bottom: 1px solid rgba(14,32,80,.12); margin-bottom: 8px; white-space: normal; }
  .planning td { padding: 5px 0; border-bottom: 0; display: flex; gap: 10px; justify-content: space-between; }
  .planning td.is-empty { display: none; }
  .planning td::before {
    content: attr(data-day);
    font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .12em;
    font-weight: 600; font-size: .74rem; color: var(--red-600); flex: none;
  }
  .slot { text-align: right; }
}

/* == 09c. GRILLE TARIFAIRE (page inscription) ============================ */
.tarifs { width: 100%; border-collapse: collapse; background: var(--white); box-shadow: var(--shadow-card); border-radius: var(--radius); overflow: hidden; }
.tarifs th, .tarifs td { padding: 12px 16px; border-bottom: 1px solid rgba(14, 32, 80, .1); text-align: left; font-size: .95rem; }
.tarifs thead th {
  background: var(--gold-500); color: var(--navy-900);
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .14em;
  font-weight: 700; font-size: .76rem;
}
.tarifs tbody tr:last-child td { border-bottom: 0; }
.tarifs td:last-child, .tarifs th:last-child { text-align: right; }
.tarifs__cat { font-family: var(--font-display); text-transform: uppercase; font-size: .98rem; }
.tarifs__years { font-size: .86rem; color: var(--ink-soft); }
.tarifs__price { font-family: var(--font-display); font-size: 1.05rem; color: var(--navy-600); white-space: nowrap; }

/* Tarif rappelé sous le sélecteur de catégorie du formulaire */
.tarif-note {
  display: none; margin-top: 10px; padding: 10px 14px;
  background: rgba(245, 197, 24, .14); border-left: 3px solid var(--gold-500);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .9rem; color: rgba(255, 255, 255, .9);
}
.tarif-note[data-visible="true"] { display: block; }
.tarif-note strong { color: var(--gold-500); }

/* == 09d. BOUTIQUE : regroupement par famille =========================== */
.shop-group + .shop-group { margin-top: 44px; }
.shop-group__title {
  font-family: var(--font-display); text-transform: uppercase; font-size: 1.2rem;
  color: var(--white); margin-bottom: 6px;
}
.shop-group__rule { height: 2px; background: var(--gold-500); width: 54px; margin-bottom: 22px; }

/* == 10. FRISE CHRONOLOGIQUE ============================================= */
.timeline { position: relative; padding-left: 30px; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, var(--gold-500), rgba(245, 197, 24, .15));
}
.tl-item { position: relative; margin-bottom: 22px; }
.tl-item::before {
  content: ""; position: absolute; left: -30px; top: 22px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold-500); box-shadow: 0 0 0 4px var(--navy-800);
}
.tl-card { background: var(--white); color: var(--ink); border-radius: var(--radius); padding: 22px 24px; box-shadow: 0 14px 30px rgba(0,0,0,.22); }
.tl-card .tl-year { font-family: var(--font-display); font-size: 1.3rem; color: var(--red-600); margin-bottom: 10px; }
.tl-title { font-family: var(--font-display); text-transform: uppercase; font-size: 1.05rem; margin-bottom: 6px; color: var(--ink); }
.tl-card p { font-size: .95rem; color: var(--ink-soft); }

/* Alternance gauche/droite sur grand écran */
@media (min-width: 900px) {
  .timeline { padding-left: 0; max-width: 1000px; margin-inline: auto; }
  .timeline::before { left: 50%; transform: translateX(-50%); }
  .tl-item { width: calc(50% - 42px); margin-bottom: 30px; }
  .tl-item::before { left: auto; right: -50px; top: 26px; }
  .tl-item:nth-child(2n) { margin-left: calc(50% + 42px); }
  .tl-item:nth-child(2n)::before { right: auto; left: -50px; }
}

/* == 11. PALMARÈS ======================================================== */
.trophy-stats { display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 40px; }
@media (min-width: 720px) { .trophy-stats { grid-template-columns: repeat(3, 1fr); } }
.trophy-stat {
  background: linear-gradient(160deg, var(--navy-700), var(--navy-800));
  border: 1px solid var(--navy-line); border-radius: var(--radius);
  padding: 28px 20px; text-align: center;
}
.trophy-stat__value { font-family: var(--font-display); font-size: clamp(2.1rem, 6vw, 3rem); color: var(--gold-500); line-height: 1; display: block; }
.trophy-stat__label {
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .2em;
  font-weight: 600; font-size: .72rem; color: rgba(255,255,255,.72); margin-top: 10px; display: block;
}

.honours { display: grid; gap: 0 60px; }
@media (min-width: 900px) { .honours { grid-template-columns: repeat(2, 1fr); } }
.honour {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 17px 0; border-bottom: 1px solid var(--navy-line);
}
.honour__title { font-size: .98rem; color: rgba(255,255,255,.92); }
.honour__season {
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .14em;
  font-weight: 700; font-size: .84rem; color: var(--gold-500); white-space: nowrap;
}

/* == 12. INSCRIPTION ===================================================== */
.join {
  display: grid; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-card);
}
@media (min-width: 940px) { .join { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); } }

.join__intro { background: var(--navy-800); color: var(--white); padding: 34px 28px 38px; }
@media (min-width: 940px) { .join__intro { padding: 48px 42px; display: flex; flex-direction: column; justify-content: center; } }
.join__intro .h2 { margin-bottom: 16px; }

.join__form { background: var(--navy-700); padding: 30px 24px 34px; }
@media (min-width: 940px) { .join__form { padding: 44px 42px; } }

/* Formulaire */
.field { margin-bottom: 18px; }
.field__label {
  display: block; margin-bottom: 7px;
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .18em;
  font-weight: 600; font-size: .74rem; color: var(--gold-500);
}
.field__hint { display: block; margin-top: 6px; font-size: .8rem; color: rgba(255,255,255,.6); }

.input, .select, .textarea {
  width: 100%; padding: 13px 15px;
  font-family: var(--font-body); font-size: .98rem; color: var(--white);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius);
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
  appearance: none;
}
.input::placeholder, .textarea::placeholder { color: rgba(255, 255, 255, .62); }
.input:hover, .select:hover, .textarea:hover { border-color: rgba(255, 255, 255, .35); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--gold-500);
  background: rgba(255, 255, 255, .12);
  box-shadow: 0 0 0 3px rgba(245, 197, 24, .25);
}
.textarea { min-height: 120px; resize: vertical; }

/* Flèche du select (fond navy, pas d'image externe) */
.select {
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-500) 50%),
                    linear-gradient(135deg, var(--gold-500) 50%, transparent 50%);
  background-position: calc(100% - 21px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}
.select option { background: var(--navy-800); color: var(--white); }

.field-row { display: grid; gap: 0 18px; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

/* Case à cocher RGPD */
.consent { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0 24px; }
.consent input[type="checkbox"] {
  flex: none; width: 20px; height: 20px; margin-top: 3px;
  accent-color: var(--gold-500); cursor: pointer;
}
.consent label { font-size: .86rem; color: rgba(255,255,255,.78); line-height: 1.55; }
.consent a { color: var(--gold-500); }

/* Champ pot-de-miel anti-spam : masqué visuellement et pour les lecteurs d'écran */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* Messages de retour du formulaire */
.form-msg {
  margin-top: 18px; padding: 14px 16px; border-radius: var(--radius);
  font-size: .92rem; display: none;
}
.form-msg[data-state="success"] { display: block; background: rgba(46, 160, 88, .18); border: 1px solid rgba(120, 220, 160, .5); color: #d6f5e2; }
.form-msg[data-state="error"]   { display: block; background: rgba(200, 40, 31, .18);  border: 1px solid rgba(240, 130, 120, .5); color: #ffdedb; }
.form-msg[data-state="pending"] { display: block; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.85); }

.field-error { display: none; margin-top: 6px; font-size: .8rem; color: #ffb3ad; }
.input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: #ff8d84; }
.input[aria-invalid="true"] + .field-error,
.select[aria-invalid="true"] + .field-error { display: block; }

/* Bloc QR code */
.qr-block {
  display: grid; gap: 26px; align-items: center;
  background: var(--white); border-radius: var(--radius-lg);
  padding: 28px 24px; box-shadow: var(--shadow-card);
}
@media (min-width: 780px) { .qr-block { grid-template-columns: auto minmax(0, 1fr); padding: 36px 40px; gap: 40px; } }
.qr-frame {
  background: var(--navy-800); border-radius: var(--radius);
  padding: 16px; width: 212px; justify-self: center;
  box-shadow: inset 0 0 0 3px var(--gold-500);
}
.qr-frame svg { width: 100%; height: auto; display: block; }
.qr-caption {
  margin-top: 10px; text-align: center;
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .16em;
  font-weight: 600; font-size: .68rem; color: var(--gold-500);
}
.qr-url {
  display: inline-block; margin-top: 4px; word-break: break-all;
  font-family: var(--font-cond); letter-spacing: .04em; font-size: .92rem; color: var(--navy-600);
}

/* == 13. CONTACT ========================================================= */
.contact-grid { display: grid; gap: 34px; }
@media (min-width: 940px) { .contact-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; } }

.info-list li { display: flex; gap: 16px; padding: 16px 0; align-items: flex-start; }
.info-list li + li { border-top: 1px solid rgba(14, 32, 80, .1); }
.info__icon {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy-800); color: var(--gold-500);
  display: grid; place-items: center;
}
.info__icon svg { width: 20px; height: 20px; }
.info__label { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: 1rem; margin-bottom: 3px; }
.info__value { display: block; font-size: .95rem; color: var(--ink-soft); }
.info__value a { color: var(--navy-600); text-decoration: none; border-bottom: 1px solid rgba(27, 53, 111, .3); }
.info__value a:hover { color: var(--red-600); border-color: currentColor; }

.socials { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.social {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; text-decoration: none;
  color: var(--navy-800); box-shadow: inset 0 0 0 1.5px rgba(14, 32, 80, .28);
  transition: background-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.social svg { width: 20px; height: 20px; }
.social:hover { background: var(--navy-800); color: var(--gold-500); transform: translateY(-2px); }
.social[hidden] { display: none; }

/* Cartes des gymnases */
.venue-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.venue-tab {
  padding: 10px 18px; border: 0; cursor: pointer;
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .13em;
  font-weight: 600; font-size: .8rem;
  background: var(--cream-dark); color: var(--ink-soft); border-radius: 999px;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.venue-tab[aria-selected="true"] { background: var(--navy-800); color: var(--gold-500); }

.map-frame {
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--navy-700); box-shadow: var(--shadow-card);
  aspect-ratio: 4 / 3;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }
@media (min-width: 940px) { .map-frame { aspect-ratio: 16 / 12; } }

.venue-address { margin-top: 14px; font-size: .94rem; color: var(--ink-soft); }
.venue-address strong { color: var(--ink); }

/* == 14. ÉTATS VIDES / CONTENUS À VENIR ================================== */
/* Utilisés partout où le club n'a pas encore transmis le contenu réel :
   aucune donnée inventée n'est affichée sur le site. */
.empty {
  color: var(--ink);
  border: 1px dashed rgba(14, 32, 80, .28);
  border-radius: var(--radius);
  padding: 30px 26px; text-align: center;
  background: rgba(255, 255, 255, .5);
}
.empty--onnavy { border-color: rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .05); }
.empty__title { font-family: var(--font-display); text-transform: uppercase; font-size: 1.1rem; margin-bottom: 8px; }
.empty p { font-size: .94rem; color: var(--ink-soft); margin: 0 auto; max-width: 46ch; }
.empty--onnavy .empty__title { color: var(--white); }
.empty--onnavy p { color: rgba(255, 255, 255, .72); }

/* Squelette de chargement */
.skeleton {
  border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(14,32,80,.06) 25%, rgba(14,32,80,.12) 37%, rgba(14,32,80,.06) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  min-height: 190px;
}
.skeleton--onnavy { background-image: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.12) 37%, rgba(255,255,255,.05) 63%); }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* == 15. ACCESSIBILITÉ & PRÉFÉRENCES SYSTÈME ============================= */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 2px;
}
.hero :where(a, button):focus-visible,
.header :where(a, button):focus-visible,
.footer :where(a, button):focus-visible { outline-color: var(--gold-500); }

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

/* Impression : le QR code de la page inscription doit rester net et lisible */
@media print {
  .header, .footer, .hero__wave, .btn, .nav { display: none !important; }
  body { background: #fff; color: #000; }
  .qr-frame { box-shadow: none; background: #fff; }
}