/* =========================================================================
   Vaud Boxe · feuille de style du site (v3)
   Écrite à la main, sans framework. Chargée après fonts.css, avant carte.css
   et pages.css.

   ORDRE DU FICHIER
   1. Jetons          2. Base et réutilisables    3. Typographie
   4. Boutons         5. En-tête et menu          6. Sections
   7. Cartes          8. Grilles                  9. Tableaux
   10. Badges         11. Photos                  12. Listes de définitions
   13. Formulaires    14. Newsletter              15. Pied de page
   16. Chiffres       17. Pages (accueil, news, article, Vaud Boxe)
   18. Mouvement réduit

   INVENTAIRE DES COMPOSANTS · à utiliser tel quel, sans redéfinir
   ------------------------------------------------------------------------
   .enveloppe                 conteneur 1200 px, gouttières 24 px
   .enveloppe--etroite        conteneur 760 px, pages de texte
   .visuellement-cache        visible des seuls lecteurs d'écran
   .surtitre                  sur-titre condensé, tiret jaune devant
   .titre-section             titre h2 d'une section
   .souligne                  trait jaune sous un mot du titre
   .chapo                     chapô d'une page ou d'une section
   .texte                     corps de texte rendu depuis le Markdown
   .micro                     note fine, texte atténué
   .bouton                    base : condensé, capitales, bord 1.5 px
     .bouton--principal       fond jaune, texte encre
     .bouton--plein           fond vert profond, texte blanc cassé
     .bouton--contour         bord vert profond, fond transparent
     .bouton--lien            texte suivi d'une flèche, sans cadre
     .bouton--clair           variante des 3 premiers sur fond vert
   .boutons                   rangée de boutons, passe en colonne au besoin
   .section                   section de page, espacée verticalement
     .section--alt            fond alterné
     .section--vert           fond vert profond, texte blanc cassé
     .section--serre          moitié de l'espacement vertical
   .section__tete             partial partials/section-tete.njk
   .carte                     carte générique (bord fin, sans ombre)
     .carte__image            image 16/9, .carte__image--symbole en repli
     .carte__corps .carte__meta .carte__titre .carte__texte .carte__lien
     .carte--large            image à gauche (5/12), corps à droite
     .carte--lien             la carte entière est cliquable
     .carte--renvoi           carte de renvoi vers une autre page
   .grille .grille--2 .grille--3 .grille--4     colonnes, 1 sous 700 px
   .tableau                   tableau à lignes fines
     .tableau--calendrier     colonne de date en chiffres tabulaires
   .badge .badge--vaud .badge--type            étiquettes courtes
   .etiquette-neuf            étiquette « Nouveau »
   .bande-photo               bande photo pleine largeur (partials/photo.njk)
   .photo                     figure photo (partials/photo.njk, mode figure)
   .liste-definitions         dl en 2 colonnes (coordonnées, fiche club)
   .formulaire .champ .champ--large .formulaire__note
   .newsletter                partial partials/newsletter.njk
   .pied                      pied de page
   .chiffre                   nombre mis en avant
   .sommaire                  rangée de liens d'ancres
   .vide                      encart d'état vide
   ------------------------------------------------------------------------
   Sécurité : toute ressource externe ajoutée à une page doit d'abord être
   autorisée dans l'en-tête Content-Security-Policy de vercel.json.
   ========================================================================= */

/* ---------- 1. Jetons ---------- */

:root {
  /* Couleurs. Jamais de blanc pur ni de noir pur. */
  --fond: #FBFBF8;
  --fond-alt: #F3F5F0;
  --encre: #141412;
  --encre-2: #3C3E39;
  --encre-3: #6B6E67;
  --vert: #1F6A45;
  --vert-fonce: #124A31;
  --vert-clair: #E4EFE7;
  --filet: #BFD6C7;
  --jaune: #F5C518;

  /* Rythme */
  --large: 1200px;
  --etroit: 760px;
  --gouttiere: 24px;
  --marge: clamp(20px, 4vw, 40px);
  --section-y: clamp(56px, 8vw, 112px);
  --rayon: 4px;

  /* Mouvement : une seule courbe pour tout le site */
  --courbe: cubic-bezier(.16, 1, .3, 1);
  --duree: 240ms;

  /* Typographie. Barlow pour tout, Barlow Condensed pour les capitales. */
  --titre: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --texte: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --etiquette: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
}

