/* ==========================================================================
   Belgian Cats à Berlin : feuille de style principale
   Grille : Bootstrap grid uniquement (css/bootstrap-grid.min.css)
   Polices : auto-hebergees en woff2 (css/fonts.css)
   Aucun style inline dans le HTML.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs. Le vocabulaire vient du châssis hockey, les valeurs sont basket : encre, cuir (ex-gazon), craie, lion, or. */
  --encre:        #10161a;
  --encre-doux:   #46555c;
  --encre-faible: #7d8b90;
  /* Accent basket. Les noms de variables du châssis hockey sont conservés
     (--gazon est utilisé partout dans ce fichier) : seules les valeurs
     changent. Proposition appliquée : « cuir de balle », un orange terre
     profond qui tient le contraste sur le papier La Libre.
     Alternatives prêtes, à trancher sur le visuel officiel FIBA Berlin :
       parquet nuit   : #1e3a5f / #10233c / #3b6ea5
       berlin violet  : #5b2d86 / #3a1c58 / #8a53c4
     (à reporter dans les trois valeurs ci-dessous) */
  --gazon:        #a8501c;
  --gazon-fonce:  #0a0d12;   /* fond profond de l'ouverture */
  --gazon-vif:    #ff4d17;   /* orange électrique, l'accent principal */
  --lion:         #ff2d55;   /* rose signal, la Belgique et le direct */
  --lion-clair:   #ff5c7a;
  --or:           #ffd60a;   /* jaune signal, primes et couronnes */
  --craie:        #ffffff;
  --papier:       #f2f3f7;
  --papier-haut:  #ffffff;
  --ligne:        rgba(10, 13, 18, .10);
  --ligne-sombre: rgba(255, 255, 255, .12);

  /* Accents électriques supplémentaires */
  --cyan:         #00e5ff;   /* données vives, chronos, écarts */
  --violet:       #7b5cff;   /* second accent, dégradés */
  --vert-signal:  #32ff9a;   /* qualification, hausse */

  /* Verre : la matière des cartes flottantes */
  --verre:        rgba(255, 255, 255, .07);
  --verre-fort:   rgba(255, 255, 255, .12);
  --verre-clair:  rgba(255, 255, 255, .72);
  --verre-bord:   rgba(255, 255, 255, .16);
  --flou:         22px;

  /* Typographie. Lexend partout : géométrique, très lisible, moderne.
     Fraunces et Inter Tight restent chargées pour un éventuel retour
     en arrière, elles ne sont plus utilisées par défaut. */
  --display: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --texte:   "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --data:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Echelle typographique, ratio 1.25 sur une base de 17px */
  --t-xs:  .75rem;
  --t-sm:  .8125rem;
  --t-md:  .9375rem;
  --t-base: 1.0625rem;
  --t-lg:  1.3125rem;
  --t-xl:  1.625rem;
  --t-2xl: 2.125rem;
  --t-3xl: 3rem;
  --t-4xl: 4.25rem;

  /* Rythme vertical, module de 8 */
  --e-1: .5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2rem;
  --e-5: 3rem;
  --e-6: 4.5rem;
  --e-7: 7rem;

  --rayon: 10px;
  --rayon-carte: 18px;
  --rayon-bloc: 28px;      /* grandes surfaces : hero, sections cartes */
  --transition: 280ms cubic-bezier(.2, .7, .3, 1);
}

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: var(--t-base);
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

/* --------------------------------------------------------------------------
   2. Accessibilite de base
   -------------------------------------------------------------------------- */
.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--encre);
  color: var(--craie);
  padding: var(--e-2) var(--e-3);
  font-weight: 600;
  text-decoration: none;
}
.saut-contenu:focus { left: var(--e-2); top: var(--e-2); }

:focus-visible {
  outline: 3px solid var(--gazon-vif);
  outline-offset: 3px;
  border-radius: var(--rayon);
}

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

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

/* --------------------------------------------------------------------------
   3. Titres et texte courant
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0 0 var(--e-2);
  font-variation-settings: "SOFT" 0, "WONK" 0;
}

h1 { font-size: clamp(2.5rem, 7.5vw, var(--t-4xl)); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 4.6vw, var(--t-3xl)); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); letter-spacing: -.01em; }

p { margin: 0 0 var(--e-2); }

.sur-titre {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.6vw, var(--t-xl));
  font-weight: 400;
  font-style: italic;
  letter-spacing: -.01em;
  color: var(--gazon-vif);
  margin: 0 0 var(--e-3);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--ligne-sombre);
  max-width: 30ch;
}

.chapo {
  font-size: clamp(var(--t-lg), 2.4vw, var(--t-xl));
  line-height: 1.42;
  color: var(--encre-doux);
  font-weight: 400;
  max-width: 34ch;
}

.texte-long p { max-width: 68ch; }

.oeil {
  font-family: var(--data);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lion);
  margin: 0 0 var(--e-2);
  display: flex;
  align-items: center;
  gap: .6rem;
}
.oeil::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--lion);
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   4. Bandeau superieur : date, heure, meteo
   -------------------------------------------------------------------------- */
.bandeau {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--encre);
  color: var(--craie);
  border-bottom: 1px solid var(--ligne-sombre);
}

.bandeau-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding: .55rem 0;
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  border-bottom: 1px solid var(--ligne-sombre);
}

.marque {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  text-decoration: none;
  font-family: var(--display);
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -.01em;
}
.marque span { color: var(--lion-clair); }

.horloge {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
  justify-content: flex-end;
  color: rgba(255, 255, 255, .78);
}
.horloge > * {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
}
.horloge i { color: var(--gazon-vif); font-size: .9em; }
.horloge-heure { color: var(--craie); font-variant-numeric: tabular-nums; }
.horloge-date { text-transform: capitalize; }
.horloge-meteo[data-etat="charge"] { opacity: .45; }

.bandeau-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding: .5rem 0;
}

.nav-liens {
  display: flex;
  gap: var(--e-3);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-liens::-webkit-scrollbar { display: none; }
.nav-liens a {
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, .7);
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.nav-liens a:hover,
.nav-liens a[aria-current="true"] {
  color: var(--craie);
  border-bottom-color: var(--lion-clair);
}

.badge-premium {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--or);
  border: 1px solid var(--or);
  padding: .2rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. Ouverture
   Fond photographique sous voile sombre, plus la trame verticale qui
   reprend le pas des lignes de touche.
   -------------------------------------------------------------------------- */
.ouverture {
  position: relative;
  background: var(--gazon-fonce);
  color: var(--craie);
  padding: var(--e-6) 0 var(--e-5);
  overflow: hidden;
  isolation: isolate;
}

.ouverture-fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  /* Photo d'ouverture à déposer : img/hero-berlin.jpg, 2000 px de large,
     cadrage large sur la salle ou sur les Cats. Tant qu'elle est absente,
     le fichier renvoie une 404 sans conséquence visuelle : le dégradé
     ci-dessous tient l'ouverture tout seul. */
  background-image: url("./img/hero-berlin.jpg");
  background-size: cover;
  background-position: center 40%;
  opacity: .28;
  filter: grayscale(.55) contrast(1.05);
}

/* Voile de lisibilité, plus dense côté texte */
.ouverture::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Dégradé d'ouverture. Les deux étapes sont écrites en rgba : elles
     doivent suivre --gazon-fonce (#6f3210) si la palette change. */
  background:
    linear-gradient(
      100deg,
      var(--gazon-fonce) 0%,
      rgba(111, 50, 16, .94) 42%,
      rgba(60, 26, 8, .72) 100%
    );
  pointer-events: none;
}

/* Trame verticale */
.ouverture::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, .05) 0 1px,
      transparent 1px 76px
    );
  pointer-events: none;
}

.ouverture .container { position: relative; z-index: 1; }

.ouverture h1 { color: var(--craie); margin-bottom: var(--e-3); text-wrap: balance; }
.ouverture .chapo { color: rgba(255, 255, 255, .84); max-width: 46ch; }

/* Compte a rebours */
.rebours {
  margin-top: var(--e-5);
  background: rgba(60, 26, 8, .68);   /* suit --gazon-fonce */
  backdrop-filter: blur(3px);
  border: 1px solid var(--ligne-sombre);
  border-left: 3px solid var(--lion);
  padding: var(--e-3);
}
.rebours-titre {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gazon-vif);
  margin: 0 0 var(--e-1);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.rebours-affiche {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 var(--e-2);
}
.rebours-chiffres {
  display: flex;
  gap: var(--e-3);
  list-style: none;
  margin: 0;
  padding: 0;
  font-variant-numeric: tabular-nums;
}
.rebours-chiffres li { text-align: left; }
.rebours-chiffres b {
  display: block;
  font-family: var(--data);
  font-size: var(--t-2xl);
  font-weight: 500;
  line-height: 1;
  color: var(--craie);
}
.rebours-chiffres span {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.rebours-detail {
  margin: var(--e-2) 0 0;
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, .7);
}

/* --------------------------------------------------------------------------
   5 bis. Bandeau de scores, sous le sommaire
   Une seule ligne, qui défile horizontalement. Le lecteur voit l'état du
   jour avant même de commencer à lire, et l'atteint d'un geste sur
   téléphone plutôt qu'en faisant défiler la page.
   -------------------------------------------------------------------------- */
.direct {
  background: var(--encre);
  color: var(--craie);
  border-bottom: 1px solid var(--ligne-sombre);
  padding: .5rem 0 .6rem;
}

/* Quand un match tourne, le bandeau se signale d'un filet rouge. */
body[data-live="true"] .direct { border-bottom-color: var(--lion); }

.direct-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
  margin-bottom: .4rem;
}
.direct-titre-bloc {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.direct-titre {
  font-family: var(--data);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gazon-vif);
  margin: 0;
}
.direct-etat {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-family: var(--data);
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, .5);
  margin: 0;
}
.direct-maj { color: var(--gazon-vif); }
.direct-maj[hidden] { display: none; }

/* La piste défile horizontalement, avec accroche par carte au doigt. */
.direct-grille {
  display: flex;
  gap: 1px;
  overflow-x: auto;
  background: var(--ligne-sombre);
  border: 1px solid var(--ligne-sombre);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;

  /* Barre de defilement masquee : le geste reste possible, le trait gris
     sous les scores non. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.direct-grille::-webkit-scrollbar { display: none; }

.direct-carte {
  flex: 0 0 auto;
  min-width: 152px;
  scroll-snap-align: start;
  background: var(--encre);
  padding: .5rem .7rem .55rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.direct-carte[data-belge="true"] {
  background: #1b1216;
  box-shadow: inset 3px 0 0 var(--lion);
}

/* Le tournoi passe volontiers a la ligne : mieux vaut une carte un peu plus
   haute qu'une carte large qui n'en laisse voir que deux a l'ecran. */
.direct-carte-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .2rem .4rem;
  flex-wrap: wrap;
  row-gap: .1rem;
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.direct-carte-droite {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  row-gap: .1rem;
}
.direct-tournoi { white-space: nowrap; }

.direct-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
  font-size: var(--t-sm);
}
.direct-ligne span { font-weight: 500; }
.direct-ligne .nation-bel { color: var(--lion-clair); font-weight: 700; }
.direct-ligne b {
  font-family: var(--data);
  font-size: var(--t-md);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.direct-ligne b[data-vide="true"] { color: rgba(255, 255, 255, .3); }

.direct-vide {
  color: rgba(255, 255, 255, .55);
  font-family: var(--data);
  font-size: var(--t-xs);
  margin: 0;
  padding: .5rem .7rem;
}

/* Match terminé : le score ne doit pas se confondre avec un direct. */
.etiquette-fin {
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  border: 1px solid var(--ligne-sombre);
  padding: .05rem .3rem;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .direct { padding: .4rem 0 .5rem; }
  .direct-tete { margin-bottom: .3rem; }
  .direct-carte { min-width: 58vw; }
  .direct-etat { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   6. Sections
   -------------------------------------------------------------------------- */
.section { padding: var(--e-6) 0; border-top: 1px solid var(--ligne); }
.section-sombre {
  background: var(--gazon);
  color: var(--craie);
  border-top: 0;
}
.section-sombre h2, .section-sombre h3 { color: var(--craie); }
.section-sombre .oeil { color: var(--or); }
.section-sombre .oeil::before { background: var(--or); }
.section-sombre p { color: rgba(255, 255, 255, .82); }

.section-tete { margin-bottom: var(--e-4); }
.section-tete p { max-width: 62ch; color: var(--encre-doux); }
.section-sombre .section-tete p { color: rgba(255, 255, 255, .8); }

/* --------------------------------------------------------------------------
   7. Reperes chiffres
   -------------------------------------------------------------------------- */
.reperes {
  list-style: none;
  margin: 0;
  padding: 0;
}
.repere {
  border-top: 1px solid var(--ligne);
  padding: var(--e-2) 0;
}
.section-sombre .repere { border-color: var(--ligne-sombre); }
.repere b {
  display: block;
  font-family: var(--data);
  font-size: var(--t-2xl);
  font-weight: 500;
  line-height: 1.1;
  color: var(--lion);
}
.section-sombre .repere b { color: var(--or); }
.repere span {
  font-size: var(--t-sm);
  color: var(--encre-doux);
  display: block;
  max-width: 26ch;
}
.section-sombre .repere span { color: rgba(255, 255, 255, .72); }

/* --------------------------------------------------------------------------
   8. Calendrier
   -------------------------------------------------------------------------- */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  margin-bottom: var(--e-3);
  padding: 0;
  border: 0;
}
.filtres legend { padding: 0; margin: 0 0 var(--e-1); font-size: var(--t-sm); color: var(--encre-doux); }
.filtre {
  appearance: none;
  background: transparent;
  border: 1px solid var(--ligne);
  color: var(--encre-doux);
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .45rem .85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.filtre:hover { border-color: var(--encre); color: var(--encre); }
.filtre[aria-pressed="true"] {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--craie);
}

/* La journee est traitee comme un bloc : un titre qui fait barre, puis des
   lignes de match posees en blanc sur le fond papier. Le contraste entre la
   ligne et le fond structure la lecture bien mieux qu'un simple filet. */
.jour { margin-bottom: var(--e-4); }

.jour-titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--encre);
  margin: 0 0 .4rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--gazon);
}
.jour-titre span::first-letter { text-transform: uppercase; }
.jour-titre small {
  font-family: var(--data);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre-faible);
  white-space: nowrap;
}

.matchs { list-style: none; margin: 0; padding: 0; }

.match {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: var(--e-2);
  align-items: center;
  padding: .7rem var(--e-2);
  border-bottom: 1px solid var(--ligne);
  background: var(--craie);
  transition: background var(--transition);
}
.match:last-child { border-bottom: 0; }
.match:hover { background: var(--papier-haut); }

/* Les rencontres belges se signalent par un filet interieur, qui ne decale
   pas le contenu comme le ferait une bordure. */
.match-belge { box-shadow: inset 4px 0 0 var(--lion); }
.match-belge:hover { background: var(--papier-haut); }

.match-heure {
  font-family: var(--data);
  font-size: var(--t-md);
  font-variant-numeric: tabular-nums;
  color: var(--encre);
}
.match-affiche {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-weight: 500;
}
.match-affiche .nation-bel { color: var(--lion); font-weight: 600; }
.match-vs { color: var(--encre-faible); font-family: var(--data); font-size: var(--t-sm); }
.match-meta {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre-faible);
  justify-self: end;
  text-align: right;
}
.match-score {
  font-family: var(--data);
  font-size: var(--t-lg);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
  color: var(--encre);
}
.match-score[data-vide="true"] { color: var(--encre-faible); }

/* Etiquette Live, fond rouge plein. Visible partout ou un match tourne. */
.etiquette-live {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--lion);
  color: var(--craie);
  font-family: var(--data);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .25rem .55rem;
  white-space: nowrap;
}
.etiquette-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--craie);
  animation: pulse 1.8s ease-in-out infinite;
}
.etiquette-live[hidden] { display: none; }
.etiquette-live-min {
  border-left: 1px solid rgba(255, 255, 255, .4);
  padding-left: .4rem;
  letter-spacing: .04em;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .3; transform: scale(.7); }
}

/* Equipe pas encore connue, apres les poules */
.nation-attente {
  color: var(--encre-faible);
  font-style: italic;
  font-weight: 400;
}
.section-sombre .nation-attente,
.direct .nation-attente { color: rgba(255, 255, 255, .5); }

