/* =====================================================================
   ZR Team Antibes-Vallauris, site public

   La palette vient du dojo lui-même : le mur blanc froid, le tatami
   graphite, le vert de la ZR Team. Anybody varie sa largeur : condensée
   et grasse pour frapper, étirée et fine pour poser le propos, comme le
   « ANTIBES / VALLAURIS » du logo.
   ===================================================================== */

@font-face {
  font-family: 'Anybody';
  src: url('/assets/fonts/anybody-normal-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/assets/fonts/hanken-grotesk-normal-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --mur: #E8EAE6;
  --mur-clair: #F3F4F1;
  --trait: #C8CCC6;
  --tatami: #25282C;
  --tatami-clair: #2F3337;
  --trait-sombre: #41464C;
  --encre: #0D0E0F;
  --gris: #585E64;
  --gris-clair: #A4AAAF;
  --texte-sombre: #CDD1D3;
  --zr: #0A7438;
  --zr-vif: #2BC46E;
  --alerte: #B3261E;
  /* Couleurs des dojos, alignées sur le calendrier Strivy : Antibes blanc, Vallauris orange.
     L'ordre suit celui des dojos dans l'administration (1er = Antibes, 2e = Vallauris). */
  --dojo-1: #FFFFFF;
  --dojo-2: #DD9C3C;

  --f-titre: 'Anybody', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --f-texte: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --gouttiere: clamp(1.25rem, 5.2vw, 4.5rem);
  --largeur: 92rem;
  --section: clamp(5rem, 12vw, 9rem);
  --entete: 4.25rem;
  --rayon: 3px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --marque-ratio: 2.4103;
  color-scheme: light;
}

/* --- Base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--entete) + 1rem);
}
@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--mur);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body.sans-defilement { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
input, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure, address { margin: 0; }
ol, ul { padding: 0; list-style: none; }
address { font-style: normal; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--zr); outline-offset: 3px; }
.sombre :focus-visible, .pied :focus-visible, .menu :focus-visible, .carte-cours--enfants :focus-visible { outline-color: var(--zr-vif); }
::selection { background: var(--zr-vif); color: var(--encre); }

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.evitement {
  position: fixed; left: 1rem; top: -5rem; z-index: 100;
  padding: .875rem 1.25rem;
  background: var(--encre); color: var(--mur);
  font-weight: 600; text-decoration: none;
}
.evitement:focus { top: calc(env(safe-area-inset-top) + 1rem); }

.cadre { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }
.sombre { background: var(--tatami); color: var(--mur); }

/* --- Typographie --------------------------------------------------------- */

.etiquette {
  font-family: var(--f-titre);
  font-stretch: 125%;
  font-weight: 600;
  font-size: .6875rem;
  line-height: 1.3;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.titre { font-family: var(--f-titre); line-height: .86; }
.titre__fort {
  display: block;
  font-weight: 820;
  font-stretch: 56%;
  font-size: clamp(3.5rem, 16vw, 9.5rem);
  text-transform: uppercase;
  letter-spacing: -.005em;
}
.titre__large {
  display: block;
  margin-top: .32em;
  font-weight: 300;
  font-stretch: 150%;
  font-size: clamp(1.375rem, 6.2vw, 3.5rem);
  line-height: 1;
  letter-spacing: -.035em;
}
.tete-section { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 7vw, 5rem); }
.tete-section__etiquette { display: flex; align-items: center; gap: .75rem; color: var(--gris); }
.tete-section__etiquette::before { content: ''; flex: none; width: 1.5rem; height: 2px; background: var(--zr); }
.sombre .tete-section__etiquette { color: var(--gris-clair); }
.sombre .tete-section__etiquette::before { background: var(--zr-vif); }

.texte { max-width: 38rem; }
.texte p + p { margin-top: 1em; }
.texte a { color: var(--zr); overflow-wrap: anywhere; }
.sombre .texte a { color: var(--zr-vif); }

/* --- Boutons et liens ---------------------------------------------------- */

.bouton {
  --fond: var(--encre);
  --texte: var(--mur);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 3.5rem;
  padding: 0 1.25rem 0 1.375rem;
  border-radius: var(--rayon);
  background: var(--fond);
  color: var(--texte);
  font-family: var(--f-titre);
  font-stretch: 115%;
  font-weight: 650;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
  transition: transform .25s var(--ease), background-color .25s, color .25s, box-shadow .25s;
}
.bouton:active { transform: scale(.975); }
.bouton:hover .fleche { transform: translateX(4px); }
.bouton--vif { --fond: var(--zr-vif); --texte: var(--encre); }
.bouton--vif:hover { --fond: #45D583; }
.bouton--clair { --fond: var(--mur); --texte: var(--encre); }
.bouton--clair:hover { --fond: #FFFFFF; }
.bouton--contour { --fond: transparent; --texte: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.bouton--contour:hover { box-shadow: inset 0 0 0 2px currentColor; }
.bouton--petit { min-height: 2.75rem; padding: 0 1rem; font-size: .6875rem; gap: .75rem; }

.fleche {
  flex: none;
  width: 1.375rem;
  height: .75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: transform .35s var(--ease);
}
.fleche--sortie { width: .75rem; height: .75rem; }
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-height: 2.75rem;
  font-family: var(--f-titre);
  font-stretch: 115%;
  font-weight: 650;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}
.lien-fleche:hover .fleche { transform: translateX(4px); }
.lien-fleche:hover .fleche--sortie { transform: translate(2px, -2px); }

.marque {
  display: block;
  height: 1.75rem;
  aspect-ratio: var(--marque-ratio);
  background-color: currentColor;
  -webkit-mask: url('/assets/img/zr.svg') center / contain no-repeat;
  mask: url('/assets/img/zr.svg') center / contain no-repeat;
}

/* --- Entête -------------------------------------------------------------- */

.entete {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  padding-top: env(safe-area-inset-top);
  transition: transform .55s var(--ease), background-color .35s, box-shadow .35s;
}
.entete.est-defile {
  background-color: rgba(232, 234, 230, .86);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(13, 14, 15, .08);
}
.entete.est-cache { transform: translateY(-100%); }
.entete__cadre { display: flex; align-items: center; gap: 1.25rem; height: var(--entete); }
.entete__marque { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; margin-right: auto; text-decoration: none; }
.entete__villes {
  display: grid;
  padding-left: .75rem;
  border-left: 1px solid rgba(13, 14, 15, .3);
  font-family: var(--f-titre);
  font-stretch: 150%;
  font-weight: 500;
  font-size: .5625rem;
  line-height: 1.45;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.entete__nav, .entete__cta { display: none; }
.entete__menu {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  min-height: 2.75rem;
  padding: 0 .25rem 0 .75rem;
  margin-right: -.25rem;
  font-family: var(--f-titre);
  font-stretch: 125%;
  font-weight: 600;
  font-size: .6875rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.entete__menu i { width: 1.5rem; height: .5rem; border-block: 1.5px solid currentColor; }

@media (min-width: 48rem) {
  .entete__cta { display: inline-flex; }
}
@media (min-width: 68rem) {
  .entete__nav { display: flex; gap: clamp(1.25rem, 2.1vw, 2.25rem); }
  .entete__nav a { position: relative; padding-block: .75rem; font-size: .9375rem; font-weight: 500; text-decoration: none; }
  .entete__nav a::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: .45rem;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .45s var(--ease);
  }
  .entete__nav a:hover::after, .entete__nav a[aria-current='true']::after { transform: scaleX(1); transform-origin: left; }
  .entete__menu { display: none; }
}

/* --- Bandeau des partenaires --------------------------------------------- */

/* Fond blanc : les logos institutionnels sont dessinés pour du blanc, et deux des
   quatre arrivent avec un fond blanc opaque qui ferait un rectangle sur fond teinté. */
.partenaires { padding-block: clamp(2.5rem, 6vw, 4rem); background: #FFFFFF; }
.partenaires__titre { display: block; margin: 0 0 1.75rem; color: var(--gris); text-align: center; }
.partenaires__liste {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1rem, 3vw, 2.25rem);
  margin: 0; padding: 0; list-style: none;
  --logo-l: clamp(6rem, 17vw, 9rem);
  --logo-h: clamp(4rem, 11vw, 6rem);
}
/* Chaque logo reçoit une boîte identique : un blason haut et étroit et un logo
   large avec sa signature pèsent alors le même poids à l'œil. */
.partenaires__liste li {
  display: grid; place-items: center;
  width: var(--logo-l);
  height: var(--logo-h);
}
/* Hauteur en unités explicites : un `max-height: 100%` ne se résout pas
   sur un enfant de grille et laisse l'image déborder de sa boîte. */
.partenaires__liste img { max-width: 100%; max-height: var(--logo-h); width: auto; height: auto; }
/* Les logos gardent leurs couleurs officielles : les chartes des villes et du
   département interdisent de les teinter ou de les passer en niveaux de gris. */
.partenaires__liste a { display: grid; place-items: center; width: 100%; height: 100%; transition: opacity .25s; }
.partenaires__liste a:hover, .partenaires__liste a:focus-visible { opacity: .7; }

/* --- Menu mobile --------------------------------------------------------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) var(--gouttiere) calc(env(safe-area-inset-bottom) + 1.5rem);
  background: var(--tatami);
  color: var(--mur);
  overflow-y: auto;
  overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .65s var(--ease);
}
.menu.est-ouvert { clip-path: inset(0 0 0 0); }
.menu__haut { display: flex; flex: none; align-items: center; justify-content: space-between; height: var(--entete); }
.menu__fermer {
  display: inline-flex; align-items: center; gap: .625rem;
  min-height: 2.75rem; padding: 0 .25rem 0 .75rem; margin-right: -.25rem;
  font-family: var(--f-titre); font-stretch: 125%; font-weight: 600; font-size: .6875rem;
  letter-spacing: .15em; text-transform: uppercase;
}
.menu__fermer i { position: relative; width: 1.25rem; height: 1.25rem; }
.menu__fermer i::before, .menu__fermer i::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1.5px; background: currentColor;
}
.menu__fermer i::before { transform: rotate(45deg); }
.menu__fermer i::after { transform: rotate(-45deg); }
.menu__liens { display: grid; margin-top: clamp(1rem, 5vh, 2.5rem); border-top: 1px solid var(--trait-sombre); }
.menu__liens a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .5rem 0 .55rem;
  border-bottom: 1px solid var(--trait-sombre);
  text-decoration: none;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .5s var(--ease), transform .8s var(--ease);
  transition-delay: calc(.12s + var(--i, 0) * .045s);
}
.menu.est-ouvert .menu__liens a { opacity: 1; transform: none; }
.menu__liens span {
  font-family: var(--f-titre); font-weight: 820; font-stretch: 56%;
  font-size: clamp(2.5rem, 12.5vw, 4.5rem); line-height: 1; text-transform: uppercase;
}
.menu__liens small {
  font-family: var(--f-titre); font-stretch: 125%; font-weight: 500; font-size: .625rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gris-clair); text-align: right;
}
.menu__bas { display: grid; gap: .25rem; margin-top: auto; padding-top: 2rem; }
.menu__inscription { margin-bottom: 1.25rem; }
.menu__tel {
  font-family: var(--f-titre); font-weight: 720; font-stretch: 66%;
  font-size: 2.25rem; line-height: 1.1; text-decoration: none;
}
.menu__email { color: var(--gris-clair); text-decoration: none; padding-block: .5rem; }
@media (min-width: 68rem) { .menu { display: none !important; } }

/* --- Accueil ------------------------------------------------------------- */

.accueil { --debord: clamp(5.5rem, 27vw, 13rem); }
.accueil__haut {
  background: var(--mur);
  padding-top: calc(env(safe-area-inset-top) + var(--entete) + clamp(1rem, 4.5vw, 3rem));
}
.accueil--sans-photo { --debord: 0rem; }
.accueil__grille { display: grid; gap: clamp(1.5rem, 5vw, 2.5rem); }
.accueil__surtitre { display: flex; align-items: center; gap: .75rem; color: var(--gris); }
.accueil__surtitre::before { content: ''; flex: none; width: 1.5rem; height: 2px; background: var(--zr); }
.accueil__titre {
  --largeur-titre: calc(100vw - 2 * var(--gouttiere));
  margin-top: 1rem;
  font-family: var(--f-titre);
  line-height: .8;
}
.ligne { display: block; clip-path: inset(-30% -10% -12% -10%); }
.l1, .l2 { display: block; }
.l1 {
  margin-left: -.035em;
  font-weight: 850;
  font-stretch: 52%;
  font-size: clamp(3.5rem, calc(var(--largeur-titre) * var(--k1, 3.3) / var(--car1, 9)), 16rem);
  letter-spacing: -.012em;
  text-transform: uppercase;
}
.l2 {
  margin-top: .06em;
  font-weight: 260;
  font-stretch: 150%;
  font-size: clamp(1.75rem, calc(var(--largeur-titre) * var(--k2, 1.45) / var(--car2, 9)), 7rem);
  line-height: 1.05;
  letter-spacing: -.045em;
}

.accueil__photo {
  position: relative;
  z-index: 1;
  margin-inline: calc(var(--gouttiere) * -1);
  margin-bottom: calc(var(--debord) * -1);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--tatami-clair);
}
.accueil__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: grayscale(1) contrast(1.08) brightness(.97);
}
.accueil__bas {
  position: relative;
  padding-top: var(--debord);
  padding-bottom: clamp(3rem, 10vw, 5.5rem);
}
.accueil__grille-bas { display: grid; gap: 2rem; }

.chrono {
  position: relative;
  z-index: 2;
  margin-top: -2.75rem;
  padding: 1rem 1.25rem 1.25rem;
  border-radius: var(--rayon);
  background: var(--encre);
  color: var(--mur);
  box-shadow: 0 2.5rem 4rem -1.5rem rgba(0, 0, 0, .6);
}
.chrono__tete { display: flex; align-items: center; gap: .625rem; color: var(--gris-clair); }
.chrono__voyant {
  flex: none;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--zr-vif);
  animation: voyant 2.4s var(--ease) infinite;
}
@keyframes voyant {
  0% { box-shadow: 0 0 0 0 rgba(43, 196, 110, .55); }
  70%, 100% { box-shadow: 0 0 0 .6rem rgba(43, 196, 110, 0); }
}
.chrono__tete .etiquette { letter-spacing: .12em; white-space: nowrap; }
.chrono__dojo { margin-left: auto; color: var(--mur); }
@media (max-width: 23.4rem) { .chrono__dans { display: none; } }
.chrono__temps {
  margin: .5rem 0 .625rem;
  font-family: var(--f-titre);
  font-weight: 720;
  font-stretch: 60%;
  font-size: clamp(3.75rem, 18vw, 6.5rem);
  line-height: .92;
}
.chrono__cadran { display: flex; align-items: flex-start; }
.chrono__bloc { display: grid; justify-items: center; }
.chrono__chiffres { display: flex; }
.chrono__unite {
  margin-top: .625rem;
  font-family: var(--f-titre); font-stretch: 125%; font-weight: 600;
  font-size: .5625rem; line-height: 1; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gris-clair);
}
.chrono__chiffre { display: inline-block; width: .52em; text-align: center; }
.chrono__chiffre.bascule { animation: bascule .45s var(--ease); }
@keyframes bascule {
  from { transform: translateY(-.16em); opacity: .15; }
  to { transform: none; opacity: 1; }
}
.chrono__cadran i { display: inline-block; width: .26em; font-style: normal; line-height: .92; text-align: center; color: var(--zr-vif); transform: translateY(-.05em); }
.chrono__cours {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .125rem 1rem;
  padding-top: .875rem;
  border-top: 1px solid rgba(232, 234, 230, .14);
}
.chrono__cours strong { font-size: 1.0625rem; font-weight: 600; }
.chrono__cours span { color: var(--gris-clair); font-size: .9375rem; }
.chrono__maintenant { margin-top: .625rem; color: var(--zr-vif); font-size: .875rem; }

