/* ==========================================================================
   Mondial de hockey 2026, version DH Les Sports+
   Grille : Bootstrap grid uniquement. Polices auto-hébergées.
   Aucun style inline dans le HTML.

   Registre visuel : presse sportive quotidienne. Fond sombre dominant,
   titraille condensée en capitales, rouge DH en accent unique, chiffres
   omniprésents en chasse fixe. La donnée passe avant le récit.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons
   -------------------------------------------------------------------------- */
:root {
  /* Palette DH, relevée sur dhnet.be */
  --dh-rouge:       #e1001a;
  --dh-rouge-clair: #ff2d45;
  --dh-marine:      #051f3a;
  --dh-encre:       #262729;
  --dh-gris:        #e5e7eb;
  --dh-gris-texte:  #686868;

  /* Déclinaison sombre du dossier */
  --nuit:        #0d0e10;
  --nuit-haute:  #17181c;
  --nuit-carte:  #1d1f24;
  --blanc:       #ffffff;
  --gris-clair:  #b6bac2;
  --gris-moyen:  #7c828d;
  --jaune:       #ffc94d;

  --ligne:       rgba(255, 255, 255, .12);
  --ligne-forte: rgba(255, 255, 255, .24);

  /* Typographie */
  --titre: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --texte: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --data:  "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Échelle, base 16px */
  --t-xs:   .6875rem;
  --t-sm:   .8125rem;
  --t-md:   .9375rem;
  --t-base: 1rem;
  --t-lg:   1.25rem;
  --t-xl:   1.75rem;
  --t-2xl:  2.5rem;
  --t-3xl:  3.75rem;
  --t-4xl:  5.5rem;

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

  --rayon: 2px;
  --transition: 200ms cubic-bezier(.2, .7, .3, 1);
}

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

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

body {
  margin: 0;
  background: var(--nuit);
  color: var(--blanc);
  font-family: var(--texte);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

/* --------------------------------------------------------------------------
   2. Accessibilité
   -------------------------------------------------------------------------- */
.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--dh-rouge);
  color: var(--blanc);
  padding: var(--e-2) var(--e-3);
  font-weight: 700;
  text-decoration: none;
}
.saut-contenu:focus { left: var(--e-2); top: var(--e-2); }

:focus-visible { outline: 3px solid var(--dh-rouge-clair); outline-offset: 2px; }

.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. Titraille
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0 0 var(--e-2);
}

h1 { font-size: clamp(2.75rem, 9vw, var(--t-4xl)); }
h2 { font-size: clamp(2rem, 5.5vw, var(--t-3xl)); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }

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

/* Œil de section : pavé rouge plein */
.oeil {
  display: inline-block;
  background: var(--dh-rouge);
  color: var(--blanc);
  font-family: var(--titre);
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .2rem .7rem .1rem;
  margin: 0 0 var(--e-2);
}

.intro {
  font-size: var(--t-lg);
  line-height: 1.45;
  color: var(--gris-clair);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   4. Bandeau
   -------------------------------------------------------------------------- */
.bandeau {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nuit-haute);
  border-bottom: 2px solid var(--dh-rouge);
}

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

.marque {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  font-family: var(--titre);
  font-size: var(--t-lg);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}
.marque b { background: var(--dh-rouge); color: var(--blanc); padding: .1rem .4rem 0; }
.marque span { color: var(--gris-moyen); font-weight: 600; }

.horloge {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--data);
  font-size: var(--t-xs);
  color: var(--gris-moyen);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.horloge > * { display: inline-flex; align-items: center; gap: .35rem; }
.horloge i { color: var(--dh-rouge-clair); }
.horloge-heure { color: var(--blanc); font-variant-numeric: tabular-nums; }