/* Etiquette de match a enjeu, finale ou match de classement */
.match-etiquette {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--craie);
  background: var(--gazon);
  padding: .1rem .45rem;
  white-space: nowrap;
}

.calendrier-vide {
  padding: var(--e-3);
  color: var(--encre-doux);
  background: var(--craie);
  border: 1px solid var(--ligne);
}

/* --------------------------------------------------------------------------
   9. Fiches equipes et cartes joueurs
   La fiche technique est une bande pleine largeur : elle comble le vide
   sous le chapeau et se lit comme un tableau de bord.
   -------------------------------------------------------------------------- */
.fiche-bande {
  border-top: 3px solid var(--lion);
  border-bottom: 1px solid var(--ligne);
  background: var(--papier-haut);
  margin-top: var(--e-3);
}
.section-sombre .fiche-bande {
  background: rgba(255, 255, 255, .05);
  border-bottom-color: var(--ligne-sombre);
}

.fiche-bande-titre {
  font-family: var(--data);
  font-weight: 500;
  line-height: 1.4;
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--encre-faible);
  margin: 0;
  padding: var(--e-2) var(--e-3) 0;
}
.section-sombre .fiche-bande-titre { color: rgba(255, 255, 255, .55); }

/* Rangee de donnees cles */
.fiche-donnees {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  margin: 0;
  padding: var(--e-2) 0 0;
}
.fiche-donnee {
  padding: var(--e-2) var(--e-3);
  border-left: 1px solid var(--ligne);
}
.section-sombre .fiche-donnee { border-left-color: var(--ligne-sombre); }
.fiche-donnee:first-child { border-left: 0; }

.fiche-donnee dt {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-faible);
  margin: 0 0 .3rem;
}
.section-sombre .fiche-donnee dt { color: rgba(255, 255, 255, .5); }

.fiche-donnee dd {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--encre);
}
.section-sombre .fiche-donnee dd { color: var(--craie); }
.fiche-donnee dd small {
  display: block;
  font-family: var(--texte);
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--encre-doux);
  margin-top: .15rem;
}
.section-sombre .fiche-donnee dd small { color: rgba(255, 255, 255, .62); }

/* Bas de bande : palmares et reperes */
.fiche-bas {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: var(--e-4);
  padding: var(--e-3);
  border-top: 1px solid var(--ligne);
  margin-top: var(--e-2);
}
.section-sombre .fiche-bas { border-top-color: var(--ligne-sombre); }

.fiche-bas h4 {
  font-family: var(--data);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre-faible);
  margin: 0 0 var(--e-2);
}
.section-sombre .fiche-bas h4 { color: rgba(255, 255, 255, .55); }

.palmares { list-style: none; margin: 0; padding: 0; }
.palmares li {
  display: flex;
  gap: var(--e-2);
  align-items: baseline;
  padding: .45rem 0;
  border-bottom: 1px dotted var(--ligne);
  font-size: var(--t-sm);
}
.section-sombre .palmares li { border-bottom-color: var(--ligne-sombre); }
.palmares li:last-child { border-bottom: 0; }
.palmares b {
  font-family: var(--data);
  color: var(--or);
  font-weight: 500;
  flex: 0 0 3rem;
}
.palmares-vide { color: var(--encre-doux); font-size: var(--t-sm); margin: 0; }
.section-sombre .palmares-vide { color: rgba(255, 255, 255, .65); }

.fiche-reperes { list-style: none; margin: 0; padding: 0; }
.fiche-reperes li {
  padding: 0 0 var(--e-2) var(--e-2);
  border-left: 2px solid var(--gazon-vif);
  margin-bottom: var(--e-2);
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--encre-doux);
  max-width: 62ch;
}
.section-sombre .fiche-reperes li { color: rgba(255, 255, 255, .78); }
.fiche-reperes li:last-child { margin-bottom: 0; padding-bottom: 0; }

/* Citation */
.citation {
  border-left: 3px solid var(--gazon-vif);
  padding-left: var(--e-3);
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-lg);
  line-height: 1.38;
  font-style: italic;
}
.citation p { margin: 0 0 var(--e-1); }
.citation footer {
  font-family: var(--texte);
  font-style: normal;
  font-size: var(--t-sm);
  color: var(--encre-doux);
  margin-top: var(--e-1);
}
.section-sombre .citation footer { color: rgba(255, 255, 255, .68); }

/* Cartes joueurs */
.groupe-poste {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre-faible);
  margin: var(--e-5) 0 var(--e-3);
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--ligne);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.section-sombre .groupe-poste { color: rgba(255, 255, 255, .6); border-color: var(--ligne-sombre); }

.rang-joueurs { margin-bottom: var(--e-2); }

.joueur {
  background: var(--craie);
  border: 1px solid var(--ligne);
  padding: var(--e-3) var(--e-3) var(--e-4);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-bottom: var(--e-3);
  transition: transform var(--transition), box-shadow var(--transition);
}
.section-sombre .joueur {
  background: rgba(255, 255, 255, .06);
  border-color: var(--ligne-sombre);
}
.joueur:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(16, 22, 26, .1);
}
.joueur-tete {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  margin-bottom: .2rem;
}
.joueur-tete > div { flex: 1 1 auto; min-width: 0; }

/* Portrait. Le cadre garde sa place meme sans image : il affiche
   l'initiale tant que le fichier n'est pas depose. */
.joueur-photo {
  flex: 0 0 auto;
  position: relative;
  width: 88px;
  height: 88px;
  background: var(--papier);
  border: 1px solid var(--ligne);
  overflow: hidden;
}
.section-sombre .joueur-photo {
  background: rgba(255, 255, 255, .06);
  border-color: var(--ligne-sombre);
}

.joueur-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 400ms ease;
}
.joueur-photo[data-etat="ok"] img { opacity: 1; }

.joueur-initiale {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: var(--t-2xl);
  font-weight: 600;
  color: var(--encre-faible);
  opacity: .35;
  z-index: 0;
}
.section-sombre .joueur-initiale { color: var(--craie); opacity: .25; }

/* Numero de maillot, pose sur le coin du portrait */
.joueur-num {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  font-family: var(--data);
  font-size: var(--t-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--craie);
  background: var(--lion);
  padding: .3rem .45rem;
  min-width: 1.9rem;
  text-align: center;
}
.section-sombre .joueur-num { background: var(--lion); color: var(--craie); }

/* Repli quand il n'y a pas de portrait du tout */
.joueur-num-seul {
  position: static;
  flex: 0 0 auto;
  background: transparent;
  color: var(--encre-faible);
  border: 1px solid var(--ligne);
  font-size: var(--t-lg);
  padding: .35rem .5rem;
  min-width: 2.4rem;
}
.section-sombre .joueur-num-seul {
  background: transparent;
  color: rgba(255, 255, 255, .6);
  border-color: var(--ligne-sombre);
}

.joueur-nom {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
.joueur-poste {
  font-size: var(--t-sm);
  color: var(--encre-faible);
  margin: .15rem 0 0;
}
.section-sombre .joueur-poste { color: rgba(255, 255, 255, .55); }

/* Avis du sélectionneur */
.joueur-avis {
  margin: .3rem 0 0;
  padding-left: var(--e-2);
  border-left: 2px solid var(--gazon-vif);
}
.joueur-avis p {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--t-md);
  line-height: 1.45;
  color: var(--encre-doux);
  margin: 0;
}
.section-sombre .joueur-avis p { color: rgba(255, 255, 255, .8); }
.joueur-avis footer {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-faible);
  margin-top: .4rem;
}
.section-sombre .joueur-avis footer { color: rgba(255, 255, 255, .45); }
/* Ce champ portait à l'origine une étiquette courte (« capitaine »), d'où
   les capitales. Il accueille depuis le 31 août la description rédigée par
   la rédaction : deux ou trois lignes en capitales sont illisibles, on
   repasse donc en casse normale, dans la typographie de texte. */
.joueur-role {
  font-size: var(--t-md);
  line-height: 1.45;
  color: var(--encre-doux);
  margin: 0 0 .35rem;
}
.section-sombre .joueur-role { color: rgba(255, 255, 255, .78); }
.joueur-club { font-size: var(--t-sm); color: var(--encre-doux); margin: 0; }
.section-sombre .joueur-club { color: rgba(255, 255, 255, .7); }
.joueur-note {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--encre-doux);
  margin: 0;
}
.section-sombre .joueur-note { color: rgba(255, 255, 255, .74); }

.joueur-stats {
  display: flex;
  gap: var(--e-3);
  margin-top: auto;
  padding-top: var(--e-2);
  border-top: 1px solid var(--ligne);
  font-family: var(--data);
  font-size: var(--t-xs);
  line-height: 1.35;
}

/* Respiration entre la derniere rangee de cartes et la fin de section */
[data-effectif] { padding-bottom: var(--e-3); }
.section-sombre .joueur-stats { border-color: var(--ligne-sombre); }
.joueur-stats div { display: flex; flex-direction: column; }
.joueur-stats b { font-size: var(--t-md); font-weight: 500; font-variant-numeric: tabular-nums; }
.joueur-stats span { color: var(--encre-faible); letter-spacing: .08em; text-transform: uppercase; }
.section-sombre .joueur-stats span { color: rgba(255, 255, 255, .5); }
.joueur-stats [data-vide="true"] { color: var(--encre-faible); }

/* Bloc objectif et joueurs cles */
.bloc-ambition { margin-top: var(--e-5); }

.encart-objectif { height: 100%; }
.encart-objectif h3 { font-size: var(--t-lg); }
.note-concurrence {
  font-size: var(--t-sm);
  color: var(--encre-faible);
  padding-top: var(--e-2);
  border-top: 1px dotted var(--ligne);
  margin: var(--e-2) 0 0;
}
.section-sombre .encart-objectif {
  background: rgba(255, 255, 255, .05);
  border-color: var(--ligne-sombre);
}
.section-sombre .note-concurrence {
  color: rgba(255, 255, 255, .6);
  border-top-color: var(--ligne-sombre);
}

.titre-piliers {
  font-family: var(--data);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--encre-faible);
  margin: 0 0 var(--e-2);
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--ligne);
}
.section-sombre .titre-piliers { color: rgba(255, 255, 255, .55); border-bottom-color: var(--ligne-sombre); }

.piliers { list-style: none; margin: 0; padding: 0; }
.piliers li {
  display: grid;
  grid-template-columns: minmax(0, 12rem) 1fr;
  gap: var(--e-2);
  align-items: baseline;
  padding: var(--e-2) 0;
  border-bottom: 1px dotted var(--ligne);
}
.section-sombre .piliers li { border-bottom-color: var(--ligne-sombre); }
.piliers li:last-child { border-bottom: 0; }
.piliers b {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -.015em;
}
.piliers span {
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--encre-doux);
}
.section-sombre .piliers span { color: rgba(255, 255, 255, .78); }

@media (max-width: 767.98px) {
  .piliers li { grid-template-columns: 1fr; gap: .3rem; }
}

/* --------------------------------------------------------------------------
   10. Regles du jeu et schema du penalty corner
   -------------------------------------------------------------------------- */
/* Glossaire */
.mot {
  border-top: 1px solid var(--ligne-sombre);
  padding: var(--e-2) 0;
  position: relative;
}
.mot h3 {
  font-size: var(--t-lg);
  margin-bottom: .35rem;
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
.mot p { font-size: var(--t-md); margin: 0; max-width: 58ch; }

/* Les trois mots qui reviennent le plus dans un commentaire de match */
.mot-cle { padding-left: var(--e-2); border-left: 2px solid var(--or); }
.mot-cle h3::after {
  content: "à retenir";
  font-family: var(--data);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--or);
  white-space: nowrap;
}

.schema-pc {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--ligne-sombre);
  padding: var(--e-3);
}
.schema-pc svg { width: 100%; height: auto; }
.schema-pc .terrain { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .35); stroke-width: 1.2; }
.schema-pc .cercle { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.4; }
.schema-pc .trajet { fill: none; stroke: var(--or); stroke-width: 2; stroke-dasharray: 5 4; }
.schema-pc .tir { fill: none; stroke: var(--lion-clair); stroke-width: 2.6; }
.schema-pc .joueur-pt { fill: var(--gazon-vif); }
.schema-pc .but { fill: none; stroke: var(--craie); stroke-width: 2.5; }
.schema-pc text {
  font-family: var(--data);
  font-size: 9px;
  letter-spacing: .06em;
  fill: rgba(255, 255, 255, .72);
  text-transform: uppercase;
}
.schema-legende {
  list-style: none;
  margin: var(--e-2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
}
.schema-legende li { display: flex; align-items: center; gap: .4rem; }
.schema-legende i { width: 14px; height: 2px; display: inline-block; }
.leg-trajet { background: var(--or); }
.leg-tir { background: var(--lion-clair); }
.leg-joueur { background: var(--gazon-vif); height: 8px; width: 8px; border-radius: 50%; }

/* --------------------------------------------------------------------------
   11. Encarts
   -------------------------------------------------------------------------- */
.encart {
  background: var(--papier-haut);
  border: 1px solid var(--ligne);
  border-left: 3px solid var(--gazon-vif);
  padding: var(--e-3);
}
.encart h3 { font-size: var(--t-lg); }
.encart p:last-child { margin-bottom: 0; }

.phases { list-style: none; margin: 0; padding: 0; counter-reset: phase; }
.phase {
  border-top: 1px solid var(--ligne);
  padding: var(--e-3) 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  align-items: start;
}
.phase-dates {
  font-family: var(--data);
  font-size: var(--t-sm);
  letter-spacing: .04em;
  color: var(--lion);
  white-space: nowrap;
}
.phase h3 { font-size: var(--t-lg); margin-bottom: .3rem; }
.phase p { margin: 0; color: var(--encre-doux); font-size: var(--t-md); }

/* --------------------------------------------------------------------------
   12. Sources
   -------------------------------------------------------------------------- */
.sources { list-style: none; margin: 0; padding: 0; }
.source {
  border-top: 1px solid var(--ligne);
  padding: var(--e-2) 0;
}
.source a {
  display: flex;
  gap: var(--e-2);
  align-items: baseline;
  justify-content: space-between;
  text-decoration: none;
  transition: color var(--transition);
}
.source a:hover .source-titre { color: var(--lion); text-decoration: underline; text-underline-offset: 3px; }
.source-titre { font-weight: 500; max-width: 58ch; }
.source-meta {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre-faible);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.etiquette {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .15rem .5rem;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.etiquette-maison { color: var(--lion); }
.etiquette-officiel { color: var(--gazon); }
.etiquette-presse { color: var(--encre-faible); }

.methode { list-style: none; margin: 0; padding: 0; }
.methode li {
  padding: var(--e-2) 0;
  border-top: 1px dotted var(--ligne);
  font-size: var(--t-md);
  color: var(--encre-doux);
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: .6rem;
}
.methode li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--gazon-vif);
  font-size: .8em;
}

/* --------------------------------------------------------------------------
   13. Bloc abonne, articles lies, pied de page
   -------------------------------------------------------------------------- */
.signature {
  background: var(--encre);
  color: var(--craie);
  padding: var(--e-6) 0 var(--e-4);
}

.bloc-abonne {
  border: 1px solid var(--or);
  padding: var(--e-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--e-6);
}
.bloc-abonne p { margin: 0; color: rgba(255, 255, 255, .82); max-width: 52ch; }
.bloc-abonne strong { color: var(--or); }

.bouton-or {
  font-family: var(--data);
  font-size: var(--t-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--or);
  color: var(--encre);
  text-decoration: none;
  padding: .7rem 1.4rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--transition);
}
.bouton-or:hover { background: #f0be4a; }

.titre-articles {
  font-family: var(--data);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gazon-vif);
  margin: 0 0 var(--e-3);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--ligne-sombre);
}

.article-lie {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  height: 100%;
  padding: var(--e-3) 0;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid transparent;
  transition: border-color var(--transition);
}
.article-lie:hover { border-top-color: var(--lion-clair); }
.article-lie:hover .article-titre {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.article-surtitre {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0;
}
.article-titre {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.015em;
  margin: 0;
  color: var(--craie);
  text-wrap: balance;
}
.article-chapo {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, .68);
  margin: 0;
}
.article-date {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .42);
  margin: auto 0 0;
  padding-top: var(--e-1);
}

