/*
Theme Name: ELECTRO Radio
Description: Thème officiel ELECTRO Radio - accueil et player.
Version: 1.2.0
*/
:root{
 --bg:#17191c;
 --surface:#222529;
 --surface2:#292c31;
 --text:#f2f2f0;
 --muted:#9da1a7;
 --accent:#b8a6ff;
 --border:#34383e;
 --radius:26px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
 background:var(--bg);color:var(--text);
 font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
a{color:inherit;text-decoration:none}
.electro-site{min-height:100vh}
.electro-header{
 max-width:1180px;margin:0 auto;padding:28px 24px;
 display:flex;align-items:center;justify-content:space-between
}
.logo{display:flex;align-items:center}.logo img{display:block;width:150px;height:auto;max-height:62px;object-fit:contain}.logo em{font-style:normal;font-weight:400;color:#bfc2c6}
.logo span{font-weight:400;color:#bfc2c6}
.nav{display:flex;gap:24px;color:#aeb2b7;font-size:14px}
.nav a:hover{color:#fff}
.hero{max-width:1180px;margin:0 auto;padding:52px 24px 90px}
.hero-inner{
 position:relative;overflow:hidden;
 background:linear-gradient(145deg,#23262a,#1f2226);
 border:1px solid var(--border);border-radius:32px;
 padding:54px;display:grid;grid-template-columns:minmax(280px,430px) 1fr;
 gap:64px;align-items:center;
 box-shadow:0 28px 80px rgba(0,0,0,.28)
}
.hero-inner:after{
 content:"";position:absolute;width:420px;height:420px;right:-190px;top:-210px;
 border-radius:50%;background:#30343a;opacity:.22;pointer-events:none
}
.cover{
 aspect-ratio:1/1;border-radius:22px;background:#000;
 display:flex;align-items:center;justify-content:center;overflow:hidden;
 box-shadow:0 20px 45px rgba(0,0,0,.28);position:relative;z-index:1
}
.cover img{width:100%;height:100%;object-fit:cover}
.cover-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000}.cover-placeholder img{width:100% !important;height:100% !important;max-width:100% !important;max-height:100% !important;object-fit:contain !important;object-position:center center !important;display:block !important}
.live{font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.kicker{font-size:13px;color:#858a91;margin:12px 0 7px;letter-spacing:.08em}
.track-title{font-size:clamp(36px,5vw,64px);line-height:1.02;margin:0 0 8px;font-weight:750;letter-spacing:-.045em}
.artist{font-size:20px;color:#a9adb3;margin-bottom:34px}
.player-row{display:flex;align-items:center;gap:18px}
.play{
 width:70px;height:70px;border:1px solid #4a4e54;border-radius:50%;
 background:#f1f1ef;color:#151719;font-size:23px;cursor:pointer;
 display:grid;place-items:center;transition:.18s transform,.18s background;
 flex:none
}
.play:hover{transform:scale(1.035);background:#fff}
.volume{flex:1}
.volume input{width:100%;accent-color:#d8d2ff}
.status{margin-top:30px;padding-top:20px;border-top:1px solid var(--border);color:#898e95;font-size:13px}
.site-footer{max-width:1180px;margin:0 auto;padding:0 24px 35px;color:#777c83;font-size:13px}
@media(max-width:800px){
 .electro-header{padding:22px 18px}
 .nav{display:none}
 .hero{padding:20px 14px 50px}
 .hero-inner{grid-template-columns:1fr;padding:24px;gap:30px;border-radius:24px}
 .logo img{width:128px}.track-title{font-size:42px}
}