:root{
  --navy: #1d1b3a;
  --indigo: #434399;
  --indigo-dark: #2b2870;
  --cream: #faf8f4;
  --orange: #ff6a3d;
  /* Jaune "balle de tennis neuve" (optic yellow) : franchement sature et tire
     vers le vert, la ou l'ancien #D9DE6E etait un jaune pastel delave.
     Les variantes -rgb servent aux rgba() ; ne jamais recoder la couleur en
     dur, sinon les fonds translucides derivent de la teinte principale. */
  --clay: #D8E63A;
  --clay-rgb: 216, 230, 58;
  --clay-dark: #B3C21F;
  --clay-dark-rgb: 179, 194, 31;
  --text-muted-light: #dcdbf1;
  --text-muted-dark: #5c5a70;
  --text-strong-dark: #423f57;
  --footer-muted: #c3c1de;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: Manrope, sans-serif;
  position: relative;
}

/* Subtle grain, adds depth to flat color fields */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

@keyframes fadeup{
  from{ opacity: 0; transform: translateY(18px); }
  to{ opacity: 1; transform: translateY(0); }
}

h1, h2, h3{ margin: 0; }

a{ color: inherit; text-decoration: none; }


/* Header */
/* Accessibilite — utilitaires */
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Lien d'evitement : invisible tant qu'il n'a pas le focus clavier. */
.skip-link{
  position: absolute;
  left: 8px; top: -60px;
  z-index: 10000;
  background: var(--clay);
  color: var(--indigo-dark);
  font: 700 13px/1 Oswald, sans-serif;
  text-transform: uppercase;
  padding: 14px 18px;
  border-radius: 8px;
  transition: top .15s;
}
.skip-link:focus{ top: 8px; }

/* Anneau de focus global. Le fichier n'en avait aucun alors que la regle `a`
   ci-dessous retire le soulignement : la navigation au clavier etait aveugle. */
:focus-visible{
  outline: 3px solid var(--clay);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Header */
.site-header{
  background: var(--navy);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.site-header img{ height: 22px; display: block; }
.site-logo{ display: inline-flex; align-items: center; padding: 11px 0; }

/* Bouton du menu mobile */
.nav-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  display: block;
  width: 18px; height: 2px;
  background: #fff;
  border-radius: 2px;
}
.nav-toggle-bars{ position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after{ content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before{ top: -6px; }
.nav-toggle-bars::after{ top: 6px; }

/* La nav suit le bouton dans le DOM : son ouverture est donc pilotable en CSS
   pur via le combinateur de freres. Le script ne fait que basculer
   aria-expanded — pas de classe a maintenir en double. */
.site-nav{ display: none; }
.nav-toggle[aria-expanded="true"] ~ .site-nav{
  display: flex;
  flex-direction: column;
  width: 100%;
  order: 3;
  gap: 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.site-nav a{
  font: 600 14px/1 Oswald, sans-serif;
  color: var(--text-muted-light);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 14px 4px;
}
/* CTA principal du header. min-height 44px : il ne faisait que 29px de haut,
   sous le seuil de confort tactile, alors que c'est le bouton le plus important
   du site. La transition accompagne le :hover defini plus bas, qui sautait. */
.btn-signup{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: var(--indigo);
  color: #fff;
  padding: 9px 18px;
  border-radius: 7px;
  font: 700 11px/1 Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  transition: transform .2s, background .2s;
}

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 13px/1 Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 16px 22px;
  border-radius: 10px;
  transition: transform .2s, box-shadow .2s;
}
.btn-primary{ background: var(--clay); color: var(--indigo-dark); }
.btn-primary:hover{
  background: var(--clay-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(var(--clay-dark-rgb),.35);
}

.tag{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 11px/1 Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  color: #fff;
}

/* Hero */
.hero{
  position: relative;
  background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-dark) 100%);
  padding: 32px 22px 40px;
  overflow: hidden;
}
.hero::before{
  content: "";
  position: absolute;
  left: -120px;
  bottom: -180px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle at center, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.hero-inner{ position: relative; }
/* Anton en line-height 0.95 laisse tres peu d'air au-dessus des capitales :
   sans cette marge, la pastille vient coller le titre. */
.hero .tag{ margin-bottom: 18px; }
.hero h1{
  font: 56px/0.95 Anton, sans-serif;
  color: #fff;
  margin: 0 0 18px;
  letter-spacing: .01em;
}
.hero p{
  font: 500 14px/1.6 Manrope, sans-serif;
  color: var(--text-muted-light);
  margin: 0;   /* dernier element du hero depuis le retrait des boutons */
  max-width: 420px;
}
.hero-visual{ display: none; }

/* Animation d'entree du hero.
   IMPORTANT : ne JAMAIS reintroduire un `opacity: 0` statique ici. C'est ce
   qui rendait tout le contenu du hero — pastille, titre, accroche et boutons —
   definitivement invisible des que l'animation ne s'executait pas.
   `backwards` fait porter l'etat de depart par l'animation elle-meme, le temps
   du delai. Si l'animation ne tourne pas, pour quelque raison que ce soit,
   les elements restent a leur etat naturel : visibles. */
@media (prefers-reduced-motion: no-preference){
  .hero-inner > *{ animation: fadeup .6s ease-out backwards; }
  .hero-inner .tag{ animation-delay: .05s; }
  .hero-inner h1{ animation-delay: .15s; }
  .hero-inner p{ animation-delay: .25s; }
}

/* Stat bar */
.stat-bar{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--navy);
}
.stat-bar div{
  padding: 16px 10px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.12);
  font: 700 12px/1.3 Oswald, sans-serif;
  color: #fff;
  text-transform: uppercase;
}
.stat-bar div:last-child{ border-right: none; }

/* Mercredi Jeunesse — section dediee de l'Accueil.
   Volontairement sobre : la version precedente etait un bandeau orange plein
   cadre, juge trop imposant et retiré (2daa6c4). Ici c'est une carte navy
   posee sur le fond creme, qui informe au lieu de crier. */
.mj-section{ padding: 28px 20px 4px; }
.mj-card{
  background: var(--navy);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(29,27,58,.18);
}
.mj-media{
  position: relative;
  /* 230px et non 160 : a 160px la bande etait trop plate et coupait le joueur
     aux genoux. A cette hauteur, le cadre devient moins large que la source et
     c'est la largeur qui est rognee — la silhouette reste entiere. */
  height: 230px;
  background: linear-gradient(135deg, var(--indigo), var(--indigo-dark));
}
.mj-media .photo-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mj-body{ padding: 20px 20px 24px; }
.mj-body .tag{ background: rgba(var(--clay-rgb),.22); color: var(--clay); }
.mj-body h2{
  font: 32px/1 Anton, sans-serif;
  color: #fff;
  margin: 14px 0 10px;
  letter-spacing: .01em;
}
.mj-body > p{
  font: 500 14px/1.6 Manrope, sans-serif;
  color: var(--text-muted-light);
  margin: 0 0 18px;
}
/* Mise en avant jaune dans un texte sur fond sombre. <strong> plutot qu'un
   <span> : la mise en avant est reelle, pas seulement decorative. Poids 600
   et non 700, le gras plein sur du jaune sature devient criard. */
.hl-clay{ color: var(--clay); font-weight: 600; }

.mj-facts{
  display: grid;
  gap: 12px;
  margin: 0 0 20px;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255,255,255,.14);
}
.mj-facts dt{
  font: 700 11px/1 Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--clay);
  margin-bottom: 5px;
}
.mj-facts dd{
  font: 600 15px/1.3 Manrope, sans-serif;
  color: #fff;
  margin: 0;
}