.lieu-bouton,
.position-bouton {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.lieu-bouton { border-bottom: 1px dotted var(--ligne-forte); }
.lieu-bouton:hover { color: var(--blanc); }
.lieu-bouton[data-mode="coords"] { color: var(--jaune); border-color: transparent; }

.position-bouton { border: 1px solid var(--ligne); padding: .2rem .4rem; line-height: 1; }
.position-bouton:hover { border-color: var(--dh-rouge); color: var(--blanc); }
.position-bouton[data-actif="true"] { color: var(--jaune); border-color: var(--jaune); }
.position-bouton[data-etat="attente"] { opacity: .4; }

.bandeau-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  border-top: 1px solid var(--ligne);
}
.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 {
  display: block;
  text-decoration: none;
  font-family: var(--titre);
  font-size: var(--t-base);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--gris-moyen);
  padding: .55rem 0;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.nav-liens a:hover { color: var(--blanc); }
.nav-liens a[aria-current="true"] { color: var(--blanc); border-bottom-color: var(--dh-rouge); }

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

/* --------------------------------------------------------------------------
   5. Bandeau de scores permanent
   Réflexe des sites de sport : la journée en cours reste sous les yeux,
   quelle que soit la section lue.
   -------------------------------------------------------------------------- */
.ticker { background: var(--nuit); border-bottom: 1px solid var(--ligne); padding: var(--e-1) 0; }

.ticker-piste {
  display: flex;
  gap: 1px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--ligne);
  border: 1px solid var(--ligne);
}
.ticker-piste::-webkit-scrollbar { display: none; }

.ticker-match {
  flex: 0 0 auto;
  min-width: 158px;
  background: var(--nuit-haute);
  padding: .5rem .7rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.ticker-match[data-belge="true"] { background: #24101a; box-shadow: inset 3px 0 0 var(--dh-rouge); }

.ticker-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris-moyen);
}

.ticker-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  font-family: var(--titre);
  font-size: var(--t-base);
  font-weight: 600;
  text-transform: uppercase;
}
.ticker-ligne .bel { color: var(--dh-rouge-clair); font-weight: 700; }
.ticker-ligne b {
  font-family: var(--data);
  font-size: var(--t-md);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.ticker-ligne b[data-vide="true"] { color: var(--gris-moyen); }

.ticker-vide {
  font-family: var(--data);
  font-size: var(--t-xs);
  color: var(--gris-moyen);
  padding: .5rem .7rem;
}

/* Étiquette Live */
.live {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: var(--dh-rouge);
  color: var(--blanc);
  font-family: var(--data);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .15rem .4rem;
  white-space: nowrap;
}
.live::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blanc);
  animation: battement 1.6s ease-in-out infinite;
}
.live[hidden] { display: none; }
@keyframes battement {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

/* --------------------------------------------------------------------------
   6. Ouverture
   -------------------------------------------------------------------------- */
.une {
  position: relative;
  padding: var(--e-5) 0 var(--e-4);
  overflow: hidden;
  border-bottom: 1px solid var(--ligne);
}

.une-fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("./img/hero-arena.jpg");
  background-size: cover;
  background-position: center 35%;
  opacity: .22;
  filter: grayscale(.7) contrast(1.1);
}
.une::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(13, 14, 16, .55) 0%, var(--nuit) 92%);
}

.une h1 { color: var(--blanc); text-wrap: balance; }
.une h1 em { font-style: normal; color: var(--dh-rouge-clair); display: block; }

.une-sous {
  font-family: var(--titre);
  font-size: clamp(1.3rem, 3vw, var(--t-xl));
  font-weight: 600;
  text-transform: uppercase;
  color: var(--jaune);
  margin: 0 0 var(--e-2);
}

.rebours {
  border: 1px solid var(--ligne);
  border-left: 4px solid var(--dh-rouge);
  background: rgba(13, 14, 16, .7);
  backdrop-filter: blur(3px);
  padding: var(--e-3);
  margin-top: var(--e-4);
}
.rebours-titre {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dh-rouge-clair);
  margin: 0 0 .4rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.rebours-affiche {
  font-family: var(--titre);
  font-size: clamp(1.6rem, 4vw, var(--t-2xl));
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 var(--e-2);
}
.rebours-chiffres { display: flex; gap: var(--e-3); list-style: none; margin: 0; padding: 0; }
.rebours-chiffres b {
  display: block;
  font-family: var(--data);
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rebours-chiffres span {
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-moyen);
}
.rebours-detail { margin: var(--e-2) 0 0; font-size: var(--t-sm); color: var(--gris-clair); }

