@charset "UTF-8";

/* ============================================================================
   ROYAL OLYMPIC CLUB DE CHARLEROI - FEUILLE DE STYLE
   ----------------------------------------------------------------------------
   Noir, blanc et or. Les trois valeurs sont relevées pixel par pixel sur
   assets/logo.png : #232121 pour le noir du blason, #FFD200 pour le laurier
   et la couronne, blanc pour la partie basse de l'ovale.

   RÈGLE DE CONTRASTE À NE JAMAIS PERDRE DE VUE
   #FFD200 ne fait que 1,45:1 sur du blanc. Sur fond clair, l'or est un DÉCOR
   (filets, trames, soulignements, pastilles) et ne porte jamais de texte.
   Sur l'aplat noir #232121 il monte à 11:1 : là, il peut tout porter.
   Pour un texte doré sur fond clair, utiliser --or-texte (#8A6A00, 5,1:1).

   SOMMAIRE
   01. Variables et jetons de design
   02. Reset et base
   03. Utilitaires et helpers
   03 bis. Écran de chargement
   03 ter. Entrée en scène
   04. Boutons et liens
   05. Traitement des visuels
   06. Barre utilitaire et header
   06 bis. Bandeau d'annonce
   07. Hero
   08. Carte du prochain match
   09. Actualités
   10. Calendrier et résultats
   11. Frise chronologique
   12. Palmarès (aplat noir)
   13. Staff
   14. Stade
   15. Formation
   16. Billetterie et hospitalité
   17. Partenaires
   18. Contact et formulaire
   19. Pied de page
   20. Retour en haut
   21. Animations d'apparition
   22. Responsive
   23. Accessibilité, mouvement réduit et impression
   ========================================================================== */


/* ============================================================================
   01. VARIABLES ET JETONS DE DESIGN
   ========================================================================== */
:root {
  /* --- Couleurs du blason --- */
  --noir:        #232121;   /* Aplats, texte, boutons pleins */
  --noir-deep:   #141313;   /* Barre utilitaire, bas de page */
  --noir-soft:   #3A3634;   /* Survols sur aplat noir */
  --or:          #FFD200;   /* DÉCOR sur fond clair, TEXTE sur fond noir */
  --or-deep:     #E0B900;   /* Survol de l'or */
  --or-texte:    #8A6A00;   /* Le seul or lisible en texte sur blanc (5,1:1) */
  --on-noir:      #FFFFFF;
  --on-noir-soft: #C9C4C0;  /* Texte secondaire posé sur un aplat noir */

  /* --- Surfaces --- */
  --color-bg:        #FFFFFF;
  --color-surface:   #F5F4F2;
  --color-surface-2: #EAE7E3;

  /* --- Texte --- */
  --color-text:       #232121;
  --color-text-soft:  #55504D;
  --color-text-muted: #6E6864;

  /* --- Traits et ombres (teintées sur le noir chaud, jamais du noir pur) --- */
  --color-line:        #E3DFDA;
  --color-line-strong: #C7C1BA;
  --shadow-sm: 0 1px 2px rgba(35, 33, 33, 0.08);
  --shadow-md: 0 12px 28px rgba(35, 33, 33, 0.10);
  --shadow-lg: 0 28px 64px rgba(35, 33, 33, 0.16);

  /* --- Erreurs (couleur d'état, pas de marque) --- */
  --color-danger:      #B3261E;
  --color-danger-soft: #FBEAE8;

  /* --- Formes : un seul rayon sur tout le site.
         Seuls le blason, les pastilles et les puces sont ronds. --- */
  --radius: 3px;

  /* --- Typographie --- */
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wdth-titre: 88;         /* Titres condensés, comme le lettrage du blason */
  --tracking-title: -0.015em;
  --tracking-label: 0.18em;

  /* --- Rythme vertical --- */
  --space-section: clamp(4rem, 8vw, 7.5rem);
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 74px;

  /* --- Transitions --- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms var(--ease);
  --t-base: 320ms var(--ease);
  --t-slow: 620ms var(--ease);

  /* --- Empilement --- */
  --z-header: 100;
  --z-overlay: 90;
  --z-totop: 80;

  color-scheme: light;
}

/* ----------------------------------------------------------------------------
   THÈME SOMBRE
   Seuls les jetons changent, aucune règle du site n'est réécrite.
   L'or reste identique : il est déjà pensé pour le fond noir.
   -------------------------------------------------------------------------- */
:root[data-theme="sombre"] {
  --color-bg:        #191817;
  --color-surface:   #222020;
  --color-surface-2: #2C2928;

  --color-text:       #F3F0ED;
  --color-text-soft:  #B8B2AD;
  --color-text-muted: #948D88;

  --color-line:        #322F2E;
  --color-line-strong: #453F3D;

  --noir:      #F3F0ED;   /* Les aplats « pleins » s'inversent */
  --noir-deep: #0E0D0D;
  --noir-soft: #DDD8D3;
  --on-noir:      #191817;
  --on-noir-soft: #4A4644;

  --or-texte: var(--or);  /* Sur fond sombre, l'or redevient lisible */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 28px 64px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

/* La transition n'est posée QUE pendant la bascule, via une classe ajoutée
   puis retirée par script.js. En permanence, elle ralentirait chaque survol
   de carte, de bouton et de ligne du site. */
.change-theme,
.change-theme *,
.change-theme *::before,
.change-theme *::after {
  transition: background-color 460ms ease, color 460ms ease,
              border-color 460ms ease, fill 460ms ease,
              box-shadow 460ms ease !important;
}

/* Voile qui balaie l'écran au moment du changement */
.voile-theme {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--or);
  pointer-events: none;
  transform-origin: top center;
  animation: voile-theme 600ms cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
@keyframes voile-theme {
  0%   { transform: scaleY(0); transform-origin: top center; }
  45%  { transform: scaleY(1); transform-origin: top center; }
  55%  { transform: scaleY(1); transform-origin: bottom center; }
  100% { transform: scaleY(0); transform-origin: bottom center; }
}
@media (prefers-reduced-motion: reduce) { .voile-theme { display: none; } }


/* ============================================================================
   02. RESET ET BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  font-stretch: 88%;
  line-height: 1.06;
  letter-spacing: var(--tracking-title);
  text-wrap: balance;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

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

a { color: inherit; text-decoration: none; }

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

/* Piège connu : le max-width du reset écrase un <svg> placé dans un conteneur
   étroit. Les icônes portent toujours width/height, on neutralise donc la
   contrainte pour elles. */
svg { max-width: none; flex: none; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }


/* ============================================================================
   03. UTILITAIRES ET HELPERS
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--space-section); }
.section--wash { background: var(--color-surface); }

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.section__head--colonne {
  flex-direction: column;
  align-items: flex-start;
  max-width: 62ch;
}

.section__title {
  position: relative;
  font-size: clamp(1.85rem, 4.2vw, 3rem);
  text-transform: uppercase;
  padding-top: 1.15rem;
}
/* Le filet doré remplace le surtitre au-dessus de la plupart des titres :
   il donne le rythme sans multiplier les micro-étiquettes. */
.section__title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 4px;
  background: var(--or);
}
.section__head--colonne .surtitre + .section__title { padding-top: 0; }
.section__head--colonne .surtitre + .section__title::before { display: none; }

.surtitre {
  margin: 0 0 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--or-texte);
}

.section__intro {
  margin-top: 1.15rem;
  font-size: 1.05rem;
  color: var(--color-text-soft);
  max-width: 58ch;
}

.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;
}

/* Un « display » posé par une classe l'emporte sur l'attribut hidden, dont la
   règle par défaut du navigateur n'a qu'une spécificité de zéro. Sans cette
   ligne, l'état du formulaire de contact laisse un cadre vide à l'écran. */
[hidden] { display: none !important; }


/* ============================================================================
   03 bis. ÉCRAN DE CHARGEMENT
   Ne s'affiche que sous .js-loading, posée par un script inline du <head>.
   Sans JavaScript, aucun voile ne peut donc rester bloqué devant la page.
   ========================================================================== */
.preloader { display: none; }

.js-loading { overflow: hidden; }
.js-loading .preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  background: var(--noir-deep);
  transition: opacity 460ms ease, visibility 460ms ease;
}
.preloader.is-parti { opacity: 0; visibility: hidden; }

