/* ============================================================
   THÈME « NOCTURNE » — la nouvelle identité visuelle du site
   Idée : un stade sous les projecteurs. Bandeau d'en-tête encre
   profonde, surfaces claires et aérées, accent vert pelouse vif,
   or pour les éléments à retenir. Toutes les couleurs sont des
   jetons : clair et sombre sont gérés ici.
   ============================================================ */
:root{
  --bg:#eef2f6; --surface:#ffffff; --surface-2:#e6ecf2; --line:#d9e1ea;
  --fg:#0d1726; --muted:#5d6b80; --accent:#0e8a68; --accent-ink:#ffffff; --gold:#c08a12;
  --live:#e0333f; --win:#13925c; --draw:#b8860b; --loss:#d0413e;
  --hdr:#0b1424; --hdr-2:#13203a; --hdr-fg:#eef3fb; --hdr-muted:#94a3bd;
  --shadow:0 1px 2px rgba(13,23,38,.05),0 6px 24px rgba(13,23,38,.06);
  --shadow-h:0 2px 6px rgba(13,23,38,.08),0 14px 36px rgba(13,23,38,.10);
  --r:14px; --r-s:9px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#080e19; --surface:#0f1726; --surface-2:#17223a; --line:#212f48;
  --fg:#e7eef9; --muted:#8c9cb8; --accent:#2fd3a7; --accent-ink:#04211a; --gold:#f2c14e;
  --live:#ff5865; --win:#3ad08a; --draw:#e8bd4a; --loss:#ff6f67;
  --hdr:#060b14; --hdr-2:#0e1728; --hdr-fg:#eef3fb; --hdr-muted:#8696b2;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.28);
  --shadow-h:0 2px 6px rgba(0,0,0,.35),0 16px 40px rgba(0,0,0,.4);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#080e19; --surface:#0f1726; --surface-2:#17223a; --line:#212f48;
  --fg:#e7eef9; --muted:#8c9cb8; --accent:#2fd3a7; --accent-ink:#04211a; --gold:#f2c14e;
  --live:#ff5865; --win:#3ad08a; --draw:#e8bd4a; --loss:#ff6f67;
  --hdr:#060b14; --hdr-2:#0e1728; --hdr-fg:#eef3fb; --hdr-muted:#8696b2;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.28);
  --shadow-h:0 2px 6px rgba(0,0,0,.35),0 16px 40px rgba(0,0,0,.4);
  color-scheme:dark}

body{background:radial-gradient(1200px 420px at 50% -120px,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%) no-repeat,var(--bg);font-size:15px}
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)}
h1{letter-spacing:.005em}
.eyebrow{color:var(--accent);letter-spacing:.12em}
a{text-underline-offset:3px}