.lien-rubrique { margin: var(--e-3) 0 0; }
.lien-rubrique a {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--data);
  font-size: var(--t-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--craie);
  text-decoration: none;
  border: 1px solid var(--ligne-sombre);
  padding: .8rem 1.3rem;
  transition: border-color var(--transition), background var(--transition);
}
.lien-rubrique a:hover {
  border-color: var(--lion-clair);
  background: rgba(236, 66, 88, .1);
}
.lien-rubrique i { transition: transform var(--transition); }
.lien-rubrique a:hover i { transform: translateX(3px); }

.pied {
  background: var(--encre);
  color: rgba(255, 255, 255, .5);
  padding: var(--e-3) 0 var(--e-4);
  font-size: var(--t-sm);
  border-top: 1px solid var(--ligne-sombre);
}
.pied p { margin: 0; }
.pied-credit {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .68);
  margin-bottom: .4rem;
}

/* Bouton du lieu dans le bandeau, support du clin d'oeil coordonnees */
.lieu-bouton {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  letter-spacing: inherit;
  border-bottom: 1px dotted rgba(255, 255, 255, .28);
  transition: color var(--transition), border-color var(--transition);
}
.lieu-bouton:hover { color: var(--craie); border-bottom-color: var(--gazon-vif); }
.lieu-bouton[data-mode="coords"] { color: var(--gazon-vif); border-bottom-color: transparent; }

/* Message flottant */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--e-3);
  transform: translate(-50%, 16px);
  z-index: 300;
  background: var(--encre);
  color: var(--craie);
  border: 1px solid var(--gazon-vif);
  border-left: 3px solid var(--gazon-vif);
  padding: var(--e-2) var(--e-3);
  font-family: var(--data);
  font-size: var(--t-sm);
  max-width: min(90vw, 460px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
  opacity: 0;
  transition: opacity 300ms ease, transform 300ms cubic-bezier(.2, .7, .3, 1);
}
.toast[hidden] { display: none; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast a { color: var(--gazon-vif); }

/* --------------------------------------------------------------------------
   14. Animation d'entree
   -------------------------------------------------------------------------- */
.reveler {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(.2, .7, .3, 1);
}
.reveler.visible { opacity: 1; transform: none; }

/* Balle du schema de penalty corner, animee au clic sur le tireur */
.schema-pc .balle {
  fill: var(--craie);
  stroke: var(--encre);
  stroke-width: 1;
  opacity: 0;
}
.schema-pc[data-anime="true"] .balle {
  opacity: 1;
  animation: sleep 1.9s cubic-bezier(.4, 0, .25, 1) forwards;
}
.schema-pc .joueur-tireur { cursor: pointer; }
.schema-pc .joueur-tireur:hover { fill: var(--or); }

/* La balle du pick and roll : départ chez la porteuse (160,150), dribble
   derrière l'écran jusqu'à la sortie (116,108), puis passe vers la course
   au panier (158,32). Translations relatives au point de départ. */
@keyframes sleep {
  0%   { transform: translate(0, 0);           opacity: 1; }
  45%  { transform: translate(-44px, -42px);   opacity: 1; }
  58%  { transform: translate(-40px, -56px);   opacity: 1; }
  92%  { transform: translate(-2px, -118px);   opacity: 1; }
  100% { transform: translate(-2px, -118px);   opacity: 0; }
}

/* --------------------------------------------------------------------------
   15. Adaptations
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .ouverture-fond { opacity: .2; }
}

@media (max-width: 767.98px) {
  :root { --e-6: 3.25rem; --e-7: 4rem; }
  .bandeau-haut { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .horloge { justify-content: flex-start; }
  .match { grid-template-columns: 3.75rem 1fr; row-gap: .35rem; padding-left: .8rem; }
  .match-meta { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .phase { grid-template-columns: 1fr; gap: .4rem; }
  .fiche-bas { grid-template-columns: 1fr; gap: var(--e-3); }
  .fiche-donnee { border-left: 0; border-top: 1px solid var(--ligne); }
  .section-sombre .fiche-donnee { border-top-color: var(--ligne-sombre); }
  .fiche-donnee:first-child { border-top: 0; }
  .rebours-chiffres { gap: var(--e-2); }
  .source a { flex-direction: column; gap: .4rem; }
}

@media print {
  .bandeau, .rebours, .filtres, .bloc-abonne { display: none; }
  body { background: #fff; color: #000; }
  .section-sombre, .ouverture, .signature { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   16. Images
   Les emplacements gardent leur place et leur ratio meme sans fichier :
   la mise en page ne bouge pas quand les photos arrivent une par une.
   -------------------------------------------------------------------------- */
figure {
  margin: 0;
  position: relative;
}

.figure-large,
.figure-equipe {
  margin-top: var(--e-5);
}

.figure-large img,
.figure-equipe img,
.figure-schema img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--papier-haut);
}
.section-sombre .figure-large img,
.section-sombre .figure-equipe img,
.section-sombre .figure-schema img { background: rgba(255, 255, 255, .06); }

/* Ratios, pour reserver la place avant chargement */
.figure-large img { aspect-ratio: 16 / 9; object-fit: cover; }
.figure-equipe img { aspect-ratio: 16 / 7; object-fit: cover; }
.figure-schema img { aspect-ratio: 3 / 2; object-fit: cover; }

.figure-schema { margin: var(--e-3) 0; }

figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
  padding-top: .6rem;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--encre-doux);
  border-top: 1px solid var(--ligne);
  margin-top: .6rem;
}
.section-sombre figcaption {
  color: rgba(255, 255, 255, .7);
  border-top-color: var(--ligne-sombre);
}
figcaption span:first-child { max-width: 72ch; }

.figure-credit {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-faible);
  white-space: nowrap;
}
.section-sombre .figure-credit { color: rgba(255, 255, 255, .45); }

/* Image manquante : on masque le cadre plutot que d'afficher une icone cassee */
img[data-absent="true"] { display: none; }
figure[data-absent="true"] figcaption { display: none; }

/* --------------------------------------------------------------------------
   17. Classement des poules
   -------------------------------------------------------------------------- */
.poule { margin-bottom: var(--e-4); }

.poule-titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
  font-family: var(--data);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--encre);
  margin: 0 0 var(--e-2);
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--encre);
}
.poule-site {
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--encre-faible);
}

.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.tableau th,
.tableau td {
  padding: .55rem .3rem;
  border-bottom: 1px solid var(--ligne);
  text-align: left;
}
.tableau thead th {
  font-family: var(--data);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--encre-faible);
  border-bottom: 1px solid var(--ligne);
  padding-bottom: .35rem;
}
.tableau tbody th {
  font-family: var(--texte);
  font-size: var(--t-sm);
  font-weight: 500;
}
.tableau .num {
  text-align: right;
  font-family: var(--data);
  font-variant-numeric: tabular-nums;
  width: 2.2rem;
}
.tableau .points { font-weight: 500; color: var(--encre); }

/* Les deux premiers passent en poule croisee */
.tableau tbody tr[data-qualifie="true"] th { font-weight: 700; }
.tableau tbody tr[data-qualifie="true"] {
  box-shadow: inset 3px 0 0 var(--gazon-vif);
}
.tableau tbody tr[data-qualifie="true"] th { padding-left: .6rem; }

.tableau tbody tr.ligne-bel th { color: var(--lion); }

.classement-note {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  color: var(--encre-faible);
  margin-top: var(--e-2);
}

/* --------------------------------------------------------------------------
   18. Pastilles de journee du calendrier
   Cent matchs sur seize jours : on n'en affiche qu'une journee a la fois.
   -------------------------------------------------------------------------- */
.journees {
  margin-bottom: var(--e-3);
  border-bottom: 1px solid var(--ligne);
}

.pastilles {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  padding-bottom: var(--e-2);
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.pastilles::-webkit-scrollbar { height: 3px; }
.pastilles::-webkit-scrollbar-thumb { background: var(--ligne); }

.pastille {
  flex: 0 0 auto;
  scroll-snap-align: center;
  appearance: none;
  background: transparent;
  border: 1px solid var(--ligne);
  color: var(--encre-doux);
  cursor: pointer;
  padding: .5rem .7rem;
  min-width: 4.2rem;
  text-align: center;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.pastille:hover { border-color: var(--encre); color: var(--encre); }

.pastille-jour {
  display: block;
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pastille-date {
  display: block;
  font-family: var(--data);
  font-size: var(--t-xs);
  color: var(--encre-faible);
  margin-top: .15rem;
}

/* La journée sélectionnée se peignait en sombre : invisible sur le fond
   nuit de la section. Elle prend l'accent de la charte, ce qui la rend
   lisible et cohérente avec le reste du dossier. */
.pastille[aria-pressed="true"] {
  background: var(--gazon-vif);
  border-color: var(--gazon-vif);
  color: #ffffff;
}
.pastille[aria-pressed="true"] .pastille-jour,
.pastille[aria-pressed="true"] .pastille-date { color: #ffffff; }
.pastille[aria-pressed="true"] .pastille-date { opacity: .8; }

/* La journee du jour reste reperable meme si une autre est selectionnee */
.pastille[data-aujourdhui="true"] { border-color: var(--lion); }
.pastille[data-aujourdhui="true"] .pastille-jour { color: var(--lion); }
.pastille[data-aujourdhui="true"][aria-pressed="true"] .pastille-jour { color: #ffffff; }

.calendrier-resume {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre-faible);
  margin: 0 0 var(--e-2);
}

/* --------------------------------------------------------------------------
   19. Bouton de position dans le bandeau
   -------------------------------------------------------------------------- */
.position-bouton {
  appearance: none;
  background: transparent;
  border: 1px solid var(--ligne-sombre);
  color: rgba(255, 255, 255, .6);
  cursor: pointer;
  padding: .25rem .45rem;
  line-height: 1;
  transition: color var(--transition), border-color var(--transition);
}
.position-bouton:hover { color: var(--craie); border-color: var(--gazon-vif); }
.position-bouton[data-actif="true"] { color: var(--gazon-vif); border-color: var(--gazon-vif); }
.position-bouton[data-etat="attente"] { opacity: .4; }
.position-bouton i { font-size: .85em; }

/* --------------------------------------------------------------------------
   20. Barre d'onglets, telephone uniquement
   -------------------------------------------------------------------------- */
.tabbar { display: none; }

@media (max-width: 767.98px) {
  .tabbar {
    /* Ruban à glisser : sept onglets, quatre et demi visibles, le demi-onglet
       qui dépasse invite au geste. L'onglet courant est recentré par app.js. */
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    background: var(--encre);
    border-top: 1px solid var(--ligne-sombre);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .tabbar::-webkit-scrollbar { display: none; }

  .tabbar a {
    flex: 0 0 22%;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: .6rem .2rem .5rem;
    text-decoration: none;
    color: rgba(255, 255, 255, .5);
    border-top: 2px solid transparent;
    transition: color var(--transition), border-color var(--transition);
  }
  .tabbar a i { font-size: 1.05rem; }
  .tabbar a span {
    font-family: var(--data);
    font-size: 9px;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .tabbar a[aria-current="true"] {
    color: var(--craie);
    border-top-color: var(--lion);
  }

  /* De la place pour la barre, sinon elle masque le pied de page */
  body { padding-bottom: 4.5rem; }

  .toast { bottom: 5.2rem; }
}

/* --------------------------------------------------------------------------
   21. Adaptations telephone
   Objectif : moins de defilement, sans rien retirer au lecteur.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

  /* --- Bandeau, version compacte --- */
  .bandeau-haut {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    row-gap: .3rem;
    padding: .5rem 0 .45rem;
  }
  .marque { font-size: var(--t-sm); }
  .marque span { display: block; }

  .horloge {
    /* Ligne dédiée sous le logo : heure à gauche, météo à droite. Aucun
       calcul de retour à la ligne, donc aucun chevauchement possible,
       quelle que soit la largeur du téléphone. */
    flex: 1 0 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: .6rem;
    font-size: 10px;
  }
  /* La date complete ne sert a rien sur telephone, l'heure et le lieu suffisent */
  .horloge-date { display: none; }
  .horloge-meteo { min-width: 0; }
  .horloge-meteo .lieu-bouton {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: inline-block;
    vertical-align: bottom;
  }

  /* Le sommaire fait doublon avec la barre d'onglets, mais on garde la
     mention Premium visible : c'est une information, pas de la navigation. */
  .nav-liens { display: none; }
  .bandeau-nav { justify-content: flex-end; padding: .3rem 0; }
  .badge-premium { font-size: 9px; padding: .15rem .45rem; }

  /* Au defilement vers le bas, le bandeau se reduit a une ligne */
  .bandeau[data-compact="true"] .bandeau-haut { padding: .2rem 0; }
  .bandeau[data-compact="true"] .horloge { opacity: 0; height: 0; overflow: hidden; }
  .bandeau[data-compact="true"] .marque { font-size: var(--t-xs); }
  .bandeau-haut, .horloge { transition: padding var(--transition), opacity var(--transition); }

  /* --- Ouverture plus courte --- */
  .ouverture { padding: var(--e-4) 0 var(--e-4); }
  .rebours { margin-top: var(--e-3); padding: var(--e-2); }
  .rebours-chiffres { gap: var(--e-2); }
  .rebours-chiffres b { font-size: var(--t-xl); }
  .sur-titre { margin-bottom: var(--e-2); padding-bottom: var(--e-2); }

  /* --- Sections resserrees --- */
  .section { padding: var(--e-5) 0; }
  .section-tete { margin-bottom: var(--e-3); }

  /* --- Cartes joueurs sur deux colonnes --- */
  .rang-joueurs > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: .4rem;
    padding-right: .4rem;
  }
  .rang-joueurs { margin-left: -.4rem; margin-right: -.4rem; }

  .joueur {
    padding: var(--e-2) .7rem var(--e-3);
    gap: .3rem;
    margin-bottom: var(--e-2);
  }
  .joueur-tete { flex-direction: column; gap: .5rem; }
  .joueur-photo { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .joueur-nom { font-size: var(--t-md); }
  .joueur-poste, .joueur-club { font-size: var(--t-xs); }
  .joueur-stats { gap: var(--e-2); font-size: 10px; }
  .joueur-stats b { font-size: var(--t-sm); }

  /* Avis du coach replie, deroulable d'un geste */
  body[data-compact-joueurs="true"] .joueur-avis p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--t-sm);
  }
  body[data-compact-joueurs="true"] .joueur-avis[data-ouvert="true"] p {
    display: block;
    overflow: visible;
  }

  .avis-bascule {
    appearance: none;
    background: none;
    border: 0;
    padding: .3rem 0 0;
    margin: 0;
    font-family: var(--data);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gazon-vif);
    cursor: pointer;
    text-align: left;
  }

  /* --- Calendrier --- */
  .match { grid-template-columns: 3.5rem 1fr; row-gap: .3rem; padding: .6rem .6rem .6rem .8rem; }
  .match-affiche { font-size: var(--t-md); }
  .match-meta { font-size: 10px; gap: .5rem; }
  .jour-titre { font-size: var(--t-base); }
  .pastille { min-width: 3.6rem; padding: .45rem .5rem; }

  /* --- Classement --- */
  .tableau { font-size: var(--t-xs); }
  .tableau th, .tableau td { padding: .45rem .2rem; }
  .tableau .num { width: 1.7rem; }

  /* --- Divers --- */
  .fiche-donnee { padding: var(--e-2); }
  .fiche-donnee dd { font-size: var(--t-md); }
  .figure-large, .figure-equipe { margin-top: var(--e-3); }
  .bloc-abonne { padding: var(--e-2); }
  .bloc-abonne p { font-size: var(--t-sm); }
}

/* L'avis du coach est toujours deroule sur grand ecran */
.avis-bascule { display: none; }
body[data-compact-joueurs="true"] .avis-bascule { display: block; }

/* --------------------------------------------------------------------------
   22. Enchainement du bloc abonne et des sources
   Le bloc abonne est sombre : le filet superieur de la section suivante
   ferait doublon avec la rupture de fond.
   -------------------------------------------------------------------------- */
.signature + .section { border-top: 0; }

/* --------------------------------------------------------------------------
   23. Corrections issues de l'audit avant publication
   -------------------------------------------------------------------------- */

/* Les reperes etaient bloques a 26 caracteres de large, ce qui coupait le
   texte en deux colonnes etroites sur telephone. */
@media (max-width: 767.98px) {
  .repere span { max-width: none; }
  .reperes { margin-bottom: var(--e-2); }

  /* La mention "L'avis du coach" faisait doublon avec le bouton juste en
     dessous tant que le texte etait replie. */
  body[data-compact-joueurs="true"] .joueur-avis:not([data-ouvert="true"]) footer {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   24. Logo de marque dans le bandeau
   Le SVG est en currentColor : il suit la couleur du texte du bandeau,
   donc reste lisible si le fond change un jour.
   -------------------------------------------------------------------------- */
.marque {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.marque-logo {
  height: 26px;
  width: auto;
  flex: 0 0 auto;
  color: var(--craie);
}
.marque span {
  font-family: var(--data);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lion-clair);
  padding-left: .6rem;
  border-left: 1px solid var(--ligne-sombre);
}

@media (max-width: 767.98px) {
  .marque-logo { height: 20px; }
  .marque span { font-size: 10px; letter-spacing: .08em; padding-left: .45rem; }
}

/* --------------------------------------------------------------------------
   25. Mention de transparence sur l'assistance au developpement
   Discrete mais lisible : elle informe sans concurrencer la signature.
   -------------------------------------------------------------------------- */
.pied-ia {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .45);
  margin: 0 0 .5rem;
}
.pied-ia a {
  color: rgba(255, 255, 255, .6);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.pied-ia a:hover { color: var(--craie); }

/* --------------------------------------------------------------------------
   27. Bandeau de scores, contenu initial rendu par le serveur
   Visible le temps que le module direct reponde, et par les robots qui
   n'executent pas JavaScript. Remplace des l'arrivee des scores.
   -------------------------------------------------------------------------- */
.direct-initial {
  display: flex;
  gap: var(--e-3);
  overflow-x: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  scrollbar-width: none;
}
.direct-initial::-webkit-scrollbar { display: none; }
.direct-initial li {
  flex: 0 0 auto;
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, .7);
  white-space: nowrap;
}
.direct-initial time {
  font-family: var(--data);
  color: var(--craie);
  margin-right: .35rem;
}
.direct-initial span {
  display: block;
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris-moyen, rgba(255, 255, 255, .4));
}

/* --------------------------------------------------------------------------
   Bandeau de scores, arrivee sur le match en cours
   L'accroche par carte est ramenee a "proximity" : en "mandatory" elle se
   battrait avec le glissement automatique et le stopperait en chemin.
   -------------------------------------------------------------------------- */
.direct-grille { scroll-behavior: auto; }

/* --------------------------------------------------------------------------
   Dernière ligne droite : la route vers le titre
   Trois colonnes sur grand écran, poules croisées, demi-finales, podium.
   Cartes sur papier haut, la Belgique soulignée du rouge lion comme dans
   le calendrier. Ajouté pour la deuxième phase du tournoi.
   -------------------------------------------------------------------------- */
.route-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-4);
  align-items: start;
}