/* --------------------------------------------------------------------------
   7. Bandeau de chiffres
   -------------------------------------------------------------------------- */
.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--ligne);
  border: 1px solid var(--ligne);
  list-style: none;
  margin: 0;
  padding: 0;
}
.chiffres li { background: var(--nuit-haute); padding: var(--e-2); }
.chiffres b {
  display: block;
  font-family: var(--titre);
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: .9;
  color: var(--dh-rouge-clair);
}
.chiffres span {
  display: block;
  font-family: var(--titre);
  font-size: var(--t-base);
  font-weight: 600;
  text-transform: uppercase;
  margin-top: .2rem;
}
.chiffres small {
  display: block;
  font-size: var(--t-xs);
  color: var(--gris-moyen);
  line-height: 1.35;
  margin-top: .2rem;
}

/* --------------------------------------------------------------------------
   8. Sections
   -------------------------------------------------------------------------- */
.section { padding: var(--e-5) 0; border-top: 1px solid var(--ligne); }
.section-claire {
  background: var(--dh-gris);
  color: var(--dh-encre);
  border-top: 0;
}
.section-claire h2, .section-claire h3 { color: var(--dh-marine); }
.section-claire .intro { color: var(--dh-gris-texte); }

.section-tete { margin-bottom: var(--e-3); }

/* --------------------------------------------------------------------------
   9. Filtres et pastilles
   -------------------------------------------------------------------------- */
.filtres { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 var(--e-2); padding: 0; border: 0; }
.filtres legend { padding: 0; margin: 0 0 .4rem; font-size: var(--t-sm); color: var(--gris-moyen); }

.filtre {
  appearance: none;
  background: transparent;
  border: 1px solid var(--ligne);
  color: var(--gris-clair);
  font-family: var(--titre);
  font-size: var(--t-md);
  font-weight: 600;
  text-transform: uppercase;
  padding: .35rem .8rem .25rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.filtre:hover { border-color: var(--ligne-forte); color: var(--blanc); }
.filtre[aria-pressed="true"] { background: var(--dh-rouge); border-color: var(--dh-rouge); color: var(--blanc); }
.section-claire .filtre { border-color: rgba(0, 0, 0, .18); color: var(--dh-gris-texte); }
.section-claire .filtre:hover { color: var(--dh-encre); }
.section-claire .filtre[aria-pressed="true"] { background: var(--dh-marine); border-color: var(--dh-marine); color: var(--blanc); }
.section-claire .filtres legend { color: var(--dh-gris-texte); }

.journees { margin-bottom: var(--e-2); }
.pastilles { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding-bottom: .3rem; }
.pastilles::-webkit-scrollbar { display: none; }
.pastille {
  flex: 0 0 auto;
  appearance: none;
  background: var(--nuit-haute);
  border: 1px solid var(--ligne);
  color: var(--gris-clair);
  cursor: pointer;
  padding: .4rem .6rem;
  min-width: 3.8rem;
  text-align: center;
}
.pastille-jour {
  display: block;
  font-family: var(--titre);
  font-size: var(--t-md);
  font-weight: 700;
  text-transform: uppercase;
}
.pastille-date { display: block; font-family: var(--data); font-size: 10px; color: var(--gris-moyen); }
.pastille[aria-pressed="true"] { background: var(--dh-rouge); border-color: var(--dh-rouge); color: var(--blanc); }
.pastille[aria-pressed="true"] .pastille-date { color: rgba(255, 255, 255, .75); }
.pastille[data-aujourdhui="true"] { border-color: var(--jaune); }

.section-claire .pastille { background: var(--blanc); border-color: rgba(0, 0, 0, .12); color: var(--dh-encre); }
.section-claire .pastille-date { color: var(--dh-gris-texte); }
.section-claire .pastille[aria-pressed="true"] { background: var(--dh-marine); border-color: var(--dh-marine); color: var(--blanc); }
.section-claire .pastille[aria-pressed="true"] .pastille-date { color: rgba(255, 255, 255, .75); }

.resume {
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris-moyen);
  margin: 0 0 var(--e-2);
}
.section-claire .resume { color: var(--dh-gris-texte); }