.accueil__accroche { max-width: 30rem; font-size: clamp(1.1875rem, 1rem + .8vw, 1.5rem); line-height: 1.4; font-weight: 450; }
.accueil__boutons { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.accueil__boutons .bouton { flex: 1 1 13rem; }
.accueil__mention { margin-top: .875rem; color: var(--gris-clair); font-size: .8125rem; }

.annonce {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .25rem 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--trait-sombre);
}
.annonce p { display: flex; align-items: baseline; gap: .75rem; max-width: 40rem; color: var(--texte-sombre); font-size: .9375rem; }
.annonce__voyant { flex: none; width: .4375rem; height: .4375rem; background: var(--zr-vif); transform: translateY(-.1em); }
.annonce .lien-fleche { color: var(--zr-vif); }

@media (min-width: 64rem) {
  .accueil { --debord: 7rem; }
  .accueil__haut { padding-top: calc(env(safe-area-inset-top) + var(--entete) + 1.5rem); }
  .accueil__grille { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; align-items: end; }
  .accueil__texte { grid-column: 1 / 8; padding-bottom: calc(var(--debord) + 1.5rem); }
  .accueil__titre { --largeur-titre: calc((min(100vw, var(--largeur)) - 2 * var(--gouttiere)) * .57); }
  .accueil__photo { grid-column: 8 / -1; margin-inline: 0 calc(var(--gouttiere) * -1); aspect-ratio: auto; height: clamp(22rem, 52vh, 40rem); }
  .accueil--sans-photo .accueil__texte { grid-column: 1 / -1; padding-bottom: 3rem; }
  .accueil__grille-bas { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 3.5rem; }
  .accueil__appel { grid-column: 1 / 7; grid-row: 1; align-self: end; }
  .chrono { grid-column: 8 / -1; grid-row: 1; margin-top: -4.5rem; margin-left: -4rem; }
  .accueil--sans-photo .chrono { margin-top: 0; margin-left: 0; }
  .annonce { grid-column: 1 / -1; }
}

