/* =========================================================================
   241 Basket — feuille de style
   Repères : bandeau sombre, titres condensés en capitales, accent orange,
   grilles de cartes et tableaux denses.
   ========================================================================= */

:root {
  --nuit:      #0a1020;
  --nuit-2:    #101a30;
  --nuit-3:    #16223c;
  --encre:     #111827;
  --gris:      #5b6678;
  --gris-clair:#e6e9ef;
  --fond:      #f4f6fa;
  --blanc:     #ffffff;
  --accent:    #ff5a1f;
  --accent-2:  #e04a12;
  --logo:      #e04a12;   /* teinte du sigle 241, choisie par le client */
  --bleu:      #1d6fe0;
  --or:        #fcd116;

  /* Drapeau du Gabon : vert, jaune, bleu */
  --gabon-vert:  #009e60;
  --gabon-jaune: #fcd116;
  --gabon-bleu:  #3a75c4;
  /* Stops doublés : syntaxe acceptée par tous les moteurs. */
  --tricolore-h: linear-gradient(90deg, #009e60 0%, #009e60 33.333%, #fcd116 33.333%,
                                 #fcd116 66.666%, #3a75c4 66.666%, #3a75c4 100%);
  --tricolore-v: linear-gradient(180deg, #009e60 0%, #009e60 33.333%, #fcd116 33.333%,
                                 #fcd116 66.666%, #3a75c4 66.666%, #3a75c4 100%);
  --vert:      #17924f;
  --rouge:     #c8321f;

  --titre: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --texte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --large: 1280px;
  --r: 4px;
  --ombre: 0 1px 2px rgba(16,26,48,.08), 0 8px 24px rgba(16,26,48,.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }

.tricolore { height: 4px; background: var(--tricolore-h); }

.conteneur { width: 100%; max-width: var(--large); margin: 0 auto; padding: 0 20px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--gris); }

.saut {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: 10px 16px; font-weight: 600;
}
.saut:focus { left: 0; }

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

/* ---------- Titres ---------- */
h1, h2, h3, h4 { font-family: var(--titre); margin: 0 0 .4em; line-height: 1.05; letter-spacing: .01em; }
h1 { font-size: 44px; font-size: clamp(30px, 5vw, 52px); text-transform: uppercase; font-weight: 700; }
h2 { font-size: 30px; font-size: clamp(24px, 3vw, 34px); text-transform: uppercase; font-weight: 700; }
h3 { font-size: 20px; font-weight: 600; }

.titre-section {
  display: flex; align-items: center; gap: 14px;
  position: relative; margin: 0 0 18px; padding-left: 19px;
  text-transform: uppercase; font-family: var(--titre); font-weight: 700;
  font-size: 27px; font-size: clamp(22px, 2.6vw, 30px); line-height: 1;
}
.titre-section::before {
  content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 5px;
  background: var(--tricolore-v);
}
.titre-section .lien-plus {
  margin-left: auto; font-family: var(--texte); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; color: var(--accent); text-transform: uppercase; white-space: nowrap;
}
.titre-section .lien-plus:hover { color: var(--accent-2); text-decoration: underline; }

/* ---------- Barre de service ---------- */
.barre-service { background: #05080f; color: #8d9ab2; font-size: 12px; }
.barre-service__in { display: flex; align-items: center; justify-content: space-between; height: 34px; gap: 16px; }
.barre-service__marque { text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.barre-service__liens { display: flex; gap: 18px; }
.barre-service__liens a:hover { color: #fff; }

/* ---------- En-tête ---------- */
.entete { background: var(--nuit); color: #fff; position: sticky; top: 0; z-index: 40; }
.entete__in { display: flex; align-items: center; gap: 24px; min-height: 70px; }

.logo { display: flex; align-items: center; }
.logo__mark {
  font-family: var(--titre); font-weight: 700; font-size: 26px; line-height: 1;
  background: var(--logo); color: #fff; padding: 7px 9px 5px; border-radius: 3px;
  letter-spacing: .02em; margin-right: 10px; /* marge plutôt que gap : compatibilité large */
  position: relative; overflow: hidden;
}
.logo__mark::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--tricolore-h);
}
.logo__txt { display: flex; flex-direction: column; line-height: 1; }
.logo__txt strong { font-family: var(--titre); font-size: 24px; letter-spacing: .09em; font-weight: 700; }
.logo__txt small { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #8d9ab2; margin-top: 3px; }

.nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.nav a {
  font-family: var(--titre); text-transform: uppercase; font-size: 16px; font-weight: 600;
  letter-spacing: .04em; padding: 24px 12px; color: #c9d2e2;
  border-bottom: 3px solid transparent;
}
.nav a:hover { color: #fff; background: var(--nuit-2); }
.nav a.on { color: #fff; border-bottom-color: var(--accent); }

.burger { display: none; margin-left: auto; background: none; border: 0; padding: 10px; cursor: pointer; }
.burger span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; transition: .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Bandeau de scores ---------- */
.scorebar { background: var(--nuit-2); border-top: 1px solid rgba(255,255,255,.06); }
.scorebar__cadre { position: relative; max-width: var(--large); margin: 0 auto; }
.scorebar__in {
  display: flex; gap: 1px; overflow-x: auto; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
}
/* Indices de défilement : fondu sur le bord qui cache des rencontres + flèche. */
.scorebar__cadre::before, .scorebar__cadre::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 56px; z-index: 1;
  pointer-events: none; opacity: 0; transition: opacity .2s;
}
.scorebar__cadre::before { left: 0; background: linear-gradient(to right, #101a30, rgba(16,26,48,0)); }
.scorebar__cadre::after { right: 0; background: linear-gradient(to left, #101a30, rgba(16,26,48,0)); }
.scorebar__cadre.a-gauche::before, .scorebar__cadre.a-droite::after { opacity: 1; }
.scorebar__fleche {
  position: absolute; top: 50%; z-index: 2; width: 34px; height: 34px; margin-top: -17px;
  display: flex; align-items: center; justify-content: center; padding: 0 0 3px;
  border: 0; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.45); transition: transform .15s, opacity .2s;
}
.scorebar__fleche:hover { transform: scale(1.08); }
.scorebar__fleche:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.scorebar__fleche--g { left: 8px; }
.scorebar__fleche--d { right: 8px; }
.scorebar__fleche[hidden] { display: none; }
.scorebar__cadre.relance .scorebar__fleche--d { animation: sc-appel 1.2s ease-in-out 3; }
@keyframes sc-appel { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) {
  .scorebar__in { scroll-behavior: auto; }
  .scorebar__cadre.relance .scorebar__fleche--d { animation: none; }
}
.sc {
  flex: 0 0 auto; min-width: 172px; padding: 10px 16px;
  background: var(--nuit-2); color: #dbe2ee; border-right: 1px solid rgba(255,255,255,.06);
}
.sc:hover { background: var(--nuit-3); }
.sc__meta { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #7f8da6; margin-bottom: 6px; }
.sc__l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; color: #9fabc2; }
.sc__l i { font-style: normal; font-weight: 600; letter-spacing: .04em; }
.sc__l b { font-family: var(--titre); font-size: 17px; }
.sc__l.gagne { color: #fff; }
.sc__l.gagne b { color: var(--accent); }
.sc--avenir .sc__l b { font-size: 13px; font-family: var(--texte); color: #7f8da6; }

/* ---------- Mise en page ---------- */
.section { padding: 40px 0; }
.section--gris { background: var(--gris-clair); }
.section--nuit { background: var(--nuit); color: #fff; }
.section--nuit .titre-section { color: #fff; }

.grille { display: grid; gap: 22px; }
.grille--2 { grid-template-columns: repeat(2, 1fr); }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }
.colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }

/* ---------- Une ---------- */
.une { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; }
.une__principale {
  position: relative; display: block; overflow: hidden; border-radius: var(--r);
  min-height: 420px; background: var(--nuit);
}
.une__principale .visuel { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
.une__voile {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(to top, rgba(6,10,20,.94) 12%, rgba(6,10,20,.55) 45%, rgba(6,10,20,.1) 100%);
}
.une__txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px; color: #fff; }
.une__txt h2 { font-size: 36px; font-size: clamp(26px, 3.4vw, 42px); margin-bottom: 10px; }
.une__txt p { color: #d5dced; margin: 0; max-width: 62ch; }
.une__secondaires { display: grid; gap: 22px; grid-template-rows: repeat(2, 1fr); }

.etiquette {
  display: inline-block; background: var(--accent); color: #fff;
  font-family: var(--titre); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; padding: 4px 9px 2px; margin-bottom: 12px;
}
.etiquette--sombre { background: var(--nuit); }
.etiquette--or { background: var(--or); color: var(--nuit); }

/* ---------- Cartes actualité ---------- */
.carte {
  display: flex; flex-direction: column; background: var(--blanc);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--ombre);
  transition: transform .18s ease, box-shadow .18s ease;
}
.carte:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16,26,48,.14); }
.carte__media { position: relative; aspect-ratio: 16 / 9; background: var(--nuit-2); }
.carte__media .visuel { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
.carte__corps { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.carte__cat {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}
.carte h3 { font-size: 21px; line-height: 1.15; margin-bottom: 8px; }
.carte p { font-size: 14px; color: var(--gris); margin: 0; }
.carte__date { margin-top: auto; padding-top: 14px; font-size: 12px; color: var(--gris); }

.carte--horiz { flex-direction: row; }
.carte--horiz .carte__media { flex: 0 0 40%; aspect-ratio: auto; }
.carte--compacte h3 { font-size: 17px; }

.liste-actus { list-style: none; margin: 0; padding: 0; }
.liste-actus li { border-bottom: 1px solid var(--gris-clair); }
.liste-actus li:last-child { border-bottom: 0; }
.liste-actus a { display: block; padding: 14px 0; }
.liste-actus a:hover h4 { color: var(--accent); }
.liste-actus h4 { font-family: var(--titre); font-size: 18px; font-weight: 600; margin: 0 0 4px; line-height: 1.15; }
.liste-actus span { font-size: 12px; color: var(--gris); }

/* ---------- Blocs ---------- */
.bloc { background: var(--blanc); border-radius: var(--r); box-shadow: var(--ombre); overflow: hidden; }
.bloc__tete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; background: var(--nuit); color: #fff;
}
.bloc__tete h3 { margin: 0; text-transform: uppercase; font-size: 18px; letter-spacing: .04em; }
.bloc__tete a { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--or); font-weight: 600; }
.bloc__corps { padding: 16px 18px; }
.bloc__corps--serre { padding: 0; }

/* ---------- Tableaux ---------- */
.tableau-enveloppe { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th, table.tbl td { padding: 10px 12px; text-align: right; white-space: nowrap; }
table.tbl th:first-child, table.tbl td:first-child,
table.tbl th.gauche, table.tbl td.gauche { text-align: left; }
table.tbl thead th {
  background: var(--nuit); color: #b9c4d6; font-family: var(--titre); font-weight: 600;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; position: sticky; top: 0;
}
table.tbl tbody tr { border-bottom: 1px solid var(--gris-clair); }
table.tbl tbody tr:hover { background: #f7f9fc; }
table.tbl tbody tr:last-child { border-bottom: 0; }
table.tbl .rang { font-family: var(--titre); font-size: 17px; font-weight: 700; color: var(--gris); width: 44px; }
table.tbl .club { display: flex; align-items: center; gap: 10px; font-weight: 600; }
table.tbl .club .blason { flex: 0 0 auto; }
table.tbl .accent { color: var(--accent); font-weight: 700; }
table.tbl tr.qualif { box-shadow: inset 3px 0 0 var(--vert); }
table.tbl tr.relegable { box-shadow: inset 3px 0 0 var(--rouge); }
.legende { display: flex; gap: 20px; flex-wrap: wrap; padding: 12px 18px; font-size: 12px; color: var(--gris); }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }

.pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%; margin-right: 3px;
  font-size: 10px; font-weight: 700; color: #fff;
}
.pastille.v { background: var(--vert); }
.pastille.d { background: var(--rouge); }

/* ---------- Matchs ---------- */
.match-ligne {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px;
  padding: 14px 18px; border-bottom: 1px solid var(--gris-clair);
}
.match-ligne:last-child { border-bottom: 0; }
.match-ligne:hover { background: #f7f9fc; }
.match-ligne__eq { display: flex; align-items: center; gap: 10px; min-width: 0; }
.match-ligne__eq:last-of-type { flex-direction: row-reverse; text-align: right; }
.match-ligne__eq span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-ligne__eq.perdant span { color: var(--gris); font-weight: 500; }
.match-ligne__score {
  font-family: var(--titre); font-size: 24px; font-weight: 700; letter-spacing: .02em;
  min-width: 96px; text-align: center;
}
.match-ligne__score small { display: block; font-family: var(--texte); font-size: 11px; font-weight: 500; color: var(--gris); letter-spacing: 0; }
.match-ligne__heure { font-family: var(--titre); font-size: 19px; color: var(--gris); min-width: 96px; text-align: center; }
.jour-tete {
  padding: 9px 18px; background: var(--gris-clair);
  font-family: var(--titre); text-transform: uppercase; letter-spacing: .08em;
  font-size: 14px; font-weight: 600; color: var(--encre);
}

/* ---------- Filtres / onglets ---------- */
.onglets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.onglets a {
  font-family: var(--titre); text-transform: uppercase; font-size: 15px; font-weight: 600;
  letter-spacing: .05em; padding: 9px 16px; background: var(--blanc);
  border: 1px solid var(--gris-clair); border-radius: 999px; color: var(--gris);
}
.onglets a:hover { border-color: var(--accent); color: var(--accent); }
.onglets a.on { background: var(--nuit); border-color: var(--nuit); color: #fff; }

.selecteur-journee { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.selecteur-journee select, .selecteur-journee button {
  font: inherit; padding: 8px 12px; border: 1px solid var(--gris-clair);
  border-radius: var(--r); background: var(--blanc);
}
.selecteur-journee button { background: var(--nuit); color: #fff; border-color: var(--nuit); cursor: pointer; font-weight: 600; }
.selecteur-journee button:hover { background: var(--accent); border-color: var(--accent); }

/* ---------- Bandeau de page ---------- */
.hero-page {
  background: var(--tricolore-h) bottom / 100% 4px no-repeat, var(--nuit);
  color: #fff; padding: 34px 0 34px; position: relative; overflow: hidden;
}
.hero-page::after {
  content: ''; position: absolute; right: -60px; top: -80px; width: 320px; height: 320px;
  border: 30px solid rgba(0,158,96,.18); border-radius: 50%;
}
.hero-page h1 { margin: 0; }
.hero-page p { color: #9fabc2; margin: 8px 0 0; max-width: 70ch; }
.fil { font-size: 12px; color: #7f8da6; margin-bottom: 10px; letter-spacing: .04em; }
.fil a:hover { color: #fff; }

/* ---------- Fiche équipe ---------- */
.equipe-tete { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.equipe-tete .blason { filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.equipe-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--gris-clair); }
.equipe-chiffres div { background: var(--blanc); padding: 16px 18px; }
.equipe-chiffres b { display: block; font-family: var(--titre); font-size: 30px; line-height: 1; }
.equipe-chiffres span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }

.grille-equipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.carte-equipe {
  background: var(--blanc); border-radius: var(--r); box-shadow: var(--ombre);
  padding: 20px; display: flex; align-items: center; gap: 14px;
  border-left: 5px solid var(--couleur, var(--accent));
  transition: transform .18s ease;
}
.carte-equipe:hover { transform: translateY(-3px); }
.carte-equipe h3 { margin: 0 0 2px; font-size: 19px; }
.carte-equipe div span { font-size: 12px; color: var(--gris); }

/* ---------- Article ---------- */
.article { background: var(--blanc); box-shadow: var(--ombre); border-radius: var(--r); overflow: hidden; }
.article__media { aspect-ratio: 21 / 9; position: relative; background: var(--nuit-2); }
.article__media .visuel { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
.article__corps { padding: 30px clamp(20px, 4vw, 48px) 40px; }
.article__corps > p { font-size: 17px; line-height: 1.75; max-width: 70ch; }
.article__chapo { font-size: 19px !important; font-weight: 500; color: var(--encre); border-left: 4px solid var(--accent); padding-left: 16px; }
.article__meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--gris); margin-bottom: 22px; }

/* ---------- Fédération ---------- */
.txt-bloc { background: var(--blanc); border-radius: var(--r); box-shadow: var(--ombre); padding: 26px 28px; }
.txt-bloc h2 { margin-top: 0; }
.txt-bloc h3 { margin-top: 26px; }
.txt-bloc ul { padding-left: 20px; }
.txt-bloc li { margin-bottom: 6px; }

/* ---------- Pied ---------- */
.pied { background: var(--nuit); color: #9fabc2; margin-top: 50px; }
.pied__in { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; padding-top: 44px; padding-bottom: 36px; }
.pied h3 {
  color: #fff; font-size: 15px; text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 14px; padding-bottom: 10px; display: inline-block; position: relative;
}
.pied h3::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--tricolore-h);
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 9px; font-size: 14px; }
.pied a:hover { color: #fff; }
.pied p { font-size: 14px; max-width: 46ch; }
.logo--pied { margin-bottom: 14px; }
.pied__bas { border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; }
.pied__bas-in { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; }
.pied__demo { color: #6b7a94; }

/* ---------- Adaptatif ---------- */
@media (max-width: 1080px) {
  .nav a { padding: 20px 9px; font-size: 15px; }
  .colonnes { grid-template-columns: 1fr; }
  .grille--4 { grid-template-columns: repeat(2, 1fr); }
  .pied__in { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .burger { display: block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; background: var(--nuit-2); padding: 8px 0; gap: 0;
    border-top: 1px solid rgba(255,255,255,.08); max-height: 70vh; overflow-y: auto;
  }
  .nav.ouvert { display: flex; }
  .nav a { padding: 14px 20px; border-bottom: 0; border-left: 3px solid transparent; }
  .nav a.on { border-left-color: var(--accent); background: var(--nuit-3); }
  .entete__in { position: relative; min-height: 60px; }
  .une { grid-template-columns: 1fr; }
  .une__principale { min-height: 300px; }
  .grille--2, .grille--3 { grid-template-columns: 1fr; }
  .equipe-chiffres { grid-template-columns: repeat(2, 1fr); }
  .barre-service__liens { display: none; }
}

@media (max-width: 560px) {
  .grille--4 { grid-template-columns: 1fr; }
  .pied__in { grid-template-columns: 1fr; }
  .carte--horiz { flex-direction: column; }
  .carte--horiz .carte__media { flex: none; aspect-ratio: 16 / 9; }
  .match-ligne { grid-template-columns: 1fr auto 1fr; gap: 8px; padding: 12px; }
  .match-ligne__score, .match-ligne__heure { min-width: 68px; font-size: 20px; }
  .match-ligne__eq .blason { display: none; }
  .article__corps > p { font-size: 16px; }
}

/* =========================================================================
   Stories : rangée de vignettes + lecteur plein écran
   ========================================================================= */

/* Fonds partagés par les vignettes et le lecteur. */
.fond--arena   { --a: #0f2557; --b: #1d6fe0; }
.fond--ballon  { --a: #7a2708; --b: #ff5a1f; }
.fond--parquet { --a: #4a2c12; --b: #d99a45; }
.fond--drapeau { --a: #009e60; --b: #fcd116; }
.fond--trophee { --a: #3d2f06; --b: #f2c200; }
.fond--sifflet { --a: #1c2434; --b: #66809f; }

.stories { background: var(--blanc); border-bottom: 1px solid var(--gris-clair); }
.stories__in { padding-top: 22px; padding-bottom: 22px; }
.stories__titre {
  font-family: var(--titre); text-transform: uppercase; font-size: 20px; font-weight: 700;
  letter-spacing: .06em; margin: 0 0 14px; padding-left: 17px; line-height: 1.1;
  position: relative;
}
.stories__titre::before {
  content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 5px;
  background: var(--tricolore-v);
}
.stories__rail {
  display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
.story { flex: 0 0 auto; width: 128px; scroll-snap-align: start; }
.story__vign {
  position: relative; display: block; width: 128px; height: 184px; border-radius: 10px;
  overflow: hidden; background: linear-gradient(155deg, var(--a, #123), var(--b, #456));
  /* Le liseré signale l'état lu / non lu : box-shadow plutôt qu'un élément positionné. */
  box-shadow: var(--ombre), inset 0 0 0 3px var(--accent);
}
.story__vign::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(to top, rgba(5,8,16,.72), rgba(5,8,16,0) 62%);
}
.story--vu .story__vign { box-shadow: var(--ombre), inset 0 0 0 3px rgba(91,102,120,.45); opacity: .85; }
.story--on .story__vign { box-shadow: var(--ombre), inset 0 0 0 3px var(--or); }
.story__cat {
  position: absolute; left: 10px; bottom: 10px; right: 10px; z-index: 3;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.story__nb, .story__live {
  position: absolute; top: 9px; z-index: 3; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #fff;
  background: rgba(5,8,16,.55); padding: 2px 7px; border-radius: 999px;
}
.story__nb { right: 9px; }
.story__live { left: 9px; background: var(--accent); }
.story__nom {
  display: block; margin-top: 9px; font-family: var(--titre); font-size: 16px;
  font-weight: 600; line-height: 1.15; color: var(--encre);
}
.story:hover .story__nom { color: var(--accent); }
.story:hover .story__vign { transform: translateY(-2px); }
.story__vign { transition: transform .18s ease, opacity .2s; }

/* ---------- Lecteur ---------- */
.lecteur {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(4,7,14,.95); padding: 16px; gap: 12px;
}
.lecteur[hidden] { display: none; }

.lecteur__boite {
  position: relative; width: min(430px, 100%); height: min(88vh, 760px);
  border-radius: 12px; overflow: hidden; background: var(--nuit); color: #fff;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.lecteur__boite:focus { outline: none; }

.lecteur__fond {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  /* Couleur vive en haut : le bas de l'écran est déjà voilé par le texte. */
  background: linear-gradient(168deg, var(--b, #456), var(--a, #123) 76%);
  transition: background .35s ease;
}
.lecteur__fond::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 150px;
  background: linear-gradient(to bottom, rgba(4,7,14,.78), rgba(4,7,14,0));
}
.court { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }

.lecteur__barres { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 5; display: flex; gap: 4px; }
.barre { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.barre i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.barre.fait i { transform: scaleX(1); }
.barre.encours i { animation: remplir linear forwards; }
.lecteur--pause .barre.encours i { animation-play-state: paused; }
@keyframes remplir { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.lecteur__tete {
  position: absolute; top: 22px; left: 14px; right: 12px; z-index: 6;
  display: flex; align-items: center; gap: 10px;
}
.lecteur__ident { display: flex; flex-direction: column; line-height: 1.25; margin-right: auto; }
.lecteur__ident b { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.lecteur__ident span { font-size: 11px; color: rgba(255,255,255,.72); }
.lecteur__pause, .lecteur__fermer {
  background: rgba(0,0,0,.35); border: 0; color: #fff; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%; font-size: 13px; line-height: 1;
}
.lecteur__pause:hover, .lecteur__fermer:hover { background: rgba(0,0,0,.6); }

.lecteur__zone {
  position: absolute; top: 0; bottom: 0; width: 34%; z-index: 3;
  background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.lecteur__zone--prec { left: 0; }
.lecteur__zone--suiv { right: 0; width: 46%; }

.lecteur__contenu {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 30px 22px 30px;
  /* Repli opaque puis dégradé : le texte reste lisible même sur un fond jaune. */
  background: rgba(4,7,14,.74);
  background: linear-gradient(to top, rgba(4,7,14,.95) 52%, rgba(4,7,14,.62) 78%, rgba(4,7,14,0));
  pointer-events: none;
}
.lecteur__contenu > * { pointer-events: auto; }
.lecteur__contenu.anime { animation: monter .32s ease both; }
@keyframes monter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.lecteur__surtitre {
  display: inline-block; background: var(--accent); color: #fff; font-family: var(--titre);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  padding: 4px 9px 2px; margin-bottom: 12px;
}
.lecteur__chiffre {
  display: block; font-family: var(--titre); font-weight: 700;
  font-size: 56px; font-size: clamp(44px, 13vw, 62px);
  line-height: .92; letter-spacing: -.01em;
}
.lecteur__legende {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--or); margin: 6px 0 10px;
}
.lecteur__titre { font-size: 28px; font-size: clamp(24px, 6vw, 30px); text-transform: uppercase; margin: 0 0 8px; }
.lecteur__texte { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.86); margin: 0; max-width: 42ch; }
.lecteur__lien {
  display: inline-block; margin-top: 16px; background: #fff; color: var(--nuit);
  font-family: var(--titre); font-size: 15px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: 9px 16px 7px; border-radius: 3px;
}
.lecteur__lien:hover { background: var(--accent); color: #fff; }
.lecteur__lien[hidden] { display: none; }

.lecteur__nav {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; font-size: 26px; line-height: 1;
}
.lecteur__nav:hover { background: rgba(255,255,255,.25); }
.lecteur__nav--prec { order: -1; }
.lecteur__nav[disabled] { opacity: .25; cursor: default; }

body.fige { overflow: hidden; }

@media (max-width: 720px) {
  .lecteur { padding: 0; }
  .lecteur__boite { width: 100%; height: 100%; border-radius: 0; }
  .lecteur__nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .barre.encours i { animation: none; transform: scaleX(1); }
  .lecteur__contenu.anime { animation: none; }
  .story__vign, .carte { transition: none; }
}

/* Page de repli : une story sans JavaScript */
.story-page { display: grid; gap: 18px; }
.story-ecran {
  position: relative; border-radius: 10px; overflow: hidden; color: #fff;
  background: linear-gradient(155deg, var(--a, #123), var(--b, #456)); min-height: 260px;
}
.story-ecran .court { opacity: .8; }
.story-ecran__txt {
  position: relative; z-index: 2; padding: 28px 26px;
  background: rgba(4,7,14,.7);
  background: linear-gradient(to top, rgba(4,7,14,.92) 45%, rgba(4,7,14,.45));
  min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: flex-start;
}

/* Spot officiel du championnat */
.spot { margin: 0 auto; max-width: 760px; }
.spot__cadre {
  position: relative; border-radius: var(--r); overflow: hidden;
  background: #000; box-shadow: var(--ombre);
}
.spot__video { display: block; width: 100%; height: auto; background: #000; }

.spot__son {
  position: absolute; z-index: 3; right: 12px; top: 12px;
  background: rgba(4,7,14,.72); color: #fff; border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px; padding: 8px 14px; font-size: 12px; font-weight: 600;
  letter-spacing: .04em; cursor: pointer;
}
.spot__son:hover { background: rgba(4,7,14,.92); }

/* Générique de fin — l'attribut hidden doit primer sur le display de la classe. */
.spot__fin[hidden] { display: none; }
.spot__fin {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; background: var(--nuit); color: #fff; text-align: center;
  animation: spot-fondu .5s ease both;
}
.spot__logo { display: flex; flex-direction: column; align-items: center; }
.spot__mark {
  font-family: var(--titre); font-weight: 700; font-size: 58px; line-height: 1;
  background: var(--logo); color: #fff; padding: 12px 16px 9px; border-radius: 5px;
  letter-spacing: .02em; position: relative; overflow: hidden;
  animation: spot-marque .7s cubic-bezier(.2,.8,.2,1) both;
}
.spot__mark::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: var(--tricolore-h);
  transform-origin: left center;
  animation: spot-bande .6s .55s ease both;
}
.spot__nom {
  font-family: var(--titre); font-size: 40px; font-weight: 700; letter-spacing: .34em;
  margin: 14px 0 0 .34em; /* compense l'interlettrage à droite */
  animation: spot-lettres .8s .35s ease both;
}
.spot__baseline {
  margin-top: 8px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: #9fabc2; animation: spot-fondu .6s .8s both;
}
.spot__revoir {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
  animation: spot-fondu .6s 1s both;
}
.spot__revoir:hover { background: var(--accent); border-color: var(--accent); }

@keyframes spot-fondu  { from { opacity: 0; } to { opacity: 1; } }
@keyframes spot-marque { from { opacity: 0; transform: scale(.75); } to { opacity: 1; transform: scale(1); } }
@keyframes spot-bande  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes spot-lettres {
  from { opacity: 0; letter-spacing: .9em; }
  to   { opacity: 1; letter-spacing: .34em; }
}

.spot__legende {
  margin-top: 12px; text-align: center; font-size: 13px; color: var(--gris);
}
.section--nuit .spot__legende { color: #9fabc2; }

@media (max-width: 540px) {
  .spot__mark { font-size: 42px; }
  .spot__nom  { font-size: 28px; letter-spacing: .24em; margin-left: .24em; }
}

@media (prefers-reduced-motion: reduce) {
  .spot__fin, .spot__mark, .spot__mark::after,
  .spot__nom, .spot__baseline, .spot__revoir { animation: none; }
}

/* Stories : écrans image (cartes de résultat, affiches, photos de match) */
.lecteur__image {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: contain; background: #04070e;
}
.lecteur__image[hidden] { display: none; }
.lecteur__contenu--image { padding: 40px 22px 22px; background: linear-gradient(to top, rgba(4,7,14,.8), rgba(4,7,14,0)); }
.lecteur__surtitre[hidden], .lecteur__chiffre[hidden], .lecteur__legende[hidden],
.lecteur__titre[hidden], .lecteur__texte[hidden], .lecteur__lien[hidden] { display: none; }
.story-ecran__image { position: relative; z-index: 1; display: block; width: 100%; max-height: 80vh; object-fit: contain; background: #04070e; }

/* Stories : écrans vidéo */
.lecteur__video {
  position: absolute; inset: 0; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%; object-fit: contain;
  background: #000; z-index: 1;
}
.lecteur__son {
  position: absolute; z-index: 4; right: 16px; bottom: 16px;
  background: rgba(4,7,14,.72); color: #fff; border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px; padding: 8px 14px; font: 600 12px/1 var(--texte, inherit);
  letter-spacing: .04em; cursor: pointer;
}
.lecteur__son:hover { background: rgba(4,7,14,.9); }
.story__vign--photo {
  background-size: cover; background-position: center;
}
.story-ecran__video {
  position: relative; z-index: 1; display: block;
  width: 100%; max-height: 70vh; background: #000;
}

/* Carte flottante du spot (ouverte comme une story) */
.spot-flot {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 190;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.spot-flot--on { display: flex; }
.spot-flot__voile {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(4,7,14,.9);
  animation: spot-fondu .25s ease both;
}
.spot-flot__boite {
  position: relative; z-index: 1; width: 100%; max-width: 760px;
  animation: spot-ouverture .3s cubic-bezier(.2,.8,.2,1) both;
}
.spot-flot__boite .spot { max-width: none; }
.spot-flot__boite .spot__cadre {
  border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.spot-flot__boite .spot__legende { color: #9fabc2; }
.spot-flot__fermer {
  position: absolute; top: -44px; right: 0; z-index: 2;
  background: transparent; color: #fff; border: 0; font-size: 22px; line-height: 1;
  padding: 6px 8px; cursor: pointer; opacity: .85;
}
.spot-flot__fermer:hover { opacity: 1; }

.lien-plus--bouton {
  background: transparent; border: 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; color: var(--accent); text-transform: uppercase;
}
.lien-plus--bouton:hover { color: var(--accent-2); text-decoration: underline; }

@keyframes spot-ouverture {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .spot-flot { padding: 16px; }
  .spot-flot__fermer { top: -38px; }
}

@media (prefers-reduced-motion: reduce) {
  .spot-flot__voile, .spot-flot__boite { animation: none; }
}

/* Le spot n'existe dans la page que si le script ne peut pas le présenter
   en carte flottante : avec JavaScript, la section reste en réserve. */
.js [data-spot-section] { display: none; }

/* ---------- Affiche du championnat ----------
   Sur très grand écran, elle occupe la marge droite restée vide ;
   partout ailleurs, elle est présentée en publication sous les stories. */
.affiche-cote { display: none; }

@media (min-width: 1500px) {
  /* Les affiches débordent volontiers sur le contenu : le bord intérieur
     est estompé pour que le texte qui passe par-dessus reste lisible. */
  /* Les deux découpes n'ont pas les mêmes proportions : on les cale sur la
     hauteur, largeur libre, pour que chacune s'appuie bien dans son coin. */
  .affiche-cote {
    display: block; position: fixed; bottom: 0; z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 18px 34px rgba(10,16,32,.28));

    /* Les deux découpes doivent faire la même hauteur à l'écran. Or elles
       n'ont pas les mêmes proportions : celle de droite est trapue (rapport
       0,86), celle de gauche élancée (0,52). En plafonnant seulement la
       largeur, la trapue était bridée bien avant l'élancée — et la gauche
       paraissait une fois et demie plus grande.
       On calcule donc la hauteur commune à partir de la largeur disponible
       et du rapport de la PLUS LARGE des deux : celle-ci l'occupe tout
       juste, l'autre reste plus étroite, et toutes deux font la même taille. */
    --large: min(520px, calc((100vw - 1280px) / 2 + 230px));
    --rapport: 0.86;
    --haut: min(74vh, 620px, calc(var(--large) / var(--rapport)));
  }
  .affiche-cote--droite { right: 0; }

  /* Les deux découpes sont désormais rognées au plus juste : plus de marges
     transparentes à compenser, chacune s'appuie simplement dans son coin. */
  .affiche-cote--gauche { left: 0; }
  /* Agrandissement plafonné : les originaux ne sont pas assez grands pour
     remplir une marge d'écran très large sans se ramollir. */
  .affiche-cote img {
    display: block; width: auto;
    object-fit: contain; object-position: bottom;
    /* Repli pour les moteurs sans variables CSS : l'ancien comportement. */
    height: min(74vh, 620px);
    max-width: min(520px, calc((100vw - 1280px) / 2 + 230px));
    height: var(--haut);
    max-width: none;
  }

  /* Estompe du bord intérieur — celui qui touche le contenu — pour que le
     texte qui passe par-dessus reste lisible. Les deux côtés sont symétriques. */
  .affiche-cote--droite img {
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,.6) 70px, #000 150px);
            mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,.6) 70px, #000 150px);
  }
  .affiche-cote--gauche img {
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0) 0, rgba(0,0,0,.6) 70px, #000 150px);
            mask-image: linear-gradient(to left, rgba(0,0,0,0) 0, rgba(0,0,0,.6) 70px, #000 150px);
  }

  /* La publication d'ouverture reste affichée : elle porte les j'aime, les
     commentaires et le partage. Sur grand écran, seule SA photo est masquée,
     puisque les deux joueuses occupent déjà les marges. La règle est nommée :
     sans cela, elle effaçait aussi la photo de tête des publications
     « en images », qui n'a rien à voir avec les affiches latérales. */
  #publication-championnat .publication__media { display: none; }
}

@media (min-width: 1900px) {
  .affiche-cote {
    --large: min(560px, calc((100vw - 1280px) / 2 + 250px));
    --haut: min(80vh, 680px, calc(var(--large) / var(--rapport)));
  }
  .affiche-cote img {
    height: min(80vh, 680px);
    max-width: min(560px, calc((100vw - 1280px) / 2 + 250px));
    height: var(--haut);
    max-width: none;
  }
}

.publication { background: var(--blanc); border-radius: var(--r); box-shadow: var(--ombre); overflow: hidden; }
.publication__tete {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid var(--gris-clair);
}
.publication__avatar {
  flex: none; font-family: var(--titre); font-weight: 700; font-size: 18px; line-height: 1;
  background: var(--logo); color: #fff; padding: 9px 9px 7px; border-radius: 4px;
}
.publication__tete .publication__logo { flex: none; margin-right: 0; }
.publication__ident { display: flex; flex-direction: column; line-height: 1.3; margin-right: auto; }
.publication__ident strong { font-size: 15px; }
.publication__ident span { font-size: 12px; color: var(--gris); }

.publication__media {
  position: relative; display: flex; justify-content: center; align-items: flex-end;
  gap: 4px;
  background: radial-gradient(120% 85% at 50% 100%, var(--nuit-3), var(--nuit));
  padding: 18px 16px 0; min-height: 260px;
}
/* Le deuxième joueur n'apparaît que si la carte est assez large. Son cadrage
   est plus serré que celui de l'affiche principale : on le garde plus petit
   pour qu'il ne l'écrase pas. */
.publication__media-2 { display: none; }
@media (min-width: 620px) {
  .publication__media .publication__media-2 { display: block; max-height: 280px; }
}
.publication__media::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--tricolore-h);
}
.publication__media img { display: block; width: auto; max-height: 340px; }

.publication__corps { padding: 16px 18px 4px; }
.publication__titre { font-family: var(--titre); font-size: 24px; margin: 0 0 8px; }
.publication__corps p { margin: 0 0 12px; }
.publication__faits {
  display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0 0 12px; padding: 0;
}
.publication__faits li {
  flex: 1 1 120px; background: var(--fond); border-radius: var(--r); padding: 10px 12px;
}
.publication__faits b { display: block; font-family: var(--titre); font-size: 26px; color: var(--accent); }
.publication__faits span { font-size: 12px; color: var(--gris); text-transform: uppercase; letter-spacing: .06em; }
.publication__mots { color: var(--bleu); font-size: 13px; }

.publication__pied {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px 16px;
  border-top: 1px solid var(--gris-clair);
}
.publication__pied a {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); padding: 8px 12px; border: 1px solid var(--gris-clair); border-radius: 999px;
}
.publication__pied a:hover { border-color: var(--accent); background: var(--accent); color: #fff; }

@media (max-width: 560px) {
  .publication__media { min-height: 220px; }
  .publication__media img { max-height: 260px; }
  .publication__titre { font-size: 21px; }
}

/* « plus… » : sans JavaScript, la suite est déjà là et le bouton inutile. */
.publication__plus { display: none; }
.js .publication__plus {
  display: inline; background: none; border: 0; padding: 0; margin-left: 2px;
  font: inherit; font-weight: 600; color: var(--gris); cursor: pointer;
}
.js .publication__plus:hover { color: var(--accent); text-decoration: underline; }
.publication__suite[hidden] { display: none; }
.publication__suite { animation: spot-fondu .25s ease both; }
@media (prefers-reduced-motion: reduce) { .publication__suite { animation: none; } }

/* Rencontre commencée, résultat pas encore publié */
.encours-pastille {
  display: block; margin-top: 3px; font-family: var(--texte); font-size: 10px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vert);
}
.sc__encours {
  display: block; margin-top: 4px; font-size: 9px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--or);
}
.sc__termine {
  display: block; margin-top: 4px; font-size: 9px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #7f8da6;
}

.pied__tel { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pied__tel:hover { color: var(--or); }

/* ---------- Publication : j'aime, commentaires, partage ---------- */
.publication__pied { align-items: center; }
.publication__action { margin: 0; }
.publication__bouton {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 1px solid var(--gris-clair); border-radius: 999px;
  padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--encre); cursor: pointer;
}
.publication__bouton:hover { border-color: var(--accent); color: var(--accent); }
.publication__bouton b { font-variant-numeric: tabular-nums; color: var(--gris); }
.publication__bouton[aria-pressed="true"],
.publication__bouton[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.publication__bouton[aria-pressed="true"] .publication__coeur { color: var(--accent); }
.publication__coeur { color: var(--gris); transition: transform .18s ease; }
.publication__bouton[aria-pressed="true"] .publication__coeur { transform: scale(1.18); }

.commentaires { border-top: 1px solid var(--gris-clair); padding: 14px 18px 18px; }
.commentaires__liste { list-style: none; margin: 0; padding: 0; }
.commentaire { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--fond); }
.commentaire__avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--nuit-3); color: #fff; font-family: var(--titre); font-size: 17px;
  display: flex; align-items: center; justify-content: center;
}
.commentaire__nom { margin: 0 0 2px; font-size: 14px; font-weight: 600; }
.commentaire__nom span { font-weight: 400; font-size: 12px; color: var(--gris); margin-left: 6px; }
.commentaire__texte { margin: 0; font-size: 14px; }

.commentaires__form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.commentaires__form input[type="text"],
.commentaires__form textarea {
  flex: 1 1 200px; min-width: 0; font: inherit; font-size: 14px;
  padding: 9px 12px; border: 1px solid var(--gris-clair); border-radius: var(--r);
  background: var(--blanc); color: var(--encre);
}
.commentaires__form textarea { flex-basis: 100%; resize: vertical; }
.commentaires__form input:focus, .commentaires__form textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.commentaires__form button {
  background: var(--accent); color: #fff; border: 0; border-radius: 999px;
  padding: 9px 20px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.commentaires__form button:hover { background: var(--accent-2); }
.commentaires__message { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--rouge); }
.commentaires__message[hidden] { display: none; }
.commentaires__message.ok { color: var(--vert); }

/* Champ piège : invisible pour les visiteurs, rempli par les robots. */
.sr-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Les commentaires restent pliés tant qu'on n'a pas cliqué l'icône « Commenter ». */
.commentaires[hidden], .commentaires__form[hidden] { display: none; }

/* Publication vidéo : le lecteur occupe toute la largeur de la carte. */
.publication__media--video { display: block; padding: 0; min-height: 0; background: #000; }
.publication__video { display: block; width: 100%; height: auto; background: #000; }
/* Sur grand écran, seule la photo d'ouverture est masquée ; la vidéo reste. */
@media (min-width: 1500px) {
  .publication__media--video { display: block; }
}

/* Sur mobile, les actions se réduisent à leurs icônes : le libellé reste
   annoncé aux lecteurs d'écran (technique de la classe .sr) et l'intitulé
   complet est repris par aria-label sur le bouton. */
@media (max-width: 560px) {
  .publication__libelle {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .publication__pied { gap: 10px; }
  .publication__bouton { padding: 9px 16px; gap: 6px; font-size: 15px; }
  .publication__icone { font-size: 17px; line-height: 1; }
}

/* Logo de la LINAB */
.logo-linab { display: inline-block; height: auto; vertical-align: middle; }
.logo-linab--barre { height: 18px; width: auto; margin-right: 7px; }
.barre-service__marque { display: inline-flex; align-items: center; }
.pied__linab { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 13px; }
.pied__linab img { width: 34px; }
.bloc-linab { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 14px; }
.bloc-linab img { width: 56px; flex: none; }

/* Le logo de la ligue tient la place du sigle 241 dans l'en-tête et le pied. */
.logo__img { display: block; height: 44px; width: auto; margin-right: 12px; }
.logo--pied .logo__img { height: 38px; }
@media (max-width: 640px) { .logo__img { height: 38px; margin-right: 9px; } }

/* ——— Galerie photo d'une rencontre (23/09/2026) ———
   Grille souple : trois colonnes au large, deux sur tablette, une sur
   téléphone. Écrite en flexbox d'abord puis reprise en grille, comme le reste
   du site, pour que les moteurs anciens ne l'empilent pas sur une colonne. */
.galerie { display: flex; flex-wrap: wrap; margin: -5px; }
.galerie__vue {
  display: block; margin: 5px; width: calc(33.333% - 10px);
  border-radius: 10px; overflow: hidden; background: #0d1117;
  line-height: 0; position: relative;
}
.galerie__vue img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; transition: transform .25s ease, opacity .25s ease;
}
.galerie__vue:hover img, .galerie__vue:focus img { transform: scale(1.04); opacity: .88; }
.galerie__vue:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.galerie__credit { margin: 12px 2px 0; font-size: 13px; color: var(--gris); }

@supports (display: grid) {
  .galerie {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0;
  }
  .galerie__vue { width: auto; margin: 0; }
}

@media (max-width: 860px) {
  .galerie__vue { width: calc(50% - 10px); }
  @supports (display: grid) { .galerie { grid-template-columns: repeat(2, 1fr); } }
}
@media (max-width: 520px) {
  .galerie__vue { width: calc(100% - 10px); }
  @supports (display: grid) { .galerie { grid-template-columns: 1fr; } }
}

/* Feuille de match numérisée : une page A4 photographiée, donc haute et
   étroite — on la borne en hauteur pour qu'elle ne pousse pas le reste de la
   page hors de l'écran, le clic ouvre l'original. */
.feuille { display: block; background: #0d1117; border-radius: 10px; overflow: hidden; line-height: 0; }
.feuille img {
  display: block; width: 100%; height: auto; max-height: 620px;
  object-fit: contain; background: #0d1117;
}

/* Affiche d'annonce et carte de résultat : des visuels portrait, à borner en
   hauteur pour qu'ils ne mangent pas toute la page sur téléphone. */
.bloc--visuel { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.visuel-match { display: block; line-height: 0; border-radius: 10px; overflow: hidden; }
.visuel-match img { display: block; width: 100%; max-width: 420px; height: auto; }

/* Cartes de résultat dans le fil de publications : une bande qui défile
   horizontalement au doigt, comme les stories, plutôt qu'une grille qui
   allongerait la publication sur trois écrans. */
.publication__cartes {
  display: flex; gap: 10px; overflow-x: auto; padding: 0 0 6px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.publication__carte {
  flex: 0 0 auto; width: 210px; scroll-snap-align: start;
  border-radius: 10px; overflow: hidden; line-height: 0; background: var(--nuit);
}
.publication__carte img { display: block; width: 100%; height: auto; }
.publication__carte:hover img { opacity: .9; }
.publication__carte:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 520px) { .publication__carte { width: 168px; } }

/* Bande de photos d'une publication : format 16/9, donc plus large que les
   cartes de résultat qui, elles, sont en portrait. */
.publication__cartes--photos .publication__carte { width: 260px; }
.publication__cartes--photos .publication__carte img { aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 520px) { .publication__cartes--photos .publication__carte { width: 210px; } }

/* ---------- Calendrier chronologique (26/09/2026) ---------- */
.jour-tete--prochain { background: #fff1ea; color: var(--accent-2); border-left: 4px solid var(--accent); }
.jour-tete__marque { margin-left: 8px; font-size: 11px; letter-spacing: .06em; background: var(--accent); color: #fff; padding: 2px 7px; border-radius: 3px; vertical-align: 1px; }
.cal-rencontre { border-bottom: 1px solid var(--gris-clair); }
.cal-rencontre:last-child { border-bottom: 0; }
.cal-rencontre .match-ligne { border-bottom: 0; padding-top: 6px; }
.cal-rencontre__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 10px 18px 0; font-size: 12px; color: var(--gris); }
.cal-rencontre__ligue { font-family: var(--titre); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 12px;
  padding: 1px 7px; border-radius: 3px; background: var(--nuit-3); color: #fff; }
.cal-rencontre__ligue--F { background: #8a1f6b; }
.cal-rencontre__ligue--M { background: var(--bleu); }
[id^="jour-"] { scroll-margin-top: 90px; }
@media (max-width: 640px) { .cal-rencontre__meta { padding: 8px 12px 0; } }