/* ============================================================
   AS VAL DE SIOULE — feuille de style principale
   Charte : vert pelouse + rouge (Broût-Vernet) / vert (Étroussat)
            / bleu (la Sioule) + navy du blason
   ============================================================ */

/* ---------- 1. Variables ---------- */
:root {
  /* Couleurs de marque */
  --rouge:        #e1332b;
  --rouge-fonce:  #b8241d;
  --vert:         #2f9e4f;
  --vert-fonce:   #217a3b;
  --bleu:         #2f6fb7;
  --bleu-clair:   #4aa3dd;
  --navy:         #22374f;

  /* Fonds */
  --pelouse:      #1e3b28;
  --pelouse-2:    #14291b;
  --creme:        #f7f4ec;
  --blanc:        #ffffff;

  /* Texte */
  --texte:        #1b2820;
  --texte-doux:   #5d6b62;
  --texte-clair:  #f2efe6;
  --texte-clair-doux: rgba(242, 239, 230, .74);

  /* Divers */
  --bordure:      #e4dfd2;
  --bordure-sombre: rgba(255, 255, 255, .14);
  --radius:       16px;
  --radius-sm:    10px;
  --ombre:        0 1px 2px rgba(27, 40, 32, .05), 0 8px 24px rgba(27, 40, 32, .07);
  --ombre-forte:  0 4px 12px rgba(27, 40, 32, .10), 0 20px 44px rgba(27, 40, 32, .14);
  --contenu:      1180px;
  --contenu-etroit: 760px;

  /* Typographie */
  --f-titre:  'Anton', 'Arial Narrow', Impact, sans-serif;
  --f-script: 'Caveat Brush', 'Bradley Hand', cursive;
  --f-corps:  'Barlow', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Les animations d'entrée décalent les blocs horizontalement :
     on rogne le débordement pour éviter une barre de défilement latérale.
     « clip » plutôt que « hidden » afin de ne pas casser l'en-tête collant. */
  overflow-x: clip;
  background: var(--creme);
  color: var(--texte);
  font-family: var(--f-corps);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--f-titre);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); }
h4 { font-size: 1.02rem; letter-spacing: .04em; }

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

::selection { background: var(--bleu-clair); color: #fff; }

:focus-visible {
  outline: 3px solid var(--bleu-clair);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 3. Utilitaires ---------- */
.contenu { width: min(100% - 2.5rem, var(--contenu)); margin-inline: auto; }
.contenu-etroit { width: min(100% - 2.5rem, var(--contenu-etroit)); margin-inline: auto; }

.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section--creme  { background: var(--creme); }
.section--blanc  { background: var(--blanc); }
.section--sombre { background: var(--pelouse); color: var(--texte-clair); position: relative; overflow: hidden; }
.section--sombre h2, .section--sombre h3 { color: #fff; }
.section--sombre p { color: var(--texte-clair-doux); }

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

/* Bandeau tricolore façon coup de pinceau */
.chevrons { display: flex; height: 7px; width: 100%; }
.chevrons span { flex: 1; }
.chevrons span:nth-child(1) { background: var(--rouge); }
.chevrons span:nth-child(2) { background: var(--vert); }
.chevrons span:nth-child(3) { background: var(--bleu); }

/* En-tête de section : suranom script + titre */
.entete-section { margin-bottom: clamp(2rem, 4vw, 3rem); }
.entete-section .script {
  font-family: var(--f-script);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--bleu-clair);
  line-height: 1;
  display: block;
  margin-bottom: .2em;
  transform: rotate(-2deg);
  transform-origin: left center;
}
.entete-section.centre .script { transform-origin: center; }
.entete-section h2 { margin-bottom: .35em; }
.entete-section .chapeau {
  color: var(--texte-doux);
  max-width: 62ch;
  font-size: 1.05rem;
}
.entete-section.centre .chapeau { margin-inline: auto; }
.section--sombre .entete-section .chapeau { color: var(--texte-clair-doux); }

/* Trait sous les titres */
.souligne::after {
  content: "";
  display: block;
  width: 74px; height: 5px;
  border-radius: 3px;
  margin-top: .55rem;
  background: linear-gradient(90deg, var(--rouge) 0 33%, var(--vert) 33% 66%, var(--bleu) 66% 100%);
}
.centre .souligne::after { margin-inline: auto; }

/* ---------- 4. Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .82em 1.6em;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--f-corps);
  font-weight: 700;
  font-size: .93rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  text-decoration: none !important;
}
.btn:hover { transform: translateY(-2px); }
.btn--primaire { background: var(--rouge); color: #fff; box-shadow: 0 6px 18px rgba(225, 51, 43, .3); }
.btn--primaire:hover { background: var(--rouge-fonce); }
.btn--bleu { background: var(--bleu); color: #fff; box-shadow: 0 6px 18px rgba(47, 111, 183, .3); }
.btn--bleu:hover { background: #255a95; }
.btn--fantome { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--fantome:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn--sombre { background: var(--pelouse); color: #fff; }
.btn--sombre:hover { background: var(--pelouse-2); }

.groupe-btn { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- 5. En-tête / navigation ---------- */
.site-entete {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bordure);
}
.site-entete__barre {
  display: flex; align-items: center; gap: 1rem;
  min-height: 74px;
}
.marque { display: flex; align-items: center; gap: .7rem; text-decoration: none !important; margin-right: auto; }
.marque img { width: 46px; height: 46px; }
.marque__txt { display: flex; flex-direction: column; line-height: 1; }
.marque__nom {
  font-family: var(--f-titre); font-size: 1.16rem; color: var(--navy);
  text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
}
.marque__sous {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--texte-doux); font-weight: 600; margin-top: .25em;
}