/* ---------- En-tête : bandeau projecteurs ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:25;background:var(--hdr)}
header.top{top:env(safe-area-inset-top,0px);background:linear-gradient(180deg,var(--hdr),var(--hdr-2));border-bottom:0;color:var(--hdr-fg);box-shadow:0 8px 30px rgba(4,10,20,.25)}
.top-row{padding-block:10px;gap:18px}
.top-row .brand{font-size:26px;color:var(--hdr-fg)}
.brand i{width:14px;height:24px;border-radius:2px;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--gold)));box-shadow:0 0 18px color-mix(in srgb,var(--accent) 60%,transparent)}
nav.sections{gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0}
nav.sections::-webkit-scrollbar{display:none}
nav.sections button{flex:none;border:0;border-radius:999px;padding:8px 14px;color:var(--hdr-muted);font-size:14px;border-bottom:0;transition:background .15s,color .15s}
nav.sections button:hover{color:var(--hdr-fg);background:rgba(255,255,255,.07)}
nav.sections button[aria-current="true"]{color:#06231b;background:var(--accent);box-shadow:0 4px 16px color-mix(in srgb,var(--accent) 45%,transparent)}
:root[data-theme="dark"] nav.sections button[aria-current="true"]{color:var(--accent-ink)}
.status{color:var(--hdr-muted)}
.user{color:var(--hdr-fg)}
.user .btn-ghost,header .btn-ghost{border-color:rgba(255,255,255,.18);color:var(--hdr-fg);background:rgba(255,255,255,.04);border-radius:999px}
.user .btn-ghost:hover{background:rgba(255,255,255,.1)}
nav.leagues{padding:2px 0 12px;gap:6px}
nav.leagues button{font-size:16px;color:var(--hdr-muted);border-radius:999px;padding:6px 14px;border:1px solid rgba(255,255,255,.08)}
nav.leagues button:hover{color:var(--hdr-fg);background:rgba(255,255,255,.07)}
nav.leagues button[aria-current="true"]{color:var(--hdr-fg);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22)}
@media (max-width:760px){.top-row{flex-wrap:wrap;gap:10px}.top-row .brand{font-size:22px}.status{order:3;width:100%;margin-left:0}nav.sections{order:4;width:100%}.user{margin-left:auto}}

/* ---------- Surfaces ---------- */
main{padding-block:34px 80px;gap:30px}
.panel,.lcard,.tool,.bk-ch,.rd-paper,.mx-board,.lv-card,.article,.toc,.login-card{border-radius:var(--r);border-color:var(--line);box-shadow:var(--shadow)}
.panel{padding:22px 24px}
@media (max-width:560px){.panel{padding:18px 16px}}
.lcard,.lv-card,.bk-ch{transition:transform .15s,box-shadow .15s,border-color .15s}
.lcard:hover,.lv-card:hover,.bk-ch:hover{transform:translateY(-2px);box-shadow:var(--shadow-h);border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.panel-h{margin-bottom:16px}
.panel-h h2{font-size:25px;letter-spacing:.01em}
.src{border-radius:999px;padding:3px 10px;background:var(--bg);border-color:var(--line)}
.kpis{border-radius:var(--r);box-shadow:var(--shadow);border-color:var(--line)}
.kpi{padding:16px 18px}
.kpi small{font-weight:500}
.kpi b{font-weight:700}
.hero h1,.home-head h1,.page-h h1{background:linear-gradient(180deg,var(--fg) 55%,color-mix(in srgb,var(--fg) 70%,var(--accent)));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Boutons, champs, onglets ---------- */
.btn{border-radius:var(--r-s);padding:11px 18px;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 35%,transparent);transition:transform .1s,filter .15s}
.btn:active{transform:translateY(1px)}
.btn-ghost{border-radius:var(--r-s);background:var(--surface)}
.btn-ghost:hover{border-color:var(--fg)}
.mini-btn{border-radius:7px;padding:3px 9px;background:var(--surface)}
.field input,.field select,.field textarea{border-radius:var(--r-s);background:var(--surface);transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.tabs{gap:6px}
.tabs button{border-radius:999px;padding:5px 12px;font-weight:600;background:var(--surface)}
.tabs button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.subnav{gap:8px}
.subnav button{border-radius:999px;padding:8px 15px;box-shadow:var(--shadow)}
.pill{border-radius:999px;padding:3px 9px}

/* ---------- Tableaux ---------- */
table{font-size:14px}
th{font-size:11px;letter-spacing:.08em;color:var(--muted);padding:9px 8px;border-bottom:1px solid var(--line)}
td{padding:9px 8px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
tbody tr{transition:background .12s}
tbody tr:hover td{background:color-mix(in srgb,var(--accent) 6%,transparent)}
td.pts{color:var(--fg)}
td.pos::before{width:4px;left:2px}
.tablewrap{border-radius:10px}

/* ---------- Matchs ---------- */
.match{border-radius:10px;background:var(--bg);border:1px solid transparent;transition:border-color .15s,background .15s}
.match:hover{border-color:var(--line);background:var(--surface)}
.match.live{box-shadow:inset 3px 0 0 var(--live);background:color-mix(in srgb,var(--live) 6%,var(--bg))}
.scores{font-size:21px}

/* ---------- Connexion ---------- */
#login{background:
  radial-gradient(700px 380px at 50% 0%,color-mix(in srgb,var(--accent) 28%,transparent),transparent 70%),
  linear-gradient(90deg,transparent calc(50% - 1px),rgba(255,255,255,.08) calc(50% - 1px),rgba(255,255,255,.08) calc(50% + 1px),transparent calc(50% + 1px)),
  radial-gradient(circle at 50% 50%,transparent 139px,rgba(255,255,255,.08) 140px,rgba(255,255,255,.08) 142px,transparent 143px),
  linear-gradient(180deg,var(--hdr),var(--hdr-2))}
.login-card{max-width:400px;padding:36px 32px;box-shadow:0 30px 80px rgba(0,0,0,.45)}

/* ---------- Pied de page ---------- */
footer{background:var(--surface);border-top:1px solid var(--line)}

/* ---------- Animations douces ---------- */
@media (prefers-reduced-motion:no-preference){
  main > *{animation:rise .35s ease-out both}
  main > *:nth-child(2){animation-delay:.04s} main > *:nth-child(3){animation-delay:.08s} main > *:nth-child(4){animation-delay:.12s}
}
@keyframes rise{from{transform:translateY(6px)}to{transform:none}}
@media (max-width:1380px) and (min-width:761px){.status{display:none}.user{margin-left:auto}}
.top-row{flex-wrap:nowrap}
@media (max-width:760px){.top-row{flex-wrap:wrap}}
#qbR b{font-size:18px!important;font-family:var(--font-mono)}
/* ---------- Page championnat : en-tête compact + onglets ---------- */
.lp-head{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.lp-head img.badge{width:52px;height:52px;object-fit:contain}
.lp-head h1{font-size:clamp(30px,4.4vw,46px);text-transform:uppercase}
.lp-head .meta{color:var(--muted);font-size:13px;display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.lp-kpis .kpi{padding:10px 14px}
.lp-kpis .kpi b{font-size:clamp(20px,1.9vw,26px)}
.lp-tabs{position:sticky;top:var(--hdrh,104px);z-index:15;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);padding:6px 0;margin:-8px 0 -10px}
.lp-tabs::-webkit-scrollbar{display:none}
.lp-tabs button{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 15px;font-weight:600;font-size:13.5px;color:var(--muted);cursor:pointer}
.lp-tabs button[aria-selected="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.lp{display:grid;gap:18px}
.lp .panel{padding:16px 18px}
.lp .panel-h{margin-bottom:10px}
.lp .panel-h h2{font-size:20px}
.lp table{font-size:13px}
.lp th{padding:6px 6px;font-size:10.5px}
.lp td{padding:6px 6px}
.lp td.team img{width:16px;height:16px}
.lp td.pts{font-size:15px}
.lp .match{padding:6px 8px}
.lp .scores{font-size:17px}
.lp .form i{width:17px;height:17px;font-size:10px}
.lp-only-table > section:first-child{display:none}
.lp-only-table{grid-template-columns:1fr!important}
@media (max-width:760px){.lp-tabs{top:calc(env(safe-area-inset-top,0px) + 110px)}}

/* ============================================================
   NAVIGATION 2026 — rubriques, menus déroulants, barre secondaire,
   barre d'onglets mobile, recherche globale
   ============================================================ */
.wrap{max-width:1340px}
nav.mainnav{display:flex;gap:2px;align-items:center;min-width:0;flex-wrap:nowrap}
.mn-g{position:relative}
.mn-b{display:inline-flex;gap:7px;align-items:center;background:transparent;border:0;border-radius:999px;padding:8px 13px;color:var(--hdr-muted);font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.mn-b:hover,.mn-b[aria-expanded="true"]{color:var(--hdr-fg);background:rgba(255,255,255,.08)}
.mn-b[aria-current="true"]{color:#06231b;background:var(--accent);box-shadow:0 4px 16px color-mix(in srgb,var(--accent) 45%,transparent)}
:root[data-theme="dark"] .mn-b[aria-current="true"]{color:var(--accent-ink)}
.mn-b .chev{opacity:.7;transition:transform .15s}
.mn-b[aria-expanded="true"] .chev{transform:rotate(180deg)}
.mn-p{position:absolute;top:calc(100% + 8px);left:0;min-width:330px;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(5,12,25,.28);padding:8px;display:none;z-index:40}
.mn-b[aria-expanded="true"] + .mn-p{display:grid;gap:2px}
.mn-p a{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--fg)}
.mn-p a:hover{background:var(--bg)}
.mn-p a .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.mn-p a b{display:block;font-size:14px;font-weight:600}
.mn-p a small{display:block;font-size:12px;color:var(--muted);line-height:1.35}
.srch-b{display:inline-flex;gap:8px;align-items:center}
.srch-b kbd,.srch kbd{font-family:var(--font-mono);font-size:11px;border:1px solid rgba(255,255,255,.25);border-radius:5px;padding:0 5px;opacity:.75}
nav.subbar{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:0 0 10px}
nav.subbar::-webkit-scrollbar{display:none}
nav.subbar[hidden]{display:none}
nav.subbar a{flex:none;font-size:13.5px;font-weight:600;color:var(--hdr-muted);text-decoration:none;padding:6px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.08)}
nav.subbar a:hover{color:var(--hdr-fg);background:rgba(255,255,255,.07)}
nav.subbar a[aria-current="true"]{color:var(--hdr-fg);background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25)}
.season-pick{display:inline-flex;gap:6px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px 4px 3px 12px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.season-pick select{border:0;background:var(--bg);border-radius:999px;padding:5px 10px;font-weight:600;font-size:13px;color:var(--fg)}
.season-pick.past{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,var(--surface));color:var(--gold)}
/* Recherche */
.srch{position:fixed;inset:0;z-index:80;background:rgba(5,10,20,.55);backdrop-filter:blur(3px);display:grid;justify-items:center;align-items:start;padding:10vh 16px 16px}
.srch[hidden]{display:none}
.srch-in{width:min(640px,100%);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.4);overflow:hidden}
.srch-q{display:flex;gap:10px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--muted)}
.srch-q input{flex:1;border:0;background:transparent;font-size:17px;color:var(--fg);outline:none}
.srch kbd{border-color:var(--line)}
.srch-r{max-height:60vh;overflow:auto;padding:6px}
.srch-k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:10px 10px 4px}
.srch-r a{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:center;padding:8px 10px;border-radius:9px;text-decoration:none;color:var(--fg)}
.srch-r a img{width:22px;height:22px;object-fit:contain}
.srch-r a .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);justify-self:center}
.srch-r a small{display:block;color:var(--muted);font-size:12px}
.srch-r a.on,.srch-r a:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
/* Barre du bas (téléphone) + tiroir */
nav.tabbar{display:none}
.drawer{position:fixed;inset:0;z-index:70;background:rgba(5,10,20,.5)}
.drawer[hidden]{display:none}
.drawer-in{position:absolute;inset:0 0 0 auto;width:min(360px,88vw);background:var(--surface);overflow:auto;padding:16px 16px calc(90px + env(safe-area-inset-bottom,0px))}
.drawer-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.drawer-h .btn-ghost{color:var(--fg);border-color:var(--line)}
.drawer-g h4{display:flex;gap:8px;align-items:center;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:16px 0 6px}
.drawer-g a{display:block;padding:9px 10px;border-radius:9px;text-decoration:none;color:var(--fg);font-weight:600;font-size:15px}
.drawer-g a small{display:block;font-weight:500;font-size:12px;color:var(--muted)}
.drawer-g a:hover{background:var(--bg)}
@media (max-width:1380px){.srch-b span,.srch-b kbd{display:none}.mn-b{padding:8px 10px}}
@media (max-width:940px){
  nav.mainnav{display:none}
  nav.tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--hdr);border-top:1px solid rgba(255,255,255,.08);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
  nav.tabbar a,nav.tabbar button{display:grid;justify-items:center;gap:2px;background:none;border:0;color:var(--hdr-muted);font-size:11px;font-weight:600;text-decoration:none;padding:4px 0;cursor:pointer}
  nav.tabbar [aria-current="true"]{color:var(--accent)}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  #aiFab{bottom:calc(76px + env(safe-area-inset-bottom,0px)) !important}
}
.season-banner{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:color-mix(in srgb,var(--gold) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));border-radius:12px;padding:10px 14px;margin:0 0 14px;font-size:14px}

