/* Comparateur de joueurs */
.tnk-cmp { max-width: 980px; margin: 0 auto; padding: 32px 24px 64px; font-family: 'Barlow', system-ui, sans-serif; color: #fff; }
.tnk-cmp__surtitre { margin: 0 0 6px; color: #daf37c; font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.tnk-cmp h1 { margin: 0; font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif; font-weight: 900; font-size: 3.4rem; line-height: .95; text-transform: uppercase; }
.tnk-cmp__intro { margin: 10px 0 0; color: #9da1a8; }

.tnk-cmp__choix { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; margin-top: 26px; }
.tnk-cmp__choix label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tnk-cmp__choix label span { color: #9da1a8; font-weight: 600; font-size: .85rem; }
.tnk-cmp__choix select { width: 100%; height: 46px; padding: 0 12px; background: #0d0f13; border: 1px solid #2a2e36; border-radius: 10px; color: #fff; font: 600 1rem 'Barlow', system-ui, sans-serif; cursor: pointer; }
.tnk-cmp__choix select:focus { outline: none; border-color: #daf37c; }
.tnk-cmp__inverser { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #2a2e36; border-radius: 50%; color: #daf37c; font-size: 1.4rem; text-decoration: none; transition: border-color .2s, transform .3s; }
.tnk-cmp__inverser:hover { border-color: #daf37c; transform: rotate(180deg); }

.tnk-cmp__periodes { display: flex; gap: 8px; margin: 18px 0 0; overflow-x: auto; scrollbar-width: none; }
.tnk-cmp__periodes::-webkit-scrollbar { display: none; }
.tnk-cmp__periodes a { flex-shrink: 0; padding: 7px 14px; border: 1px solid #1d2026; border-radius: 999px; background: #0d0f13; color: #9da1a8; font-weight: 600; font-size: .9rem; text-decoration: none; }
.tnk-cmp__periodes a:hover { color: #fff; border-color: #3a3f48; }
.tnk-cmp__periodes a[aria-current] { background: #daf37c; border-color: #daf37c; color: #0a0c0f; }

.tnk-cmp__duel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 30px; }
.tnk-cmp__joueur { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 16px; background: #0d0f13; border: 1px solid #1d2026; border-radius: 16px; color: #fff; text-decoration: none; transition: border-color .2s; }
.tnk-cmp__joueur:hover { border-color: #daf37c; }
.tnk-cmp__joueur--d { flex-direction: row-reverse; text-align: right; }
.tnk-cmp__maillot { position: relative; flex-shrink: 0; width: 84px; }
.tnk-cmp__maillot img { display: block; width: 100%; height: auto; }
.tnk-cmp__maillot b { position: absolute; left: 0; right: 0; top: 34%; text-align: center; font-family: 'Righteous', sans-serif; font-size: 1.7rem; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.tnk-cmp__identite { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tnk-cmp__identite strong { font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif; font-weight: 900; font-size: 2.1rem; line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.tnk-cmp__identite small { color: #9da1a8; font-size: .9rem; }
.tnk-cmp__vs { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tnk-cmp__vs span { font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif; font-weight: 900; font-size: 2.2rem; line-height: 1; color: #daf37c; }
.tnk-cmp__vs small { color: #6b6f77; font-weight: 800; letter-spacing: .1em; }
.tnk-cmp__verdict { margin: 14px 0 0; text-align: center; color: #9da1a8; }
.tnk-cmp__verdict strong { color: #daf37c; }

.tnk-cmp__table { margin-top: 24px; background: #0d0f13; border: 1px solid #1d2026; border-radius: 16px; overflow: hidden; }
.tnk-cmp__ligne { display: grid; grid-template-columns: 1fr minmax(120px, auto) 1fr; align-items: center; gap: 6px 14px; padding: 14px 20px 12px; border-top: 1px solid #1d2026; }
.tnk-cmp__ligne:first-child { border-top: 0; }
.tnk-cmp__lib { color: #9da1a8; font-weight: 600; font-size: .9rem; text-align: center; }
.tnk-cmp__val { font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif; font-weight: 800; font-size: 1.7rem; line-height: 1; color: #d4d6da; font-variant-numeric: tabular-nums; }
.tnk-cmp__val--d { text-align: right; }
.tnk-cmp__val.is-mieux { color: #daf37c; }
.tnk-cmp__val b { font-weight: 800; }
.tnk-cmp__val .v { color: #daf37c; }
.tnk-cmp__val .d { color: #e38585; }
.tnk-cmp__barre { grid-column: 1 / -1; display: flex; gap: 4px; height: 6px; }
.tnk-cmp__barre span { width: var(--p); min-width: 4px; border-radius: 3px; background: #2a2e36; }
.tnk-cmp__barre span.is-mieux { background: #daf37c; }
.tnk-cmp__ligne--vnd .tnk-cmp__val { font-size: 1.4rem; }

.tnk-cmp__ensemble { margin-top: 36px; }
.tnk-cmp__ensemble h2 { margin: 0 0 16px; font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif; font-weight: 800; font-size: 1.8rem; text-transform: uppercase; }
.tnk-cmp__ensemble h3 { margin: 24px 0 10px; font-size: 1rem; color: #9da1a8; font-weight: 700; }
.tnk-cmp__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tnk-cmp__kpis div { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: #0d0f13; border: 1px solid #1d2026; border-radius: 12px; }
.tnk-cmp__kpis b { font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif; font-weight: 900; font-size: 2.2rem; line-height: 1; }
.tnk-cmp__kpis b.v { color: #daf37c; }
.tnk-cmp__kpis small { color: #9da1a8; font-size: .85rem; }
.tnk-cmp__matchs { margin: 0; padding: 0; list-style: none; border: 1px solid #1d2026; border-radius: 12px; overflow: hidden; }
.tnk-cmp__matchs li + li { border-top: 1px solid #1d2026; }
.tnk-cmp__matchs a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: #fff; text-decoration: none; }
.tnk-cmp__matchs a:hover { background: #0d0f13; }
.tnk-cmp__res { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 6px; background: #3a3f48; font-weight: 800; font-size: .8rem; }
.tnk-cmp__res--win { background: #daf37c; color: #0a0c0f; }
.tnk-cmp__res--loss { background: #c25151; }
.tnk-cmp__adv { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-weight: 600; }
.tnk-cmp__adv img { object-fit: contain; }
.tnk-cmp__adv small { color: #6b6f77; font-weight: 500; }
.tnk-cmp__score { font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif; font-weight: 800; font-size: 1.3rem; }
.tnk-cmp__buts { display: inline-flex; align-items: center; gap: 4px; min-width: 64px; justify-content: flex-end; color: #9da1a8; font-weight: 700; }
.tnk-cmp__buts i { color: #daf37c; }
.tnk-cmp__vide { padding: 18px; border: 1px dashed #2a2e36; border-radius: 12px; color: #9da1a8; text-align: center; }

@media (max-width: 760px) {
    .tnk-cmp { padding: 22px 16px 48px; }
    .tnk-cmp h1 { font-size: 2.6rem; }
    .tnk-cmp__duel { gap: 8px; }
    .tnk-cmp__joueur, .tnk-cmp__joueur--d { flex-direction: column; text-align: center; gap: 8px; padding: 12px 8px; }
    .tnk-cmp__maillot { width: 64px; }
    .tnk-cmp__maillot b { font-size: 1.3rem; }
    .tnk-cmp__identite strong { font-size: 1.5rem; }
    .tnk-cmp__identite small { font-size: .8rem; }
    .tnk-cmp__vs span { font-size: 1.7rem; }
    .tnk-cmp__ligne { grid-template-columns: 1fr auto 1fr; padding: 12px 14px 10px; gap: 6px 8px; }
    .tnk-cmp__lib { font-size: .78rem; max-width: 120px; }
    .tnk-cmp__val { font-size: 1.35rem; }
    .tnk-cmp__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tnk-cmp__adv small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tnk-cmp__inverser { transition: none; } }