@charset "UTF-8";
/* ==========================================================================
   FC LYS ANNECY — FEUILLE DE STYLE UNIQUE
   --------------------------------------------------------------------------
   Sommaire
     1.  Variables de la charte (couleurs, espacements)
     2.  Base et réinitialisation
     3.  Mise en page : sections et conteneurs
     4.  Titres et textes
     5.  Boutons
     6.  En-tête et navigation (dont menu burger)
     7.  Héros (accueil et pages intérieures)
     8.  Cartes et tuiles
     9.  Tableaux de données (calendrier, classement, activités)
     10. Formulaires et modules intégrés
     11. Pied de page
     12. Bandeau cookies
     13. Adaptation mobile et tablette
     14. Accessibilité et impression
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES DE LA CHARTE
   Ces couleurs ont été validées par le comité : ne les modifiez qu'avec son
   accord. Changer une valeur ici la change partout sur le site.
   ========================================================================== */
:root {
  /* Couleurs principales */
  --vert-nuit: #0E2616;
  --vert-club: #1F4D2B;
  --vert-clair: #2E7D46;
  --or: #D4A937;
  --creme: #F6F4EE;
  --blanc: #FFFFFF;
  --encre: #12220F;

  /* Textes */
  --texte: #3F433C;
  --texte-doux: #4B4F47;
  --texte-faible: #5E6158;
  --gris-note: #7C8079;

  /* Traits et champs */
  --bordure: #E7E6DF;
  --filet: #EDECE5;
  --champ: #DDDCD4;
  --placeholder: #9A9E95;

  /* Textes sur fond sombre */
  --sur-sombre: #DCE3DA;
  --sur-sombre-doux: #C3CBC2;
  --sur-sombre-faible: #8A9A8C;
  --or-pale: #C7B37A;

  /* Encadré d'annotation (information de suivi) */
  --note-fond: #FBF6E7;
  --note-bord: #D4A937;
  --note-texte: #7A6A33;

  /* Marques tierces */
  --facebook: #1877F2;
  --youtube: #C4302B;
  --paypal: #FFC439;

  /* Formules partenaires */
  --bronze: #96622C;
  --argent: #6B7079;
  --gold: #C39A22;

  /* Gouttière latérale : 20 px sur mobile, 48 px sur grand écran */
  --gouttiere: clamp(1.25rem, 3.33vw, 3rem);

  /* Espacement vertical des sections : 32 px sur mobile, 72 px sur desktop */
  --section-y: clamp(2rem, 5vw, 4.5rem);

  /* Largeur maximale du contenu (1440 px moins les deux gouttières) */
  --largeur-max: 1344px;

  /* Ombres */
  --ombre-carte: 0 8px 22px rgba(14, 38, 22, .06);
  --ombre-forte: 0 14px 34px rgba(14, 38, 22, .2);

  /* Transitions : sobres, jamais de rebond */
  --transition: 180ms ease-out;
}

/* ==========================================================================
   2. BASE ET RÉINITIALISATION
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(0.969rem, 0.9rem + 0.3vw, 1.094rem); /* 15.5 → 17.5 px */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Bloque le défilement de la page quand le menu mobile est ouvert */
body.menu-ouvert { overflow: hidden; }

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

/* Un élément marqué « hidden » doit toujours rester masqué, même si une
   règle lui donne un display (flex, grid…). */
[hidden] { display: none !important; }

a {
  color: var(--vert-club);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--or); }

ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; }

/* Titres : Anton, toujours en capitales, sans graisse ajoutée */
.anton,
h1, h2, h3, h4,
.titre-hero, .titre-page, .titre-section, .titre-carte {
  font-family: "Anton", "Poppins", system-ui, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
}

/* Lien d'évitement pour la navigation au clavier */
.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--or);
  color: var(--encre);
  font-weight: 700;
  padding: 14px 20px;
}
.lien-evitement:focus { left: 0; color: var(--encre); }

/* Masqué visuellement mais lu par les lecteurs d'écran */
.lecteur-ecran-seul {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   3. MISE EN PAGE : SECTIONS ET CONTENEURS
   ========================================================================== */
.section { padding: var(--section-y) var(--gouttiere); }
.section--creme { background: var(--creme); }
.section--nuit { background: var(--vert-nuit); color: var(--sur-sombre); }
.section--derniere { padding-bottom: calc(var(--section-y) + 0.5rem); }
.section--sans-haut { padding-top: 0; }

.conteneur {
  max-width: var(--largeur-max);
  margin-inline: auto;
}

/* Grille à deux colonnes (texte + photo, formulaire + panneau…) */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3.9vw, 3.5rem);
  align-items: center;
}
.duo--haut { align-items: start; }
.duo--large-gauche { grid-template-columns: 1.25fr .75fr; }
.duo--large-droite { grid-template-columns: .8fr 1.2fr; }
.duo--tableau { grid-template-columns: 1.45fr .55fr; align-items: start; }
.duo--classement { grid-template-columns: 1.3fr .7fr; align-items: start; }
.duo--carte { grid-template-columns: .95fr 1.05fr; }
.duo--parcours { gap: clamp(1.5rem, 2.5vw, 2.25rem); }

/* Grilles de cartes */
.grille { display: grid; gap: clamp(0.75rem, 1.6vw, 1.625rem); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }
.grille--5 { grid-template-columns: repeat(5, 1fr); }
.grille--6 { grid-template-columns: repeat(6, 1fr); }
.grille--7 { grid-template-columns: repeat(7, 1fr); }

/* Bloc de titre : sur-titre + titre, collés (gap 10 px) */
.bloc-titre {
  display: flex;
  flex-direction: column;
  gap: clamp(0.375rem, 0.7vw, 0.625rem);
  margin-bottom: clamp(1rem, 2vw, 1.875rem);
}
.bloc-titre--centre { align-items: center; text-align: center; }