.nav-principale ul {
  list-style: none; display: flex; align-items: center; gap: .3rem; margin: 0; padding: 0;
}
.nav-principale a {
  display: block; padding: .55em .85em;
  color: var(--texte); font-weight: 600; font-size: .87rem;
  text-transform: uppercase; letter-spacing: .05em;
  border-radius: 8px; text-decoration: none !important; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.nav-principale a:hover { background: rgba(47, 111, 183, .09); color: var(--bleu); }
.nav-principale a[aria-current="page"] { color: var(--rouge); }
.nav-principale a[aria-current="page"]::after {
  content: ""; display: block; height: 3px; border-radius: 2px;
  background: var(--rouge); margin-top: .28em;
}
.nav-principale .nav-cta a {
  background: var(--rouge); color: #fff; margin-left: .5rem; border-radius: 999px; padding: .6em 1.15em;
}
.nav-principale .nav-cta a:hover { background: var(--rouge-fonce); color: #fff; }
.nav-principale .nav-cta a::after { display: none; }

.burger {
  display: none; width: 46px; height: 46px;
  border: 1px solid var(--bordure); background: #fff; border-radius: 10px;
  cursor: pointer; padding: 0; align-items: center; justify-content: center;
}
.burger span { position: relative; display: block; width: 20px; height: 2px; background: var(--texte); border-radius: 2px; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--texte); border-radius: 2px;
  transition: transform .2s ease, top .2s ease;
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1150px) {
  .burger { display: flex; }
  .nav-principale {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--bordure);
    box-shadow: var(--ombre-forte);
    display: none; padding: .8rem 1.25rem 1.4rem;
  }
  .nav-principale.ouvert { display: block; }
  .nav-principale ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-principale a { padding: .85em .6em; font-size: .95rem; border-radius: 0; border-bottom: 1px solid var(--bordure); }
  .nav-principale a[aria-current="page"]::after { display: none; }
  .nav-principale .nav-cta a { margin: .9rem 0 0; text-align: center; border-bottom: 0; }
}

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  background: var(--pelouse-2);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero__fond {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .32;
  filter: saturate(1.1);
  z-index: -2;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(1100px 520px at 78% 8%, rgba(74, 163, 221, .22), transparent 62%),
    linear-gradient(180deg, rgba(20, 41, 27, .72) 0%, rgba(20, 41, 27, .88) 68%, rgba(20, 41, 27, .97) 100%);
}
.hero__contenu {
  padding: clamp(4rem, 11vw, 8rem) 0 clamp(3.5rem, 8vw, 6rem);
  max-width: 780px;
}
.hero__script {
  font-family: var(--f-script);
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  color: var(--bleu-clair);
  display: block; line-height: 1;
  transform: rotate(-3deg); transform-origin: left center;
  margin-bottom: .35em;
}
.hero h1 { color: #fff; margin-bottom: .35em; text-shadow: 0 4px 30px rgba(0,0,0,.35); }
.hero h1 em { font-style: normal; color: var(--rouge); }
.hero__chapeau {
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  color: rgba(255,255,255,.86);
  max-width: 56ch;
  margin-bottom: 2rem;
}
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 1.4rem 2.6rem;
  margin-top: 3rem; padding-top: 2rem;
  border-top: 1px solid var(--bordure-sombre);
}
.hero__meta div strong {
  display: block; font-family: var(--f-titre); font-size: 2rem; color: #fff; line-height: 1;
}
.hero__meta div span {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.6); font-weight: 600;
}

/* Hero court pour les pages intérieures */
.hero--page .hero__contenu { padding: clamp(3rem, 7vw, 4.6rem) 0 clamp(2.6rem, 5vw, 3.6rem); }
.hero--page h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
.hero--page .hero__chapeau { margin-bottom: 0; }

/* Fil d'Ariane */
.fil { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-bottom: 1rem; }
.fil a { color: rgba(255,255,255,.66); }
.fil span { color: rgba(255,255,255,.4); margin: 0 .4em; }
.fil strong { color: var(--bleu-clair); font-weight: 700; }

/* ---------- 7. Cartes génériques ---------- */
.grille { display: grid; gap: 1.4rem; }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 1.7rem;
  box-shadow: var(--ombre);
  transition: transform .18s ease, box-shadow .18s ease;
}
.carte--lien:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.carte h3 { margin-bottom: .5rem; }
.carte p { color: var(--texte-doux); font-size: .97rem; }

.carte__pastille {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  margin-bottom: 1rem;
  font-size: 1.35rem;
}
.pastille--rouge { background: rgba(225,51,43,.12); }
.pastille--vert  { background: rgba(47,158,79,.13); }
.pastille--bleu  { background: rgba(47,111,183,.12); }

.section--sombre .carte {
  background: rgba(255,255,255,.05);
  border-color: var(--bordure-sombre);
  box-shadow: none;
}
.section--sombre .carte p { color: var(--texte-clair-doux); }