/* --------------------------------------------------------------------------
   10. Calendrier
   -------------------------------------------------------------------------- */
.jour { margin-bottom: var(--e-3); }
.jour-titre {
  font-family: var(--titre);
  font-size: var(--t-lg);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--dh-marine);
  margin: 0 0 .3rem;
  padding-bottom: .3rem;
  border-bottom: 2px solid var(--dh-marine);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
}
.jour-titre small {
  font-family: var(--data);
  font-size: var(--t-xs);
  font-weight: 400;
  text-transform: none;
  color: var(--dh-gris-texte);
}

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

.match {
  display: grid;
  grid-template-columns: 3.6rem 1fr auto;
  gap: var(--e-2);
  align-items: center;
  padding: .55rem .5rem;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  background: var(--blanc);
  transition: background var(--transition);
}
.match:hover { background: #f6f7f8; }
.match-belge { box-shadow: inset 4px 0 0 var(--dh-rouge); }

.match-heure {
  font-family: var(--data);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--dh-encre);
}
.match-affiche {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  font-family: var(--titre);
  font-size: var(--t-lg);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.1;
}
.match-affiche .bel { color: var(--dh-rouge); font-weight: 700; }
.match-vs {
  color: var(--dh-gris-texte);
  font-family: var(--texte);
  font-size: var(--t-xs);
  text-transform: lowercase;
  font-weight: 400;
}
.attente { color: var(--dh-gris-texte); font-weight: 600; font-style: italic; }

.match-meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  justify-self: end;
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dh-gris-texte);
  text-align: right;
}
.match-score {
  font-family: var(--data);
  font-size: var(--t-lg);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--dh-encre);
  text-transform: none;
  letter-spacing: 0;
}
.match-score[data-vide="true"] { color: #b9bec4; }

.etiquette-match {
  font-family: var(--titre);
  font-size: var(--t-sm);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--blanc);
  background: var(--dh-marine);
  padding: .05rem .4rem 0;
}

.vide { padding: var(--e-3); color: var(--dh-gris-texte); background: var(--blanc); }

/* --------------------------------------------------------------------------
   11. Classement
   -------------------------------------------------------------------------- */
.poule { margin-bottom: var(--e-3); }
.poule-titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
  font-family: var(--titre);
  font-size: var(--t-lg);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 .3rem;
  padding-bottom: .3rem;
  border-bottom: 2px solid var(--dh-rouge);
}
.poule-site {
  font-family: var(--data);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--gris-moyen);
  text-transform: uppercase;
}

.tableau { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tableau th, .tableau td { padding: .45rem .25rem; border-bottom: 1px solid var(--ligne); text-align: left; }
.tableau thead th {
  font-family: var(--data);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--gris-moyen);
  text-transform: uppercase;
}
.tableau tbody th {
  font-family: var(--titre);
  font-size: var(--t-base);
  font-weight: 600;
  text-transform: uppercase;
}
.tableau .num { text-align: right; font-family: var(--data); font-variant-numeric: tabular-nums; width: 2rem; }
.tableau .points { color: var(--blanc); font-weight: 500; }
.tableau tbody tr[data-qualifie="true"] { box-shadow: inset 3px 0 0 var(--jaune); }
.tableau tbody tr[data-qualifie="true"] th { padding-left: .5rem; }
.tableau tbody tr.ligne-bel th { color: var(--dh-rouge-clair); }

/* --------------------------------------------------------------------------
   12. Tableau des joueurs, triable
   La différence de traitement avec l'autre dossier : ici la donnée prime,
   on compare quarante joueurs d'un coup d'œil plutôt que de les feuilleter.
   -------------------------------------------------------------------------- */
.effectif { overflow-x: auto; }

