/* =========================================================
   TOPS SLY · compact
   Un onglet par flux, un seul classement visible à la fois :
   le bloc reste léger face au reste de la page.
   Titres et artistes toujours affichés en entier.
   ========================================================= */

.sly-tops{
    --t-pink:#ff2d8d;
    --t-text:#fff;
    --t-muted:#93a5b0;
    --t-dim:#8a9ba8;
    --t-line:rgba(255,255,255,.1);

    position:relative;
    width:100%;
    box-sizing:border-box;
    overflow:hidden;
    --t-shape:64px;
    padding:calc(var(--t-shape) + 56px) max(22px,calc((100vw - 1240px)/2)) calc(var(--t-shape) + 56px);
    color:var(--t-text);
    background:
        radial-gradient(circle at 85% 15%,rgba(255,45,141,.22),transparent 45%),
        radial-gradient(circle at 10% 90%,rgba(0,229,255,.12),transparent 40%),
        linear-gradient(180deg,#2b1250,#1c0d3a);
}

/* Forme de séparation haute, à la couleur de fin du bloc programmes. */
.sly-tops::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-1px;
    height:var(--t-shape);
    pointer-events:none;
    z-index:0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath fill='%230b0c1d' d='M0 0H1440V22C1200 66 960 0 720 28S240 62 0 18Z'/%3E%3C/svg%3E") no-repeat;
    background-size:100% 100%;
}

.sly-tops > *{ position:relative; z-index:1; }

.sly-tops *{ box-sizing:border-box; }

.st-empty{
    padding:30px 0;
    text-align:center;
    color:var(--t-muted);
    font-size:14px;
}


/* ---------- En-tête (même esprit que la grille) ---------- */

.st-head{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}

.st-head-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--t-pink);
    box-shadow:0 0 10px var(--t-pink);
}

.st-head-title{ display:flex; flex-direction:column; gap:3px; }

.st-head-title strong{
    font:700 12px/1 "Space Grotesk",sans-serif;
    letter-spacing:.2em;
}

.st-head-title small{
    font-size:9px;
    letter-spacing:.12em;
    color:var(--t-dim);
}

.st-head-line{
    flex:1;
    height:1px;
    background:linear-gradient(90deg,rgba(255,45,141,.7),rgba(0,229,255,.25),transparent);
}

.st-head-meta{
    font-size:9px;
    letter-spacing:.14em;
    color:var(--t-dim);
}


/* ---------- Onglets ---------- */

.st-tabs{
    display:flex;
    gap:6px;
    margin-bottom:14px;
}

.st-tab{
    padding:9px 18px;
    border:1px solid var(--t-line);
    border-radius:99px;
    background:transparent;
    color:var(--t-muted);
    font:700 11px/1 "Space Grotesk",sans-serif;
    letter-spacing:.14em;
    cursor:pointer;
    transition:color .2s,border-color .2s,background .2s;
}

.st-tab:hover{ color:#fff; border-color:rgba(255,255,255,.3); }

.st-tab.is-active{
    color:#061019;
    border-color:var(--st-c);
    background:var(--st-c);
}


/* ---------- Panneau d'un flux ---------- */

.st-panel{ display:none; }

.st-panel.is-active{
    display:grid;
    grid-template-columns:minmax(260px,.9fr) minmax(0,1.6fr);
    border:1px solid var(--t-line);
    border-radius:10px;
    background:#0b1822;
    overflow:hidden;
    animation:stFade .35s ease;
}

@keyframes stFade{ from{ opacity:0; transform:translateY(6px); } }

.st-card-empty{
    grid-column:1/-1;
    margin:0;
    padding:24px 20px;
    font-size:14px;
    color:var(--t-muted);
}


/* N°1 */

.st-first{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:22px;
    padding:28px 24px;
    text-align:center;
    overflow:hidden;
    border-right:1px solid var(--t-line);
    border-top:2px solid var(--st-c);
    background:
        radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--st-c) 28%,transparent),transparent 62%),
        linear-gradient(180deg,rgba(255,255,255,.03),transparent);
}

/* Gros « 1 » en filigrane */
.st-first::before{
    content:"1";
    position:absolute;
    right:14px;
    bottom:-34px;
    font:800 230px/1 "Space Grotesk",sans-serif;
    color:var(--st-c);
    opacity:.09;
    pointer-events:none;
}

.st-first > *{ position:relative; }

.st-first > img{
    width:min(100%,250px);
    aspect-ratio:1;
    height:auto;
    border-radius:12px;
    object-fit:cover;
    background:#0e202b;
    box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08),0 0 38px color-mix(in srgb,var(--st-c) 35%,transparent);
}