/* ---------- 2. Base ---------- */

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(40px, 6vw, 84px); }
h2 { font-size: clamp(30px, 4vw, 52px); }
h3 { font-size: clamp(22px, 2.2vw, 26px); font-weight: 800; line-height: 1.16; }
h4 { font-size: 19px; font-weight: 700; line-height: 1.2; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

hr {
  border: 0;
  border-top: 1px solid var(--filet);
  margin: 40px 0;
}

/* ---------- Accessibilité ---------- */

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--vert-fonce);
  color: var(--fond);
  padding: 14px 22px;
  font-family: var(--etiquette);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  text-decoration: none;
}
.evitement:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--vert);
  outline-offset: 3px;
}
.section--vert :focus-visible,
.pied :focus-visible { outline-color: var(--jaune); }

.visuellement-cache,
.lecteur-seul {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Enveloppes ---------- */

.enveloppe {
  width: 100%;
  max-width: var(--large);
  margin: 0 auto;
  padding-left: var(--marge);
  padding-right: var(--marge);
}
.enveloppe--etroite { max-width: calc(var(--etroit) + var(--marge) * 2); }

/* ---------- 3. Typographie ---------- */

.surtitre {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--etiquette);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vert);
}
.surtitre::before {
  content: "";
  width: 22px;
  height: 3px;
  background: var(--jaune);
  flex: none;
}
.section--vert .surtitre,
.pied .surtitre { color: var(--jaune); }
.section--vert .surtitre::before { background: var(--jaune); }

.titre-section { font-size: clamp(30px, 4vw, 52px); }

/* Le trait jaune est peint par un dégradé de fond : il passe donc sous le
   texte, sans créer de contexte d'empilement ni disparaître derrière le fond
   de la page comme le ferait un pseudo-élément en z-index négatif. */
.souligne {
  white-space: nowrap;
  background-image: linear-gradient(var(--jaune), var(--jaune));
  background-repeat: no-repeat;
  background-size: 100% .11em;
  background-position: 0 92%;
}

.chapo {
  font-size: clamp(19px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--encre-2);
  max-width: 62ch;
  margin: 18px 0 0;
}
.section--vert .chapo { color: rgba(251, 251, 248, .88); }

.texte { color: var(--encre-2); }
.texte + .texte { margin-top: 1.1em; }
.texte a { color: var(--vert-fonce); text-underline-offset: 3px; }
.texte a:hover { color: var(--vert); }
.texte h3 { margin: 32px 0 10px; color: var(--encre); }
.texte ul { margin: 0 0 1em; padding-left: 22px; }
.texte ul li { list-style: disc; margin-bottom: 6px; }
.texte code {
  font-family: inherit;
  font-size: .92em;
  background: var(--vert-clair);
  color: var(--vert-fonce);
  padding: 1px 6px;
  border-radius: 3px;
}
.section--vert .texte { color: rgba(251, 251, 248, .88); }
.section--vert .texte a { color: var(--jaune); }

.micro {
  font-size: 13px;
  line-height: 1.5;
  color: var(--encre-3);
  max-width: 68ch;
  margin: 14px 0 0;
}
.section--vert .micro,
.pied .micro { color: rgba(251, 251, 248, .62); }

.mention { font-size: 13px; color: var(--encre-3); }

.vide {
  border: 1px dashed var(--filet);
  border-radius: var(--rayon);
  background: var(--fond-alt);
  padding: 28px var(--gouttiere);
  color: var(--encre-2);
  max-width: 70ch;
}

/* ---------- 4. Boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1.5px solid transparent;
  border-radius: var(--rayon);
  background: transparent;
  color: var(--encre);
  font-family: var(--etiquette);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duree) var(--courbe),
              background-color var(--duree) var(--courbe),
              border-color var(--duree) var(--courbe),
              color var(--duree) var(--courbe);
}
.bouton:hover { transform: translateY(-2px); }

.bouton--principal {
  background: var(--jaune);
  border-color: var(--jaune);
  color: var(--encre);
}
.bouton--principal:hover { background: #ffd334; border-color: #ffd334; }

.bouton--plein {
  background: var(--vert-fonce);
  border-color: var(--vert-fonce);
  color: var(--fond);
}
.bouton--plein:hover { background: var(--vert); border-color: var(--vert); }

.bouton--contour {
  border-color: var(--vert-fonce);
  color: var(--vert-fonce);
}
.bouton--contour:hover { background: var(--vert-clair); }

/* Sur fond vert : contour blanc cassé. */
.bouton--clair {
  border-color: rgba(251, 251, 248, .7);
  color: var(--fond);
}
.bouton--clair:hover {
  background: var(--fond);
  border-color: var(--fond);
  color: var(--vert-fonce);
}