.route-titre {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--gazon);
  margin: 0 0 var(--e-2);
  padding-bottom: var(--e-1);
  border-bottom: 2px solid var(--gazon);
}

.route-poule {
  font-family: var(--texte);
  font-size: var(--t-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--encre-faible);
  margin: var(--e-3) 0 var(--e-1);
}

.route-colonne .route-poule:first-of-type { margin-top: 0; }

.route-match {
  background: var(--papier-haut);
  border: 1px solid var(--ligne);
  border-radius: 8px;
  padding: var(--e-2);
  margin-bottom: var(--e-2);
}

.route-belge { box-shadow: inset 4px 0 0 var(--lion); }

.route-quand {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  flex-wrap: wrap;
  font-family: var(--data);
  font-size: var(--t-xs);
  color: var(--encre-faible);
  margin: 0 0 var(--e-1);
}

.route-etiquette {
  font-family: var(--texte);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gazon);
}

.route-affiche {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: var(--e-1);
  margin: 0;
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--encre);
}

.route-affiche > span:last-child { text-align: right; }
.route-affiche .nation-bel { color: var(--lion); font-weight: 700; }
.route-affiche .nation-attente {
  color: var(--encre-faible);
  font-weight: 500;
  font-style: italic;
  font-size: var(--t-sm);
}

.route-score {
  font-family: var(--data);
  font-size: var(--t-base);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.route-score[data-vide="true"] { color: var(--encre-faible); opacity: .5; }

@media (max-width: 991px) {
  .route-grille { grid-template-columns: 1fr; gap: var(--e-3); }
}


/* --------------------------------------------------------------------------
   Articles liés : visuel du flux RSS
   L'image vient du flux de la rédaction, chargée paresseusement, cadrée en
   16/9 pour un bloc stable sans saut de mise en page. Une carte sans image
   garde exactement son ancienne tête.
   -------------------------------------------------------------------------- */
.article-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: var(--e-2);
  background: var(--encre-douce, rgba(255, 255, 255, .06));
}


/* --------------------------------------------------------------------------
   Les jeux des lecteurs
   Deux cartes, le défi du jour et le pronostic, plus le classement. Les
   barres de résultat se remplissent en pourcentage, le choix du lecteur
   est souligné. Ajouté pour la dernière ligne droite du tournoi.
   -------------------------------------------------------------------------- */
.jeux-carte {
  background: var(--papier-haut);
  border: 1px solid var(--ligne);
  border-radius: 8px;
  padding: var(--e-3);
  margin-bottom: var(--e-3);
}

.jeux-titre {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--gazon);
  margin: 0 0 var(--e-2);
}

.jeux-question {
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--encre);
  margin: 0 0 var(--e-1);
}

.jeux-sous-titre {
  font-family: var(--data);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--encre-faible);
  margin: 0 0 var(--e-2);
}

.jeux-option {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-weight: 600;
  color: var(--encre);
  background: transparent;
  border: 1px solid var(--ligne);
  border-radius: 6px;
  padding: .6rem .8rem;
  margin-bottom: var(--e-1);
  cursor: pointer;
}

.jeux-option:hover, .jeux-option:focus-visible { border-color: var(--gazon); color: var(--gazon); }

.jeux-resultat { margin-bottom: var(--e-2); }
.jeux-resultat-tete {
  display: flex;
  justify-content: space-between;
  gap: var(--e-1);
  font-size: var(--t-sm);
  margin: 0 0 .25rem;
}
.jeux-mien .jeux-resultat-tete { color: var(--gazon); font-weight: 700; }

.jeux-barre {
  height: 8px;
  border-radius: 4px;
  background: var(--ligne);
  overflow: hidden;
}
.jeux-barre-remplie {
  height: 100%;
  border-radius: 4px;
  background: var(--gazon);
  transition: width .5s ease;
}

.jeux-forme { display: flex; flex-direction: column; gap: var(--e-2); }
.jeux-scores { display: flex; align-items: end; gap: var(--e-2); }
.jeux-camp { display: flex; flex-direction: column; gap: .3rem; flex: 1; font-size: var(--t-sm); font-weight: 600; }
.jeux-tiret { padding-bottom: .55rem; color: var(--encre-faible); }

.jeux-buts, .jeux-pseudo {
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--encre);
  background: transparent;
  border: 1px solid var(--ligne);
  border-radius: 6px;
  padding: .5rem .6rem;
  width: 100%;
}
.jeux-buts:focus, .jeux-pseudo:focus { outline: 2px solid var(--gazon); outline-offset: 1px; }

.jeux-envoyer {
  font: inherit;
  font-weight: 700;
  color: var(--craie);
  background: var(--gazon);
  border: none;
  border-radius: 6px;
  padding: .65rem 1rem;
  cursor: pointer;
}

.jeux-verdict { font-weight: 700; color: var(--gazon); margin: 0 0 var(--e-1); }
.jeux-note { font-size: var(--t-xs); color: var(--encre-faible); margin: var(--e-1) 0 0; }

.jeux-classement { list-style: none; margin: 0 0 var(--e-2); padding: 0; counter-reset: rang; }
.jeux-classement li {
  display: flex;
  justify-content: space-between;
  gap: var(--e-1);
  padding: .4rem 0;
  border-bottom: 1px solid var(--ligne);
  counter-increment: rang;
}
.jeux-classement li::before {
  content: counter(rang);
  font-family: var(--data);
  color: var(--encre-faible);
  min-width: 1.4rem;
}
.jeux-classement .jeux-pseudo-nom { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jeux-classement li:nth-child(-n+3)::before { color: var(--gazon); font-weight: 700; }

.jeux-foule-titre {
  font-family: var(--data);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--encre-faible);
  margin: var(--e-2) 0 var(--e-1);
}


/* --------------------------------------------------------------------------
   Signal de nouveauté sur l'entrée Jeux
   Une pastille qui respire dans le sommaire et la barre mobile, posée par
   jeux.js tant que le lecteur n'a pas visité la section. Elle s'éteint au
   premier clic et expire après la finale.
   -------------------------------------------------------------------------- */
html.jeux-nouveau .nav-liens a[href="#jeux"],
html.jeux-nouveau .tabbar a[href="#jeux"] {
  position: relative;
}

html.jeux-nouveau .nav-liens a[href="#jeux"]::after,
html.jeux-nouveau .tabbar a[href="#jeux"]::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--or);
  animation: jeux-lueur 2s ease-in-out infinite;
}

html.jeux-nouveau .nav-liens a[href="#jeux"]::after {
  top: .1rem;
  right: -.55rem;
}

html.jeux-nouveau .tabbar a[href="#jeux"]::after {
  top: .35rem;
  right: 22%;
}

@keyframes jeux-lueur {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 164, 90, .55); }
  50% { box-shadow: 0 0 8px 3px rgba(200, 164, 90, .55); }
}

@media (prefers-reduced-motion: reduce) {
  html.jeux-nouveau .nav-liens a[href="#jeux"]::after,
  html.jeux-nouveau .tabbar a[href="#jeux"]::after {
    animation: none;
    box-shadow: 0 0 5px 2px rgba(200, 164, 90, .55);
  }
}


/* --------------------------------------------------------------------------
   La fête des victoires belges
   Modale de célébration et canevas de confettis, tous deux créés par
   fete.js au moment voulu et retirés ensuite. Rien ici ne s'applique quand
   il n'y a rien à fêter.
   -------------------------------------------------------------------------- */
.fete-fond {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e-3);
  background: rgba(0, 0, 0, .72);
  animation: fete-apparition .25s ease-out;
}

.fete-carte {
  position: relative;
  z-index: 1;
  max-width: 30rem;
  width: 100%;
  text-align: center;
  background: var(--papier-haut);
  border: 1px solid var(--ligne);
  border-radius: 10px;
  padding: var(--e-4) var(--e-3);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}

.fete-oeil {
  font-family: var(--data);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--lion);
  margin: 0 0 var(--e-2);
}

.fete-score {
  font-family: var(--display);
  font-size: clamp(2.6rem, 12vw, 4rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--encre);
  margin: 0 0 var(--e-1);
}

.fete-affiche {
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--encre);
  margin: 0 0 var(--e-3);
}

.fete-suite {
  font-size: var(--t-sm);
  color: var(--encre-faible);
  margin: 0 0 var(--e-3);
}

.fete-fermer {
  font: inherit;
  font-weight: 700;
  color: var(--craie);
  background: var(--lion);
  border: none;
  border-radius: 6px;
  padding: .7rem 1.2rem;
  cursor: pointer;
}

.fete-confettis {
  position: fixed;
  inset: 0;
  z-index: 310;
  pointer-events: none;
}

@keyframes fete-apparition {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fete-fond { animation: none; }
}

.jeux-pseudo.jeux-erreur {
  border-color: var(--lion);
  box-shadow: 0 0 0 2px rgba(226, 35, 26, .25);
}


/* ==========================================================================
   COUCHE MODERNE, refonte du 26 août
   Posée en fin de feuille : elle prime par ordre de cascade sur le châssis
   hérité, sans qu'il faille toucher aux 2500 lignes précédentes.

   Sept blocs, dans l'ordre :
     A. Curseur
     B. Ouverture en carte, vidéo et titre en bas
     C. Verre : la matière des blocs de données
     D. Bandeau flottant en pilule
     E. Chiffres clés, composition « snapshot »
     F. Rangée vidéo numérotée
     G. Parallaxe et image large
   ========================================================================== */

/* --- A. Curseur --------------------------------------------------------
   Un point qui suit la souris, un anneau qui le rattrape. Purement
   décoratif : le vrai curseur reste actif sur les champs de saisie, et
   tout est désactivé au doigt et en mouvement réduit (voir js/curseur.js).
   ---------------------------------------------------------------------- */

.curseur-actif,
.curseur-actif a,
.curseur-actif button,
.curseur-actif [role="button"] { cursor: none; }

.curseur-actif input,
.curseur-actif textarea,
.curseur-actif select { cursor: auto; }

.curseur-point,
.curseur-anneau {
  position: fixed;
  top: 0; left: 0;
  /* Au-dessus de tout, modale comprise (z-index 500) : sans quoi le
     pointeur disparaît dès qu'une vidéo s'ouvre, puisque le curseur
     système est masqué. */
  z-index: 600;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: difference;
  will-change: transform;
}
.curseur-point {
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--craie);
}
.curseur-anneau {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(255, 255, 255, .55);
  transition: width .22s ease, height .22s ease, margin .22s ease,
              border-color .22s ease, opacity .22s ease;
}
/* Au survol d'une cible : l'anneau grossit et se teinte */
.curseur-anneau[data-cible="true"] {
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border-color: var(--gazon-vif);
}
.curseur-anneau[data-presse="true"] {
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
}

/* --- B. Ouverture en carte ---------------------------------------------
   La photo ou la vidéo remplit une carte arrondie, encadrée de marge.
   Le titre vit en bas à gauche, sur un voile bas qui garantit le contraste.
   ---------------------------------------------------------------------- */

.ouverture {
  background: var(--gazon-fonce);
  padding: var(--e-3) 0 var(--e-5);
  overflow: visible;
}

.ouverture-carte {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  isolation: isolate;
  min-height: min(78vh, 720px);
  display: flex;
  align-items: flex-end;
  background: #05070a;
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .9);
}

/* Média de fond : vidéo si elle est déposée, image sinon */
.ouverture-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #05070a center / cover no-repeat;
}

/* Voile bas, dense sous le texte, transparent en haut */
.ouverture-carte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      to top,
      rgba(5, 7, 10, .94) 0%,
      rgba(5, 7, 10, .78) 26%,
      rgba(5, 7, 10, .30) 56%,
      rgba(5, 7, 10, .10) 100%
    );
  pointer-events: none;
}

/* Halo d'accent, très discret, en haut à droite */
.ouverture-carte::after {
  content: "";
  position: absolute;
  top: -20%; right: -10%;
  width: 55%; aspect-ratio: 1;
  z-index: -1;
  background: radial-gradient(circle, rgba(255, 77, 23, .22) 0%, transparent 65%);
  pointer-events: none;
}

.ouverture-texte {
  position: relative;
  z-index: 1;
  padding: var(--e-5) var(--e-4) var(--e-4);
  width: 100%;
}

.ouverture h1 {
  font-family: var(--display);
  font-size: clamp(2.9rem, 8.2vw, 6.5rem);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.045em;
  color: var(--craie);
  margin: 0 0 var(--e-2);
  text-wrap: balance;
}

.ouverture .sur-titre {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1rem, 2.1vw, 1.45rem);
  letter-spacing: -.01em;
  color: var(--gazon-vif);
  margin: 0 0 var(--e-2);
}

.ouverture .oeil {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
}

.ouverture .chapo {
  color: rgba(255, 255, 255, .82);
  max-width: 54ch;
  font-size: var(--t-lg);
  line-height: 1.5;
}

@media (max-width: 767px) {
  .ouverture-carte { border-radius: 18px; min-height: 74vh; }
  .ouverture-texte { padding: var(--e-4) var(--e-3) var(--e-3); }
  /* Sur téléphone, le chapô de l'ouverture occupait presque tout l'écran
     et repoussait le compte à rebours sous la ligne de flottaison. */
  .ouverture .chapo { font-size: var(--t-md); line-height: 1.45; }
}

/* --- C. Verre ----------------------------------------------------------
   Une seule classe, .verre, portée par tous les blocs de données qui
   flottent : compte à rebours, cartes de score, tableaux de classement.
   Fond translucide, flou d'arrière-plan, bord clair en haut qui simule
   la lumière accrochée par la tranche du matériau.
   ---------------------------------------------------------------------- */

.verre {
  position: relative;
  background: var(--verre);
  -webkit-backdrop-filter: blur(var(--flou)) saturate(180%);
  backdrop-filter: blur(var(--flou)) saturate(180%);
  border: 1px solid var(--verre-bord);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .10) inset,
    0 20px 50px -30px rgba(0, 0, 0, .8);
}