/* Chiffres clés */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.chiffre {
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--radius); padding: 1.5rem 1.2rem; text-align: center;
}
.chiffre strong {
  display: block; font-family: var(--f-titre); font-size: 2.6rem; line-height: 1; color: var(--navy);
}
.chiffre span {
  display: block; margin-top: .5em; font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-doux); font-weight: 600;
}
.chiffre:nth-child(4n+1) strong { color: var(--rouge); }
.chiffre:nth-child(4n+2) strong { color: var(--vert); }
.chiffre:nth-child(4n+3) strong { color: var(--bleu); }

/* ---------- 8. Cartes de match ---------- */
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; }
.filtre {
  border: 1px solid var(--bordure); background: #fff; color: var(--texte);
  padding: .5em 1.1em; border-radius: 999px; cursor: pointer;
  font-family: var(--f-corps); font-weight: 600; font-size: .84rem;
  letter-spacing: .04em; text-transform: uppercase;
  transition: all .15s ease;
}
.filtre:hover { border-color: var(--bleu); color: var(--bleu); }
.filtre[aria-pressed="true"] { background: var(--pelouse); border-color: var(--pelouse); color: #fff; }

.matchs { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

.match {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--ombre);
  display: flex; flex-direction: column;
}
.match--coupe { border-color: rgba(47,111,183,.45); box-shadow: 0 0 0 3px rgba(74,163,221,.12), var(--ombre); }
.match__date {
  padding: .7rem 1rem .55rem;
  text-align: center;
  font-weight: 700; font-size: .84rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bleu); background: rgba(47,111,183,.07);
  border-bottom: 1px solid var(--bordure);
}
.match--coupe .match__date { color: var(--rouge); background: rgba(225,51,43,.07); }
.match__compet {
  text-align: center; font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--texte-doux); font-weight: 600; padding: .6rem 1rem .1rem;
}
.match__compet b { color: var(--texte); font-weight: 700; }
.match__duel {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .7rem;
  padding: .7rem 1rem 1.1rem;
}
.match__equipe { font-weight: 700; font-size: .93rem; line-height: 1.25; }
.match__equipe--dom { text-align: right; }
.match__equipe--ext { text-align: left; }
.match__equipe.est-asvs { color: var(--navy); }
.match__equipe.est-asvs::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--rouge); margin-right: .4em; vertical-align: middle;
}
.match__heure {
  background: var(--pelouse); color: #fff;
  font-family: var(--f-titre); font-size: 1.12rem; letter-spacing: .03em;
  padding: .42em .8em; border-radius: 8px; white-space: nowrap;
}
.match__lieu {
  margin-top: auto;
  padding: .55rem 1rem; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700; text-align: center; border-top: 1px solid var(--bordure);
}
.match__lieu--dom { color: var(--vert-fonce); background: rgba(47,158,79,.08); }
.match__lieu--ext { color: var(--texte-doux); background: rgba(27,40,32,.035); }