.bouton--petit { padding: 10px 16px; font-size: 13px; }

.bouton--lien {
  padding: 0;
  border: 0;
  color: var(--vert-fonce);
  letter-spacing: .1em;
}
.bouton--lien::after {
  content: "\2192";
  font-family: var(--texte);
  font-size: 16px;
  transition: transform var(--duree) var(--courbe);
}
.bouton--lien:hover { transform: none; }
.bouton--lien:hover::after { transform: translateX(4px); }
.section--vert .bouton--lien,
.pied .bouton--lien { color: var(--jaune); }

.boutons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

/* ---------- 5. En-tête et menu ---------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--fond);
  border-bottom: 1px solid var(--filet);
}

.barre-utilitaire {
  background: var(--vert-fonce);
  color: rgba(251, 251, 248, .82);
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.barre-utilitaire__liste {
  display: flex;
  justify-content: flex-end;
  gap: 22px;
  min-height: 34px;
  align-items: center;
}
.barre-utilitaire a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duree) var(--courbe);
}
.barre-utilitaire a:hover { color: var(--jaune); }

.entete__ligne {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 78px;
}

.marque {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: none;
  margin-right: auto;
}
.marque img { width: 40px; height: auto; }
.marque__nom {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.marque__baseline {
  display: block;
  margin-top: 4px;
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: .08em;
  color: var(--encre-3);
  max-width: 26ch;
}

.entete__panneau {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 22px;
}
.nav a {
  position: relative;
  padding: 6px 0;
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre-2);
  transition: color var(--duree) var(--courbe);
}
.nav a:hover { color: var(--encre); }
.nav a[aria-current="page"] { color: var(--encre); }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 3px;
  background: var(--jaune);
}

.panneau__utilitaire,
.panneau__pied { display: none; }

.burger {
  display: none;
  padding: 10px 14px;
  border: 1.5px solid var(--vert-fonce);
  border-radius: var(--rayon);
  background: transparent;
  color: var(--vert-fonce);
  font-family: var(--etiquette);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 1023px) {
  .entete__ligne { min-height: 66px; gap: 16px; }
  .burger { display: inline-block; }

  .entete__panneau {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 96px var(--marge) 40px;
    background: var(--vert-fonce);
    color: var(--fond);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--duree) var(--courbe),
                transform var(--duree) var(--courbe),
                visibility var(--duree) var(--courbe);
  }
  [data-ouvert="oui"] .entete__panneau {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .entete__panneau .nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
  }
  .entete__panneau .nav a {
    display: block;
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid rgba(251, 251, 248, .16);
    font-family: var(--titre);
    font-weight: 800;
    font-size: 28px;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--fond);
  }
  .entete__panneau .nav a[aria-current="page"] { color: var(--jaune); }
  .entete__panneau .nav a[aria-current="page"]::after { display: none; }
  .entete__panneau .bouton { margin-top: 28px; }

  .panneau__utilitaire {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: auto;
    padding-top: 32px;
    font-family: var(--etiquette);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .panneau__utilitaire a {
    color: rgba(251, 251, 248, .78);
    text-decoration: none;
  }
  .panneau__utilitaire a:hover { color: var(--jaune); }

  .burger { position: relative; z-index: 90; }
  [data-ouvert="oui"] .burger {
    border-color: rgba(251, 251, 248, .7);
    color: var(--fond);
  }
  [data-ouvert="oui"] { position: relative; }
  .marque__baseline { display: none; }
}

@media (max-width: 560px) {
  .barre-utilitaire__liste { justify-content: center; gap: 16px; font-size: 12px; }
}

/* ---------- 6. Sections ---------- */