/* Sur fond clair, le verre s'inverse pour rester lisible */
.section:not(.section-sombre) .verre {
  background: rgba(255, 255, 255, .62);
  border-color: rgba(10, 13, 18, .07);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 18px 44px -28px rgba(10, 13, 18, .30);
}

/* Compte à rebours : verre posé sur la carte d'ouverture */
.rebours {
  margin-top: var(--e-4);
  background: rgba(255, 255, 255, .09);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  backdrop-filter: blur(26px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, .18);
  border-left: 2px solid var(--gazon-vif);
  border-radius: 18px;
  padding: var(--e-3);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .12) inset,
    0 24px 60px -34px rgba(0, 0, 0, .85);
}
.rebours-titre { color: var(--gazon-vif); }
.rebours-affiche { color: var(--craie); }
.rebours-chiffres b { color: var(--craie); }

/* Cartes de score du bandeau direct */
.direct .match-carte,
.direct-matchs > ul > li {
  border-radius: 14px;
}

/* Tableaux de classement en carte de verre */
.poule {
  padding: var(--e-3);
  border-radius: 18px;
  background: var(--papier-haut);
  border: 1px solid var(--ligne);
  box-shadow: 0 14px 36px -26px rgba(10, 13, 18, .28);
}

/* Qualification : un filet coloré en tête de ligne. La pastille en
   ::after passait à la ligne dans une cellule en flex et chevauchait les
   chiffres ; une bordure ne peut jamais se déplacer. */
/* Marque de qualification : une bordure gauche sur la cellule. Ni
   pseudo-élément positionné ni pastille flottante, donc rien qui puisse
   se déplacer ou chevaucher les chiffres. */
.tableau tr[data-qualifie] th[scope="row"] {
  border-left: 3px solid transparent;
  padding-left: .55rem;
}
.tableau tr[data-qualifie="direct"] th[scope="row"]  { border-left-color: var(--vert-signal); }
.tableau tr[data-qualifie="barrage"] th[scope="row"] { border-left-color: var(--cyan); }
/* Les lignes non qualifiées gardent le même retrait, pour que les noms
   restent alignés d'une ligne à l'autre. */
.tableau tbody tr:not([data-qualifie]) th[scope="row"] {
  border-left: 3px solid transparent;
  padding-left: .55rem;
}

@media (prefers-reduced-transparency: reduce) {
  .verre, .rebours {
    background: rgba(10, 13, 18, .92);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .section:not(.section-sombre) .verre { background: var(--papier-haut); }
}

/* --- D. Bandeau flottant -----------------------------------------------
   Le bandeau se détache des bords et devient une pilule de verre, comme
   la nav de référence. Il reste collant, le contenu défile dessous.
   ---------------------------------------------------------------------- */

.bandeau {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
  box-shadow: none;
  padding: var(--e-2) 0 0;
}
.bandeau > .container {
  background: rgba(10, 13, 18, .72);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 20px;
  padding-top: .55rem;
  padding-bottom: .55rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .08) inset,
    0 18px 44px -30px rgba(0, 0, 0, .85);
}
/* Pas d'arrondi sur les liens du menu : avec la bordure basse de 2 px,
   l'arrondi dessinait un sourire sous l'onglet actif au lieu d'une barre. */
.nav-liens a { border-radius: 0; }

/* Entrées de menu masquées par le code (js/finale.js masque #route tant que
   la phase finale n'est pas connue). L'attribut hidden ne suffit pas : les
   règles display:flex des onglets le battent en spécificité, et le picto
   restait visible alors que la section était bien cachée. */
.nav-liens a[hidden],
.nav-liens li[hidden],
.tabbar a[hidden] { display: none !important; }

@media (prefers-reduced-transparency: reduce) {
  .bandeau > .container {
    background: var(--encre);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* --- E. Chiffres clés --------------------------------------------------
   Composition inspirée du « snapshot » : titre à gauche, filet vertical,
   chiffre géant à droite, ligne de données en petites capitales dessous.
   ---------------------------------------------------------------------- */

.snapshot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--e-4);
  align-items: stretch;
  padding: var(--e-4) 0;
  border-top: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
}
.snapshot-titre {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.03em;
  margin: 0;
  align-self: start;
}
.snapshot-corps {
  border-left: 1px solid var(--ligne);
  padding-left: var(--e-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 260px;
}
.snapshot-tete {
  display: flex;
  justify-content: space-between;
  font-family: var(--data);
  font-size: var(--t-sm);
  color: var(--encre-doux);
}
.snapshot-vedette {
  text-align: right;
  line-height: .84;
}
.snapshot-vedette b {
  font-family: var(--display);
  font-size: clamp(4rem, 14vw, 11rem);
  font-weight: 800;
  letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.snapshot-vedette span {
  font-family: var(--data);
  font-size: var(--t-md);
  color: var(--encre-faible);
  margin-left: .5rem;
}
.snapshot-lignes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--e-3);
  border-top: 1px solid var(--ligne);
  padding-top: var(--e-3);
}
.snapshot-donnee dt {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-faible);
  margin-bottom: .25rem;
}
.snapshot-donnee dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-lg);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .snapshot { grid-template-columns: 1fr; }
  .snapshot-corps { border-left: 0; padding-left: 0; min-height: 0; }
  .snapshot-vedette { text-align: left; }
}

/* --- F. Rangée vidéo numérotée -----------------------------------------
   Le chiffre géant est détouré derrière la vignette, la rangée défile
   horizontalement à l'ancienne, sans script.
   ---------------------------------------------------------------------- */

.mn-row {
  display: flex;
  gap: var(--e-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--e-4) 0 var(--e-3);
  margin-inline: calc(var(--e-3) * -1);
  padding-inline: var(--e-3);
  scrollbar-width: none;
}
.mn-row::-webkit-scrollbar { display: none; }

.mn-item {
  position: relative;
  flex: 0 0 auto;
  width: min(340px, 72vw);
  scroll-snap-align: start;
  padding-left: 3.2rem;      /* place du chiffre détouré */
}
.mn-rang {
  position: absolute;
  left: -.4rem; bottom: -.6rem;
  z-index: 0;
  font-family: var(--display);
  font-size: 9rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.08em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, .30);
  pointer-events: none;
  user-select: none;
}
.section:not(.section-sombre) .mn-rang {
  -webkit-text-stroke-color: rgba(10, 13, 18, .18);
}
.mn-vignette {
  position: relative;
  z-index: 1;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: #05070a center / cover no-repeat;
  box-shadow: 0 18px 44px -28px rgba(0, 0, 0, .8);
  transition: transform .25s ease;
}
.mn-vignette img,
.mn-vignette video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-item:hover .mn-vignette { transform: translateY(-4px) scale(1.015); }
.mn-lecture {
  position: absolute;
  right: .7rem; bottom: .7rem;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .3);
  color: var(--craie);
}
.mn-titre {
  position: relative;
  z-index: 1;
  margin: var(--e-2) 0 .2rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-base);
  letter-spacing: -.01em;
}
.mn-meta {
  position: relative;
  z-index: 1;
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-faible);
}
.section-sombre .mn-meta { color: rgba(255, 255, 255, .6); }

@media (prefers-reduced-motion: reduce) {
  .mn-item:hover .mn-vignette { transform: none; }
}

/* --- G. Parallaxe ------------------------------------------------------
   Bande pleine largeur dont l'image se déplace plus lentement que la
   page. Le décalage est appliqué par js/parallaxe.js via --par, borné,
   et neutralisé en mouvement réduit.
   ---------------------------------------------------------------------- */

.bande-parallaxe {
  position: relative;
  min-height: min(70vh, 620px);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  border-radius: 26px;
  background: #05070a;
}
.bande-parallaxe-media {
  position: absolute;
  inset: -12% 0;
  z-index: -2;
  background: #05070a center / cover no-repeat;
  transform: translate3d(0, var(--par, 0px), 0);
  will-change: transform;
}
.bande-parallaxe::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(5,7,10,.92) 0%, rgba(5,7,10,.35) 55%, transparent 100%);
}
.bande-parallaxe-texte { padding: var(--e-5) var(--e-4) var(--e-4); color: var(--craie); }
.bande-parallaxe-texte h2 { color: var(--craie); }

@media (prefers-reduced-motion: reduce) {
  .bande-parallaxe-media { transform: none; }
}

/* --- Drapeaux et logos -------------------------------------------------
   Affichés dès que les fichiers sont déposés (voir LOGOS-ET-DRAPEAUX.md).
   Sans eux, le code à trois lettres reste affiché : aucune image cassée.
   ---------------------------------------------------------------------- */

.drapeau {
  display: inline-block;
  width: 1.45em;
  height: 1.05em;
  margin-right: .5em;
  border-radius: 3px;
  vertical-align: -.12em;
  object-fit: cover;
  background: rgba(127, 127, 127, .18);
  box-shadow: 0 0 0 1px rgba(10, 13, 18, .12) inset;
}
.section-sombre .drapeau { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset; }
.drapeau[data-absent="true"] { display: none; }

.logo-equipe {
  width: 2.6em;
  height: 2.6em;
  object-fit: contain;
}
.logo-equipe[data-absent="true"] { display: none; }

/* ==========================================================================
   Ajustements du 26 août, deuxième passe
   Retours de la direction artistique : fond du bandeau, marges de
   l'ouverture, filtres fusionnés, légende du classement, alignement des
   groupes, énergie des sections d'accent.
   ========================================================================== */

/* --- Bandeau : plus de fond du tout -------------------------------------
   Première version : une pilule de verre posée sur le contenu. Le fond
   clair qui la cernait venait du fait que le bandeau, en flux, occupait
   sa propre bande de page. En le passant en position fixe, la pilule
   flotte au-dessus de ce qui défile : plus de bande, plus de coupure,
   ni blanche ni noire.
   La hauteur réelle est mesurée par js/ui.js et publiée dans
   --bandeau-h, pour que le premier bloc démarre juste dessous. */
.bandeau {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  padding-top: var(--e-2);
}
/* Le bloc de scores démarre sous la pilule */
.direct { padding-top: calc(var(--bandeau-h, 104px) + var(--e-2)); }

/* --- Bloc direct : même largeur que l'ouverture ------------------------- */
/* Les scores du jour sont la deuxième information du dossier : ils
   méritent la même emprise que le titre. Mêmes 15 px que la carte
   d'ouverture, à toutes les tailles d'écran. */
.direct > .container {
  max-width: none;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}
/* Sur très grand écran, la rangée de matchs s'étale au lieu de laisser
   un vide à droite. */
@media (min-width: 1600px) {
  #direct-matchs > ul,
  #direct-matchs > div { width: 100%; }
}

/* --- Ouverture : la carte s'approche des bords -------------------------- */
/* 15 px de marge à gauche et à droite, au lieu de la gouttière du
   container. La carte devient presque pleine largeur, le titre respire. */
.ouverture > .container {
  max-width: none;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}
/* La bande parallaxe suit la même règle, pour l'alignement vertical */
.ouverture[aria-label] > .container {
  max-width: none;
  padding-left: 15px;
  padding-right: 15px;
}
/* Le texte de l'ouverture garde, lui, une gouttière confortable */
.ouverture-texte { padding-left: clamp(var(--e-3), 4vw, var(--e-5)); padding-right: var(--e-4); }

/* --- Sections d'accent : plus d'énergie ---------------------------------- */
/* L'orange plat manquait de tension. Un dégradé de l'orange électrique
   vers le rose signal donne du relief sans changer l'identité. */
.section-sombre {
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255, 92, 122, .22) 0%, transparent 55%),
    linear-gradient(155deg, #16070b 0%, var(--gazon-fonce) 45%, #1a0a05 100%);
}
.section-sombre .oeil { color: var(--lion-clair); }
.section-sombre h2 { color: var(--craie); }

/* Le bloc abonné reprend le duo orange et rose */
.signature {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255, 77, 23, .30) 0%, transparent 60%),
    linear-gradient(120deg, #17080c 0%, #0a0d12 60%);
}
.bouton-or {
  background: linear-gradient(120deg, var(--gazon-vif) 0%, var(--lion-clair) 100%);
  color: #14060a;
  border: 0;
  font-weight: 700;
}
.bouton-or:hover { filter: brightness(1.08); }

/* --- Filtres, barre unique ---------------------------------------------- */
.filtres-uniques {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  border: 0;
  padding: 0;
  margin: 0 0 var(--e-3);
}
.filtres-uniques .filtre {
  border-radius: 999px;
  padding: .45rem 1rem;
  font-size: var(--t-sm);
  font-weight: 500;
  border: 1px solid var(--ligne);
  background: transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.filtres-uniques .filtre[aria-pressed="true"] {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--craie);
}
/* Le bouton Belgique se distingue : c'est un axe différent des phases */
.filtres-uniques .filtre-bel[aria-pressed="true"] {
  background: linear-gradient(120deg, var(--gazon-vif) 0%, var(--lion-clair) 100%);
  border-color: transparent;
  color: #14060a;
}
.filtres-separateur {
  width: 1px;
  height: 1.4rem;
  background: var(--ligne);
  margin: 0 .35rem;
}
@media (max-width: 600px) {
  .filtres-separateur { display: none; }
}

/* --- Légende du classement ---------------------------------------------- */
.legende {
  list-style: none;
  margin: var(--e-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-4);
  font-size: var(--t-sm);
  color: var(--encre-doux);
}
.legende li { display: flex; align-items: center; gap: .5rem; }
.legende-pastille {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.legende-direct  { background: var(--vert-signal); }
.legende-barrage { background: var(--cyan); }
.legende-sortie  { background: transparent; box-shadow: 0 0 0 1px var(--encre-faible) inset; }

/* --- Groupes : alignement ------------------------------------------------ */
/* Les quatre tableaux avaient des hauteurs libres, donc des bas de carte
   en escalier. La grille les étire à la même hauteur et aligne leurs
   lignes entre elles. */
#liste-classement > .row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e-3);
}
#liste-classement > .row > [class*="col-"] {
  width: auto;
  max-width: none;
  flex: initial;
  padding: 0;
}
#liste-classement .poule {
  height: 100%;
  display: flex;
  flex-direction: column;
}
#liste-classement .poule .tableau { margin-top: auto; }
.poule-titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  min-height: 2.2em;      /* même hauteur de titre partout */
  margin-bottom: var(--e-2);
}
/* Colonnes de chiffres à largeur fixe : les nombres s'alignent d'un
   tableau à l'autre, pas seulement à l'intérieur d'un même groupe. */
.poule .tableau { table-layout: fixed; width: 100%; }
.poule .tableau th[scope="col"]:first-child { width: auto; }
.poule .tableau th[scope="col"]:not(:first-child) { width: 2.6rem; }
.poule .tableau td.num,
.poule .tableau th.num { font-variant-numeric: tabular-nums; text-align: right; }
/* Nom de nation : drapeau et libellé abrégé sur une seule ligne.
   Le libellé vient de DOSSIER.nations[...].abrege, le nom entier reste
   en infobulle. C'est la seule façon de faire tenir cinq colonnes de
   chiffres et un nom lisible sur une carte de groupe. */
/* IMPORTANT : la cellule reste une cellule de tableau.
   Elle avait été passée en display:flex pour aligner le drapeau et le
   nom. Effet de bord : une cellule en flex sort du modèle de tableau,
   n'occupe plus sa colonne, et les chiffres viennent se superposer au
   nom. C'était la cause du chevauchement. Le drapeau est donc aligné
   en inline-block, sans toucher au display de la cellule. */
.poule .tableau th[scope="row"] {
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  padding-top: .55rem;
  padding-bottom: .55rem;
}
.poule .tableau th[scope="row"] .drapeau {
  display: inline-block;
  vertical-align: -.18em;
  width: 1.5em;
  height: 1.1em;
  margin: 0 .45em 0 0;
}
.poule .tableau th[scope="col"]:first-child { width: 38%; }