.preloader__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 152px;
  height: 152px;
}
.preloader__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 210, 0, 0.18);
  border-top-color: var(--or);
  animation: preloader-tourne 1s linear infinite;
}
.preloader__crest {
  width: 96px;
  height: auto;
  animation: preloader-pulse 1.8s var(--ease) infinite;
}
.preloader__word {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--or);
}
@keyframes preloader-tourne { to { transform: rotate(360deg); } }
@keyframes preloader-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.93); opacity: 0.72; }
}


/* ============================================================================
   03 ter. ENTRÉE EN SCÈNE
   À la sortie du chargement, .js-loading cède la place à .is-entering.
   Chaque élément a son propre mouvement : rien n'entre de la même façon.
   ========================================================================== */
.is-entering .hero__blason      { animation: enter-tampon 900ms var(--ease) 380ms both; }
.is-entering .hero__media img   { animation: enter-zoom 1400ms var(--ease) both; }
.is-entering .hero__eyebrow     { animation: enter-tracer 620ms var(--ease) 220ms both; }
.is-entering .hero__ligne:nth-child(1) { animation: enter-devoiler 760ms var(--ease) 320ms both; }
.is-entering .hero__ligne:nth-child(2) { animation: enter-devoiler 760ms var(--ease) 440ms both; }
.is-entering .hero__lead        { animation: enter-monter 700ms var(--ease) 620ms both; }
.is-entering .hero__actions     { animation: enter-gonfler 620ms var(--ease) 760ms both; }
.is-entering .topbar            { animation: enter-descendre 560ms var(--ease) both; }
.is-entering .site-header       { animation: enter-fondu 620ms var(--ease) 120ms both; }
.is-entering .annonce           { animation: enter-gauche 700ms var(--ease) 860ms both; }
.is-entering .fixture__card     { animation: enter-droite 760ms var(--ease) 940ms both; }
.is-entering .nav__list li      { animation: enter-tomber 480ms var(--ease) both; animation-delay: calc(200ms + var(--i, 0) * 55ms); }

@keyframes enter-descendre { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes enter-fondu     { from { opacity: 0; } to { opacity: 1; } }
@keyframes enter-tomber    { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes enter-gauche    { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes enter-droite    { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes enter-monter    { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes enter-gonfler   { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes enter-zoom      { from { transform: scale(1.09); } to { transform: none; } }
@keyframes enter-tampon {
  0%   { opacity: 0; transform: scale(1.5) rotate(-7deg); }
  60%  { opacity: 0.14; transform: scale(0.96) rotate(1deg); }
  100% { opacity: 0.09; transform: none; }
}
@keyframes enter-tracer {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes enter-devoiler {
  from { opacity: 0; clip-path: inset(0 0 105% 0); transform: translateY(0.16em); }
  to   { opacity: 1; clip-path: inset(0 0 -12% 0); transform: none; }
}


/* ============================================================================
   04. BOUTONS ET LIENS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.78rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast);
}
.btn:active { transform: translateY(1px); }

/* AUCUNE BORDURE NE CHANGE AU SURVOL sur tout le site : le retour visuel
   passe par l'aplat, la couleur du texte ou un léger déplacement. Les boutons
   pleins portent donc une bordure transparente, qui garde la taille de la
   boîte sans jamais se voir.

   Or plein : texte NOIR obligatoire. Du blanc sur cet or tomberait à 1,4:1. */
.btn--or {
  background: var(--or);
  border-color: transparent;
  color: #232121;
}
.btn--or:hover { background: var(--or-deep); }

.btn--noir,
.btn--primary {
  background: var(--noir);
  border-color: transparent;
  color: var(--on-noir);
}
.btn--noir:hover,
.btn--primary:hover { background: var(--noir-soft); }

/* Bouton fantôme sur photo sombre : bordure blanche, texte blanc. */
.btn--fantome {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.55);
  color: #FFFFFF;
  backdrop-filter: blur(6px);
}
.btn--fantome:hover { background: rgba(255, 255, 255, 0.22); }

/* Variante du fantôme posée sur l'aplat noir des cartes de billetterie. */
.btn--fantome-clair {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: none;
}
.btn--fantome-clair:hover { background: rgba(255, 255, 255, 0.12); }

/* Fantôme sur fond clair : c'est le trait qui porte, pas l'aplat. */
.btn--fantome-noir {
  background: transparent;
  border-color: var(--color-line-strong);
  color: var(--color-text);
}
.btn--fantome-noir:hover { background: var(--color-surface-2); }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  border-bottom: 2px solid var(--or);
  padding-bottom: 0.28rem;
  transition: gap var(--t-fast), color var(--t-fast);
}
.lien-fleche:hover { gap: 0.85rem; color: var(--or-texte); }


/* ============================================================================
   05. TRAITEMENT DES VISUELS
   Toutes les images sont affichées EN COULEUR, telles que le club les a
   publiées. Seul un léger zoom au survol signale qu'un visuel est cliquable.
   ========================================================================== */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-surface-2);
  isolation: isolate;
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.media:hover img { transform: scale(1.03); }

/* Emplacement en attente de photo : trame diagonale dorée, jamais d'image
   de banque en remplissage. */
.media--attente {
  position: relative;
  background:
    repeating-linear-gradient(-45deg,
      transparent 0 9px,
      rgba(35, 33, 33, 0.07) 9px 10px),
    var(--color-surface-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}


/* ============================================================================
   06. BARRE UTILITAIRE ET HEADER
   ========================================================================== */
.topbar {
  background: var(--noir-deep);
  color: var(--on-noir-soft);
  font-size: 0.8rem;
}
:root[data-theme="sombre"] .topbar { color: #B8B2AD; }

.topbar__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0.5rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
}
.topbar__match {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  color: #FFFFFF;
}
.topbar__tag {
  display: inline-block;
  padding: 0.14rem 0.5rem;
  background: var(--or);
  color: #232121;
  border-radius: var(--radius);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.topbar__ou {
  display: inline-block;
  padding: 0.06rem 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.topbar__vs { color: #FFFFFF; font-weight: 700; }
.topbar__quand { color: var(--or); }

.topbar__links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.topbar__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color var(--t-fast);
  overflow-wrap: anywhere;
}
.topbar__links a:hover { color: var(--or); }

.topbar__connexion {
  padding: 0.18rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius);
  font-weight: 700;
}
.topbar__connexion:hover { background: rgba(255, 255, 255, 0.1); color: var(--or); }

/* ----------------------------------------------------------------------------
   SÉLECTEUR DE LANGUE
   Même dessin que la liste déroulante du formulaire de contact, en plus petit.
   -------------------------------------------------------------------------- */
.topbar__langue { position: relative; }

.choix--langue { position: relative; }
.choix--langue .choix__bouton {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0.5rem;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius);
  color: inherit;
  cursor: pointer;
  font-size: 0.78rem;
}
.choix--langue .choix__bouton:hover { background: rgba(255, 255, 255, 0.1); }
.choix--langue .choix__valeur { display: flex; align-items: center; gap: 0.4rem; }
.choix--langue .choix__code { font-weight: 800; letter-spacing: 0.06em; color: #FFFFFF; }
.choix--langue .choix__fleche {
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--t-fast);
  flex: none;
}
.choix--langue.est-ouvert .choix__fleche { transform: rotate(-135deg) translate(-2px, -2px); }

.choix--langue .choix__liste {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 120;
  min-width: 168px;
  background: var(--color-bg);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.choix--langue .choix__option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.9rem;
  font-size: 0.88rem;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--t-fast), padding-left var(--t-fast);
}
.choix--langue .choix__option:hover:not([aria-selected="true"]) {
  background: var(--color-surface);
  padding-left: 1.05rem;
}
.choix--langue .choix__option[aria-selected="true"] {
  font-weight: 700;
  background: var(--color-surface-2);
}
.choix--langue .choix__option[aria-selected="true"]::after {
  content: "";
  margin-left: auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--or);
  flex: none;
}
.choix--langue .choix__option .drapeau { transition: transform var(--t-fast); }
.choix--langue .choix__option:hover .drapeau { transform: scale(1.15); }

/* --- Drapeaux, dessinés en CSS : aucune image à charger, aucun emoji --- */
.drapeau {
  display: inline-block;
  width: 20px;
  height: 14px;
  flex: none;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.drapeau--fr {
  background-image: linear-gradient(90deg,
    #002395 0 33.33%, #FFFFFF 33.33% 66.66%, #ED2939 66.66% 100%);
}
/* Néerlandais : le drapeau des Pays-Bas est celui de la langue. Le lion
   flamand est un drapeau régional, pas linguistique. */
.drapeau--nl {
  background-image: linear-gradient(180deg,
    #AE1C28 0 33.33%, #FFFFFF 33.33% 66.66%, #21468B 66.66% 100%);
}
/* Union Jack en SVG et non en dégradés : les diagonales tracées au
   linear-gradient se déforment avec le rapport 20x14 et ne se rejoignent
   pas aux coins. Le SVG garde la construction exacte à toute taille. */
.drapeau--en {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath fill='%23012169' d='M0 0h60v30H0z'/%3E%3Cpath stroke='%23fff' stroke-width='6' d='m0 0 60 30m0-30L0 30'/%3E%3Cpath stroke='%23C8102E' stroke-width='4' d='m0 0 60 30m0-30L0 30'/%3E%3Cpath stroke='%23fff' stroke-width='10' d='M30 0v30M0 15h60'/%3E%3Cpath stroke='%23C8102E' stroke-width='6' d='M30 0v30M0 15h60'/%3E%3C/svg%3E");
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  transition: box-shadow var(--t-base);
}
.site-header.is-compact { box-shadow: var(--shadow-md); }

.site-header__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand { display: flex; align-items: center; gap: 0.7rem; }

/* Le blason tourne sur lui-même, en boucle et sans à-coups. Rotation seule :
   c'est une propriété composée par le GPU, elle ne provoque aucun recalcul de
   mise en page. La boucle est lente et longuement marquée à plat, sinon elle
   attire l'oeil en permanence au lieu de rester un détail. */
.brand__crest {
  width: 40px;
  height: auto;
  transform-origin: 50% 50%;
  animation: blason-tourne 9s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  will-change: transform;
}
@keyframes blason-tourne {
  0%, 55%  { transform: rotateY(0deg); }
  85%, 100% { transform: rotateY(360deg); }
}
.brand:hover .brand__crest { animation-duration: 2.2s; }
.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 0.98;
  font-weight: 800;
  font-stretch: 84%;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.brand__line1 { font-size: 1.02rem; }
.brand__line2 { font-size: 1.02rem; color: var(--color-text-soft); }

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav__list { display: flex; align-items: center; gap: 1.35rem; }
.nav__link {
  position: relative;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding-block: 0.4rem;
  transition: color var(--t-fast);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base);
}
.nav__link:hover::after,
.nav__link.is-actif::after { transform: scaleX(1); }

.nav__cta { padding: 0.6rem 1.1rem; font-size: 0.78rem; }

.theme {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  background: none;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.theme:hover { background: var(--color-surface-2); color: var(--or-texte); }
.theme__lune { display: none; }
:root[data-theme="sombre"] .theme__soleil { display: none; }
:root[data-theme="sombre"] .theme__lune { display: block; }

.burger {
  display: none;
  place-items: center;
  width: 42px; height: 42px;
  background: none;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  cursor: pointer;
}
.burger__icon--close { display: none; }
.burger[aria-expanded="true"] .burger__icon--open { display: none; }
.burger[aria-expanded="true"] .burger__icon--close { display: block; }

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(20, 19, 19, 0.55);
  backdrop-filter: blur(2px);
}


/* ============================================================================
   06 bis. BANDEAU D'ANNONCE
   ========================================================================== */
.annonce {
  display: block;
  overflow: hidden;
  background: var(--or);
  color: #232121;
  padding-block: 0.42rem;
}
.annonce__piste {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: max-content;
  animation: annonce-defile 34s linear infinite;
}
.annonce__piste span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.annonce__point {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #232121;
  flex: none;
}
@keyframes annonce-defile { to { transform: translateX(-50%); } }


/* ============================================================================
   07. HERO
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(480px, 74vh, 660px);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(4rem, 10vw, 6rem) clamp(6rem, 12vw, 8.5rem);
  overflow: hidden;
  background: var(--noir-deep);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
/* Photo en couleur. Seule une légère baisse de luminosité subsiste : c'est le
   voile ci-dessous, et non une désaturation, qui porte la lisibilité du titre. */
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: brightness(0.94);
}
/* Voile dense côté texte (à gauche), transparent côté droit : c'est lui qui
   garantit la lisibilité du titre quelle que soit la photo posée dessous. */
.hero__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(20, 19, 19, 0.94) 0%, rgba(20, 19, 19, 0.82) 42%, rgba(20, 19, 19, 0.34) 100%),
    linear-gradient(0deg, rgba(20, 19, 19, 0.62) 0%, transparent 55%);
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero__eyebrow {
  display: inline-block;
  margin: 0 0 1.1rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--or);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--or);
}

/* Pas de max-width : c'est le conteneur qui borne le titre. Une contrainte en
   « ch » sur une police à largeur variable se calcule sur le chiffre zéro et
   sous-estime toujours les capitales, ce qui casse le titre en quatre lignes. */
.hero__title {
  margin: 0 0 1.35rem;
  font-size: clamp(2.2rem, 6.4vw, 4.6rem);
  font-weight: 900;
  font-stretch: 84%;
  text-transform: uppercase;
  color: #FFFFFF;
  line-height: 0.98;
}
.hero__ligne { display: block; }
.hero__ligne:last-child { color: var(--or); }

.hero__lead {
  max-width: 46ch;
  font-size: clamp(1rem, 1.5vw, 1.13rem);
  color: #E6E2DE;
  margin-bottom: 1.9rem;
}

.hero__actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }

/* Le blason en filigrane côté droit a été retiré : il alourdissait la photo
   sans rien ajouter. Le blason vit dans l'en-tête, où il tourne. */


/* ============================================================================
   08. CARTE DU PROCHAIN MATCH
   Posée en chevauchement sur le bas du hero.
   ========================================================================== */
.fixture {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: clamp(-5.5rem, -8vw, -4rem) auto 0;
  padding-inline: var(--gutter);
}

.fixture__card {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-top: 4px solid var(--or);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.fixture__tag {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--or-texte);
}

.fixture__duel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3rem);
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.fixture__equipe {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-weight: 800;
  font-stretch: 88%;
  font-size: clamp(1rem, 2vw, 1.3rem);
  text-transform: uppercase;
}
.fixture__logo, .fixture__mono {
  width: 54px; height: 54px;
  flex: none;
  display: grid;
  place-items: center;
}
.fixture__logo { object-fit: contain; }
.fixture__mono {
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-line);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-text-soft);
}
.fixture__vs {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
}

.fixture__meta {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.88rem;
  color: var(--color-text-soft);
}
.fixture__meta li { display: flex; align-items: center; gap: 0.45rem; }
.fixture__meta svg { color: var(--or-texte); }

.fixture__actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* État d'attente : ni faux match, ni case vide. */
.fixture__attente {
  display: grid;
  gap: 1.1rem;
  justify-items: center;
  text-align: center;
}
.fixture__attente-titre {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  text-transform: uppercase;
}
.fixture__attente-texte {
  max-width: 62ch;
  color: var(--color-text-soft);
  font-size: 0.95rem;
}


/* ============================================================================
   09. ACTUALITÉS
   Une vedette large + quatre entrées en colonne.
   ========================================================================== */
.news__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}

.news__vedette { display: grid; gap: 1.25rem; }
.news__media { display: block; aspect-ratio: 16 / 9; }
.news__corps { display: grid; gap: 0.6rem; }

.news__date {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.news__titre { font-size: clamp(1.3rem, 2.6vw, 1.85rem); }
.news__titre--petit { font-size: 1.08rem; }
.news__titre a { background-image: linear-gradient(var(--or), var(--or));
  background-size: 0% 3px; background-repeat: no-repeat;
  background-position: 0 100%; padding-bottom: 2px;
  transition: background-size var(--t-base); }
.news__titre a:hover { background-size: 100% 3px; }

.news__extrait { margin: 0; color: var(--color-text-soft); font-size: 0.95rem; }

.news__liste { display: grid; }
.news__item {
  display: grid;
  gap: 0.4rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--color-line);
}
.news__item:first-child { padding-top: 0; }
.news__item:last-child { border-bottom: 0; padding-bottom: 0; }


