/* ===== RESET & BASE ===== */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,sans-serif;background:#000;color:#eafff8;overflow-x:hidden;transition:.6s}

/* ===== HUB GLOBAL ===== */
.hub{position:relative;max-width:900px;margin:auto;perspective:800px}
#bg{width:100%;border-radius:12px;transition:.5s}

/* ===== ZONES INTERACTIVES ===== */
.z{position:absolute;cursor:pointer;transition:.25s}
.z:hover{box-shadow:0 0 25px #22c55e,0 0 50px #16a34a inset;border-radius:12px;transform:scale(1.05)}

.z1{top:28%;left:8%;width:25%;height:12%}
.z2{top:28%;left:37%;width:25%;height:12%}
.z3{top:28%;left:66%;width:25%;height:12%}
.z4{top:42%;left:25%;width:50%;height:10%}
.z5{top:60%;left:10%;width:80%;height:25%}

/* ===== EFFETS PREMIUM ===== */
.g{position:absolute;top:0;left:-50%;width:200%;height:100%;
background:linear-gradient(120deg,transparent,rgba(34,255,126,.3),transparent);
animation:slide 6s linear infinite}
@keyframes slide{to{left:100%}}

.pt{position:absolute;top:0;left:0;width:100%;height:100%;
background:url('https://www.transparenttextures.com/patterns/stardust.png');
opacity:.25;animation:stars 30s linear infinite}
@keyframes stars{to{background-position:2000px 2000px}}

.hub:hover{transform:rotateX(2deg) rotateY(2deg)}

/* ===== BOUTONS GLOBAL ===== */
button{border:none;border-radius:20px;padding:6px 10px;cursor:pointer;font-weight:bold}

/* ===== MODE JOUR ===== */
.light{background:#eafff8;color:#000}
.light #bg{filter:brightness(1.1)}

/* ===== KAYLA ===== */
#kayla{position:absolute;bottom:10px;right:10px;background:#22c55e;padding:10px;border-radius:50%;cursor:pointer;box-shadow:0 0 15px #22c55e;animation:pulse 2s infinite}
@keyframes pulse{50%{transform:scale(1.1)}}

/* ===== TOGGLE SON ===== */
#soundToggle{
position:absolute;top:10px;left:10px;
background:#22c55e;color:#000;border-radius:50%;
padding:6px;cursor:pointer;
box-shadow:0 0 10px #22c55e;
}

/* ===== INDICATEUR PROGRESSION ===== */
.progress{
position:fixed;bottom:0;left:0;width:100%;height:6px;
background:#111;z-index:999;
}
.progress-bar{
height:100%;width:0%;
background:linear-gradient(90deg,#22c55e,#0fc);
transition:.3s;
}

/* ===== BOUTON ADD MEDIA ===== */
#addMedia{
position:fixed;bottom:20px;left:20px;
background:#0fc;color:#000;
padding:10px;border-radius:30px;
box-shadow:0 0 15px #0fc;
cursor:pointer;
}

/* ===== ADMIN / LEGAL BLOCK ===== */
.legal-section{max-width:900px;margin:auto;padding:20px;line-height:1.6}
.legal-section h1,.legal-section h2{color:#22c55e;margin:10px 0}

/* ===== OPTIMISATION ===== */
img{max-width:100%;display:block}