:root{--bg:#040D26;--bg2:#06143A;--card:#0A1C4D;--card2:#0E2560;--line:#1B3478;--tq:#FF8A24;--tq2:#E8650F;--w:#fff;--mut:#8FB4E8;--txt:#E8F0FF;--red:#FF6B7A;--amb:#FFC857;--ok:#3DDC97;--r:16px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;background-image:radial-gradient(900px 400px at 85% -5%,rgba(255,138,36,.14),transparent 70%),radial-gradient(700px 400px at -5% 20%,rgba(30,80,200,.25),transparent 70%);background-repeat:no-repeat}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,.brand{font-family:Sora,Inter,sans-serif;letter-spacing:-.02em}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
/* header */
header.top{position:sticky;top:0;z-index:50;background:rgba(4,13,38,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px}
.brand img{width:40px;height:40px}
.brand b{color:var(--tq);font-weight:800}
nav.main{display:flex;gap:4px;margin-left:auto}
nav.main a{padding:8px 12px;border-radius:999px;font-weight:600;font-size:14px;color:var(--mut);transition:.15s}
nav.main a:hover{color:var(--w);background:var(--card)}
nav.main a.on{color:var(--bg);background:var(--tq)}
.burger{display:none;margin-left:auto;background:var(--card);border:1px solid var(--line);color:var(--w);border-radius:10px;width:42px;height:42px;font-size:20px;cursor:pointer}
@media(max-width:860px){.burger{display:block}nav.main{display:none;position:absolute;top:64px;left:0;right:0;background:var(--bg2);flex-direction:column;padding:12px 20px 18px;border-bottom:1px solid var(--line)}nav.main.open{display:flex}nav.main a{padding:12px 14px}}
/* hero */
.hero{padding:44px 0 26px;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
.hero h1{font-size:clamp(34px,5.4vw,60px);line-height:1.02;font-weight:800}
.hero h1 em{font-style:normal;color:var(--tq)}
.hero p{color:var(--mut);margin:16px 0 22px;max-width:520px;font-size:18px}
.hero .ball{justify-self:center;width:min(300px,70%);filter:drop-shadow(0 20px 50px rgba(255,138,36,.25))}
@media(max-width:760px){.hero{grid-template-columns:1fr}.hero .ball{display:none}}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;font-weight:700;font-size:15px;border:0;cursor:pointer;background:var(--tq);color:var(--bg);transition:.15s}
.btn:hover{transform:translateY(-1px);background:#FFA04D}
.btn.ghost{background:transparent;color:var(--w);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--tq);color:var(--tq);background:transparent}
.btn.sm{padding:7px 14px;font-size:13px}
/* sections */
section.blk{padding:28px 0}
.sh{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.sh h2{font-size:clamp(22px,3vw,30px);font-weight:800}
.sh h2::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--tq);margin-right:10px;vertical-align:middle;box-shadow:0 0 14px var(--tq)}
.sh a{color:var(--tq);font-weight:600;font-size:14px}
.pagehead{padding:34px 0 8px}
.pagehead h1{font-size:clamp(30px,4.4vw,46px);font-weight:800}
.pagehead p{color:var(--mut);max-width:700px;margin-top:8px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
/* ticker */
.ticker{display:flex;gap:10px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:thin}
.tk{flex:0 0 auto;min-width:170px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13px}
.tk div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 0}
.tk span{display:flex;align-items:center;gap:6px;font-weight:600}
.tk .l{opacity:.55}
.tk small{display:block;color:var(--mut);margin-top:4px;font-size:11px}
/* game card */
.gc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:10px}
.gc .meta{display:flex;justify-content:space-between;gap:8px;color:var(--mut);font-size:12.5px;font-weight:600}
.gc .tag{padding:2px 9px;border-radius:999px;background:var(--bg2);border:1px solid var(--line);font-size:11.5px;white-space:nowrap}
.gc .tag.live{background:rgba(255,107,122,.15);border-color:var(--red);color:var(--red)}
.gc .tag.fin{color:var(--mut)}
.tr{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center}
.tr .nm{font-weight:700;line-height:1.15}
.tr .nm small{display:block;color:var(--mut);font-weight:500;font-size:12px}
.tr .sc{font-family:Sora;font-weight:800;font-size:26px;min-width:44px;text-align:right}
.tr.lose .sc,.tr.lose .nm{opacity:.55}
.logo{width:36px;height:36px;object-fit:contain}
.logo.s{width:22px;height:22px}.logo.l{width:84px;height:84px}
.fb{display:inline-grid;place-items:center;border-radius:50%;background:var(--bg2);border:1px solid var(--line);font-size:10px;font-weight:800;color:var(--tq)}
.gc .info{font-size:12.5px;color:var(--mut);border-top:1px dashed var(--line);padding-top:8px;display:flex;flex-direction:column;gap:4px}
.gc .info b{color:var(--txt)}
.gc .info a{color:var(--tq);font-weight:600}
.abs{color:var(--amb)}
/* tables */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:10px 12px;text-align:right;white-space:nowrap}
th:first-child,td:first-child,.tl{text-align:left}
th{color:var(--mut);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;background:var(--bg2);position:sticky;top:0;cursor:default}
th.sort{cursor:pointer}th.sort:hover{color:var(--tq)}th.cur{color:var(--tq)}
tr+tr td{border-top:1px solid rgba(27,52,120,.6)}
tbody tr:hover{background:rgba(255,138,36,.06)}
.pl{display:flex;align-items:center;gap:10px;text-align:left}
.pl img.ph{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:top;background:var(--bg2);border:1px solid var(--line)}
.pl .logo.s{flex:none}
.pl b{display:block;line-height:1.15}
.pl small{color:var(--mut);font-size:12px}
.cut td{border-top:2px solid var(--tq)!important}
.hi{color:var(--tq);font-weight:700}
/* badges */
.bd{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid}
.bd.out{color:var(--red);border-color:var(--red);background:rgba(255,107,122,.12)}
.bd.inc{color:var(--amb);border-color:var(--amb);background:rgba(255,200,87,.12)}
.bd.ok{color:var(--ok);border-color:var(--ok);background:rgba(255,138,36,.1)}
.chip{padding:7px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--mut);font-weight:600;font-size:13.5px;cursor:pointer}
.chip.on,.chip:hover{background:var(--tq);color:var(--bg);border-color:var(--tq)}
.bar{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px;align-items:center}
.bar select,.bar input{background:var(--card);border:1px solid var(--line);color:var(--w);border-radius:999px;padding:9px 14px;font:inherit;font-size:14px;min-width:150px}
.bar input{min-width:220px}
.day{font-family:Sora;font-weight:700;font-size:15px;color:var(--tq);text-transform:capitalize;margin:22px 0 10px}
/* team cards */
.tc{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--c,var(--tq));border-radius:var(--r);padding:14px;transition:.15s}
.tc:hover{transform:translateY(-2px);border-color:var(--tq)}
.tc b{font-size:16px;line-height:1.15;display:block}.tc small{color:var(--mut)}
.th{border-radius:22px;padding:26px;background:linear-gradient(120deg,var(--c,#0A1F44),var(--bg2) 70%);border:1px solid var(--line);display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:26px}
.th h1{font-size:clamp(26px,4vw,42px);font-weight:800;line-height:1.05}
.kp{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-top:16px;width:100%}
.kp div{background:rgba(4,13,38,.55);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.kp b{display:block;font-family:Sora;font-size:22px}.kp small{color:var(--mut);font-size:12px}
.sch{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.sg{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 11px;font-size:13px;display:flex;flex-direction:column;gap:3px}
.sg.w{border-left:4px solid var(--ok)}.sg.l{border-left:4px solid var(--red)}.sg.f{border-left:4px solid var(--line)}
.sg small{color:var(--mut)}
/* leaders */
.ld ol{list-style:none;display:flex;flex-direction:column;gap:2px;margin-top:8px}
.ld li{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid rgba(27,52,120,.6)}
.ld li:first-child{border:0}
.ld li .pl{flex:1;min-width:0}.ld li .pl b{font-size:14px;overflow:hidden;text-overflow:ellipsis}
.ld li strong{font-family:Sora;font-size:18px}
.ld h3{font-size:16px;color:var(--tq)}
/* highlights */
.hl{display:grid;grid-template-columns:70px 1fr;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;margin-bottom:16px}
.hl .n{font-family:Sora;font-weight:800;font-size:56px;line-height:1;color:var(--tq);opacity:.9}
.hl h3{font-size:clamp(18px,2.4vw,23px);line-height:1.2;margin:6px 0 10px}
.hl .ctx{display:flex;flex-wrap:wrap;gap:10px;align-items:center;color:var(--mut);font-size:14px;margin-bottom:12px}
.hl .ctx .m{display:flex;align-items:center;gap:8px;color:var(--txt);font-weight:700}
.hl .cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:12px}
.hl h4{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--tq);margin-bottom:6px}
.hl ul{padding-left:18px;color:var(--txt);font-size:14.5px;display:flex;flex-direction:column;gap:5px}
.hl .en{font-size:12.5px;color:var(--mut);font-style:italic;margin-top:8px}
@media(max-width:700px){.hl{grid-template-columns:1fr}.hl .n{font-size:38px}.hl .cols{grid-template-columns:1fr}}
.ros{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.ros ol{padding-left:20px;display:flex;flex-direction:column;gap:6px}
.note{font-size:13px;color:var(--mut);background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:14px 0}
.note b{color:var(--amb)}
/* modal */
.mod{position:fixed;inset:0;background:rgba(2,8,24,.8);z-index:100;display:none;place-items:center;padding:16px}
.mod.on{display:grid}
.mod .box{background:var(--bg2);border:1px solid var(--tq);border-radius:20px;padding:22px;max-width:560px;width:100%;max-height:90vh;overflow:auto;position:relative}
.mod .x{position:absolute;right:12px;top:10px;background:none;border:0;color:var(--mut);font-size:26px;cursor:pointer}
.mod h3{font-size:24px}
.mod .st{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}
.mod .st div{background:var(--card);border-radius:10px;padding:8px;text-align:center}
.mod .st b{display:block;font-family:Sora;font-size:20px}.mod .st small{color:var(--mut);font-size:11px}
footer.bot{margin-top:50px;border-top:1px solid var(--line);background:var(--bg2);padding:28px 0;color:var(--mut);font-size:13px}
footer.bot .wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between}
footer.bot p{max-width:720px}
.empty{padding:30px;text-align:center;color:var(--mut)}
/* photos (Unsplash) */
body[data-page=accueil] .hero{margin-top:22px;padding:44px 34px;border-radius:26px;border:1px solid var(--line);background:linear-gradient(90deg,rgba(4,13,38,.96) 30%,rgba(4,13,38,.45)),url(photos/hero.jpg) center/cover}
body[data-page]:not([data-page=accueil]):not([data-page=equipe]) .pagehead{margin-top:22px;padding:42px 30px;border-radius:26px;border:1px solid var(--line);background:linear-gradient(90deg,rgba(4,13,38,.95) 35%,rgba(4,13,38,.5)),url(photos/panier.jpg) center/cover}
:root body[data-page=podcast][data-page=podcast][data-page=podcast] .pagehead{background:linear-gradient(90deg,rgba(4,13,38,.95) 35%,rgba(4,13,38,.45)),url(photos/podcast.jpg) center/cover}
@media(max-width:760px){body[data-page=accueil] .hero{padding:30px 20px}}
/* mode jour : gris et orange (le mode nuit, bleu et orange, est le mode par défaut) */
.tg{background:var(--card);border:1px solid var(--line);color:var(--w);border-radius:999px;height:38px;padding:0 14px;font:600 13px Inter,sans-serif;cursor:pointer;white-space:nowrap}
.tg:hover{border-color:var(--tq);color:var(--tq)}
@media(max-width:860px){.tg{margin-left:auto}.burger{margin-left:0}}
:root[data-theme=jour]{--bg:#E8EBEF;--bg2:#D9DEE5;--card:#FFFFFF;--card2:#F2F4F7;--line:#C3CAD4;--tq:#DB5A0B;--tq2:#B8480A;--w:#141B26;--mut:#5A6575;--txt:#1F2733;--red:#C4283C;--amb:#A86400;--ok:#0F8F5B}
:root[data-theme=jour] body{background-image:radial-gradient(900px 400px at 85% -5%,rgba(219,90,11,.12),transparent 70%)}
:root[data-theme=jour] header.top{background:rgba(232,235,239,.92)}
:root[data-theme=jour] .btn,:root[data-theme=jour] nav.main a.on,:root[data-theme=jour] .chip.on,:root[data-theme=jour] .chip:hover{color:#fff}
:root[data-theme=jour] .btn.ghost{color:var(--w)}
:root[data-theme=jour] .btn:hover{background:#F26B1D}
:root[data-theme=jour] .brand b{color:#E8650F}
:root[data-theme=jour] body[data-page=accueil] .hero{background:linear-gradient(90deg,rgba(232,235,239,.96) 30%,rgba(232,235,239,.5)),url(photos/hero.jpg) center/cover}
:root[data-theme=jour] body[data-page]:not([data-page=accueil]):not([data-page=equipe]) .pagehead{background:linear-gradient(90deg,rgba(232,235,239,.96) 35%,rgba(232,235,239,.55)),url(photos/panier.jpg) center/cover}
:root[data-theme=jour] body[data-page=podcast] .pagehead{background:linear-gradient(90deg,rgba(232,235,239,.96) 35%,rgba(232,235,239,.55)),url(photos/podcast.jpg) center/cover}
:root[data-theme=jour] .th{background:linear-gradient(120deg,var(--c),#2B3340 78%);color:#fff}
:root[data-theme=jour] .th h1,:root[data-theme=jour] .th b{color:#fff}
:root[data-theme=jour] .th .kp div{background:rgba(0,0,0,.28);border-color:rgba(255,255,255,.2)}
:root[data-theme=jour] .th .kp small,:root[data-theme=jour] .th div[style*="mut"]{color:#D6DCE6!important}
:root[data-theme=jour] .mod{background:rgba(30,38,50,.6)}
:root[data-theme=jour] .tr .sc,:root[data-theme=jour] .kp b{color:var(--w)}