/* Formula G : theme course (noir / bleu / damier). Variables surchargees par config.json (couleurs). */
:root{--fond:#05080f;--accent:#0a6cff;--accent2:#2fa8ff;--accent3:#fff;--texte:#f2f6ff;--panneau:rgba(8,12,22,.86);--bordure:rgba(10,108,255,.55);--voile:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.25) 45%,rgba(0,0,0,.85))}
*{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}
html,body{height:100%;overflow:hidden}
body{font-family:"Arial Narrow","Roboto Condensed","Segoe UI",Arial,sans-serif;color:var(--texte);background:var(--fond)}
.bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease}
.bg.show{opacity:1}
.bg.grad-a,.bg.grad-b{background:
 linear-gradient(115deg,transparent 0 58%,rgba(10,108,255,.22) 58% 62%,transparent 62% 64%,rgba(10,108,255,.12) 64% 66%,transparent 66%),
 repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 2px,transparent 2px 22px),
 radial-gradient(70% 60% at 80% 30%,#021a3a,transparent),linear-gradient(180deg,#0b1020,var(--fond))}
.bg.grad-b{background-position:40px 0}
.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;background:var(--voile)}
.speed{position:fixed;top:0;bottom:0;left:-50%;width:200%;z-index:1;pointer-events:none;opacity:.35;
 background:repeating-linear-gradient(90deg,transparent 0 140px,rgba(255,255,255,.08) 140px 141px,transparent 141px 300px);animation:rush 1.2s linear infinite}
@keyframes rush{from{transform:translateX(0)}to{transform:translateX(-300px)}}
.checker{position:fixed;left:0;right:0;height:18px;z-index:3;
 background-image:linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%),linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%);
 background-color:#000;background-size:18px 18px;background-position:0 0,9px 9px;opacity:.9}
.checker.top{top:0}.checker.bottom{bottom:0}
.wrap{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;padding:5vh 4vw 4vh;gap:2.6vh}
header{text-align:center}
.kicker{display:inline-block;background:var(--accent);color:#fff;font-weight:700;letter-spacing:.35em;text-transform:uppercase;font-size:13px;padding:5px 14px;transform:skewX(-14deg)}
#logo-img{max-height:110px;max-width:60vw}
h1{font-size:64px;font-size:clamp(40px,8vw,104px);font-style:italic;font-weight:900;letter-spacing:.04em;line-height:1;margin-top:.15em;color:#fff;
 text-shadow:6px 6px 0 var(--accent),12px 12px 0 rgba(0,0,0,.6);transform:skewX(-8deg)}
.server{font-size:20px;font-size:clamp(16px,2.1vw,26px);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-top:.6em}
.dot{color:var(--accent);margin:0 .3em}.mapline{opacity:.85;margin-top:.3em;text-transform:uppercase;letter-spacing:.06em}
.cards{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;width:1120px;max-width:100%}
.card{background:var(--panneau);border-left:6px solid var(--accent);border-top:1px solid var(--bordure);padding:16px 22px;min-width:240px;flex:1;max-width:350px;
 clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.card h2{font-size:17px;margin-bottom:10px;text-transform:uppercase;letter-spacing:.12em;font-style:italic}
.card h2 i{display:inline-block;background:var(--accent);color:#fff;font-style:normal;padding:0 7px;margin-right:8px;transform:skewX(-12deg)}
.card li{margin:6px 0 6px 18px;line-height:1.45}.card ul li{list-style:none;margin-left:0}
.card ol li::marker{color:var(--accent);font-weight:900}
.staff-item{display:flex;align-items:center;gap:10px;margin:10px 0!important}
.avatar{width:42px;height:42px;flex:none;object-fit:cover;border:2px solid var(--accent);transform:skewX(-6deg)}
.avatar-fallback{display:flex;align-items:center;justify-content:center;font-weight:800;background:var(--accent);color:#fff}
.staff-name{font-weight:700;line-height:1.25}.staff-sub{opacity:.65;font-size:.8em;line-height:1.3}
.tip-card p{line-height:1.55;min-height:3em;transition:opacity .4s}
.links{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.link{background:rgba(0,0,0,.6);border:1px solid var(--bordure);padding:6px 14px;transform:skewX(-10deg);font-size:14px}
.link b{color:var(--accent2);text-transform:uppercase;margin-right:8px;letter-spacing:.08em}
.progress-zone{margin-top:auto;width:920px;max-width:100%;background:var(--panneau);border:1px solid var(--bordure);border-bottom:4px solid var(--accent);padding:14px 22px 16px}
.lights{display:flex;gap:10px;justify-content:center;margin-bottom:10px}
.lights span{width:18px;height:18px;border-radius:50%;background:#06142b;border:2px solid #000;animation:light 2.5s infinite}
.lights span:nth-child(2){animation-delay:.3s}.lights span:nth-child(3){animation-delay:.6s}.lights span:nth-child(4){animation-delay:.9s}.lights span:nth-child(5){animation-delay:1.2s}
@keyframes light{0%,10%{background:#06142b;box-shadow:none}20%,80%{background:var(--accent);box-shadow:0 0 12px var(--accent2)}90%,100%{background:#06142b;box-shadow:none}}
.status-row{display:flex;justify-content:space-between;gap:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.status-row.sub{font-weight:400;text-transform:none;opacity:.85;font-size:.9em;margin-top:6px}
#percent{font-style:italic;font-size:1.3em;color:var(--accent2)}
.bar{height:16px;background:rgba(255,255,255,.1);overflow:hidden;margin:8px 0 4px;transform:skewX(-20deg)}
#bar-fill{height:100%;width:0;transition:width .3s;background:repeating-linear-gradient(90deg,var(--accent) 0 26px,var(--accent2) 26px 30px)}
.controls{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:10px;font-size:14px}
.controls button{background:var(--accent);color:#fff;border:0;padding:5px 12px;font-weight:700;cursor:pointer;transform:skewX(-10deg)}
.vol{display:flex;gap:8px;align-items:center}
#yt-player{position:fixed;width:2px;height:2px;left:-10px;top:-10px;opacity:.01;pointer-events:none}
.noscript{position:fixed;bottom:40px;width:100%;text-align:center}