/* ============================================================================
   10. CALENDRIER ET RÉSULTATS
   ========================================================================== */
/* ----------------------------------------------------------------------------
   BLASONS DES CLUBS
   Une pastille de taille fixe, l'image à sa taille NATIVE dedans. Les écussons
   des adversaires ne font que 30 px : agrandis, ils baveraient. La pastille
   porte le poids visuel, l'image reste nette.
   -------------------------------------------------------------------------- */
.blason {
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  overflow: hidden;
  font-weight: 800;
  color: var(--color-text-soft);
  line-height: 1;
}
.blason img { width: auto; height: auto; object-fit: contain; }
/* Le blason du club est en haute définition : lui peut remplir la pastille. */
.blason.est-nous { background: var(--color-bg); }
.blason.est-nous img { height: 84%; width: auto; }

.blason--table   { width: 28px; height: 28px; font-size: 0.6rem; }
.blason--table img { max-width: 22px; max-height: 22px; }
.blason--ligne   { width: 30px; height: 30px; font-size: 0.62rem; }
.blason--ligne img { max-width: 24px; max-height: 24px; }
.blason--carte   { width: 52px; height: 52px; font-size: 0.85rem; }
.blason--carte img { max-width: 34px; max-height: 34px; }
.blason--fixture { width: 58px; height: 58px; font-size: 0.95rem; }
.blason--fixture img { max-width: 38px; max-height: 38px; }


/* ----------------------------------------------------------------------------
   LES DEUX PROCHAINES RENCONTRES
   Colonne de droite de la section calendrier, sous les filtres.
   -------------------------------------------------------------------------- */
.upcards {
  display: grid;
  gap: clamp(0.85rem, 2vw, 1.25rem);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.upcard {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.15rem, 2.5vw, 1.6rem);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
/* La toute prochaine se distingue par le filet doré, pas par sa taille. */
.upcard--next { border-top: 4px solid var(--or); box-shadow: var(--shadow-md); }
.upcard.is-pointe { border-color: var(--or); }

.upcard__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-line);
}
.upcard__quand {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.upcard__serie {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--or-texte);
}

.upcard__duel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
}
.upcard__equipe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  font-weight: 800;
  font-stretch: 88%;
  font-size: 0.92rem;
  line-height: 1.15;
}
.upcard__logo, .upcard__mono {
  width: 46px; height: 46px;
  flex: none;
  display: grid;
  place-items: center;
}
.upcard__logo { object-fit: contain; }
.upcard__mono {
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-line);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--color-text-soft);
}
.upcard__vs {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.upcard__score {
  font-size: 1.4rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  padding: 0.2rem 0.6rem;
  background: var(--color-surface-2);
  border-radius: var(--radius);
}

.upcard__lieu {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.upcard__ou {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius);
  background: var(--color-surface-2);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}
.upcard__ou--dom { background: var(--or); color: #232121; }

.upcard__actions { margin-top: auto; }
.upcard__actions:empty { display: none; }

/* --- Compte à rebours --- */
.rebours__grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
}
.rebours__unite {
  display: grid;
  gap: 0.15rem;
  padding: 0.5rem 0.25rem;
  background: var(--noir);
  border-radius: var(--radius);
  text-align: center;
}
.rebours__valeur {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--or);
}
.rebours__libelle {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-noir-soft);
}
.rebours__fini {
  margin: 0;
  padding: 0.6rem 0.75rem;
  background: var(--color-surface-2);
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
}

.schedule__compte {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.filtres { display: flex; gap: 0.4rem; }
.filtre {
  padding: 0.5rem 1.05rem;
  background: none;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.filtre.is-actif { background: var(--noir); border-color: var(--noir); color: var(--on-noir); }

.match-ligne {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-line-strong);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  transition: border-color var(--t-fast);
}
/* Les rencontres à la Neuville portent le filet doré : c'est là qu'on va. */
.match-ligne--dom { border-left-color: var(--or); }
.match-ligne:hover { background: var(--color-surface); }

.match-ligne__quand { margin: 0; font-size: 0.84rem; color: var(--color-text-soft); }
.match-ligne__jour { display: block; font-weight: 800; color: var(--color-text); text-transform: uppercase; }
.match-ligne__duel {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-weight: 700;
  font-stretch: 88%;
  font-size: 1.02rem;
}
.match-ligne__ou {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius);
  background: var(--color-surface-2);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.match-ligne--dom .match-ligne__ou { background: var(--or); color: #232121; }
.match-ligne__score {
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: 0.25rem 0.7rem;
  background: var(--color-surface-2);
  border-radius: var(--radius);
}
.match-ligne__lieu { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--color-text-muted); }

.schedule__plus { margin-top: 0.75rem; }

/* La rencontre pointée depuis la grille mensuelle. */
.match-ligne.is-pointe {
  border-color: var(--or);
  border-left-color: var(--or);
  box-shadow: 0 0 0 3px rgba(255, 210, 0, 0.35);
}

/* Grille du mois à GAUCHE, large ; rencontres et liste à droite. */
.schedule__inner {
  display: grid;
  grid-template-columns: minmax(420px, 1.05fr) 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.schedule__droite { display: grid; align-content: start; }


/* ============================================================================
   10 bis. CALENDRIER DU MOIS
   Une vraie grille de sept colonnes, la semaine commençant le lundi.
   ========================================================================== */
.cal {
  position: sticky;
  top: calc(var(--header-h) + 1rem);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-top: 4px solid var(--or);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 2vw, 1.6rem);
}

.cal__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}
.cal__mois {
  margin: 0;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 800;
  font-stretch: 88%;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.cal__fleche {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  background: none;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.cal__fleche:hover:not(:disabled) { background: var(--noir); color: var(--on-noir); }
.cal__fleche:disabled { opacity: 0.3; cursor: default; }

.cal__jours,
.cal__grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.cal__jours {
  margin-bottom: 8px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--color-text-muted);
}

.cal__case {
  position: relative;
  display: grid;
  place-content: center;
  gap: 2px;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  font: inherit;
  color: var(--color-text-soft);
  text-align: center;
}
.cal__case--vide { visibility: hidden; }
.cal__num { font-size: clamp(0.9rem, 1.5vw, 1.05rem); font-variant-numeric: tabular-nums; }
.cal__ou {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Aujourd'hui : un simple anneau, aucune couleur volée aux jours de match. */
.cal__case.is-aujourdhui { border-color: var(--color-line-strong); font-weight: 700; }

/* Un jour de match est un bouton : il est cliquable et doit se voir. */
button.cal__case { cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t-fast); }
button.cal__case:hover { transform: translateY(-2px); }

.cal__case.is-dom {
  background: var(--or);
  border-color: var(--or);
  color: #232121;          /* obligatoire : du blanc sur cet or ferait 1,4:1 */
  font-weight: 800;
}
.cal__case.is-ext {
  background: var(--color-surface-2);
  border-color: var(--color-line-strong);
  color: var(--color-text);
  font-weight: 700;
}
.cal__case.is-joue { opacity: 0.55; }
.cal__case.is-choisi { box-shadow: 0 0 0 3px rgba(35, 33, 33, 0.35); }

.cal__legende {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.74rem;
  color: var(--color-text-muted);
}
.cal__legende li { display: flex; align-items: center; gap: 0.4rem; }
.cal__puce {
  width: 11px; height: 11px;
  border-radius: 2px;
  flex: none;
}
.cal__puce--dom { background: var(--or); }
.cal__puce--ext { background: var(--color-surface-2); border: 1px solid var(--color-line-strong); }


/* ============================================================================
   10 ter. CLASSEMENT
   ========================================================================== */
.tableau-cadre {
  overflow-x: auto;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

table.classement {
  width: 100%;
  min-width: 620px;      /* en dessous, le tableau défile DANS son cadre */
  border-collapse: collapse;
  font-size: 0.9rem;
}
table.classement th {
  padding: 0.75rem 0.6rem;
  background: var(--color-surface-2);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  text-align: center;
  white-space: nowrap;
}
table.classement th:nth-child(2) { text-align: left; }
table.classement td {
  padding: 0.6rem;
  border-top: 1px solid var(--color-line);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
table.classement abbr { text-decoration: none; border: 0; }

.classement__rang {
  width: 44px;
  font-weight: 800;
  color: var(--color-text-muted);
}
.classement__club {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-align: left !important;
  font-weight: 600;
  white-space: nowrap;
}
.classement__club img { width: 22px; height: auto; flex: none; }
.classement__pts { font-weight: 800; font-size: 1rem; }

/* La ligne du club, repérable d'un coup d'oeil. */
table.classement tr.is-nous td {
  background: rgba(255, 210, 0, 0.14);
  font-weight: 700;
}
table.classement tr.is-nous td:first-child { box-shadow: inset 3px 0 0 var(--or); }

/* Coupure entre play-offs de montée et de maintien. */
table.classement tr.is-coupure td { border-top: 2px solid var(--noir); }

.classement__note {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* État d'attente du calendrier : la situation réelle du club, pas une case vide. */
.schedule__attente {
  display: grid;
  gap: 1.25rem;
  max-width: 76ch;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--or);
  border-radius: var(--radius);
}
.schedule__attente h3 {
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  text-transform: uppercase;
}
.schedule__attente p { color: var(--color-text-soft); font-size: 0.97rem; }
.schedule__reperes { display: grid; gap: 0.75rem; }
.schedule__repere {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.92rem;
}
.schedule__repere b {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--or-texte);
  padding-top: 0.16rem;
}
.schedule__repere span { color: var(--color-text-soft); }


/* ============================================================================
   11. FRISE CHRONOLOGIQUE
   Défilement horizontal par cran. La largeur des étapes est en rem, jamais
   en pourcentage : dans un conteneur overflow-x: auto, un pourcentage ne se
   résout pas et le rail cesse de déborder, donc de défiler.
   ========================================================================== */
.frise { position: relative; margin-top: 0.5rem; }

.frise__piste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(15.5rem, 26vw, 19.5rem);
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  padding-inline: var(--gutter);
  padding-block: 2.25rem 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--color-line-strong) transparent;
}
.frise__piste::-webkit-scrollbar { height: 6px; }
.frise__piste::-webkit-scrollbar-thumb { background: var(--color-line-strong); border-radius: 99px; }