.st-first-info{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    min-width:0;
}

.st-first-tag{
    font:800 10px/1 "Space Grotesk",sans-serif;
    letter-spacing:.14em;
    color:var(--st-c);
}

.st-first-info strong{
    font:700 24px/1.2 "Space Grotesk",sans-serif;
    overflow-wrap:anywhere;
}

.st-first-artist{
    font-size:15px;
    line-height:1.4;
    color:var(--t-muted);
    overflow-wrap:anywhere;
}


/* 2 à 5 */

.st-list{
    list-style:none;
    margin:0;
    padding:4px 18px;
}

.st-row{
    display:grid;
    grid-template-columns:16px 40px minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    padding:9px 0;
    border-top:1px solid var(--t-line);
}

.st-row:first-child{ border-top:0; }

.st-row.is-playing{ background:linear-gradient(90deg,rgba(255,255,255,.05),transparent); }

.st-row-rank{
    font:700 12px/1 "Space Grotesk",sans-serif;
    color:var(--t-dim);
    text-align:center;
}

.st-row > img{
    width:40px;
    height:40px;
    border-radius:6px;
    object-fit:cover;
    background:#0e202b;
}

.st-row-info{ display:flex; flex-direction:column; gap:1px; min-width:0; }

.st-row-info strong{
    font-size:13px;
    font-weight:600;
    line-height:1.3;
    overflow-wrap:anywhere;
}

.st-row-info span{
    font-size:12px;
    line-height:1.35;
    color:var(--t-muted);
    overflow-wrap:anywhere;
}

.st-actions{
    display:flex;
    align-items:center;
    gap:6px;
}

.st-first .st-actions{ margin-top:10px; justify-content:center; }


/* ---------- Boutons écoute + vote ---------- */

.st-play{
    flex:0 0 auto;
    width:30px;
    height:30px;
    border:1px solid var(--t-line);
    border-radius:50%;
    cursor:pointer;
    font-size:10px;
    color:#fff;
    background:rgba(255,255,255,.06);
    transition:background .2s,color .2s,border-color .2s;
}

.st-play i{ margin-left:2px; }
.st-play.is-playing i{ margin-left:0; }
.st-play:hover,
.st-play.is-playing{ background:var(--st-c); border-color:var(--st-c); color:#061019; }
.st-play.is-unavailable{ opacity:.35; cursor:not-allowed; }

.st-vote{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:5px;
    height:30px;
    padding:0 11px;
    border:1px solid var(--t-line);
    border-radius:99px;
    cursor:pointer;
    font:700 11px/1 "Space Grotesk",sans-serif;
    color:var(--t-muted);
    background:transparent;
    transition:border-color .2s,color .2s;
}

.st-vote:hover:not(:disabled){ border-color:var(--st-c); color:#fff; }
.st-vote i{ font-size:10px; }
.st-vote b{ font-variant-numeric:tabular-nums; }

.st-vote.is-voted{ cursor:default; border-color:var(--st-c); color:#fff; }
.st-vote.is-voted i{ color:var(--st-c); }
.st-vote.is-pop i{ animation:stPop .45s ease; }

@keyframes stPop{ 40%{ transform:scale(1.6); } }


/* ---------- Responsive ---------- */

@media(max-width:900px){
    .st-panel.is-active{ grid-template-columns:1fr; }
    .st-first{ border-right:0; border-bottom:1px solid var(--t-line); }
}

@media(max-width:700px){
    .sly-tops{ --t-shape:40px; padding:calc(var(--t-shape) + 40px) 16px calc(var(--t-shape) + 40px); }
    .st-head-meta{ display:none; }
    .st-tabs{ overflow-x:auto; scrollbar-width:none; }
    .st-tabs::-webkit-scrollbar{ display:none; }
    .st-tab{ flex:1 0 auto; }
    .st-first{ padding:22px 16px; gap:16px; }
    .st-first > img{ width:min(100%,200px); }
    .st-first-info strong{ font-size:20px; }
    .st-first::before{ font-size:160px; }
    .st-list{ padding:2px 14px; }
    .st-row{ grid-template-columns:14px 36px minmax(0,1fr); gap:10px; }
    .st-row > img{ width:36px; height:36px; }
    .st-row .st-actions{ grid-column:3; margin-top:4px; }
}

@media(prefers-reduced-motion:reduce){
    .st-panel.is-active,.st-vote.is-pop i{ animation:none; }
}