:root{--cochonnet:#f2c230;--display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;--body:'Barlow','Segoe UI',Arial,sans-serif}
#stage{position:absolute;top:0;left:0;width:1920px;height:1080px;transform-origin:0 0;color:#fff;font-family:var(--body);overflow:hidden}
#stage .hide{opacity:0!important;transform:translateY(-20px)!important;pointer-events:none}

#board{position:absolute;left:var(--bx);top:var(--by);scale:var(--bs);transform-origin:0 0;width:620px;border-radius:12px;overflow:hidden;box-shadow:0 8px 28px #0008;transition:opacity .5s,transform .5s;background:color-mix(in srgb,var(--boardBg) var(--boardA),transparent)}
#head{display:flex;justify-content:space-between;padding:10px 18px;font:700 24px var(--display);letter-spacing:.12em;text-transform:uppercase;background:var(--headBg)}
.row{display:flex;align-items:center;height:80px;border-top:1px solid #fff2}
.bar{width:14px;align-self:stretch}
.name{flex:1;min-width:0;padding-left:18px;font:700 40px var(--display);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.balls{display:flex;gap:6px;margin-right:16px}
.ball{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#eef,#667);border:1px solid #000}
.ball.off{opacity:.15}
.score{width:104px;align-self:stretch;display:flex;align-items:center;justify-content:center;font:800 62px var(--display);background:var(--scoreBg);color:var(--scoreFg)}
.lead .name::after{content:"  ◀ MÈNE";font-size:20px;color:var(--cochonnet);letter-spacing:.1em}
#foot{display:flex;justify-content:space-between;padding:8px 18px;font-size:21px;background:#000a;color:#ddd;font-variant-numeric:tabular-nums}

#lower{position:absolute;left:var(--lx);top:var(--ly);scale:var(--ls);transform-origin:0 0;transition:opacity .5s,transform .5s}
#lower.hide{transform:translateX(-80px)!important}
#lower .n{background:var(--lowerBg);color:var(--lowerFg);font:800 54px var(--display);text-transform:uppercase;padding:6px 32px;border-left:16px solid var(--c)}
#lower .s{background:var(--lowerSubBg);color:var(--lowerSubFg);font-size:28px;padding:8px 32px}

#pop{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#0b3d2eee;border:4px solid var(--cochonnet);border-radius:22px;padding:30px 80px;text-align:center;transition:.45s;box-shadow:0 12px 50px #000a}
#stage #pop.hide{transform:translate(-50%,-50%) scale(.6)!important}
#pop .t{font:700 40px var(--display);letter-spacing:.12em;color:var(--cochonnet);text-transform:uppercase}
#pop .v{font:800 130px/1 var(--display)}

#ticker{position:absolute;top:var(--ty);left:0;right:0;height:calc(64px*var(--ts));background:var(--tickerBg);color:var(--tickerFg);display:flex;align-items:center;justify-content:center;font-size:calc(30px*var(--ts));transition:opacity .5s,transform .5s}
#ticker.hide{transform:translateY(30px)!important}

#stats{position:absolute;left:var(--sx);top:var(--sy);scale:var(--ss);transform-origin:0 0;width:500px;border-radius:12px;overflow:hidden;box-shadow:0 8px 28px #0008;transition:opacity .5s,transform .5s;background:var(--statsBg);color:var(--statsFg)}
#stats .sh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 18px;border-left:14px solid var(--c);background:#0006;font:800 40px var(--display);text-transform:uppercase}
#stats .sh small{font:500 20px var(--body);opacity:.8;text-transform:none}
#stats .sg{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#fff2}
#stats .sg div{background:var(--statsBg);padding:12px 18px;display:flex;flex-direction:column}
#stats .sg b{font:800 56px/1 var(--display);font-variant-numeric:tabular-nums}
#stats .sg span{font-size:19px;opacity:.8;margin-top:2px}
#stats .rate b{color:var(--cochonnet)}

#logoImg{position:absolute;left:var(--gx);top:var(--gy);max-width:520px;object-fit:contain;transition:opacity .5s,transform .5s;filter:drop-shadow(0 6px 14px #0008);-webkit-user-drag:none}

/* Modèle TV (bleu) */
#tvboard{position:absolute;left:var(--bx);top:var(--by);scale:var(--bs);transform-origin:0 0;width:480px;transition:opacity .5s,transform .5s;filter:drop-shadow(0 8px 18px #0007)}
#tvboard .h1{background:var(--tvHead);color:#fff;text-align:center;font:700 34px var(--display);padding:10px 12px;border-radius:8px 8px 0 0}
#tvboard .h2{background:var(--tvSub);color:#fff;display:flex;justify-content:space-between;padding:8px 18px;font:700 26px var(--display);font-variant-numeric:tabular-nums}
#tvboard .tvt{position:relative;background:var(--tvRowBg)}
#tvboard .acc{position:absolute;left:0;top:0;bottom:0;width:10px}
#tvboard .tvrow{display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px;padding:0 22px 0 28px;border-bottom:2px solid #fff;color:var(--tvText);font:800 32px var(--display);text-transform:uppercase;background:linear-gradient(180deg,#fff8,#fff0)}
#tvboard .tvrow:last-child{border-bottom:0}
#tvboard .tvn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tvboard .dots{display:flex;gap:12px;flex:none}
#tvboard .dot{width:17px;height:17px;border-radius:50%;border:3px solid var(--tvText);box-sizing:border-box}
#tvboard .dot.f{background:var(--tvText)}
#tvboard .sep{height:5px;background:var(--tvSub)}
#tvboard .tvscore{position:absolute;left:calc(100% - 14px);top:50%;transform:translateY(-50%);min-width:100px;height:80px;padding:0 20px 0 30px;background:var(--tvScoreBg);color:var(--tvScoreFg);border-radius:0 26px 26px 0;display:flex;align-items:center;justify-content:center;font:800 58px var(--display);z-index:-1}

/* Distance du but */
#dist{position:absolute;left:var(--dx);top:var(--dy);scale:var(--ds);transform-origin:0 0;display:flex;align-items:center;gap:16px;background:var(--distBg);color:var(--distFg);padding:10px 28px 10px 20px;border-radius:44px;box-shadow:0 8px 24px #0007;transition:opacity .5s,transform .5s}
#dist .jack{width:28px;height:28px;border-radius:50%;flex:none;background:radial-gradient(circle at 30% 30%,#fff1b8,var(--cochonnet) 55%,#b8860b)}
#dist .dl{font:600 24px var(--display);letter-spacing:.12em;text-transform:uppercase;opacity:.85}
#dist b{font:800 54px/1 var(--display);font-variant-numeric:tabular-nums}
#pop .v.sm{font-size:84px}

/* Indicateur « micro actif » */
#mic{position:absolute;left:var(--mx);top:var(--my);scale:var(--ms);transform-origin:0 0;display:flex;flex-direction:column;gap:8px;transition:opacity .5s,transform .5s}
#mic .mc{display:flex;align-items:center;gap:14px;background:var(--micBg);color:var(--micFg);border-left:12px solid var(--c);padding:8px 26px 8px 16px;border-radius:10px;box-shadow:0 6px 18px #0007;font:700 34px var(--display);text-transform:uppercase;letter-spacing:.04em}
#mic svg{width:34px;height:34px;fill:currentColor;flex:none;animation:micp 1.4s ease-in-out infinite}
@keyframes micp{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){#mic svg{animation:none}}

/* Comparatif statistiques d'équipes */
#tstats{position:absolute;left:var(--qx);top:var(--qy);scale:var(--qs);transform-origin:0 0;width:480px;border-radius:12px;overflow:hidden;box-shadow:0 8px 28px #0008;background:var(--tsBg);color:var(--tsFg);transition:opacity .5s,transform .5s}
#tstats .th{display:grid;grid-template-columns:1fr 1fr;background:#0006}
#tstats .th span{padding:10px 16px;font:800 30px var(--display);text-transform:uppercase;text-align:center;border-bottom:6px solid var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tstats .tr2{display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:center;gap:8px;padding:8px 16px;border-top:1px solid #fff2;font-variant-numeric:tabular-nums}
#tstats .tr2 b{font:800 40px/1 var(--display);text-align:center}
#tstats .tr2 b.lead{color:var(--cochonnet)}
#tstats .tr2 span{font-size:18px;text-align:center;opacity:.85}