/* ============================================================
   POLITUBE — Classements Top 100 (façon chart musical)
   Rang, évolution (place & abonnés), logo réel. DA app.
   ============================================================ */
.chart-page { padding: 1.6rem 2.2rem 3.5rem; max-width: 1080px; }
.chart-head { margin-bottom: 1.4rem; }
.chart-head .kicker { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--yt-brand); font-weight: 700; }
.chart-head h1 { font: 700 clamp(2rem, 5vw, 3.2rem)/1.02 var(--font-grotesk); margin: .4rem 0 .5rem; color: #fff; }
.chart-head p { color: var(--yt-muted); max-width: 66ch; line-height: 1.6; font-size: .95rem; }

/* onglets famille */
.chart-tabs { display: inline-flex; gap: .3rem; padding: .3rem; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--yt-line); margin: 1.4rem 0 .4rem; }
.chart-tab { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.15rem; border-radius: 999px; border: none; cursor: pointer; background: none; color: var(--yt-muted); font: 600 .88rem var(--font-grotesk); transition: .15s; }
.chart-tab .dot { width: 8px; height: 8px; border-radius: 50%; }
.chart-tab[data-fam="newseur"] .dot { background: var(--fam-newseur, #ff6b5e); }
.chart-tab[data-fam="politique"] .dot { background: var(--fam-politique, #8b7bd8); }
.chart-tab[data-fam="media"] .dot { background: var(--fam-media, #37c4d6); }
.chart-tab:hover { color: var(--yt-text); }
.chart-tab.on { color: #fff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }

.chart-meta { color: var(--yt-faint); font-size: .78rem; margin: .8rem 0 1.1rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.chart-demo-tag { color: var(--pos-centre); background: rgba(230, 178, 60, .12); padding: .2rem .6rem; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(230, 178, 60, .3); font-weight: 600; }

/* liste */
.chart { display: grid; gap: 2px; }
.chart-row {
  display: grid; grid-template-columns: 46px 62px 46px minmax(0, 1fr) 120px 96px; gap: .9rem; align-items: center;
  padding: .7rem .9rem; border-radius: 12px; background: var(--yt-card); border: 1px solid var(--yt-line);
  transition: border-color .15s, transform .15s;
}
.chart-row:hover { border-color: rgba(55, 196, 214, .4); transform: translateX(2px); }
.chart-row.top3 { background: linear-gradient(90deg, rgba(55, 196, 214, .06), var(--yt-card) 40%); }

.chart-rank { font: 800 1.5rem var(--font-grotesk); text-align: center; color: var(--yt-faint); font-variant-numeric: tabular-nums; }
.chart-row.top3 .chart-rank { color: var(--yt-brand); }
.chart-row:nth-child(1) .chart-rank { font-size: 1.8rem; }

.chart-move { display: inline-flex; align-items: center; justify-content: center; gap: 3px; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-move.up { color: #35d07f; }
.chart-move.down { color: #e8495f; }
.chart-move.same { color: var(--yt-faint); }
.chart-move.new { color: var(--yt-brand); font-size: .66rem; letter-spacing: .06em; }
.chart-move svg { width: 11px; height: 11px; }

.chart-logo { width: 44px; height: 44px; border-radius: 12px; background: var(--yt-bg-2); display: grid; place-items: center; overflow: hidden; position: relative; }
.chart-logo::after { content: attr(data-ini); font-size: .8rem; font-weight: 700; color: var(--yt-muted); }
.chart-logo.has-img::after { display: none; }
.chart-logo img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }

.chart-id { min-width: 0; }
.chart-id .name { font-weight: 600; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: .35rem; }
.chart-id .name .verified { width: 14px; height: 14px; color: var(--yt-brand); flex: none; }
.chart-id .sub { color: var(--yt-faint); font-size: .76rem; margin-top: .1rem; }

.chart-subs { text-align: right; }
.chart-subs b { font: 700 1.02rem var(--font-grotesk); color: var(--yt-text); font-variant-numeric: tabular-nums; }
.chart-subs span { display: block; font-size: .66rem; color: var(--yt-faint); letter-spacing: .06em; text-transform: uppercase; }

.chart-delta { text-align: right; font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-delta.up { color: #35d07f; }
.chart-delta.down { color: #e8495f; }
.chart-delta.flat { color: var(--yt-faint); }

.chart-skeleton, .chart-offline { color: var(--yt-muted); padding: 2rem 0; font-size: .9rem; }

@media (max-width: 720px) {
  .chart-page { min-width: 0; padding: 1.2rem 1.1rem 2.6rem; }
  .chart-tabs { display: flex; width: 100%; max-width: 100%; gap: .18rem; box-sizing: border-box; }
  .chart-tab { min-width: 0; flex: 1; justify-content: center; padding: .55rem .45rem; font-size: .78rem; }
  .chart-row {
    position: relative;
    grid-template-columns: 30px 40px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "rank logo identity value"
      "move logo identity value";
    column-gap: .55rem;
    row-gap: .08rem;
    padding: .7rem .65rem;
  }
  .chart-rank { grid-area: rank; align-self: end; }
  .chart-move { grid-area: move; align-self: start; min-height: 1rem; }
  .chart-logo { grid-area: logo; align-self: center; width: 40px; height: 40px; }
  .chart-id { grid-area: identity; align-self: center; }
  .chart-id .name { font-size: .9rem; }
  .chart-id .sub {
    display: -webkit-box;
    overflow: hidden;
    margin-top: .22rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .chart-subs { grid-area: value; align-self: center; min-width: 52px; }
  .chart-subs b { font-size: .92rem; }
  .chart-subs span { display: none; }
  .chart-delta { display: none; }
  .chart-rank { font-size: 1.2rem; }
}

/* ---- Charts V2 : lectures, périodes, couverture, « pourquoi » ---- */
.chart-lectures { display: flex; gap: .4rem; flex-wrap: wrap; margin: .2rem 0 .8rem; }
.chart-lecture { padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--yt-line-strong); background: rgba(255,255,255,.03); color: var(--yt-muted); font: 600 .84rem var(--font-grotesk); cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.chart-lecture:hover { color: var(--yt-text); background: rgba(255,255,255,.06); }
.chart-lecture.on { color: #06121a; background: var(--yt-brand); border-color: transparent; }
.chart-periods { display: flex; gap: .35rem; margin: 0 0 1rem; }
.chart-period { padding: .35rem .8rem; border-radius: 8px; border: 1px solid var(--yt-line); background: transparent; color: var(--yt-muted); font: 600 .78rem var(--font-grotesk); cursor: pointer; }
.chart-period.on { color: var(--yt-text); border-color: rgba(55,196,214,.6); background: rgba(55,196,214,.1); }
.chart-cov { display: inline-block; margin-left: .4rem; padding: .05rem .45rem; border-radius: 999px; font-size: .66rem; font-weight: 700; color: var(--pos-centre); background: rgba(230,178,60,.12); box-shadow: inset 0 0 0 1px rgba(230,178,60,.3); }
.chart-row-wrap { margin-bottom: .5rem; }
.chart-why { margin: .1rem 0 0 auto; display: block; background: none; border: none; color: var(--yt-faint); font: 600 .72rem var(--font-grotesk); cursor: pointer; padding: .15rem .2rem; }
.chart-why:hover { color: var(--yt-brand); }
.chart-why-panel { margin: .3rem 0 .2rem; padding: .6rem .9rem; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--yt-line); color: var(--yt-muted); font-size: .8rem; line-height: 1.5; }