/* ── Tier List page styles ────────────────────────────────────────────────── */

/* Role colour tokens (shared with home) */
:root {
  --role-top:     #e8734a;
  --role-jungle:  #4ade80;
  --role-mid:     #c084fc;
  --role-bot:     #60a5fa;
  --role-support: #fbbf24;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.tl-hero {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 48px;
  padding: 32px 0 36px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: relative;
}
.tl-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(66,183,255,.07), transparent);
  pointer-events: none;
}
.tl-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tl-hero__stat {
  font-size: .78rem;
  color: var(--text-muted);
  & strong { color: var(--text-strong); font-weight: 700; }
}
.tl-hero__stat-sep {
  color: rgba(255,255,255,.2);
  font-size: .78rem;
}
.tl-hero__title {
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--text-strong);
  margin: 0;
  line-height: 1.05;
  & span { color: var(--accent-cyan); }
}
.tl-hero__desc {
  font-size: clamp(.88rem, 1.5vw, 1rem);
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  max-width: 640px;
}
.tl-patch-badge {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  background: rgba(66,183,255,.12);
  border: 1px solid rgba(66,183,255,.28);
  border-radius: 999px;
  padding: 4px 12px;
}
.tl-hero__ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.tl-cta {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 9px 20px;
  border-radius: 8px;
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
}
.tl-cta--primary {
  background: var(--accent-cyan);
  color: #0a162f;
  &:hover { background: #7dd8f8; }
}
.tl-cta--secondary {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text-strong);
  &:hover { background: rgba(255,255,255,.1); }
}

/* ── Section ──────────────────────────────────────────────────────────────── */
.tl-section {
  margin-bottom: 56px;
}
.tl-section-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 0;
}

.tl-section-title {
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.tl-section-lead {
  font-size: .83rem;
  color: var(--text-muted);
  margin: -12px 0 18px;
}

/* ── Top picks strip ──────────────────────────────────────────────────────── */
.tl-top-picks-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

/* Carte premium dorée */
.tl-top-pick {
  position: relative;
  border-radius: 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(160deg,
    rgba(240,180,41,.18) 0%,
    rgba(180,120,20,.08) 40%,
    rgba(10,22,47,.95) 100%);
  border: 1px solid rgba(240,180,41,.35);
  box-shadow:
    0 0 0 1px rgba(240,180,41,.08) inset,
    0 4px 24px rgba(0,0,0,.4),
    0 1px 0 rgba(240,180,41,.15) inset;
}

/* Trait doré en haut */
.tl-top-pick::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(240,180,41,.8), transparent);
  border-radius: 14px 14px 0 0;
}

.tl-top-pick__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(240,180,41,.18);
  background: rgba(240,180,41,.06);
}

.tl-top-role-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: brightness(10) sepia(1) saturate(2) hue-rotate(5deg);
  flex-shrink: 0;
}

.tl-top-role-fallback {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 900;
  color: #f0b429;
}

.tl-top-role {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #f0b429;
  flex: 1;
}

.tl-top-splus-badge {
  font-size: .58rem;
  font-weight: 900;
  color: #0a162f;
  background: #f0b429;
  border-radius: 4px;
  padding: 2px 6px;
  letter-spacing: .06em;
}

.tl-top-s-badge {
  font-size: .58rem;
  font-weight: 900;
  color: #0a162f;
  background: #a78bfa;
  border-radius: 4px;
  padding: 2px 6px;
  letter-spacing: .06em;
}

