/* ==========================================================================
   Mondial de hockey 2026 : 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 terrain : encre, gazon, craie, lion, or. */
  --encre:        #10161a;
  --encre-doux:   #46555c;
  --encre-faible: #7d8b90;
  --gazon:        #0b4f55;
  --gazon-fonce:  #062f34;
  --gazon-vif:    #12a4a0;
  --lion:         #c81c33;
  --lion-clair:   #ec4258;
  --or:           #e0a828;
  --craie:        #ffffff;
  --papier:       #e9edea;
  --papier-haut:  #f4f6f3;
  --ligne:        rgba(16, 22, 26, .14);
  --ligne-sombre: rgba(255, 255, 255, .18);

  /* Typographie */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --texte:   "Inter Tight", -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: 2px;
  --rayon-carte: 4px;
  --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;
  background-image: url("./img/hero-arena.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;
  background:
    linear-gradient(
      100deg,
      var(--gazon-fonce) 0%,
      rgba(6, 47, 52, .92) 42%,
      rgba(6, 47, 52, .62) 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(6, 47, 52, .72);
  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. Bloc direct, sous le hero
   -------------------------------------------------------------------------- */
.direct {
  background: var(--encre);
  color: var(--craie);
  padding: var(--e-4) 0;
}

.direct-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
  padding-bottom: var(--e-2);
  margin-bottom: var(--e-2);
  border-bottom: 1px solid var(--ligne-sombre);
}
.direct-titre-bloc {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
}

.direct-etat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .2rem;
}
.direct-maj {
  font-family: var(--data);
  font-size: var(--t-xs);
  color: var(--gazon-vif);
}
.direct-maj[hidden] { display: none; }

/* Quand un match tourne, le bloc direct se signale en haut de page. */
body[data-live="true"] .direct {
  border-top: 3px solid var(--lion);
  border-bottom: 1px solid var(--ligne-sombre);
}

.direct-titre {
  font-family: var(--data);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gazon-vif);
  margin: 0;
}
.direct-etat {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .55);
  margin: 0;
}

.direct-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--ligne-sombre);
  border: 1px solid var(--ligne-sombre);
}

.direct-carte {
  background: var(--encre);
  padding: var(--e-2);
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.direct-carte[data-belge="true"] { background: rgba(200, 28, 51, .12); }

.direct-carte-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.direct-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
  font-size: var(--t-md);
}
.direct-ligne span { font-weight: 500; }
.direct-ligne .nation-bel { color: var(--lion-clair); font-weight: 600; }
.direct-ligne b {
  font-family: var(--data);
  font-size: var(--t-lg);
  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, .6);
  font-size: var(--t-md);
  margin: 0;
}

/* --------------------------------------------------------------------------
   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);
}

.jour {
  border-top: 1px solid var(--ligne);
  padding-top: var(--e-2);
  margin-bottom: var(--e-4);
}
.jour-titre {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre-faible);
  margin: 0 0 var(--e-2);
}
.jour-titre strong { color: var(--encre); font-weight: 500; }

.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: var(--e-2) var(--e-2) var(--e-2) 0;
  border-bottom: 1px solid var(--ligne);
  background: transparent;
  transition: background var(--transition);
}
.match:hover { background: var(--papier-haut); }
.match-belge {
  background: var(--papier-haut);
  border-left: 3px solid var(--lion);
  padding-left: var(--e-2);
}
.match-belge:hover { background: #fff; }

.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: .1em;
  text-transform: uppercase;
  color: var(--or);
  border: 1px solid var(--or);
  padding: .1rem .45rem;
  white-space: nowrap;
}

.calendrier-vide {
  padding: var(--e-4) 0;
  color: var(--encre-doux);
  border-top: 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); }
.joueur-role {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lion);
  margin: 0;
}
.section-sombre .joueur-role { color: var(--or); }
.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); }

@keyframes sleep {
  0%   { transform: translate(0, 0);        opacity: 1; }
  38%  { transform: translate(100px, 90px); opacity: 1; }
  50%  { transform: translate(126px, 112px); opacity: 1; }
  92%  { transform: translate(98px, 4px);   opacity: 1; }
  100% { transform: translate(98px, 4px);   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; }
  .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;
}

.pastille[aria-pressed="true"] {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--craie);
}
.pastille[aria-pressed="true"] .pastille-date { color: rgba(255, 255, 255, .6); }

/* 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: var(--craie); }

.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 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    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 a {
    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;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .45rem 0;
  }
  .marque { font-size: var(--t-sm); }
  .marque span { display: block; }

  .horloge { gap: .5rem; font-size: 10px; }
  /* La date complete ne sert a rien sur telephone, l'heure et le lieu suffisent */
  .horloge-date { display: none; }
  .horloge-meteo { max-width: 52vw; }
  .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: .7rem .5rem .7rem 0; }
  .match-affiche { font-size: var(--t-md); }
  .match-meta { font-size: 10px; gap: .5rem; }
  .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;
  }
}