@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=Manrope:wght@600;700;800&display=swap');
:root{--bg:#07070b;--panel:rgba(17,17,25,.82);--ink:#f7f5f2;--muted:#94929e;--lime:#d9ff43;--pink:#ff4e88;--purple:#7d68ff}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;overflow:hidden}
body{min-height:100vh;background:radial-gradient(circle at 12% 18%,rgba(255,78,136,.13),transparent 30%),radial-gradient(circle at 85% 80%,rgba(125,104,255,.16),transparent 34%),#07070b}
.ambient{position:fixed;inset:-20%;pointer-events:none;filter:blur(90px);opacity:.42}.ambient i{position:absolute;width:34vw;height:34vw;border-radius:50%;animation:drift 13s ease-in-out infinite alternate}
.ambient i:nth-child(1){left:3%;top:8%;background:var(--pink)}.ambient i:nth-child(2){right:1%;top:20%;background:var(--purple);animation-delay:-5s}.ambient i:nth-child(3){left:40%;bottom:-10%;background:rgba(217,255,67,.55);animation-delay:-9s}
@keyframes drift{to{transform:translate(6vw,4vh) scale(1.25)}}
header{height:88px;position:relative;z-index:4;display:flex;align-items:center;gap:24px;padding:0 clamp(28px,4vw,68px);border-bottom:1px solid rgba(255,255,255,.07);background:rgba(7,7,11,.58);backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:12px;font:800 clamp(15px,1.5vw,22px) 'Manrope';letter-spacing:-.02em}.brand b{padding:5px 8px;border-radius:5px;background:var(--lime);color:#11130b;font-size:10px;letter-spacing:.12em}
.equalizer{width:27px;height:27px;display:flex;align-items:flex-end;justify-content:center;gap:3px;transform:rotate(-10deg)}.equalizer i{width:5px;border-radius:4px;background:var(--lime);animation:bounce .8s ease-in-out infinite alternate}
.equalizer i:nth-child(1){height:11px}.equalizer i:nth-child(2){height:24px;animation-delay:-.3s}.equalizer i:nth-child(3){height:17px;animation-delay:-.55s}@keyframes bounce{to{height:7px}}
.status{margin-left:auto;display:flex;align-items:center;gap:8px;color:#b4b2bb;font-size:12px}.status i{width:8px;height:8px;border-radius:50%;background:#ffb35c;box-shadow:0 0 14px #ffb35c}
.status.online i{background:#63e692;box-shadow:0 0 14px #63e692}.status.error i{background:#ff5f78;box-shadow:0 0 14px #ff5f78}
button{border:1px solid rgba(255,255,255,.14);border-radius:7px;padding:10px 14px;background:rgba(255,255,255,.045);color:white;font:700 11px 'Manrope';cursor:pointer}button:hover{border-color:var(--lime);color:var(--lime)}
main{height:calc(100vh - 88px);position:relative;z-index:2;display:grid;grid-template-columns:minmax(300px,31vw) 1fr;gap:clamp(30px,5vw,80px);padding:clamp(28px,4vh,52px) clamp(28px,5vw,84px)}
.now-playing{min-width:0;display:flex;flex-direction:column;justify-content:center}.cover-wrap{position:relative;width:min(100%,390px);aspect-ratio:1;margin-bottom:clamp(24px,4vh,42px)}
.cover{position:relative;width:100%;height:100%;display:grid;place-items:center;border-radius:16px;background:linear-gradient(145deg,#2b2536,#111117);background-position:center;background-size:cover;box-shadow:0 35px 90px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.09);overflow:hidden}
.cover:after{content:"";position:absolute;inset:0;border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.1),transparent 35%,rgba(0,0,0,.2))}.cover span{font-size:80px;color:var(--lime)}
.playing-bars{position:absolute;right:-17px;bottom:22px;width:72px;height:48px;padding:10px;display:flex;align-items:flex-end;justify-content:center;gap:4px;border-radius:10px;background:var(--lime);box-shadow:0 14px 35px rgba(217,255,67,.22)}
.playing-bars i{width:6px;border-radius:4px;background:#15170d;animation:bar .55s ease-in-out infinite alternate}.playing-bars i:nth-child(1){height:12px}.playing-bars i:nth-child(2){height:25px;animation-delay:-.2s}.playing-bars i:nth-child(3){height:18px;animation-delay:-.4s}.playing-bars i:nth-child(4){height:29px;animation-delay:-.1s}.playing-bars.paused i{animation-play-state:paused}@keyframes bar{to{height:7px}}
.eyebrow{margin:0 0 10px;color:var(--lime);font:700 10px 'Manrope';letter-spacing:.18em}h1{margin:0;font:800 clamp(28px,3.1vw,55px)/.98 'Manrope';letter-spacing:-.055em;overflow-wrap:anywhere}
.artist{margin:12px 0 26px;color:#b3b0bb;font-size:clamp(16px,1.35vw,22px)}.timeline>div{height:5px;border-radius:9px;background:rgba(255,255,255,.11);overflow:hidden}.timeline>div span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--pink),var(--lime));box-shadow:0 0 16px rgba(217,255,67,.45)}
.timeline p{display:flex;justify-content:space-between;margin:8px 0 0;color:#777581;font-size:10px}.sync-badge{align-self:flex-start;margin:18px 0 0;padding:7px 10px;border:1px solid rgba(255,255,255,.09);border-radius:99px;color:#777581;font-size:9px;text-transform:uppercase;letter-spacing:.09em}
.lyrics-stage{min-width:0;position:relative;display:flex;flex-direction:column;overflow:hidden}.lyrics-head{min-height:58px;display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.lyrics-head span{color:#74727c;font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.lyrics-tools{display:flex;align-items:center;justify-content:flex-end;gap:14px}.sync-controls{display:flex;gap:5px}.sync-controls button{padding:6px 9px;border-radius:99px;font-size:9px;white-space:nowrap}.sync-controls #lyricsOffset{min-width:92px;color:var(--lime);border-color:rgba(217,255,67,.22)}
.lyrics-viewport{position:relative;flex:1;overflow:hidden;mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 84%,transparent 100%)}.lyrics{position:absolute;left:0;right:0;top:0;padding:42vh 2vw;transform:translateY(0);transition:transform .28s cubic-bezier(.22,.75,.24,1);will-change:transform}
.lyric-line{margin:0 0 clamp(18px,2.8vh,38px);color:rgba(247,245,242,.2);font:800 clamp(25px,3.35vw,62px)/1.08 'Manrope';letter-spacing:-.045em;transition:color .32s,transform .32s,opacity .32s;transform-origin:left center}
.lyric-line.past{color:rgba(247,245,242,.09)}.lyric-line.active{color:var(--lime);text-shadow:0 0 34px rgba(217,255,67,.2);transform:scale(1.025)}.lyric-line.next{color:rgba(247,245,242,.58)}.lyrics.plain .lyric-line{font-size:clamp(22px,2.5vw,43px);color:rgba(247,245,242,.7)}
.message{min-height:40vh;display:grid;place-content:center;text-align:center;gap:12px}.message strong{font:800 clamp(35px,5vw,80px)/.95 'Manrope';letter-spacing:-.06em}.message span{color:#96949e;font-size:clamp(14px,1.4vw,22px)}
.attribution{position:absolute;right:0;bottom:0;color:#686670;font-size:9px;text-decoration:none}.idle{position:fixed;z-index:3;inset:88px 0 0;display:none;place-content:center;text-align:center;background:radial-gradient(circle,rgba(125,104,255,.15),transparent 42%)}.idle.show{display:grid}
.microphone{width:110px;height:110px;margin:0 auto 30px;display:grid;place-items:center;border-radius:50%;background:var(--lime);color:#111;font-size:52px;box-shadow:0 0 80px rgba(217,255,67,.18);animation:idlePulse 1.8s ease-in-out infinite alternate}@keyframes idlePulse{to{transform:scale(1.06);box-shadow:0 0 110px rgba(217,255,67,.33)}}
.idle h2{margin:0;font:800 clamp(44px,6vw,94px)/.9 'Manrope';letter-spacing:-.065em}.idle p:last-child{margin:20px 0 0;color:#9996a2;font-size:clamp(15px,1.5vw,22px)}
@media(max-width:850px){header{height:70px;padding:0 18px}.brand>span:nth-child(2){display:none}.status span{display:none}main{height:calc(100vh - 70px);grid-template-columns:1fr;padding:20px}.now-playing{display:grid;grid-template-columns:105px 1fr;grid-template-rows:auto auto auto;gap:5px 18px;justify-content:initial}.cover-wrap{grid-row:1/4;width:105px;margin:0}.playing-bars{display:none}.now-playing .eyebrow{margin:6px 0 0}.now-playing h1{font-size:27px}.artist{margin:2px 0 4px}.timeline,.sync-badge{display:none}.lyrics-stage{min-height:0}.lyrics-head{min-height:48px}.lyrics-head>p,.lyrics-tools>span{display:none}.sync-controls button{padding:6px 8px}.lyric-line{font-size:clamp(24px,7vw,42px)}.idle{inset:70px 0 0}}
body.no-party main{display:none}

/* Même fond disco que l’écran Playlist TV. */
body{background:#070711}
.ambient{inset:-12vmax;z-index:0;opacity:1;filter:none;overflow:hidden;background:radial-gradient(circle at 18% 22%,rgba(255,78,136,.48),transparent 26%),radial-gradient(circle at 80% 28%,rgba(109,91,245,.5),transparent 27%),radial-gradient(circle at 48% 82%,rgba(217,255,67,.3),transparent 30%),linear-gradient(135deg,#070711,#130c22 48%,#07151a);animation:siteDiscoDrift 12s ease-in-out infinite alternate}
.ambient:before{content:"";position:absolute;width:110vmax;height:110vmax;left:50%;top:50%;transform:translate(-50%,-50%);background:conic-gradient(from 0deg,transparent 0 9%,rgba(255,78,136,.2) 10% 13%,transparent 14% 28%,rgba(93,169,255,.22) 29% 32%,transparent 33% 49%,rgba(217,255,67,.18) 50% 53%,transparent 54% 100%);filter:blur(12px);animation:siteDiscoSpin 24s linear infinite}
.ambient:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(to bottom,transparent,black 28%,black 72%,transparent);transform:perspective(500px) rotateX(62deg) scale(1.5) translateY(22%)}
.ambient i{width:18vmax;height:18vmax;filter:blur(45px);opacity:.55;animation:siteDiscoPulse 7s ease-in-out infinite alternate}
.ambient i:nth-child(1){left:8%;right:auto;top:18%;background:#ff4e88}.ambient i:nth-child(2){right:6%;left:auto;top:9%;background:#6d5bf5;animation-delay:-2s}.ambient i:nth-child(3){left:38%;right:auto;top:auto;bottom:4%;background:#d9ff43;animation-delay:-4s}.ambient i:nth-child(4){right:24%;bottom:20%;background:#2dd4bf;animation-delay:-5s}
@keyframes siteDiscoDrift{to{filter:hue-rotate(28deg) saturate(1.18);transform:scale(1.04)}}@keyframes siteDiscoSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes siteDiscoPulse{to{transform:translate(8vw,5vh) scale(1.35);opacity:.8}}

/* QR code permanent dans le bandeau karaoké */
.karaoke-screen-qr{display:flex;align-items:center;gap:8px;padding:5px 9px 5px 5px;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:rgba(255,255,255,.045)}
.karaoke-screen-qr img{display:block;width:52px;height:52px;padding:3px;border-radius:7px;background:#fff}
.karaoke-screen-qr span,.karaoke-screen-qr b{display:block;font-family:'Manrope',sans-serif}
.karaoke-screen-qr span{color:#8f8e99;font-size:7px;font-weight:700;letter-spacing:.12em;line-height:1.25}
.karaoke-screen-qr b{margin-top:2px;color:var(--lime);font-size:9px}
@media(max-width:850px){.karaoke-screen-qr span{display:none}.karaoke-screen-qr{padding:4px}.karaoke-screen-qr img{width:46px;height:46px}}

/* Même écran d’attente plein écran, QR conservé */
body.no-party header{position:fixed;inset:0 0 auto;z-index:4;border:0;background:transparent;backdrop-filter:none;pointer-events:none}
body.no-party header>:not(.karaoke-screen-qr):not(.karaoke-clock){display:none!important}
body.no-party .karaoke-screen-qr{display:flex;margin-left:auto;pointer-events:auto}
body.no-party .idle{inset:0;z-index:3}

.karaoke-clock{min-width:76px;color:#f7f5f2;text-align:right;font:800 clamp(22px,2.5vw,34px) 'Manrope';letter-spacing:-.05em}
body.no-party header>:not(.karaoke-screen-qr):not(.karaoke-clock){display:none!important}
body.no-party .karaoke-clock{display:block!important}