/* Format retenu : celui de la capture 1920x1080 — contenu centré à largeur
   max (cartes ≤1100px, progression ≤900px), non étiré bord à bord. */
:root{--fond:#0b0e1a;--accent:#4f8cff;--accent2:#9b6bff;--accent3:#2dd4cf;--texte:#eef1ff;--panneau:rgba(10,14,30,.62);--bordure:rgba(255,255,255,.14);--voile:linear-gradient(180deg,rgba(4,6,16,.55),rgba(4,6,16,.35) 45%,rgba(4,6,16,.82))}
*{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}
html,body{height:100%;overflow:hidden}
body{font-family:system-ui,"Segoe UI",Arial,sans-serif;color:var(--texte);background:var(--fond)}
.bg{position:fixed;top:-4%;right:-4%;bottom:-4%;left:-4%;z-index:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.6s ease;animation:kenburns 14s ease-in-out infinite alternate}
.bg.show{opacity:1}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08) translate(-1.5%,1%)}}
.bg.grad-a{background:radial-gradient(60% 80% at 20% 20%,var(--accent2),transparent),radial-gradient(50% 60% at 85% 75%,var(--accent3),transparent),linear-gradient(135deg,var(--fond),#1b1040 55%,#07182e)}
.bg.grad-b{background:radial-gradient(55% 75% at 80% 15%,var(--accent2),transparent),radial-gradient(50% 60% at 15% 85%,var(--accent),transparent),linear-gradient(225deg,var(--fond),#241043 55%,#041e2a)}
.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;background:var(--voile)}
.wrap{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;padding:4vh 4vw 3vh;gap:3vh}
header{text-align:center}
#logo-img{max-height:110px;max-width:60vw}
h1{font-size:48px;font-size:clamp(32px,6vw,72px);letter-spacing:.12em;font-weight:900;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent3));-webkit-background-clip:text;background-clip:text;color:transparent}
.server{font-size:20px;font-size:clamp(16px,2.2vw,26px);font-weight:600;margin-top:.4em}.dot{opacity:.5}.mapline{opacity:.85;margin-top:.3em}
.cards{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;width:1100px;max-width:100%}
.card{background:var(--panneau);border:1px solid var(--bordure);border-radius:16px;padding:18px 22px;min-width:240px;flex:1;max-width:340px;backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.card h2{font-size:17px;margin-bottom:10px}.card li{margin:6px 0 6px 18px;line-height:1.45}.card ul li{list-style:none;margin-left:0}
/* Staff Steam */
.staff-item{display:flex;align-items:center;gap:10px;margin:10px 0!important}
.avatar{width:42px;height:42px;border-radius:50%;flex:none;object-fit:cover;border:2px solid var(--accent)}
.avatar-fallback{display:flex;align-items:center;justify-content:center;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.staff-name{font-weight:700;line-height:1.25}.staff-sub{opacity:.65;font-size:.78em;line-height:1.3;word-break:break-all}
.tip-card p{line-height:1.55;min-height:3em;transition:opacity .4s}
.progress-zone{margin-top:auto;width:900px;max-width:100%;background:var(--panneau);border:1px solid var(--bordure);border-radius:16px;padding:16px 20px;backdrop-filter:blur(8px)}
.status-row{display:flex;justify-content:space-between;gap:12px;font-weight:700}
.status-row.sub{font-weight:400;opacity:.85;font-size:.9em;margin-top:6px}
.bar{height:14px;background:rgba(255,255,255,.14);border-radius:99px;overflow:hidden;margin:10px 0 4px}
#bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent3));transition:width .35s ease}
.controls{display:flex;align-items:center;gap:16px;margin-top:12px}
.controls button{background:rgba(255,255,255,.12);color:var(--texte);border:1px solid var(--bordure);border-radius:10px;padding:6px 12px;cursor:pointer}
.controls input{vertical-align:middle;accent-color:var(--accent)}
#yt-player{position:fixed;width:2px;height:2px;left:-10px;top:-10px;opacity:.01;pointer-events:none}
.noscript{position:fixed;left:0;right:0;bottom:20px;text-align:center;z-index:3}
@media(max-width:700px){.cards{flex-direction:column;align-items:stretch}.card{max-width:none}.tip-card{display:none}}

/* v1.02.008 : controles audio sombres, curseur fin */
.controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.controls[hidden]{display:none}
#mute-btn{background:#161b22;color:#eef1ff;border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:6px 12px;cursor:pointer;font:600 13px system-ui}
#mute-btn:hover{border-color:#4f8cff}
.controls .vol{display:flex;align-items:center;gap:8px;font:600 12px system-ui;color:#aeb8d6}
#volume{-webkit-appearance:none;appearance:none;width:150px;height:4px;border-radius:2px;background:#30363d;outline:none;cursor:pointer;padding:0}
#volume::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:#30363d}
#volume::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:#4f8cff;border:2px solid #0b0e1a;box-shadow:0 0 6px #4f8cff88}
#volume::-moz-range-track{height:4px;border-radius:2px;background:#30363d}
#volume::-moz-range-progress{height:4px;border-radius:2px;background:#4f8cff}
#volume::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#4f8cff;border:2px solid #0b0e1a}
#vol-val{min-width:36px;text-align:right;font-variant-numeric:tabular-nums}
.staff-empty{opacity:.75;font-style:italic;list-style:none!important;margin-left:0!important}