.frise__etape {
  position: relative;
  scroll-snap-align: start;
  padding: 2.5rem 1.75rem 0 0;
  border-top: 2px solid var(--color-line);
}
/* La pastille sur la ligne de temps. */
.frise__etape::before {
  content: "";
  position: absolute;
  top: -7px; left: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--color-line-strong);
}
.frise__etape--phare { border-top-color: var(--or); }
.frise__etape--phare::before { background: var(--or); border-color: var(--or); }

.frise__annee {
  margin: 0 0 0.5rem;
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 900;
  font-stretch: 84%;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-line-strong);
  font-variant-numeric: tabular-nums;
}
.frise__etape--phare .frise__annee { color: var(--or-texte); }
.frise__titre { font-size: 1.06rem; margin-bottom: 0.5rem; }
.frise__texte { margin: 0; font-size: 0.9rem; color: var(--color-text-soft); }

.frise__commandes {
  display: flex;
  gap: 0.5rem;
  max-width: var(--container);
  margin: 1rem auto 0;
  padding-inline: var(--gutter);
}
.frise__btn {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  background: none;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.frise__btn:hover:not(:disabled) { background: var(--noir); color: var(--on-noir); }
.frise__btn:disabled { opacity: 0.35; cursor: default; }

.frise__note {
  margin-top: 1.5rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}


/* ============================================================================
   11 bis. GALERIE ET VISIONNEUSE
   Page galerie.html. Les modules de script.js se désactivent tout seuls quand
   leurs éléments sont absents : les deux pages partagent le même fichier.
   ========================================================================== */
/* -- Le bandeau de filtres ------------------------------------------------
   Des pastilles, pas un <select> : les thèmes sont peu nombreux et le compte
   de photos doit rester lisible sans ouvrir quoi que ce soit. Il défile
   horizontalement sur téléphone plutôt que de passer à la ligne. */
.gal__filtres {
  display: flex;
  gap: 0.5rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}
.gal__filtres::-webkit-scrollbar { display: none; }

.gal__filtre {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  padding: 0.55rem 0.95rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  color: var(--color-text-soft);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.gal__filtre:hover { background: var(--color-surface-2); color: var(--color-text); }
.gal__filtre:active { transform: translateY(1px); }

.gal__filtre-n {
  min-width: 1.5rem;
  padding: 0.05rem 0.3rem;
  background: var(--color-surface-2);
  border-radius: 2px;
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
  color: var(--color-text-muted);
  transition: background-color var(--t-fast), color var(--t-fast);
}
/* --noir s'inverse en thème sombre : la couleur du texte doit suivre le même
   jeton, sinon la pastille active devient blanc sur blanc. */
.gal__filtre.est-actif {
  background: var(--noir);
  border-color: var(--noir);
  color: var(--on-noir);
}
.gal__filtre.est-actif .gal__filtre-n { background: var(--or); color: #232121; }

/* -- Le mur ---------------------------------------------------------------
   Une mise en colonnes plutôt qu'une grille : chaque photo garde sa hauteur
   réelle, portrait comme paysage, et rien n'est recadré. C'est l'alternance
   des cadrages qui donne le rythme, pas une tuile mise en avant. */
.gal__grille {
  columns: 3;
  column-gap: clamp(0.75rem, 2vw, 1.25rem);
}
.gal__case {
  display: block;
  break-inside: avoid;
  margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
}

.gal__bouton {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--color-surface-2);
  cursor: pointer;
  border-radius: var(--radius);
  overflow: hidden;
}
/* La largeur et la hauteur réelles sont sur la balise : la place est réservée
   avant le chargement, la mosaïque ne saute pas photo après photo. */
.gal__bouton img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--t-slow);
}
.gal__bouton:hover img { transform: scale(1.04); }

.gal__loupe {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  background: rgba(20, 19, 19, 0.72);
  border-radius: var(--radius);
  color: var(--or);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.gal__bouton:hover .gal__loupe { opacity: 1; transform: none; }

@media (max-width: 900px) { .gal__grille { columns: 2; } }
@media (max-width: 560px) {
  .gal__grille { columns: 1; }
  /* Sur téléphone la loupe ne survole rien : elle reste posée. */
  .gal__loupe { opacity: 1; transform: none; }
}

/* -- Les reels ------------------------------------------------------------
   Format vertical, comme ils sont publiés. Un rail qui défile et s'aimante,
   parce que le nombre de reels varie d'une semaine à l'autre. */
.reels__piste {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
}
.reel {
  flex: none;
  width: min(270px, 74vw);
  scroll-snap-align: start;
}
.reel__cadre {
  aspect-ratio: 9 / 16;
  background: var(--noir-deep);
  border-radius: var(--radius);
  overflow: hidden;
}
.reel__cadre iframe { display: block; width: 100%; height: 100%; border: 0; }

/* La vignette tient toute la carte tant que le lecteur n'est pas demandé. */
.reel__lancer {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.reel__lancer img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow), opacity var(--t-fast);
}
.reel__lancer:hover img { transform: scale(1.04); opacity: 0.88; }

.reel__play--sur {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px; height: 56px;
  transition: transform var(--t-fast);
}
.reel__lancer:hover .reel__play--sur { transform: scale(1.08); }
.reel__lancer:active .reel__play--sur { transform: scale(0.96); }
.reel__legende {
  margin: 0.7rem 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-text-soft);
}

/* En l'absence de reel collé dans REELS, une seule carte qui mène à la page
   Facebook du club. Elle occupe toute la largeur : un rail d'une seule
   vignette verticale aurait l'air d'un chargement raté. */
.reel--lien { width: 100%; }
.reel__invite {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.1rem, 3vw, 1.6rem);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--t-fast);
}
.reel__invite:hover { background: var(--color-surface-2); }
/* --noir-deep, pas --noir : il reste sombre dans les deux thèmes, et l'or
   n'est lisible que sur du sombre. */