/* Section label */
.section{ padding: 26px 20px 6px; }
.section-label{
  font: 700 11px/1 Oswald, sans-serif;
  color: var(--indigo);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 8px;
}
.section h2{
  font: 34px/1 Anton, sans-serif;
  color: var(--navy);
  margin: 0 0 18px;
}

/* Program cards */
.programs{ display: flex; flex-direction: column; gap: 14px; }
.program-card{
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 18px rgba(29,27,58,.1);
  transition: transform .25s, box-shadow .25s;
}
.program-card:hover{ transform: translateY(-4px); box-shadow: 0 14px 28px rgba(29,27,58,.16); }
.program-card .banner{ height: 90px; position: relative; overflow: hidden; }
/* Emplacement photo : l'image remplit le cadre ; tant qu'elle n'est pas
   fournie, le dégradé de fond sert de repli propre (voir .photo-img). */
.program-card .banner .photo-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Le bandeau est en 3:1 alors que la source est en 3:2 : seule une fenetre de
   500 px de haut sur 1000 reste visible. Centree (50%), elle coupait les
   appuis du joueur ; 62% la descend sur les lignes 310-810, ce qui garde la
   tete et les chaussures avec ~30 px de marge. */
.program-card.competition .banner .photo-img{ object-position: 50% 62%; }
.program-card.ecole .banner{ background: linear-gradient(135deg, var(--indigo), var(--indigo-dark)); }
.program-card.competition .banner{ background: linear-gradient(135deg, var(--navy), #17153a); }
.program-card .body{ padding: 16px 18px; }
.program-card .title{ font: 700 16px/1.3 Oswald, sans-serif; color: var(--navy); text-transform: uppercase; }
.program-card .subtitle{ font: 600 14px/1.4 Manrope, sans-serif; color: var(--text-strong-dark); margin-top: 4px; }

/* Actu card */
.actu-card{
  display: flex;
  gap: 12px;
  background: #fff;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 4px 12px rgba(29,27,58,.08);
}
/* Vignette d'actualite : pictogramme plutot que photo.
   A 64 px une photo de scene est illisible, et surtout le club devrait en
   fournir une a chaque publication — ces icones ne demandent aucun fichier.
   Pour publier, on choisit une classe : is-calendrier, is-balle,
   is-inscription ou is-info. Sans classe, la tuile navy reste propre. */
.actu-thumb{
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 10px;
  background-color: var(--navy);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px 30px;
}
.actu-thumb.is-calendrier{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8E63A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 11h18'/%3E%3C/svg%3E");
}
.actu-thumb.is-balle{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8E63A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5 5.6c2.4 2 3.8 4.4 3.8 6.4S7.4 16.4 5 18.4'/%3E%3Cpath d='M19 5.6c-2.4 2-3.8 4.4-3.8 6.4s1.4 4.4 3.8 6.4'/%3E%3C/svg%3E");
}
.actu-thumb.is-inscription{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8E63A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cpath d='M9 3h6v3H9z'/%3E%3Cpath d='M9 13l2 2 4-4'/%3E%3C/svg%3E");
}
.actu-thumb.is-info{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8E63A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}
.actu-title{ font: 600 13px/1.3 Oswald, sans-serif; color: var(--navy); }
/* 12px et --text-muted-dark : l'ancien #8a8797 en 11px ne donnait que 3.50:1. */
.actu-date{ font: 500 12px/1.35 Manrope, sans-serif; color: var(--text-muted-dark); margin-top: 3px; }

/* CTA banner */
.cta-banner{
  margin: 28px 20px;
  background: var(--navy);
  border-radius: 18px;
  padding: 26px 22px;
  position: relative;
  overflow: hidden;
}
.cta-banner::before{
  content: "";
  position: absolute;
  right: -140px;
  top: -160px;
  width: 380px;
  height: 380px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(67,67,153,.55) 0%, rgba(67,67,153,0) 70%);
}
/* En desktop .cta-banner-inner passe en display:contents, ce qui annule sa
   position:relative — on remonte donc aussi ses enfants au-dessus du décor. */
.cta-banner-inner{ position: relative; z-index: 1; }
.cta-banner-inner > *{ position: relative; z-index: 1; }
.cta-banner-inner p{
  font: 26px/1.05 Anton, sans-serif;
  color: #fff;
  margin: 0 0 14px;
}
.cta-banner .btn-primary:hover{ transform: scale(1.05); }

/* Promo variant (orange) — mise en avant ponctuelle (ex: nouveau programme) */

/* Footer */
.site-footer{
  background: var(--navy);
  padding: 24px 20px 20px;
  color: var(--footer-muted);
}
.site-footer img{ height: 20px; margin-bottom: 12px; }
/* Liens du pied de page : padding vertical pour atteindre une hauteur
   confortable au doigt. Ils ne faisaient que ~17px, empiles a 6px d'ecart. */
.footer-links{
  display: flex;
  flex-direction: column;
  font: 500 13px/1.4 Manrope, sans-serif;
  margin-bottom: 14px;
}
.footer-links a{ padding: 11px 2px; }
.footer-contact{
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
  font: 600 13px/1.4 Manrope, sans-serif;
}
.footer-contact a{ padding: 9px 2px; color: #fff; }
.footer-facebook{
  display: inline-block;
  font: 600 12px/1 Oswald, sans-serif;
  color: var(--orange);
  text-transform: uppercase;
  padding: 12px 2px;
}

/* Page hero — interior pages banner */
.page-hero{
  position: relative;
  background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-dark) 100%);
  padding: 28px 20px 32px;
  overflow: hidden;
}
.page-hero::before{
  content: "";
  position: absolute;
  right: -140px;
  top: -180px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle at center, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.page-hero-inner{ position: relative; }
.page-hero .tag{ margin-bottom: 12px; }
.page-hero h1{ font: 44px/0.95 Anton, sans-serif; color: #fff; margin: 0 0 10px; }
.page-hero p{ font: 500 14px/1.6 Manrope, sans-serif; color: var(--text-muted-light); margin: 0; }

/* Interior page body content */
.page-content{ padding: 24px 20px 36px; }

/* ===========================================================================
   Justification du texte.

   AUCUNE CESURE : aucun mot ne doit etre coupe en fin de ligne. `hyphens`
   reste a `manual` et ne doit jamais repasser a `auto`.

   PORTEE VOLONTAIREMENT RESTREINTE — ne pas elargir cette liste.
   Sans cesure, le seul levier pour aligner le bord droit est d'ecarter les
   mots. Sur une colonne etroite ou un texte court, cela produit des trous
   beants : « Tous      niveaux,      aucune » sur trois mots. C'est illisible
   et ca fait amateur.
   La justification n'est donc appliquee qu'aux paragraphes assez larges pour
   contenir assez de mots par ligne, et uniquement a partir de 900px : sur
   telephone, aucune colonne n'est assez large, le texte reste au fer a gauche.

   Sont volontairement EXCLUS, et doivent le rester : les descriptions de
   cartes (.value-card p, .pricing-card .desc, .inscription-card .desc,
   .program-card .subtitle, .coach-titres .detail), les libelles, les titres
   et les boutons.
   =========================================================================== */
@media (min-width: 900px){
  .page-content > p,
  .page-content > ul,
  .page-content > .section-note,
  .page-hero p,
  .mj-body > p,
  /* Le bandeau de l'accueil porte la classe .hero, pas .page-hero : il
     echappait donc a la justification appliquee partout ailleurs. */
  .hero-inner > p,
  /* Les paragraphes d'introduction des pages programme sont passes dans
     .prog-intro pour accueillir la photo a leur droite. Ils cessaient donc
     d'etre des enfants directs de .page-content et perdaient la
     justification : cette ligne conserve le rendu existant, elle n'etend pas
     la regle a de nouveaux textes. */
  .prog-intro > p{
    text-align: justify;
    text-wrap: pretty;
    -webkit-hyphens: manual;
    hyphens: manual;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* Liens dans le contenu. La regle `a{ color: inherit; text-decoration: none }`
   plus haut supprime toute affordance : sans cette regle, chaque lien de texte
   devait etre restyle a la main (la meme chaine style="..." etait recopiee
   6 fois dans les pages). */
.page-content a,
.section-note a{
  color: var(--indigo);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-content a:hover,
.section-note a:hover{ color: var(--indigo-dark); }
/* Les boutons ne doivent pas heriter du soulignement.
   Cette regle imposait aussi `color: var(--indigo-dark)`. Avec sa specificite
   (0,2,1) elle ecrasait la couleur propre de chaque variante de bouton, y
   compris `.inscription-card .btn-primary` (0,2,0) qui demandait du blanc :
   le texte sortait donc en indigo fonce sur fond indigo, soit 1,52:1 — un
   bouton illisible. Elle ne touche plus qu'au soulignement, et chaque variante
   declare sa couleur avec un selecteur assez specifique pour l'emporter. */
.page-content a.btn{ text-decoration: none; }
.page-content a.btn-primary{ color: var(--indigo-dark); }
/* Une carte entiere transformee en lien ne doit pas heriter du soulignement
   des liens de texte : c'est le bloc qui est cliquable, pas un mot dans une
   phrase. Sans cette regle, titre et description apparaissent soulignes. */
.page-content a.prog-carte,
.page-content a.value-card,
.page-content a.program-card,
.page-content a.actu-card{
  text-decoration: none;
  color: inherit;
}

/* Listes a puces du contenu. Deux <ul> etaient stylees en dur avec des
   valeurs divergentes (13px/1.6 et 15px/1.7). */
.page-content ul{
  font: 500 15px/1.7 Manrope, sans-serif;
  color: var(--text-muted-dark);
  padding-left: 20px;
  margin: 10px 0 0;
}

/* L'e-mail est un mot insecable de 34 caracteres : il debordait d'environ
   50px de sa carte en desktop. */
.contact-card .value{ overflow-wrap: anywhere; }
.contact-card .value a{ color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; }
.page-content > p:first-child{ font: 500 15px/1.6 Manrope, sans-serif; color: var(--text-muted-dark); max-width: 560px; }
.page-content h2{ font: 28px/1 Anton, sans-serif; color: var(--navy); margin: 32px 0 6px; }
.section-note{ font: 500 14px/1.6 Manrope, sans-serif; color: var(--text-muted-dark); margin: 0 0 8px; }
.section-note.info{ font: 600 15px/1.6 Manrope, sans-serif; color: var(--text-strong-dark); }

/* Pricing (Tarifs) */
.pricing-grid{ display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.pricing-card{
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(29,27,58,.08);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pricing-card .name{ font: 700 15px/1.3 Oswald, sans-serif; color: var(--navy); text-transform: uppercase; }
.pricing-card .desc{ font: 600 14px/1.5 Manrope, sans-serif; color: var(--text-strong-dark); margin-top: 6px; }
/* Le prix etait en 13px gris, plus discret que la description a cote. Sur une
   page de tarifs c'est pourtant l'information qu'on vient chercher : il passe
   en Anton, couleur navy, avec l'unite en petit a cote. */
.pricing-card .price{
  font: 26px/1 Anton, sans-serif;
  color: var(--navy);
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.pricing-card .price span{
  font: 600 12px/1 Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted-dark);
}
/* Mention "A partir de" au-dessus du montant.
   Trois des quatre programmes couvrent une fourchette : l'Ecole de tennis va de
   350 a 1 300 EUR, les stages de 100 a 160 EUR selon la formule. Le montant
   plancher etait affiche seul, donc lu comme LE prix. La mention ne peut pas
   vivre dans le meme conteneur que le chiffre : `.price` est un flex en
   alignement sur la ligne de base, elle s'y serait posee a cote du montant. */
.price-bloc{ white-space: nowrap; }
/* Deux tarifs empiles, chacun avec son intitule : c'est le cas des stages, ou
   la demi-journee et la journee complete coexistent. Les afficher tous les deux
   vaut mieux qu'un "a partir de" qui laisse deviner le second. */
.price-bloc .price + .price{ margin-top: 7px; }
.price-des{
  font: 700 10px/1 Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted-dark);
  margin-bottom: 5px;
}

/* Prix non communique : on ne met pas en avant une absence d'information. */
.pricing-card .price.price-demande{
  font: 700 13px/1.2 Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--indigo);
  white-space: normal;
}
.panneau-titre{
  font: 700 13px/1 Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--clay);
  margin: 0 0 16px;
}

/* ===========================================================================
   Inscriptions hub
   Trois corrections d'un coup :
   - les boutons ne s'alignaient pas d'une carte a l'autre, parce que le bouton
     suivait immediatement un texte de longueur variable. Il vit desormais dans
     une zone d'action poussee en bas par `margin-top: auto`, donc a la meme
     hauteur dans toutes les cartes de la rangee ;
   - la page etait quatre rectangles blancs sur fond creme, sans couleur. Une
     barre d'accent en tete de carte distingue maintenant d'un coup d'oeil ce
     qui est ouvert de ce qui ne l'est pas encore ;
   - les pastilles de statut etaient delavees (indigo a 12 %). Reprises en
     teintes franches, toutes au-dessus de 10:1.
   =========================================================================== */
.inscription-grid{ display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.inscription-card{
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(29,27,58,.08);
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Barre d'accent : couleur du statut, pas de la formule. Sur cette page, la
   question du visiteur est « puis-je m'inscrire maintenant ? ». */
.inscription-card::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: var(--clay-dark);
}
.inscription-card.est-bientot::before{ background: var(--orange); }
.inscription-card .name{ font: 700 18px/1.3 Oswald, sans-serif; color: var(--navy); text-transform: uppercase; }
.inscription-card .desc{ font: 600 14px/1.6 Manrope, sans-serif; color: var(--text-strong-dark); }
.inscription-card .status{
  align-self: flex-start;
  font: 700 10px/1 Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 6px 11px;
  border-radius: 999px;
}
/* 11,03:1 */
.inscription-card .status.open{
  background: rgba(var(--clay-rgb),.45);
  border: 1px solid rgba(var(--clay-dark-rgb),.55);
  color: var(--indigo-dark);
}
/* 10,84:1 */
.inscription-card .status.soon{
  background: rgba(255,106,61,.16);
  border: 1px solid rgba(255,106,61,.4);
  color: var(--indigo-dark);
}
/* Zone d'action collee en bas : c'est elle qui aligne les boutons entre eux. */
.inscription-action{ margin-top: auto; padding-top: 6px; }
.inscription-action .section-note{ margin: 0; }
.inscription-card .btn{ align-self: flex-start; }
.inscription-card .btn-primary,
.page-content .inscription-card a.btn-primary{
  background: var(--clay);
  color: var(--indigo-dark);
  transition: transform .25s, box-shadow .25s;
}
.inscription-card .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px rgba(29,27,58,.18); }

/* Actualités list */
.actu-list{ display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }

/* Contact */
.contact-grid{ display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.contact-card{
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(29,27,58,.08);
  padding: 20px 22px;
}
.contact-card .label{
  font: 700 11px/1 Oswald, sans-serif;
  color: var(--indigo);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.contact-card .value{ font: 600 15px/1.5 Manrope, sans-serif; color: var(--navy); }

/* Le Club — values */
.values-grid{ display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.value-card{ background: #fff; border-radius: 16px; padding: 20px 22px; box-shadow: 0 6px 18px rgba(29,27,58,.08); }
/* --indigo au lieu de --orange : l'orange sur blanc ne donne que 2.85:1. */
.value-card .num{ font: 700 12px/1 Oswald, sans-serif; color: var(--indigo); margin-bottom: 6px; }
.value-card .name{ font: 700 16px/1.3 Oswald, sans-serif; color: var(--navy); text-transform: uppercase; margin-bottom: 4px; }
.value-card p{ font: 500 14.5px/1.6 Manrope, sans-serif; color: var(--text-strong-dark); margin: 0; }

/* Activites (Mercredi Jeunesse) — pastilles regroupees par famille.
   C'etait auparavant une seule liste de dix pastilles alternant vert et orange
   une case sur deux : l'alternance ne portait aucun sens, et la liste se
   cassait en 7 + 3 au retour a la ligne, ce qui donnait un pave brouillon.
   Elles sont desormais reparties en trois groupes titres, toutes de la meme
   couleur — la seule difference visuelle restante porte du sens. */
.activites-grid{ display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.activite-groupe{
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(29,27,58,.08);
  padding: 20px 22px;
}
.activite-groupe .label{
  font: 700 11px/1 Oswald, sans-serif;
  color: var(--indigo);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 12px;
}
/* Selecteur double : `.page-content ul` (0,1,1) l'emporterait sinon sur
   `.activity-pills` (0,1,0) et rajouterait son padding-left de 20px, qui
   decalait les pastilles vers la droite sans raison. */
.activity-pills,
.page-content .activity-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.activity-pills li{
  font: 700 13px/1 Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--indigo-dark);
  background: rgba(var(--clay-rgb),.4);
  border: 1px solid rgba(var(--clay-dark-rgb),.55);
  padding: 9px 16px;
  border-radius: 999px;
}

/* Desktop layout (adapted from concept 3a) */
@media (min-width: 900px){
  .site-header{ padding: 18px 48px; flex-wrap: nowrap; }
  /* Le bouton burger disparait : la nav reprend sa place en ligne. L'ordre du
     DOM est logo / bouton / S'inscrire / nav, on retablit donc l'ordre visuel. */
  .nav-toggle{ display: none; }
  .site-logo{ order: 1; padding: 0; }
  .site-nav{
    order: 2;
    display: flex;
    align-items: center;
    gap: 28px;
    width: auto;
    margin: 0 auto;
    border-top: none;
    padding-top: 0;
  }
  .site-nav a{
    font: 600 13px/1 Oswald, sans-serif;
    color: var(--text-muted-light);
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 10px 0;
  }
  .site-nav a:hover{ color: #fff; }
  .btn-signup{ order: 3; padding: 12px 22px; }
  .btn-signup:hover{ transform: translateY(-2px); }

  .footer-links{ flex-direction: row; gap: 28px; font-size: 13px; }
  .footer-links a{ padding: 4px 0; }
  .footer-contact{ flex-direction: row; gap: 18px; }
  .footer-contact a{ padding: 4px 0; }

  .hero{
    padding: 56px 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
  }
  .hero::before{ left: -100px; right: auto; top: auto; bottom: -160px; width: 460px; height: 460px; }
  /* Le titre passe de 56 a 88 px : les ecarts suivent, sinon le bloc se tasse. */
  .hero .tag{ margin-bottom: 26px; }
  .hero h1{ font-size: 88px; margin-bottom: 24px; }
  /* 520 px et pas 440 : l'accroche est justifiee, et a 440 px les mots
     s'ecartaient jusqu'a 11 px la ou l'espace naturel est de 3,4 px. A 520 px
     l'ecart maximal retombe a 4,4 px, soit un texte justifie sans riviere.
     Ne pas elargir davantage : a la largeur pleine de la colonne (562 px) le
     defaut revient, a 10,4 px. */
  .hero p{ font-size: 17px; max-width: 520px; }
  /* Cadre photo du hero. Sans image, le dégradé profond tient tout seul :
     pas de logo dupliqué avec le header, pas d'aplat rogné par l'arrondi. */
  .hero-visual{
    display: block;
    position: relative;
    height: 420px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--indigo-dark), #17153a);
    box-shadow: 0 30px 60px rgba(13,12,26,.4);
    overflow: hidden;
  }
  .hero-visual .photo-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Accent clay franc le long du bord bas — assumé, pas rogné en biais. */
  .hero-visual::after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 6px;
    background: var(--clay);
  }

  .stat-bar div{ padding: 22px 10px; font-size: 14px; }

  .mj-section{ padding: 40px 48px 8px; max-width: 1200px; margin: 0 auto; }
  /* Photo a gauche, contenu a droite : la carte reste lisible en une ligne
     de lecture au lieu de s'etirer sur toute la largeur. */
  .mj-card{ display: grid; grid-template-columns: 42% 1fr; align-items: stretch; }
  .mj-media{ height: auto; min-height: 340px; }
  .mj-body{ padding: 40px 40px 44px; align-self: center; }
  .mj-body h2{ font-size: 44px; margin: 18px 0 12px; }
  .mj-body > p{ font-size: 16px; max-width: 460px; }
  .mj-facts{ grid-template-columns: repeat(3, 1fr); gap: 20px; }

  .section{ padding: 44px 48px 18px; max-width: 1200px; margin: 0 auto; }
  .section h2{ font-size: 52px; margin-bottom: 32px; }
  .programs{ flex-direction: row; gap: 24px; }
  .program-card{ flex: 1; transition: transform .25s, box-shadow .25s; }
  .program-card:hover{ transform: translateY(-6px); box-shadow: 0 20px 36px rgba(29,27,58,.2); }
  .program-card .banner{ height: 180px; }

  .cta-banner{
    margin: 48px auto;
    max-width: 1200px;
    padding: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .cta-banner-inner{ display: contents; }
  .cta-banner-inner p{ font-size: 44px; margin: 0; }

  .site-footer{
    padding: 40px 48px 32px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .footer-address{ margin-top: 0; }

  /* Elargi de 900 a 1120 px pour que les grilles occupent vraiment la largeur
     disponible. Les paragraphes, eux, restent bornes : au-dela d'environ 75
     caracteres par ligne, l'oeil perd le debut de la ligne suivante. Ce sont
     donc les tableaux et cartes qui profitent de la largeur, pas le texte. */
  .page-content{ max-width: 1120px; margin: 0 auto; padding: 36px 48px 48px; }
  .page-content > p,
  .page-content > ul,
  .page-content > .section-note{ max-width: 75ch; }
  .page-content h2{ font-size: 34px; }

  .page-hero{ padding: 40px 48px; }
  .page-hero-inner{ max-width: 1120px; margin: 0 auto; }
  .page-hero h1{ font-size: 64px; }
  /* Plafond porte de 480 a 820 px : a 480 px la ligne se coupait bien avant
     le bord du bandeau et laissait la moitie droite vide. 820 px reste sous
     la limite de lisibilite tout en occupant vraiment la largeur. */
  .page-hero p{ font-size: 16px; max-width: 820px; }

  .pricing-grid, .contact-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  /* Quatre cartes sur une grille de trois laissent la derniere seule sur sa
     ligne. La synthese des Tarifs en compte quatre : elle passe en 2 x 2. */
  .pricing-grid.est-paire{ grid-template-columns: repeat(2, 1fr); }
  .pricing-card{ flex-direction: column; align-items: flex-start; }

  .inscription-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .inscription-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 30px rgba(29,27,58,.16); transition: transform .25s, box-shadow .25s; }

  .values-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .activites-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

  .section-note.info{ font-size: 16px; max-width: 640px; }
  .pricing-card .desc, .inscription-card .desc{ font-size: 15px; }
  .value-card p{ font-size: 15px; }
  .activity-pills li{ font-size: 14px; padding: 10px 18px; }
}

/* Badge "nouveaute". Etait un <span> stylé en dur, en orange plein sur fond
   blanc — soit 2.85:1, tres en dessous du seuil AA de 4.5:1. Repris en
   pastille teintee avec texte fonce, comme .activity-pills : 10.72:1. */
.badge-nouveaute{
  display: inline-block;
  font: 700 11px/1 Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--indigo-dark);
  background: rgba(255,106,61,.14);
  border: 1px solid rgba(255,106,61,.4);
  padding: 5px 9px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 6px;
}

/* Carte de valeur occupant toute la largeur de la grille. */
.value-card--full{ grid-column: 1 / -1; }

/* ===========================================================================
   Formulaires d'inscription (Mercredi Jeunesse, Stages vacances)
   Le formulaire Ecole de tennis vit a part, a la racine du site, et n'utilise
   pas cette feuille.
   =========================================================================== */
.form-section{
  background: #fff;
  border-radius: 16px;
  padding: 20px 20px 24px;
  margin-bottom: 16px;
  box-shadow: 0 6px 18px rgba(29,27,58,.1);
}
.form-section > h2{
  font: 26px/1 Anton, sans-serif;
  color: var(--navy);
  margin: 0 0 4px;
}
.form-section .form-hint{
  font: 500 14px/1.5 Manrope, sans-serif;
  color: var(--text-muted-dark);
  margin: 0 0 18px;
}

.field{ margin-bottom: 16px; }
.field label{
  display: block;
  font: 700 12px/1 Oswald, sans-serif;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 7px;
}
.field .optionnel{ color: var(--text-muted-dark); font-weight: 500; text-transform: none; letter-spacing: 0; }
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="date"],
.field textarea,
.field select{
  width: 100%;
  font: 500 16px/1.4 Manrope, sans-serif;  /* 16px : evite le zoom auto sur iOS */
  color: var(--navy);
  background: var(--cream);
  border: 1px solid #d8d5e4;
  border-radius: 10px;
  padding: 13px 14px;
  min-height: 46px;
}
.field textarea{ min-height: 92px; resize: vertical; }
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible{ border-color: var(--indigo); }
.field .erreur{
  display: none;
  font: 600 13px/1.4 Manrope, sans-serif;
  color: #b3261e;   /* rouge fonce : 6.1:1 sur blanc */
  margin-top: 6px;
}
.field.en-erreur .erreur{ display: block; }
.field.en-erreur input,
.field.en-erreur textarea,
.field.en-erreur select{ border-color: #b3261e; }

.champ-double{ display: grid; gap: 0 14px; }

/* Cases a cocher et consentements */
.case{
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 0;
  font: 500 15px/1.5 Manrope, sans-serif;
  color: var(--text-strong-dark);
  cursor: pointer;
}
.case input[type="checkbox"]{
  flex: none;
  width: 22px; height: 22px;
  margin: 1px 0 0;
  accent-color: var(--indigo);
}

/* Semaines de stage, groupees par stage */
.stage-groupe{
  border: 1px solid #e2dff0;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.stage-groupe > h3{
  font: 700 15px/1.3 Oswald, sans-serif;
  color: var(--navy);
  text-transform: uppercase;
  margin: 0 0 2px;
}
.stage-groupe .periode{
  font: 500 13px/1.4 Manrope, sans-serif;
  color: var(--text-muted-dark);
  margin: 0 0 8px;
}
.stage-vide{
  font: 500 15px/1.6 Manrope, sans-serif;
  color: var(--text-muted-dark);
}

/* Carte enfant repetable */
.enfant-carte{
  border: 1px solid #e2dff0;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
  position: relative;
}
.enfant-carte > h3{
  font: 700 14px/1.3 Oswald, sans-serif;
  color: var(--indigo);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 14px;
}
.btn-retirer{
  position: absolute;
  top: 12px; right: 12px;
  min-height: 44px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid #d8d5e4;
  border-radius: 8px;
  font: 600 12px/1 Oswald, sans-serif;
  text-transform: uppercase;
  color: var(--text-muted-dark);
  cursor: pointer;
}
.btn-retirer:hover{ border-color: #b3261e; color: #b3261e; }
.btn-ajouter{
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 20px;
  background: transparent;
  border: 2px dashed var(--indigo);
  border-radius: 10px;
  font: 700 13px/1 Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--indigo);
  cursor: pointer;
}
.btn-ajouter:hover{ background: rgba(67,67,153,.06); }

/* Barre d'envoi */
.form-envoi{ margin-top: 20px; }
.form-envoi .btn{ width: 100%; }
.form-erreur-globale{
  display: none;
  background: #fdecea;
  border: 1px solid #f3b8b2;
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 14px;
  font: 600 14px/1.5 Manrope, sans-serif;
  color: #8c1d18;
}
.form-erreur-globale.visible{ display: block; }

.form-confirmation{
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(29,27,58,.1);
}
.form-confirmation h2{ font: 30px/1.05 Anton, sans-serif; color: var(--navy); margin: 0 0 10px; }
.form-confirmation p{ font: 500 15px/1.6 Manrope, sans-serif; color: var(--text-strong-dark); margin: 0 0 8px; }

@media (min-width: 900px){
  .form-section{ padding: 28px 30px 32px; }
  .champ-double{ grid-template-columns: 1fr 1fr; }
  .form-envoi .btn{ width: auto; min-width: 280px; }
}

/* ===========================================================================
   Page Le Club — la page etait entierement creme et blanche apres son
   bandeau de titre : aucune image, aucune couleur sur 82% de sa hauteur.
   Ces trois composants apportent le relief manquant.
   =========================================================================== */

/* Bandeau photo des installations. */
/* ===========================================================================
   Illustration des pages programme.
   Les bandes photo pleine largeur avaient ete retirees de ces pages : a 280 px
   de haut sur toute la largeur, elles mangeaient un ecran entier pour un
   apport purement decoratif. La photo revient ici a cote du texte
   d'introduction, dans une colonne de 340 px a son ratio natif 3:2. Deux
   consequences : elle ne rogne rien (les quatre fichiers sont en 1500x1000,
   donc `cover` n'a rien a couper, aucune tete n'est coupee), et elle occupe
   une place jusque la vide a droite d'un paragraphe court.
   =========================================================================== */
.prog-intro{ display: flex; flex-direction: column; gap: 16px; margin-bottom: 4px; }
.prog-intro > p{
  font: 500 15px/1.6 Manrope, sans-serif;
  color: var(--text-muted-dark);
  margin: 0;
}
.prog-intro-media{
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--indigo), var(--indigo-dark));
  box-shadow: 0 14px 32px rgba(29,27,58,.18);
}
.prog-intro-media .photo-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Lisere clay, meme signature que la bande photo de la page Le Club. */
.prog-intro-media::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: var(--clay);
  z-index: 1;
}
@media (min-width: 900px){
  .prog-intro{
    display: grid;
    grid-template-columns: 1fr 340px;
    align-items: center;
    gap: 32px;
    margin-bottom: 8px;
  }
}

.photo-bande{
  position: relative;
  height: 190px;
  border-radius: 18px;
  overflow: hidden;
  margin: 4px 0 20px;
  background: linear-gradient(135deg, var(--indigo), var(--indigo-dark));
  box-shadow: 0 14px 32px rgba(29,27,58,.18);
}
.photo-bande .photo-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Liseré clay, echo du cadre photo du hero de l'Accueil. */
.photo-bande::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: var(--clay);
  z-index: 1;
}

/* Carte encadrant, en navy : c'est elle qui casse la monotonie de la page et
   donne du poids aux qualifications, qui n'etaient qu'une liste a puces.

   La photo est montree ENTIERE. Le cadre porte le ratio natif du fichier, donc
   `cover` ne rogne rien et aucun object-position n'est necessaire. C'est la
   raison de la mise en page : une colonne pleine hauteur obligeait a couper
   dans le portrait. */
.coach{
  background: var(--navy);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(29,27,58,.18);
  margin-top: 12px;
}

.coach-photo{
  aspect-ratio: 1100 / 1077;   /* ratio natif de yann-drieux.jpg */
  background: linear-gradient(135deg, var(--indigo), var(--indigo-dark));
  overflow: hidden;
}
.coach-photo .photo-img{
  width: 100%;
  height: 100%;
  object-fit: cover;   /* sans effet ici : le cadre a le ratio de la source */
  display: block;
}

.coach-tete{ padding: 22px 22px 18px; }
.coach-tete .tag{ background: rgba(var(--clay-rgb),.22); color: var(--clay); }
.coach-tete h3{
  font: 34px/1 Anton, sans-serif;
  color: #fff;
  margin: 14px 0 8px;
  letter-spacing: .01em;
}
.coach-tete p{
  font: 500 15px/1.6 Manrope, sans-serif;
  color: var(--text-muted-light);
  margin: 0;
}
.coach-titres{
  list-style: none;
  margin: 0;
  padding: 0 22px 24px;
  display: grid;
  gap: 14px;
}
.coach-titres li{
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.coach-titres .cle{
  display: block;
  font: 700 17px/1.15 Oswald, sans-serif;
  color: var(--clay);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 4px;
}
.coach-titres .detail{
  font: 500 14.5px/1.5 Manrope, sans-serif;
  color: var(--text-muted-light);
}

/* Filet colore en tete des cartes valeurs, pour qu'elles cessent d'etre de
   simples rectangles blancs. */
.value-card{ position: relative; }
.values-grid .value-card::before{
  content: "";
  position: absolute;
  left: 22px; right: 22px; top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--indigo);
}
.values-grid .value-card:nth-child(2)::before{ background: var(--clay-dark); }
.values-grid .value-card:nth-child(3)::before{ background: var(--orange); }

@media (min-width: 900px){
  .photo-bande{ height: 280px; }
  /* Desktop : photo a gauche du nom, a son format naturel — elle n'est plus
     etiree sur toute la hauteur de la carte, donc plus rien n'est rogne.
     Les qualifications passent dessous, sur deux colonnes. */
  .coach{ padding: 34px; }
  .coach-entete{
    display: grid;
    grid-template-columns: 260px 1fr;
    align-items: center;
    gap: 28px;
  }
  .coach-photo{ border-radius: 14px; }
  .coach-tete{ padding: 0; }
  .coach-tete h3{ font-size: 46px; }
  .coach-titres{
    grid-template-columns: 1fr 1fr;
    padding: 0;
    margin-top: 28px;
    gap: 18px 28px;
  }
}

/* Panneau navy reutilisable. Sert a casser les longues suites de cartes
   blanches sur fond creme — c'est ce qui donnait aux pages interieures leur
   aspect eteint. Reprend la meme langue visuelle que la carte encadrant. */
.panneau{
  background: var(--navy);
  border-radius: 20px;
  padding: 22px;
  margin-top: 12px;
  box-shadow: 0 14px 32px rgba(29,27,58,.18);
}
/* Dans un panneau, la liste de faits n'a plus besoin de son filet superieur :
   le fond sombre suffit a la detacher. */
.panneau .mj-facts{
  margin: 0;
  padding: 0;
  border-top: none;
}
.panneau-note{
  font: 500 14px/1.6 Manrope, sans-serif;
  color: var(--text-muted-light);
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.14);
}

/* Cartes valeurs rendues cliquables : sur Nos programmes elles mènent vers
   les autres formules. Le survol reprend celui des cartes programmes. */
a.value-card{ display: block; transition: transform .25s, box-shadow .25s; }
a.value-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 30px rgba(29,27,58,.16); }

@media (min-width: 900px){
  .panneau{ padding: 30px 34px; }
  .panneau .mj-facts{ grid-template-columns: repeat(3, 1fr); gap: 22px; }
}

/* ===========================================================================
   Page-carrefour Nos programmes : les quatre prestations presentees a egalite.
   Avant, l'Ecole de tennis occupait toute la page et les trois autres etaient
   reléguées dans un "Et aussi" en bas — elles passaient pour des a-cotes.
   =========================================================================== */
.prog-grid{ display: grid; gap: 18px; margin-top: 12px; }
.prog-carte{
  display: block;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(29,27,58,.1);
  transition: transform .25s, box-shadow .25s;
}
.prog-carte:hover{ transform: translateY(-4px); box-shadow: 0 18px 34px rgba(29,27,58,.18); }
.prog-media{
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--indigo), var(--indigo-dark));
  overflow: hidden;
}
.prog-media .photo-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.prog-corps{ padding: 20px 22px 24px; }
.prog-corps h2{
  font: 26px/1.05 Anton, sans-serif;
  color: var(--navy);
  margin: 0 0 8px;
}
.prog-corps > p{
  font: 500 15px/1.6 Manrope, sans-serif;
  color: var(--text-strong-dark);
  margin: 0 0 16px;
}
.prog-faits{
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding-top: 14px;
  border-top: 1px solid #e6e3f2;
}
.prog-faits dt{
  font: 700 11px/1 Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--indigo);
  margin-bottom: 4px;
}
.prog-faits dd{
  font: 600 14.5px/1.35 Manrope, sans-serif;
  color: var(--navy);
  margin: 0;
}
.prog-lien{
  display: inline-block;
  font: 700 13px/1 Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--indigo);
}
.prog-carte:hover .prog-lien{ color: var(--indigo-dark); }