/* Prochains matchs en bandeau sombre */
.section--sombre .match { background: rgba(255,255,255,.06); border-color: var(--bordure-sombre); box-shadow: none; }
.section--sombre .match__date { background: rgba(74,163,221,.14); color: var(--bleu-clair); border-color: var(--bordure-sombre); }
.section--sombre .match--coupe .match__date { background: rgba(225,51,43,.16); color: #ff8b84; }
.section--sombre .match__compet { color: rgba(255,255,255,.55); }
.section--sombre .match__compet b { color: rgba(255,255,255,.85); }
.section--sombre .match__equipe { color: rgba(255,255,255,.85); }
.section--sombre .match__equipe.est-asvs { color: #fff; }
.section--sombre .match__heure { background: var(--rouge); }
.section--sombre .match__lieu { border-color: var(--bordure-sombre); }
.section--sombre .match__lieu--dom { color: #7ddb9b; background: rgba(47,158,79,.14); }
.section--sombre .match__lieu--ext { color: rgba(255,255,255,.5); background: rgba(255,255,255,.04); }

.vide {
  grid-column: 1 / -1; text-align: center; padding: 2.5rem 1rem;
  color: var(--texte-doux); border: 2px dashed var(--bordure); border-radius: var(--radius);
}

/* ---------- 9. Actualités ---------- */
.actus { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.actu {
  background: #fff; border: 1px solid var(--bordure); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--ombre); display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.actu:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.actu__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--pelouse); }
.actu__img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.actu__corps { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.actu__date {
  font-size: .74rem; letter-spacing: .11em; text-transform: uppercase; font-weight: 700;
  color: var(--bleu); margin-bottom: .5rem;
}
.actu h3 { font-size: 1.18rem; margin-bottom: .55rem; }
.actu p { color: var(--texte-doux); font-size: .96rem; }
.actu__texte { flex: 1; }
.actu__texte p { margin-bottom: .8em; }
.actu__texte p:last-child { margin-bottom: 0; }
.etiquette {
  display: inline-block; padding: .28em .8em; border-radius: 999px;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  margin-bottom: .8rem;
}
.etiq--sportif  { background: rgba(47,158,79,.14);  color: var(--vert-fonce); }
.etiq--club     { background: rgba(47,111,183,.13); color: var(--bleu); }
.etiq--event    { background: rgba(225,51,43,.12);  color: var(--rouge-fonce); }

/* ---------- 10. Équipes ---------- */
.equipe {
  display: grid; grid-template-columns: 1fr; gap: 0;
  background: #fff; border: 1px solid var(--bordure); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--ombre);
}
.equipe__bandeau {
  padding: 1.5rem 1.8rem; color: #fff;
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
}
.equipe__bandeau h3 { color: #fff; margin: 0; }
.equipe__niveau {
  font-family: var(--f-titre); font-size: 1.1rem;
  background: rgba(255,255,255,.2); padding: .18em .7em; border-radius: 7px;
}
.bandeau--a { background: linear-gradient(100deg, var(--rouge) 0%, var(--rouge-fonce) 100%); }
.bandeau--b { background: linear-gradient(100deg, var(--bleu) 0%, #24548c 100%); }
.bandeau--jeunes { background: linear-gradient(100deg, var(--vert) 0%, var(--vert-fonce) 100%); }
.equipe__photo { margin: 0; }
.equipe__photo img {
  width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: center 42%;
  background: var(--pelouse);
}
.equipe__photo figcaption {
  padding: .7rem 1.8rem;
  font-size: .84rem; color: var(--texte-doux);
  background: rgba(27, 40, 32, .035);
  border-bottom: 1px solid var(--bordure);
}
.equipe__corps { padding: 1.6rem 1.8rem 1.9rem; }
.equipe__infos { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .55rem; }
.equipe__infos li { display: flex; gap: .8rem; font-size: .96rem; }
.equipe__infos b {
  min-width: 118px; font-weight: 600; color: var(--texte-doux);
  font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; padding-top: .28em;
}

/* ---------- 11. Trombinoscope / organisation ---------- */
.personnes { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.personne {
  background: #fff; border: 1px solid var(--bordure); border-radius: var(--radius-sm);
  padding: 1rem 1.15rem; display: flex; align-items: center; gap: .9rem;
}
.personne__init {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-titre); font-size: .95rem; color: #fff; letter-spacing: .02em;
  background: var(--navy);
}
.personne:nth-child(3n+1) .personne__init { background: var(--rouge); }
.personne:nth-child(3n+2) .personne__init { background: var(--vert); }
.personne:nth-child(3n+3) .personne__init { background: var(--bleu); }
.personne__nom { font-weight: 700; font-size: .97rem; line-height: 1.25; }
.personne__role { font-size: .8rem; color: var(--texte-doux); }

/* Liste simple à puces colorées */
.liste-check { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.liste-check li { position: relative; padding-left: 1.9rem; }
.liste-check li::before {
  content: "›"; position: absolute; left: 0; top: -.1em;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--vert); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: .95rem;
}

/* ---------- 12. Partenaires ---------- */
.niveau-titre {
  display: flex; align-items: center; gap: .9rem; margin: 2.6rem 0 1.2rem;
}
.niveau-titre h3 { margin: 0; }
.niveau-titre::after { content: ""; flex: 1; height: 2px; background: var(--bordure); border-radius: 2px; }
.medaille {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-size: .78rem; font-weight: 800; color: #46340b;
}
.medaille--or     { background: linear-gradient(150deg, #f7d774, #d9a520); }
.medaille--argent { background: linear-gradient(150deg, #e4e8ec, #a9b2bb); color: #33404b; }
.medaille--bronze { background: linear-gradient(150deg, #e0b088, #a9713f); color: #4a2a12; }

.partenaires { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.partenaire {
  background: #fff; border: 1px solid var(--bordure); border-radius: var(--radius-sm);
  padding: 1.4rem 1.3rem; display: flex; flex-direction: column; gap: .35rem;
  border-left: 5px solid var(--bordure);
}
.partenaire--or     { border-left-color: #d9a520; }
.partenaire--argent { border-left-color: #a9b2bb; }
.partenaire--bronze { border-left-color: #a9713f; }
.partenaire b { font-size: 1rem; line-height: 1.3; }
.partenaire span { font-size: .84rem; color: var(--texte-doux); }

.packs { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.pack {
  background: #fff; border: 1px solid var(--bordure); border-radius: var(--radius);
  padding: 1.7rem; box-shadow: var(--ombre); display: flex; flex-direction: column;
}
.pack h4 { font-family: var(--f-titre); font-size: 1.3rem; margin-bottom: .3rem; }
.pack__sous { font-size: .82rem; color: var(--texte-doux); margin-bottom: 1.1rem; }
.pack ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; font-size: .94rem; }
.pack li::before { content: "✔"; color: var(--vert); font-weight: 700; margin-right: .55em; }

/* Encadré d'information */
.encadre {
  background: rgba(47,111,183,.07);
  border: 1px solid rgba(47,111,183,.2);
  border-left: 5px solid var(--bleu);
  border-radius: var(--radius-sm);
  padding: 1.3rem 1.5rem;
}
.encadre--vert { background: rgba(47,158,79,.08); border-color: rgba(47,158,79,.22); border-left-color: var(--vert); }
.encadre--rouge { background: rgba(225,51,43,.07); border-color: rgba(225,51,43,.2); border-left-color: var(--rouge); }
.encadre h4 { margin-bottom: .4rem; font-family: var(--f-corps); font-weight: 700; text-transform: none; font-size: 1.05rem; letter-spacing: 0; }
.encadre p { font-size: .96rem; color: var(--texte-doux); }

/* ---------- 13. Bloc en deux colonnes ---------- */
.duo {
  display: grid; gap: clamp(2rem, 5vw, 3.6rem);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
}
.duo--large-gauche { grid-template-columns: 1.15fr .85fr; }
@media (max-width: 860px) { .duo--large-gauche { grid-template-columns: 1fr; } }
.duo img { border-radius: var(--radius); box-shadow: var(--ombre-forte); }

/* Frise chronologique */
.frise { list-style: none; margin: 0; padding: 0 0 0 1.9rem; border-left: 3px solid var(--bordure); display: grid; gap: 2rem; }
.frise li { position: relative; }
.frise li::before {
  content: ""; position: absolute; left: calc(-1.9rem - 9px); top: .45em;
  width: 15px; height: 15px; border-radius: 50%; background: var(--bleu);
  border: 3px solid var(--creme);
}
.frise li:nth-child(3n+1)::before { background: var(--rouge); }
.frise li:nth-child(3n+2)::before { background: var(--vert); }
.frise__an {
  font-family: var(--f-titre); font-size: 1.5rem; color: var(--navy); line-height: 1; display: block; margin-bottom: .3rem;
}
.section--sombre .frise { border-color: var(--bordure-sombre); }
.section--sombre .frise li::before { border-color: var(--pelouse); }
.section--sombre .frise__an { color: #fff; }

/* ---------- 14. Galerie ---------- */
.galerie { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.galerie figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--bordure); box-shadow: var(--ombre); }
.galerie img { width: 100%; }
.galerie figcaption { padding: .8rem 1rem; font-size: .86rem; color: var(--texte-doux); }

/* ---------- 15. Bandeau d'appel à l'action ---------- */
.cta-bande {
  background: linear-gradient(105deg, var(--rouge) 0%, #c62a23 45%, var(--navy) 100%);
  color: #fff; border-radius: var(--radius); padding: clamp(2rem, 5vw, 3.2rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem;
}
.cta-bande h2 { color: #fff; margin: 0 0 .3em; }
.cta-bande p { color: rgba(255,255,255,.85); margin: 0; max-width: 52ch; }

/* ---------- 16. Tableaux ---------- */
.table-enveloppe { overflow-x: auto; border: 1px solid var(--bordure); border-radius: var(--radius); background: #fff; }
table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: .95rem; }
th, td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--bordure); }
th {
  background: rgba(27,40,32,.035); font-size: .74rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--texte-doux); font-weight: 700;
}
tbody tr:last-child td { border-bottom: 0; }

/* ---------- 17. Pied de page ---------- */
.site-pied { background: var(--pelouse-2); color: rgba(255,255,255,.72); padding: clamp(3rem, 6vw, 4.5rem) 0 0; }
.site-pied a { color: rgba(255,255,255,.72); }
.site-pied a:hover { color: #fff; }
.pied__grille { display: grid; gap: 2.4rem; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
@media (max-width: 900px) { .pied__grille { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.pied__marque { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.pied__marque img { width: 54px; }
.pied__marque strong { font-family: var(--f-titre); font-size: 1.25rem; color: #fff; text-transform: uppercase; }
.site-pied h4 { color: #fff; font-family: var(--f-corps); font-weight: 700; font-size: .8rem; letter-spacing: .13em; margin-bottom: 1rem; }
.site-pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; font-size: .94rem; }
.pied__bas {
  margin-top: 3rem; border-top: 1px solid var(--bordure-sombre); padding: 1.4rem 0 1.8rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-size: .84rem; color: rgba(255,255,255,.5);
}
.reseaux { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.reseaux a {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .62em 1.1em; border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid var(--bordure-sombre);
  color: #fff; font-weight: 700; font-size: .8rem;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  text-decoration: none !important;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.reseaux a:hover { background: #1877f2; border-color: #1877f2; color: #fff; transform: translateY(-2px); }
.reseaux a.reseaux--boutique:hover { background: var(--rouge); border-color: var(--rouge); }
.reseaux svg { width: 17px; height: 17px; flex: 0 0 17px; fill: currentColor; }

/* ---------- 17 bis. Médias : vidéos et documents ---------- */
.media-video, .actu__video, .equipe__video { background: var(--pelouse-2); }
.media-video video, .actu__video video, .equipe__video video {
  display: block; width: 100%; height: auto; background: #000;
}
.actu__video video { aspect-ratio: 4 / 3; object-fit: cover; }
.equipe__video video { aspect-ratio: 21 / 9; object-fit: cover; }
.galerie video { display: block; width: 100%; background: #000; }

.carte__img {
  width: calc(100% + 3.4rem); margin: -1.7rem -1.7rem 1.2rem;
  max-width: none; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Lien vers un document joint (PDF…) */
.doc-lien {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .6em 1em; border-radius: 999px;
  background: rgba(47, 111, 183, .09); border: 1px solid rgba(47, 111, 183, .22);
  color: var(--bleu); font-weight: 700; font-size: .86rem;
  text-decoration: none !important;
  transition: background .15s ease;
}
.doc-lien:hover { background: rgba(47, 111, 183, .17); }
.doc-lien__icone { font-size: 1.05rem; }

/* Bibliothèque de documents */
.documents { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.document {
  display: flex; align-items: center; gap: 1rem;
  background: #fff; border: 1px solid var(--bordure); border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem; text-decoration: none !important; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.document:hover { transform: translateY(-2px); box-shadow: var(--ombre); border-color: var(--bleu); }
.document__icone {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 10px;
  display: grid; place-items: center; font-size: 1.25rem;
  background: rgba(225, 51, 43, .1);
}
.document__txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.document__txt b { font-size: .98rem; line-height: 1.3; }
.document__txt span { font-size: .84rem; color: var(--texte-doux); }
.document__fleche { margin-left: auto; color: var(--bleu); font-weight: 700; }

/* Média en pleine largeur dans une carte */
.carte__media {
  margin: -1.7rem -1.7rem 1.2rem;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}

/* Coordonnées d'un partenaire */
.partenaire__coord {
  display: flex; flex-wrap: wrap; gap: .35rem .9rem;
  margin-top: .7rem; padding-top: .7rem;
  border-top: 1px dashed var(--bordure);
  font-size: .82rem;
}
.partenaire__coord a { color: var(--bleu); text-decoration: none; }
.partenaire__coord a:hover { text-decoration: underline; }
.partenaire__ville { color: var(--texte-doux); }

/* Jetons (arbitres, étiquettes courtes) */
.jetons { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.jeton {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .5em 1.05em; border-radius: 999px;
  background: rgba(47, 111, 183, .1); border: 1px solid rgba(47, 111, 183, .24);
  color: var(--bleu); font-weight: 700; font-size: .88rem;
}
.section--sombre .jeton {
  background: rgba(255, 255, 255, .09); border-color: var(--bordure-sombre); color: #fff;
}

/* Le trait tricolore se déploie quand le titre arrive à l'écran */
.entete-section.vu .souligne::after { transform: scaleX(1); }

/* Logo de partenaire */
.partenaire__logo {
  max-height: 46px; width: auto; max-width: 100%;
  object-fit: contain; margin-bottom: .6rem;
}
a.partenaire { color: inherit; text-decoration: none !important; transition: transform .15s ease, box-shadow .15s ease; }
a.partenaire:hover { transform: translateY(-2px); box-shadow: var(--ombre); }

/* ---------- 17 ter. Carrousel de photos ---------- */
.carrousel { position: relative; overflow: hidden; background: var(--pelouse-2); }
.carrousel__piste {
  display: flex; width: 100%;
  transition: transform .65s cubic-bezier(.35, .85, .35, 1);
  will-change: transform;
}
.carrousel__vue { flex: 0 0 100%; position: relative; }
.carrousel__vue img, .carrousel__vue video {
  display: block; width: 100%; height: 100%; object-fit: cover; background: #000;
}
.carrousel--4-3 .carrousel__vue img, .carrousel--4-3 .carrousel__vue video { aspect-ratio: 4 / 3; }
.carrousel--21-9 .carrousel__vue img, .carrousel--21-9 .carrousel__vue video { aspect-ratio: 21 / 9; }
.carrousel--16-9 .carrousel__vue img, .carrousel--16-9 .carrousel__vue video { aspect-ratio: 16 / 9; }

.carrousel__legende {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.4rem .95rem .8rem;
  font-size: .84rem; color: #fff; line-height: 1.4;
  background: linear-gradient(to top, rgba(10, 22, 14, .82), transparent);
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}
.carrousel:hover .carrousel__legende,
.carrousel:focus-within .carrousel__legende { opacity: 1; transform: none; }

.carrousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, .88); border: 0; cursor: pointer;
  display: grid; place-items: center; font-size: 1.1rem; color: var(--pelouse);
  opacity: 0; transition: opacity .25s ease, background .15s ease;
  z-index: 2;
}
.carrousel:hover .carrousel__nav,
.carrousel:focus-within .carrousel__nav { opacity: 1; }
.carrousel__nav:hover { background: #fff; }
.carrousel__nav--prec { left: .7rem; }
.carrousel__nav--suiv { right: .7rem; }

.carrousel__points {
  position: absolute; left: 0; right: 0; bottom: .7rem; z-index: 2;
  display: flex; justify-content: center; gap: .4rem;
}
.carrousel__point {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .45);
  transition: background .2s ease, width .25s ease;
}
.carrousel__point[aria-current="true"] { background: #fff; width: 22px; border-radius: 5px; }

.carrousel__compteur {
  position: absolute; top: .7rem; right: .7rem; z-index: 2;
  background: rgba(10, 22, 14, .62); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  padding: .25em .6em; border-radius: 999px;
}

/* ---- Pages de PDF affichées dans un diaporama ----
   Un document se lit en entier : on le contient au lieu de le rogner,
   et on garde le fond blanc de la page. */
.carrousel--doc { background: #e9e6dd; }
.carrousel--doc .carrousel__vue canvas {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1.414; object-fit: contain;
  background: #fff;
}
.carrousel--doc .carrousel__legende { opacity: 1; transform: none; }

/* L'emplacement en attente, le temps que le document se charge */
.carrousel__vue--attente {
  min-height: 220px; aspect-ratio: 1 / 1.414;
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 12px, transparent 12px 24px),
    var(--pelouse-2);
}
.carrousel__doc-secours { display: grid; place-items: center; height: 100%; padding: 1.4rem; }

.carrousel__telecharger {
  position: absolute; left: .7rem; top: .7rem; z-index: 2;
  background: rgba(10, 22, 14, .72); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  padding: .4em .8em; border-radius: 999px; text-decoration: none;
  transition: background .15s ease;
}
.carrousel__telecharger:hover { background: var(--rouge); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .carrousel__piste { transition: none; }
  .carrousel__legende { opacity: 1; transform: none; }
}

/* ---------- 17 quater. Animations ---------- */
/* Variantes d'apparition, plus vivantes que le simple fondu */
.reveal-gauche { opacity: 0; transform: translateX(-28px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal-droite { opacity: 0; transform: translateX(28px);  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal-zoom   { opacity: 0; transform: scale(.94);        transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal-gauche.vu, .reveal-droite.vu, .reveal-zoom.vu { opacity: 1; transform: none; }

/* Décalage en cascade pour les grilles */
.cascade > *          { transition-delay: 0ms; }
.cascade > *:nth-child(2) { transition-delay: 80ms; }
.cascade > *:nth-child(3) { transition-delay: 160ms; }
.cascade > *:nth-child(4) { transition-delay: 240ms; }
.cascade > *:nth-child(5) { transition-delay: 320ms; }
.cascade > *:nth-child(6) { transition-delay: 400ms; }

/* Soulignement animé des titres de section */
.souligne::after { transform-origin: left; transform: scaleX(0); transition: transform .7s cubic-bezier(.2,.8,.3,1) .1s; }
.centre .souligne::after { transform-origin: center; }
.vu .souligne::after, .souligne.vu::after, section.vu .souligne::after { transform: scaleX(1); }

/* Le blason du hero respire doucement */
@keyframes flotter { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.flotte { animation: flotter 6s ease-in-out infinite; }

/* Cartes : léger soulèvement au survol, déjà présent, renforcé ici */
.carte, .actu, .document, .partenaire { will-change: transform; }

/* Bandeau de chiffres animés */
.chiffre strong { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .reveal-gauche, .reveal-droite, .reveal-zoom { opacity: 1; transform: none; transition: none; }
  .souligne::after { transform: none; transition: none; }
  .flotte { animation: none; }
}

/* ---------- 17 quinquies. Historique ---------- */
.blason-grille { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.blason-item {
  background: #fff; border: 1px solid var(--bordure); border-radius: var(--radius);
  padding: 1.4rem 1.5rem; border-top: 5px solid var(--bordure);
}
.blason-item--rouge { border-top-color: var(--rouge); }
.blason-item--vert  { border-top-color: var(--vert); }
.blason-item--bleu  { border-top-color: var(--bleu); }
.blason-item--navy  { border-top-color: var(--navy); }
.blason-item h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.blason-item p { font-size: .93rem; color: var(--texte-doux); }

.chrono { position: relative; padding-left: 0; list-style: none; margin: 0; }
.chrono::before {
  content: ""; position: absolute; left: 22px; top: 8px; bottom: 8px; width: 3px;
  background: linear-gradient(180deg, var(--rouge), var(--vert), var(--bleu));
  border-radius: 2px;
}
.chrono__item { position: relative; padding: 0 0 2.6rem 4rem; }
.chrono__item:last-child { padding-bottom: 0; }
.chrono__pastille {
  position: absolute; left: 8px; top: 2px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bleu); color: #fff;
  display: grid; place-items: center; font-size: .95rem;
  box-shadow: 0 0 0 5px var(--creme);
}
.chrono__item:nth-child(3n+1) .chrono__pastille { background: var(--rouge); }
.chrono__item:nth-child(3n+2) .chrono__pastille { background: var(--vert); }
.chrono__annee {
  display: inline-block; font-family: var(--f-titre); font-size: 1.5rem;
  color: var(--navy); line-height: 1; margin-bottom: .2rem;
}
.chrono__item h3 { font-size: 1.2rem; margin: .1rem 0 .5rem; }
/* Sur fond sombre, l'année et l'anneau des pastilles doivent suivre */
.section--sombre .chrono__annee { color: var(--bleu-clair); }
.section--sombre .chrono__pastille { box-shadow: 0 0 0 5px var(--pelouse); }
.chrono__medias { margin-top: 1.1rem; border-radius: var(--radius); overflow: hidden; box-shadow: var(--ombre); }
@media (max-width: 640px) {
  .chrono::before { left: 14px; }
  .chrono__item { padding-left: 3rem; }
  .chrono__pastille { left: 0; width: 28px; height: 28px; }
}

/* ---------- 17 quater. Décor de campagne vivant ----------
   Un paysage fixe derrière le site : les deux églises, la Sioule,
   les vaches, les cages de foot. Les sections sont légèrement
   translucides pour le laisser voir sans gêner la lecture. */

.decor {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: min(56vh, 540px);
  z-index: -1;
  pointer-events: none;
  opacity: 1;
}
.decor svg { width: 100%; height: 100%; display: block; }

/* Ciel : nuages et oiseaux qui dérivent */
.decor__nuages { animation: derive 90s linear infinite; }
.decor__nuages--lent { animation: derive 150s linear infinite; }
@keyframes derive {
  from { transform: translateX(-280px); }
  to   { transform: translateX(1880px); }
}
.decor__oiseaux { animation: survol 42s linear infinite; }
@keyframes survol {
  0%   { transform: translate(-160px, 20px); }
  50%  { transform: translate(760px, -14px); }
  100% { transform: translate(1740px, 16px); }
}

/* Les herbes et les arbres respirent */
.decor__herbe { transform-origin: bottom center; animation: brise 7s ease-in-out infinite; }
.decor__arbre { transform-origin: bottom center; animation: brise 9s ease-in-out infinite; }
@keyframes brise {
  0%, 100% { transform: skewX(0deg); }
  50%      { transform: skewX(1.4deg); }
}

/* La queue de la vache */
.decor__queue { transform-origin: top center; animation: queue 4s ease-in-out infinite; }
@keyframes queue {
  0%, 70%, 100% { transform: rotate(0deg); }
  80%           { transform: rotate(14deg); }
  90%           { transform: rotate(-10deg); }
}

/* ---- Le ballon ---- */
.ballon {
  position: fixed;
  left: 0; top: 0;
  width: 34px; height: 34px;
  z-index: 2;
  pointer-events: none;
  opacity: .92;
  will-change: transform;
  filter: drop-shadow(0 4px 6px rgba(27, 40, 32, .3));
}
.ballon svg { width: 100%; height: 100%; display: block; }

/* ---- Les deux joueurs ---- */
.joueur {
  position: fixed;
  bottom: 58px;
  width: 96px; height: 136px;
  /* Les joueurs font partie du décor : ils passent derrière le contenu, comme
     les clochers et les vaches. Sur tablette et téléphone les marges latérales
     disparaissent, et sans cela ils se poseraient en travers des textes.
     Seul le ballon reste au premier plan : c'est lui qui traverse la page. */
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
  filter: drop-shadow(0 5px 7px rgba(27, 40, 32, .22));
}
.joueur svg { width: 100%; height: 100%; display: block; }
.joueur--frappe   { left: 1.5%; }
.joueur--receveur { right: 1.5%; }

/* Le frappeur arme sa jambe, le receveur amortit */
.joueur__frappe   { transform-origin: 64px 106px; animation: frappe 3.4s ease-in-out infinite; }
@keyframes frappe {
  0%, 55%, 100% { transform: rotate(0deg); }
  35%           { transform: rotate(-34deg); }
  45%           { transform: rotate(12deg); }
}
.joueur__controle { transform-origin: 76px 106px; animation: controle 3.4s ease-in-out infinite; }
@keyframes controle {
  0%, 60%, 100% { transform: rotate(0deg); }
  30%           { transform: rotate(10deg); }
  45%           { transform: rotate(-6deg); }
}

/* Les sections laissent voir le décor */
.section--creme  { background: rgba(247, 244, 236, .80); }
.section--blanc  { background: rgba(255, 255, 255, .82); }
.section--sombre { background: rgba(30, 59, 40, .90); }

/* Les blocs de texte dense restent parfaitement lisibles */
.carte, .match, .actu, .equipe, .personne, .partenaire, .affiche,
.document, .pack, .chiffre, .table-enveloppe, .encadre, .galerie figure {
  backdrop-filter: saturate(1.06);
}

/* Tablette : décor et ballon conservés, échelle réduite */
@media (max-width: 1000px) {
  .decor { height: min(48vh, 420px); }
  .joueur { width: 78px; height: 110px; bottom: 52px; }
}

/* Téléphone : tout reste visible, en plus discret */
@media (max-width: 700px) {
  .decor { height: 40vh; opacity: .92; }
  .ballon { width: 26px; height: 26px; }
  .joueur { width: 60px; height: 86px; bottom: 40px; }
  .section--creme  { background: rgba(247, 244, 236, .86); }
  .section--blanc  { background: rgba(255, 255, 255, .88); }
}

@media (prefers-reduced-motion: reduce) {
  .decor__nuages, .decor__nuages--lent, .decor__oiseaux,
  .decor__herbe, .decor__arbre, .decor__queue,
  .joueur__frappe, .joueur__controle { animation: none; }
  .ballon, .joueur { display: none; }
}

@media print {
  .decor, .ballon, .joueur { display: none !important; }
}

/* ---------- 17 quinquies. Affiches officielles ---------- */
.affiches {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.affiche {
  margin: 0; background: #fff;
  border: 1px solid var(--bordure); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--ombre);
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.affiche:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); }
.affiche__vue { display: block; background: var(--pelouse); }
.affiche__vue img { width: 100%; display: block; }
.affiche__pied {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem 1.3rem; border-top: 1px solid var(--bordure);
}
.affiche__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.affiche__txt b { font-size: .98rem; line-height: 1.3; }
.affiche__txt span { font-size: .84rem; color: var(--texte-doux); }
.affiche__btn { padding: .6em 1.1em; font-size: .8rem; }

/* ---------- 18. Retour en haut ---------- */
.haut {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--pelouse); color: #fff; border: 0; cursor: pointer;
  display: grid; place-items: center; font-size: 1.1rem;
  box-shadow: var(--ombre-forte);
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
}
.haut.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ---------- 19. Apparition au défilement ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .btn:hover, .actu:hover, .carte--lien:hover { transform: none; }
}

/* ---------- 20. Impression ---------- */
@media print {
  .site-entete, .site-pied, .haut, .filtres, .groupe-btn { display: none !important; }
  body { background: #fff; font-size: 12px; }
  .hero { background: #fff; color: #000; }
  .hero__fond, .hero::after { display: none; }
  .hero h1, .hero__chapeau { color: #000; }
}