: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);transform: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:var(--boardRgba,var(--boardBg))}
#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{background:transparent;border:2px solid #ffffffb8}
.ball.last{background:radial-gradient(circle at 30% 30%,#ff9d96,#e0312b 55%,#8f1612);border-color:#4d0b09}
.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);transform: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}


#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);transform: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);transform: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 .dot.r{background:#e0312b;border-color:#e0312b}
#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);transform: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}

/* Indicateur « micro actif » */
#mic{position:absolute;left:var(--mx);top:var(--my);transform: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);transform: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}

/* Popup points : pastille compacte en haut au centre, pavé de valeur aux couleurs de l'équipe */
#pop{position:absolute;top:96px;left:50%;transform:translateX(-50%);display:flex;align-items:stretch;border-radius:16px;overflow:hidden;background:#0d1512f2;box-shadow:0 10px 28px #000a,0 0 0 1px #ffffff26;transition:opacity .4s,transform .4s}
#stage #pop.hide{transform:translate(-50%,-26px) scale(.94)!important}
#pop .v{order:-1;display:flex;align-items:center;justify-content:center;min-width:92px;padding:0 20px;background:var(--pc,var(--cochonnet));color:var(--pcf,#fff);font:800 54px/1 var(--display);font-variant-numeric:tabular-nums}
#pop .v.long{font-size:34px}
#pop .t{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:10px 26px 10px 18px;min-width:0}
#pop .t small{font:700 19px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--cochonnet)}
#pop .t b{font:800 32px/1.05 var(--display);text-transform:uppercase;color:#fff;white-space:nowrap}
#pop .v.empty,#pop .t.empty{display:none}
#pop.nov .t{padding:12px 30px 12px 20px;border-left:10px solid var(--pc,var(--cochonnet))}