.pile { display: flex; flex-direction: column; }
.pile--s { gap: 0.75rem; }
.pile--m { gap: 1.125rem; }
.pile--l { gap: 1.625rem; }

/* ==========================================================================
   4. TITRES ET TEXTES
   ========================================================================== */
.sur-titre {
  font-family: "Poppins", sans-serif;
  font-size: clamp(0.75rem, 0.7rem + 0.1vw, 0.813rem);
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--vert-clair);
}
.sur-titre--or { color: var(--or); }
.sur-titre--gris { color: var(--texte-faible); }

.titre-hero {
  font-size: clamp(2.75rem, 6.4vw, 5.75rem);   /* 44 → 92 px */
  line-height: .93;
  color: var(--blanc);
}
.titre-hero em { font-style: normal; color: var(--or); }

.titre-page {
  font-size: clamp(2.375rem, 5.15vw, 4.625rem); /* 38 → 74 px */
  line-height: 1;
  color: var(--blanc);
}

.titre-section {
  font-size: clamp(1.875rem, 3.6vw, 3.25rem);   /* 30 → 52 px */
  line-height: 1.04;
  color: var(--vert-club);
}
.titre-section--blanc { color: var(--blanc); }
.titre-section--moyen { font-size: clamp(1.75rem, 3.2vw, 2.875rem); } /* 28 → 46 px */

.titre-carte {
  font-size: clamp(1.375rem, 2.2vw, 2rem);      /* 22 → 32 px */
  line-height: 1.08;
  color: var(--vert-club);
}
.titre-carte--petit { font-size: clamp(1.313rem, 1.7vw, 1.5rem); } /* 21 → 24 px */
.titre-carte--blanc { color: var(--blanc); }

.texte { color: var(--texte); line-height: 1.72; margin: 0; }
.texte--doux { color: var(--texte-doux); font-size: clamp(0.938rem, 0.9rem + 0.2vw, 1.031rem); line-height: 1.65; }
.texte--faible { color: var(--texte-faible); }
.texte--note { color: var(--gris-note); font-size: clamp(0.813rem, 0.78rem + 0.1vw, 0.906rem); line-height: 1.6; }
.texte--clair { color: var(--sur-sombre); font-weight: 300; }

.accroche {
  font-size: clamp(1.188rem, 1.9vw, 1.688rem);  /* 19 → 27 px */
  font-weight: 300;
  color: #F2F4F0;
  margin: 0;
}

.devise {
  font-size: clamp(0.813rem, 1.1vw, 1rem);
  font-weight: 700;
  letter-spacing: .24em;
  color: var(--or);
}

/* Encadré d'annotation : information de suivi destinée au visiteur */
.annotation {
  display: inline-block;
  align-self: flex-start;
  background: var(--note-fond);
  border: 1px dashed var(--note-bord);
  border-radius: 6px;
  padding: 9px 14px;
  font-size: clamp(0.781rem, 0.75rem + 0.1vw, 0.875rem);
  line-height: 1.5;
  color: var(--note-texte);
}

/* Liste à coches vertes */
.liste-coches { display: flex; flex-direction: column; gap: 0.75rem; }
.liste-coches li {
  display: flex;
  gap: 0.625rem;
  font-size: clamp(0.938rem, 0.9rem + 0.2vw, 1.031rem);
  line-height: 1.5;
  color: var(--texte);
}
.liste-coches li::before {
  content: "✓";
  color: var(--vert-clair);
  font-weight: 700;
  flex: none;
}

/* Petite icône en ligne (pictogrammes SVG) */
.ico {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.125em;
  fill: currentColor;
}

/* ==========================================================================
   5. BOUTONS
   ========================================================================== */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: clamp(1rem, 0.95rem + 0.15vw, 1.063rem);
  font-weight: 700;
  line-height: 1.2;
  padding: 16px 30px;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.bouton--primaire { background: var(--vert-club); color: var(--blanc); }