/* --- Le club ------------------------------------------------------------- */

.club__intro { padding-top: clamp(3rem, 8vw, 6rem); border-top: 1px solid var(--trait-sombre); }
.club__chapeau {
  max-width: 21em;
  font-size: clamp(1.625rem, 1.05rem + 2.7vw, 3.25rem);
  line-height: 1.12;
  font-weight: 450;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.club__corps { display: grid; gap: 3.5rem; margin-top: clamp(3rem, 8vw, 5.5rem); }
.club__texte .texte { color: var(--texte-sombre); }
.club__prof { display: grid; gap: .375rem; margin-top: 2.25rem; }
.club__prof .etiquette { color: var(--gris-clair); }
.club__prof-nom { font-size: 1.625rem; font-weight: 600; line-height: 1.15; letter-spacing: -.015em; }
.club__prof-mentions { color: var(--gris-clair); font-size: 1rem; line-height: 1.45; }
/* Diplômes et affiliations : deux blasons discrets, comme une certification.
   Les deux logos ont du texte noir sur fond transparent, illisible sur la section
   sombre : d'où la pastille claire, volontairement sobre et peu contrastée. */
.certifs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  margin: 1.75rem 0 0; padding: 0; list-style: none;
}
.certifs li {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem .875rem;
  background: var(--mur); border-radius: var(--rayon); opacity: .78;
}
.certifs img { width: auto; height: 2.75rem; }
@media (hover: hover) {
  .certifs li { transition: opacity .25s; }
  .certifs li:hover { opacity: 1; }
}
.club__affiliation { margin-top: 1.25rem; color: var(--gris-clair); font-size: .9375rem; }
.reperes { display: grid; border-bottom: 1px solid var(--trait-sombre); }
.repere { display: grid; gap: .5rem; padding: 1.5rem 0; border-top: 1px solid var(--trait-sombre); }
.repere__annee {
  font-family: var(--f-titre); font-weight: 800; font-stretch: 56%;
  font-size: clamp(2.75rem, 11vw, 4rem); line-height: .9; color: var(--zr-vif);
}
.repere__texte { color: var(--texte-sombre); max-width: 22rem; }
.club__photo { margin-top: clamp(4rem, 10vw, 7rem); }
.club__cadre-photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--tatami-clair); }
.club__cadre-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; filter: saturate(.85) contrast(1.04); }
.club__photo figcaption { padding-block: 1rem clamp(3.5rem, 8vw, 6rem); color: var(--gris-clair); font-size: .875rem; }
.club__fin { height: var(--section); }