.tableau-joueurs { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 640px; }
.tableau-joueurs caption {
  text-align: left;
  font-family: var(--data);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris-moyen);
  padding-bottom: var(--e-1);
}
.tableau-joueurs th, .tableau-joueurs td {
  padding: .5rem .4rem;
  border-bottom: 1px solid var(--ligne);
  text-align: left;
  vertical-align: middle;
}
.tableau-joueurs thead th {
  position: sticky;
  top: 0;
  background: var(--nuit);
  z-index: 2;
  border-bottom: 2px solid var(--dh-rouge);
}

.tri {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris-moyen);
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.tri:hover { color: var(--blanc); }
.tri[aria-sort="descending"], .tri[aria-sort="ascending"] { color: var(--jaune); }

.cel-num {
  font-family: var(--data);
  font-size: var(--t-xs);
  color: var(--blanc);
  background: var(--dh-rouge);
  padding: .1rem .35rem;
  display: inline-block;
  min-width: 1.7rem;
  text-align: center;
}
.cel-photo { width: 42px; }
.cel-photo img {
  width: 38px;
  height: 38px;
  object-fit: cover;
  object-position: center 20%;
  background: var(--nuit-carte);
  border: 1px solid var(--ligne);
}
.cel-photo[data-etat="absent"] img { display: none; }
.cel-photo .initiale {
  width: 38px; height: 38px;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--titre);
  font-size: var(--t-lg);
  color: var(--gris-moyen);
  background: var(--nuit-carte);
  border: 1px solid var(--ligne);
}
.cel-photo[data-etat="absent"] .initiale { display: flex; }

.cel-nom {
  font-family: var(--titre);
  font-size: var(--t-lg);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.05;
}
.cel-role {
  display: block;
  font-family: var(--data);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--jaune);
}
.cel-club { color: var(--gris-clair); font-size: var(--t-xs); }
.cel-chiffre { font-family: var(--data); font-variant-numeric: tabular-nums; text-align: right; color: var(--blanc); }
.cel-poste { font-family: var(--data); font-size: var(--t-xs); color: var(--gris-moyen); }

.avis-ligne td {
  padding-top: 0;
  border-bottom: 1px solid var(--ligne);
  color: var(--gris-clair);
  font-size: var(--t-sm);
  line-height: 1.5;
  font-style: italic;
}
.avis-ligne[hidden] { display: none; }

.bouton-avis {
  appearance: none;
  background: none;
  border: 1px solid var(--ligne);
  color: var(--gris-moyen);
  cursor: pointer;
  font-family: var(--data);
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .25rem .45rem;
  white-space: nowrap;
}
.bouton-avis:hover { border-color: var(--jaune); color: var(--jaune); }
.bouton-avis[aria-expanded="true"] { border-color: var(--jaune); color: var(--jaune); }

/* --------------------------------------------------------------------------
   13. Objectif et joueurs à suivre
   -------------------------------------------------------------------------- */
.pilier { border-top: 3px solid var(--dh-rouge); padding: var(--e-2) 0 var(--e-3); height: 100%; }
.pilier h3 { font-size: var(--t-xl); margin-bottom: .3rem; }
.pilier p { font-size: var(--t-sm); color: var(--gris-clair); margin: 0; }

.objectif {
  background: var(--nuit-carte);
  border-left: 4px solid var(--jaune);
  padding: var(--e-3);
  height: 100%;
}
.objectif h3 { font-size: var(--t-lg); color: var(--jaune); }
.objectif p { color: var(--gris-clair); font-size: var(--t-md); }
.objectif p:last-child { margin-bottom: 0; }
.objectif .concurrence {
  border-top: 1px solid var(--ligne);
  padding-top: var(--e-2);
  margin-top: var(--e-2);
  font-size: var(--t-sm);
  color: var(--gris-moyen);
}

.fiche {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  background: var(--ligne);
  border: 1px solid var(--ligne);
  margin: 0 0 var(--e-3);
}
.fiche > div { background: var(--nuit-haute); padding: var(--e-2); }
.fiche dt {
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris-moyen);
  margin-bottom: .2rem;
}
.fiche dd {
  margin: 0;
  font-family: var(--titre);
  font-size: var(--t-lg);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
}
.fiche dd small {
  display: block;
  font-family: var(--texte);
  font-size: var(--t-xs);
  font-weight: 400;
  text-transform: none;
  color: var(--gris-moyen);
  margin-top: .1rem;
}