.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
.section--serre {
  padding-top: calc(var(--section-y) / 2);
  padding-bottom: calc(var(--section-y) / 2);
}
.section--alt { background: var(--fond-alt); }
.section--vert {
  background: var(--vert-fonce);
  color: var(--fond);
}
.section--vert h2, .section--vert h3 { color: var(--fond); }
.section + .section--alt, .section--alt + .section { border-top: 0; }

.section__tete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--filet);
}
.section--vert .section__tete { border-bottom-color: rgba(251, 251, 248, .22); }
.section__tete .chapo { margin-top: 12px; }
.section__tete-texte { min-width: 0; }
.section__tete-lien { flex: none; padding-bottom: 4px; }

@media (max-width: 700px) {
  .section__tete { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- 7. Cartes ---------- */

.carte {
  display: flex;
  flex-direction: column;
  background: var(--fond);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--duree) var(--courbe),
              border-color var(--duree) var(--courbe);
}
.carte--lien:hover,
a.carte:hover {
  transform: translateY(-2px);
  border-color: var(--vert);
}

.carte__image {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--vert-clair);
  overflow: hidden;
  flex: none;
}
.carte__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.8);
}
.carte__image--symbole {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vert-clair);
}
.carte__image--symbole img {
  width: 34%;
  max-width: 140px;
  height: auto;
  object-fit: contain;
  filter: none;
  opacity: .85;
}

.carte__corps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  flex: 1 1 auto;
}

.carte__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-3);
}
.carte__meta > * + *::before {
  content: "\00B7";
  margin-right: 10px;
  color: var(--filet);
}
.carte__meta .etiquette-neuf + *::before { content: none; }

.carte__titre {
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0;
}
.carte__texte {
  color: var(--encre-2);
  font-size: 16.5px;
  line-height: 1.5;
  margin: 0;
}
.carte__lien {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--etiquette);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vert-fonce);
}
.carte__lien::after { content: " \2192"; }

.carte--large {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: stretch;
}
.carte--large .carte__image { aspect-ratio: auto; min-height: 260px; }
.carte--large .carte__corps { padding: clamp(24px, 3vw, 40px); gap: 14px; }
.carte--large .carte__titre { font-size: clamp(24px, 2.8vw, 34px); }
.carte--large .carte__texte { font-size: 17.5px; }

.carte--renvoi .carte__corps { padding: clamp(24px, 3vw, 36px); }
.carte--renvoi .carte__titre { font-size: clamp(22px, 2.4vw, 30px); }

@media (max-width: 860px) {
  .carte--large { grid-template-columns: 1fr; }
  .carte--large .carte__image { aspect-ratio: 16 / 9; min-height: 0; }
}

/* ---------- 8. Grilles ---------- */

.grille {
  display: grid;
  gap: var(--gouttiere);
  align-items: stretch;
}
.grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1000px) {
  .grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .grille--2, .grille--3, .grille--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 9. Tableaux ---------- */

.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.tableau caption {
  text-align: left;
  padding-bottom: 12px;
  color: var(--encre-3);
  font-size: 14px;
}
.tableau th {
  text-align: left;
  padding: 12px 16px 12px 0;
  border-bottom: 1.5px solid var(--vert-fonce);
  font-family: var(--etiquette);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vert-fonce);
  white-space: nowrap;
}
.tableau td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--filet);
  vertical-align: top;
  color: var(--encre-2);
}
.tableau td:first-child { color: var(--encre); font-weight: 600; }
.tableau td a { color: var(--vert-fonce); }
.tableau tbody tr:nth-child(even) { background: rgba(228, 239, 231, .35); }
.tableau th:last-child, .tableau td:last-child { padding-right: 0; }

