/* ============================================================
   VCC — Volley Club des Coteaux
   Feuille de style unique. Ordre : tokens, reset, primitives,
   header, hero, sections, footer, responsive.
   ============================================================ */

/* ---------- Police ----------
   Auto-hebergee plutot que servie par Google Fonts : un appel a
   fonts.gstatic.com transmettrait l'IP du visiteur a Google sans consentement.
   Archivo est sous licence SIL OFL 1.1 (voir assets/fonts/OFL.txt).
   Fichier variable unique : couvre toutes les graisses de 400 a 800. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  /* Rampe d'or echantillonnee sur assets/img/logo.png (84 615 pixels dores). */
  --gold-deep:    #ba903e;
  --gold-mid:     #d4ab55;
  --gold:         #ebc974;
  --gold-light:   #fbf3ba;

  /* L'or du logo plafonne a 2,94:1 sur blanc : illisible en texte. Cette
     declinaison sombre est la plus claire qui tienne 4,5:1 sur les trois fonds
     clairs du site : 5,21:1 sur blanc, 5,00:1 sur creme-soft, 4,58:1 sur creme. */
  --gold-ink:      #87681d;
  --gold-ink-dark: #6d5213;

  /* Balayage metallique : aplats et fonds de bouton, sur surface sombre. */
  --gold-sweep: linear-gradient(135deg,
                  var(--gold-deep) 0%, var(--gold) 34%, var(--gold-light) 52%,
                  var(--gold) 70%, var(--gold-deep) 100%);

  /* Meme effet pousse a la limite de lisibilite sur blanc : le palier le plus
     clair, #aa9254, tient 3,02:1. Grand texte uniquement. */
  --gold-sweep-ink: linear-gradient(135deg, #5e4610 0%, #aa9254 52%, #7a5c17 100%);

  --cream:        #f2f0ec;
  --cream-soft:   #fbfaf8;
  --white:        #ffffff;
  --black:        #121212;
  --black-deep:   #0b0b0b;
  /* Noir pur reserve au header : 53,8 % de l'ecusson est du #000000 et le
     disque doit s'y fondre sans laisser de lisere. */
  --black-pure:   #000000;

  --text:         #141414;
  --text-muted:   #5a5750;
  --text-on-dark: rgba(255, 255, 255, .76);
  --border:       rgba(20, 20, 20, .12);

  --font:         'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --wrap:         1180px;
  --gutter:       24px;
  --inset:        14px;
  --radius:       6px;
  --radius-lg:    10px;

  --shadow-sm:    0 1px 2px rgba(0, 0, 0, .06);
  --shadow-md:    0 8px 24px rgba(0, 0, 0, .12);

  --ease:         cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 18px;
  background: var(--black);
  color: #fff;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  margin: 0 0 10px;
  font-size: .688rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow--light  { color: rgba(255, 255, 255, .72); }
.eyebrow--gold { color: var(--gold-ink); }

.h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .005em;
  text-transform: uppercase;
}
.h2--light { color: #fff; }

.arrow {
  display: inline-block;
  transition: transform .2s var(--ease);
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--gold-ink);
}
.link--gold { color: var(--gold-ink); }
a:hover .arrow,
.link:hover .arrow { transform: translateX(4px); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn--primary {
  background: var(--gold-sweep);
  color: var(--black-deep);
  border-color: transparent;
}
.btn--primary:hover {
  background: linear-gradient(135deg, #a87f30 0%, var(--gold-deep) 40%, var(--gold) 60%, #a87f30 100%);
}

.btn--ghost { border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

.btn--light { background: #fff; color: var(--black); }
.btn--light:hover { background: var(--cream); }

/* Texte en degrade. Le `color` pose avant sert de repli si background-clip
   n'est pas supporte ; il n'est annule que dans le @supports. */
.gold-text { color: var(--gold-ink); }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gold-text {
    background-image: var(--gold-sweep-ink);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  /* Sur fond noir, l'or du logo passe a 12,3:1 : balayage complet possible. */
  .card--dark .gold-text,
  .step .gold-text {
    background-image: var(--gold-sweep);
  }
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--black-pure);
}

/* Filet dore sous le header : rappelle l'anneau du logo et detache la barre
   du bandeau clair qui la suit. */
.site-header::after {
  content: '';
  position: absolute;
  inset: auto 0 -2px;
  height: 2px;
  background: var(--gold-sweep);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 68px;
}

.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
/* Écusson circulaire. Le ratio est imposé ici plutôt que par les attributs
   width/height du HTML, pour que le rendu reste juste même si le balisage dérive. */
.brand__mark {
  flex: none;
  height: 44px;
  width: auto;
  aspect-ratio: 1;
  object-fit: contain;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: #fff;
}
.brand__baseline {
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.nav { display: flex; align-items: center; gap: 20px; }

.nav__list { display: flex; align-items: center; gap: 2px; }

.nav__link {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: .8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .72);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav__link:hover { color: #fff; background: rgba(255, 255, 255, .08); }

/* Onglet actif : soulignement dore. Une pastille claire serait illisible. */
.nav__link.is-active { position: relative; color: #fff; font-weight: 600; }
.nav__link.is-active::after {
  content: '';
  position: absolute;
  inset: auto 12px 3px;
  height: 2px;
  background: var(--gold-sweep);
}

.nav__cta { padding: 12px 18px; }

/* Burger — masqué au-dessus du point de rupture */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  background: none;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius);
  cursor: pointer;
}
.burger span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, .55);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(76vh, 620px);
  margin: var(--inset) var(--inset) 0;
  padding-block: clamp(48px, 8vw, 96px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #fff;
  /* Repli visible si la photo venait a manquer. */
  background: linear-gradient(140deg, #2a2213 0%, #0b0b0b 55%, #3a2f18 100%);
}

/* La photo vit sur sa propre couche : appliquer le filtre sur .hero flouterait
   aussi le texte. Le debord de 48px evite que le flou laisse un lisere clair
   le long des bords, le flou echantillonnant au-dela du cadre. */
.hero::before {
  content: '';
  position: absolute;
  inset: -48px;
  background: url('../img/hero.jpg') center / cover no-repeat;
  filter: blur(4px) brightness(.62) saturate(.9);
}

/* Voile degrade par-dessus : assombrit davantage le cote ou se pose le texte. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .34) 45%, rgba(0, 0, 0, .10) 100%);
}

.hero__inner { position: relative; z-index: 1; max-width: 660px; }

.hero__title {
  margin-bottom: 20px;
  font-size: clamp(2.25rem, 5.2vw, 3.5rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.005em;
  text-transform: uppercase;
}

.hero__lead {
  max-width: 48ch;
  margin-bottom: 30px;
  font-size: 1rem;
  color: var(--text-on-dark);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ============================================================
   ACCÈS RAPIDES
   ============================================================ */
.quicklinks { padding-block: clamp(28px, 4vw, 44px); }

.quicklinks__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.qcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.qcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.qcard__icon { width: 26px; height: 26px; margin-bottom: 4px; color: var(--gold-ink); }
.qcard__icon svg { display: block; width: 100%; height: 100%; }

.qcard__title {
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.qcard__text { font-size: .875rem; color: var(--text-muted); }

.qcard .link { margin-top: auto; padding-top: 10px; }

/* ============================================================
   LE CLUB
   ============================================================ */
.club { padding-block: clamp(40px, 6vw, 72px); }

.club__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.club__intro p { margin-bottom: 18px; color: var(--text-muted); }
.club__intro .h2 { margin-bottom: 20px; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 30px;
}

.stat {
  display: flex;
  flex-direction: column-reverse; /* valeur au-dessus du libellé, dt/dd conservés */
  gap: 2px;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.stat__value {
  margin: 0;
  font-size: clamp(1.75rem, 3.4vw, 2.25rem);
  font-weight: 800;
  line-height: 1;
  color: var(--gold-ink);
}
.stat__label {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.club__aside { display: grid; gap: 16px; }

.card { padding: 26px; border-radius: var(--radius); }
.card--dark {
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(235, 201, 116, .10) 0%, transparent 60%),
    var(--black-deep);
  border: 1px solid rgba(235, 201, 116, .28);
  color: #fff;
}
.card--white { background: var(--white); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }

.card__title {
  margin-bottom: 12px;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1.15;
}

.card__meta, .card__text {
  margin-bottom: 16px;
  font-size: .875rem;
  color: var(--text-muted);
}
.card--dark .card__meta,
.card--dark .card__text { color: var(--text-on-dark); }

/* ============================================================
   NOS ÉQUIPES
   ============================================================ */
.teams { padding-bottom: clamp(40px, 6vw, 72px); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 26px;
}

.teams__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.team { display: block; }

.team__photo {
  display: block;
  aspect-ratio: 4 / 3;
  margin-bottom: 14px;
  border-radius: var(--radius);
  background-size: cover;
  background-position: center;
  transition: transform .25s var(--ease);
}
.team:hover .team__photo { transform: translateY(-3px); }

/* Repli visuel tant que les photos ne sont pas fournies */
.team__photo--1 { background-image: url('../img/equipe-1.jpg'), linear-gradient(140deg, #3a2f18, #0b0b0b); }
.team__photo--2 { background-image: url('../img/equipe-2.jpg'), linear-gradient(140deg, #4a3a1c, #141414); }
.team__photo--3 { background-image: url('../img/equipe-3.jpg'), linear-gradient(140deg, #2f2615, #0b0b0b); }
.team__photo--4 { background-image: url('../img/equipe-4.jpg'), linear-gradient(140deg, #453718, #0b0b0b); }

.team__body { display: block; }
.team__body .eyebrow { margin-bottom: 4px; }

.team__name {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* ============================================================
   OÙ L'ON JOUE
   ============================================================ */
.venues {
  margin: 0 var(--inset);
  padding-block: clamp(44px, 6vw, 72px);
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(235, 201, 116, .08) 0%, transparent 55%),
    var(--black-deep);
  border-radius: var(--radius-lg);
  color: #fff;
}

.venues .h2 { margin-bottom: 28px; }

.venues__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.venue {
  padding: 24px;
  background: var(--black);
  border: 1px solid rgba(235, 201, 116, .18);
  border-radius: var(--radius);
}

.venue__name {
  margin-bottom: 8px;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.venue__address {
  margin-bottom: 16px;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .72);
}

.venue__slots { display: grid; gap: 7px; font-size: .875rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: clamp(40px, 5vw, 60px);
  background: var(--black-deep);
  border-top: 2px solid transparent;
  border-image: var(--gold-sweep) 1;
  color: var(--text-on-dark);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: 40px;
}

.footer__name {
  margin-bottom: 12px;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--gold);
}

.footer__text { max-width: 38ch; font-size: .875rem; }

.footer__heading {
  margin-bottom: 16px;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.footer__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  font-size: .875rem;
}
.footer__links a:hover { color: #fff; }

.contact { display: grid; gap: 12px; font-size: .875rem; }
.contact li { display: flex; align-items: flex-start; gap: 10px; }
.contact svg { flex: none; width: 17px; height: 17px; margin-top: 3px; color: var(--gold); }
.contact a:hover { color: #fff; }

.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(235, 201, 116, .3);
  border-radius: var(--radius);
  transition: background-color .2s var(--ease);
}
.socials a:hover { background: rgba(235, 201, 116, .14); }
.socials svg { width: 17px; height: 17px; }

.footer__bottom {
  padding-block: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .75rem;
  color: rgba(255, 255, 255, .5);
  text-align: center;
}

/* ============================================================
   PAGE ADHÉSION
   ============================================================ */
.page-head {
  padding-block: clamp(40px, 6vw, 72px);
  background: var(--cream);
}
/* Colonne du bandeau de titre : 880 px pour que les deux phrases du lead aient
   leur place (la plus longue demande ~600 px) sans être coupées en deux. */
.page-head__inner { max-width: 880px; }

.page-head__title {
  margin-bottom: 20px;
  font-size: clamp(1.875rem, 4.6vw, 3rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: .005em;
  text-transform: uppercase;
}

/* 90ch et non 80ch : sous 880 px de colonne, 80ch (690 px) restait le vrai
   plafond et coupait la première phrase du lead en deux. */
.page-head__lead { max-width: 90ch; color: var(--text-muted); }

/* Les 4 étapes */
.steps {
  padding-block: clamp(32px, 4.5vw, 56px);
  background: var(--cream-soft);
}

.steps__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* Cartes noires : seule facon d'avoir le vrai degrade du logo sur les numeros.
   Sur blanc il plafonnerait a 1,60:1, soit illisible. */
.step {
  padding: 24px;
  background:
    radial-gradient(130% 100% at 0% 0%, rgba(235, 201, 116, .10) 0%, transparent 62%),
    var(--black-deep);
  border: 1px solid rgba(235, 201, 116, .24);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.step__title { color: #fff; }
.step__text  { color: var(--text-on-dark); }

/* Chaque numero prend un palier different de la rampe du logo, du plus profond
   au plus clair : la progression se lit d'une carte a l'autre. Sur le noir des
   cartes, le palier le plus sombre tient encore 6,7:1. */
.step__num {
  margin-bottom: 14px;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
}
.step:nth-child(1) .step__num { color: var(--gold-deep); }
.step:nth-child(2) .step__num { color: var(--gold-mid); }
.step:nth-child(3) .step__num { color: var(--gold); }
.step:nth-child(4) .step__num { color: var(--gold-light); }

.step__title {
  margin-bottom: 10px;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.step__text { font-size: .875rem; color: var(--text-muted); }

/* Tarifs + adhésion en ligne */
.pricing {
  padding-block: clamp(40px, 6vw, 72px);
  background: var(--cream);
}

.pricing__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

.pricing__main .h2 { margin-bottom: 22px; }

.pricing__list {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 24px;
  border-top: 1px solid var(--border);
}
.price:first-child { border-top: 0; }

.price__label { min-width: 0; }
.price__name { font-size: .9375rem; font-weight: 700; }
.price__detail { margin-top: 2px; font-size: .8125rem; color: var(--text-muted); }

.price__amount {
  flex: none;
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--gold-ink);
}

.pricing__note { margin-top: 16px; font-size: .8125rem; color: var(--text-muted); }

.qr__eyebrow { display: flex; align-items: center; gap: 8px; color: var(--gold); }
.qr__eyebrow svg { flex: none; width: 15px; height: 15px; }

.qr__frame {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  aspect-ratio: 1;
  width: 100%;
  max-width: 215px;
  margin: 6px auto 12px;
  padding: 20px;
  background: #fff;
  border-radius: var(--radius);
  color: var(--black);
}

.qr__glyph { width: 72px; height: 72px; }

.qr__placeholder {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.qr__caption {
  margin-bottom: 18px;
  font-size: .6875rem;
  line-height: 1.5;
  text-align: center;
  color: rgba(255, 255, 255, .55);
}

/* Adresse en clair sous le QR : doit rester lisible sur le fond noir de la
   carte, d'ou l'or vif du logo (12,3:1) plutot que l'or encre. */
.qr__url {
  margin-bottom: 14px;
  font-size: .75rem;
  text-align: center;
  word-break: break-word;
}
.qr__url a { color: var(--gold); }
.qr__url a:hover { text-decoration: underline; }

.qr__cta { width: 100%; }
.btn__ext { flex: none; width: 15px; height: 15px; }

/* Documents à fournir */
.docs {
  padding-block: clamp(40px, 6vw, 72px);
  background: var(--cream-soft);
}

.section-title { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.section-title__icon { flex: none; width: 26px; height: 26px; color: var(--gold-ink); }

.docs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.doc {
  padding: 18px 22px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .875rem;
}

.docs__note { margin-top: 22px; font-size: .875rem; color: var(--text-muted); }

.link--inline { color: var(--gold-ink); font-weight: 600; }
.link--inline:hover { text-decoration: underline; }

/* ============================================================
   PAGE GYMNASES
   ============================================================ */
.venue-list { padding-block: clamp(40px, 6vw, 72px); background: var(--cream-soft); }

.venue-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}
.venue-block + .venue-block { margin-top: clamp(48px, 6vw, 80px); }

/* Sans ceci, min-width:auto empêche les éléments de grille de descendre sous la
   largeur min-content du tableau, et la piste déborde de l'écran. */
.venue-block__media,
.venue-block__body { min-width: 0; }

/* Une salle sur deux : média à droite, texte à gauche. */
.venue-block:nth-child(even) .venue-block__media { order: 2; }

.venue-block__photo {
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background-size: cover;
  background-position: center;
}

/* Repli visuel tant que les photos ne sont pas fournies */
.venue-block__photo--1 { background-image: url('../img/gymnase-1.jpg'), linear-gradient(140deg, #3a2f18, #0b0b0b); }
.venue-block__photo--2 { background-image: url('../img/gymnase-2.jpg'), linear-gradient(140deg, #4a3a1c, #141414); }
.venue-block__photo--3 { background-image: url('../img/gymnase-3.jpg'), linear-gradient(140deg, #453718, #0b0b0b); }

.venue-block__map {
  margin-top: 16px;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.venue-block__map iframe {
  display: block;
  width: 100%;
  height: 260px;
  border: 0;
}

/* Écran de consentement affiché à la place de la carte. Aucune requête n'est
   envoyée à Google tant que le visiteur n'a pas cliqué. */
.map-consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 260px;
  padding: 24px;
  background: none;
  border: 0;
  font: inherit;
  text-align: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.map-consent:hover { background: rgba(20, 20, 20, .04); }

.map-consent__icon { width: 30px; height: 30px; color: var(--gold-ink); }

.map-consent__label {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text);
}

.map-consent__note { max-width: 42ch; font-size: .75rem; line-height: 1.5; }

.venue-block__name {
  margin-bottom: 14px;
  font-size: clamp(1.625rem, 3.2vw, 2.25rem);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}

.venue-block__address {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--text-muted);
}
.venue-block__address svg {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 3px;
  color: var(--gold-ink);
}

.venue-block__access { margin-top: 12px; font-size: .875rem; color: var(--text-muted); }
.venue-block__route { margin-top: 16px; }

/* Tableau des créneaux */
.slots {
  margin-top: 24px;
  overflow-x: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.slots__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  text-align: left;
}

.slots__table th,
.slots__table td { padding: 12px 14px; white-space: nowrap; }

/* Jour et horaires restent insécables ; les deux colonnes de texte long passent
   à la ligne, sans quoi le tableau réclame un défilement même sur grand écran. */
.slots__public { white-space: normal; min-width: 14ch; }
.slots__table td:last-child,
.slots__table .badge { white-space: normal; }

.slots__table thead th {
  background: var(--cream);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.slots__table tbody tr { border-top: 1px solid var(--border); }
.slots__table tbody th { font-weight: 700; }
.slots__table td { color: var(--text-muted); }

.badge {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(138, 106, 30, .13);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--gold-ink-dark);
}

/* Libellé réservé aux lecteurs d'écran */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ---------- Aides à l'inscription ---------- */
.aides {
  padding-block: clamp(40px, 6vw, 72px);
  background: var(--cream);
}

.aides__intro { max-width: 62ch; margin-bottom: 28px; color: var(--text-muted); }

.aides__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.aide {
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* Visuels officiels des dispositifs : affiches de campagne, jamais recadrees.
   Leurs formats different (16:9 et 2,12:1), donc les deux bandeaux n'ont pas
   tout a fait la meme hauteur — rogner une affiche officielle serait pire. */
.aide__visuel {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  border-radius: var(--radius);
}

.aide__title {
  margin: 0 0 12px;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.aide__text { font-size: .875rem; color: var(--text-muted); }

.aide__meta {
  margin: 18px 0 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: .8125rem;
}
.aide__meta dt {
  margin-bottom: 3px;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.aide__meta dd { margin: 0 0 12px; color: var(--text-muted); }
.aide__meta dd:last-child { margin-bottom: 0; }

.aide .link { margin-top: auto; }


/* ============================================================
   PAGE ÉQUIPES
   ============================================================ */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.filtre {
  padding: 10px 20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  font: inherit;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.filtre:hover { border-color: var(--gold-ink); }

.filtre.is-active {
  background: var(--black-deep);
  border-color: var(--black-deep);
  color: var(--gold);
}

.teams-list { padding-block: clamp(36px, 5vw, 64px); background: var(--cream-soft); }

/* Meme piege que pour les cartes : sans display:none explicite, le display
   pose par l'auteur l'emporterait sur le comportement de [hidden]. */
.teams-group[hidden] { display: none; }

.teams-group + .teams-group { margin-top: clamp(36px, 4vw, 52px); }

.teams-group__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.teams-group__titre {
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.teams-list__compte { margin-bottom: 24px; }

.teams-group__compte,
.teams-list__compte {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

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

/* La regle display de l'auteur l'emporte sur le display:none que le navigateur
   applique a [hidden] : sans ceci, le filtrage ne masquerait aucune carte. */
.team-card[hidden] { display: none; }

.team-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* Emplacements photo : un dégradé chaud tient la place tant que les clichés
   ne sont pas pris, pour que la grille reste présentable. */
.team-card__photo {
  display: block;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
}
.team-card__photo--1 { background-image: url('../img/equipe-1.jpg'), linear-gradient(140deg, #3a2f18, #0b0b0b); }
.team-card__photo--2 { background-image: url('../img/equipe-2.jpg'), linear-gradient(140deg, #4a3a1c, #141414); }
.team-card__photo--3 { background-image: url('../img/equipe-3.jpg'), linear-gradient(140deg, #2f2615, #0b0b0b); }
.team-card__photo--4 { background-image: url('../img/equipe-4.jpg'), linear-gradient(140deg, #453718, #0b0b0b); }

.team-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px; }

/* Le déclencheur est un vrai bouton, donc focusable et annoncé comme tel ;
   son ::after couvre la carte entière pour que le clic porte partout. */
.team-card__trigger {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.team-card__trigger::after { content: ''; position: absolute; inset: 0; }
.team-card__trigger:focus-visible { outline: none; }
.team-card:has(.team-card__trigger:focus-visible) {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
}
.team-card:hover { box-shadow: var(--shadow-md); }

.team-card__name {
  margin-bottom: 10px;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.2;
}

.team-card__text { font-size: .875rem; color: var(--text-muted); }

.teams-list__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(36px, 4vw, 52px);
}
.teams-list__cta-texte { max-width: 56ch; margin: 0; color: var(--text-on-dark); }

/* ---------- Fiche équipe ---------- */
.fiche {
  width: min(560px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100dvh - 2 * var(--gutter));
  padding: 0;
  overflow: auto;
  background: var(--white);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  color: var(--text);
}
.fiche::backdrop { background: rgba(0, 0, 0, .72); }

.fiche__fermer {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: rgba(0, 0, 0, .55);
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
}
.fiche__fermer:hover { background: rgba(0, 0, 0, .8); }
.fiche__fermer svg { width: 18px; height: 18px; }

.fiche__photo {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
}

.fiche__corps { padding: 26px; }

.fiche__titre {
  margin-bottom: 20px;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.fiche__infos {
  display: grid;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.fiche__infos div { display: flex; justify-content: space-between; gap: 16px; }
.fiche__infos dt {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fiche__infos dd { margin: 0; font-size: .9375rem; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.fiche__infos dd a { text-decoration: underline; text-underline-offset: 3px; }
.fiche__infos dd a:hover { text-decoration-thickness: 2px; }

.fiche__soustitre {
  margin: 20px 0 12px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.fiche__creneaux { display: grid; gap: 10px; margin-bottom: 20px; }
.fiche__creneaux li {
  padding: 12px 16px;
  background: var(--cream);
  border-radius: var(--radius);
  font-size: .875rem;
}
.fiche__creneaux strong { margin-right: 8px; }
.fiche__creneaux span { display: block; margin-top: 3px; font-size: .8125rem; color: var(--text-muted); }

.fiche__vide {
  margin: 20px 0;
  font-size: .875rem;
  color: var(--text-muted);
}


/* ============================================================
   PAGES RÈGLES ET TOURNOIS
   ============================================================ */
.reglements { padding-block: clamp(40px, 6vw, 72px); background: var(--cream-soft); }

.reglements__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.reglement {
  display: flex;
  flex-direction: column;
  padding: 26px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.reglement__icone { width: 30px; height: 30px; margin-bottom: 16px; color: var(--gold-ink); }
.reglement__icone svg { display: block; width: 100%; height: 100%; }

.reglement__titre {
  margin-bottom: 10px;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.2;
}

.reglement__texte { font-size: .875rem; color: var(--text-muted); }
.reglement .link { margin-top: auto; padding-top: 18px; }

.reglement__attente {
  margin-top: auto;
  padding-top: 18px;
  font-size: .8125rem;
  color: var(--text-muted);
}

.reglements__note {
  max-width: 70ch;
  margin-top: 24px;
  font-size: .8125rem;
  color: var(--text-muted);
}

/* ---------- Tournois ---------- */
.tournois { padding-block: clamp(40px, 6vw, 72px); background: var(--cream-soft); }

.tournoi {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(24px, 3vw, 34px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.tournoi + .tournoi { margin-top: 20px; }

.tournoi__nom {
  font-size: clamp(1.375rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.tournoi__corps p { margin-bottom: 14px; color: var(--text-muted); }

.tournoi__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: .9375rem;
  font-weight: 700;
}
.tournoi__meta span {
  display: block;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tournois__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(28px, 4vw, 44px);
}
.tournois__cta-texte { max-width: 56ch; margin: 0; color: var(--text-on-dark); }

/* ============================================================
   PAGE BUREAU
   ============================================================ */
/* Le bandeau de titre (.page-head, crème) a déjà ses 72 px de respiration en
   bas : cumulés avec les 72 px du haut de .bureau, le menu sommaire tombait à
   144 px du lead. Le haut est réduit, le bas reste ample. */
.bureau {
  padding-block: clamp(16px, 2.5vw, 28px) clamp(40px, 6vw, 72px);
  background: var(--cream-soft);
}

/* ---------- Sommaire ----------
   Quatre ancres, une par catégorie, centrées au-dessus du contenu. Chaque lien
   se présente comme un bouton léger : fond blanc, filet de bordure et radius
   999 px, sur le modele des pastilles de filtre de la page Équipes (.filtre).
   Le libellé reste `nowrap` : le retour à la ligne se fait entre deux entrées,
   jamais au milieu d'un libellé. L'or est --gold-ink, pas --gold : 5,21:1 sur
   blanc contre 1,60:1 pour l'or du logo. */
.bureau__sommaire { margin-bottom: clamp(20px, 3vw, 32px); }

.bureau__sommaire-liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
}

.bureau__sommaire-link {
  display: inline-block;
  padding: 9px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold-ink);
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.bureau__sommaire-link:hover {
  border-color: var(--gold-ink);
  color: var(--gold-ink-dark);
}

/* ---------- Catégories ----------
   Même squelette que .teams-group (page Équipes) : en-tête souligné, titre
   majuscule, compteur. scroll-margin-top parce que le header est collant et
   masquerait le titre visé par une ancre. La marge entre deux catégories est
   volontairement généreuse : sans elle, la dernière carte d'un groupe et le
   titre du suivant se collent et la frontière entre catégories s'efface. */
.bureau__groupe { scroll-margin-top: 92px; }

.bureau__groupe + .bureau__groupe { margin-top: clamp(52px, 6vw, 76px); }

.bureau__groupe-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.bureau__groupe-titre {
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.bureau__groupe-compte {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

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

/* Carte membre : verticale comme .team-card, pour que dix cartes tiennent dans
   une grille de trois colonnes au lieu d'empiler dix bandeaux. */
.membre {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* Le repli `none` est indispensable : sans modificateur, la premiere couche
   reste vide et seul le dégradé chaud s'affiche, la page demeure présentable.
   Un var() sans repli rendrait toute la déclaration invalide et ferait
   disparaitre le dégradé lui-même. */
.membre__photo {
  display: block;
  aspect-ratio: 1 / 1;
  background-image: var(--membre-photo, none), linear-gradient(140deg, #3a2f18, #0b0b0b);
  background-size: cover;
  background-position: center;
}

/* Un modificateur par personne, sur le modele de .team-card__photo--1 … --4.
   Le chemin est relatif a la feuille de style, pas a la page. Nom de classe
   sans accent : la page, elle, garde l'orthographe exacte du nom.
   Fichier attendu : 840x840. Le recadrage carre est deja dans l'image — il est
   ancre vers le haut a la preparation — donc `center` ne peut pas couper un
   visage, la ou un recadrage centre dans le navigateur en couperait le tiers. */
.membre__photo--goulain    { --membre-photo: url('../img/bureau-goulain.jpg'); }
.membre__photo--cledassou  { --membre-photo: url('../img/bureau-cledassou.jpg'); }
.membre__photo--cabarrou   { --membre-photo: url('../img/bureau-cabarrou.jpg'); }
.membre__photo--boullay    { --membre-photo: url('../img/bureau-boullay.jpg'); }
.membre__photo--pissoort   { --membre-photo: url('../img/bureau-pissoort.jpg'); }
.membre__photo--champenois { --membre-photo: url('../img/bureau-champenois.jpg'); }
.membre__photo--maillard   { --membre-photo: url('../img/bureau-maillard.jpg'); }
.membre__photo--baron      { --membre-photo: url('../img/bureau-baron.jpg'); }
.membre__photo--barthelemy { --membre-photo: url('../img/bureau-barthelemy.jpg'); }
.membre__photo--torossian  { --membre-photo: url('../img/bureau-torossian.jpg'); }

.membre__body { display: flex; flex-direction: column; flex: 1; padding: 22px; }

/* Même rythme que .team-card__name : le nom est l'info principale de la carte. */
.membre__nom {
  margin: 0 0 10px;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.2;
}

.membre__texte { font-size: .875rem; color: var(--text-muted); }

.membre__contact {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.membre__contact li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .875rem;
}

.membre__contact li + li { margin-top: 10px; }

.membre__contact svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--gold-ink);
}

.membre__contact a { color: inherit; }
.membre__contact a:hover { color: var(--gold-ink-dark); }

.bureau__note {
  max-width: 70ch;
  margin-top: 24px;
  font-size: .8125rem;
  color: var(--text-muted);
}

.bureau__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(28px, 4vw, 44px);
}
.bureau__cta-texte { max-width: 56ch; margin: 0; color: var(--text-on-dark); }

/* ============================================================
   PAGE ACTUALITÉS
   ============================================================ */
.actus { padding-block: clamp(40px, 6vw, 72px); background: var(--cream-soft); }

/* ---------- Panneau de rédaction ----------
   Replié en bas de page, sous forme de <details> natif : le repli fonctionne
   sans JavaScript, et `summary` expose déjà le bon état ARIA (expanded) et la
   gestion clavier. Un <div hidden> + un bouton piloté en script aurait exigé
   de reconstruire les trois.

   ⚠ Le contrôle d'accès est un FREIN, pas une sécurité : le code est dans
   assets/js/main.js, que le navigateur livre à tout le monde. N'importe qui
   peut lire « usmamvb95 », contourner le formulaire, ou ouvrir la console pour
   poster sans passer par lui. Il protège d'un clic accidentel — pas d'un
   visiteur déterminé. Pour une vraie modération, il faut un serveur : le site
   est statique, sans back-end, donc rien n'est stocké globalement.

   Les actus postées ne vivent que dans le `localStorage` du navigateur qui les
   écrit. Elles ne sont donc visibles que sur cet appareil, et disparaissent si
   ses données de site sont effacées. C'est une maquette de publication, pas une
   base de données. */

/* Le triangle par défaut de <summary> est neutralisé : le libellé « Poster »
   tient lieu d'indicateur, avec un chevron dessiné à la place. */
.redac {
  margin-top: clamp(28px, 4vw, 44px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.redac__resume {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;            /* masque le triangle du navigateur */
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color .2s var(--ease);
}
/* `::-webkit-details-marker` couvre Safari et les anciennes versions de
   Chrome ; `list-style: none` seul ne suffit pas partout. */
.redac__resume::-webkit-details-marker { display: none; }
.redac__resume:hover { color: var(--gold-ink-dark); }
.redac__resume:focus-visible { border-radius: var(--radius); }

/* Le chevron n'apparaît qu'une fois ouvert, et tourne de 180°. Dessiné en CSS
   plutôt qu'en police d'icônes : pas de fichier à charger. */
.redac__resume-texte::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s var(--ease);
}
.redac[open] > .redac__resume .redac__resume-texte::after {
  transform: rotate(225deg) translate(-1px, -1px);
}

.redac__corps {
  padding: 0 22px 22px;
  border-top: 1px solid var(--border);
}

.redac__titre {
  margin: 20px 0 16px;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.redac__note {
  margin-bottom: 14px;
  font-size: .8125rem;
  color: var(--text-muted);
}

.redac__label {
  display: block;
  margin-bottom: 6px;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* `font: inherit` est indispensable : sans lui les champs retombent sur la
   police par defaut du navigateur et jurent avec le reste de la page. */
.redac__champ {
  display: block;
  width: 100%;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--text);
  transition: border-color .2s var(--ease);
}
.redac__champ:hover { border-color: rgba(20, 20, 20, .3); }
.redac__champ:focus { border-color: var(--gold-ink); }
.redac__champ--zone { resize: vertical; min-height: 96px; }

/* Le bouton natif « Aucun fichier choisi » ne s'aligne pas sur le reste : on
   laisse le champ tel quel mais on retire sa bordure, le libellé fait foi. */
.redac__champ--fichier {
  padding: 8px;
  font-size: .8125rem;
  cursor: pointer;
}

/* Picker natif (date) : on le laisse tel quel, il est deja dans la langue du
   systeme et reste plus robuste qu'une reconstruction en JavaScript. */
.redac__champ[type='date'] { font-variant-numeric: tabular-nums; }

.redac__aide {
  margin-top: 8px;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Vignettes des photos choisies, construites par main.js. */
.redac__vignettes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.redac__vignette {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  aspect-ratio: 4 / 3;
}

.redac__vignette img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.redac__retirer {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: rgba(0, 0, 0, .6);
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.redac__retirer:hover { background: #b3261e; }

.redac__login-row { display: flex; gap: 8px; }
.redac__login-row .redac__champ { flex: 1; min-width: 0; }
.redac__bouton { flex: none; padding-inline: 16px; }

/* Même piège que .teams-group et .team-card : le `display` posé par l'auteur
   l'emporterait sur le `display: none` que le navigateur applique à [hidden].
   Aujourd'hui aucune règle ne fixe `display` sur ces blocs, donc [hidden]
   suffit — on l'écrit quand même pour que l'ajout d'un `display: flex` au
   passage ne réveille pas le formulaire de dépôt par accident. */
.redac__form[hidden],
.redac__login[hidden],
.redac__erreur[hidden],
.redac__vignettes[hidden] { display: none; }

.redac__paire { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.redac__bloc { margin-bottom: 14px; }

.redac__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.redac__erreur {
  margin-top: 10px;
  font-size: .8125rem;
  font-weight: 600;
  color: #b3261e;
}

.redac__mention {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: .75rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---------- Actu postée depuis ce navigateur ----------
   Se distingue des actus du site par un liseré doré : elle n'existe que dans
   le localStorage du visiteur, un lecteur ne doit pas la prendre pour une
   annonce officielle du club. */
.actu--postee { border-color: var(--gold-ink); box-shadow: 0 0 0 1px var(--gold-ink), var(--shadow-sm); }

.actu__postee {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-ink-dark);
}

.actu__supprimer {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
}
.actu__supprimer:hover { color: #b3261e; }

/* Le bouton « Supprimer » se cale en bas de carte, comme le lien des actus
   du site, pour que les cartes d'une même ligne finissent ensemble. */
.actu__pied { margin-top: auto; padding-top: 18px; }

/* Photos 2 et 3 d'une actu postée, en bandeau sous le paragraphe. La première
   photo occupe le carré du haut de carte ; celle-ci ne montre que le reste,
   sinon une photo serait illustrée deux fois. */
.actu__galerie {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.actu__galerie img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--cream);
}

/* ---------- Les trois communes ----------
   Blasons poses sous le titre de page. Le fond de chaque PNG a ete mis a
   #f2f0ec, valeur de `--cream` sur laquelle `.page-head` est peint : ils se
   posent donc dessus sans rectangle visible. (Si `--cream` change un jour, il
   faut refaire les images — la couleur est cuite dedans, pas stylée en CSS.)

   Les formats etant differents (425x470, 217x233, 192x192), `object-fit:
   contain` les fait tenir dans un cadre commun sans les deformer ni les
   rogner ; `cover` couperait le blason de Meriel, le plus haut des trois.

   Le rang est centre sur la largeur de .page-head__inner (880 px) et non sur
   le `wrap` de 1180 px, pour partager l'axe du titre et du chapo. */
/* Le bandeau de titre est revenu en une seule colonne : le panneau de dépôt
   a été déplacé en bas de page, en <details> replié. */

.communes {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(24px, 5vw, 56px);
  margin-top: clamp(28px, 4vw, 40px);
}

/* `align-items: flex-end` aligne les pieds des trois blasons : leurs hauteurs
   reelles diffferent (204, 220 et 227 px), les aligner par le haut laisserait
   des blancs irreguliers sous l'ecusson le moins haut. */
.commune {
  display: flex;
  align-items: flex-end;
}

.commune__embleme {
  display: block;
  height: clamp(64px, 8vw, 88px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.communes__note {
  margin-top: 14px;
  font-size: .8125rem;
  color: var(--text-muted);
  text-align: center;
}

/* ---------- À la une ----------
   Seule actu affichée en grand : média à gauche, texte à droite, sur la même
   trame que .tournoi. Le reste de la page est une grille de cartes. */
.actu-une {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(22px, 3vw, 40px);
  padding: clamp(24px, 3vw, 34px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* Le repli `none` est indispensable : sans modificateur, la premiere couche
   reste vide et seul le degrade chaud s'affiche, la page demeure presentable.
   Meme raison, et meme ecriture, que .membre__photo. */
.actu-une__media {
  display: block;
  align-self: start;
  aspect-ratio: 4 / 3;
  background-image: var(--actu-photo, none), linear-gradient(140deg, #3a2f18, #0b0b0b);
  background-size: cover;
  background-position: center;
}

/* Même rôle que .tournoi__corps : la colonne de texte. flex pour que le lien
   « S'inscrire » se pose en bas quand la carte s'allonge. */
.actu-une__corps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.actu-une__titre {
  margin-bottom: 14px;
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.actu-une__texte { margin-bottom: 16px; color: var(--text-muted); }

/* ---------- Liste des autres actu ----------
   Cartes verticales, meme grille trois colonnes que .membre et .team-card.
   Le gouttere est plus large que sur ces deux grilles (20 px) : chaque actu se
   lit comme une entree de blog, et les planches-contact respirent entre elles. */
.actus__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.4vw, 40px);
  margin-top: clamp(40px, 5vw, 64px);
}

.actu {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.actu:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* La photo est un carré (485×487 et 370×370) : la boîte passe au carré et
   non au 16/9 des autres cartes, faute de quoi `cover` rognerait le haut et le
   bas des planches-contact — dont les légendes sont justement en haut et en bas.
   `object-fit: cover` ne rogne donc rien ici, et la grille garde ses alignements. */
.actu__media {
  display: block;
  aspect-ratio: 1 / 1;
  background-image: var(--actu-photo, none), linear-gradient(140deg, #3a2f18, #0b0b0b);
  background-size: cover;
  background-position: center;
}

/* Un modificateur par photo d'emplacement, sur le modele de
   .membre__photo--<nom>. Le chemin est relatif a la feuille de style, pas a la
   page. Les deux photos reellement fournies (meryplouz2022, Remisetrophée) ne
   passent pas par ici : elles sont des <img> dans le HTML, pour que le texte de
   remplacement soit lu par les lecteurs d'ecran et que le fichier soit indexable. */
.actu-une__media--inscriptions { --actu-photo: url('../img/actu-inscriptions.jpg'); }
.actu__media--aides         { --actu-photo: url('../img/actu-aides.jpg'); }
.actu__media--amazones      { --actu-photo: url('../img/actu-amazones.jpg'); }
.actu__media--forums        { --actu-photo: url('../img/actu-forums.jpg'); }

/* Photo reelle dans la boite : elle occupe tout le cadre. */
.actu__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.actu__body { display: flex; flex-direction: column; flex: 1; padding: 22px; }

/* Categorie et date sur une seule ligne. Le filet qui suit les deux fait
   office de separation avec le titre, sans nouvelle bordure dans la carte. */
.actu__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 10px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.actu__categorie { color: var(--gold-ink); }
/* Le point de couture reste colle au mot qui le precede. */
.actu__meta time::before { content: '· '; }

.actu__titre {
  margin-bottom: 10px;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.2;
}

.actu__texte { font-size: .875rem; color: var(--text-muted); }

/* Le lien descend en bas de carte : les cartes d'une meme ligne finissent
   sur la meme ligne de base, quelle que soit la longueur du texte. */
.actu__body .link { margin-top: auto; padding-top: 18px; align-self: flex-start; }

.actus__note {
  max-width: 70ch;
  margin-top: 24px;
  font-size: .8125rem;
  color: var(--text-muted);
}

.actus__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(28px, 4vw, 44px);
}
.actus__cta-texte { max-width: 56ch; margin: 0; color: var(--text-on-dark); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .nav__link { padding: 8px 9px; font-size: .78125rem; }
}

/* Point de rupture du menu : la nav passe en tiroir */
@media (max-width: 960px) {
  /* z-index au-dessus du tiroir : la croix de fermeture reste atteignable */
  .burger { display: flex; position: relative; z-index: 96; }

  .nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 95;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    width: min(320px, 86vw);
    height: 100dvh;
    padding: 84px 24px 32px;
    background: var(--black-pure);
    box-shadow: var(--shadow-md);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .28s var(--ease);
  }
  .nav.is-open { transform: translateX(0); }

  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link.is-active::after { inset: auto 14px 6px; }
  .nav__link { padding: 12px 14px; font-size: .9375rem; }
  .nav__cta { width: 100%; }
}

@media (max-width: 900px) {
  .quicklinks__grid,
  .teams__grid   { grid-template-columns: repeat(2, 1fr); }
  .club__grid    { grid-template-columns: 1fr; }
  .venues__grid  { grid-template-columns: 1fr; }
  .footer__grid  { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }

  .steps__grid   { grid-template-columns: repeat(2, 1fr); }
  .aides__grid   { grid-template-columns: 1fr; }
  .teams-list__grid { grid-template-columns: repeat(2, 1fr); }
  .reglements__grid { grid-template-columns: repeat(2, 1fr); }
  .tournoi          { grid-template-columns: 1fr; }
  .bureau__grid     { grid-template-columns: repeat(2, 1fr); }
  .actus__grid      { grid-template-columns: repeat(2, 1fr); }
  .pricing__grid { grid-template-columns: 1fr; }

  .docs__grid    { grid-template-columns: 1fr; }

  /* L'alternance média/texte n'a plus de sens en pile : média toujours en tête */
  .venue-block   { grid-template-columns: 1fr; }
  .venue-block:nth-child(even) .venue-block__media { order: 0; }
}

@media (max-width: 620px) {
  :root { --gutter: 18px; --inset: 10px; }

  .eyebrow { letter-spacing: .14em; }

  .hero { min-height: auto; padding-block: 64px 44px; }
  .hero__actions .btn { flex: 1 1 100%; }

  .quicklinks__grid { grid-template-columns: 1fr; }
  .teams__grid      { grid-template-columns: 1fr; gap: 24px; }
  .stats            { grid-template-columns: 1fr; }
  .stat             { flex-direction: row-reverse; align-items: baseline; justify-content: flex-end; gap: 12px; }
  .footer__grid     { grid-template-columns: 1fr; }
  .venues .btn      { width: 100%; }

  .steps__grid      { grid-template-columns: 1fr; }
  .teams-list__grid { grid-template-columns: 1fr; }
  .reglements__grid { grid-template-columns: 1fr; }
  .tournois__cta .btn { width: 100%; }
  .bureau__cta .btn   { width: 100%; }
  .bureau__grid       { grid-template-columns: 1fr; }
  .actus__grid        { grid-template-columns: 1fr; }
  .actus__cta .btn    { width: 100%; }

  /* L'à la une s'empile : le texte passe sous la photo, comme .venue-block */
  .actu-une            { grid-template-columns: 1fr; }
  .actu-une__media     { aspect-ratio: 16 / 9; }

  /* Trois blasons côte à côte encombrent un écran étroit : la gouttière se
     resserre et ils descendent en hauteur, plutôt que de déborder. */
  .communes          { gap: 16px; }
  .commune__embleme  { height: 58px; }
  .filtre           { padding: 9px 15px; font-size: .75rem; }
  .bureau__sommaire-link { padding: 8px 14px; font-size: .75rem; }
  .teams-list__cta .btn { width: 100%; }
  .price            { padding-inline: 20px; gap: 14px; }
  .price__amount    { font-size: 1.25rem; }

  .venue-block__map iframe,
  .map-consent            { height: 220px; }

  /* Un tableau à quatre colonnes ne tient pas sur un téléphone : chaque créneau
     devient une fiche. Les rôles ARIA portés par le HTML conservent la sémantique
     de tableau, que le changement de `display` ferait sinon disparaître. */
  .slots { overflow-x: visible; }
  .slots__table thead { display: none; }
  .slots__table,
  .slots__table tbody,
  .slots__table tr,
  .slots__table th,
  .slots__table td { display: block; }

  .slots__table tr { padding: 14px 18px; border-top: 1px solid var(--border); }
  .slots__table tbody tr:first-child { border-top: 0; }

  .slots__table th,
  .slots__table td { padding: 0; white-space: normal; }

  .slots__table tbody th {
    font-size: .9375rem;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .slots__public { min-width: 0; margin-top: 2px; }
  .slots__table td:last-child { margin-top: 9px; }
}

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