img.tlogo{width:30px;height:30px;object-fit:contain}
img.tlogo-s{width:16px;height:16px;object-fit:contain}
.lglogo{vertical-align:middle}
nav.leagues button .lglogo{margin-right:2px}

@media (max-width:760px){.lp-tabs{top:var(--hdrh,110px) !important}}

/* ============================================================
   HARMONISATION GÉNÉRALE (toutes les pages)
   En-tête sombre identique partout, cartes arrondies, ombres douces
   ============================================================ */
.page-h,.home-head,.lv-top,section.hero{position:relative;overflow:hidden;border-radius:20px;background:linear-gradient(135deg,var(--hdr),var(--hdr-2)) !important;color:var(--hdr-fg);padding:24px 26px !important;margin-bottom:18px;box-shadow:var(--shadow-h);align-items:end}
.page-h::after,.home-head::after,.lv-top::after,section.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(520px 260px at 100% 0%,color-mix(in srgb,var(--accent) 28%,transparent),transparent 70%);pointer-events:none}
.page-h>*,.home-head>*,.lv-top>*,section.hero>*{position:relative;z-index:1}
.page-h h1,.home-head h1,.lv-top h1,section.hero h1{background:none !important;-webkit-background-clip:initial !important;background-clip:initial !important;color:#fff !important}
.page-h .lead,.page-h p,.page-h .hint,.home-head .eyebrow+h1+*,.lv-top .eyebrow,section.hero .meta,section.hero .meta b{color:var(--hdr-muted) !important}
.page-h .lead b,.page-h p b{color:#fff}
.page-h .eyebrow,.home-head .eyebrow,section.hero .eyebrow{color:var(--accent) !important}
.page-h a:not(.btn),.page-h .hint a{color:#fff}
.page-h .src,.home-head .src,section.hero .src{background:rgba(255,255,255,.08) !important;border-color:rgba(255,255,255,.18) !important;color:var(--hdr-muted) !important}
.page-h .mini-btn,section.hero .mini-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.page-h .tabs button,.lv-top .tabs button{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:var(--hdr-fg)}
.page-h .tabs button[aria-pressed="true"],.lv-top .tabs button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.page-h select,.page-h input{background:rgba(255,255,255,.95);color:#0d1726}
.panel{border-radius:16px !important;box-shadow:var(--shadow)}
.panel-h h2{letter-spacing:.01em}
.kpis{border-radius:16px !important}
.tablewrap{border-radius:12px}
.lg-kp{grid-template-columns:repeat(auto-fill,minmax(104px,1fr)) !important}

/* ===== Téléphone : aucune page ne déborde, tout se lit sans zoomer ===== */
html,body{max-width:100%;overflow-x:clip}
#app{max-width:100vw;overflow-x:clip}
.tw-auto{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
:where(#view) :where(img,svg,canvas,video){max-width:100%}
:where(#view) :where(svg:not([height])){height:auto}
@media (max-width:760px){
  #view{padding-left:12px;padding-right:12px}
  .panel{padding:14px 12px;border-radius:14px}
  .panel-h{flex-wrap:wrap;gap:6px}
  .panel-h h2{font-size:17px}
  .panel-h .src{font-size:11px;white-space:normal}
  .row-actions{flex-wrap:wrap}
  .cols2,.grid2,.two-col{grid-template-columns:1fr !important}
  table{font-size:12.5px}
  th,td{padding:7px 8px}
  .page-h,.home-head,.lv-top,section.hero{padding:16px 14px !important;border-radius:16px}
  .page-h h1,.home-head h1{font-size:24px;line-height:1.15}
  .lead{font-size:13.5px}
  .kpis{grid-template-columns:1fr 1fr !important;gap:8px}
  .kpi b.num{font-size:20px}
  input,select,textarea{font-size:16px}  /* évite le zoom automatique d'iOS */
  .btn,.btn-ghost,.mini-btn,button{min-height:36px}
  .tabbar~*{scroll-margin-bottom:70px}
  #view{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .ai-fab{bottom:calc(76px + env(safe-area-inset-bottom,0px)) !important}
  .ai-fab span{display:none}
  [class*="-tabs"]{overflow-x:auto;flex-wrap:nowrap !important;scrollbar-width:none}
  [class*="-tabs"]::-webkit-scrollbar{display:none}
  [class*="-tabs"]>button,[class*="-tabs"]>a{flex:0 0 auto;white-space:nowrap}
}
@media (max-width:420px){
  .kpis{grid-template-columns:1fr 1fr !important}
  .page-h h1,.home-head h1{font-size:22px}
}
/* les éléments de grille / flex ne doivent jamais forcer la largeur de la page */
:where(#view) :where(div,section,article,aside,header,main,form,label,li){min-width:0}
#view section,#view .panel{max-width:100%}
@media (max-width:760px){
  #view :is([style*="grid-template-columns:repeat(3"],[style*="grid-template-columns:repeat(4"],[style*="grid-template-columns:repeat(5"],[style*="grid-template-columns:repeat(6"],[style*="grid-template-columns:1fr 1fr 1fr"],[style*="grid-template-columns: repeat(3"],[style*="grid-template-columns: repeat(4"]):not(.keep-cols){grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr)) !important}
}
/* en-tête compact sur téléphone : une seule ligne */
@media (max-width:760px){
  .top-row{flex-wrap:nowrap !important;gap:8px !important;align-items:center}
  .top-row .status{display:none !important}
  .top-row .user{margin-left:auto;gap:6px}
  #whoami{display:none}
  #logout{font-size:0;padding:0 10px;min-width:38px}
  #logout::before{content:"⏻";font-size:17px}
  .top-row .brand{font-size:20px !important}
}

/* menu principal : 9 rubriques, compact sur écrans moyens */
@media (max-width:1560px) and (min-width:941px){.mainnav .mn-b{padding:8px 9px;gap:5px}.mainnav .mn-b>svg:first-child{display:none}.srch-b span,.srch-b kbd{display:none}}
@media (max-width:1240px) and (min-width:941px){.mainnav .mn-b{font-size:13px;padding:7px 7px}#whoami{display:none}}

/* ============================================================
   IDENTITÉ « TRIBUNE » — encre, bleu roi et jaune tifo
   · Encre profonde pour l'en-tête et les bandeaux (la tribune la nuit)
   · Papier crème pour le fond (le programme de match)
   · Bleu roi pour l'action (liens, boutons, onglets actifs)
   · Jaune tifo pour ce qu'il faut retenir (surlignage, marque, chiffres clés)
   · Vert / rouge / ambre réservés aux résultats et à la value : jamais décoratifs
   ============================================================ */
:root{
  --bg:#f4f1ea; --surface:#fffdf8; --surface-2:#ece7dc; --line:#e2dccf;
  --fg:#15151c; --muted:#69655d; --accent:#2747e8; --accent-ink:#ffffff; --gold:#b98200; --hl:#ffd23f; --hl-ink:#15151c;
  --live:#e5383b; --win:#138a55; --draw:#a87a0c; --loss:#cf3a2f;
  --hdr:#0f1222; --hdr-2:#171b33; --hdr-fg:#f4f1ea; --hdr-muted:#a3a7c2;
  --shadow:0 1px 0 rgba(21,21,28,.04),0 6px 22px rgba(21,21,28,.06);
  --shadow-h:0 2px 6px rgba(21,21,28,.08),0 16px 40px rgba(21,21,28,.12);
  --ink:#0f1222; color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0b0d16; --surface:#131729; --surface-2:#1b2036; --line:#272d48;
  --fg:#eeeaf2; --muted:#9a9db6; --accent:#7b8dff; --accent-ink:#0b0d16; --gold:#ffd23f; --hl:#ffd23f; --hl-ink:#0f1222;
  --live:#ff5a5d; --win:#3fcf8e; --draw:#e8bd4a; --loss:#ff7366;
  --hdr:#070912; --hdr-2:#10142a; --hdr-fg:#f4f1ea; --hdr-muted:#9095b3;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 28px rgba(0,0,0,.35); --shadow-h:0 2px 8px rgba(0,0,0,.4),0 18px 44px rgba(0,0,0,.45);
  --ink:#eeeaf2; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0b0d16; --surface:#131729; --surface-2:#1b2036; --line:#272d48;
  --fg:#eeeaf2; --muted:#9a9db6; --accent:#7b8dff; --accent-ink:#0b0d16; --gold:#ffd23f; --hl:#ffd23f; --hl-ink:#0f1222;
  --live:#ff5a5d; --win:#3fcf8e; --draw:#e8bd4a; --loss:#ff7366;
  --hdr:#070912; --hdr-2:#10142a; --hdr-fg:#f4f1ea; --hdr-muted:#9095b3;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 28px rgba(0,0,0,.35); --shadow-h:0 2px 8px rgba(0,0,0,.4),0 18px 44px rgba(0,0,0,.45);
  --ink:#eeeaf2; color-scheme:dark}

body{background:var(--bg)}
/* en-tête : encre + bande tifo jaune */
header.top{background:var(--hdr);box-shadow:none;border-bottom:3px solid var(--hl)}
.top-row .brand{letter-spacing:.06em}
.brand i{width:16px;height:26px;border-radius:3px;background:linear-gradient(90deg,var(--hl) 0 50%,#2747e8 50% 100%);box-shadow:none;transform:skewX(-12deg)}
.mainnav .mn-b[aria-expanded="true"],.mainnav .mn-g.on > .mn-b,.mainnav .mn-b[aria-current="true"]{background:var(--hl) !important;color:var(--hl-ink) !important}
.subbar{background:var(--hdr-2)}
/* bandeaux de page : encre, motif de gradins, liseré jaune */
.page-h,.home-head,.lv-top,section.hero,.lp-head{background:
  repeating-linear-gradient(-12deg,transparent 0 22px,rgba(255,255,255,.025) 22px 23px),
  radial-gradient(560px 280px at 100% 0%,color-mix(in srgb,#2747e8 45%,transparent),transparent 70%),
  var(--hdr) !important;color:var(--hdr-fg);border-left:6px solid var(--hl)}
.page-h::after,.home-head::after,.lv-top::after,section.hero::after{background:none}
.page-h h1,.home-head h1,.hero h1{background:none;color:var(--hdr-fg);-webkit-text-fill-color:currentColor}
.eyebrow{color:var(--hl) !important}
/* panneaux */
.panel,.fx-head{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.panel-h h2{position:relative;padding-left:14px}
.panel-h h2::before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;width:5px;border-radius:2px;background:var(--hl);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 12%,transparent)}
.panel-h .src,.pill{background:var(--surface-2);color:var(--muted);border:0}
/* boutons et onglets */
.btn{background:var(--accent);color:var(--accent-ink);border-radius:999px}
.btn:hover{filter:brightness(1.08)}
.btn-ghost,.mini-btn,.ghost{border-radius:999px}
.fx-tabs button[aria-selected="true"],.lp-tabs button[aria-selected="true"],.eq-tabs button[aria-selected="true"],.pj-tabs button[aria-selected="true"],.rp-tabs button[aria-selected="true"],.mk-cats button[aria-pressed="true"],.tabs button[aria-pressed="true"],.cal-strip button[aria-current="true"]{background:var(--hdr) !important;color:var(--hdr-fg) !important;box-shadow:inset 0 -3px 0 var(--hl);border-color:transparent !important}
:root[data-theme="dark"] .fx-tabs button[aria-selected="true"],:root[data-theme="dark"] .lp-tabs button[aria-selected="true"]{background:var(--hl) !important;color:var(--hl-ink) !important}
/* chiffres clés surlignés */
.kpi b,.fx-p3 b,.bt-kp b.num{font-family:var(--font-display)}
.fx-p3>div:first-child,.kpi:first-child{box-shadow:inset 0 3px 0 var(--hl)}
mark,.hl{background:var(--hl);color:var(--hl-ink);border-radius:3px;padding:0 3px}
/* tableaux */
th{color:var(--muted)}
tbody tr:hover td{background:color-mix(in srgb,var(--hl) 10%,transparent)}
/* barre d'onglets du téléphone */
nav.tabbar{border-top:3px solid var(--hl)}
nav.tabbar [aria-current="true"]{color:var(--hl) !important}
.ai-fab{background:var(--accent) !important;color:var(--accent-ink) !important}
.nl{text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)}

/* ============================================================
   MODE COMPACT — plus d'informations par écran
   Tableaux serrés, textes plus petits, explications repliées
   (2 lignes, clic pour tout lire), marges réduites, page plus large.
   ============================================================ */
.wrap{max-width:1440px}
body{font-size:14px;line-height:1.4}
main{padding-block:16px 50px !important;gap:16px !important}
#view,#view>div[style*="display:grid"]{gap:14px}
:where(#view) .fx-pane,:where(#view) .eq-pane,:where(#view) .pj-pane{gap:12px !important}
/* panneaux */
.panel{padding:12px 14px !important;border-radius:12px}
.panel-h{margin-bottom:8px !important;gap:8px}
.panel-h h2{font-size:17px !important;letter-spacing:.02em}
.panel-h h2::before{width:4px}
.panel-h .src{font-size:10.5px;padding:2px 7px}
h3{font-size:14px}
/* bandeaux de page */
.page-h,.home-head,.lv-top,section.hero,.lp-head{padding:14px 18px !important;margin-bottom:10px !important;border-radius:14px}
.page-h h1,.home-head h1,.lv-top h1,.lp-head h1,section.hero h1{font-size:clamp(24px,2.6vw,34px) !important;line-height:1.05}
.eyebrow{font-size:10.5px;letter-spacing:.1em}
.lead{font-size:13px !important;margin-top:4px !important}
/* textes d'explication : 2 lignes, clic pour déplier */
p.hint,.lead,.rp-meta{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer;font-size:11.5px !important;line-height:1.35}
p.hint.open,.lead.open,.rp-meta.open{display:block;-webkit-line-clamp:unset}
p.hint:not(.open)::after{content:""}
.hint{font-size:11.5px}
/* tableaux */
table{font-size:12.5px}
th{font-size:10px !important;padding:4px 6px !important;letter-spacing:.04em}
td{padding:4px 6px !important;line-height:1.3}
td.pts{font-size:15px}
td.team img,td img{width:16px !important;height:16px !important}
td small,th small{font-size:10.5px}
.tablewrap{border-radius:8px}
.tablewrap th{position:sticky;top:0;background:var(--surface);z-index:1}
.rp-t td,.rp-t th{padding:4px 8px !important}
.rp-t td:first-child{font-size:12.5px}
.rp-t td small{font-size:10.5px !important}
.rp-tabs button,.mk-cats button,.tabs button{padding:5px 10px !important;font-size:12.5px !important}
.rp-bar{gap:6px;margin-bottom:8px}
/* indicateurs */
.kpi{padding:8px 12px !important}
.kpi b{font-size:clamp(18px,1.8vw,24px) !important}
.kpi small{font-size:10.5px}
.bk-kp>div,.bt-kp>div{padding:8px 10px !important}
.bk-kp b.num,.bt-kp b.num{font-size:19px !important}
/* fiche de match */
.fx-head{padding:8px 12px;gap:5px}
.fx-sc{font-size:24px}
.fx-t{font-size:15px}.fx-t img{width:28px;height:28px}
.fx-meta{font-size:11px;gap:4px}.fx-meta span{padding:2px 7px}
.fx-tabs button{padding:6px 11px;font-size:12.5px}
.fx-p3{gap:6px}.fx-p3>div{padding:8px}.fx-p3 b{font-size:24px}
.fx-fac{padding:8px 10px}.fx-fac li{font-size:12.5px;margin:2px 0}
/* liste des paris */
.mk-r{padding:4px 10px !important;font-size:12.5px !important;gap:6px !important}
.mk-g h4{font-size:12px !important;padding:5px 10px !important}
/* matchs du jour */

.lv-card,.lx-live{padding:9px 11px !important;gap:6px !important}
.lx-lg h3{font-size:14px !important;padding:6px 10px !important}
/* cartes et listes */
.pf-row{margin:3px 0;font-size:12px}
.pf-cat,.mt-fiches article,.bk-mc>div{padding:8px 10px !important}
.fc-bars div{font-size:12px}
.subbar a,.subbar button{padding:4px 10px !important;font-size:12.5px}
@media (max-width:760px){
  .panel{padding:10px !important}
  .page-h,.home-head,.lv-top,section.hero,.lp-head{padding:12px !important}
  table{font-size:12px}
}
.fo{height:20px !important;min-width:30px !important;font-size:12px !important;border-radius:5px !important}
.rt{height:20px !important;font-size:11.5px !important}
nav.leagues button{font-size:14px !important;padding:4px 10px !important}
.fm-k{gap:6px !important}.fm-k>div{padding:6px 8px !important}.fm-k b{font-size:18px !important}
.fm-tag{padding:2px 8px !important;font-size:12px !important}
.lb-card{padding:7px 10px !important}.lb-card b.v{font-size:17px !important}
.cl-c,.sw>div{padding:8px 10px !important}
.lg-kp>div,.lp-kpis .kpi{padding:6px 10px !important}
.hub-hero{padding:14px 18px !important;gap:14px !important;border-radius:14px !important}
.hub-k{margin-top:10px !important;gap:6px !important}
.hub-k>*{padding:8px 10px !important}
.hub-spot .big{font-size:32px !important}
.hub-m{padding:5px 12px !important;font-size:12.5px !important}
@media (max-width:760px){
  .lg-kp{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:5px !important}
  .lg-kp>div{padding:5px 7px !important}.lg-kp b{font-size:16px !important}.lg-kp small{font-size:9.5px !important}
  .hub-k{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .hub-k b{font-size:20px !important}
  .page-h h1,.home-head h1,.lp-head h1,section.hero h1{font-size:22px !important}
  .fc{transform:scale(.9);transform-origin:top center}
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}
@media (max-width:1600px){.hide-sm{display:none}}
@media (max-width:1500px){#whoami{display:none}}
@media (max-width:1420px){.mn-b{padding:6px 7px !important;font-size:12.5px !important;gap:3px !important}}@media (max-width:1180px){.mn-b{padding:6px 6px !important;font-size:12.5px !important}}
.page-h[hidden],[data-tab][hidden]{display:none !important}
/* statut des sources : seulement le point sur les écrans moyens (évite de chevaucher le menu) */
@media (max-width:1700px){header.top .status #statusText{display:none}header.top .status{min-width:0;gap:0}}

.mm-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;align-items:center;padding:22px 24px;border-radius:20px;background:linear-gradient(120deg,#6d3ef0,#2563eb);color:#fff;margin-bottom:16px;box-shadow:0 14px 30px -18px #6d3ef0}
.mm-hero h2{color:#fff;font-size:clamp(26px,3.4vw,38px);text-transform:uppercase;margin:4px 0 8px;font-family:var(--font-display)}.mm-hero .eyebrow{color:#fde68a}.mm-hero p{margin:0;font-size:14px;opacity:.92;line-height:1.5}
.mm-st{list-style:none;margin:0;padding:0;display:grid;gap:8px}.mm-st li p{margin:0}.mm-st li{display:flex;gap:10px;align-items:flex-start;background:rgba(255,255,255,.12);border-radius:12px;padding:9px 12px;font-size:13.5px;line-height:1.4}.mm-st span{flex:none;width:24px;height:24px;border-radius:50%;background:#fff;color:#4338ca;font-weight:800;display:grid;place-items:center;font-size:12px}
.mm-cmp{margin-top:16px}.mm-cmp-h{margin:0 2px 8px}.mm-cmp-h h2{margin:0;font-size:20px;text-transform:uppercase;font-family:var(--font-display)}
.mt-calc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.mt-calc label{display:grid;gap:6px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:10px 12px}.mt-calc input{font-family:var(--font-mono);font-size:22px;font-weight:700;border:0 !important;background:none !important;padding:0 !important;color:var(--fg);outline:0}
.mt-calc label:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.mt-res{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) !important;gap:10px !important;margin-top:12px}.mt-res>div{border-radius:16px !important;border-right:1px solid var(--line) !important;border-bottom:1px solid var(--line) !important;border-top-width:5px !important;border-top-style:solid !important;border-left:1px solid var(--line) !important;padding:12px 14px !important;background:var(--surface) !important;box-shadow:var(--shadow)}.mt-res>div.def{box-shadow:0 0 0 2px var(--accent),var(--shadow) !important}.mt-res>div b.num{font-size:26px !important;font-family:var(--font-display)}
.mt-fiches{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) !important;gap:12px !important}.mt-fiches article{border-radius:16px !important;border-width:1px 1px 1px 1px;border-style:solid;border-color:var(--line);border-top-width:6px !important;padding:14px !important;background:var(--surface);box-shadow:var(--shadow)}.mt-fiches h3{font-size:16px !important;margin:4px 0 6px !important}.mt-ex{background:var(--bg);border-radius:10px;padding:8px 10px;font-size:12.5px}
.bk-mc>div{border-radius:16px !important;box-shadow:var(--shadow);border-top-width:6px !important}
@media(max-width:820px){.mm-hero{grid-template-columns:1fr}.mt-calc{grid-template-columns:1fr}}

body.is-cl .subbar{display:none}
@media(max-width:620px){.cl-tabs{flex-wrap:nowrap !important;overflow-x:auto;scrollbar-width:none}.cl-tabs .mini-btn{flex:none}}

/* filtres des matchs à venir : même design que les filtres des matchs déjà joués */
#upF{padding:14px !important;border-radius:16px !important;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,var(--surface)),var(--surface)) !important;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)) !important}
#upF .uf-top{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:10px}#upF .uf-top>b{font-size:15px}
#upF #upN{margin-left:auto;background:var(--fg);color:var(--bg);border-radius:999px;padding:3px 11px;font-size:12px}#upF #upN b{color:inherit}
#upF .uf-reset{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px;font-weight:700;font-size:12px;cursor:pointer;color:var(--fg)}#upF .uf-reset:hover{border-color:var(--loss);color:var(--loss)}
#upF .uf-grid{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(160px,1fr)) !important;gap:8px !important}
#upF .uf{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:7px 9px;gap:4px;transition:border-color .15s,box-shadow .15s}
#upF .uf.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent);background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
#upF .uf>span{font-size:10px !important;font-weight:800 !important;letter-spacing:.06em;text-transform:uppercase;color:var(--muted) !important}
#upF .uf select{width:100%;-webkit-appearance:none;appearance:none;border:1px solid color-mix(in srgb,#2563eb 30%,var(--line)) !important;border-radius:9px !important;padding:6px 28px 6px 10px !important;font-size:13px !important;font-weight:700;color:#1e40af;background:color-mix(in srgb,#2563eb 8%,var(--surface)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center !important;min-height:0 !important;cursor:pointer}
#upF .uf select:hover{border-color:#2563eb !important;background-color:color-mix(in srgb,#2563eb 14%,var(--surface)) !important}
#upF .uf.on select{background-color:#2563eb !important;color:#fff;border-color:#2563eb !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important}
#upF .uf select option{background:var(--surface);color:var(--fg);font-weight:600}
:root[data-theme="dark"] #upF .uf select{color:#93c5fd}
#upF .uf input[type=search]{border:0 !important;background:none !important;padding:2px 0 !important;font-size:13px !important;font-weight:600;min-height:0 !important}
#upF .uf.uf-q{grid-column:span 2}@media(max-width:520px){#upF .uf-grid{grid-template-columns:1fr 1fr !important}#upF .uf.uf-q{grid-column:1/-1}}
/* pastilles de forme (partout) */
.fm-chips{display:inline-flex;gap:3px;vertical-align:middle}.fm-chips i{font-style:normal;width:17px;height:17px;border-radius:4px;display:grid;place-items:center;font-size:10px;font-weight:800;color:#fff}
.fm-chips .V{background:var(--win)}.fm-chips .N{background:var(--draw)}.fm-chips .D{background:var(--loss)}
/* Classements · toutes les compétitions */
.cl-all{display:block !important;columns:3 340px;column-gap:10px}
.cl-all .cl-it{break-inside:avoid;margin:0 0 10px;display:block}
.cl-it summary{gap:10px !important}.cl-it summary b{font-size:14px}
.cl-it[open]{box-shadow:var(--shadow-h) !important;border-color:color-mix(in srgb,var(--accent) 40%,var(--line)) !important}
.cl-it[open] summary{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface)) !important}
.cl-panel .vf-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px !important}
.cl-panel #clQ{flex:1;min-width:220px;max-width:420px !important;border:1px solid var(--line) !important;border-radius:999px !important;padding:9px 16px !important;background:var(--surface) !important;font-size:14px}
.cl-panel #clQ:focus{outline:0;border-color:var(--accent) !important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.cl-panel #clOpen,.cl-panel #clClose{border-radius:999px;padding:8px 14px;font-weight:700}
.cl-panel h3.cl-reg{font-family:var(--font-display);text-transform:uppercase;font-size:17px !important;margin:18px 2px 10px !important;display:flex;align-items:center;gap:10px}
.cl-panel h3.cl-reg::after{content:"";flex:1;height:1px;background:var(--line)}
.cl-panel h3.cl-reg small{font-family:var(--font-body);text-transform:none}
.cp-side{min-width:0}.cp-side select{max-width:100%;min-width:0}
#cpR .panel{overflow-x:auto}
@media(max-width:620px){.cp-t td.v{width:auto !important;font-size:12.5px}.cp-t td.m{font-size:12px}.cpx-cats{grid-template-columns:1fr 1fr}}
.fx-tm .fm-chips,.fm-chips{flex-wrap:wrap}
.ax-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:14px;margin-top:12px}
.ax-t h4{margin:0 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.ax-t .ts-t{font-size:12.5px}