@import url('https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@400;900&family=Raleway:wght@400;500;600;700&display=swap');

/* Écrans KIOSQUE plein écran (appairage + player). Le back-office utilise admin.css (vrai CSS signage). */
:root {
    --brun-fonce:#553421; --brun-tres-fonce:#402611; --sable-clair:#ffedc4; --sable-dore:#f2d49c;
    --corail:#e96646; --corail-fonce:#cf5039; --ok:#6c974c;
    --font-display:"Londrina Solid",Georgia,serif; --font-body:"Raleway",-apple-system,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);-webkit-font-smoothing:antialiased}
h1{font-family:var(--font-display);font-weight:900}
.beta-badge{display:inline-block;font-family:var(--font-display);font-size:.78rem;letter-spacing:1px;
    background:var(--corail);color:#fff;padding:3px 12px;border-radius:999px;box-shadow:0 2px 0 var(--corail-fonce)}
.btn-kiosk{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-body);font-weight:700;border:0;
    border-radius:12px;cursor:pointer;text-decoration:none;background:var(--corail);color:#fff;
    box-shadow:0 3px 0 var(--corail-fonce);font-size:1.15rem;padding:.9rem 1.8rem}
.btn-kiosk:hover{background:var(--corail-fonce)}

.pair-body{display:grid;place-items:center;min-height:100vh;padding:2rem;
    background:radial-gradient(circle at 50% 30%,var(--brun-fonce),var(--brun-tres-fonce));color:var(--sable-clair);text-align:center}
.pair-card{border:1.5px dashed rgba(255,237,196,.4);border-radius:18px;padding:2.4rem;max-width:480px;width:100%;background:rgba(255,255,255,.04)}
.pair-kicker{margin:1.2rem 0 .3rem;font-weight:600;color:var(--sable-dore);display:inline-flex;align-items:center;gap:.5rem}
.pair-kicker .dot{width:9px;height:9px;border-radius:50%;background:var(--corail);animation:pulse 1.4s infinite}
.pair-code{font-family:var(--font-display);font-size:3.4rem;letter-spacing:.4rem;color:#fff;margin:.4rem 0}
.pair-msg{color:rgba(255,237,196,.75);font-size:.95rem}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.player-body{background:radial-gradient(circle at 50% 25%,var(--brun-fonce),var(--brun-tres-fonce));color:var(--sable-clair);min-height:100vh}
.start-overlay{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:1rem;text-align:center;padding:2rem}
.start-logo{width:120px;opacity:.92;margin-bottom:.4rem}
.start-overlay h1{color:#fff;font-size:2rem;margin:.3rem 0}
.start-hint{color:rgba(255,237,196,.6);font-size:.85rem;max-width:340px}
.player-stage{min-height:100vh;display:grid;align-content:center;justify-items:center;gap:1.4rem;padding:2rem;text-align:center}
.player-status{position:fixed;top:1rem;left:1rem;display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:rgba(255,237,196,.7)}
.net-dot{width:10px;height:10px;border-radius:50%;background:#999}
.net-dot.is-online{background:var(--ok)}
.net-dot.is-offline{background:var(--corail)}
.np-wrap{max-width:720px}
.np-label{text-transform:uppercase;letter-spacing:2px;font-size:.75rem;color:var(--sable-dore)}
.np-title{font-family:var(--font-display);font-size:2.6rem;color:#fff;line-height:1.1;margin:.4rem 0}
.np-playlist{color:rgba(255,237,196,.72);font-size:1.1rem}
.np-vol{color:rgba(255,237,196,.82);font-size:.95rem}
.np-vol strong{color:#fff}