:root {
            --ck-orange: #ff4e00;
            --ck-orange-light: #ff7a1a;
            --ck-ink: #08090b;
            --ck-panel: #121419;
            --ck-panel-hover: #181b21;
            --ck-line: rgba(255, 255, 255, .09);
            --ck-white: #fff;
            --ck-muted: #aeb3bd;
        }

        * { box-sizing: border-box; }

        .top40-shell {
            width: min(1180px, 100%);
            margin: 0 auto;
            padding: clamp(24px, 5vw, 64px) clamp(14px, 3vw, 32px) 56px;
        }

        .top40-hero {
            position: relative;
            overflow: hidden;
            min-height: 210px;
            display: flex;
            align-items: flex-end;
            padding: clamp(24px, 5vw, 54px);
            margin-bottom: 24px;
            border: 1px solid rgba(255, 255, 255, .11);
            border-radius: 26px;
            background:
                linear-gradient(100deg, rgba(0, 0, 0, .86), rgba(0, 0, 0, .20)),
                repeating-linear-gradient(120deg, transparent 0 16px, rgba(255, 255, 255, .025) 17px 18px),
                linear-gradient(135deg, #17191f, #090a0c);
            box-shadow: 0 26px 70px rgba(0, 0, 0, .34);
        }

        .top40-hero::after {
            content: "40";
            position: absolute;
            right: clamp(-14px, 2vw, 30px);
            top: 50%;
            translate: 0 -55%;
            font-size: clamp(140px, 26vw, 300px);
            line-height: .8;
            font-weight: 900;
            letter-spacing: -.11em;
            color: transparent;
            -webkit-text-stroke: 2px rgba(255, 78, 0, .28);
            pointer-events: none;
        }

        .top40-hero-copy { position: relative; z-index: 1; }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
            color: var(--ck-orange-light);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .16em;
            text-transform: uppercase;
        }

        .eyebrow::before {
            content: "";
            width: 26px;
            height: 3px;
            border-radius: 3px;
            background: var(--ck-orange);
        }

        .top40-shell h1 {
            margin: 0;
            max-width: 760px;
            font-size: clamp(36px, 7vw, 78px);
            line-height: .95;
            letter-spacing: -.055em;
            text-transform: uppercase;
        }

        .top40-hero p {
            margin: 17px 0 0;
            max-width: 600px;
            color: #d7d9de;
            font-size: clamp(15px, 2vw, 18px);
        }

        .status-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            margin: 0 3px 22px;
            color: var(--ck-muted);
            font-size: 12px;
        }

        .top40-live-dot {
            display: inline-block;
            width: 7px;
            height: 7px;
            margin-right: 7px;
            border-radius: 50%;
            background: var(--ck-orange);
            box-shadow: 0 0 0 5px rgba(255, 78, 0, .12);
        }

        .podium {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 16px;
            margin-bottom: 28px;
        }

        .podium-card {
            position: relative;
            overflow: hidden;
            min-height: 370px;
            display: flex;
            align-items: flex-end;
            border: 1px solid var(--ck-line);
            border-radius: 22px;
            background:
                radial-gradient(circle at 65% 22%, rgba(255, 78, 0, .16), transparent 38%),
                repeating-linear-gradient(120deg, transparent 0 15px, rgba(255, 255, 255, .025) 16px 17px),
                var(--ck-panel);
            isolation: isolate;
            box-shadow: 0 18px 42px rgba(0, 0, 0, .25);
        }

        .podium-card:first-child {
            border-color: rgba(255, 78, 0, .48);
        }

        .podium-card::before {
            content: "CK";
            position: absolute;
            top: 42%;
            left: 50%;
            translate: -50% -50%;
            z-index: -1;
            color: rgba(255, 255, 255, .075);
            font-size: clamp(92px, 12vw, 150px);
            font-weight: 950;
            letter-spacing: -.12em;
        }

        .podium-cover {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -2;
        }

        .podium-card::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            background: linear-gradient(to top, rgba(4, 5, 7, .98) 4%, rgba(4, 5, 7, .72) 43%, rgba(4, 5, 7, .04) 76%);
        }

        .podium-rank {
            position: absolute;
            top: 14px;
            left: 14px;
            min-width: 49px;
            height: 49px;
            display: grid;
            place-items: center;
            padding: 0 12px;
            border-radius: 14px;
            background: var(--ck-orange);
            color: white;
            font-size: 23px;
            font-weight: 900;
            box-shadow: 0 9px 24px rgba(255, 78, 0, .32);
        }

        .podium-info { padding: 22px; }

        .artist {
            color: var(--ck-orange-light);
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .05em;
            text-transform: uppercase;
        }

        .podium-title {
            margin-top: 6px;
            font-size: clamp(20px, 3vw, 28px);
            font-weight: 800;
            line-height: 1.08;
            letter-spacing: -.025em;
        }

        .ranking {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 11px;
        }

        .track {
            min-width: 0;
            display: grid;
            grid-template-columns: 54px 76px minmax(0, 1fr);
            align-items: center;
            gap: 14px;
            min-height: 94px;
            padding: 9px 16px 9px 10px;
            border: 1px solid var(--ck-line);
            border-radius: 16px;
            background: rgba(18, 20, 25, .86);
            transition: transform .18s ease, background .18s ease, border-color .18s ease;
        }

        .track:hover {
            transform: translateY(-2px);
            background: var(--ck-panel-hover);
            border-color: rgba(255, 78, 0, .30);
        }

        .rank {
            color: #e6e7e9;
            font-size: 23px;
            font-weight: 900;
            text-align: center;
            font-variant-numeric: tabular-nums;
        }

        .cover-wrap {
            position: relative;
            width: 76px;
            aspect-ratio: 1;
            overflow: hidden;
            border-radius: 11px;
            background: linear-gradient(135deg, #2a2d34, #15171b);
        }

        .cover-wrap::before {
            content: "CK";
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            padding-right: 4px;
            color: rgba(255, 255, 255, .24);
            font-size: 23px;
            font-weight: 900;
            letter-spacing: -.10em;
            background:
                radial-gradient(circle at 75% 15%, rgba(255, 78, 0, .55), transparent 48%),
                linear-gradient(135deg, #252830, #111216);
        }

        .cover {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }

        .track-copy { min-width: 0; }

        .track-title {
            margin-top: 4px;
            overflow: hidden;
            color: #f7f7f8;
            font-size: 16px;
            font-weight: 750;
            line-height: 1.25;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .error {
            padding: 28px;
            border: 1px solid rgba(255, 78, 0, .35);
            border-radius: 18px;
            background: rgba(255, 78, 0, .08);
            text-align: center;
        }

        .footer-note {
            margin: 32px 0 0;
            color: #838994;
            font-size: 12px;
            text-align: center;
        }

        @media (max-width: 820px) {
            .podium { grid-template-columns: 1fr; }
            .podium-card { min-height: 280px; }
            .podium-card:not(:first-child) { min-height: 230px; }
            .ranking { grid-template-columns: 1fr; }
        }

        @media (max-width: 480px) {
            .top40-shell { padding-inline: 10px; }
            .top40-hero { min-height: 190px; border-radius: 19px; }
            .top40-hero::after { opacity: .65; }
            .track {
                grid-template-columns: 38px 62px minmax(0, 1fr);
                gap: 10px;
                min-height: 80px;
                padding-right: 10px;
            }
            .cover-wrap { width: 62px; }
            .rank { font-size: 19px; }
            .track-title { font-size: 14px; }
            .artist { font-size: 11px; }
        }

        @media (prefers-reduced-motion: reduce) {
            .track { transition: none; }
        }
    
/* CK RADIO : harmonisation avec le site principal */
.top40-shell{padding-top:42px;padding-bottom:68px}
.top40-hero{background:linear-gradient(100deg, rgba(0,0,0,.78), rgba(22,11,31,.30)),linear-gradient(140deg,#201324,#0d0d12);border-color:#403342}
.top40-hero::after{ -webkit-text-stroke:2px rgba(246,109,157,.28)}
.top40-shell .eyebrow,.top40-shell .artist{color:#f2a4cb}
.top40-shell .eyebrow::before,.top40-shell .top40-live-dot{background:#f76d9d}
.top40-shell .podium-card:first-child{border-color:rgba(247,109,157,.48)}
.top40-shell .podium-rank{background:linear-gradient(120deg,#f76297,#a981ff);color:#160e1b;box-shadow:none}
.top40-shell .track:hover{border-color:#b87caf}
.top40-shell .status-row{margin-top:18px}
.top40-shell .track-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.top40-shell .ranking{margin-top:10px}
.top40-shell .cover,.top40-shell .podium-cover{background:#1b1623}
.top40-shell .top40-back{display:inline-flex;margin-bottom:18px;color:#f3a5d0;font-size:14px;font-weight:700}
.top40-shell .top40-back:hover{text-decoration:underline}
.top40-shell .top40-intro{max-width:700px}
@media(max-width:760px){.top40-shell{padding-top:24px}.top40-shell .podium{grid-template-columns:1fr}.top40-shell .ranking{grid-template-columns:1fr}}