.tableau--calendrier td:first-child {
  font-family: var(--titre);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tableau-defilant { overflow-x: auto; }

/* ---------- 10. Badges et étiquettes ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--filet);
  border-radius: 2px;
  font-family: var(--etiquette);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-2);
  white-space: nowrap;
}
.badge--vaud {
  background: var(--jaune);
  border-color: var(--jaune);
  color: var(--encre);
}
.badge--type {
  border-color: var(--vert-clair);
  background: var(--vert-clair);
  color: var(--vert-fonce);
}
.section--vert .badge {
  border-color: rgba(251, 251, 248, .35);
  color: rgba(251, 251, 248, .9);
}
.section--vert .badge--vaud,
.section--vert .badge--type { color: var(--encre); }
.section--vert .badge--type { border-color: var(--vert-clair); color: var(--vert-fonce); }

.etiquette-neuf {
  display: inline-block;
  padding: 3px 9px;
  background: var(--jaune);
  color: var(--encre);
  border-radius: 2px;
  font-family: var(--etiquette);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------- 11. Photos ---------- */

.bande-photo {
  position: relative;
  width: 100%;
  min-height: clamp(180px, 26vw, 300px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--vert-fonce);
}
.bande-photo__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.55);
}
.bande-photo__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 74, 49, .55), rgba(18, 74, 49, .82));
}
.bande-photo__contenu {
  position: relative;
  width: 100%;
  padding-top: 28px;
  padding-bottom: 24px;
  color: var(--fond);
}
.bande-photo__legende {
  margin: 0;
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bande-photo__credit {
  margin: 6px 0 0;
  font-size: 12px;
  color: rgba(251, 251, 248, .62);
}
.bande-photo--attente {
  min-height: 160px;
  align-items: center;
  justify-content: center;
  background: var(--vert-clair);
}

.photo {
  margin: 0;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--vert-clair);
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.8);
}
.photo--16-9 img { aspect-ratio: 16 / 9; }
.photo--4-3 img { aspect-ratio: 4 / 3; }
.photo--1-1 img { aspect-ratio: 1 / 1; }
.photo--21-9 img { aspect-ratio: 21 / 9; }
.photo__legende {
  padding: 12px 16px;
  background: var(--fond);
  border-top: 1px solid var(--filet);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--encre-3);
}
.photo--attente {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}
.photo__attente {
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vert-fonce);
}

/* ---------- 12. Listes de définitions ---------- */

.liste-definitions {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 2fr;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--filet);
}
.liste-definitions dt {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--filet);
  font-family: var(--etiquette);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-3);
}
.liste-definitions dd {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--filet);
  color: var(--encre-2);
}
.liste-definitions a { color: var(--vert-fonce); }
.section--vert .liste-definitions,
.section--vert .liste-definitions dt,
.section--vert .liste-definitions dd { border-color: rgba(251, 251, 248, .22); }
.section--vert .liste-definitions dt { color: rgba(251, 251, 248, .6); }
.section--vert .liste-definitions dd { color: var(--fond); }

@media (max-width: 560px) {
  .liste-definitions { grid-template-columns: minmax(0, 1fr); }
  .liste-definitions dt { padding-bottom: 2px; border-bottom: 0; }
}

/* ---------- 13. Formulaires ---------- */

.formulaire {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px var(--gouttiere);
  max-width: 760px;
}
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ--large { grid-column: 1 / -1; }
.champ > label {
  font-family: var(--etiquette);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-2);
}
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--fond);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.4;
}
.champ textarea { min-height: 132px; resize: vertical; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: 0;
  border-color: var(--vert);
  box-shadow: 0 0 0 2px var(--vert);
}
.champ__requis { color: var(--vert); }
.formulaire__actions { grid-column: 1 / -1; }
.formulaire__note {
  grid-column: 1 / -1;
  font-size: 13px;
  line-height: 1.5;
  color: var(--encre-3);
}

@media (max-width: 700px) {
  .formulaire { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 14. Newsletter ---------- */

.newsletter {
  background: var(--vert-clair);
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  padding-top: calc(var(--section-y) * .7);
  padding-bottom: calc(var(--section-y) * .7);
}
.newsletter__grille {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.newsletter__titre {
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
}
.newsletter__texte {
  margin: 14px 0 0;
  color: var(--encre-2);
  max-width: 58ch;
}
.newsletter__action { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.newsletter__note { font-size: 13px; line-height: 1.5; color: var(--encre-3); margin: 0; }

.newsletter__formulaire { display: flex; flex-direction: column; gap: 14px; }
.newsletter__formulaire .champ { gap: 6px; }

/* Case de consentement : la case reste alignée sur la première ligne du
   texte, quelle que soit la longueur de la phrase. */
.newsletter__consentement {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin: 0;
}
.newsletter__consentement input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--vert);
}
.newsletter__consentement label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--encre-2);
}

/* Champ anti-robot : hors de l'écran, hors du clavier, hors des lecteurs
   d'écran. Jamais « display: none », que certains robots savent repérer. */