@media (max-width: 1199px) {
  #liste-classement > .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Sous 640 px, on garde deux colonnes : la demande est explicite et les
   abréviations plus les colonnes de chiffres resserrées le permettent.
   Une seule colonne obligeait à quatre écrans de défilement. */
@media (max-width: 640px) {
  #liste-classement > .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Sélection de texte -------------------------------------------------
   Le surlignage reprend l'accent du dossier. Deux déclarations séparées :
   un sélecteur inconnu invalide toute la règle qui le contient, donc on
   ne peut pas grouper ::selection et ::-moz-selection.
   ------------------------------------------------------------------------ */
::selection {
  background: var(--gazon-vif);
  color: #14060a;
  text-shadow: none;
}
::-moz-selection {
  background: var(--gazon-vif);
  color: #14060a;
  text-shadow: none;
}
/* Sur les fonds sombres, l'orange reste lisible mais on force le texte
   en clair pour les zones déjà très contrastées. */
.ouverture ::selection,
.section-sombre ::selection {
  background: var(--lion-clair);
  color: #14060a;
}

/* --- Modale vidéo -------------------------------------------------------
   Ouverte au clic sur une vignette de la rangée « temps forts ».
   Le lecteur reste dans la page, la vidéo s'arrête à la fermeture.
   ------------------------------------------------------------------------ */
.modale {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: var(--e-3);
  background: rgba(5, 7, 10, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity .2s ease;
}
.modale[data-ouverte="true"] { opacity: 1; }
.modale[hidden] { display: none; }

.modale-boite {
  position: relative;
  width: min(1100px, 100%);
  border-radius: 20px;
  overflow: hidden;
  background: #05070a;
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .95);
  transform: translateY(12px) scale(.985);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}
.modale[data-ouverte="true"] .modale-boite { transform: none; }

.modale-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: #05070a;
  border: 0;
}
.modale-vide {
  display: grid;
  place-items: center;
  gap: var(--e-2);
  aspect-ratio: 16 / 9;
  padding: var(--e-4);
  text-align: center;
  color: rgba(255, 255, 255, .78);
}
.modale-vide i { font-size: 2rem; color: var(--gazon-vif); }

.modale-legende {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3);
  color: var(--craie);
  border-top: 1px solid rgba(255, 255, 255, .10);
}
.modale-legende h3 {
  margin: 0;
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--craie);
}
.modale-legende p {
  margin: .2rem 0 0;
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.modale-fermer {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  color: var(--craie);
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.modale-fermer:hover { background: rgba(255, 255, 255, .16); }
.modale-fermer:active { transform: scale(.94); }

.mn-vignette { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .modale, .modale-boite { transition: none; }
  .modale-boite { transform: none; }
}

/* --- Avertissement du mode démonstration --------------------------------
   Volontairement voyant : il ne doit jamais passer inaperçu en ligne.
   ------------------------------------------------------------------------ */
.avertissement-demo {
  margin: 0 0 var(--e-2);
  padding: .6rem .9rem;
  border-radius: 10px;
  background: var(--or);
  color: #1a1200;
  font-family: var(--data);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .04em;
}

/* ==========================================================================
   Correctifs d'affichage, 26 août au soir
   Trois bugs rapportés en relecture : le rectangle qui apparaît sous le
   bandeau au défilement, les marges du mobile, le titre masqué sur les
   pages sans bloc de scores.
   ========================================================================== */

/* --- 1. Le rectangle et le freeze au défilement -------------------------
   Cause : deux surfaces à backdrop-filter se superposent (la pilule du
   bandeau, fixe, passe au-dessus du compte à rebours, lui aussi flouté)
   à l'intérieur d'une carte en overflow:hidden avec un rayon. Chrome
   recalcule alors la zone de flou à chaque image et laisse apparaître le
   rectangle de capture du filtre.
   Correction : chaque surface floutée devient sa propre couche GPU, et
   la carte confine sa peinture. Le flou est conservé.
   ---------------------------------------------------------------------- */

.bandeau > .container,
.rebours,
.verre,
.tabbar {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

.ouverture-carte {
  contain: paint;
  isolation: isolate;
}

/* Le halo d'accent de la carte est repeint à chaque défilement s'il reste
   en couche partagée : on le promeut lui aussi. */
.ouverture-carte::after { will-change: opacity; }

/* --- 2. Titre masqué sur les pages sans bloc de scores -------------------
   Le bandeau est en position fixe : il ne pousse plus rien. Sur la page
   d'accueil, c'est .direct qui réserve la place. Sur dev.html et toute
   page sans ce bloc, le premier titre passait dessous.
   ---------------------------------------------------------------------- */

body[data-page] main,
body[data-page] .contenu-dev {
  padding-top: calc(var(--bandeau-h, 104px) + var(--e-3));
}

/* --- 3. Marges et respiration en mobile ---------------------------------- */

@media (max-width: 767px) {

  /* Le bandeau ne colle plus au bord de l'écran */
  .bandeau { padding-left: 10px; padding-right: 10px; }
  .bandeau > .container {
    padding-left: 14px;
    padding-right: 14px;
    border-radius: 16px;
  }

  /* Ouverture et bloc direct : même retrait que le reste */
  .ouverture > .container,
  .direct > .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Les sections de contenu ne collent plus au bord de l'écran : c'est ce
     qui donnait cette impression de contenu écrasé contre le navigateur. */
  .section > .container,
  .signature > .container {
    padding-left: 15px;
    padding-right: 15px;
  }
  /* Les colonnes de la grille Bootstrap ajoutent leur propre gouttière :
     on la neutralise pour que le retrait reste bien de 15 px et pas 30. */
  .section > .container > .row > [class*="col-"],
  .signature > .container > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }
  .section > .container > .row,
  .signature > .container > .row {
    margin-left: 0;
    margin-right: 0;
  }
  .ouverture-texte {
    padding-left: var(--e-3);
    padding-right: var(--e-3);
    padding-bottom: var(--e-3);
  }

  /* Cartes de groupe : deux colonnes en mobile. Quatre groupes tiennent
     alors sur deux rangées au lieu de quatre écrans de défilement, et la
     lecture d'un groupe à l'autre devient possible d'un coup d'œil. */
  #liste-classement > .row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  #liste-classement .poule {
    padding: 12px 10px 8px;
    border-radius: 14px;
  }
  #liste-classement .poule .tableau { margin-top: var(--e-2); }

  /* Sur deux colonnes, chaque carte est étroite : le nom prend la moitié
     de la place et les chiffres se resserrent. Diff et Pts suffisent à
     comprendre un classement en mobile, J G P passent en très compact. */
  .poule .tableau th[scope="col"]:first-child { width: 44%; }
  /* J, G, P tiennent en un ou deux chiffres. Diff et Pts, non : la
     différence de points peut faire quatre caractères (-108), et à
     1,6 rem la colonne débordait sur Pts. On leur donne leur place, on
     la reprend sur le nom d'équipe et sur les trois colonnes courtes. */
  .poule .tableau th[scope="col"]:nth-child(2),
  .poule .tableau th[scope="col"]:nth-child(3),
  .poule .tableau th[scope="col"]:nth-child(4) { width: 1.4rem; }
  .poule .tableau th[scope="col"]:nth-child(5) { width: 2.6rem; }
  .poule .tableau th[scope="col"]:nth-child(6) { width: 2rem; }
  .poule .tableau td:nth-child(5),
  .poule .tableau td:nth-child(6) { white-space: nowrap; }
  .poule .tableau td.num,
  .poule .tableau th.num {
    padding-left: .1rem;
    padding-right: .1rem;
    font-size: var(--t-xs);
  }
  .poule .tableau th[scope="row"] {
    font-size: var(--t-sm);
    padding-right: .2rem;
  }
  .poule .tableau th[scope="row"] .drapeau {
    width: 1.25em;
    height: .95em;
    margin-right: .35em;
  }
  .poule-titre { font-size: var(--t-sm); }
  .poule-site { font-size: 10px; }

  /* Légende du classement : une entrée par ligne, lisible */
  .legende { gap: var(--e-1) var(--e-3); font-size: var(--t-xs); }

  /* Snapshot : le chiffre géant débordait */
  .snapshot { padding: var(--e-3) 0; }
  .snapshot-vedette b { font-size: clamp(3.4rem, 22vw, 6rem); }

  /* Rangée vidéo : le chiffre détouré mangeait la vignette */
  .mn-item { padding-left: 2.2rem; }
  .mn-rang { font-size: 6rem; }
}

/* Très petits écrans : on resserre encore */
@media (max-width: 380px) {
  .bandeau > .container { padding-left: 10px; padding-right: 10px; }
  .poule .tableau th[scope="col"]:not(:first-child) { width: 1.9rem; }
}

/* --- 4. Drapeaux qui disparaissent par intermittence ---------------------
   Le drapeau ne doit jamais se réduire ni disparaître sous la pression
   de la mise en page : largeur et hauteur fermes, pas de rétrécissement
   par flex.
   ---------------------------------------------------------------------- */

.drapeau {
  flex: 0 0 auto;
  min-width: 1.45em;
}
.poule .tableau th[scope="row"] .drapeau {
  min-width: 1.5em;
}

/* ==========================================================================
   Passe du 27 août : débordement mobile, bandeau compact, rangée vidéo
   ========================================================================== */

/* --- 1. Le site qui « flotte » en mobile --------------------------------
   Mesuré dans le navigateur à 400 px : le document déborde de 12 px vers
   la droite, ce qui autorise un défilement horizontal de toute la page.
   Coupable : les cartes du bandeau de scores, qui défilent latéralement
   mais dont la largeur fixe dépassait de leur conteneur.
   Deux verrous : la page ne défile plus horizontalement, et le défilement
   latéral reste à l'intérieur du bloc de scores, là où il a du sens.
   ---------------------------------------------------------------------- */
html, body { overflow-x: hidden; max-width: 100%; }

#direct-matchs {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#direct-matchs::-webkit-scrollbar { display: none; }

/* NE PAS remettre de max-width: 100% sur les .container.
   Cette règle avait été posée pour contenir le débordement mobile, mais
   elle écrasait le max-width: 1320px du conteneur Bootstrap : toutes les
   sections passaient alors pleine largeur en desktop. Le débordement est
   déjà tenu par overflow-x sur html et body ci-dessus, plus le
   défilement interne du bloc de scores. Ici, on se contente d'empêcher
   les sections elles-mêmes (pas leurs conteneurs) de dépasser. */
.direct, .ouverture, .section, .signature { max-width: 100vw; }

/* --- 2. Bandeau du direct compact en mobile -----------------------------
   « Prochaine journée » sur une ligne, « suivi en direct actif » et
   « mise à jour » sur une autre, en plus petit : trois lignes pleine
   hauteur mangeaient un quart de l'écran avant même le titre.
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {
  .direct { padding-top: calc(var(--bandeau-h, 92px) + var(--e-1)); }

  .direct-tete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .6rem;
    margin-bottom: .5rem;
  }
  .direct-titre {
    font-size: var(--t-sm);
    letter-spacing: .06em;
    margin: 0;
  }
  .direct-etat {
    font-size: 10px;
    line-height: 1.35;
    opacity: .78;
    margin: 0;
  }
  /* L'horodatage de mise à jour est une information de confort :
     il passe à la ligne seulement s'il reste de la place. */
  .direct-maj { display: block; }
  .direct-etat [data-champ="etat-direct"] { display: inline; }
}

/* Écrans très étroits : on ne garde que l'essentiel */
@media (max-width: 480px) {
  .direct-etat [data-champ="etat-direct"] { display: none; }
  .direct-maj { font-size: 10px; }
}

/* --- 3. Rangée vidéo pleine largeur -------------------------------------
   Elle s'arrêtait à la gouttière du conteneur, ce qui donnait une rangée
   flottant au milieu de la page. Elle déborde maintenant jusqu'aux bords
   de l'écran, comme les rangées d'une plateforme de streaming, tout en
   gardant son alignement de départ sur le texte de la section.
   ---------------------------------------------------------------------- */
.mn-row {
  /* Déborde symétriquement du conteneur jusqu'aux bords de la fenêtre */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Le premier élément reste aligné sur le texte de la section */
  padding-left: max(15px, calc(50vw - 50% + var(--e-3)));
  padding-right: max(15px, calc(50vw - 50%));
  padding-top: var(--e-4);
  padding-bottom: var(--e-3);
  gap: var(--e-3);
  scroll-padding-left: max(15px, calc(50vw - 50% + var(--e-3)));
}

/* Vignettes plus larges, format paysage de plateforme */
.mn-item { width: min(400px, 78vw); padding-left: 3.6rem; }
.mn-vignette { aspect-ratio: 16 / 9; }
.mn-rang { font-size: 10.5rem; left: -.6rem; }

@media (max-width: 767px) {
  .mn-item { width: min(300px, 76vw); padding-left: 2.4rem; }
  .mn-rang { font-size: 6.5rem; }
  .mn-row { padding-left: 12px; padding-right: 12px; margin-left: calc(50% - 50vw); }
}

/* --- Barre d'onglets mobile : défilement horizontal ----------------------
   Dix entrées ne tiennent pas sur 390 px. Plutôt que de sacrifier des
   sections ou d'écrire trop petit, la barre défile latéralement, avec un
   dégradé qui signale qu'il reste des entrées à droite.
   ------------------------------------------------------------------------ */
.tabbar {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  justify-content: flex-start;
  scroll-snap-type: x proximity;
}
.tabbar::-webkit-scrollbar { display: none; }
.tabbar a {
  flex: 0 0 auto;
  min-width: 4.6rem;
  scroll-snap-align: center;
}
/* Voile de bord : indique qu'on peut faire défiler */
.tabbar::after {
  content: "";
  position: sticky;
  right: 0;
  flex: 0 0 26px;
  align-self: stretch;
  background: linear-gradient(to right, transparent, rgba(10, 13, 18, .85));
  pointer-events: none;
}


/* --- Garde-fou des très petits écrans -----------------------------------
   Deux colonnes de classement tiennent jusqu'à environ 340 px. En dessous
   (vieux iPhone SE, fenêtre réduite), on repasse à une colonne plutôt que
   de rendre les chiffres illisibles.
   ------------------------------------------------------------------------ */
@media (max-width: 340px) {
  #liste-classement > .row { grid-template-columns: 1fr; }
  .poule .tableau th[scope="col"]:first-child { width: 42%; }
  .poule .tableau th[scope="col"]:not(:first-child) { width: 2rem; }
}

/* ==========================================================================
   Frise du tournoi
   Remplace la liste à puces des phases. Cinq étapes numérotées reliées par
   un fil, avec dates, durée et intitulé. Le repère se colore tout seul
   selon que l'étape est passée, en cours ou à venir (attribut data-etat
   posé par equipes.js).

   Desktop : cinq colonnes, fil horizontal.
   Mobile  : empilement, fil vertical.
   ========================================================================== */

.frise {
  list-style: none;
  margin: var(--e-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--e-3);
  counter-reset: none;
}

.frise-etape {
  position: relative;
  padding-top: 2.9rem;
}

/* Le fil : un trait qui relie les repères, interrompu au dernier. */
.frise-etape::before {
  content: "";
  position: absolute;
  top: 1.05rem;
  left: 2.2rem;
  right: calc(var(--e-3) * -1);
  height: 2px;
  background: var(--ligne);
}
.frise-etape:last-child::before { display: none; }

/* Le repère numéroté */
.frise-repere {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--ligne);
  background: var(--papier);
  font-family: var(--data);
  font-size: var(--t-sm);
  color: var(--encre-faible);
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.frise-repere b { font-weight: 500; }

/* Étape terminée : repère plein, fil coloré */
.frise-etape[data-etat="passee"] .frise-repere {
  border-color: var(--vert-signal);
  background: var(--vert-signal);
  color: #05170e;
}
.frise-etape[data-etat="passee"]::before { background: var(--vert-signal); }

/* Étape en cours : repère à l'accent, avec un halo qui respire */
.frise-etape[data-etat="encours"] .frise-repere {
  border-color: var(--gazon-vif);
  background: var(--gazon-vif);
  color: #14060a;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--gazon-vif) 22%, transparent);
}
.frise-etape[data-etat="encours"] .frise-titre { color: var(--gazon); }

.frise-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  margin: 0 0 .3rem;
}
.frise-jours {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gazon);
}
.frise-duree {
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--encre-faible);
  padding: .1rem .4rem;
  border: 1px solid var(--ligne);
  border-radius: 999px;
}

.frise-titre {
  margin: 0 0 .4rem;
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.frise-texte {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--encre-doux);
  max-width: 34ch;
}

/* Sur fond sombre */
.section-sombre .frise-repere { background: var(--encre); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.6); }
.section-sombre .frise-etape::before { background: rgba(255,255,255,.16); }
.section-sombre .frise-texte { color: rgba(255,255,255,.72); }
.section-sombre .frise-jours { color: var(--gazon-vif); }

/* --- Tablette : trois colonnes, le fil se coupe en fin de rangée -------- */
@media (max-width: 1100px) {
  .frise { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--e-4); }
  .frise-etape:nth-child(3n)::before { display: none; }
}

