/* KICKOFF · écran Championnat (feature vedette étape 2)
   Réutilise .card, .lb-row, .lb-rank, .crest, .pill, .stat des tokens/app.css.
   Ici : en-tête de saison, sélecteur 3 divisions, zones montée/descente. */

/* ---------- en-tête de saison ---------- */
.cs-head {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(232, 0, 13, .22), var(--ink-3) 60%);
  border-color: rgba(232, 0, 13, .4);
}
/* slash signature en filigrane */
.cs-head::after {
  content: "/";
  position: absolute;
  right: -6px;
  top: -22px;
  font-family: var(--disp);
  font-style: italic;
  font-weight: 700;
  font-size: 150px;
  line-height: 1;
  color: rgba(232, 0, 13, .16);
  pointer-events: none;
}
.cs-head-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.cs-season {
  font-family: var(--disp);
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 27px;
  line-height: 1.05;
  letter-spacing: .01em;
}
.cs-clock {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  position: relative;
  z-index: 1;
}
.cs-clock b {
  font-family: var(--disp);
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  color: var(--gold);
}

/* ---------- carte "ton club" ---------- */
.cs-me {
  display: flex;
  align-items: center;
  gap: 13px;
}
.cs-me-id { flex: 1; min-width: 0; }
.cs-me-line {
  font-family: var(--disp);
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cs-me-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}
.cs-me-sub b { color: var(--txt); }
.cs-me-pts {
  text-align: right;
  flex: none;
}
.cs-me-pts b {
  display: block;
  font-family: var(--disp);
  font-style: italic;
  font-weight: 700;
  font-size: 24px;
  color: var(--gold);
  line-height: 1;
}
.cs-me-pts span {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  font-weight: 700;
}

/* ---------- sélecteur de division (3 colonnes) ---------- */
.cs-seg {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
}
.cs-seg-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: var(--disp);
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 12.5px;
  padding: 9px 4px;
  border-radius: 9px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.05;
}
.cs-seg-btn small {
  font-family: var(--body);
  font-style: normal;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: .1em;
  opacity: .8;
}
.cs-seg-btn.active {
  background: linear-gradient(135deg, var(--red), var(--red-deep));
  color: #fff;
  box-shadow: var(--glow-red);
}

/* ---------- légende des zones ---------- */
.cs-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: 0 2px;
  font-size: 11px;
  color: var(--muted);
}
.cs-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cs-legend i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex: none;
}
.cs-legend .lg-up { background: var(--gold); }
.cs-legend .lg-down { background: var(--red); }

/* ---------- lignes de classement (zones) ---------- */
.cs-list { display: flex; flex-direction: column; gap: 7px; }

/* accent gauche selon la zone, sans casser .lb-row */
.cs-row {
  position: relative;
  border-left-width: 3px;
}
.cs-row.z-title {
  border-left-color: var(--gold);
  background: linear-gradient(135deg, rgba(244, 195, 59, .12), var(--ink-2));
}
.cs-row.z-up { border-left-color: var(--gold); }
.cs-row.z-down { border-left-color: var(--red); }
.cs-row.z-stay { border-left-color: var(--line-2); }
/* mon club prime toujours visuellement (rouge KickOff) */
.cs-row.mine {
  border-color: rgba(232, 0, 13, .55);
  /* le liseré gauche garde la couleur de ZONE (montée/descente) : ne pas l'écraser,
     sinon un club en tête paraît en descente. Le fond rouge suffit à dire "c'est toi". */
  background: linear-gradient(135deg, rgba(232, 0, 13, .16), var(--ink-2));
  box-shadow: 0 4px 18px rgba(232, 0, 13, .15);
}

/* pastille de mouvement à droite du nom */
.cs-move {
  flex: none;
  font-family: var(--disp);
  font-style: italic;
  font-weight: 700;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 7px;
  border-radius: 999px;
}
.cs-move.up { color: var(--gold); background: rgba(244, 195, 59, .12); border: 1px solid rgba(244, 195, 59, .35); }
.cs-move.down { color: var(--red-glow); background: rgba(232, 0, 13, .14); border: 1px solid rgba(232, 0, 13, .4); }
.cs-move.title { color: var(--gold); background: rgba(244, 195, 59, .16); border: 1px solid rgba(244, 195, 59, .5); }
.cs-move.mine { color: #fff; background: linear-gradient(135deg, var(--red), var(--red-deep)); border: 1px solid rgba(232, 0, 13, .5); }

/* séparateur de zone (trait fin + libellé, façon tableau de foot) */
.cs-sep {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px 1px;
  font-family: var(--disp);
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 9px;
}
.cs-sep::after {
  content: "";
  flex: 1;
  height: 1px;
}
.cs-sep.up { color: var(--gold); }
.cs-sep.up::after { background: linear-gradient(90deg, rgba(244, 195, 59, .5), transparent); }
.cs-sep.down { color: var(--red-glow); }
.cs-sep.down::after { background: linear-gradient(90deg, rgba(232, 0, 13, .5), transparent); }

/* ---------- carte "comment ça marche" ---------- */
.cs-how p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}
.cs-how p + p { margin-top: 8px; }
.cs-how b { color: var(--txt); }
.cs-how .gold { color: var(--gold); }
.cs-how .red { color: var(--red-glow); }

.cs-empty {
  padding: 16px 4px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}