@media (min-width: 56rem) {
  .club__corps { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; }
  .club__texte { grid-column: 1 / 6; }
  .reperes { grid-column: 7 / -1; align-self: start; }
  .club__cadre-photo { aspect-ratio: 21 / 9; }
}

/* --- Cours --------------------------------------------------------------- */

.cours { padding-block: var(--section); }
.cours__grille { display: grid; gap: 1rem; }
.carte-cours {
  --pad: clamp(1.5rem, 5.5vw, 3rem);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: var(--pad);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--mur-clair);
}
.carte-cours--enfants { border-color: var(--zr); background: var(--zr); color: var(--mur); }
.carte-cours__photo { margin: calc(var(--pad) * -1) calc(var(--pad) * -1) .5rem; aspect-ratio: 16 / 10; overflow: hidden; }
.carte-cours__photo img { width: 100%; height: 100%; object-fit: cover; }
.carte-cours__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.carte-cours__tete .etiquette { padding-top: .45rem; color: var(--gris); }
.carte-cours--enfants .carte-cours__tete .etiquette { color: var(--mur); }
.carte-cours__compte { display: flex; align-items: center; gap: .5rem; }
.carte-cours__compte strong { font-family: var(--f-titre); font-weight: 800; font-stretch: 56%; font-size: 3rem; line-height: .85; }
.carte-cours__compte span {
  font-family: var(--f-titre); font-stretch: 125%; font-weight: 600; font-size: .5625rem;
  line-height: 1.35; letter-spacing: .14em; text-transform: uppercase;
}
.carte-cours__nom {
  margin-top: clamp(1rem, 6vw, 3.5rem);
  font-family: var(--f-titre); font-weight: 820; font-stretch: 56%;
  font-size: clamp(3rem, 13vw, 5rem); line-height: .86; text-transform: uppercase;
}
.carte-cours__accroche { font-size: 1.25rem; line-height: 1.38; font-weight: 500; letter-spacing: -.01em; }
.carte-cours__texte { color: var(--gris); }
.carte-cours--enfants .carte-cours__texte { color: #E1ECE5; }
.points { display: grid; margin-top: .5rem; border-top: 1px solid var(--trait); }
.points li { display: flex; align-items: baseline; gap: .875rem; padding: .75rem 0; border-bottom: 1px solid var(--trait); font-weight: 500; }
.points li::before { content: ''; flex: none; width: .4375rem; height: .4375rem; background: var(--zr); transform: translateY(-.12em); }
.carte-cours--enfants .points, .carte-cours--enfants .points li { border-color: rgba(232, 234, 230, .3); }
.carte-cours--enfants .points li::before { background: var(--mur); }
.carte-cours__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; margin-top: auto; padding-top: 1rem; }
.carte-cours__actions:empty { display: none; }

.lexique { display: grid; gap: 1.25rem; margin-top: clamp(3.5rem, 9vw, 6rem); }
.lexique__titre { color: var(--gris); }
.lexique__liste { display: grid; column-gap: 2rem; }
.lexique__liste div { padding: 1rem 0; border-top: 1px solid var(--trait); }
.lexique__liste dt { font-family: var(--f-titre); font-weight: 750; font-stretch: 80%; font-size: 1.125rem; text-transform: uppercase; letter-spacing: .01em; }
.lexique__liste dd { margin-top: .25rem; color: var(--gris); font-size: .9375rem; line-height: 1.5; }