@media (min-width: 900px){
  .prog-grid{ grid-template-columns: 1fr 1fr; gap: 24px; }
  .prog-corps{ padding: 24px 26px 28px; }
  .prog-corps h2{ font-size: 30px; }
  .prog-faits{ grid-template-columns: 1fr 1fr; gap: 14px 20px; }
}

/* ===========================================================================
   Sous-menu "Nos programmes".
   Pilote par aria-expanded et non par :hover — le survol seul est
   inutilisable au doigt et au clavier. Le meme balisage sert en mobile
   (deplie dans le menu burger) et en desktop (menu flottant).
   =========================================================================== */
.nav-groupe{ position: relative; }
.nav-sous-btn{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 14px 4px;
  font: 600 14px/1 Oswald, sans-serif;
  color: var(--text-muted-light);
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
}
.chevron{
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s;
}
.nav-sous-btn[aria-expanded="true"] .chevron{ transform: rotate(-135deg) translate(-3px, -3px); }

.nav-sous-menu{ display: none; }
.nav-sous-btn[aria-expanded="true"] + .nav-sous-menu{ display: block; }
.nav-sous-menu a{
  display: block;
  padding: 12px 4px 12px 18px;
  font: 600 13px/1.2 Oswald, sans-serif;
  color: var(--text-muted-light);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.nav-sous-menu a:hover{ color: #fff; }

@media (min-width: 900px){
  .nav-sous-btn{ width: auto; padding: 10px 0; font-size: 13px; }
  /* En desktop le sous-menu flotte au-dessus du contenu plutot que de
     repousser la page. */
  .nav-sous-btn[aria-expanded="true"] + .nav-sous-menu{
    position: absolute;
    top: calc(100% + 12px);
    left: -16px;
    z-index: 50;
    min-width: 240px;
    background: var(--navy);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 18px 36px rgba(13,12,26,.45);
  }
  .nav-sous-menu a{ padding: 11px 14px; border-radius: 8px; }
  .nav-sous-menu a:hover{ background: rgba(255,255,255,.08); }
}

/* Bloc de champ neutralise (ex. le repas quand la demi-journee est choisie).
   On l'estompe plutot que de le masquer : le parent voit que l'option existe
   et pourquoi elle ne s'applique pas. */
.bloc-inactif{ opacity: .55; }
.bloc-inactif select{ cursor: not-allowed; }

/* Deroule d'une journee de stage. */
.journee{
  list-style: none;
  margin: 12px 0 0;
  padding: 0 0 0 4px;
  display: grid;
  gap: 0;
}
.journee li{
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 14px;
  padding: 14px 0 14px 20px;
  border-left: 2px solid #e2dff0;
  position: relative;
}
.journee li::before{
  content: "";
  position: absolute;
  left: -6px; top: 20px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--clay);
  border: 2px solid var(--cream);
}
.journee li:last-child{ border-left-color: transparent; }
.journee .heure{
  font: 700 15px/1.2 Oswald, sans-serif;
  color: var(--indigo);
}
.journee .quoi{
  font: 500 15px/1.55 Manrope, sans-serif;
  color: var(--text-strong-dark);
}

/* Tableau de tarifs. Defile horizontalement plutot que de deborder la page
   sur les petits ecrans. */
.tarif-tableau{ overflow-x: auto; margin-top: 12px; }
.tarif-tableau table{
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(29,27,58,.1);
}
.tarif-tableau th,
.tarif-tableau td{
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid #eeecf7;
}
.tarif-tableau thead th{
  font: 700 12px/1.2 Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
  background: var(--navy);
}
.tarif-tableau tbody th{
  font: 600 14.5px/1.4 Manrope, sans-serif;
  color: var(--navy);
}
.tarif-tableau td{
  font: 600 15px/1.4 Manrope, sans-serif;
  color: var(--text-strong-dark);
  white-space: nowrap;
}
.tarif-tableau .precision{
  display: block;
  font: 500 12.5px/1.4 Manrope, sans-serif;
  color: var(--text-muted-dark);
  margin-top: 2px;
}
.tarif-tableau .total{ background: rgba(var(--clay-rgb),.16); }
.tarif-tableau .total th,
.tarif-tableau .total td{ color: var(--navy); font-weight: 700; }
.tarif-tableau .vide{ color: var(--text-muted-dark); }
.tarif-tableau tbody tr:last-child th,
.tarif-tableau tbody tr:last-child td{ border-bottom: none; }

/* Compteur de places restantes sur les semaines de stage. Le chiffre vient
   d'Airtable : capacite saisie moins inscriptions recues. */
.places{
  display: block;
  font: 700 12px/1 Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--indigo);
  margin-top: 5px;
}
.places-peu{ color: #b45309; }   /* ambre fonce : 4.8:1 sur creme */
.places-complet{ color: #b3261e; }
.case-complet{ opacity: .6; cursor: not-allowed; }
.case-complet input{ cursor: not-allowed; }