/* --- Mobile : empilement, fil vertical ---------------------------------- */
@media (max-width: 767px) {
  .frise {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: var(--e-3);
  }
  .frise-etape {
    padding-top: 0;
    padding-left: 3rem;
    padding-bottom: var(--e-4);
  }
  /* Le fil devient vertical et descend jusqu'à l'étape suivante */
  .frise-etape::before {
    top: 2.4rem;
    bottom: -.2rem;
    left: 1rem;
    right: auto;
    width: 2px;
    height: auto;
  }
  .frise-etape:last-child { padding-bottom: 0; }
  .frise-texte { max-width: none; }
  .frise-titre { font-size: var(--t-base); }
}

/* Le halo de l'étape en cours ne clignote pas en mouvement réduit */
@media (prefers-reduced-motion: no-preference) {
  .frise-etape[data-etat="encours"] .frise-repere {
    animation: frise-pouls 2.6s ease-in-out infinite;
  }
  @keyframes frise-pouls {
    0%, 100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--gazon-vif) 20%, transparent); }
    50%      { box-shadow: 0 0 0 9px color-mix(in srgb, var(--gazon-vif) 8%, transparent); }
  }
}

/* --- Note de méthode : une remarque, pas un paragraphe perdu ------------- */
.note-methode {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: var(--e-3) 0 0;
  padding: .8rem 1rem;
  border-left: 3px solid var(--gazon-vif);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--gazon-vif) 7%, transparent);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--encre-doux);
}
.note-methode i { color: var(--gazon-vif); margin-top: .18rem; }
.section-sombre .note-methode {
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .78);
}

/* Titre de la frise */
.titre-frise {
  margin: var(--e-5) 0 0;
  padding-top: var(--e-4);
  border-top: 1px solid var(--ligne);
  font-family: var(--display);
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ==========================================================================
   Emplacement publicitaire du classement
   Desktop : deux colonnes de groupes à gauche (A B puis C D), un
   Halfpage 300x600 à droite, collant pendant le défilement.
   Mobile   : le même emplacement devient un IMU 300x250, sous les groupes.
   Le cadre garde ses dimensions même vide : rien ne bougera le jour où le
   code de la régie sera collé.
   ========================================================================== */

.classement-avec-pub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--e-4);
  align-items: start;
}

/* Les quatre groupes passent sur deux colonnes pour laisser la place */
.classement-avec-pub #liste-classement > .row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pub-emplacement {
  position: sticky;
  top: calc(var(--bandeau-h, 104px) + var(--e-3));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
}

.pub-mention {
  margin: 0;
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre-faible);
  align-self: flex-start;
}

.pub-cadre {
  width: 300px;
  height: 600px;
  overflow: hidden;
  border-radius: 12px;
  background: color-mix(in srgb, var(--encre) 4%, transparent);
  border: 1px dashed var(--ligne);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Dès qu'un contenu est inséré par la régie, le cadre s'efface */
.pub-cadre:not(:empty) { border: 0; background: none; }
.pub-cadre > * { max-width: 100%; }

/* Sur fond sombre */
.section-sombre .pub-cadre { border-color: rgba(255, 255, 255, .14); }

/* --- Sous 1200 px : la colonne de droite ne tient plus ------------------- */
@media (max-width: 1199px) {
  .classement-avec-pub {
    grid-template-columns: 1fr;
    gap: var(--e-4);
  }
  .pub-emplacement {
    position: static;
    align-items: center;
    width: 100%;
  }
  .pub-mention { align-self: center; }
  /* Format IMU, celui des mobiles et petites tablettes */
  .pub-cadre { width: 300px; height: 250px; }

  /* L'IMU passe SOUS la légende. display: contents dissout la grille et
     remonte ses deux enfants au niveau de la colonne, qui peut alors les
     ordonner : classement, légende, puis publicité. Sans ça, la pub
     restait coincée entre les groupes et leur légende. */
  .classement-colonne { display: flex; flex-direction: column; }
  .classement-avec-pub { display: contents; }
  .classement-colonne #liste-classement { order: 1; }
  .classement-colonne .legende { order: 2; }
  .classement-colonne .pub-emplacement { order: 3; margin-top: var(--e-3); }
}

/* ==========================================================================
   Vitrine des jeux, pour les lecteurs non abonnés
   Les silhouettes derrière le voile ne sont pas des données floutées :
   ce sont des formes vides. Il n'y a rien à révéler en retirant le flou.
   ========================================================================== */

.vitrine {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  min-height: 360px;
  display: grid;
  place-items: center;
  padding: var(--e-4) var(--e-3);
  border: 1px solid var(--ligne);
  background: var(--papier-haut);
}

/* Le fond : la forme des jeux, floutée */
.vitrine-fond {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-3);
  padding: var(--e-3);
  filter: blur(7px);
  opacity: .5;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 767px) {
  .vitrine-fond { grid-template-columns: 1fr; }
  .vitrine-fond > :last-child { display: none; }
}

.vitrine-apercu {
  background: var(--papier);
  border: 1px solid var(--ligne);
  border-radius: 12px;
  padding: var(--e-3);
}
.vitrine-apercu-titre {
  margin: 0 0 .8rem;
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-faible);
}

.vitrine-lignes { list-style: none; margin: 0; padding: 0; }
.vitrine-lignes li {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--ligne);
}
.vitrine-rang {
  font-family: var(--data);
  font-size: var(--t-sm);
  color: var(--encre-faible);
  width: 1rem;
}
.vitrine-barre {
  height: .72rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--encre) 16%, transparent);
  flex: 0 0 auto;
}
.vitrine-barre-large { display: block; width: 82%; height: 1rem; margin-bottom: .9rem; }
.vitrine-points {
  margin-left: auto;
  font-family: var(--data);
  font-size: var(--t-xs);
  color: var(--encre-faible);
}
.vitrine-reponse {
  display: block;
  height: 2.1rem;
  border-radius: 8px;
  border: 1px solid var(--ligne);
  background: color-mix(in srgb, var(--encre) 5%, transparent);
  margin-bottom: .5rem;
}

/* Le panneau : le seul élément lisible */
.vitrine-panneau {
  position: relative;
  z-index: 1;
  max-width: 30rem;
  text-align: center;
  padding: var(--e-4) var(--e-3);
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 24px 60px -34px rgba(10, 13, 18, .5);
  transform: translateZ(0);
}
.vitrine-panneau > i {
  font-size: 1.5rem;
  color: var(--or);
  margin-bottom: .6rem;
  display: block;
}
.vitrine-panneau h3 {
  margin: 0 0 .6rem;
  font-family: var(--display);
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -.02em;
}
.vitrine-panneau > p {
  margin: 0 0 var(--e-3);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--encre-doux);
}
.vitrine-panneau .bouton-or { display: inline-block; }
.vitrine-deja {
  margin: var(--e-2) 0 0 !important;
  font-size: var(--t-xs);
  color: var(--encre-faible);
}

@media (prefers-reduced-transparency: reduce) {
  .vitrine-panneau {
    background: var(--papier);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* --- Paywall Piano -------------------------------------------------------
   Convention des dossiers « Rodéos urbains » et « Ghana, déchets » :
   Piano retire la classe is-hidden de #content quand l'abonnement est
   validé. On déclare la règle nous-mêmes plutôt que de dépendre d'une
   feuille distante : si piano.js changeait, le contenu payant resterait
   masqué par défaut, ce qui est le sens sûr de l'erreur.
   ------------------------------------------------------------------------ */
/* #content reste vide et masqué en permanence : il ne sert que de
   signal pour js/abonnement.js. */

/* La vitrine occupe la place laissée libre, sans marge en double */
#jeux-vitrine { margin: 0; }
#jeux-vitrine:empty { display: none; }

/* ==========================================================================
   Abonnement : offre dans la vitrine, gabarit Piano dans une modale
   Le gabarit Piano prend beaucoup de hauteur dans le flux (280 px pour la
   box d'offres, 750 px pour la connexion) et casse la mise en page du
   dossier. On le garde intact mais on le range dans une modale, ouverte
   par le bouton de la vitrine.
   ========================================================================== */

/* Tant qu'ils sont dans le flux, les blocs Piano ne prennent pas de
   place : ils sont sortis du flux plutôt que masqués par display:none.
   La différence compte : js/abonnement.js mesure la hauteur de la box
   d'offres pour savoir si Piano réclame un paiement, et display:none
   donnerait une hauteur nulle en toutes circonstances, donc un faux
   « abonné ». Ils reprennent une place normale une fois déplacés dans
   la modale (attribut data-deplace). */
/* Remplacé par .piano-zone, plus bas dans cette feuille. */
#content { display: none; }   /* jamais de contenu à nous ici */
#paywall-minisite[data-deplace],
#piano-login[data-deplace] {
  display: block;
  width: 100%;
}

/* --- L'offre dans la vitrine -------------------------------------------- */
.vitrine-offre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .35rem .6rem;
  margin: 0 0 var(--e-3) !important;
  padding: .8rem 1rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--or) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 32%, transparent);
}
.vitrine-offre b {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -.02em;
}
.vitrine-cadeau {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .12rem .5rem;
  border-radius: 999px;
  background: var(--or);
  color: #1a1200;
}
.vitrine-prix {
  font-family: var(--display);
  font-size: var(--t-xl);
  font-weight: 800;
  letter-spacing: -.03em;
}
.vitrine-semaine {
  width: 100%;
  font-family: var(--data);
  font-size: var(--t-xs);
  color: var(--encre-faible);
}


}

/* --- Mentions légales du pied de page ------------------------------------
   Requises dès lors que le dossier accueille de la publicité. Fond noir,
   sous la section sources, avec le lien « Paramètres des cookies » qui
   rouvre le gestionnaire de consentement.
   ------------------------------------------------------------------------ */
.pied-legal {
  margin-top: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.pied-legal-titre {
  margin: 0 0 var(--e-2);
  font-family: var(--data);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.pied-liens {
  list-style: none;
  margin: 0 0 var(--e-2);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
}
.pied-liens a {
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.pied-liens a:hover {
  color: var(--craie);
  border-bottom-color: var(--gazon-vif);
}
.pied-reseaux a { color: rgba(255, 255, 255, .5); font-size: var(--t-xs); }
.pied-reseaux a:hover { color: var(--craie); }

@media (max-width: 767px) {
  .pied-liens { gap: .5rem 1rem; }
  .pied-liens a { font-size: var(--t-xs); }
}

/* --- Masquage réel du conteneur des jeux ---------------------------------
   L'attribut hidden pose display:none par la feuille du navigateur, mais
   la classe .row de Bootstrap déclare display:flex, qui l'emporte : le
   bloc restait visible avec ses « Chargement du défi du jour » alors que
   la vitrine était affichée. Le !important est ici justifié : il rétablit
   un comportement natif que la grille avait écrasé.
   ------------------------------------------------------------------------ */
#jeux-contenu[hidden],
#jeux-vitrine[hidden],
.row[hidden] {
  display: none !important;
}

/* --- Zone Piano ----------------------------------------------------------
   Les conteneurs de Piano sont sortis du flux via un parent qui, lui,
   n'est jamais modifié par le script distant. Sans ce parent, Piano
   imposait ses propres styles et son formulaire de 640 px apparaissait
   en haut de page au rechargement.
   La zone garde une largeur réelle : js/abonnement.js mesure la hauteur
   de la box d'offres pour savoir si un paiement est réclamé, et une
   largeur nulle fausserait cette mesure.
   ------------------------------------------------------------------------ */
.piano-zone {
  position: absolute;
  left: -99999px;
  top: 0;
  width: 600px;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  /* Ceinture et bretelles pour Firefox : au rechargement, il restaure le
     focus dans l'iframe Piano et tente de la faire apparaître. Invisible
     et rognée, elle ne peut plus remonter dans la page. */
  visibility: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
.piano-zone iframe { visibility: hidden; }
.piano-zone #paywall-minisite,
.piano-zone #piano-login { display: block; width: 100%; }

/* --- Modale abonnement ---------------------------------------------------
   Ouverte par la vitrine des jeux (js/abonnement.js). Piano pose son
   formulaire de connexion dans #abo-login ; on ne touche qu'au cadre.
   ------------------------------------------------------------------------ */
.abo-modale {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e-3);
}
.abo-modale[hidden] { display: none; }
.abo-modale-ouverte, .abo-modale-ouverte body { overflow: hidden; }

.abo-voile {
  position: absolute;
  inset: 0;
  background: rgba(10, 13, 18, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .22s ease;
}
.abo-boite {
  position: relative;
  width: min(100%, 30rem);
  max-height: calc(100vh - 2 * var(--e-3));
  max-height: calc(100dvh - 2 * var(--e-3));
  overflow-y: auto;
  background: var(--papier-haut);
  color: var(--encre);
  border-radius: 20px;
  padding: var(--e-4) var(--e-3) var(--e-3);
  box-shadow: 0 40px 90px -30px rgba(10, 13, 18, .6);
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition: opacity .22s ease, transform .26s cubic-bezier(.2, .8, .2, 1);
}
.abo-modale.est-ouverte .abo-voile { opacity: 1; }
.abo-modale.est-ouverte .abo-boite { opacity: 1; transform: none; }

.abo-boite h2 {
  font-size: var(--t-lg);
  margin: 0 0 var(--e-1);
  padding-right: 2.5rem;
}
.abo-texte {
  font-size: var(--t-md);
  color: var(--encre-doux);
  margin: 0 0 var(--e-2);
}
.abo-fermer {
  position: absolute;
  top: var(--e-2);
  right: var(--e-2);
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--papier);
  color: var(--encre);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.abo-fermer:hover { background: #e4e6ec; }
.abo-fermer:focus-visible { outline: 2px solid var(--gazon-vif); outline-offset: 2px; }

/* Le formulaire Piano arrive dans une iframe ; piano.js lui impose
   min-height 600px sur #piano-login, pas ici. On lui laisse sa taille. */
#abo-login { margin: 0 0 var(--e-2); }
#abo-login iframe { width: 100% !important; border: 0; display: block; }

.abo-attente {
  font-size: var(--t-sm);
  color: var(--encre-faible);
  text-align: center;
  padding: var(--e-3) 0;
  margin: 0 0 var(--e-2);
}

.abo-connecte {
  display: flex;
  gap: var(--e-2);
  align-items: flex-start;
  background: var(--papier);
  border-left: 3px solid var(--or);
  border-radius: 0 12px 12px 0;
  padding: var(--e-2);
  margin: 0 0 var(--e-2);
  font-size: var(--t-md);
}
.abo-connecte i { color: var(--gazon); margin-top: .2rem; }
.abo-connecte p { margin: 0; }

.abo-pied {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding-top: var(--e-2);
  border-top: 1px solid var(--ligne);
}
.abo-pied .bouton-or { width: 100%; text-align: center; }
.abo-pied-note {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre-faible);
}

/* Boutons de la vitrine : mêmes rendus qu'avant, mais en <button> */
button.bouton-or { border: 0; cursor: pointer; font: inherit; }
.vitrine-lien {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--gazon-vif);
  text-decoration: underline;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .abo-voile, .abo-boite { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .abo-voile { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10, 13, 18, .8); }
}

/* --- Bouton de compte du bandeau ----------------------------------------
   Trois états portés par data-etat sur #compte (js/compte.js). L'état
   « inconnu » est celui du chargement : rond discret, pas de capsule,
   tant que Piano n'a pas répondu.
   ------------------------------------------------------------------------ */
.compte {
  position: relative;
  flex: 0 0 auto;
}
.compte-bouton {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .2rem .2rem .2rem .2rem;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--craie);
  font: inherit;
  cursor: pointer;
}
.compte-bouton:focus-visible {
  outline: 2px solid var(--gazon-vif);
  outline-offset: 3px;
}

.compte-rond {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  border: 1.5px solid transparent;
  font-family: var(--data);
  font-size: .8rem;
  font-weight: 500;
  line-height: 1;
  transition: border-color var(--transition), background var(--transition);
}
.compte-rond i { font-size: .85rem; }

.compte-capsule {
  display: none;                 /* mobile : le liseré suffit, cf. plus bas */
  padding: .2rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--ligne-sombre);
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, .8);
}

/* État inconnu : rien ne clignote, rien ne ment. */
.compte[data-etat="inconnu"] .compte-capsule { display: none; }
.compte[data-etat="inconnu"] .compte-rond { opacity: .55; }