/* --------------------------------------------------------------------------
   14. Frise du palmarès
   -------------------------------------------------------------------------- */
.frise { list-style: none; margin: 0; padding: 0; }
.frise li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--e-2);
  padding: var(--e-2) 0;
  border-top: 1px solid var(--ligne);
  align-items: start;
}
.frise-annee {
  font-family: var(--titre);
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1;
  color: var(--gris-moyen);
}
.frise li[data-or="true"] .frise-annee { color: var(--jaune); }
.frise li[data-encours="true"] .frise-annee { color: var(--dh-rouge-clair); }
.frise h3 { font-size: var(--t-lg); margin: 0 0 .15rem; }
.frise-lieu {
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris-moyen);
}
.frise p { font-size: var(--t-sm); color: var(--gris-clair); margin: .3rem 0 0; }

/* --------------------------------------------------------------------------
   15. Questions d'avant-tournoi
   -------------------------------------------------------------------------- */
.question { border-top: 1px solid rgba(0, 0, 0, .12); padding: var(--e-2) 0; }
.question h3 { font-size: var(--t-lg); margin-bottom: .3rem; color: var(--dh-marine); }
.question p { font-size: var(--t-md); margin: 0; color: var(--dh-gris-texte); max-width: 68ch; }
.question-cle { border-left: 4px solid var(--dh-rouge); padding-left: var(--e-2); }

/* --------------------------------------------------------------------------
   16. Abonnement, articles, sources
   -------------------------------------------------------------------------- */
.abonne {
  background: var(--dh-rouge);
  color: var(--blanc);
  padding: var(--e-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  margin-bottom: var(--e-4);
}
.abonne p { margin: 0; max-width: 56ch; }
.abonne strong { font-family: var(--titre); font-size: var(--t-lg); text-transform: uppercase; display: block; }

.bouton {
  font-family: var(--titre);
  font-size: var(--t-lg);
  font-weight: 700;
  text-transform: uppercase;
  background: var(--blanc);
  color: var(--dh-rouge);
  text-decoration: none;
  padding: .5rem 1.4rem .35rem;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.bouton:hover { background: var(--jaune); color: var(--dh-encre); }

.titre-bloc {
  font-family: var(--titre);
  font-size: var(--t-xl);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 var(--e-2);
  padding-bottom: .3rem;
  border-bottom: 2px solid var(--dh-rouge);
}

.article {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  height: 100%;
  padding: var(--e-2) 0 var(--e-3);
  text-decoration: none;
  color: inherit;
}
.article:hover h3 { color: var(--dh-rouge-clair); }
.article-surtitre {
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--jaune);
  margin: 0;
}
.article h3 { font-size: var(--t-xl); margin: 0; transition: color var(--transition); text-wrap: balance; }
.article p { font-size: var(--t-sm); color: var(--gris-clair); margin: 0; }
.article time { font-family: var(--data); font-size: 10px; color: var(--gris-moyen); margin-top: auto; padding-top: .4rem; }

.lien-rubrique a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--titre);
  font-size: var(--t-lg);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--blanc);
  text-decoration: none;
  border: 2px solid var(--dh-rouge);
  padding: .5rem 1.2rem .35rem;
  transition: background var(--transition);
}
.lien-rubrique a:hover { background: var(--dh-rouge); }

.sources { list-style: none; margin: 0; padding: 0; }
.source { border-top: 1px solid rgba(0, 0, 0, .12); }
.source a {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  align-items: baseline;
  justify-content: space-between;
  padding: .6rem 0;
  text-decoration: none;
}
.source a:hover .source-titre { color: var(--dh-rouge); text-decoration: underline; text-underline-offset: 3px; }
.source-titre { font-size: var(--t-sm); max-width: 62ch; color: var(--dh-encre); }
.source-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dh-gris-texte);
  white-space: nowrap;
}
.etiquette { border: 1px solid currentColor; padding: .1rem .4rem; }
.etiquette-maison { color: var(--dh-rouge); }
.etiquette-officiel { color: var(--dh-marine); }
.etiquette-presse { color: var(--dh-gris-texte); }