/* Variante S-tier (fallback quand S+ vide) */
.tl-top-pick--s {
  background: linear-gradient(160deg,
    rgba(167,139,250,.18) 0%,
    rgba(120,80,200,.08) 40%,
    rgba(10,22,47,.95) 100%);
  border-color: rgba(167,139,250,.35);
  box-shadow:
    0 0 0 1px rgba(167,139,250,.08) inset,
    0 4px 24px rgba(0,0,0,.4),
    0 1px 0 rgba(167,139,250,.15) inset;
}
.tl-top-pick--s::before {
  background: linear-gradient(90deg, transparent, rgba(167,139,250,.8), transparent);
}
.tl-top-pick--s .tl-top-pick__header {
  border-bottom-color: rgba(167,139,250,.18);
  background: rgba(167,139,250,.06);
}
.tl-top-pick--s .tl-top-role-icon {
  filter: brightness(10) sepia(1) saturate(3) hue-rotate(220deg);
}
.tl-top-pick--s .tl-top-role { color: #a78bfa; }
.tl-top-pick--s .tl-top-champ:hover { background: rgba(167,139,250,.1); border-color: rgba(167,139,250,.3); }
.tl-top-pick--s .tl-top-champ--first img { border-color: rgba(167,139,250,.6); box-shadow: 0 0 10px rgba(167,139,250,.25); }
.tl-top-pick--s .tl-top-champ:hover img { border-color: rgba(167,139,250,.4); }
.tl-top-pick--s .tl-top-champ:hover span { color: #a78bfa; }

/* Grille 2 colonnes */
.tl-top-champs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
}

.tl-top-champ {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  border-radius: 10px;
  padding: 8px 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  transition: background .15s, border-color .15s, transform .15s;
}

.tl-top-champ:hover {
  background: rgba(240,180,41,.1);
  border-color: rgba(240,180,41,.3);
  transform: translateY(-2px);
}

.tl-top-champ img {
  width: 76px;
  height: 76px;
  max-width: 100%;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.08);
  transition: border-color .15s;
}

.tl-top-champ--first img {
  border-color: rgba(240,180,41,.6);
  box-shadow: 0 0 10px rgba(240,180,41,.25);
}

.tl-top-champ:hover img {
  border-color: rgba(240,180,41,.4);
}

.tl-top-champ span {
  font-size: .66rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
  transition: color .15s;
}

.tl-top-champ:hover span {
  color: #f0b429;
}

/* ── Role tabs ────────────────────────────────────────────────────────────── */
.tl-role-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.tl-role-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: var(--text-muted);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  &:hover { border-color: rgba(255,255,255,.18); color: var(--text-strong); }
  &[aria-current="true"] {
    background: rgba(66,183,255,.1);
    border-color: rgba(66,183,255,.35);
    color: var(--accent-cyan);
  }
}
.tl-tab-abbr {
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .05em;
  opacity: .7;
}

/* ── Meta trend paragraph ─────────────────────────────────────────────────── */
.tl-meta-trend {
  font-family: "Barlow", "Segoe UI", sans-serif;
  font-size: .94rem;
  font-weight: 500;
  line-height: 1.95;
  color: rgba(255,255,255,.56);
  background: rgba(66,183,255,.03);
  border: 1px solid rgba(66,183,255,.1);
  border-left: 3px solid var(--accent-cyan);
  border-radius: 0 10px 10px 0;
  padding: 18px 22px;
  margin: 0 0 28px;
}
.tl-meta-trend strong {
  color: var(--text-strong);
  font-weight: 700;
}
.tl-meta-lane {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  white-space: nowrap;
}
.tl-meta-lane-icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  object-fit: contain;
  vertical-align: -2px;
}
.tl-meta-lane[data-role="TOP"]     { color: var(--role-top); }
.tl-meta-lane[data-role="JUNGLE"]  { color: var(--role-jungle); }
.tl-meta-lane[data-role="MID"]     { color: var(--role-mid); }
.tl-meta-lane[data-role="DRAGON"]  { color: var(--role-bot); }
.tl-meta-lane[data-role="SUPPORT"] { color: var(--role-support); }
.tl-meta-lane[data-role="TOP"]     .tl-meta-lane-icon { filter: brightness(0) saturate(100%) invert(52%) sepia(55%) saturate(700%) hue-rotate(338deg) brightness(105%); }
.tl-meta-lane[data-role="JUNGLE"]  .tl-meta-lane-icon { filter: brightness(0) saturate(100%) invert(79%) sepia(32%) saturate(650%) hue-rotate(89deg) brightness(101%); }
.tl-meta-lane[data-role="MID"]     .tl-meta-lane-icon { filter: brightness(0) saturate(100%) invert(60%) sepia(80%) saturate(600%) hue-rotate(228deg) brightness(101%); }
.tl-meta-lane[data-role="DRAGON"]  .tl-meta-lane-icon { filter: brightness(0) saturate(100%) invert(66%) sepia(52%) saturate(620%) hue-rotate(193deg) brightness(102%); }
.tl-meta-lane[data-role="SUPPORT"] .tl-meta-lane-icon { filter: brightness(0) saturate(100%) invert(82%) sepia(60%) saturate(650%) hue-rotate(3deg) brightness(101%); }

