/* ═══ SPORT › COUPES D'EUROPE, LIGUE DES NATIONS, EURO 2028 (13.10.2026) — js/204 ═══════════════════
   « ligue des champions. il faut classer par groupes, et ensuite classement tableau tirages, ajoute
   euro 2028 et ligue des nations ». Les briques viennent de css/99-sport.css (spt-carte, spt-table,
   zones spt-zone-*, légende) ; tout passe par les jetons du thème (clair et sombre). Un tableau large
   défile dans son cadre, jamais la page. */

.sco-carte-large { margin-bottom: 14px; }
.sco-sous-grille { margin-top: 0; }

/* Identité : compte à rebours de l'Euro, repères (finale, ouverture) */
.sco-reperes { margin: 6px 0 0 !important; font-size: var(--t-s, 12.5px) !important; color: var(--text) !important; line-height: 1.5; }
.sco-compte { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 108px; padding: 10px 14px;
  border-radius: var(--r-m, 14px); background: var(--accent-dim); border: 1px solid var(--accent-border); color: var(--text); text-align: center; }
.sco-compte b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.sco-compte small { font-size: var(--t-xs, 11px); color: var(--text-muted); }

/* Pastille « EURO 2028 » (ESPN n'a que le logo de l'Euro 2024) : texte blanc sur bleu nuit (contraste > 10:1). */
.spt-ligue-logo.sco-logo-euro { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  padding: 0; border-radius: 50%; background: #16236B; color: #fff; font-weight: 800; line-height: 1; letter-spacing: .02em;
  box-sizing: border-box; flex-shrink: 0; vertical-align: middle; object-fit: initial; }
.spt-ligue-logo.sco-logo-euro b { display: block; font-weight: 800; }
.spt-puce .spt-ligue-logo.sco-logo-euro { background: #16236B; padding: 0; vertical-align: -4px; }
.spt-identite-ligue .sco-logo-euro { width: 56px !important; height: 56px !important; font-size: 12px !important; }

/* Classement en sections : lignes de séparation (1-8, 9-24, 25-36) et sous-sections (têtes de série) */
.sco-table .sco-sep th { padding: 14px 6px 6px; text-align: left; border-bottom: 1px solid var(--border); }
.sco-table tbody:first-of-type .sco-sep th { padding-top: 6px; }
.sco-table .sco-sep th > span { display: inline-flex; align-items: baseline; gap: 8px; padding: 0 0 0 9px; font-size: var(--t-xs, 11px); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text); border-left: 3px solid var(--text-dim); }
.sco-table .sco-sep th small { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.sco-table .sco-sep-huitiemes th > span { border-left-color: var(--c-succes); }
.sco-table .sco-sep-barrages th > span { border-left-color: var(--c-alerte); }
.sco-table .sco-sep-elimines th > span { border-left-color: var(--c-danger); }
.sco-table .sco-sous-sep th { padding: 6px 6px 3px 18px; text-align: left; font-size: 10.5px; font-weight: 600; color: var(--text-muted);
  border-bottom: 1px dashed var(--border); background: var(--surface-alt); }
.sco-table .sco-sous-sep th > span { display: inline; padding: 0; font-size: inherit; letter-spacing: .02em; text-transform: none; color: inherit; }
.sco-table .sco-sous-sep th small { font-weight: 500; }
.sco-table tr.sco-suisse .spt-equipe .sco-nom { font-weight: 700; }
.sco-table .sco-nom, .sco-duel .sco-nom, .sco-affiches .sco-nom, .sco-projection .sco-nom { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.sco-table .sco-nom > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Groupes (Ligue des nations, ancien format, Euro) */
.sco-groupes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; align-items: start; margin-bottom: 14px; }
.sco-groupes > .spt-carte { margin: 0; }
.sco-groupe-suisse, .sco-carte-suisse { border-color: var(--accent-border); box-shadow: inset 0 0 0 1px var(--accent-border), var(--o-1); }
.sco-carte-suisse { margin-bottom: 14px; }
.sco-resume-suisse { margin: 0 0 8px; font-size: var(--t-m, 13.5px); color: var(--text); }
.sco-ligue-titre { margin: 18px 2px 10px; font-size: var(--t-l, 15px); font-weight: 700; color: var(--text); }
.sco-ligue-nations:first-of-type .sco-ligue-titre { margin-top: 4px; }

/* Tableau final : une colonne par tour, les tours suivants centrés entre leurs duels. Le cadre défile. */
/* position: relative — les textes pour lecteurs d'écran (.spt-lecteur, en position absolue) restent dans le
   cadre au lieu d'élargir la page (vu en capture à 390 px le 13.10.2026). */
.sco-tableau-cadre { position: relative; overflow-x: auto; margin: 4px -4px 0; padding: 4px 4px 10px; scrollbar-width: thin; border-radius: var(--r-s, 10px); }
.sco .spt-table-enveloppe { position: relative; }
.sco-tableau-cadre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sco-tableau { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(208px, 1fr); gap: 14px; list-style: none; margin: 0; padding: 0; min-width: min-content; }
.sco-tour { display: flex; flex-direction: column; min-width: 0; }
.sco-tour > h4 { display: flex; flex-direction: column; gap: 2px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--border);
  font-size: var(--t-s, 12.5px); font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .04em; }