.methode { list-style: none; margin: 0; padding: 0; }
.methode li {
  padding: .5rem 0;
  border-top: 1px dotted rgba(0, 0, 0, .15);
  font-size: var(--t-sm);
  color: var(--dh-gris-texte);
}

/* --------------------------------------------------------------------------
   17. Pied de page
   -------------------------------------------------------------------------- */
.pied {
  background: var(--nuit-haute);
  border-top: 2px solid var(--dh-rouge);
  padding: var(--e-3) 0 var(--e-5);
  font-size: var(--t-sm);
  color: var(--gris-moyen);
}
.pied p { margin: 0 0 .3rem; }
.pied-credit { font-family: var(--data); font-size: var(--t-xs); color: var(--gris-clair); }
.pied a { color: var(--gris-clair); }

/* --------------------------------------------------------------------------
   18. Barre d'onglets, téléphone
   -------------------------------------------------------------------------- */
.tabbar { display: none; }

/* --------------------------------------------------------------------------
   19. Message flottant
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--e-3);
  transform: translate(-50%, 16px);
  z-index: 300;
  background: var(--nuit-haute);
  color: var(--blanc);
  border-left: 4px solid var(--dh-rouge);
  padding: var(--e-2) var(--e-3);
  font-size: var(--t-sm);
  max-width: min(90vw, 440px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity 250ms ease, transform 250ms ease;
}
.toast[hidden] { display: none; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   20. Images
   -------------------------------------------------------------------------- */
figure { margin: 0; }
figure img { width: 100%; background: var(--nuit-carte); }
.figure-large img { aspect-ratio: 16 / 9; object-fit: cover; }
.figure-equipe img { aspect-ratio: 16 / 7; object-fit: cover; }
figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  justify-content: space-between;
  padding-top: .4rem;
  font-size: var(--t-xs);
  color: var(--gris-moyen);
}
.credit { font-family: var(--data); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
img[data-absent="true"] { display: none; }
figure[data-absent="true"] figcaption { display: none; }

/* --------------------------------------------------------------------------
   21. Téléphone
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  :root { --e-5: 2.25rem; --e-6: 3rem; }

  .bandeau-nav { display: none; }
  .bandeau-haut { padding: .35rem 0; }
  .marque { font-size: var(--t-base); }
  .horloge { font-size: 10px; gap: .5rem; }
  .horloge-date { display: none; }
  .bandeau[data-compact="true"] .horloge { display: none; }

  .une { padding: var(--e-4) 0 var(--e-3); }
  .rebours { margin-top: var(--e-3); padding: var(--e-2); }

  .match { grid-template-columns: 3.2rem 1fr; row-gap: .25rem; }
  .match-meta { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .match-affiche { font-size: var(--t-base); }

  .tableau-joueurs { min-width: 0; }
  .cel-photo, .cel-club, .cel-age { display: none; }

  .frise li { grid-template-columns: 3.5rem 1fr; }

  .tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 120;
    background: var(--nuit-haute);
    border-top: 2px solid var(--dh-rouge);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    padding: .5rem .2rem .45rem;
    text-decoration: none;
    color: var(--gris-moyen);
    border-top: 3px solid transparent;
    margin-top: -2px;
  }
  .tabbar a i { font-size: 1rem; }
  .tabbar a span { font-family: var(--titre); font-size: 10px; font-weight: 600; text-transform: uppercase; }
  .tabbar a[aria-current="true"] { color: var(--blanc); border-top-color: var(--jaune); }

  body { padding-bottom: 4.2rem; }
  .toast { bottom: 5rem; }
}

@media print {
  .bandeau, .ticker, .tabbar, .abonne, .filtres, .journees { display: none; }
  body { background: #fff; color: #000; }
}