@media (min-width: 40rem) { .lexique__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) {
  .cours__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .lexique { grid-template-columns: 14rem 1fr; }
  .lexique__titre { padding-top: 1.125rem; }
}
@media (min-width: 80rem) { .lexique__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Planning ------------------------------------------------------------ */

.planning { padding-block: var(--section); }
.planning__tete { display: grid; gap: 2rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.planning__tete .tete-section { margin-bottom: 0; }
.filtres { display: grid; gap: 1rem; }
.filtre { display: grid; gap: .5rem; }
.filtre__nom { color: var(--gris-clair); }
.filtre__options {
  display: flex;
  padding: 3px;
  border-radius: calc(var(--rayon) + 3px);
  box-shadow: inset 0 0 0 1px var(--trait-sombre);
}
.filtre__options button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex: 1 1 auto;
  min-height: 2.75rem;
  padding: 0 1rem;
  border-radius: var(--rayon);
  font-size: .9375rem;
  font-weight: 500;
  transition: background-color .25s, color .25s;
}
.filtre__options button:hover { background: var(--tatami-clair); }
.filtre__options button[aria-pressed='true'] { background: var(--mur); color: var(--encre); }
.filtre__options button[aria-pressed='true'] .puce { box-shadow: inset 0 0 0 1px var(--gris); }

.semaine__onglets {
  display: grid;
  grid-template-columns: repeat(var(--jours), minmax(0, 1fr));
  gap: .3125rem;
  margin-bottom: 1rem;
}
.semaine__onglets button {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .125rem;
  min-height: 3.75rem;
  padding: .625rem 0 .5rem;
  border-radius: var(--rayon);
  box-shadow: inset 0 0 0 1px var(--trait-sombre);
  transition: background-color .25s, color .25s;
}
.semaine__onglets button span { font-family: var(--f-titre); font-weight: 720; font-stretch: 80%; font-size: .9375rem; text-transform: uppercase; }
.semaine__onglets button small { color: var(--gris-clair); font-size: .75rem; font-variant-numeric: tabular-nums; }
.semaine__onglets button[aria-selected='true'] { background: var(--zr-vif); color: var(--encre); box-shadow: none; }
.semaine__onglets button[aria-selected='true'] small { color: var(--encre); }
.semaine__onglets button.est-aujourdhui::after {
  content: ''; position: absolute; top: .4rem; right: .4rem;
  width: .3125rem; height: .3125rem; border-radius: 50%; background: var(--zr-vif);
}
.semaine__onglets button.est-aujourdhui[aria-selected='true']::after { background: var(--encre); }

.semaine__grille { display: grid; gap: 2.5rem; }
.jour__nom {
  padding-bottom: .75rem;
  font-family: var(--f-titre); font-weight: 650; font-stretch: 125%;
  font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gris-clair);
}
.est-onglets .jour__nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.jour__vide { padding: 1.25rem 0; border-top: 1px solid var(--trait-sombre); color: var(--gris-clair); font-size: .9375rem; }
.creneau {
  position: relative;
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: .25rem;
  padding: 1.125rem 0;
  border-top: 1px solid var(--trait-sombre);
}
.creneau__heure { grid-row: span 2; display: grid; align-content: start; font-family: var(--f-titre); font-weight: 700; font-stretch: 62%; font-size: 1.875rem; line-height: 1; }
.creneau__heure time + span + time { margin-top: .3rem; color: var(--gris-clair); font-size: 1.125rem; }
.creneau__tiret { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.creneau__cours { align-self: end; padding-right: 4.5rem; font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.creneau__cours span { color: var(--gris-clair); font-weight: 400; }
.creneau__meta { display: flex; align-items: center; gap: .5rem; color: var(--gris-clair); font-size: .875rem; }
.puce { flex: none; width: .5rem; height: .5rem; border-radius: 1px; }
.puce--0 { background: var(--dojo-1); }
.puce--1 { background: var(--dojo-2); }
.puce--2 { background: #E9B949; }
.puce--3 { background: #86A8FF; }
.creneau__direct {
  position: absolute; top: 1.125rem; right: 0;
  padding: .3rem .5rem;
  border-radius: 2px;
  background: var(--zr-vif);
  color: var(--encre);
  font-size: .5625rem;
}
.creneau.est-en-cours::before {
  content: ''; position: absolute; top: -1px; bottom: 0; left: calc(var(--gouttiere) * -1);
  width: 3px; background: var(--zr-vif);
}

.planning__pied {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 2rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--trait-sombre);
  color: var(--gris-clair);
  font-size: .9375rem;
}
.legende { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.legende li { display: flex; align-items: center; gap: .5rem; }
.planning__pied .lien-fleche { color: var(--mur); }
.planning__pied .planning__essai { color: var(--zr-vif); }

@media (min-width: 40rem) {
  .filtres { grid-auto-flow: column; justify-content: start; gap: 1.5rem; }
  .filtre__options button { flex: none; }
}
@media (min-width: 80rem) {
  .planning__tete { grid-template-columns: 1fr auto; align-items: end; }
}
@media (min-width: 64rem) {
  .semaine__onglets { display: none; }
  .semaine__grille {
    grid-template-columns: repeat(var(--jours), minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--trait-sombre);
    border-left: 1px solid var(--trait-sombre);
  }
  .jour { min-height: 24rem; padding: 1rem 1rem 1.25rem; border-right: 1px solid var(--trait-sombre); border-bottom: 1px solid var(--trait-sombre); transition: background-color .3s; }
  .jour.est-aujourdhui { background: var(--tatami-clair); }
  .jour.est-aujourdhui .jour__nom { color: var(--zr-vif); }
  .jour__nom { padding-bottom: .5rem; }
  .creneau { grid-template-columns: minmax(0, 1fr); padding: .875rem 0; }
  .creneau__heure { grid-row: auto; display: flex; align-items: baseline; gap: .375rem; font-size: 1.5rem; }
  .creneau__heure time + span + time { margin-top: 0; font-size: 1rem; }
  .creneau__cours { padding-right: 0; font-size: 1rem; }
  .creneau__meta { font-size: .8125rem; }
  .creneau__direct { position: static; justify-self: start; margin-top: .375rem; }
  .creneau.est-en-cours::before { left: -1rem; }
  .jour__vide { border-top: 0; padding-top: .5rem; }
}

/* --- Actualités et agenda ------------------------------------------------ */

.actus, .agenda { padding-block: var(--section); }
.actus + .agenda { padding-top: 0; }
.actus__liste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(84%, 22rem);
  gap: 1rem;
  margin-inline: calc(var(--gouttiere) * -1);
  padding: 0 var(--gouttiere) .5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gouttiere);
  scrollbar-width: none;
}
.actus__liste::-webkit-scrollbar { display: none; }
.actus__liste:has(> li:only-child) { grid-auto-columns: 100%; }
.actu { position: relative; display: flex; flex-direction: column; gap: .75rem; scroll-snap-align: start; }
.actu__visuel {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 4 / 3;
  margin-bottom: .5rem;
  padding: 1.25rem;
  overflow: hidden;
  border-radius: var(--rayon);
  background-color: var(--tatami);
  background-image:
    linear-gradient(var(--trait-sombre) 1px, transparent 1px),
    linear-gradient(90deg, var(--trait-sombre) 1px, transparent 1px);
  background-size: 33.34% 50%;
  background-position: -1px -1px;
  color: var(--mur);
}
.actu__visuel--photo { padding: 0; background-image: none; }
.actu__visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.actu:hover .actu__visuel img { transform: scale(1.04); }
.actu__jour { font-family: var(--f-titre); font-weight: 820; font-stretch: 56%; font-size: 6.5rem; line-height: .78; }
.actu__mois { margin-top: .75rem; color: var(--gris-clair); }
.actu__date { display: flex; flex-wrap: wrap; gap: .75rem; color: var(--gris); }
.actu__une { color: var(--zr); }
.actu__titre {
  font-family: var(--f-titre); font-weight: 760; font-stretch: 66%;
  font-size: 1.875rem; line-height: .98; text-transform: uppercase; text-wrap: balance;
}
.actu__titre a { text-decoration: none; }
.actu__titre a::after { content: ''; position: absolute; inset: 0; }
.actu__resume { color: var(--gris); font-size: .9375rem; line-height: 1.55; }
.actu__lire { display: inline-flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: .5rem; }
.actu:hover .actu__lire .fleche { transform: translateX(4px); }

.evenements { border-top: 1px solid var(--encre); }
.evenement { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1.25rem; padding: 1.5rem 0; border-bottom: 1px solid var(--trait); }
.evenement__date { display: grid; align-content: start; gap: .375rem; }
.evenement__jour { font-family: var(--f-titre); font-weight: 820; font-stretch: 56%; font-size: 3.5rem; line-height: .85; }
.evenement__date .etiquette { color: var(--gris); }
.evenement__titre { font-family: var(--f-titre); font-weight: 760; font-stretch: 66%; font-size: 1.75rem; line-height: 1; text-transform: uppercase; }
.evenement__infos { margin-top: .5rem; color: var(--gris); font-size: .9375rem; }
.evenement__texte { margin-top: .75rem; }

@media (min-width: 60rem) {
  .actus__liste { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-inline: 0; padding: 0; overflow: visible; }
  .actus__liste:has(> li:only-child) { grid-template-columns: minmax(0, 30rem); }
}
@media (min-width: 72rem) {
  .actus .cadre { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; align-items: start; }
  .actus .tete-section { grid-column: 1 / 6; position: sticky; top: calc(var(--entete) + 2rem); }
  .actus__liste { grid-column: 6 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actus__liste:has(> li:only-child) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .evenement { grid-template-columns: 7rem minmax(0, 1fr); gap: 2rem; padding: 2rem 0; }
  .evenement__jour { font-size: 4.5rem; }
}

/* --- Tarifs -------------------------------------------------------------- */

.tarifs { padding-block: var(--section); }
.tarifs__grille { display: grid; gap: 2rem; }
.tarifs__note { color: var(--texte-sombre); }
.tarifs__liste { border-top: 1px solid var(--trait-sombre); }
.tarifs__inscription { display: grid; justify-items: start; gap: .75rem; margin-top: 2rem; }
.tarifs__inscription p { color: var(--gris-clair); font-size: .875rem; }
.tarif {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1.5rem;
  row-gap: .25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--trait-sombre);
}
.tarif__formule { font-family: var(--f-titre); font-weight: 700; font-stretch: 72%; font-size: clamp(1.125rem, 4.6vw, 1.75rem); line-height: 1.08; text-transform: uppercase; letter-spacing: .01em; }
.tarif__detail { grid-column: 1; color: var(--gris-clair); font-size: .875rem; }
.tarif__prix {
  grid-column: 2; grid-row: 1 / span 2;
  font-family: var(--f-titre); font-weight: 800; font-stretch: 58%;
  font-size: clamp(2.25rem, 10vw, 3.5rem); line-height: 1; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 64rem) {
  .tarifs__grille { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; }
  .tarifs__grille > div:first-child { grid-column: 1 / 6; }
  .tarifs__grille > .tarifs__offres { grid-column: 7 / -1; align-self: start; }
}

/* --- Dojos --------------------------------------------------------------- */

.dojos { padding-block: var(--section); }
.dojos__grille { display: grid; border-top: 1px solid var(--encre); }
.dojo { display: grid; align-content: start; gap: 1.5rem; padding: 2rem 0 2.75rem; }
.dojo + .dojo { border-top: 1px solid var(--trait); }
.dojo__tete { display: grid; gap: .75rem; }
.dojo__ville {
  font-family: var(--f-titre); font-weight: 260; font-stretch: 150%;
  font-size: clamp(2.25rem, 10.4vw, 5.5rem); line-height: .92; letter-spacing: -.05em;
  text-transform: uppercase;
}
.dojo__depuis { color: var(--zr); }
.dojo__photo { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--rayon); }
.dojo__photo img { width: 100%; height: 100%; object-fit: cover; }
.dojo__adresse { display: grid; font-size: 1.0625rem; line-height: 1.5; }
.dojo__adresse strong { font-weight: 600; }
.dojo__semaine { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; border-block: 1px solid var(--trait); }
.dojo__compte { color: var(--gris); font-size: .9375rem; }
.dojo__compte strong { margin-right: .25rem; color: var(--encre); font-family: var(--f-titre); font-weight: 800; font-stretch: 56%; font-size: 2rem; line-height: 1; vertical-align: -.1em; }
.dojo__jours { display: flex; gap: .25rem; }
.dojo__jours li {
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border-radius: var(--rayon);
  box-shadow: inset 0 0 0 1px var(--trait);
  color: var(--gris);
  font-family: var(--f-titre); font-weight: 650; font-stretch: 100%; font-size: .75rem;
}
.dojo__jours li.est-actif { background: var(--encre); color: var(--mur); box-shadow: none; }
.dojo__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

@media (min-width: 60rem) {
  .dojos__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dojo__ville { font-size: clamp(2.25rem, 5vw, 4.75rem); }
  .dojo { padding: 2.5rem clamp(2rem, 4vw, 4rem) 3rem 0; }
  .dojo + .dojo { padding-left: clamp(2rem, 4vw, 4rem); padding-right: 0; border-top: 0; border-left: 1px solid var(--trait); }
}

/* --- Galerie et questions ------------------------------------------------ */

.galerie { padding-block: var(--section); }
.galerie__liste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 26rem);
  gap: .75rem;
  padding-inline: max(var(--gouttiere), calc((100vw - var(--largeur)) / 2 + var(--gouttiere)));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gouttiere);
  scrollbar-width: none;
}
.galerie__liste::-webkit-scrollbar { display: none; }
.galerie__liste li { scroll-snap-align: start; }
.galerie__liste img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rayon); }
.galerie__liste figcaption { padding-top: .75rem; color: var(--gris-clair); font-size: .875rem; }