.newsletter__piege {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.newsletter__envoi { margin: 0; }
.newsletter__envoi .bouton { width: 100%; justify-content: center; }

.newsletter__etat {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: 4px;
  background: rgba(18, 74, 49, .08);
  color: var(--encre);
}
.newsletter__etat[data-etat="erreur"] { background: rgba(166, 10, 26, .09); }

/* Ancre héritée du site v2 : elle ne fait que marquer une position. */
.ancre-heritee { display: block; height: 0; overflow: hidden; }

@media (max-width: 860px) {
  .newsletter__grille { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (min-width: 861px) {
  .newsletter__envoi .bouton { width: auto; }
}

/* ---------- 15. Pied de page ---------- */

.pied {
  position: relative;
  background: var(--vert-fonce);
  color: rgba(251, 251, 248, .78);
  overflow: hidden;
  padding-top: clamp(48px, 6vw, 76px);
  padding-bottom: 28px;
}
.pied__filigrane {
  position: absolute;
  left: 0;
  bottom: -.24em;
  width: 100%;
  margin: 0;
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(90px, 20vw, 300px);
  line-height: .8;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: rgba(251, 251, 248, .045);
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  user-select: none;
}
.pied__contenu { position: relative; }

.pied__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 32px;
  margin-bottom: 40px;
  border-bottom: 1px solid rgba(251, 251, 248, .18);
}
.pied__marque {
  margin: 0;
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fond);
  text-transform: uppercase;
}
.pied__baseline {
  margin: 8px 0 0;
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(251, 251, 248, .7);
}
.pied__institution { margin: 0; font-size: 13px; color: rgba(251, 251, 248, .55); max-width: 40ch; }

.pied__colonnes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px var(--gouttiere);
}
.pied__colonnes h2 {
  font-family: var(--etiquette);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jaune);
  margin-bottom: 14px;
}
.pied__colonnes li { margin-bottom: 9px; font-size: 15.5px; }
.pied__colonnes a {
  text-decoration: none;
  color: rgba(251, 251, 248, .78);
  transition: color var(--duree) var(--courbe);
}
.pied__colonnes a:hover { color: var(--fond); }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(251, 251, 248, .18);
  font-size: 13px;
  color: rgba(251, 251, 248, .55);
}
.pied__bas a { color: rgba(251, 251, 248, .75); }
.pied__legaux { display: flex; gap: 10px; }

@media (max-width: 860px) {
  .pied__colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .pied__colonnes { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 16. Chiffres ---------- */

.chiffre { display: flex; flex-direction: column; gap: 4px; }
.chiffre__valeur {
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--vert-fonce);
  margin: 0;
}
.chiffre__libelle {
  margin: 0;
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-3);
}
.section--vert .chiffre__valeur { color: var(--jaune); }
.section--vert .chiffre__libelle { color: rgba(251, 251, 248, .7); }

/* ---------- 17. Pages ---------- */

/* Accueil · héro */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(82vh, 760px);
  padding-top: clamp(72px, 12vw, 140px);
  padding-bottom: clamp(52px, 7vw, 88px);
  background: var(--vert-fonce);
  color: var(--fond);
  overflow: hidden;
}
.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La photo garde ses couleurs, juste assez désaturées pour passer sous le
     voile vert sans tirer l'oeil hors du texte. */
  filter: grayscale(.35);
}
.hero__voile {
  position: absolute;
  inset: 0;
  /* Voile vert profond en dégradé du bas vers le haut : opaque au pied du
     héro, où le texte s'assoit, léger en haut, où la photo reste visible.
     Le chapô et la mention de crédit restent lisibles quelle que soit la
     photographie déposée. */
  background: linear-gradient(
    to top,
    rgba(11, 45, 29, .95) 0%,
    rgba(13, 55, 36, .9) 24%,
    rgba(16, 66, 43, .7) 50%,
    rgba(18, 74, 49, .44) 76%,
    rgba(18, 74, 49, .26) 100%
  );
}
.hero__contenu { position: relative; width: 100%; }
.hero .surtitre { color: var(--jaune); }
.hero__titre {
  max-width: 16ch;
  margin: 0;
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(44px, 6.5vw, 96px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--fond);
  text-wrap: balance;
}
.hero__chapo {
  margin-top: 22px;
  max-width: 560px;
  font-size: 20px;
  line-height: 1.55;
  color: rgba(251, 251, 248, .92);
}
.hero .boutons { margin-top: 32px; }
.hero__micro {
  margin-top: 18px;
  font-size: 13.5px;
  color: rgba(251, 251, 248, .78);
  max-width: 560px;
}
/* Crédit photo au pied du héro, côté droit : il ferme la colonne de texte,
   qui est déjà calée au bas du héro. Il reste dans le flux, donc il ne
   chevauche jamais le micro-texte. En dessous de 860 px il repasse à
   gauche, avec le reste. */
