/*
Theme Name: TOP80 Radio Neon Maquette
Version: 1.2
*/

*{box-sizing:border-box}

body{
    margin:0;
    padding:0;
    background:#05000d;
    color:#fff;
    font-family:Arial,Helvetica,sans-serif;
}

a{color:inherit;text-decoration:none}

.header{
    height:100px;
    padding:0 6%;
    display:flex;
    align-items:center;
    background:#05000d;
    border-bottom:1px solid rgba(255,53,223,.20);
}

.brand{min-width:220px}

.top80-logo{
    max-width:180px;
    max-height:80px;
    display:block;
}

.brand span{font-size:35px}

.brand strong{
    display:block;
    font-size:75px;
    line-height:55px;
    color:#ff35df;
    text-shadow:0 0 15px #ff35df,0 0 35px #ff35df;
}

.brand small{
    color:#ff35df;
    letter-spacing:8px;
}

.top80-menu{
    flex:1;
    display:flex;
}

.top80-menu .menu{
    display:flex;
    align-items:center;
    gap:40px;
    list-style:none;
    margin:0;
    padding:0;
}

.menu-left{justify-content:flex-start}
.menu-center{justify-content:center}
.menu-right{justify-content:flex-end}

.top80-menu li{
    list-style:none;
    position:relative;
}

.top80-menu a{
    color:#fff;
    font-size:14px;
    font-weight:600;
    letter-spacing:1.5px;
    text-transform:uppercase;
    transition:.3s;
}

.top80-menu a:hover,
.top80-menu .current-menu-item>a{
    color:#ff35df;
    text-shadow:0 0 10px #ff35df;
}

.hero{
    min-height:720px;
    padding:70px 5%;
    display:grid;
    grid-template-columns:minmax(280px,.9fr) minmax(440px,1.25fr) minmax(300px,.9fr);
    gap:42px;
    align-items:center;
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 52% 42%,rgba(255,44,220,.22),transparent 24%),
        radial-gradient(circle at 52% 46%,rgba(58,48,255,.22),transparent 46%),
        linear-gradient(135deg,#030008 0%,#120021 48%,#05000d 100%);
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,transparent 0%,rgba(255,53,223,.04) 47%,transparent 100%);
}

.left,.center,.right{
    position:relative;
    z-index:2;
}

.live{
    color:#ff35df;
    font-weight:700;
    letter-spacing:1.5px;
}

.hero h1{
    margin:24px 0;
    font-size:64px;
    line-height:1.02;
}

.hero h1 b{
    color:#ff35df;
    text-shadow:0 0 18px rgba(255,53,223,.8);
}

.hero p{
    color:#ddd;
    font-size:18px;
    line-height:1.55;
}

.buttons{margin-top:28px}

button{
    padding:16px 28px;
    margin:8px 8px 8px 0;
    border:0;
    border-radius:40px;
    background:#ff35df;
    color:#fff;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}

button:hover{
    transform:translateY(-1px);
    box-shadow:0 0 25px #ff35df;
}

button.dark{
    background:#11001b;
    border:1px solid #b14cff;
}

/* Pochette réduite */
.center{
    text-align:center;
    min-width:0;
}

.live-card{
    position:relative;
    width:min(100%,560px);
    margin:0 auto;
    padding:24px 78px 58px;
    isolation:isolate;
}

.live-card::before{
    content:"";
    position:absolute;
    left:50%;
    top:44%;
    width:500px;
    height:390px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,53,223,.28),rgba(80,36,255,.14) 48%,transparent 72%);
    filter:blur(26px);
    z-index:-3;
}