.sco-tour > h4 small { font-size: 10.5px; font-weight: 500; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.sco-tour-final > h4 { border-bottom-color: var(--accent); }
.sco-duels { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 10px; list-style: none; margin: 0; padding: 0; }
.sco-duels-liste { flex: none; justify-content: flex-start; }
.sco-duel { padding: 6px 9px 7px; border: 1px solid var(--border); border-radius: var(--r-s, 10px); background: var(--surface); }
.sco-duel-moi { border-color: var(--accent-border); background: var(--accent-dim); }
.sco-duel-attente { border-style: dashed; background: var(--surface-alt); color: var(--text-muted); font-size: var(--t-xs, 11px); }
.sco-duel-attente .sco-duel-eq { min-height: 22px; }
.sco-duel-eq { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 2px 0; font-size: var(--t-s, 12.5px); color: var(--text); }
.sco-duel-eq > .spt-ent, .sco-duel-eq > .sco-nom { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.sco-duel-eq > .spt-ent > span, .sco-duel-eq > .sco-nom > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sco-duel-eq .spt-blason { width: 20px; height: 20px; }
.sco-duel-score { min-width: 18px; text-align: right; font-size: var(--t-m, 13.5px); font-weight: 700; font-variant-numeric: tabular-nums; }
.sco-qualifie { font-weight: 700; }
.sco-elimine, .sco-elimine .spt-ent b, .sco-elimine .sco-nom { color: var(--text-muted); }
.sco-elimine .spt-blason { opacity: .7; }
.sco-coche { color: var(--c-succes-texte, var(--c-succes)); font-weight: 800; font-size: 12px; }
.sco-moi > .spt-ent span, .sco-moi > .sco-nom span { font-weight: 700; }
.sco-duel-detail { margin: 4px 0 0; padding-top: 4px; border-top: 1px dashed var(--border); font-size: 10.5px; line-height: 1.45; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sco-duel-detail b { color: var(--text); font-weight: 700; }
.sco-duel-detail abbr { text-decoration: none; }
.sco-avis { margin: 0 0 10px !important; padding: 8px 10px; border-radius: var(--r-s, 10px); background: var(--surface-alt); border: 1px solid var(--border); color: var(--text) !important; }

/* Matchs : le tour sous la ligne */
.sco .spt-match-neutre { grid-template-columns: 70px minmax(0, 1fr) auto minmax(0, 1fr); }
.sco-match-tour { grid-column: 2 / -1; margin-top: -4px; font-size: 10.5px; color: var(--text-muted); text-align: center; }
.sco-match-moi { background: var(--accent-dim); border-radius: var(--r-s, 10px); padding-left: 6px; padding-right: 6px; }

/* Tirages */
.sco-tirages { list-style: none; margin: 0; padding: 0; }
.sco-tirage { padding: 10px 0; border-bottom: 1px solid var(--border); }
.sco-tirage:last-child { border-bottom: none; }
.sco-tirage-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sco-tirage-tete b { font-size: var(--t-m, 13.5px); font-weight: 600; color: var(--text); }
.sco-tirage-quand { margin: 3px 0 0; font-size: var(--t-s, 12.5px); color: var(--text-muted); }
.sco-etat { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--r-rond, 999px); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.sco-etat-fait { background: var(--c-succes-fond); color: var(--c-succes-texte); }
.sco-etat-avenir { background: var(--accent-dim); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent-border); }
.sco-etat-confirmer { background: var(--c-neutre-fond); color: var(--c-neutre-texte); }
.sco-affiches { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.sco-affiches li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 6px; border-radius: 8px; font-size: var(--t-s, 12.5px); color: var(--text); }
.sco-affiches li.sco-moi { background: var(--accent-dim); }
.sco-affiches small { flex-basis: 100%; padding-left: 26px; font-size: 10.5px; color: var(--text-muted); }
.sco-contre { color: var(--text-muted); font-size: var(--t-xs, 11px); }
.sco-projection { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sco-projection li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--border);
  border-radius: var(--r-s, 10px); background: var(--surface-alt); }
.sco-pot { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: var(--t-s, 12.5px); color: var(--text); }
.sco-pot small { font-size: 10.5px; color: var(--text-muted); }
.sco-pot .spt-ent, .sco-pot .sco-nom { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.sco-pot .spt-ent span, .sco-pot .sco-nom span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sco-dates { display: grid; gap: 8px; margin: 0; }
.sco-dates > div { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.sco-dates > div:last-child { border-bottom: none; padding-bottom: 0; }
.sco-dates dt { font-size: var(--t-xs, 11px); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.sco-dates dd { margin: 0; font-size: var(--t-s, 12.5px); color: var(--text); }
.sco-a-venir p { margin: 0 0 8px; font-size: var(--t-m, 13.5px); color: var(--text); line-height: 1.5; }
.sco-mes-clubs .spt-ent, .sco-mes-clubs .sco-nom { display: inline-flex; align-items: center; gap: 8px; }
.sco-mes-clubs li > span { display: flex; flex-direction: column; gap: 2px; }

@media (max-width: 760px) {
  .sco-tableau { grid-auto-columns: minmax(186px, 78vw); }
  .sco-compte { min-width: 0; flex: 1 1 100%; flex-direction: row; gap: 10px; padding: 8px 12px; }
  .sco-compte b { font-size: 22px; }
  .sco-projection li { grid-template-columns: 1fr; }
  .sco-projection .sco-contre { text-align: center; }
  .sco-dates > div { grid-template-columns: 1fr; gap: 2px; }
  .sco-match-tour { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .sco *, .sco-tableau-cadre { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}