.compte[data-etat="connecte"] .compte-rond { border-color: var(--craie); }
.compte[data-etat="abonne"] .compte-rond {
  border-color: var(--or);
  background: rgba(255, 201, 77, .16);
  color: var(--or);
}
.compte[data-etat="abonne"] .compte-capsule {
  border-color: var(--or);
  color: var(--or);
}

@media (min-width: 768px) {
  .compte[data-etat="anonyme"] .compte-capsule,
  .compte[data-etat="connecte"] .compte-capsule,
  .compte[data-etat="abonne"] .compte-capsule { display: inline-block; }
}

/* --- Menu déroulant ------------------------------------------------------ */
.compte-menu {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 700;
  min-width: 15rem;
  padding: .5rem;
  background: var(--papier-haut);
  color: var(--encre);
  border: 1px solid var(--ligne);
  border-radius: 14px;
  box-shadow: 0 26px 60px -28px rgba(10, 13, 18, .65);
  text-align: left;
}
.compte-menu[hidden] { display: none; }

.compte-nom {
  margin: 0;
  padding: .35rem .6rem;
  font-family: var(--display);
  font-size: var(--t-md);
  color: var(--encre);
}
.compte-nom[hidden] { display: none; }

.compte-etat {
  margin: 0 0 .35rem;
  padding: 0 .6rem .45rem;
  border-bottom: 1px solid var(--ligne);
  font-size: var(--t-xs);
  line-height: 1.4;
  color: var(--encre-faible);
  text-transform: none;
  letter-spacing: 0;
}

.compte-action {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .55rem .6rem;
  background: none;
  border: 0;
  border-radius: 9px;
  color: var(--encre);
  font: inherit;
  font-size: var(--t-md);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.compte-action[hidden] { display: none; }
.compte-action:hover { background: rgba(127, 127, 127, .12); }
.compte-action i { width: 1rem; color: var(--encre-faible); }
.compte-offre i { color: var(--or); }

@media (prefers-reduced-motion: reduce) {
  .compte-rond { transition: none; }
}

/* Sur téléphone, le bandeau passe à la ligne : le rond se retrouvait seul
   sur une troisième ligne, tout à gauche. On le cale en haut à droite,
   dans l'espace libre à côté du logo. */
@media (max-width: 767.98px) {
  .bandeau-haut { position: relative; padding-right: 2.6rem; }
  .compte { position: absolute; top: .5rem; right: 0; }
}

/* --- Curseur : corrections du 28 août 2026 -------------------------------
   1. Doublon. Seize règles du fichier posent cursor: pointer (boutons,
      fermeture de modale, capsules, liens de la vitrine, bouton de compte).
      Elles sont plus spécifiques que la règle générale cursor: none, donc
      la flèche système réapparaissait par-dessus le curseur dessiné, d'où
      les deux pointeurs. On repasse derrière, une seule fois, avec la
      spécificité qu'il faut.
   2. Invisibilité dans la modale. Le curseur est peint en mix-blend-mode
      difference. La modale crée son propre contexte d'empilement (elle
      porte un backdrop-filter), et le mélange n'a plus rien à quoi se
      soustraire : le point devenait invisible sur la boîte claire.
      Modale ouverte, on repasse en peinture normale, avec un liseré qui
      garantit le contraste sur clair comme sur sombre.
   ------------------------------------------------------------------------ */

body.curseur-actif,
body.curseur-actif a,
body.curseur-actif button,
body.curseur-actif summary,
body.curseur-actif label,
body.curseur-actif [role="button"],
body.curseur-actif [data-cible],
body.curseur-actif .bouton-or,
body.curseur-actif .abo-fermer,
body.curseur-actif .compte-bouton,
body.curseur-actif .compte-action,
body.curseur-actif .vitrine-lien,
body.curseur-actif .modale-fermer,
body.curseur-actif .schema-pc .joueur-tireur { cursor: none; }

/* Les champs de saisie gardent le curseur système : on écrit dedans. */
body.curseur-actif input,
body.curseur-actif textarea,
body.curseur-actif select,
body.curseur-actif [contenteditable="true"] { cursor: auto; }

/* L'iframe de connexion Piano est un document à part : la page n'y impose
   rien, et c'est très bien. Le curseur dessiné passe au-dessus. */
html.abo-modale-ouverte .curseur-point,
html.abo-modale-ouverte .curseur-anneau,
body:has(.modale:not([hidden])) .curseur-point,
body:has(.modale:not([hidden])) .curseur-anneau {
  mix-blend-mode: normal;
  z-index: 9999;
}
html.abo-modale-ouverte .curseur-point,
body:has(.modale:not([hidden])) .curseur-point {
  background: var(--craie);
  box-shadow: 0 0 0 1.5px rgba(10, 13, 18, .75);
}
html.abo-modale-ouverte .curseur-anneau,
body:has(.modale:not([hidden])) .curseur-anneau {
  border-color: rgba(10, 13, 18, .55);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55),
              inset 0 0 0 1px rgba(255, 255, 255, .55);
}

/* --- Pied de page, mise en grille (28 août 2026) -------------------------
   Trois étages nettement séparés : le colophon (qui a fait le dossier),
   les mentions légales en deux colonnes alignées, le copyright. Avant,
   tout était collé et les liens partaient en drapeau irrégulier.
   ------------------------------------------------------------------------ */

.pied-colophon {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--e-2) var(--e-3);
  padding-bottom: var(--e-4);
}
.pied-oeil { margin: .15rem 0 0; }

.pied-colophon-corps { max-width: 52ch; }
.pied-credit {
  font-family: var(--texte);       /* le monospace faisait note de bas de page */
  font-size: var(--t-md);
  letter-spacing: 0;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
  margin: 0 0 .3rem;
}
.pied-credit a {
  color: var(--craie);
  text-decoration: none;
  border-bottom: 1px solid var(--gazon-vif);
  padding-bottom: 1px;
}
.pied-credit a:hover { border-bottom-width: 2px; }

.pied-arret {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  text-align: right;
  white-space: nowrap;
}

/* Deux colonnes de liens, alignées sur une grille plutôt qu'en drapeau. */
.pied-legal {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--e-3) var(--e-4);
  margin-top: 0;
  padding-top: var(--e-3);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.pied-legal-titre { margin: 0 0 var(--e-2); }

.pied-liens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem var(--e-3);
}
.pied-reseaux { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.pied-copyright {
  margin-top: var(--e-3);
  padding-top: var(--e-2);
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, .4);
}

@media (max-width: 991px) {
  .pied-colophon {
    grid-template-columns: 1fr;
    gap: var(--e-1);
  }
  .pied-arret { text-align: left; }
  .pied-legal { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
  .pied-liens,
  .pied-reseaux { grid-template-columns: 1fr; }
}

/* --- Modale abonnement, remaniée le 28 août 2026 -------------------------
   L'offre passe au-dessus du formulaire. Le bloc « connecté sans
   abonnement » a disparu : son attribut hidden était écrasé par une règle
   display: flex, il s'affichait donc à tout le monde. Leçon appliquée
   ici : toute règle display de cette modale respecte hidden.
   ------------------------------------------------------------------------ */
.abo-offre-bloc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  padding: var(--e-2);
  margin: 0 0 var(--e-2);
  border: 1px solid var(--or);
  border-radius: 14px;
  background: rgba(255, 201, 77, .08);
}
.abo-offre-bloc[hidden] { display: none; }
.abo-offre-bloc .bouton-or { width: 100%; text-align: center; }

/* Séparateur « Déjà abonné ? » : un filet de part et d'autre du texte. */
.abo-separateur {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: 0 0 var(--e-2);
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre-faible);
}
.abo-separateur[hidden] { display: none; }
.abo-separateur::before,
.abo-separateur::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ligne);
}

/* L'ancien pied n'a plus de contenu propre : on neutralise sa bordure. */
.abo-pied { border-top: 0; padding-top: 0; }

/* --- Vidéo du jour ------------------------------------------------------
   Un seul bloc, à droite du chapeau de la section vidéos, pour l'envoi
   quotidien depuis Berlin.

   Le liseré dégradé tourne lentement autour de la carte. Technique : une
   couche en dessous (::before) peinte d'un conic-gradient dont on anime
   l'angle via une propriété enregistrée, ce qui permet au navigateur de
   l'interpoler au lieu de repeindre. Un seul élément animé, composé sur
   le GPU, aucun coût mesurable.

   Volontairement discret : liseré d'un pixel et demi, rotation en douze
   secondes, dégradé qui reste dans les couleurs du dossier. Il attire
   l'oeil au deuxième regard, pas au premier.
   ------------------------------------------------------------------------ */

@property --vj-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.vj {
  position: relative;
  display: block;
  padding: 1.5px;                 /* l'épaisseur du liseré */
  border-radius: 18px;
  isolation: isolate;
}
.vj[hidden] { display: none; }

.vj::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(
    from var(--vj-angle),
    transparent 0deg,
    var(--gazon-vif) 40deg,
    var(--or) 90deg,
    transparent 150deg,
    transparent 360deg
  );
  animation: vj-tourne 12s linear infinite;
  z-index: -1;
}

/* Le contenu, posé par-dessus le liseré. */
.vj > * { position: relative; }
/* Fond de la carte. Surtout PAS --papier-haut : sur La Libre c'est le
   blanc du thème clair, et la carte devenait un bloc blanc au milieu
   d'une section sombre. On peint donc un fond sombre en dur, dérivé de
   la section qui accueille toujours ce bloc. */
.vj::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  border-radius: 16.5px;
  background: rgba(10, 13, 18, .72);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  z-index: -1;
}

@keyframes vj-tourne {
  to { --vj-angle: 360deg; }
}

/* Navigateurs sans @property : le dégradé ne tourne pas, il reste posé.
   Rien ne casse, le liseré est simplement fixe. */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .vj::before { background: linear-gradient(120deg, var(--gazon-vif), var(--or)); }
}

.vj-oeil {
  color: var(--craie);
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: var(--e-2) var(--e-2) .6rem;
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .75;
}
.vj-point {
  width: .45rem;
  height: .45rem;
  border-radius: 999px;
  background: var(--gazon-vif);
  box-shadow: 0 0 0 0 rgba(225, 0, 26, .55);
  animation: vj-pouls 2.6s ease-out infinite;
}
@keyframes vj-pouls {
  0%   { box-shadow: 0 0 0 0 rgba(225, 0, 26, .5); }
  70%  { box-shadow: 0 0 0 .5rem rgba(225, 0, 26, 0); }
  100% { box-shadow: 0 0 0 0 rgba(225, 0, 26, 0); }
}

.vj-vignette {
  display: block;
  margin: 0 var(--e-2);
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.vj-vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10, 13, 18, .55) 100%);
}
.vj-vignette .mn-lecture { position: absolute; inset: 0; margin: auto; z-index: 2; }

.vj-titre {
  color: var(--craie);
  margin: var(--e-2) var(--e-2) .25rem;
  font-size: var(--t-lg);
  line-height: 1.15;
}
.vj-meta {
  color: rgba(255, 255, 255, .55);
  margin: 0 var(--e-2) var(--e-2);
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .vj::before { animation: none; }
  .vj-point { animation: none; }
}

/* Bouton d'ajout à l'agenda, dans le compte à rebours. Discret : il ne doit
   pas concurrencer le décompte, qui reste l'information principale. */
.rebours-agenda {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  margin-top: var(--e-2);
  padding: .6rem .8rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  color: var(--craie);
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.rebours-agenda:hover {
  background: rgba(255, 255, 255, .12);
  border-color: var(--gazon-vif);
}
.rebours-agenda i { color: var(--or); }

/* Bloc « Où regarder », section Le rendez-vous. Trois colonnes de service,
   volontairement sobres : c'est de l'information pratique, pas une réclame. */
.encart-diffusion { margin-top: var(--e-3); }
.encart-diffusion h3 i { color: var(--gazon-vif); margin-right: .4rem; }
.diffusion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--e-2) var(--e-3);
  margin: var(--e-2) 0 0;
}
.diffusion dt {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre-faible);
  margin-bottom: .25rem;
}
.diffusion dd { margin: 0; font-size: var(--t-md); line-height: 1.45; }
.note-diffusion {
  margin: var(--e-2) 0 0;
  font-size: var(--t-xs);
  color: var(--encre-faible);
}

/* --- Les joueuses à suivre chez les adversaires ---------------------------
   Huit fiches, une par nation. Volontairement plus sobres que les fiches
   des Cats : ce sont les adversaires, ils ne doivent pas voler la vedette.
   -------------------------------------------------------------------------- */
.asuivre {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--e-2);
  background: var(--papier-haut);
  border: 1px solid var(--ligne);
  border-radius: 14px;
}
/* En attente d'un nom : la fiche s'efface sans disparaître. */
.asuivre-attente { opacity: .55; border-style: dashed; }

.asuivre-nation {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 var(--e-2);
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre-faible);
}
.asuivre-drapeau { display: inline-flex; width: 1.2rem; }
.asuivre-drapeau img { width: 100%; height: auto; border-radius: 2px; }

.asuivre-portrait {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(140deg, rgba(127, 127, 127, .18), rgba(127, 127, 127, .06));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--e-2);
}
.asuivre-photo { width: 100%; height: 100%; object-fit: cover; }
.asuivre-initiale {
  font-family: var(--display);
  font-size: 2.4rem;
  color: var(--encre-faible);
}

.asuivre-nom { margin: 0 0 .25rem; font-size: var(--t-lg); line-height: 1.1; }
.asuivre-reperes {
  margin: 0 0 var(--e-2);
  font-family: var(--data);
  font-size: var(--t-xs);
  color: var(--encre-faible);
}
.asuivre-texte { margin: 0 0 var(--e-2); font-size: var(--t-md); line-height: 1.45; }
.asuivre-palmares {
  margin: auto 0 0;
  padding-top: var(--e-2);
  border-top: 1px solid var(--ligne);
  font-size: var(--t-xs);
  color: var(--encre-doux);
}
.asuivre-palmares i { color: var(--or); }

/* Nom de la formule, seul sur sa première ligne au-dessus du tarif. */
.vitrine-formule {
  flex: 0 0 100%;
  text-align: center;
  font-family: var(--data);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: .15rem;
}

/* --- Bandeau des seize nations ------------------------------------------
   Frise décorative au-dessus du titre des adversaires. Un seul élément
   animé, une translation : composée par le GPU, sans coût de calcul.
   ------------------------------------------------------------------------ */
.nations-defile {
  overflow: hidden;
  margin-bottom: var(--e-4);
  /* Les bords s'estompent : la frise entre et sort du champ au lieu d'être
     coupée net. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.nations-piste {
  display: flex;
  gap: var(--e-3);
  width: max-content;
  animation: nations-glisse 44s linear infinite;
}
.nations-defile:hover .nations-piste,
.nations-defile:focus-within .nations-piste { animation-play-state: paused; }

@keyframes nations-glisse {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* la moitié : l'autre prend le relais */
}

.nations-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}

.nations-drapeau {
  width: 100px;
  height: auto;
  display: block;
  border: 1px solid var(--ligne);
}

.nations-code {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: var(--encre-faible);
}

@media (max-width: 767px) {
  .nations-drapeau { width: 68px; }
  .nations-piste { gap: var(--e-2); animation-duration: 34s; }
}

@media (prefers-reduced-motion: reduce) {
  .nations-piste { animation: none; }
  .nations-defile { overflow-x: auto; }
}

/* --- Joueuses à suivre ---------------------------------------------------
   Distinction discrète dans la grille des douze : un filet doré et un
   badge. Pas de section à part, la page est déjà longue.
   ------------------------------------------------------------------------ */
.joueur-vedette {
  border-color: var(--or) !important;
  box-shadow: 0 0 0 1px var(--or) inset;
}

.joueur-phare {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  align-self: flex-start;
  margin: 0 0 .4rem;
  padding: .15rem .5rem;
  border: 1px solid var(--or);
  border-radius: 999px;
  font-family: var(--data);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--or);
}
.joueur-phare i { font-size: .7em; }

/* Club de la joueuse : nom en gras, drapeau du pays devant. */
.joueur-club {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.joueur-club b { font-weight: 600; color: var(--encre); }
.section-sombre .joueur-club b { color: var(--craie); }
.joueur-club-drapeau {
  width: 16px;
  height: 12px;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid var(--ligne);
}

/* Intitulé stable au-dessus du titre du direct : le titre lui-même est
   réécrit par js/live.js et ne peut pas porter de mot-clé durable. */
.direct-oeil {
  margin: 0 0 .1rem;
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gazon-vif);
}