.hero__credit {
  position: relative;
  margin: 34px 0 0;
  text-align: right;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .03em;
  color: rgba(251, 251, 248, .7);
}

@media (max-width: 860px) {
  .hero__credit { margin-top: 28px; text-align: left; }
}

@media (max-width: 700px) {
  .hero {
    min-height: min(70vh, 560px);
    padding-top: clamp(44px, 14vw, 88px);
    padding-bottom: 44px;
  }
  .hero__titre { font-size: 40px; max-width: 14ch; }
  .hero__chapo { margin-top: 18px; font-size: 17px; }
  .hero__micro { margin-top: 16px; }
}

/* Entrée du héro : 3 éléments, 80 ms d'écart. Purement CSS, donc jamais
   dépendante du script ; neutralisée par prefers-reduced-motion. */
@keyframes entree {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.entre {
  animation: entree 620ms var(--courbe) both;
}
.entre--1 { animation-delay: 0ms; }
.entre--2 { animation-delay: 80ms; }
.entre--3 { animation-delay: 160ms; }

/* Accueil · prochaine date */

.prochaine {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid rgba(251, 251, 248, .22);
  border-radius: var(--rayon);
  background: rgba(251, 251, 248, .04);
}
.prochaine__date {
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--jaune);
  margin: 0;
}
.prochaine__titre { margin: 0 0 8px; font-size: clamp(22px, 2.4vw, 28px); }
.prochaine__lieu {
  margin: 0;
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(251, 251, 248, .78);
}
.prochaine__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.prochaine__actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

@media (max-width: 900px) {
  .prochaine { grid-template-columns: minmax(0, 1fr); }
}

/* Accueil · soutiens */

.soutien {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: 8px var(--gouttiere);
  padding: 20px 0;
  border-bottom: 1px solid var(--filet);
  align-items: baseline;
}
.soutien:first-child { border-top: 1px solid var(--filet); }
.soutien__nom {
  margin: 0;
  font-family: var(--titre);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.soutien__statut { margin: 0; color: var(--encre-2); font-size: 16.5px; }
.soutien__statut a { color: var(--vert-fonce); }

@media (max-width: 700px) {
  .soutien { grid-template-columns: minmax(0, 1fr); }
}

/* News · en-tête de page et filtre */

.entete-page {
  padding-top: clamp(40px, 6vw, 76px);
  padding-bottom: clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--filet);
  background: var(--fond);
}
.entete-page .chapo { margin-top: 20px; }
.entete-page__fil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-3);
}
.entete-page__fil a { color: var(--vert-fonce); text-decoration: none; }
.entete-page__fil > * + *::before { content: "\00B7"; margin-right: 10px; color: var(--filet); }

/* Le titre d'un article se lit dans une colonne étroite : il descend d'un cran
   par rapport au titre d'une page de rubrique. */
.entete-page--article h1 { font-size: clamp(34px, 4.2vw, 58px); }

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}
.filtres a {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--filet);
  border-radius: 2px;
  font-family: var(--etiquette);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre-2);
  transition: background-color var(--duree) var(--courbe),
              border-color var(--duree) var(--courbe),
              color var(--duree) var(--courbe);
}
.filtres a:hover { border-color: var(--vert); color: var(--vert-fonce); }

/* Filtre sans script : chaque lien vise une ancre du conteneur, et la carte
   dont la catégorie ne correspond pas est masquée. Un navigateur sans :has()
   affiche simplement toutes les news, ce qui reste juste. */
.cible-filtre { display: block; height: 0; overflow: hidden; }