/* ── Role blurb ───────────────────────────────────────────────────────────── */
.tl-role-blurb {
  font-size: .82rem;
  line-height: 1.6;
  color: var(--text-muted);
  padding: 10px 14px;
  background: rgba(255,255,255,.02);
  border-left: 2px solid rgba(66,183,255,.3);
  border-radius: 0 6px 6px 0;
  margin: 0 0 20px;
}

/* ── Tier rows ────────────────────────────────────────────────────────────── */
.tl-tier-row {
  display: flex;
  gap: 0;
  align-items: flex-start;
  margin-bottom: 6px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--tier-bg, transparent);
  border: 1px solid color-mix(in srgb, var(--tier-color, #fff) 12%, transparent);
}
.tl-tier-label {
  flex-shrink: 0;
  width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  background: color-mix(in srgb, var(--tier-color, #fff) 18%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--tier-color, #fff) 20%, transparent);
  & span {
    font-size: .95rem;
    font-weight: 900;
    color: var(--tier-color, #fff);
    letter-spacing: -.01em;
  }
}
.tl-champ-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 12px;
  flex: 1;
}

/* ── Champion tile ────────────────────────────────────────────────────────── */
.tl-champ-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 68px;
  text-decoration: none;
  &:hover .tl-champ-img-wrap { transform: translateY(-2px); }
  &:hover .tl-champ-name { color: var(--accent-cyan); }
}
.tl-champ-img-wrap {
  position: relative;
  transition: transform .15s;
}
.tl-champ-img-wrap img {
  width: 76px;
  height: 76px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  border: 2px solid color-mix(in srgb, var(--tier-color, #fff) 30%, transparent);
}
.tl-champ-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: .6rem;
  font-weight: 900;
  color: var(--tier-color, #fff);
  background: color-mix(in srgb, var(--tier-color, #fff) 22%, #0d1117);
  border: 1px solid color-mix(in srgb, var(--tier-color, #fff) 45%, transparent);
  border-radius: 4px;
  padding: 2px 5px;
  line-height: 1.4;
}
.tl-champ-name {
  font-size: .72rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
  transition: color .15s;
}
.tl-champ-tile { width: 84px; }

.tl-champ-wr {
  font-size: .6rem;
  font-weight: 700;
  color: #4ade80;
  text-align: center;
  letter-spacing: .03em;
  margin-top: 1px;
}

/* ── Bans section ─────────────────────────────────────────────────────────── */
.tl-bans-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tl-bans-row {
  display: flex;
  align-items: center;
  gap: 20px;
}
.tl-bans-role {
  width: 60px;
  flex-shrink: 0;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.tl-bans-picks {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.tl-ban-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  &:hover img { border-color: rgba(252,165,165,.6); filter: saturate(1.2); }
}
.tl-ban-tile img {
  width: 76px;
  height: 76px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(252,165,165,.2);
  filter: saturate(.75);
  transition: all .15s;
}
.tl-ban-tile span {
  font-size: .65rem;
  color: var(--text-muted);
  text-transform: capitalize;
}


/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .tl-top-picks-strip { grid-template-columns: repeat(3, 1fr); }

}
@media (max-width: 640px) {
  .tl-hero { padding: 20px 0 24px; }
  .tl-hero__ctas { width: 100%; }
  .tl-cta { flex: 1; text-align: center; }
  .tl-top-picks-strip { grid-template-columns: repeat(2, 1fr); }
  .tl-champ-tile { width: 68px; }
  .tl-top-champ img { width: 68px; height: 68px; }
  .tl-champ-img-wrap img { width: 68px; height: 68px; }
  .tl-ban-tile img { width: 68px; height: 68px; }
  .tl-tier-label { width: 40px; }
  .tl-role-tab { padding: 7px 12px; }
}