.faq { padding-block: var(--section); }
.faq__liste { max-width: 60rem; border-top: 1px solid var(--encre); }
.question { border-bottom: 1px solid var(--trait); }
.question summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 2.75rem; padding: 1.25rem 0;
  cursor: pointer; list-style: none;
  font-family: var(--f-titre); font-weight: 700; font-stretch: 80%;
  font-size: clamp(1.125rem, 4vw, 1.5rem); line-height: 1.15; text-transform: uppercase;
}
.question summary::-webkit-details-marker { display: none; }
.question summary i { position: relative; flex: none; width: 1rem; height: 1rem; }
.question summary i::before, .question summary i::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor;
  transition: transform .35s var(--ease);
}
.question summary i::after { transform: rotate(90deg); }
.question[open] summary i::after { transform: rotate(0deg); }
.question__reponse { padding-bottom: 1.5rem; color: var(--gris); }

/* --- Contact ------------------------------------------------------------- */

.contact { padding-block: var(--section); background: var(--mur-clair); }
.contact__grille { display: grid; gap: 3.5rem; }
.contact__chapeau { max-width: 28rem; font-size: 1.25rem; line-height: 1.45; }
.contact__direct { display: grid; margin-top: 2.5rem; border-top: 1px solid var(--encre); }
.contact__direct li { display: grid; gap: .25rem; padding: 1.125rem 0; border-bottom: 1px solid var(--trait); }
.contact__direct .etiquette { color: var(--gris); }
.contact__direct a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-size: 1.125rem; font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.contact__direct a:hover { text-decoration: underline; }
.contact__direct .contact__tel { font-family: var(--f-titre); font-weight: 780; font-stretch: 62%; font-size: clamp(2.75rem, 13vw, 4rem); line-height: 1; }
.contact__reseaux { display: flex; flex-wrap: wrap; gap: 0 1.75rem; }