.bouton--primaire:hover { background: #1A4224; color: var(--blanc); }

.bouton--accent { background: var(--or); color: var(--encre); }
.bouton--accent:hover { background: #C29B2C; color: var(--encre); }

.bouton--fantome { border-color: var(--blanc); color: var(--blanc); background: transparent; }
.bouton--fantome:hover { background: rgba(255, 255, 255, .12); color: var(--blanc); }

.bouton--paypal { background: var(--paypal); color: var(--encre); }
.bouton--paypal:hover { background: #F0B62F; color: var(--encre); }

.bouton--youtube { background: var(--youtube); color: var(--blanc); }
.bouton--youtube:hover { background: #A82823; color: var(--blanc); }

.bouton--compact { padding: 13px 24px; font-size: 1rem; border-radius: 7px; }
.bouton--pleine-largeur { width: 100%; }

/* ==========================================================================
   6. EN-TÊTE ET NAVIGATION
   ========================================================================== */
.entete { position: relative; z-index: 60; }

/* Bande d'information (grand écran) */
.bandeau-info {
  background: var(--vert-nuit);
  color: #D9DED7;
  font-size: 0.844rem;
  padding: 9px var(--gouttiere);
}
.bandeau-info__contenu {
  max-width: var(--largeur-max);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.bandeau-info a { color: inherit; }
.bandeau-info a:hover { color: var(--or); }
.bandeau-info strong { color: var(--or); }

/* Barre principale */
.barre-nav {
  background: var(--vert-club);
  border-bottom: 3px solid var(--or);
  padding: 14px var(--gouttiere);
}
.barre-nav__contenu {
  max-width: var(--largeur-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
}

.marque { display: flex; align-items: center; gap: 0.875rem; }
.marque:hover { color: inherit; }
.marque img { width: 54px; height: 54px; object-fit: contain; }
.marque__texte { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.marque__nom {
  font-family: "Anton", sans-serif;
  font-size: 1.563rem;
  color: var(--blanc);
  letter-spacing: .02em;
}
.marque__sous-titre {
  font-size: 0.719rem;
  font-weight: 500;
  letter-spacing: .24em;
  color: var(--or-pale);
}

.barre-nav__droite { display: flex; align-items: center; gap: 21px; }

.nav-principale ul {
  display: flex;
  align-items: center;
  gap: 21px;
}
.nav-principale a {
  font-size: 0.938rem;
  font-weight: 500;
  color: var(--blanc);
  white-space: nowrap;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.nav-principale a:hover { color: var(--or); }
.nav-principale a[aria-current="page"] {
  color: var(--or);
  font-weight: 600;
  border-bottom-color: var(--or);
}

/* Bouton burger : caché sur grand écran */
.burger {
  display: none;
  width: 46px;
  height: 46px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.burger span {
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--or);
  transition: transform var(--transition), opacity var(--transition);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Barre « don » toujours visible sur mobile */
.barre-don {
  display: none;
  background: var(--vert-nuit);
  padding: 10px var(--gouttiere);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.barre-don__texte { font-size: 0.781rem; color: var(--sur-sombre-doux); }
.barre-don .bouton {
  font-size: 0.844rem;
  padding: 9px 14px;
  border-radius: 6px;
  white-space: nowrap;
}

/* Bouton don de la barre de navigation */
.barre-nav .bouton--don {
  font-size: 0.938rem;
  padding: 12px 20px;
  border-radius: 6px;
  white-space: nowrap;
}

/* Panneau du menu mobile */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--vert-club);
  padding: 0 var(--gouttiere) 2rem;
  overflow-y: auto;
  display: none;
  flex-direction: column;
}
.menu-mobile[data-ouvert="true"] { display: flex; }
.menu-mobile__haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  margin-bottom: 0.5rem;
}
.menu-mobile__fermer {
  width: 46px;
  height: 46px;
  background: none;
  border: 0;
  color: var(--or);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.menu-mobile li + li { border-top: 1px solid rgba(255, 255, 255, .1); }
.menu-mobile a {
  display: flex;
  align-items: center;
  min-height: 52px;
  font-size: 1.063rem;
  font-weight: 500;
  color: var(--blanc);
}
.menu-mobile a[aria-current="page"] { color: var(--or); font-weight: 600; }
.menu-mobile .bouton { margin-top: 1.5rem; }

/* ==========================================================================
   7. HÉROS
   ========================================================================== */
/* Héros de la page d'accueil : photo + voile dégradé.
   Pour changer la photo, remplacez le nom de fichier ci-dessous par celui
   de votre nouvelle image déposée dans assets/img/. */
.hero {
  --hero-photo: url("../img/hero-nuit.webp");

  position: relative;
  min-height: 660px;
  display: flex;
  align-items: center;
  padding: var(--section-y) var(--gouttiere);
  background-color: var(--vert-nuit);
  background-image:
    linear-gradient(90deg, rgba(9, 26, 15, .94) 0%, rgba(9, 26, 15, .72) 45%, rgba(9, 26, 15, .5) 100%),
    var(--hero-photo);
  background-size: cover, cover;
  background-position: center, center;
}
.hero__contenu {
  position: relative;
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
}
.hero__texte {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 760px;
}
.hero__ecusson {
  width: clamp(9.5rem, 18.75vw, 16.875rem);
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .5));
  flex: none;
}
.badge-saison {
  align-self: flex-start;
  background: var(--or);
  color: var(--encre);
  font-size: 0.813rem;
  font-weight: 700;
  letter-spacing: .14em;
  padding: 7px 14px;
  border-radius: 4px;
}
.hero__actions { display: flex; gap: 1rem; margin-top: 0.75rem; flex-wrap: wrap; }

/* Héros des pages intérieures : dégradé vert + écusson en filigrane */
.hero-page {
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg, #0E2616 0%, #1B4526 52%, #17381F 100%);
  padding: clamp(1.625rem, 3.6vw, 3.25rem) var(--gouttiere) clamp(2rem, 4.2vw, 3.75rem);
}
.hero-page__filigrane {
  position: absolute;
  top: -30px;
  right: 40px;
  width: 330px;
  opacity: .17;
  pointer-events: none;
}
.hero-page__contenu {
  position: relative;
  max-width: var(--largeur-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 0.8vw, 0.625rem);
}
.fil-ariane {
  font-size: clamp(0.75rem, 0.72rem + 0.1vw, 0.875rem);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--or);
}
.fil-ariane a { color: inherit; }
.fil-ariane a:hover { color: var(--blanc); }
.hero-page__sous-titre {
  font-size: clamp(0.969rem, 0.93rem + 0.3vw, 1.25rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--sur-sombre);
  max-width: 760px;
  margin: 0;
}

/* ==========================================================================
   8. CARTES ET TUILES
   ========================================================================== */
.carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  padding: clamp(1.125rem, 2.2vw, 2rem);
}
.carte--sans-padding { padding: 0; overflow: hidden; }
.carte--or { border: 2px solid var(--or); }

/* Carte de match (dernier résultat / prochain match) */
.carte-match {
  background: var(--blanc);
  border-top: 5px solid var(--or);
  border-radius: 10px;
  box-shadow: var(--ombre-carte);
  padding: clamp(1.125rem, 1.9vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.5vw, 1.375rem);
}
.carte-match__entete {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-wrap: wrap;
}
.carte-match__meta { font-size: clamp(0.875rem, 0.85rem + 0.1vw, 1rem); color: var(--texte-faible); }
.carte-match__score-ligne {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2.4vw, 2.125rem);
}
.carte-match__equipe {
  font-size: clamp(0.938rem, 0.85rem + 0.35vw, 1.25rem);
  font-weight: 700;
  color: var(--encre);
  flex: 1;
  line-height: 1.3;
}
.carte-match__equipe--gauche { text-align: right; }
.carte-match__score {
  font-family: "Anton", sans-serif;
  font-size: clamp(2.125rem, 3.6vw, 3.25rem);
  line-height: 1.05;
  color: var(--blanc);
  background: var(--vert-club);
  border-radius: 10px;
  padding: 10px clamp(0.875rem, 1.8vw, 1.625rem);
  white-space: nowrap;
  flex: none;
}
.carte-match__score--vs {
  color: var(--encre);
  background: var(--or);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  padding: 14px clamp(1rem, 1.9vw, 1.75rem);
}
.carte-match__pied {
  border-top: 1px solid var(--filet);
  padding-top: 1.125rem;
  font-size: clamp(0.875rem, 0.85rem + 0.1vw, 1rem);
  color: var(--texte-faible);
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  align-items: center;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: clamp(0.719rem, 0.7rem + 0.1vw, 0.781rem);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 5px;
  white-space: nowrap;
}
.badge--vert { background: var(--vert-club); color: var(--blanc); }
.badge--or { background: var(--or); color: var(--encre); }

/* Carte de contenu avec visuel (équipes, actualités) */
.carte-visuel {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.carte-visuel > img { width: 100%; object-fit: cover; }
.carte-visuel__corps {
  padding: clamp(1.125rem, 1.7vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
  flex: 1;
}
a.carte-visuel:hover,
.carte-visuel:has(a:hover) {
  box-shadow: 0 14px 30px rgba(14, 38, 22, .12);
  transform: translateY(-2px);
}
.carte-equipe > img { height: clamp(200px, 23vw, 330px); }
.carte-actu > img { height: clamp(170px, 15vw, 216px); }

/* Carte de personne (comité, staff) */
.carte-personne {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  padding: clamp(1.125rem, 1.9vw, 1.875rem) 1.25rem clamp(1rem, 1.7vw, 1.75rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.carte-personne__portrait {
  width: clamp(88px, 8.6vw, 124px);
  height: clamp(88px, 8.6vw, 124px);
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
/* Pastille d'initiales quand aucune photo n'est disponible */
.carte-personne__initiales {
  width: clamp(88px, 8.6vw, 124px);
  height: clamp(88px, 8.6vw, 124px);
  border-radius: 50%;
  background: var(--vert-club);
  border: 3px solid var(--or);
  color: var(--or);
  font-family: "Anton", sans-serif;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.carte-personne__nom {
  font-size: clamp(0.938rem, 0.9rem + 0.2vw, 1.063rem);
  font-weight: 700;
  color: var(--encre);
  line-height: 1.35;
}
.carte-personne__role {
  font-size: clamp(0.719rem, 0.7rem + 0.15vw, 0.813rem);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vert-clair);
  line-height: 1.45;
}

/* Carte de joueur (effectif) */
.carte-joueur {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  padding: clamp(0.875rem, 1.3vw, 1.25rem) 0.75rem clamp(0.75rem, 1.2vw, 1.125rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}
.carte-joueur__pastille {
  width: clamp(44px, 3.6vw, 52px);
  height: clamp(44px, 3.6vw, 52px);
  border-radius: 50%;
  background: var(--vert-club);
  color: var(--or);
  font-size: clamp(0.813rem, 1vw, 0.938rem);
  font-weight: 700;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.carte-joueur__nom {
  font-size: clamp(0.875rem, 0.85rem + 0.1vw, 0.938rem);
  font-weight: 600;
  color: var(--encre);
  line-height: 1.35;
}
.carte-joueur__poste {
  font-size: 0.75rem;
  color: var(--texte-faible);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Tuile de logo (partenaires, fédérations) : jamais de logo déformé */
.tuile-logo {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  height: clamp(104px, 11vw, 158px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.625rem, 1.2vw, 1.125rem);
}
/* Le logo occupe la tuile sans jamais être déformé ni recadré :
   « contain » ajoute des marges, il ne coupe rien. */
.tuile-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tuile-logo a { display: block; width: 100%; height: 100%; }
.tuile-logo--or { border: 2px solid var(--or); }
.tuile-logo--haute {
  height: auto;
  min-height: clamp(104px, 11vw, 158px);
  flex-direction: column;
  gap: 1.375rem;
  text-align: center;
  padding: clamp(1.25rem, 2vw, 1.75rem) 1.5rem;
}
.tuile-logo--haute img { height: 120px; width: 74%; margin-inline: auto; }
.tuile-logo--haute a { height: 120px; }
.tuile-logo--petite { height: clamp(90px, 8vw, 110px); width: clamp(110px, 10vw, 130px); }
.tuile-logo--fsgt { height: clamp(120px, 11vw, 150px); width: clamp(150px, 14vw, 190px); }

/* Visuel de marque : sert d'illustration aux cartes sans photo.
   Fond vert du club, écusson et mention en or — toujours net, à toute
   taille. Pour le remplacer par une vraie photo, écrivez simplement
   <img src="assets/img/ma-photo.webp" alt="…"> à la place du bloc. */
.visuel-marque {
  position: relative;
  height: clamp(170px, 15vw, 216px);
  background: linear-gradient(135deg, #0E2616 0%, #1B4526 55%, #17381F 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  overflow: hidden;
}
/* Fin liseré or en bas, rappel de l'en-tête du site */
.visuel-marque::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--or);
}
.visuel-marque img {
  height: 52%;
  width: auto;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .45));
}
.visuel-marque__texte {
  font-family: "Anton", sans-serif;
  font-size: clamp(0.813rem, 1vw, 0.938rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--or);
}

/* Emplacement neutre (photo pas encore fournie) */
.emplacement {
  background-color: #EDEBE2;
  background-image: repeating-linear-gradient(135deg, #E6E3D8 0 14px, #EDEBE2 14px 28px);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: #8A8D84;
  text-align: center;
  padding: 1rem;
}

/* Chiffres clés */
.chiffre { display: flex; flex-direction: column; gap: 0.5rem; text-align: center; }
.chiffre__valeur {
  font-family: "Anton", sans-serif;
  font-size: clamp(2.875rem, 4.4vw, 4rem);
  line-height: 1;
  color: var(--or);
}
.chiffre__emoji { font-size: clamp(2.625rem, 4vw, 3.625rem); line-height: 1; }
.chiffre__label {
  font-size: clamp(0.781rem, 0.75rem + 0.1vw, 0.875rem);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #E3E7E0;
}

/* Frise du parcours */
.jalon { display: flex; flex-direction: column; gap: 0.875rem; }
.jalon__annee {
  font-family: "Anton", sans-serif;
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  line-height: 1;
  color: var(--or);
}
.jalon__trait { height: 3px; background: var(--or); }
.jalon__trait--pointille {
  background: repeating-linear-gradient(90deg, var(--or) 0 14px, transparent 14px 24px);
}
.jalon__texte { font-size: clamp(0.875rem, 0.85rem + 0.15vw, 1rem); line-height: 1.6; color: var(--sur-sombre); }

/* Carte « valeur » numérotée */
.carte-valeur__numero {
  font-family: "Anton", sans-serif;
  font-size: clamp(2.25rem, 3.3vw, 3rem);
  line-height: 1;
  color: var(--or);
}

/* ==========================================================================
   9. TABLEAUX DE DONNÉES
   ========================================================================== */
.tableau-bloc { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; }

.tableau {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--blanc);
  border-radius: 6px;
  overflow: hidden;
  font-size: clamp(0.875rem, 0.83rem + 0.2vw, 1.031rem);
}
.tableau thead th {
  background: var(--vert-club);
  color: var(--blanc);
  font-size: clamp(0.688rem, 0.66rem + 0.1vw, 0.781rem);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  padding: clamp(10px, 1vw, 15px) clamp(10px, 1.5vw, 22px);
  white-space: nowrap;
}
.tableau tbody td {
  padding: clamp(11px, 1.15vw, 17px) clamp(10px, 1.5vw, 22px);
  border-top: 1px solid var(--filet);
  color: #22261F;
  vertical-align: middle;
}
.tableau tbody tr:first-child td { border-top: 0; }
.tableau tbody td:first-child { font-weight: 500; }
.tableau .col-centre { text-align: center; }

/* Notre ligne dans le classement */
.tableau tbody tr.ligne-club td {
  background: var(--creme);
  font-weight: 700;
}

/* Le score d'un match joué ressort légèrement */
.score-joue { font-weight: 700; white-space: nowrap; }
.score-a-venir { color: var(--gris-note); white-space: nowrap; }

/* État « chargement » : squelettes animés */
.squelette {
  display: block;
  height: 13px;
  border-radius: 3px;
  background: #E4E2D8;
  animation: lysShimmer 1.4s ease-in-out infinite;
}
@keyframes lysShimmer {
  0%, 100% { opacity: .35; }
  50% { opacity: .9; }
}
.tableau-chargement {
  padding: 18px clamp(10px, 1.5vw, 22px) 0;
  font-size: 0.906rem;
  color: var(--gris-note);
}

/* État « erreur » */
.tableau-erreur {
  border: 1px dashed #C9A94A;
  background: var(--note-fond);
  border-radius: 8px;
  padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.125rem, 1.8vw, 1.625rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}
.tableau-erreur__titre {
  font-family: "Anton", sans-serif;
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  text-transform: uppercase;
  color: var(--vert-club);
}
.tableau-erreur p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--texte-faible); }

/* ==========================================================================
   10. FORMULAIRES ET MODULES INTÉGRÉS
   ========================================================================== */
.cadre-integre {
  width: 100%;
  border: 1px solid var(--bordure);
  border-radius: 12px;
  overflow: hidden;
  background: var(--blanc);
}
.cadre-integre iframe {
  display: block;
  width: 100%;
  border: 0;
  height: var(--hauteur-form, 1100px);
}
/* Sur téléphone, les questions se répartissent sur plus de lignes :
   on ajoute 20 % de hauteur pour éviter une barre de défilement
   à l'intérieur du formulaire. */
@media (max-width: 640px) {
  .cadre-integre iframe { height: calc(var(--hauteur-form, 1100px) * 1.2); }
}

/* Lien de secours sous un formulaire intégré */
.lien-formulaire {
  margin: 0.875rem 0 0;
  font-size: clamp(0.875rem, 0.85rem + 0.1vw, 0.938rem);
}
.lien-formulaire a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 500;
  color: var(--vert-clair);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lien-formulaire a:hover { color: var(--or); }

/* Encart « Bientôt disponible » : affiché partout où un service externe
   (Google Sheets, Google Forms, PayPal, carte) n'est pas encore branché. */
.encart-a-venir {
  border: 1px dashed var(--note-bord);
  background: var(--note-fond);
  border-radius: 12px;
  padding: clamp(1.25rem, 2.2vw, 1.875rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
  width: 100%;
}
.encart-a-venir__titre {
  font-family: "Anton", sans-serif;
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--vert-club);
}
.encart-a-venir p {
  margin: 0;
  color: var(--note-texte);
  font-size: clamp(0.938rem, 0.9rem + 0.2vw, 1rem);
  line-height: 1.6;
  max-width: 62ch;
}
.encart-a-venir .bouton { margin-top: 0.25rem; }

/* Sur fond sombre, l'encart s'éclaircit pour rester lisible */
.section--nuit .encart-a-venir,
.bloc-don .encart-a-venir {
  background: rgba(255, 255, 255, .06);
  border-color: var(--or);
}
.section--nuit .encart-a-venir__titre,
.bloc-don .encart-a-venir__titre { color: var(--or); }
.section--nuit .encart-a-venir p,
.bloc-don .encart-a-venir p { color: var(--sur-sombre); }

/* Pilules de montant pour le don */
.pilules { display: flex; gap: 0.875rem; flex-wrap: wrap; }
.pilule {
  background: transparent;
  border: 1.5px solid #6E8A78;
  border-radius: 8px;
  padding: 15px 24px;
  font-family: inherit;
  font-size: clamp(0.938rem, 0.9rem + 0.2vw, 1.063rem);
  font-weight: 700;
  color: var(--blanc);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.pilule:hover { border-color: var(--or); }
.pilule[aria-pressed="true"] {
  background: var(--or);
  border-color: var(--or);
  color: var(--encre);
}
.champ-libre {
  margin-top: 0.75rem;
  width: 200px;
  max-width: 100%;
  padding: 14px 16px;
  border: 1.5px solid #6E8A78;
  border-radius: 8px;
  background: transparent;
  color: var(--blanc);
  font-family: inherit;
  font-size: 1rem;
}
.champ-libre::placeholder { color: #9FB0A3; }

/* Carte de membre (page Devenir membre) */
.carte-membre {
  border: 2px solid var(--or);
  border-radius: 16px;
  background: linear-gradient(135deg, #1F4D2B 0%, #2E7D46 100%);
  box-shadow: var(--ombre-forte);
  padding: clamp(1.25rem, 2.4vw, 2.125rem);
  min-height: clamp(220px, 21vw, 300px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}
.carte-membre__haut,
.carte-membre__bas {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
}
.carte-membre__haut { align-items: flex-start; }
.carte-membre__bas { align-items: flex-end; }
.carte-membre__titre {
  font-family: "Anton", sans-serif;
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  line-height: 1;
  color: #F5D77A;
}
.carte-membre__saison {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--blanc);
}
.carte-membre__label {
  font-size: 0.781rem;
  font-weight: 500;
  letter-spacing: .14em;
  color: #C9DCCE;
}
.carte-membre__nom { font-size: 1.375rem; font-weight: 700; color: var(--blanc); }
.carte-membre__numero { font-size: 0.875rem; color: var(--or); }
.carte-membre img { width: clamp(64px, 6.7vw, 96px); flex: none; }

/* Les deux parcours de la page « Devenir membre » : cadres bien distincts,
   pour qu'aucun visiteur ne confonde adhésion et intégration sportive. */
.parcours {
  border: 1px solid var(--bordure);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
}
.parcours--membre { border: 2px solid var(--or); }
.parcours__entete {
  padding: clamp(1.25rem, 2.1vw, 1.875rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}
.parcours__entete--vert { background: var(--vert-club); }
.parcours__entete--creme { background: var(--creme); }
.parcours__corps {
  padding: clamp(1.25rem, 2.1vw, 1.875rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 1.9vw, 1.625rem);
  flex: 1;
}

/* Formules d'adhésion */
.formule {
  border: 2px solid var(--bordure);
  border-radius: 10px;
  padding: clamp(1.125rem, 1.8vw, 1.5rem) 1.125rem clamp(1.25rem, 1.9vw, 1.625rem);
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  align-items: center;
  text-align: center;
}
.formule--gold { border-color: var(--or); }
.formule--silver { border-color: #B9BCB6; }
.formule--lys { border-color: var(--vert-club); }
.formule__nom { font-family: "Anton", sans-serif; font-size: 1.5rem; text-transform: uppercase; color: var(--vert-club); }
.formule__prix { font-family: "Anton", sans-serif; font-size: clamp(2rem, 2.9vw, 2.625rem); line-height: 1; }
.formule--gold .formule__prix { color: var(--or); }
.formule--silver .formule__prix { color: #8E918B; }
.formule--lys .formule__prix { color: var(--vert-clair); }
.formule .liste-coches { width: 100%; text-align: left; }
.formule .liste-coches li { font-size: 0.938rem; }

/* Formules partenaires (cartes pleine couleur) */
.formule-partenaire {
  border-radius: 12px;
  padding: clamp(1.25rem, 2.1vw, 1.875rem) clamp(1.125rem, 1.9vw, 1.75rem) clamp(1.5rem, 2.2vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  color: var(--blanc);
}
.formule-partenaire--bronze { background: var(--bronze); }
.formule-partenaire--argent { background: var(--argent); }
.formule-partenaire--gold { background: var(--gold); }
.formule-partenaire h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); color: var(--blanc); }
.formule-partenaire li {
  font-size: clamp(0.938rem, 0.9rem + 0.2vw, 1.031rem);
  line-height: 1.5;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
}

/* Bloc don sur fond sombre */
.bloc-don {
  background: var(--vert-nuit);
  border-radius: 12px;
  padding: clamp(1.5rem, 2.8vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Galerie photos */
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.625rem, 1.2vw, 1.125rem); }
.galerie img,
.galerie .emplacement {
  width: 100%;
  height: clamp(116px, 11.7vw, 168px);
  object-fit: cover;
  border-radius: 10px;
}

/* Fil Facebook */
.fb-cadre {
  border: 1px solid var(--bordure);
  border-radius: 12px;
  overflow: hidden;
  background: var(--blanc);
}
.fb-entete {
  background: var(--facebook);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.fb-entete__marque { display: flex; align-items: center; gap: 0.75rem; }
.fb-entete img { width: 36px; height: 36px; background: var(--blanc); border-radius: 50%; padding: 3px; object-fit: contain; }
.fb-entete__nom { font-size: 1.031rem; font-weight: 700; color: var(--blanc); }
.fb-entete .bouton {
  background: var(--blanc);
  color: var(--facebook);
  font-size: 0.844rem;
  padding: 8px 14px;
  border-radius: 6px;
}
.fb-corps { padding: clamp(1.25rem, 2vw, 1.75rem); display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.fb-corps iframe { border: 0; width: 100%; }

/* Réseaux sociaux (pied de page) */
.reseaux { display: flex; gap: 0.75rem; }
.reseaux a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1B3823;
  color: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.reseaux a:hover { background: var(--or); color: var(--encre); }
.reseaux svg { width: 20px; height: 20px; fill: currentColor; }

/* ==========================================================================
   11. PIED DE PAGE
   ========================================================================== */
.pied {
  background: #0B1F11;
  color: var(--sur-sombre-doux);
  padding: clamp(1.875rem, 3.9vw, 3.5rem) var(--gouttiere) 1.625rem;
}
.pied__contenu {
  max-width: var(--largeur-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
}
.pied__colonnes {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
}
.pied__colonne { display: flex; flex-direction: column; gap: 0.875rem; }
.pied__titre {
  font-family: "Anton", sans-serif;
  font-size: clamp(1.063rem, 1.3vw, 1.188rem);
  text-transform: uppercase;
  color: var(--or);
}
.pied a { color: var(--sur-sombre-doux); }
.pied a:hover { color: var(--or); }
.pied__marque { display: flex; align-items: center; gap: 0.875rem; }
.pied__marque img { width: 58px; height: 58px; object-fit: contain; }
.pied__marque span {
  font-family: "Anton", sans-serif;
  font-size: 1.375rem;
  text-transform: uppercase;
  color: var(--or);
}
.pied__bas {
  border-top: 1px solid #1C3324;
  padding-top: 1.25rem;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  flex-wrap: wrap;
  font-size: clamp(0.781rem, 0.76rem + 0.1vw, 0.875rem);
  color: var(--sur-sombre-faible);
}
.pied__bas a { color: var(--sur-sombre-faible); }

/* ==========================================================================
   12. BANDEAU COOKIES
   ========================================================================== */
.bandeau-cookies {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  background: var(--vert-nuit);
  border-top: 3px solid var(--or);
  padding: 1.125rem var(--gouttiere);
  display: none;
}
.bandeau-cookies[data-visible="true"] { display: block; }
.bandeau-cookies__contenu {
  max-width: var(--largeur-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.bandeau-cookies p {
  margin: 0;
  color: var(--sur-sombre);
  font-size: 0.938rem;
  line-height: 1.6;
  max-width: 800px;
}
.bandeau-cookies__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.bandeau-cookies .bouton { padding: 12px 22px; font-size: 0.938rem; }

/* ==========================================================================
   12 bis. BLOCS PROPRES À CERTAINES PAGES
   ========================================================================== */

/* Bandeau « Compétitions & affiliations » (accueil) */
.bandeau-affiliations {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.875rem, 3vw, 2.75rem);
  flex-wrap: wrap;
}
.bandeau-affiliations img {
  height: clamp(48px, 5.7vw, 82px);
  width: auto;
  object-fit: contain;
}
.bandeau-affiliations__label {
  font-size: clamp(0.75rem, 0.72rem + 0.1vw, 0.813rem);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texte-faible);
  line-height: 1.6;
  text-align: right;
}
.bandeau-affiliations__mention {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: clamp(0.875rem, 0.85rem + 0.1vw, 0.938rem);
  color: var(--texte);
  line-height: 1.5;
}
.bandeau-affiliations__mention strong:last-child { color: var(--vert-clair); }
.filet-vertical { width: 1px; height: 74px; background: #E1E2DC; flex: none; }

/* Bandeau des partenaires sur l'accueil : tuiles un peu plus basses */
.grille--7 .tuile-logo { height: clamp(92px, 8.2vw, 118px); }

/* Photo d'illustration des sections « texte + image » */
.image-illustration {
  width: 100%;
  height: clamp(220px, 30vw, 430px);
  object-fit: cover;
  border-radius: 12px;
}

/* Frise du parcours : simple liste, sans puces */
.frise { list-style: none; margin: 0; padding: 0; }

/* Encart « Joueur du mois » (page Équipe à 11) */
.carte-joueur-mois {
  border: 1px solid var(--bordure);
  border-top: 5px solid var(--or);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
}

/* Groupe de boutons */
.bloc-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.bloc-actions--centre { justify-content: center; }

/* Bloc « Soutenez le projet » (bas de l'accueil) */
.soutien {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.8vw, 2.5rem);
  flex-wrap: wrap;
}
.soutien__ecusson { width: clamp(110px, 11.7vw, 168px); flex: none; }
.soutien__texte { flex: 1 1 320px; display: flex; flex-direction: column; gap: 0.75rem; }
.soutien__actions { display: flex; flex-direction: column; gap: 1rem; width: 340px; max-width: 100%; }

/* Ligne de contact du pied de page et de la page Contact */
.ligne-contact { display: flex; align-items: flex-start; gap: 0.625rem; margin: 0; }

/* Panneau crème des coordonnées (page Contact) */
.panneau-contact {
  background: var(--creme);
  border-radius: 12px;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 2.2vw, 1.875rem);
}

/* Grille des partenaires : la Ville d'Annecy occupe deux rangées */
.grille--partenaires { grid-auto-rows: auto; }

/* Page des mentions légales : une colonne de lecture confortable */
.texte-legal { max-width: 78ch; }
.texte-legal h2 { margin-top: clamp(1.75rem, 3vw, 2.75rem); }
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal p { margin: 0 0 1rem; }
.liste-simple { margin: 0 0 1rem; padding-left: 1.25rem; list-style: disc; }
.liste-simple li { margin-bottom: 0.5rem; line-height: 1.7; color: var(--texte); }

@media (max-width: 900px) {
  .bandeau-affiliations { justify-content: space-between; }
  .bandeau-affiliations__label { text-align: left; width: 100%; }
  .filet-vertical { display: none; }
  .soutien__actions { width: 100%; }
}

/* ==========================================================================
   13. ADAPTATION MOBILE ET TABLETTE
   ========================================================================== */

/* Tablette large : les grilles les plus denses se resserrent */
@media (max-width: 1200px) {
  .grille--7 { grid-template-columns: repeat(4, 1fr); }
  .grille--6 { grid-template-columns: repeat(4, 1fr); }
  .grille--5 { grid-template-columns: repeat(3, 1fr); }
  .duo--tableau,
  .duo--classement { grid-template-columns: 1fr; }
}

/* Passage au menu burger : la barre à 9 liens ne tient plus */
@media (max-width: 1100px) {
  .bandeau-info { display: none; }
  .nav-principale,
  .barre-nav .bouton--don { display: none; }
  .burger { display: flex; }
  .barre-don { display: flex; }
  .marque img { width: 44px; height: 44px; }
  .marque__nom { font-size: 1.313rem; }
  .marque__sous-titre { font-size: 0.625rem; letter-spacing: .2em; }
}

/* Tablette : les blocs à deux colonnes s'empilent */
@media (max-width: 900px) {
  .duo,
  .duo--large-gauche,
  .duo--large-droite,
  .duo--carte { grid-template-columns: 1fr; }
  .grille--4 { grid-template-columns: repeat(2, 1fr); }
  .grille--3 { grid-template-columns: repeat(2, 1fr); }
  /* Les trois formules d'adhésion restent côte à côte sur tablette */
  .grille--formules { grid-template-columns: repeat(3, 1fr); }
  .hero { min-height: auto; background-image:
      linear-gradient(180deg, rgba(9, 26, 15, .72) 0%, rgba(9, 26, 15, .88) 70%),
      var(--hero-photo); }
  .hero__contenu { flex-direction: column-reverse; text-align: center; gap: 1rem; }
  .hero__texte { align-items: center; max-width: 100%; }
  .badge-saison { align-self: center; }
  .hero__actions { flex-direction: column; width: 100%; }
  .hero-page__filigrane { top: -14px; right: -24px; width: 190px; opacity: .16; }
  .pied__colonnes { grid-template-columns: 1fr 1fr; }
  .pied__colonne--marque { grid-column: span 2; }
}

/* Téléphone */
@media (max-width: 640px) {
  .grille--7,
  .grille--6,
  .grille--5,
  .grille--4,
  .grille--3 { grid-template-columns: repeat(2, 1fr); }
  .grille--3.grille--empile-mobile,
  .grille--actus { grid-template-columns: 1fr; }

  /* Formules d'adhésion : empilées, prix à droite du nom */
  .grille--formules { grid-template-columns: 1fr; }
  .formule {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
  .formule .liste-coches { flex: 1 1 100%; }

  /* Le partenaire institutionnel occupe toute la largeur */
  .grille--7 .tuile-logo--or { grid-column: span 2; }

  /* Comité : la 5e carte, seule sur sa ligne, occupe toute la largeur */
  .grille--comite > :last-child:nth-child(odd) { grid-column: span 2; }

  /* La frise du parcours devient verticale */
  .frise { grid-template-columns: 1fr; }

  /* Tous les appels à l'action passent en pleine largeur (cible tactile) */
  .hero__actions .bouton,
  .bloc-actions .bouton,
  .encart-a-venir .bouton,
  .bloc-don .bouton { width: 100%; padding-block: 17px; }

  .galerie { grid-template-columns: repeat(2, 1fr); }
  .pied__colonne--contact { grid-column: span 2; }
  .pied__bas { flex-direction: column; }

  /* Colonnes de tableau masquées sur petit écran (jamais tronquées) */
  .tableau .col-optionnelle { display: none; }

  .carte-match__score-ligne { gap: 0.5rem; }
  .carte-membre { min-height: 0; }
  .bandeau-cookies__contenu { flex-direction: column; align-items: stretch; }
  .bandeau-cookies__actions .bouton { flex: 1; }
}

/* Très petits écrans : on masque aussi la colonne secondaire des tableaux */
@media (max-width: 420px) {
  .tableau .col-optionnelle-2 { display: none; }
}

/* ==========================================================================
   14. ACCESSIBILITÉ ET IMPRESSION
   ========================================================================== */

/* Contour de focus toujours visible, adapté au fond */
:focus-visible {
  outline: 2px solid var(--vert-club);
  outline-offset: 3px;
}
.section--nuit :focus-visible,
.hero :focus-visible,
.hero-page :focus-visible,
.barre-nav :focus-visible,
.bandeau-info :focus-visible,
.barre-don :focus-visible,
.menu-mobile :focus-visible,
.pied :focus-visible,
.bloc-don :focus-visible,
.bandeau-cookies :focus-visible {
  outline-color: var(--or);
}

/* Respect du réglage « animations réduites » du système */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .entete, .pied, .bandeau-cookies, .menu-mobile { display: none !important; }
  body { color: #000; }
  .section { padding: 1rem 0; }
}