/* =========================================================
   TOP TITRES · toptitres.php
   Classement complet d'un flux : podium + liste.
   Les boutons écoute / vote (.st-play, .st-vote) et les
   pochettes (.st-cover) sont gérés par topsbloc.js/.css.
   ========================================================= */

.tt-page{
    --st-c:#ff2d8d;
    --st-c2:#ff8a3d;
    --t-text:#fff;
    --t-muted:#93a5b0;
    --t-dim:#8a9ba8;
    --t-line:rgba(255,255,255,.1);

    position:relative;
    color:var(--t-text);
    font-family:"DM Sans",Arial,Helvetica,sans-serif;
    background:
        radial-gradient(circle at 85% 0%,color-mix(in srgb,var(--st-c) 22%,transparent),transparent 40%),
        radial-gradient(circle at 5% 45%,rgba(0,229,255,.07),transparent 32%),
        linear-gradient(180deg,#2b1250 0%,#1c0d3a 30%,#0b0c1d 100%);
}

.tt-page *{ box-sizing:border-box; }


/* ---------- Hero ---------- */

.tt-hero{
    padding:84px max(22px,calc((100vw - 1100px)/2)) 40px;
}

.tt-kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:20px;
    font:800 12px/1 "Space Grotesk",sans-serif;
    letter-spacing:.24em;
    color:var(--st-c);
}

.tt-kicker i{
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--st-c);
    box-shadow:0 0 14px var(--st-c);
}

.tt-hero h1{
    margin:0;
    font:800 clamp(40px,7vw,86px)/.98 "Space Grotesk",sans-serif;
    letter-spacing:-.04em;
}

.tt-hero h1 em{
    font-style:normal;
    background:linear-gradient(90deg,var(--st-c),var(--st-c2));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.tt-hero p{
    max-width:580px;
    margin:22px 0 0;
    font-size:16px;
    line-height:1.6;
    color:var(--t-muted);
}

.tt-tabs{
    display:flex;
    gap:8px;
    margin-top:30px;
    overflow-x:auto;
    scrollbar-width:none;
}

.tt-tabs::-webkit-scrollbar{ display:none; }

.tt-tab{
    flex:0 0 auto;
    padding:12px 24px;
    border:1px solid var(--t-line);
    border-radius:99px;
    color:var(--t-muted);
    text-decoration:none;
    font:800 12px/1 "Space Grotesk",sans-serif;
    letter-spacing:.16em;
    transition:color .2s,border-color .2s,background .2s;
}

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

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


/* ---------- Contenu ---------- */

.tt-inner{
    width:min(1100px,calc(100% - 44px));
    margin:0 auto;
    padding:10px 0 90px;
}

.tt-empty{
    padding:80px 0;
    text-align:center;
    color:var(--t-muted);
}


/* ---------- Podium ---------- */

.tt-podium{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:end;
    gap:18px;
    margin-bottom:30px;
}

.tt-podium-card{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    padding:26px 20px 22px;
    text-align:center;
    overflow:hidden;
    background:rgba(255,255,255,.04);
    border:1px solid var(--t-line);
    border-radius:20px;
}

/* Le n°1 au centre, plus grand */
.tt-rank-1{
    order:2;
    padding-top:34px;
    padding-bottom:30px;
    border-color:var(--st-c);
    background:
        radial-gradient(circle at 50% 22%,color-mix(in srgb,var(--st-c) 26%,transparent),transparent 62%),
        rgba(255,255,255,.05);
}
.tt-rank-2{ order:1; }
.tt-rank-3{ order:3; }

.tt-podium-rank{
    position:absolute;
    top:-18px;
    right:10px;
    font:800 130px/1 "Space Grotesk",sans-serif;
    color:var(--st-c);
    opacity:.14;
    pointer-events:none;
}

.tt-rank-1 .tt-podium-rank{ font-size:170px; opacity:.2; }

.tt-podium-card > img{
    position:relative;
    width:min(100%,190px);
    aspect-ratio:1;
    object-fit:cover;
    border-radius:14px;
    background:#0e202b;
    box-shadow:0 16px 40px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08);
}

.tt-rank-1 > img{
    width:min(100%,250px);
    box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 38px color-mix(in srgb,var(--st-c) 40%,transparent);
}

.tt-podium-info{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:0;
}

.tt-podium-info strong{
    font:800 20px/1.2 "Space Grotesk",sans-serif;
    overflow-wrap:anywhere;
}

.tt-rank-1 .tt-podium-info strong{ font-size:26px; }

.tt-podium-info span{ font-size:14px; color:var(--t-muted); overflow-wrap:anywhere; }

.tt-podium-info small{
    font:700 11px/1 "Space Grotesk",sans-serif;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--t-dim);
}

.tt-podium-card .st-actions{ position:relative; justify-content:center; }


/* ---------- Liste ---------- */

.tt-list{
    list-style:none;
    margin:0;
    padding:6px 22px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--t-line);
    border-radius:18px;
}

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

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

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

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

.tt-row > img{
    width:56px;
    height:56px;
    border-radius:8px;
    object-fit:cover;
    background:#0e202b;
}

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

.tt-row-info strong{ font-size:15px; font-weight:700; line-height:1.3; overflow-wrap:anywhere; }

.tt-row-info span{ font-size:13px; color:var(--t-muted); overflow-wrap:anywhere; }

.tt-row-plays{
    font:700 11px/1 "Space Grotesk",sans-serif;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--t-dim);
    white-space:nowrap;
}

.tt-updated{
    margin:22px 0 0;
    text-align:center;
    font-size:12px;
    color:var(--t-dim);
}


/* ---------- Mobile ---------- */

@media(max-width:860px){
    .tt-podium{ grid-template-columns:1fr; }
    .tt-rank-1{ order:1; }
    .tt-rank-2{ order:2; }
    .tt-rank-3{ order:3; }
    .tt-podium-card > img{ width:min(100%,200px); }
    .tt-rank-1 > img{ width:min(100%,240px); }
}

@media(max-width:700px){
    .tt-hero{ padding:56px 16px 28px; }
    .tt-inner{ width:calc(100% - 32px); padding-bottom:60px; }
    .tt-tab{ padding:11px 20px; }
    .tt-list{ padding:4px 14px; }
    .tt-row{ grid-template-columns:24px 44px minmax(0,1fr); gap:12px; }
    .tt-row > img{ width:44px; height:44px; }
    .tt-row-plays{ display:none; }
    .tt-row .st-actions{ grid-column:3; margin-top:2px; }
}