.reel__play {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  flex: none;
  background: var(--noir-deep);
  border-radius: 50%;
  color: var(--or);
}
.reel__invite-txt { font-weight: 700; line-height: 1.4; }

.gal__note {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 68ch;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.gal__note code {
  padding: 0.05rem 0.3rem;
  background: var(--color-surface-2);
  border-radius: 2px;
  font-size: 0.92em;
}

.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  padding: clamp(3.5rem, 6vw, 4.5rem) clamp(0.75rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
  background: rgba(20, 19, 19, 0.94);
}
.visionneuse__barre {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem clamp(0.75rem, 3vw, 2rem);
}
.visionneuse__compteur {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--or);
}
.visionneuse__btn,
.visionneuse__fleche {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.visionneuse__btn:hover,
.visionneuse__fleche:hover { background: var(--or); color: #232121; }

.visionneuse__figure {
  margin: 0;
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  min-width: 0;
}
.visionneuse__figure img {
  max-width: 100%;
  max-height: 74dvh;
  width: auto;
  border-radius: var(--radius);
}
.visionneuse__legende {
  max-width: 70ch;
  font-size: 0.88rem;
  text-align: center;
  color: #E6E2DE;
}


/* ============================================================================
   12. PALMARÈS (aplat noir plein)
   ========================================================================== */
.palmares {
  background: var(--noir-deep);
  color: #FFFFFF;
  padding-block: var(--space-section);
}
:root[data-theme="sombre"] .palmares { color: #F3F0ED; }

.palmares__intro { max-width: 58ch; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.palmares__titre {
  position: relative;
  padding-top: 1.15rem;
  font-size: clamp(1.85rem, 4.2vw, 3rem);
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 1.15rem;
}
.palmares__titre::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 56px; height: 4px;
  background: var(--or);
}
.palmares__texte { margin: 0; color: #C9C4C0; }

/* Exactement 3 colonnes : six entrées font deux rangées pleines. En auto-fit,
   le lot tombe sur cinq colonnes en grand écran et laisse quatre cases vides
   au deuxième rang, ce qui se lit comme une grille cassée. */
.palmares__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.palmares__item {
  background: var(--noir-deep);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 1.75rem);
}
.palmares__chiffre {
  margin: 0 0 0.5rem;
  font-size: clamp(2.6rem, 5.5vw, 3.6rem);
  font-weight: 900;
  font-stretch: 84%;
  line-height: 1;
  color: var(--or);
  font-variant-numeric: tabular-nums;
}
.palmares__libelle {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
}
.palmares__detail { margin: 0; font-size: 0.83rem; color: #A29B96; }


/* ============================================================================
   13. STAFF
   ========================================================================== */
/* Quatre colonnes exactement : huit membres du staff font deux rangées
   pleines. En auto-fill, le nombre de colonnes dépend de la largeur et laisse
   presque toujours une case vide en fin de grille. */
.staff__grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.staff__carte {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.staff__carte:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* L'entraîneur principal se distingue par un filet doré, pas par sa taille :
   agrandir sa carte casserait le compte exact de cellules. */
.staff__carte--chef { border-top: 4px solid var(--or); }

.staff__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
}
/* Mention explicite : sans elle, la trame se lit comme une image cassée. */
.staff__portrait.media--attente::after {
  content: "Portrait à venir";
  position: absolute;
  left: 50%;
  bottom: 0.85rem;
  transform: translateX(-50%);
  padding: 0.2rem 0.6rem;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.staff__portrait img { width: 100%; height: 100%; object-fit: cover; }
.staff__initiales {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 900;
  font-stretch: 84%;
  letter-spacing: 0.02em;
  color: var(--color-line-strong);
}
.staff__infos { padding: 1rem 1.15rem 1.15rem; }
.staff__role {
  margin: 0 0 0.25rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--or-texte);
}
.staff__nom { font-size: 1.02rem; }

.staff__noyau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  padding: clamp(1.35rem, 3vw, 2rem);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--or);
  border-radius: var(--radius);
}
.staff__noyau-texte { max-width: 58ch; }
.staff__noyau-titre { font-size: 1.1rem; margin-bottom: 0.35rem; text-transform: uppercase; }
.staff__noyau-texte p { margin: 0; color: var(--color-text-soft); font-size: 0.95rem; }


/* ============================================================================
   14. STADE
   ========================================================================== */
.stade__inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.stade__lead { margin-top: 1.25rem; color: var(--color-text-soft); font-size: 1.05rem; }

.stade__fiche { margin: 2rem 0; display: grid; gap: 0; }
.stade__ligne {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1rem;
  padding-block: 1rem;
  border-top: 1px solid var(--color-line);
}
.stade__ligne:last-child { border-bottom: 1px solid var(--color-line); }
.stade__ligne dt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.stade__ligne dt svg { color: var(--or-texte); }
.stade__ligne dd { margin: 0; font-weight: 600; }

/* Deux photos décalées verticalement : c'est ce décalage qui donne le
   déséquilibre voulu, sans casser la grille. */
.stade__visuels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  align-items: start;
}
.stade__photo { margin: 0; }
.stade__photo--haute .media { aspect-ratio: 3 / 4; }
.stade__photo--basse { margin-top: clamp(2rem, 6vw, 4rem); }
.stade__photo--basse .media { aspect-ratio: 4 / 5; }


/* ============================================================================
   15. FORMATION
   ========================================================================== */
.formation__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* Portrait, comme la photo qu'il reçoit : un cadre paysage la recadrerait
   sur les jambes des deux hommes plutôt que sur leurs visages. */
.formation__media { aspect-ratio: 3 / 4; }
.formation__texte p { color: var(--color-text-soft); }
.formation__texte .section__title { margin-bottom: 1.25rem; }
.formation__texte .lien-fleche { margin-top: 0.75rem; }


/* ============================================================================
   16. BILLETTERIE ET HOSPITALITÉ
   Deux cellules de tailles différentes : exactement autant de cellules
   que de contenus, jamais de case vide pour « remplir la grille ».
   ========================================================================== */
.billet__grille {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: stretch;
}

.billet__carte {
  border-radius: var(--radius);
  overflow: hidden;
}
.billet__carte--large {
  background: var(--noir-deep);
  color: #FFFFFF;
  padding: clamp(1.75rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.billet__carte--vip {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  display: grid;
  grid-template-rows: auto 1fr;
}
.billet__photo { aspect-ratio: 16 / 10; border-radius: 0; }
.billet__vip-corps { padding: clamp(1.25rem, 3vw, 1.85rem); }

.billet__pastille {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 1.15rem;
  border-radius: 50%;
  background: var(--or);
  color: #232121;
}
.billet__pastille--clair {
  width: 44px; height: 44px;
  background: transparent;
  border: 2px solid var(--or);
  color: var(--or-texte);
}

.billet__titre {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.billet__titre--petit { font-size: clamp(1.15rem, 2.2vw, 1.35rem); }
.billet__carte--large .billet__texte { color: #C9C4C0; max-width: 52ch; }
.billet__carte--vip .billet__texte { color: var(--color-text-soft); font-size: 0.95rem; }
.billet__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.6rem; }

/* Les quatre étapes du parcours d'achat, en clair. */
.billet__pas { display: grid; gap: 0.55rem; margin-top: 1.35rem; }
.billet__pas li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.92rem;
  color: #E6E2DE;
}
.billet__pas span {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 210, 0, 0.16);
  border: 1px solid var(--or);
  color: var(--or);
  font-size: 0.72rem;
  font-weight: 800;
}


/* ============================================================================
   17. PARTENAIRES
   ========================================================================== */
/* Le bandeau fait deux fois la largeur de la série : sans cette coupe, il
   rallonge le document et TOUTE la page devient défilable horizontalement.
   « clip » et non « hidden » : hidden créerait un conteneur de défilement,
   ce qui casserait un position: sticky ou une animation posée dedans. */
.partners {
  overflow-x: hidden;  /* repli pour les navigateurs sans « clip » */
  overflow-x: clip;
}

.partners__piste {
  display: flex;
  width: max-content;
  animation: partners-defile 46s linear infinite;
}
.partners__piste:hover { animation-play-state: paused; }
.partners__serie { display: flex; align-items: center; gap: clamp(2rem, 5vw, 3.5rem); padding-right: clamp(2rem, 5vw, 3.5rem); }
.partners__serie span,
.partners__serie a {
  display: grid;
  place-items: center;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  transition: transform var(--t-base);
}
.partners__serie a:hover { transform: translateY(-3px) scale(1.04); }
/* Logos en couleur, à leur taille réelle, sans filtre. */
.partners__serie img {
  width: auto;
  height: clamp(40px, 5vw, 58px);
  object-fit: contain;
}
/* En thème sombre, un logo détouré à texte noir disparaîtrait sur le fond.
   On lui pose une plaque blanche plutôt que de l'inverser, ce qui trahirait
   les couleurs de la marque. */
:root[data-theme="sombre"] .partners__serie span,
:root[data-theme="sombre"] .partners__serie a { background: #FFFFFF; }
@keyframes partners-defile { to { transform: translateX(-50%); } }

.partners__mot {
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 62ch;
  color: var(--color-text-soft);
}
.partners__mot a {
  font-weight: 700;
  color: var(--color-text);
  border-bottom: 2px solid var(--or);
}


/* ============================================================================
   18. CONTACT ET FORMULAIRE
   ========================================================================== */
.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.contact__lead { margin-top: 1.25rem; color: var(--color-text-soft); font-size: 1.05rem; }

.contact__liste { margin-top: 2rem; display: grid; gap: 1.35rem; }
.contact__liste li { display: flex; gap: 0.9rem; align-items: flex-start; }
.contact__liste svg { color: var(--or-texte); margin-top: 0.2rem; }
.contact__liste p { margin: 0; }
.contact__label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.contact__liste a { font-weight: 600; overflow-wrap: anywhere; border-bottom: 2px solid var(--or); }

.formulaire {
  display: grid;
  gap: 1.15rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
:root[data-theme="sombre"] .formulaire { background: var(--color-surface-2); }

.champ { display: grid; gap: 0.5rem; }
.champ label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}
.champ input,
.champ textarea {
  width: 100%;
  padding: 0.72rem 0.85rem;
  background: var(--color-bg);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.champ textarea { resize: vertical; min-height: 120px; }
.champ input:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--color-text);
  box-shadow: 0 0 0 3px rgba(255, 210, 0, 0.35);
}
.champ input[aria-invalid="true"],
.champ textarea[aria-invalid="true"] { border-color: var(--color-danger); }

.champ__erreur {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-danger);
}

/* Liste déroulante dessinée : un <select> natif ne se met pas en forme
   proprement d'un navigateur à l'autre. */
.choix { position: relative; }
.choix__bouton {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.72rem 0.85rem;
  background: var(--color-bg);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
}
.choix__bouton:focus-visible { outline: none; border-color: var(--color-text); box-shadow: 0 0 0 3px rgba(255, 210, 0, 0.35); }
.choix__fleche {
  width: 8px; height: 8px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-fast);
  flex: none;
}
.choix__bouton[aria-expanded="true"] .choix__fleche { transform: rotate(-135deg) translate(-3px, -3px); }
.choix__liste {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 20;
  background: var(--color-bg);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.choix__option { padding: 0.6rem 0.85rem; cursor: pointer; font-size: 0.94rem; }
.choix__option:hover,
.choix__option.is-survol { background: var(--color-surface); }
.choix__option[aria-selected="true"] { font-weight: 700; }
.choix__option[aria-selected="true"]::after {
  content: "";
  float: right;
  width: 7px; height: 7px;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: var(--or);
}

.formulaire__envoi { justify-self: start; position: relative; }
.formulaire__spin {
  display: none;
  width: 15px; height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: preloader-tourne 0.75s linear infinite;
}
.formulaire.is-envoi .formulaire__spin { display: block; }
.formulaire.is-envoi .formulaire__envoi { pointer-events: none; opacity: 0.75; }

.formulaire__etat {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  font-size: 0.92rem;
  font-weight: 600;
}
.formulaire__etat--ok    { background: rgba(255, 210, 0, 0.16); border: 1px solid var(--or); color: var(--color-text); }
.formulaire__etat--ko    { background: var(--color-danger-soft); border: 1px solid var(--color-danger); color: var(--color-danger); }
:root[data-theme="sombre"] .formulaire__etat--ko { background: rgba(179, 38, 30, 0.2); }


/* ============================================================================
   19. PIED DE PAGE
   ========================================================================== */
.footer { background: var(--noir-deep); color: #C9C4C0; }
:root[data-theme="sombre"] .footer { border-top: 1px solid var(--color-line); }

.footer__inner {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.footer__crest { width: 58px; height: auto; margin-bottom: 1rem; }
.footer__nom {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 800;
  font-stretch: 86%;
  line-height: 1.05;
  text-transform: uppercase;
  color: #FFFFFF;
}
.footer__baseline { margin: 0; font-size: 0.88rem; color: #A29B96; }

.footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.footer__titre {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 0.9rem;
}
.footer__nav ul { display: grid; gap: 0.55rem; }
.footer__nav a {
  font-size: 0.9rem;
  transition: color var(--t-fast);
  overflow-wrap: anywhere;
}
.footer__nav a:hover { color: #FFFFFF; }

/* --- Application et moyens de paiement --- */
.footer__services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: clamp(2rem, 4vw, 2.75rem);
}
.footer__appli-texte { margin: 0 0 1.1rem; font-size: 0.88rem; color: #A29B96; }

.footer__badges { display: flex; gap: 0.85rem; flex-wrap: wrap; align-items: center; }
.footer__badges img {
  height: 46px;
  width: auto;
  border-radius: var(--radius);
  transition: transform var(--t-fast);
}
.footer__badges a:hover img { transform: translateY(-2px); }

/* Chaque logo de paiement reçoit une plaque blanche : Visa, Amex et Apple Pay
   sont dessinés pour du blanc et disparaîtraient sur l'aplat noir. */
.footer__cartes { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.footer__cartes li {
  display: grid;
  place-items: center;
  min-width: 54px;
  height: 34px;
  padding: 0 0.5rem;
  background: #FFFFFF;
  border-radius: var(--radius);
}
.footer__cartes img { height: 20px; width: auto; object-fit: contain; }

.footer__bas { border-top: 1px solid rgba(255, 255, 255, 0.12); }

/* --- Signature --- */
.credit { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; }
.credit__sep {
  display: inline-block;
  width: 22px; height: 1px;
  background: rgba(255, 255, 255, 0.28);
  margin-inline: 0.35rem;
}
.credit__coeur { color: var(--or); vertical-align: -2px; }
.credit a { font-weight: 700; color: #FFFFFF; border-bottom: 1px solid var(--or); }
.credit a:hover { color: var(--or); }
.footer__bas-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  flex-wrap: wrap;
  padding-block: 1.1rem;
  font-size: 0.82rem;
}
.footer__bas p { margin: 0; }
.footer__legal { display: flex; gap: 1.25rem; }
.footer__legal a:hover { color: var(--or); }


/* ============================================================================
   19 bis. PAGES LÉGALES
   Une seule colonne de lecture, réutilisée par mentions-legales.html et
   confidentialite.html.
   ========================================================================== */
.legal { padding-block: clamp(3rem, 7vw, 5.5rem); }
.legal__inner { max-width: 74ch; }
.legal__retour { display: inline-flex; margin-bottom: 2rem; }
.legal h1 {
  position: relative;
  padding-top: 1.15rem;
  font-size: clamp(1.85rem, 4.2vw, 2.8rem);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.legal h1::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 56px; height: 4px;
  background: var(--or);
}
.legal__maj { font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 2.5rem; }
.legal h2 {
  font-size: 1.2rem;
  text-transform: uppercase;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}
.legal p, .legal li { color: var(--color-text-soft); }
.legal ul { display: grid; gap: 0.5rem; margin: 0 0 1rem; padding-left: 1.15rem; list-style: disc; }
.legal a { font-weight: 600; color: var(--color-text); border-bottom: 2px solid var(--or); }


/* ============================================================================
   20. RETOUR EN HAUT
   ========================================================================== */
.totop {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-totop);
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: var(--noir);
  color: var(--on-noir);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: background-color var(--t-fast), transform var(--t-fast);
}
.totop:hover { background: var(--noir-soft); transform: translateY(-2px); }


/* ============================================================================
   21. APPARITION AU DÉFILEMENT
   ----------------------------------------------------------------------------
   Chaque section anime ses éléments un par un quand elle entre dans l'écran,
   et REJOUE l'animation à chaque nouvelle entrée, en descendant comme en
   remontant. Quand la section sort complètement, ses éléments sont remis dans
   leur état de départ pour pouvoir rejouer.

   Ce sont des TRANSITIONS, pas des keyframes : rejouer se réduit à retirer
   une classe, sans avoir à relancer une animation ni à forcer un reflow.

   Seules « transform » et « opacity » sont animées : ce sont les deux
   propriétés que le compositeur traite sans recalculer la mise en page.

   Le décalage de chaque élément est porté par --anim-delai, posé en ligne par
   script.js : c'est ce qui produit l'entrée en cascade.
   ========================================================================== */
:root { --anim-duree: 820ms; --anim-ease: cubic-bezier(0.22, 1, 0.36, 1); }

[data-anim] {
  opacity: 0;
  transition:
    opacity var(--anim-duree) var(--anim-ease) var(--anim-delai, 0ms),
    transform var(--anim-duree) var(--anim-ease) var(--anim-delai, 0ms);
}

/* Les six mouvements. Deux voisins d'une même section n'en reçoivent jamais
   le même : c'est script.js qui les répartit selon la nature de l'élément. */
[data-anim="monter"]  { transform: translate3d(0, 38px, 0); }
[data-anim="tomber"]  { transform: translate3d(0, -28px, 0); }
[data-anim="gauche"]  { transform: translate3d(-46px, 0, 0); }
[data-anim="droite"]  { transform: translate3d(46px, 0, 0); }
[data-anim="zoom"]    { transform: scale(1.07); }
[data-anim="gonfler"] { transform: scale(0.92); }
[data-anim="pivot"]   {
  transform: perspective(900px) rotateX(9deg) translate3d(0, 30px, 0);
  transform-origin: 50% 100%;
}

/* État final, commun à tous. */
[data-anim].est-anime { opacity: 1; transform: none; }

/* Un élément décalé de 46 px vers la droite AVANT d'entrer dépasse le cadre et
   rend toute la page défilable de côté. On coupe donc sur de vrais blocs.
   « clip » et non « hidden » : hidden créerait un conteneur de défilement, ce
   qui casserait le position: sticky de la grille du mois. Et poser la coupe
   sur html ou body ne servirait à rien, la valeur y est propagée à la fenêtre. */
main, .footer {
  overflow-x: hidden;   /* repli pour les navigateurs sans « clip » */
  overflow-x: clip;
}

/* will-change n'est posé QUE le temps du mouvement : le laisser en permanence
   réserverait une couche GPU par élément sur toute la page. */
[data-anim]:not(.est-anime) { will-change: transform, opacity; }


/* ============================================================================
   22. RESPONSIVE
   Le seuil du menu mobile est à 1140 px. Mesuré : avec huit liens plus
   l'appel à l'action, la barre passe sur DEUX LIGNES entre 1081 et 1139 px.
   Ce seuil est répété dans le matchMedia du module 4 de script.js : si vous
   ajoutez un lien, remesurez et gardez les deux valeurs alignées.
   ========================================================================== */
@media (max-width: 1140px) {
  .burger { display: grid; }

  .nav {
    position: fixed;
    top: 0; right: 0;
    z-index: var(--z-header);
    width: min(88vw, 360px);
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.5rem;
    padding: calc(var(--header-h) + 1.5rem) 1.75rem 2rem;
    background: var(--color-bg);
    border-left: 1px solid var(--color-line);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--t-base);
    overflow-y: auto;
  }
  .nav.est-ouvert { transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li { border-bottom: 1px solid var(--color-line); }
  .nav__link { display: block; padding-block: 0.95rem; font-size: 1rem; }
  .nav__link::after { display: none; }
  .nav__cta { width: 100%; }
  .theme { align-self: flex-start; }

  /* Le rideau entre par la droite : l'animation d'entrée du menu ne doit pas
     être écrasée par celle de la composition d'ouverture de page. */
  .is-entering .nav__list li { animation: none; }
}

@media (max-width: 1080px) {
  /* La grille du mois passe au-dessus de la liste et cesse d'être collante :
     un bloc sticky sur un écran court masquerait la moitié du contenu. */
  .schedule__inner { grid-template-columns: 1fr; }
  .cal { position: static; max-width: 420px; }
}

@media (max-width: 960px) {
  .news__grid { grid-template-columns: 1fr; }
  .palmares__grille { grid-template-columns: repeat(2, 1fr); }
  /* Huit cartes sur deux colonnes : quatre rangées pleines. */
  .staff__grille { grid-template-columns: repeat(2, 1fr); }
  .stade__inner,
  .formation__inner,
  .contact__inner { grid-template-columns: 1fr; }
  /* En colonne unique, la photo passe au-dessus du texte. On la raccourcit :
     un 3/4 pleine largeur occuperait tout l'écran à lui seul. */
  .formation__media { order: -1; aspect-ratio: 4 / 3; }
  .formation__media img { object-position: center 28%; }
  .billet__grille { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__services { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .upcards { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .gal__grille { grid-template-columns: repeat(2, 1fr); }
  .gal__case--large { grid-column: span 2; grid-row: auto; }
  .visionneuse { grid-template-columns: 1fr; }
  .visionneuse__fleche {
    position: absolute;
    bottom: clamp(1rem, 3vw, 2rem);
  }
  .visionneuse__fleche--prec { left: clamp(0.75rem, 3vw, 2rem); }
  .visionneuse__fleche--suiv { right: clamp(0.75rem, 3vw, 2rem); }
  .visionneuse__figure { padding-bottom: 3.5rem; }
}

@media (max-width: 720px) {
  .topbar__mail { display: none; }
  .palmares__grille { grid-template-columns: 1fr; }
  .gal__grille { grid-template-columns: 1fr; }
  .gal__case--large { grid-column: span 1; }
  .match-ligne { grid-template-columns: 1fr; gap: 0.5rem; }
  .stade__visuels { grid-template-columns: 1fr; }
  .stade__photo--basse { margin-top: 0; }
  .stade__photo--haute .media,
  .stade__photo--basse .media { aspect-ratio: 4 / 3; }
  .footer__nav { grid-template-columns: 1fr 1fr; }
  .schedule__repere { grid-template-columns: 1fr; gap: 0.25rem; }
  .stade__ligne { grid-template-columns: 1fr; gap: 0.35rem; }
}

@media (max-width: 480px) {
  .hero__blason { display: none; }
  .footer__nav { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }

  /* Un libellé insécable dans la carte du prochain match dépasse le cadre et
     rend TOUTE la page défilable de côté. Sur un écran de téléphone, un
     bouton sur deux lignes vaut mieux qu'un débordement horizontal. */
  .fixture__attente .btn { white-space: normal; text-align: center; }
}


/* ============================================================================
   23. ACCESSIBILITÉ, MOUVEMENT RÉDUIT ET IMPRESSION
   ========================================================================== */
:focus-visible {
  outline: 3px solid var(--or);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Aucune apparition au défilement : tout est visible d'emblée, à sa place. */
  [data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .annonce__piste,
  .partners__piste { animation: none; transform: none; }
  .brand__crest { animation: none; }
  .frise__piste { scroll-snap-type: none; }
}

@media print {
  .topbar, .site-header, .annonce, .totop, .frise__commandes,
  .formulaire, .preloader, .nav-overlay { display: none !important; }
  .hero { min-height: auto; color: #000; }
  .hero__media, .hero__voile, .hero__blason { display: none; }
  .hero__title, .hero__lead, .hero__eyebrow { color: #000 !important; }
  .palmares, .footer, .billet__carte--large { background: #fff !important; color: #000 !important; }
  .palmares__chiffre, .footer__titre { color: #000 !important; }
  body { background: #fff; }
  .media img { filter: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}