.liste-news:has(#f-association:target) .carte-news:not([data-categorie="association"]),
.liste-news:has(#f-clubs:target) .carte-news:not([data-categorie="clubs"]),
.liste-news:has(#f-competition:target) .carte-news:not([data-categorie="competition"]),
.liste-news:has(#f-formation:target) .carte-news:not([data-categorie="formation"]),
.liste-news:has(#f-partenaires:target) .carte-news:not([data-categorie="partenaires"]) {
  display: none;
}
.filtres:has(+ .liste-news #f-association:target) a[href="#f-association"],
.filtres:has(+ .liste-news #f-clubs:target) a[href="#f-clubs"],
.filtres:has(+ .liste-news #f-competition:target) a[href="#f-competition"],
.filtres:has(+ .liste-news #f-formation:target) a[href="#f-formation"],
.filtres:has(+ .liste-news #f-partenaires:target) a[href="#f-partenaires"] {
  background: var(--vert-fonce);
  border-color: var(--vert-fonce);
  color: var(--fond);
}
.filtres a[aria-current="page"] {
  background: var(--jaune);
  border-color: var(--jaune);
  color: var(--encre);
}
.filtres:has(+ .liste-news .cible-filtre:target) a[aria-current="page"] {
  background: transparent;
  border-color: var(--filet);
  color: var(--encre-2);
}

/* News · article */

.article__corps {
  font-size: 18.5px;
  line-height: 1.68;
  color: var(--encre-2);
}
.article__corps p { margin-bottom: 1.15em; }
.article__corps h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  color: var(--encre);
  margin: 40px 0 12px;
}
.article__corps h3 { margin: 32px 0 10px; color: var(--encre); }
.article__corps a { color: var(--vert-fonce); text-underline-offset: 3px; }
.article__corps ul { margin: 0 0 1.15em; padding-left: 22px; }
.article__corps li { list-style: disc; margin-bottom: 6px; }
.article__corps blockquote {
  margin: 32px 0;
  padding-left: 22px;
  border-left: 3px solid var(--jaune);
  font-size: 20px;
  color: var(--encre);
}
.article__image { margin: 0 0 clamp(28px, 4vw, 44px); }
.article__pied {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  justify-content: space-between;
  align-items: center;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--filet);
}

/* Vaud Boxe · sommaire et sections */

.sommaire {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 14px 0;
  margin: 0;
}
.sommaire a {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid var(--filet);
  border-radius: 2px;
  font-family: var(--etiquette);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre-2);
  background: var(--fond);
  transition: border-color var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.sommaire a:hover { border-color: var(--vert); color: var(--vert-fonce); }

.sommaire-barre {
  position: sticky;
  top: 112px;
  z-index: 40;
  background: var(--fond);
  border-bottom: 1px solid var(--filet);
}
@media (max-width: 1023px) {
  .sommaire-barre { position: static; }
}

.duo-texte {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 900px) {
  .duo-texte { grid-template-columns: minmax(0, 1fr); }
}

.personne__portrait {
  aspect-ratio: 1 / 1;
  background: var(--vert-clair);
  display: flex;
  align-items: center;
  justify-content: center;
}
.personne__initiales {
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(38px, 5vw, 56px);
  letter-spacing: -0.02em;
  color: var(--vert-fonce);
}
.personne__fonction {
  font-family: var(--etiquette);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vert);
  margin: 0;
}

.liste-simple li {
  padding: 12px 0;
  border-bottom: 1px solid var(--filet);
  color: var(--encre-2);
}
.liste-simple li:first-child { border-top: 1px solid var(--filet); }
.liste-simple strong { color: var(--encre); font-weight: 700; }

/* ---------- 18. Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .bouton:hover, .carte:hover, a.carte:hover { transform: none; }
}

/* ---------- 19. Compatibilité v2 (transitoire) ----------
   Quelques classes de la version 2 encore présentes dans des gabarits en
   cours de réécriture. À supprimer dès que plus aucune page ne les emploie ;
   aucune page neuve ne doit s'en servir. */

.titre-page { font-size: clamp(40px, 6vw, 84px); }
.corps { max-width: 72ch; color: var(--encre-2); }
.fil { font-family: var(--etiquette); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3); }
.lien-fleche { font-family: var(--etiquette); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--vert-fonce); text-decoration: none; }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gouttiere); }
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }
@media (max-width: 700px) {
  .grille-2, .grille-3 { grid-template-columns: minmax(0, 1fr); }
}
.section-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }

/* Défilement bloqué tant que le menu plein écran est ouvert (posé par main.js). */
.menu-ouvert, .menu-ouvert body { overflow: hidden; }