/**
 * Liverpool Xtra — Page Classement (chargé seulement sur cette page).
 */

/* Page Classement --------------------------------------------- */
.standings-page { padding-top: 28px; }
.comp-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.comp-tabs__item { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper-2); font-weight: 700; color: var(--ink-2); }
.comp-tabs__item:hover { border-color: var(--accent); color: var(--ink); }
.comp-tabs__item.is-active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent); }
.standings-head { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 36px; text-align: left; }
.standings-head .crest { width: 72px; height: 72px; object-fit: contain; flex: none; }
:root[data-theme="dark"] .standings-head .crest { padding: 6px; border-radius: 14px; background: #fff; }
.standings-head__title { font-family: var(--font-display); font-stretch: 72%; font-size: clamp(38px, 6vw, 64px); font-weight: 800; line-height: .95; }
.standings-head__title span { color: var(--accent-ink); }
.standings-head__meta { margin-top: 8px; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.season-switch { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.season-switch select { min-height: 52px; padding: 0 46px 0 22px; border: 1px solid var(--rule-strong); border-radius: 16px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center; font-size: 17px; font-weight: 700; -webkit-appearance: none; appearance: none; cursor: pointer; }
.standings-card { margin-top: 28px; padding: 10px 12px 18px; border: 1px solid var(--rule); border-radius: 24px; background: var(--paper); box-shadow: 0 18px 50px rgba(0, 0, 0, .06); }
:root[data-theme="dark"] .standings-card { background: var(--paper-2); box-shadow: none; }
.standings-card__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 6px 14px; }
.standings-card__label { font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.view-switch { display: inline-flex; padding: 4px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper-2); }
.view-switch button { min-height: 40px; padding: 0 18px; border-radius: 10px; font-weight: 700; color: var(--ink-2); }
.view-switch [aria-pressed="true"] { background: var(--accent); color: #fff; }
.standings-group { margin: 18px 6px 8px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.standings-scroll { overflow-x: auto; }
.standings-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-variant-numeric: tabular-nums; }
.standings-table th, .standings-table td { padding: 10px 8px; text-align: center; white-space: nowrap; }
.standings-table thead th { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule); }
.standings-table abbr { text-decoration: none; }
.standings-table .st-team { text-align: left; width: 100%; }
.standings-table tbody th.st-team { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.standings-table .st-team .crest { width: 28px; height: 28px; object-fit: contain; flex: none; }
.st-name { overflow: hidden; text-overflow: ellipsis; }
.standings-table .st-pts { font-weight: 800; }
.standings-table tbody tr td, .standings-table tbody tr th { background: transparent; }
.standings-table tbody tr.is-us th, .standings-table tbody tr.is-us td { background: color-mix(in srgb, var(--accent) 9%, var(--paper)); }
.standings-table tbody tr.is-us th { border-radius: 16px 0 0 16px; color: var(--accent-ink); }
.standings-table tbody tr.is-us td:last-child { border-radius: 0 16px 16px 0; }
.st-rank { width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--paper-3); font-size: 13px; font-weight: 800; color: var(--ink-2); }
.st-rank--cl { background: #2f55d4; color: #fff; }
.st-rank--el { background: #f08c00; color: #fff; }
.st-rank--ecl { background: #2f9e44; color: #fff; }
.st-rank--down { background: #c92a2a; color: #fff; }
.st-rank--other { background: #868e96; color: #fff; }
.st-dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0 1px; border-radius: 6px; font-size: 11px; font-weight: 800; color: #fff; }
.st-dot--win { background: #2f9e44; }
.st-dot--draw { background: #868e96; }
.st-dot--loss { background: #c92a2a; }
.standings-card:not(.is-full) .st-full { display: none; }
.standings-legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 14px; padding: 14px 6px 0; border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-2); }
.standings-legend li { display: flex; align-items: center; gap: 8px; }
.standings-legend .st-rank { width: 14px; height: 14px; }
.standings-page__text { max-width: var(--read-w); margin: 32px auto 0; }
@media (max-width: 640px) {
	.standings-head { flex-direction: column; text-align: center; gap: 12px; }
	.standings-card { padding: 6px 4px 14px; border-radius: 18px; }
	.standings-table th, .standings-table td { padding: 9px 5px; font-size: 14px; }
	.standings-table tbody th.st-team { gap: 8px; }
	.st-rank { width: 26px; height: 26px; font-size: 12px; }
	.standings-table .st-team .crest { width: 22px; height: 22px; }
	.st-name { max-width: 34vw; }
}