.cover-neon-frame{
    position:relative;
    z-index:4;
    padding:6px;
    border-radius:30px;
    background:linear-gradient(135deg,#53bfff 0%,#7659ff 22%,#d43dff 50%,#ff37cf 72%,#ff66dc 100%);
    box-shadow:
        0 0 8px #5bbfff,
        0 0 18px #7956ff,
        0 0 34px rgba(210,61,255,.88),
        0 0 62px rgba(255,55,207,.55);
}

.cover-neon-frame::before{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius:38px;
    border:2px solid rgba(255,255,255,.72);
    box-shadow:
        0 0 10px #7fd2ff,
        0 0 24px #9a5cff,
        0 0 42px rgba(255,55,207,.8);
    pointer-events:none;
}

.cover-neon-inner{
    padding:6px;
    border-radius:24px;
    background:#05000d;
    box-shadow:inset 0 0 20px rgba(255,53,223,.35);
}

.cover-neon-inner img{
    display:block;
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:18px;
    box-shadow:0 18px 38px rgba(0,0,0,.72);
}

.eq{
    position:absolute;
    top:50%;
    z-index:1;
    display:flex;
    align-items:center;
    gap:6px;
    height:170px;
    transform:translateY(-42%);
}

.eq-left{left:8px}
.eq-right{right:8px}

.eq span{
    width:6px;
    height:var(--h);
    border-radius:7px;
    background:linear-gradient(to top,#315dff,#8a45ff 46%,#ff3cda);
    box-shadow:0 0 6px #416dff,0 0 13px #8748ff,0 0 18px rgba(255,60,218,.8);
    animation:top80Eq 1.15s ease-in-out infinite alternate;
    transform-origin:center;
}

.eq span:nth-child(2){animation-delay:.10s}
.eq span:nth-child(3){animation-delay:.20s}
.eq span:nth-child(4){animation-delay:.05s}
.eq span:nth-child(5){animation-delay:.28s}
.eq span:nth-child(6){animation-delay:.14s}
.eq span:nth-child(7){animation-delay:.34s}

@keyframes top80Eq{
    from{transform:scaleY(.78);opacity:.72}
    to{transform:scaleY(1.08);opacity:1}
}

.live-label{
    position:absolute;
    left:50%;
    bottom:8px;
    z-index:7;
    transform:translateX(-50%);
    padding:10px 22px;
    white-space:nowrap;
    border:2px solid #ff42dc;
    border-radius:999px;
    background:rgba(17,0,27,.92);
    color:#fff;
    font-size:13px;
    font-weight:800;
    letter-spacing:.5px;
    text-transform:uppercase;
    text-shadow:0 0 8px rgba(255,66,220,.8);
    box-shadow:0 0 7px #ff42dc,0 0 18px rgba(255,66,220,.8),inset 0 0 12px rgba(255,66,220,.16);
}

.live-label::before,
.live-label::after{
    content:"";
    position:absolute;
    top:50%;
    width:60px;
    height:2px;
    background:linear-gradient(90deg,transparent,#ff42dc);
    box-shadow:0 0 8px #ff42dc;
}

.live-label::before{right:100%;margin-right:12px}
.live-label::after{left:100%;margin-left:12px;transform:scaleX(-1)}

.track-info{
    margin-top:24px;
    position:relative;
    z-index:8;
}

.track-artist{
    color:#ff8ce9;
    font-size:27px;
    line-height:1.1;
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;
    text-shadow:0 0 7px rgba(255,140,233,.85),0 0 18px rgba(255,53,223,.55);
}

.track-title{
    margin-top:9px;
    color:#fff;
    font-size:28px;
    line-height:1.12;
    font-weight:900;
    letter-spacing:.4px;
    text-transform:uppercase;
    text-shadow:0 0 8px rgba(255,255,255,.28),0 0 18px rgba(255,53,223,.32);
}

/* Vote */
.vote-panel{
    width:100%;
    max-width:390px;
    margin:0 auto;
    padding:30px 24px 24px;
    text-align:center;

    background:transparent;

    border:none;

    border-radius:0;

    box-shadow:none;
}

.vote-title{
    margin:0;
    color:#fff;
    font-size:20px;
    font-weight:900;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.vote-title-line{
    width:64px;
    height:3px;
    margin:12px auto 24px;
    border-radius:999px;
    background:#ff35df;
    box-shadow:0 0 8px #ff35df,0 0 18px rgba(255,53,223,.9);
}

.vote-buttons{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
}

.vote-circle{
    width:126px;
    height:126px;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:radial-gradient(circle,rgba(28,0,43,.98) 0%,rgba(7,0,18,.98) 72%);
}

.vote-like{
    border:2px solid #ff3bd8;
    box-shadow:0 0 8px #ff3bd8,0 0 22px rgba(255,59,216,.85),inset 0 0 22px rgba(255,59,216,.12);
}

.vote-dislike{
    border:2px solid #42a9ff;
    box-shadow:0 0 8px #42a9ff,0 0 22px rgba(66,169,255,.88),inset 0 0 22px rgba(66,169,255,.12);
}

.vote-heart{
    display:block;
    color:#ff7be8;
    font-size:54px;
    line-height:.8;
    text-shadow:0 0 7px currentColor,0 0 18px currentColor;
}

.vote-dislike .vote-heart{color:#73c6ff}

.vote-heart-broken{
    position:relative;
}

.vote-heart-broken::after{
    content:"";
    position:absolute;
    top:5px;
    left:50%;
    width:3px;
    height:40px;
    background:#73c6ff;
    transform:translateX(-50%) rotate(18deg);
    clip-path:polygon(0 0,100% 0,35% 38%,100% 55%,25% 100%,0 100%,60% 58%,0 42%);
    box-shadow:0 0 6px #73c6ff,0 0 12px #73c6ff;
}

.vote-label{
    margin-top:13px;
    color:#fff;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
}

.vote-count{
    margin-top:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:5px;
    color:#fff;
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
}

.vote-count strong{
    color:#ff4fdc;
    font-size:18px;
    text-shadow:0 0 7px #ff4fdc,0 0 15px rgba(255,79,220,.75);
}

.vote-star{
    margin:0 4px;
    font-size:24px;
}

.vote-star-pink{color:#ff4fdc;text-shadow:0 0 7px #ff4fdc}
.vote-star-blue{color:#4db7ff;text-shadow:0 0 7px #4db7ff}

.ranking-button{
    min-height:58px;
    margin-top:24px;
    padding:0 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    color:#ff71e5;
    border:2px solid #ff3bd8;
    border-radius:10px;
    background:linear-gradient(135deg,rgba(255,53,223,.08),rgba(41,17,87,.12));
    font-size:13px;
    font-weight:900;
    text-transform:uppercase;
    box-shadow:0 0 7px rgba(255,59,216,.7),0 0 18px rgba(255,59,216,.30),inset 0 0 15px rgba(255,59,216,.08);
}

.ranking-icon{
    height:28px;
    display:flex;
    align-items:flex-end;
    gap:3px;
}

.ranking-icon i{
    width:4px;
    border-radius:3px;
    background:#ff4fdc;
    box-shadow:0 0 6px #ff4fdc;
}

.ranking-icon i:nth-child(1){height:10px}
.ranking-icon i:nth-child(2){height:18px}
.ranking-icon i:nth-child(3){height:26px}
.ranking-icon i:nth-child(4){height:15px}

.ranking-arrow{
    color:#ff71e5;
    font-size:38px;
    line-height:.7;
    text-shadow:0 0 8px #ff4fdc;
}

.vote-pulse{
    position:relative;
    height:40px;
    margin-top:24px;
}

/* Ligne gauche */
.vote-pulse::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;

    width:44%;
    height:2px;

    transform:translateY(-50%);

    background:linear-gradient(to right,#ff3bd8,#ff3bd8);

    box-shadow:
        0 0 8px #ff3bd8,
        0 0 16px #ff3bd8;
}

/* Ligne droite */
.vote-pulse::after{
    content:"";
    position:absolute;
    right:0;
    top:50%;

    width:44%;
    height:2px;

    transform:translateY(-50%);

    background:linear-gradient(to left,#ff3bd8,#ff3bd8);

    box-shadow:
        0 0 8px #ff3bd8,
        0 0 16px #ff3bd8;
}

/* Losange */
.vote-pulse span{
    position:absolute;
    left:50%;
    top:50%;

    width:22px;
    height:22px;

    transform:translate(-50%,-50%) rotate(45deg);

    background:#12001d;

    border-left:3px solid #ff3bd8;
    border-bottom:3px solid #ff3bd8;

    box-shadow:
        0 0 10px #ff3bd8,
        0 0 20px #ff3bd8;
}

.player{
    margin:30px;
    padding:30px;
    border-radius:25px;
    text-align:center;
    background:#12001d;
    box-shadow:0 0 25px rgba(255,53,223,.2);
}

.cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin:30px;
}

.cards div{
    padding:30px;
    border-radius:25px;
    text-align:center;
    background:#12001d;
    border:1px solid rgba(255,53,223,.2);
}

@media(max-width:1200px){
    .hero{
        grid-template-columns:1fr;
        text-align:center;
    }

    .left,.right{
        max-width:760px;
        margin:0 auto;
    }
}

@media(max-width:700px){
    .header{
        flex-direction:column;
        height:auto;
        padding:24px;
    }

    .top80-menu .menu{
        flex-direction:column;
        gap:18px;
    }

    .hero{
        padding:50px 18px;
    }

    .hero h1{
        font-size:44px;
    }

    .live-card{
        width:min(100%,430px);
        padding:20px 52px 56px;
    }

    .eq{
        gap:4px;
        transform:translateY(-42%) scale(.72);
    }

    .eq-left{
        left:-15px;
        transform-origin:left center;
    }

    .eq-right{
        right:-15px;
        transform-origin:right center;
    }

    .live-label{
        max-width:90%;
        white-space:normal;
        font-size:11px;
    }

    .live-label::before,
    .live-label::after{
        display:none;
    }

    .track-artist{font-size:24px}
    .track-title{font-size:23px}

    .vote-panel{
        padding:24px 14px;
    }

    .vote-buttons{
        gap:14px;
    }

    .vote-circle{
        width:110px;
        height:110px;
    }

    .vote-heart{
        font-size:46px;
    }

    .cards{
        grid-template-columns:1fr;
    }
}