.formulaire { display: grid; align-content: start; gap: 1.75rem; }
.formulaire__retour { padding: 1rem 1.25rem; border-radius: var(--rayon); font-weight: 500; }
.formulaire__retour--ok { background: var(--encre); color: var(--mur); }
.formulaire__retour--erreur { box-shadow: inset 0 0 0 1px var(--alerte); color: var(--alerte); }
.champ { display: grid; gap: .375rem; }
.champ label, .choix legend {
  font-family: var(--f-titre); font-stretch: 125%; font-weight: 600; font-size: .6875rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--gris);
}
.champ abbr { color: var(--zr); text-decoration: none; }
.champ input, .champ textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: .625rem 0;
  border: 0;
  border-bottom: 1px solid rgba(13, 14, 15, .35);
  border-radius: 0;
  background: transparent;
  font-size: 1.125rem;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
.champ textarea { min-height: 7.5rem; resize: vertical; }
.champ input:hover, .champ textarea:hover { border-bottom-color: var(--encre); }
.champ input:focus, .champ textarea:focus { outline: none; border-bottom-color: var(--zr); box-shadow: 0 1px 0 0 var(--zr); }
.champ [aria-invalid='true'] { border-bottom-color: var(--alerte); box-shadow: 0 1px 0 0 var(--alerte); }
.champ__erreur { display: flex; align-items: baseline; gap: .5rem; color: var(--alerte); font-size: .875rem; font-weight: 500; }
.champ__erreur::before { content: '!'; display: grid; place-items: center; flex: none; width: 1rem; height: 1rem; border-radius: 50%; background: var(--alerte); color: #fff; font-size: .6875rem; font-weight: 700; transform: translateY(.12em); }
.champ__aide { margin-top: -1.125rem; color: var(--gris); font-size: .875rem; }
.champs-duo { display: grid; gap: 1.75rem; }
.choix { display: grid; gap: .75rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.choix legend { margin-bottom: .75rem; padding: 0; }
.choix__options { display: flex; flex-wrap: wrap; gap: .5rem; }
.choix__options label { position: relative; }
.choix__options input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choix__options span {
  display: inline-flex; align-items: center;
  min-height: 2.75rem; padding: 0 1rem;
  border-radius: var(--rayon);
  box-shadow: inset 0 0 0 1px var(--trait);
  font-size: .9375rem; font-weight: 500;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.choix__options input:hover + span { box-shadow: inset 0 0 0 1px var(--encre); }
.choix__options input:checked + span { background: var(--encre); color: var(--mur); box-shadow: none; }
.choix__options input:focus-visible + span { outline: 2px solid var(--zr); outline-offset: 2px; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire__envoi { display: grid; gap: .75rem; }
.formulaire__bouton { width: 100%; }
.formulaire__bouton[aria-busy='true'] { opacity: .65; cursor: progress; }
.formulaire__etat:empty { display: none; }
.formulaire__etat.est-erreur { color: var(--alerte); font-weight: 500; }
.formulaire__rgpd { color: var(--gris); font-size: .8125rem; }
.formulaire__merci { display: grid; gap: .75rem; padding: clamp(1.75rem, 5vw, 2.5rem); border-radius: var(--rayon); background: var(--encre); color: var(--mur); }
.formulaire__merci strong { font-family: var(--f-titre); font-weight: 820; font-stretch: 56%; font-size: 3rem; line-height: .9; text-transform: uppercase; }
.formulaire__merci:focus { outline: none; }

@media (min-width: 40rem) {
  .champs-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formulaire__envoi { grid-template-columns: auto 1fr; align-items: center; gap: 1.5rem; }
  .formulaire__bouton { width: auto; min-width: 17rem; }
}
@media (min-width: 64rem) {
  .contact__grille { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; }
  .contact__intro { grid-column: 1 / 6; }
  .formulaire { grid-column: 7 / -1; padding-top: .5rem; }
}

/* --- Pied de page -------------------------------------------------------- */

.pied { padding: clamp(4rem, 12vw, 8rem) 0 calc(env(safe-area-inset-bottom) + 1.5rem); background: var(--encre); color: var(--mur); }
.pied__haut { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); padding-bottom: clamp(3rem, 8vw, 5rem); }
.pied__marque { width: min(54vw, 30rem); height: auto; }
.pied__villes {
  display: grid;
  font-family: var(--f-titre); font-weight: 260; font-stretch: 150%;
  font-size: clamp(.875rem, 3vw, 2rem); line-height: 1; letter-spacing: .04em; text-transform: uppercase;
}
.pied__villes span + span { margin-top: .45em; padding-top: .45em; border-top: 1px solid currentColor; }
.pied__grille { display: grid; gap: 2.5rem; padding-block: clamp(2.5rem, 7vw, 4rem); border-top: 1px solid #2A2D31; }
.pied__grille .etiquette { margin-bottom: 1rem; color: #80868C; }
.pied__grille li { display: grid; padding-block: .25rem; }
.pied__grille li + li { margin-top: .5rem; }
.pied__grille a { display: inline-block; padding-block: .25rem; text-decoration: none; }
.pied__grille a:hover { text-decoration: underline; }
.pied__grille li span { color: #9BA1A7; font-size: .9375rem; }
.pied__bas { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.75rem; padding-top: 1.25rem; border-top: 1px solid #2A2D31; color: #9BA1A7; font-size: .8125rem; }
.pied__bas a { display: inline-block; padding-block: .75rem; text-decoration: none; }
.pied__bas a:hover { color: var(--mur); text-decoration: underline; }
.pied__credit { margin-left: auto; }
@media (min-width: 48rem) { .pied__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Actualité ----------------------------------------------------------- */

.article { padding-top: calc(env(safe-area-inset-top) + var(--entete) + clamp(1.5rem, 5vw, 4rem)); padding-bottom: var(--section); }
.article__cadre { max-width: 54rem; }
.article__retour { display: inline-flex; align-items: center; gap: .75rem; min-height: 2.75rem; margin-bottom: clamp(1.5rem, 5vw, 3rem); color: var(--gris); text-decoration: none; }
.article__retour .fleche { transform: scaleX(-1); }
.article__retour:hover .fleche { transform: scaleX(-1) translateX(4px); }
.article__date { color: var(--gris); }
.article__titre {
  margin-top: 1rem;
  font-family: var(--f-titre); font-weight: 820; font-stretch: 56%;
  font-size: clamp(2.75rem, 11.5vw, 6.5rem); line-height: .9; text-transform: uppercase; text-wrap: balance;
}
.article__chapeau { margin-top: 1.5rem; font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem); line-height: 1.38; font-weight: 450; letter-spacing: -.01em; }
.article__photo { margin-top: 2.5rem; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--rayon); background: var(--tatami); }
.article__photo img { width: 100%; height: 100%; object-fit: cover; }
.article__texte { margin-top: 2.5rem; font-size: 1.125rem; line-height: 1.7; }
.article__liens { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }
/* Le club saisit librement le texte des boutons : il doit pouvoir passer à la ligne,
   sinon un libellé long déborde de l'écran (.bouton est en white-space: nowrap). */
.article__liens .bouton { flex: 1 1 15rem; justify-content: center; gap: .75rem; padding: .875rem 1.25rem; white-space: normal; text-align: center; line-height: 1.3; }
.article__appel-cadre { max-width: 54rem; margin-top: 4rem; }
.article__appel { display: grid; gap: 1rem; justify-items: start; padding: clamp(1.75rem, 5vw, 3rem); border-radius: var(--rayon); }
.article__appel .etiquette { color: var(--gris-clair); }
.article__appel-texte { font-family: var(--f-titre); font-weight: 820; font-stretch: 56%; font-size: clamp(2.25rem, 9vw, 3.5rem); line-height: .92; text-transform: uppercase; }
.article__autres { max-width: 54rem; margin-top: 4rem; }
.article__autres .etiquette { color: var(--gris); margin-bottom: 1rem; }
.article__autres ul { border-top: 1px solid var(--encre); }
.article__autres a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding: 1.125rem 0; border-bottom: 1px solid var(--trait); text-decoration: none; font-weight: 500; }
.article__autres a:hover span { text-decoration: underline; }
.article__autres time { color: var(--gris); font-size: .9375rem; }

/* --- Page simple (mentions légales, 404) --------------------------------- */

.page-simple { padding-top: calc(env(safe-area-inset-top) + var(--entete) + clamp(2rem, 6vw, 5rem)); padding-bottom: var(--section); }
.page-simple .cadre { max-width: 54rem; }
.page-simple h1 { margin: 1rem 0 2.5rem; font-family: var(--f-titre); font-weight: 820; font-stretch: 56%; font-size: clamp(3rem, 13vw, 6.5rem); line-height: .88; text-transform: uppercase; }
.page-simple h2 { margin: 2.5rem 0 .75rem; font-family: var(--f-titre); font-weight: 700; font-stretch: 80%; font-size: 1.375rem; text-transform: uppercase; }
.page-simple p, .page-simple li { max-width: 40rem; color: #33383D; }
.page-simple p + p { margin-top: .75rem; }
.entete--simple { position: absolute; background: none; }

/* --- Raccourcis d'édition (visibles des administrateurs) ----------------- */

[data-admin] { position: relative; }
.edition {
  position: absolute;
  top: 1rem;
  right: var(--gouttiere);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.25rem;
  padding: 0 .875rem;
  border-radius: 999px;
  background: var(--zr-vif);
  color: var(--encre);
  font: 600 .8125rem/1 var(--f-texte);
  text-decoration: none;
  box-shadow: 0 .75rem 1.5rem -.75rem rgba(0, 0, 0, .5);
}
.edition svg { width: .875rem; height: .875rem; }
.accueil > .edition { top: calc(env(safe-area-inset-top) + var(--entete) + .5rem); }
.annonce > .edition { top: -1.25rem; right: 0; }

.apercu {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 1rem);
  z-index: 90;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 2rem);
  padding: .75rem 1.125rem;
  border-radius: 999px;
  background: #E9B949;
  color: var(--encre);
  font: 600 .875rem/1.3 var(--f-texte);
  text-align: center;
  box-shadow: 0 1rem 2rem -1rem rgba(0, 0, 0, .5);
}

/* --- Mouvements ---------------------------------------------------------- */

.js [data-apparait] {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js [data-apparait].est-visible { opacity: 1; transform: none; }

.js .accueil__titre .ligne > span { transform: translateY(108%); }
.js .accueil__surtitre, .js .accueil__appel, .js .accueil .annonce { opacity: 0; }
.js .chrono { opacity: 0; transform: translateY(1.5rem); }
.js .accueil__photo img { clip-path: inset(100% 0 0 0); transform: scale(1.12); }
.js.est-pret .accueil__titre .ligne > span { transform: none; transition: transform 1.15s var(--ease); }
.js.est-pret .accueil__titre .ligne + .ligne > span { transition-delay: .09s; }
.js.est-pret .accueil__surtitre { opacity: 1; transition: opacity .8s .05s; }
.js.est-pret .accueil__photo img { clip-path: inset(0 0 0 0); transform: none; transition: clip-path 1.25s .12s var(--ease), transform 1.9s .12s var(--ease); }
.js.est-pret .chrono { opacity: 1; transform: none; transition: opacity .9s .5s, transform 1.1s .5s var(--ease); }
.js.est-pret .accueil__appel, .js.est-pret .accueil .annonce { opacity: 1; transition: opacity 1s .65s; }

@media (prefers-reduced-motion: reduce) {
  .js [data-apparait], .js .accueil__titre .ligne > span, .js .accueil__surtitre, .js .accueil__appel,
  .js .accueil .annonce, .js .chrono, .js .accueil__photo img {
    opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
  }
  .chrono__voyant, .chrono__chiffre.bascule { animation: none; }
  .menu, .menu__liens a { transition: none; }
}