/* Layout : chargement des DVW en haut, puis trois onglets (Adversaire · Planche · Plan & PDF) ; le terrain reprend celui de la planche tactique */
:root{
  --bg:#EEF2F7; --surface:#FFFFFF; --ink:#16213A; --muted:#5B6782; --line:#D5DCE7; --soft:#E3EAF4;
  --court:#E58A4E; --free:#2E64A8; --courtline:#FFFFFF; --net:#16213A;
  --team:#16213A; --team-ink:#FFFFFF; --setter:#FFD84A;
  --opp:#FFFFFF; --opp-ink:#C2362B;
  --run:#16213A; --ball:#FFE45C; --accent:#2E64A8; --accent-ink:#FFFFFF; --danger:#B3261E;
  --pt:#7D0A1F; --ft:#0F5132; --jeu:#FFFFFF; --bubble:#16213A; --hot:#7D0A1F; --beam:#16213A; --libero:#0F6E6E; --atk:#7C808C; --opp-lib:#FFE3DF;
  --good:#1E7B4D; --bad:#B3261E; --warn:#9A6A00;
  --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E1422; --surface:#172034; --ink:#E7ECF5; --muted:#9AA6BF; --line:#2A3550; --soft:#1F2A42;
  --court:#C96E36; --free:#1D4479; --courtline:#F3F5FA; --net:#0E1422;
  --team:#0E1422; --team-ink:#FFFFFF; --setter:#FFD84A;
  --opp:#F3F5FA; --opp-ink:#C2362B;
  --run:#0E1422; --ball:#FFE45C; --accent:#6EA3EA; --accent-ink:#0E1422; --danger:#FF8A80;
  --good:#5ACB8E; --bad:#FF8A80; --warn:#E8B94A;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E1422; --surface:#172034; --ink:#E7ECF5; --muted:#9AA6BF; --line:#2A3550; --soft:#1F2A42;
  --court:#C96E36; --free:#1D4479; --courtline:#F3F5FA; --net:#0E1422;
  --team:#0E1422; --team-ink:#FFFFFF; --setter:#FFD84A;
  --opp:#F3F5FA; --opp-ink:#C2362B;
  --run:#0E1422; --ball:#FFE45C; --accent:#6EA3EA; --accent-ink:#0E1422; --danger:#FF8A80;
  --good:#5ACB8E; --bad:#FF8A80; --warn:#E8B94A;
  color-scheme:dark}
html,body{background:var(--bg)}
body{color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:18px 40px}
*{box-sizing:border-box}
[hidden]{display:none!important}
.card.bhead{gap:10px}
.pv{position:fixed;inset:0;z-index:50;background:rgba(14,20,34,.72);display:flex;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 12px) max(12px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 12px) max(12px,env(safe-area-inset-left,0px))}
.pvbox{background:var(--bg);border-radius:14px;width:100%;max-width:760px;display:flex;flex-direction:column;min-height:0;max-height:100%;overflow:hidden}
.pvhead{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--surface)}
.pvpages{overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:16px;align-items:center}
.pvpage{margin:0;display:flex;flex-direction:column;gap:4px;align-items:center;width:100%}
.pvpage canvas{width:100%;max-width:680px;height:auto;box-shadow:0 2px 12px rgba(0,0,0,.25);border-radius:2px;background:#fff}
.pvpage figcaption{font-size:.78rem;color:var(--muted)}
.subtabs{max-width:640px}.pdftabs{max-width:520px}.pdftabs button{min-height:40px;font-size:.95rem}.subtabs button{min-height:38px}
#srvTable tr[data-s]{cursor:pointer}#srvTable tr.allrow td{border-bottom:2px solid var(--line)}#srvTable tr[data-s]:hover{background:var(--soft)}
.bhead .lbl{width:100%}
#rotSeg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
#phSeg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}

.bgrid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);grid-template-areas:"court" "info";align-items:start}
.bcourt{grid-area:court;display:flex;flex-direction:column;gap:8px;min-width:0;max-width:380px;width:100%;margin:0 auto}.binfo{grid-area:info;display:flex;flex-direction:column;gap:14px;min-width:0}
@media (min-width:760px){.bgrid{grid-template-columns:minmax(0,380px) minmax(0,1fr);grid-template-areas:"court info"}}
.card.bctl{padding:8px 10px;gap:6px;border-radius:10px}
.bctl .grp{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 6px}
.bctl .glbl{flex:0 0 4.4em;font-size:.62rem;letter-spacing:.06em}
.bctl .grp > .chips{flex:1;min-width:0;gap:4px}
.bctl .grp select{width:auto;flex:0 0 auto}
.bctl .chip{font-size:.76rem;padding:2px 9px;min-height:26px}
.bctl select{width:auto;min-height:28px;padding:2px 8px;font-size:.85rem}
.bctl .lbl{font-size:.74rem}
.grp{display:flex;flex-direction:column;gap:6px}
.bgroups{gap:6px!important}
.glbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700}
.bgroups{display:flex;flex-direction:column;gap:14px}.bgroups:empty{display:none}
.bctl select{width:100%}
.toolbar{display:flex;flex-direction:column;gap:6px}
.toolbar .seg button{min-height:34px}
.mini-btns{gap:6px}.mini-btns button{min-height:30px;padding:3px 10px;font-size:.82rem;font-weight:500}
.court{max-width:380px}
#addBoard{align-self:stretch}
.legwrap summary,.colwrap summary{cursor:pointer;font-weight:600;font-size:.88rem;color:var(--muted)}
.legwrap{display:flex;flex-direction:column;gap:6px}.legwrap .legend{margin-top:6px}
.colwrap summary{list-style:none;display:flex;justify-content:space-between;align-items:center}
.colwrap summary::after{content:"+";font-size:1.2rem;color:var(--muted)}.colwrap[open] summary::after{content:"–"}
.colwrap summary h2{display:inline}

.app{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:.01em;text-wrap:balance;margin:0}
h1{font-size:2.1rem;line-height:1}
h2{font-size:1.15rem;text-transform:uppercase;letter-spacing:.06em}
h3{font-size:.95rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:600}
.muted{color:var(--muted)} .small{font-size:.85rem}
p{margin:0}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 11px;font-weight:600;min-height:36px}
button:hover{border-color:var(--accent)}
button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,tr[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
button.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
button:disabled{opacity:.45;cursor:not-allowed}
select,input[type=text],input[type=date],input[type=number],textarea{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 10px;min-height:36px;min-width:0}
textarea{width:100%;resize:vertical;min-height:70px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.head{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;justify-content:space-between}
.badge{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:6px;padding:2px 7px;background:var(--soft);color:var(--muted)}
.badge.ex{background:var(--setter);color:#16213A}
.files{display:flex;flex-wrap:wrap;gap:6px}
.matches{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.matches li{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--bg)}
.matches .check{font-weight:500}
.matches b{font-weight:600}
.file{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:3px 4px 3px 11px;font-size:.85rem;background:var(--bg)}
.file button{min-height:26px;padding:0 8px;border-radius:999px;font-size:.8rem}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.lbl{display:flex;flex-direction:column;gap:4px;font-size:.78rem;font-weight:600;color:var(--muted);min-width:0}
.lbl > select,.lbl > input{color:var(--ink);font-size:.95rem;font-weight:500}
.tabs{display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;border-bottom:2px solid var(--line);scrollbar-width:none}
.tabs button{border:0;border-radius:8px 8px 0 0;background:transparent;font-family:var(--display);font-size:1.1rem;letter-spacing:.04em;text-transform:uppercase;padding:8px 14px;color:var(--muted);white-space:nowrap;flex:none}
@media (max-width:520px){.tabs button{font-size:.95rem;padding:7px 10px}.seg button{min-width:0}.lu{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.msg{border:1px solid var(--danger);color:var(--danger);border-radius:10px;padding:10px 12px}
.msg.info{border-color:var(--accent);color:var(--ink);background:var(--soft)}
.card.over{outline:2px dashed var(--accent);outline-offset:3px}
.ok{color:var(--good);font-weight:600}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.88rem;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700;vertical-align:bottom}
td.r,th.r{text-align:right}
tr[data-p]{cursor:pointer}
tr[data-p]:hover,tr.sel{background:var(--soft)}
.role{display:inline-block;min-width:2.1em;text-align:center;font-family:var(--display);font-weight:700;border-radius:5px;background:var(--soft);padding:0 4px}
.lowp{color:var(--bad);font-weight:700}.highp{color:var(--good);font-weight:700}
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:860px){.split{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)} .split.board{grid-template-columns:minmax(0,350px) minmax(0,1fr)}}
.mini{width:100%;max-width:300px;margin:0 auto;display:block}
.court{width:100%;max-width:350px;margin:0 auto;display:block;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:12px}
.tk{cursor:grab}
.erase .ln{cursor:pointer}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.8rem;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:22px;height:4px;border-radius:2px;display:inline-block}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block;flex:none}
.dot.big{width:26px;height:26px}
.tkedit{padding:12px;gap:8px;border-color:var(--accent)}
.tkedit .head{flex-wrap:nowrap;align-items:center}.tkedit .head h3{min-width:0}
button[aria-pressed="true"] .muted{color:inherit;opacity:.8}
.colrow{display:grid;grid-template-columns:6.5em 44px minmax(0,1fr) 44px 26px;gap:8px;align-items:center}
.colrow input[type=color]{width:44px;height:34px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.colrow input[hidden]{display:block!important;visibility:hidden}
.seg{display:flex;gap:4px;flex-wrap:wrap}
.seg button{flex:1 1 0;min-width:56px;padding:5px 6px;line-height:1.1}
.seg button small{display:block;font-size:.72rem;font-weight:500;opacity:.85}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:.82rem;border-radius:999px;padding:4px 11px;min-height:30px}
.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.stat div{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--bg)}
.stat b{display:block;font-family:var(--display);font-size:1.7rem;line-height:1.05}
.stat small{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.bars{display:grid;gap:5px}
.bar{display:grid;grid-template-columns:5.2em 1fr 3.2em;gap:8px;align-items:center;font-size:.85rem}
.bar .t{height:10px;border-radius:5px;background:var(--soft);overflow:hidden}
.bar .t i{display:block;height:100%;background:var(--accent);border-radius:5px}
.lu{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 10px;font-size:.85rem}
.lu li{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lu .z{font-family:var(--display);font-weight:700;color:var(--muted);margin-right:4px}
.keys{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.keys li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--bg)}
.keys input[type=checkbox]{width:18px;height:18px;margin-top:4px;accent-color:var(--accent)}
.keys textarea{min-height:44px;border:0;background:transparent;padding:2px 0}
.keys .cat{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.keys li.off{opacity:.6}
.check{display:flex;align-items:center;gap:8px;font-weight:600}
.check input{width:18px;height:18px;accent-color:var(--accent)}
.roster{display:grid;grid-template-columns:3.2em 4.5em minmax(0,1fr) 7.5em;gap:6px;align-items:center}
.roster input,.roster select{width:100%}
.confirm{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;border:1px solid var(--danger);border-radius:10px}
.confirm .del{background:var(--danger);color:#fff;border-color:var(--danger)}
.pages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pages li{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:8px;padding:6px 8px 6px 10px;font-size:.85rem;background:var(--bg)}
.pages li.off{opacity:.55}
.pages .check{font-weight:500;align-items:flex-start;min-width:0}
.pages .check > span{display:flex;flex-direction:column;min-width:0}
.pages b{display:block;font-family:var(--display);font-size:1rem}
.pages .mv{display:flex;gap:4px;flex:none}
.pages .mv button{min-width:36px;padding:4px 0}
.cpages li{align-items:flex-start}
.cpages .thumb{width:62px;flex:none;border-radius:6px}
.cpages .cbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.cpages .cbody input{width:100%;font-weight:600}
.cpages textarea{min-height:44px}
.cpages li.empty{display:block;text-align:left}
.empty{border:1px dashed var(--line);border-radius:12px;padding:24px;text-align:center;color:var(--muted)}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}
/* ===== Supaiku : coquille, calendrier, équipe, joueurs ===== */
:root{--club1:#16213A;--club2:#FFD84A;--okbg:#E3F3EA;--badbg:#FBE5E3;--warnbg:#FFF3D6}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--okbg:#16352A;--badbg:#3A1F1E;--warnbg:#3A2F12}}
:root[data-theme="dark"]{--okbg:#16352A;--badbg:#3A1F1E;--warnbg:#3A2F12}
.chead{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.cid{display:flex;align-items:center;gap:12px;min-width:0}
.cid h1{font-size:1.9rem}
.cid .eyebrow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cRole{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rolesw{width:auto}.rolesw button{min-width:0;padding:5px 12px;white-space:nowrap}
.mechip{display:inline-flex;align-items:center;gap:6px}
#cStatus{font-size:.78rem;color:var(--muted)}
.ctabs{position:sticky;top:0;z-index:20;background:var(--bg);padding-top:4px}
.view{display:flex;flex-direction:column;gap:16px}
.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.ghost:hover{color:var(--ink)}
.danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.okc{color:var(--good)}.badc{color:var(--bad)}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;font-weight:700;border-radius:999px;padding:3px 10px;background:var(--soft);color:var(--ink)}
.pill.ok{background:var(--okbg);color:var(--good)}.pill.bad{background:var(--badbg);color:var(--bad)}.pill.warn{background:var(--warnbg);color:var(--warn)}
.glbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700}

/* badges d'équipe et maillots */
.tbadge{--h:210;flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;font-family:var(--display);font-weight:700;font-size:.85rem;letter-spacing:.02em;color:#fff;background:hsl(var(--h) 55% 38%);box-shadow:inset 0 0 0 2px hsl(var(--h) 60% 62%)}
.tbadge.us{background:var(--club1);color:#fff;box-shadow:inset 0 0 0 3px var(--club2)}
.tbadge.big{width:52px;height:52px;font-size:1.25rem}
.jersey{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px 12px 14px 14px;font-family:var(--display);font-weight:700;font-size:1.35rem;color:#fff;background:var(--club1);box-shadow:inset 0 -5px 0 var(--club2)}
.jersey.sm{width:28px;height:28px;font-size:.95rem;border-radius:8px;box-shadow:inset 0 -3px 0 var(--club2)}
.jersey.xl{width:76px;height:76px;font-size:2.4rem;border-radius:18px 18px 22px 22px;box-shadow:inset 0 -8px 0 var(--club2)}

/* prochain match */
.hero{border-left:6px solid var(--c);background:linear-gradient(135deg,color-mix(in srgb,var(--c) 9%,var(--surface)),var(--surface) 60%)}
.hrow{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:flex-start}
.hmain{display:flex;flex-direction:column;gap:10px;min-width:0;flex:1 1 300px}
.vs{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vsx{font-family:var(--display);font-weight:700;color:var(--muted);font-size:1.1rem}
.hname{font-size:1.6rem;text-transform:none;letter-spacing:0}
.hside{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.count{font-family:var(--display);font-weight:700;font-size:2.6rem;line-height:1;color:var(--c)}
.form{display:flex;align-items:center;gap:5px}
.fdot{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:.72rem;font-weight:700;color:#fff}
.fdot.w{background:var(--good)}.fdot.l{background:var(--bad)}
.brief{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--bg);max-width:640px}
.brief ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:.9rem}
.brief button{align-self:flex-start}

/* calendrier */
.caltop{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
.caltop .nav{display:flex;align-items:center;gap:8px;min-width:0}
.caltop .nav h2{min-width:9em;text-align:center;text-transform:none;letter-spacing:0;font-size:1.35rem}
@media (max-width:700px){.caltop{flex-direction:column;align-items:stretch}.caltop .nav h2{flex:1;min-width:0;font-size:1.1rem}.caltop .row{justify-content:space-between}.tlegend{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.tl{flex:none}.ctabs button{font-size:.8rem;padding:7px 8px;letter-spacing:.02em}.chead{gap:6px}.cid h1{font-size:1.5rem}}
.caltop .nav button[data-cal="prev"],.caltop .nav button[data-cal="next"]{width:38px;padding:0;font-size:1.3rem}
.calv{width:auto}.calv button{min-width:0;padding:5px 12px}
.tlegend{display:flex;flex-wrap:wrap;gap:6px}
.tl{--c:#888;display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:600;border-radius:999px;padding:3px 10px 3px 7px;min-height:30px;background:color-mix(in srgb,var(--c) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--c) 45%,transparent);color:var(--ink);cursor:pointer}
button.tl[aria-pressed="false"]{opacity:.45;background:transparent;text-decoration:line-through}
button.tl[aria-pressed="true"]{background:color-mix(in srgb,var(--c) 14%,var(--surface));color:var(--ink);border-color:color-mix(in srgb,var(--c) 45%,transparent)}
.month{display:flex;flex-direction:column;gap:4px}
.mh,.mg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.mh span{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:center}
.day{min-height:96px;border:1px solid var(--line);border-radius:10px;padding:4px;display:flex;flex-direction:column;gap:3px;background:var(--surface);min-width:0}
.day.out{opacity:.45}
.day.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.day.sel{background:var(--soft)}
.day.hm{border-color:color-mix(in srgb,#D9472B 55%,var(--line))}
.dnum{border:0;background:transparent;padding:2px 6px;min-height:26px;font-family:var(--display);font-size:1.05rem;font-weight:700;align-self:flex-start;border-radius:7px}
.day.today .dnum{background:var(--accent);color:var(--accent-ink)}
.evs{display:flex;flex-direction:column;gap:3px;min-width:0}
.ev{--c:#888;display:flex;align-items:center;gap:5px;width:100%;min-width:0;min-height:24px;padding:2px 6px 2px 4px;border-radius:7px;border:0;border-left:3px solid var(--c);background:color-mix(in srgb,var(--c) 15%,var(--surface));font-size:.74rem;font-weight:500;text-align:left;color:var(--ink)}
.ev .ic{flex:none;font-size:.9rem;line-height:1}
.ev .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ev.m{font-weight:700;background:color-mix(in srgb,var(--c) 22%,var(--surface))}
.res{flex:none;font-size:.68rem;font-weight:700;border-radius:5px;padding:0 4px;color:#fff}
.res.w{background:var(--good)}.res.l{background:var(--bad)}
.more{border:0;background:transparent;color:var(--muted);font-size:.74rem;min-height:20px;padding:0 4px;text-align:left}
.dayp{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.dayp h3{text-transform:none;letter-spacing:0;font-size:1.1rem;color:var(--ink)}
.evl{display:flex;flex-direction:column;gap:6px}
.evl .ev{font-size:.9rem;min-height:38px;padding:6px 10px 6px 8px}
.evl .ev .ic{font-size:1.15rem}
.evl .ev .res{font-size:.78rem;padding:1px 6px}
.week{display:flex;flex-direction:column;gap:6px}
.wd{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:start;border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--surface)}
.wd.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.wdh{display:flex;flex-direction:column;align-items:flex-start;gap:0;font-size:.8rem;color:var(--muted)}
.wdh b{font-family:var(--display);font-size:1.25rem;color:var(--ink)}
.wd.today .wdh b{color:var(--accent)}
.wdh .add{min-height:28px;padding:0 8px;margin-top:2px}
.free{padding:8px 2px}
@media (max-width:700px){
 .day{min-height:58px;padding:3px}
 .evs{flex-direction:row;flex-wrap:wrap;gap:2px}
 .day .ev{width:auto;padding:1px;border-left:0;min-height:20px;background:transparent}
 .day .ev .lbl,.day .ev .res{display:none}
 .day .ev .ic{font-size:.95rem}
 .day.hm .dnum{color:#D9472B}
 .dnum{font-size:.95rem;padding:1px 4px;min-height:22px}
 .more{font-size:.68rem;padding:0 2px}
 .mh,.mg{gap:2px}
 .hside{align-items:flex-start;flex-direction:row-reverse;justify-content:space-between;width:100%}
 .count{font-size:2rem}
}
.sumrow{display:flex;flex-wrap:wrap;gap:6px}
.mlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.mrow button{display:grid;grid-template-columns:5.8em auto minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;border-left:4px solid var(--line);padding:8px 12px}
.mrow.w button{border-left-color:var(--good)}.mrow.l button{border-left-color:var(--bad)}
.mdate{font-size:.8rem;color:var(--muted);font-weight:600}
.mopp{display:flex;flex-direction:column;min-width:0}.mopp small{color:var(--muted);font-weight:500}
.mres{font-family:var(--display);font-size:1.2rem}
.mrow.w .mres{color:var(--good)}.mrow.l .mres{color:var(--bad)}.mres.up{color:var(--muted);font-size:1rem}

/* modale */
.md{position:fixed;inset:0;z-index:60;background:rgba(14,20,34,.6);display:flex;align-items:flex-end;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 12px) max(0px,env(safe-area-inset-right,0px)) 0 max(0px,env(safe-area-inset-left,0px))}
@media (min-width:700px){.md{align-items:center;padding:24px}}
.mdbox{background:var(--surface);width:100%;max-width:720px;max-height:100%;overflow:auto;border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
@media (min-width:700px){.mdbox{border-radius:16px;max-height:90vh}}
.mhead{position:sticky;top:0;z-index:1;display:flex;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--surface);border-left:6px solid var(--c,var(--line))}
.mhead > div{flex:1;min-width:0}
.mhead h2{text-transform:none;letter-spacing:0;font-size:1.35rem}
.mhead .x{flex:none;width:38px;padding:0;font-size:1.4rem;margin-left:auto}
.bigic{font-size:1.9rem}
.mbody{padding:14px 16px 18px;display:flex;flex-direction:column;gap:10px}
.bigres{font-family:var(--display);font-size:1.5rem;font-weight:700}
.note{border-left:3px solid var(--line);padding-left:10px}
.ef .grid2{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.ef input[type=time]{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 10px;min-height:36px;color:var(--ink)}
.tpick{display:flex;flex-wrap:wrap;gap:6px}
.tpick .tl{position:relative}
.tpick input{position:absolute;opacity:0;pointer-events:none}
.tpick .tl:has(input:checked){background:var(--c);color:#fff;border-color:var(--c)}
.tpick .tl:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.segr{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-weight:600;color:var(--ink);cursor:pointer;min-height:36px;background:var(--surface)}
.segr input{position:absolute;opacity:0;pointer-events:none}
.segr:has(input:checked){background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.segr:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.rsets{display:flex;flex-wrap:wrap;gap:4px}
.rsets i{font-style:normal;font-size:.75rem;font-weight:700;border-radius:6px;padding:1px 6px;background:var(--soft)}
.rsets i.w{background:var(--okbg);color:var(--good)}.rsets i.l{background:var(--badbg);color:var(--bad)}
.rsets.big i{display:flex;flex-direction:column;align-items:center;font-family:var(--display);font-size:1.3rem;padding:4px 12px}
.rsets.big small{font-family:var(--body);font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;opacity:.8}
.mvp{font-size:.95rem}
.cmp td:first-child{white-space:normal}

/* équipe */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.kpi{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg);display:flex;flex-direction:column;gap:2px}
.kpi small{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.kpi b{font-family:var(--display);font-size:2rem;line-height:1.05}
.kpi span{font-size:.74rem;color:var(--muted)}
.spark{height:22px;width:auto;max-width:100%;fill:var(--accent);opacity:.75;align-self:flex-start;margin:2px 0}
.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.rcard{display:flex;flex-direction:column;align-items:stretch;gap:6px;text-align:left;padding:10px 12px;border-top:4px solid var(--line);font-weight:500}
.rcard.w{border-top-color:var(--good)}.rcard.l{border-top-color:var(--bad)}
.rtop{display:flex;justify-content:space-between;align-items:center}
.rvs{display:flex;align-items:center;gap:8px;min-width:0}.rvs b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsc{font-family:var(--display);font-size:2rem;font-weight:700;line-height:1}
.rcard.w .rsc{color:var(--good)}.rcard.l .rsc{color:var(--bad)}
.lb{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lb li{display:grid;grid-template-columns:2em auto minmax(0,1fr) minmax(60px,1.2fr) auto;gap:8px;align-items:center;padding:6px 8px;border-radius:10px;background:var(--bg)}
.lb li.me{outline:2px solid var(--accent)}
.rk{text-align:center;font-family:var(--display);font-weight:700;font-size:1.1rem}
.lbn{display:flex;flex-direction:column;min-width:0}.lbn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lbn small{color:var(--muted);font-size:.74rem}
.lbv{font-family:var(--display);font-weight:700;font-size:1.05rem;white-space:nowrap}
@media (max-width:520px){.lb li{grid-template-columns:1.8em auto minmax(0,1fr) auto}.lb .hbar{display:none}}
.hbar{display:block;height:10px;border-radius:5px;background:var(--soft);overflow:hidden}
.hbar i{display:block;height:100%;border-radius:5px;background:var(--accent)}
.hbar.hi i{background:var(--good)}.hbar.lo i{background:var(--warn)}
tr.tot td{border-top:2px solid var(--line)}
tr[data-rep]{cursor:pointer}tr[data-rep]:hover{background:var(--soft)}

/* joueurs */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.pgrid.small{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.pcard{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"j n o" "j m o";gap:2px 10px;align-items:center;text-align:left;padding:10px;font-weight:500}
.pgrid.small .pcard{grid-template-areas:"j n o" "j n o"}
.pcard .jersey{grid-area:j}.pcard .pn{grid-area:n;display:flex;flex-direction:column;min-width:0}.pcard .pn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pcard .pn small{color:var(--muted);font-size:.74rem}
.pcard .pmeta{grid-area:m;font-size:.76rem;color:var(--muted)}
.ovr{grid-area:o;font-family:var(--display);font-weight:700;font-size:1.6rem;line-height:1;color:var(--club1);background:color-mix(in srgb,var(--club2) 55%,var(--surface));border-radius:10px;padding:6px 8px;min-width:2.2em;text-align:center}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ovr{color:var(--ink);background:color-mix(in srgb,var(--club2) 25%,var(--surface))}}
:root[data-theme="dark"] .ovr{color:var(--ink);background:color-mix(in srgb,var(--club2) 25%,var(--surface))}
.ovr.na{background:var(--soft);color:var(--muted)}
.ovr.big{display:flex;flex-direction:column;align-items:center;font-size:2.6rem;padding:8px 14px}
.ovr.big small{font-family:var(--body);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.back{align-self:flex-start}
.pc{background:linear-gradient(160deg,color-mix(in srgb,var(--club1) 10%,var(--surface)),var(--surface) 55%)}
.pchero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center}
.pcid h2{font-size:1.7rem;text-transform:none;letter-spacing:0}
.rates{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px 18px}
.rate{display:grid;grid-template-columns:6.2em minmax(0,1fr) 2.2em;gap:8px;align-items:center;font-size:.86rem;font-weight:600}
.rate b{font-family:var(--display);font-size:1.15rem;text-align:right}
.facts{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.facts li{background:var(--bg);border-radius:10px;padding:8px 12px}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.bdg{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;border:1px solid var(--line);border-radius:12px;padding:10px 8px;background:color-mix(in srgb,var(--club2) 18%,var(--surface))}
.bdg .bi{font-size:1.8rem;line-height:1.1}
.bdg small{font-size:.74rem;color:var(--muted)}
.bdg.lock{background:var(--bg);opacity:.7}.bdg.lock .bi{filter:grayscale(1);opacity:.5}
.bdg:not(.lock) .bn{color:var(--ink);font-weight:700;font-size:.9rem}
.pbars{display:flex;align-items:flex-end;gap:10px;height:150px;padding-top:8px;overflow-x:auto}
.pbar{flex:0 0 52px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.pbar i{display:block;width:30px;border-radius:6px 6px 2px 2px;background:var(--accent)}
.pbar .pval{font-family:var(--display);font-weight:700}
.pbar .pl{display:flex;flex-direction:column;align-items:center;font-size:.68rem;color:var(--muted)}
.pbar .tbadge{width:24px;height:24px;font-size:.66rem}

/* adversaires et matchs */
.nextopp{display:flex;flex-wrap:wrap;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface)}
.nextopp > div{flex:1 1 170px;min-width:0}
.pm .app{max-width:none;margin:0}
.pmh{font-size:1.6rem;text-transform:none;letter-spacing:0}
.ro .pm-edit{display:none!important}
.libl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.libl li{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--bg)}
.lmain{display:flex;flex-direction:column;min-width:0}
.tedit{display:flex;flex-direction:column;gap:6px}
.trow{display:grid;grid-template-columns:3.2em minmax(0,1fr) 44px 38px;gap:6px;align-items:center}
.trow input[type=color]{width:44px;height:36px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.tico{text-align:center;font-size:1.1rem}
.ef input[type=color]{width:52px;height:36px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.loading{padding:40px 0;text-align:center;color:var(--muted)}
.calv button,.rolesw button{flex:none}
@media (max-width:700px){
 .calcard .tlegend{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
 .ctabs button{font-size:.76rem;padding:7px 6px}
 .pchero{grid-template-columns:auto minmax(0,1fr)}
 .ovr.big{grid-column:1/-1;flex-direction:row;justify-content:center;align-items:baseline;gap:10px;font-size:2.2rem;padding:6px 12px}
 .pcid h2{font-size:1.4rem}
 .rate{grid-template-columns:5.6em minmax(0,1fr) 2em}
}

.bdg{font:inherit;color:inherit;cursor:pointer;min-height:0}
.bdg .how{display:none;font-size:.74rem;color:var(--muted);font-weight:500}
.bdg[aria-expanded="true"]{outline:2px solid var(--accent);outline-offset:1px}
.bdg[aria-expanded="true"] .how{display:block}
.bdg.lock .bn{font-weight:600}
.ro #t-plan{display:none!important}
#pubCard .head .pill{align-self:flex-start}
.pubk{width:auto}
.bar b{text-align:right;font-weight:600}

.publ{display:flex;flex-direction:column;gap:8px}.nextopp.isnext{border-color:#D9472B;box-shadow:inset 4px 0 0 #D9472B}

.cgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
@media (min-width:900px){.cgrid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}.clivew{position:sticky;top:56px}}
.clivew{display:flex;flex-direction:column;gap:8px}
.clive{display:flex;flex-direction:column;gap:12px;max-height:80vh;overflow:auto;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.clive.busy{opacity:.55}
.clive canvas{width:100%;height:auto;box-shadow:0 1px 6px rgba(0,0,0,.2);background:#fff;border-radius:2px}
.lay{display:flex;flex-direction:column;gap:6px;border-top:1px dashed var(--line);padding-top:6px;margin-top:2px}
.lrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lrow .glbl{width:4.6em}
.lrow input[type=range]{flex:1;min-width:90px;accent-color:var(--accent)}
.lrow > button{min-height:30px;width:32px;padding:0}
.lrow .seg{flex:1}.lrow .seg button{min-height:30px;font-size:.8rem}
.szv{font-family:var(--display);min-width:3em;text-align:right}
.lay input[type=checkbox]{width:18px;flex:none}
.lay .check{justify-content:flex-start;font-weight:500}
.lrow .glbl{width:5.6em;flex:none}

@media (min-width:900px){.cgrid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.clist{display:flex;flex-direction:column;gap:8px;min-width:0}
.clive{max-height:none;overflow:visible;border:0;padding:0;background:transparent}
.pgf{display:flex;flex-direction:column;align-items:center;gap:4px}
.pgw{position:relative;width:100%;box-shadow:0 2px 10px rgba(0,0,0,.22);background:#fff;border-radius:2px;touch-action:pan-y}
.pgw canvas{display:block;width:100%;height:auto;box-shadow:none}
.pgcap{font-size:.78rem;color:var(--muted)}
.ibox{position:absolute;border:1.5px dashed transparent;border-radius:4px;cursor:pointer}
.ibox:hover,.ibox.sel,.ibox.drag{border-color:var(--accent);background:rgba(46,100,168,.06)}
.itag{position:absolute;left:-1px;top:-1px;background:var(--accent);color:var(--accent-ink);font-size:.68rem;font-weight:700;border-radius:4px 0 4px 0;padding:0 5px;opacity:0}
.itools{position:absolute;right:2px;top:2px;display:flex;align-items:center;gap:3px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:2px;opacity:0;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.itools button{min-height:26px;width:26px;padding:0;font-size:1rem;line-height:1}
.itools b{font-size:.72rem;min-width:2.8em;text-align:center;color:var(--ink)}
.ihandle{position:absolute;right:-7px;bottom:-7px;width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid #fff;cursor:nwse-resize;opacity:0;touch-action:none}
.ibox:hover .itools,.ibox.sel .itools,.ibox.drag .itools,.ibox:hover .ihandle,.ibox.sel .ihandle,.ibox.drag .ihandle,.ibox:hover .itag,.ibox.sel .itag{opacity:1}
@media (hover:none){.itools,.ihandle,.itag{opacity:1}}
#cpages li.sel{outline:2px solid var(--accent)}
#cPresets .chip{min-height:28px;padding:2px 10px}

.cgrid{grid-template-columns:minmax(0,1fr)!important}
.clivew{position:static!important}
.clive{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:start}

.clive{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))!important}
@media (max-width:520px){.clive{grid-template-columns:minmax(0,1fr)!important}}

.mdates{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--bg)}
.mpick{max-width:340px}
.mph{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:4px}
.mph b{text-transform:capitalize;font-family:var(--display);font-size:1.05rem}
.mph button{min-height:30px;width:34px;padding:0}
.mpg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.mpg span{text-align:center;font-size:.68rem;font-weight:700;color:var(--muted)}
.mpg button{min-height:34px;padding:0;font-weight:600;border-radius:8px;position:relative}
.mpg button.out{opacity:.4}
.mpg button.has::after{content:"";position:absolute;bottom:4px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--muted)}
.mpg button.main{background:var(--ink);color:var(--bg);border-color:var(--ink);opacity:1}
.mpg button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.mchips{display:flex;flex-wrap:wrap;gap:4px}.mchips:empty{display:none}

.chead{background:var(--club1);color:var(--club-ink,#fff);border-radius:16px;padding:14px 16px;box-shadow:inset 0 -5px 0 var(--club2)}
.chead .eyebrow,.chead #cStatus{color:inherit;opacity:.8}
.chead h1{color:inherit}
.chead .tbadge.us{box-shadow:inset 0 0 0 3px var(--club2),0 0 0 2px rgba(255,255,255,.5)}
.hbtns{gap:6px;justify-content:flex-end}
.hbtns .chip{background:rgba(255,255,255,.92);color:#16213A;border-color:transparent}
.ctabs button[aria-selected="true"]{background:var(--club1);color:var(--club-ink,#fff);box-shadow:inset 0 -3px 0 var(--club2)}
.tbadge.logo{background:#fff!important;overflow:hidden;padding:3px}
.tbadge.logo img{width:100%;height:100%;object-fit:contain;border-radius:50%}
.onb{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:28px 22px 22px}
.onb .x{position:absolute;right:12px;top:12px;width:36px;padding:0;font-size:1.3rem}
.onbic{font-size:3rem;line-height:1;width:84px;height:84px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--club2) 35%,var(--surface));box-shadow:inset 0 0 0 4px var(--club1)}
.onb h2{text-transform:none;letter-spacing:0;font-size:1.6rem}
.onb p{max-width:46ch;color:var(--ink);line-height:1.5}
.onbdots{display:flex;gap:6px}.onbdots i{width:8px;height:8px;border-radius:50%;background:var(--line)}.onbdots i.on{background:var(--club1);width:22px;border-radius:4px}
.onbnav{justify-content:center;gap:10px;margin-top:4px}.onbnav button{min-width:120px}
.bprev{display:flex;align-items:center;gap:12px;border-radius:14px;padding:14px 16px}
.bprev b{font-family:var(--display);font-size:1.5rem}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.pre{width:40px;height:40px;min-height:0;border-radius:50%;padding:0;border:2px solid var(--line)}
.sw2{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:inline-block}
.sugrow{background:var(--bg);border-radius:10px;padding:6px 10px}
#brC1,#brC2{width:52px;height:36px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.chead .rolesw button[aria-pressed="false"],.chead .mechip{background:rgba(255,255,255,.92);color:#16213A;border-color:transparent}
.chead .rolesw button[aria-pressed="true"]{background:var(--club2);color:#16213A;border-color:var(--club2)}

.lghead .head{align-items:center}
.lgme{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:12px;padding:8px 14px}
.lgme b{font-family:var(--display);font-size:2rem;line-height:1;display:block}
.lgme small{color:var(--muted);font-weight:600}
.lgt tr.us td{background:color-mix(in srgb,var(--club2) 22%,var(--surface));font-weight:600}
.lgn{display:inline-flex;align-items:center;gap:8px}.lgn .tbadge{width:26px;height:26px;font-size:.7rem}
.lgf{display:inline-flex;gap:3px}.lgf i{font-style:normal;font-size:.66rem;font-weight:700;color:#fff;width:18px;height:18px;border-radius:50%;display:inline-grid;place-items:center}.lgf i.w{background:var(--good)}.lgf i.l{background:var(--bad)}
.jsel .chip{min-width:3.2em}
.lgm{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lgm li{display:grid;grid-template-columns:9.5em minmax(0,1fr) 4.2em minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--bg)}
.lgm li.us{outline:2px solid color-mix(in srgb,var(--club1) 60%,transparent)}
.lgd{font-size:.78rem;color:var(--muted);font-weight:600}
.lgteam{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lgteam.h{text-align:right}.lgteam.win{font-weight:700}
.lgsc{text-align:center;font-family:var(--display);font-weight:700;font-size:1.15rem}
.lgx{display:flex;gap:6px;align-items:center;justify-content:flex-end;min-width:0}.lgx small{white-space:nowrap}
.tiny{min-height:26px;padding:0 6px}
@media (max-width:640px){.lgm li{grid-template-columns:minmax(0,1fr) 3.4em minmax(0,1fr);row-gap:2px}.lgd{grid-column:1/-1}.lgx{grid-column:1/-1;justify-content:flex-start}.lgx:empty{display:none}}
.scg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.scg button{min-height:48px;font-family:var(--display);font-size:1.3rem}

body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}
.bnav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:center;gap:2px;background:var(--surface);border-top:1px solid var(--line);padding:6px max(8px,env(safe-area-inset-left,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-right,0px));box-shadow:0 -4px 16px rgba(14,20,34,.08)}
.bnav button{flex:1 1 0;max-width:130px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:transparent;color:var(--muted);padding:6px 2px;border-radius:12px;font-size:.7rem;font-weight:600;min-height:52px}
.bnav button svg{width:24px;height:24px}
.bnav button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bnav button[aria-selected="true"]{color:var(--club1);background:color-mix(in srgb,var(--club1) 10%,transparent)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .bnav button[aria-selected="true"]{color:var(--ink);background:color-mix(in srgb,var(--club2) 22%,transparent)}}
:root[data-theme="dark"] .bnav button[aria-selected="true"]{color:var(--ink);background:color-mix(in srgb,var(--club2) 22%,transparent)}
.gear{width:44px;height:44px;min-height:0;padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:#16213A;border:0}
.gear svg{width:24px;height:24px}
.gear[aria-pressed="true"]{background:var(--club2);color:#16213A}
.chead{flex-wrap:nowrap}
.setl{display:flex;flex-direction:column;gap:8px}
.setr{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:10px;background:var(--bg)}
.setr > div:first-child{display:flex;flex-direction:column;min-width:0}
.setsec{margin-top:6px}
.clivew{position:static!important}
.chead{margin-bottom:6px}

.gear.sw{margin-right:6px}
#cRole{display:flex;align-items:center}
.spl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.spl li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--bg)}
.spl li b{flex:1;min-width:0}
.spl li.cur{outline:2px solid var(--club1)}
.spl input{width:100%}
#cRole{flex-wrap:nowrap!important;gap:6px}.gear.sw{margin-right:0}

.tbadge.logo{padding:0!important}
.tbadge.logo img{object-fit:cover!important}
.cropb{align-items:center}
.cropv{display:grid;place-items:center;padding:8px}
.cropv canvas{border-radius:50%;cursor:grab;touch-action:none;box-shadow:0 0 0 3px var(--club2),0 2px 10px rgba(0,0,0,.2);background:repeating-conic-gradient(#e5e7eb 0 25%,#fff 0 50%) 0 0/16px 16px}
.cropb .lrow{width:100%;max-width:360px}

.themes{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.thr{display:flex;gap:8px;flex-wrap:wrap}
.thb{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 10px;min-height:0;font-size:.8rem}
.thsw{display:grid;place-items:center;width:46px;height:30px;border-radius:5px}
.thsw i{display:block;width:30px;height:20px;border:1.5px solid #fff;border-radius:2px}
.thb[aria-pressed="true"]{outline:2px solid var(--accent);background:var(--surface);color:var(--ink)}
.thpick{padding:10px 14px}.thpick h3{margin:0}

.tcl{display:flex;flex-direction:column;gap:6px}
.tcr{display:grid;grid-template-columns:auto minmax(0,1fr) 44px minmax(0,9em) 44px 4.5em;gap:8px;align-items:center;padding:6px 8px;border-radius:10px;background:var(--bg)}
.tcr b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcr input[type=color]{width:44px;height:34px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
@media (max-width:560px){.tcr{grid-template-columns:auto minmax(0,1fr) 40px 40px}.tcr select,.tcr .small{grid-column:2/-1}}
.rcol{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin:-2px 0 6px 6.5em}

.bcourt .colwrap{padding:12px}
.bcourt .colrow{grid-template-columns:5.5em 40px minmax(0,1fr) 40px 22px}
.bcourt .rcol{margin-left:0}
.pill.tiny{font-size:.68rem;padding:1px 7px;vertical-align:1px}
.scg.dfx{grid-template-columns:repeat(2,minmax(0,1fr));margin:10px 0}.scg.dfx button{font-family:inherit;font-size:.95rem;font-weight:700;display:flex;flex-direction:column;gap:2px;padding:8px}.scg.dfx small{font-weight:500;font-size:.75rem;opacity:.75}
.thrl{flex-direction:row!important;align-items:center;gap:6px;font-size:.82rem;margin-left:4px}.thrl select{min-height:34px;padding:2px 6px}
.zchips .chip{font-size:.8rem}
tr.selr td{background:var(--soft)}
.appmark{display:flex;align-items:center;gap:12px;padding:4px 4px 14px}.appmark .ballsvg{width:46px;height:46px;flex:none}.appmark b{font-family:var(--display);font-size:1.5rem;letter-spacing:.02em;display:block;line-height:1.1}.appmark small{display:block}
.onbic.ball .ballsvg{width:60px;height:60px}
/* ===== Design « Vintage » : bâti sur le logo Supaiku (crème, encre, moutarde, bleu passé, brique) ===== */
.dsgsw button{display:inline-flex;align-items:center;gap:6px;justify-content:center}
.dsw{width:16px;height:16px;border-radius:50%;flex:none;border:1.5px solid currentColor}
.dsw.classic{background:linear-gradient(135deg,#16213A 50%,#2E64A8 50%)}
.dsw.vintage{background:conic-gradient(#D9A441 0 33%,#5E86A8 0 66%,#C2593F 0);border-color:#24324A}
:root[data-design="vintage"]{
  --v-mustard:#D9A441;--v-blue:#5E86A8;--v-brick:#C2593F;--v-ink:#24324A;--v-cream:#F2E4C4;
  --bg:#F3E9D2;--surface:#FBF6EA;--ink:#24324A;--muted:#6E6A5C;--line:#E0D0AC;--soft:#EFE3C6;
  --accent:#5E86A8;--accent-ink:#FFFFFF;--good:#4E7A47;--bad:#B5482F;--warn:#9C6B12;--danger:#B5482F;
  --okbg:#E4EBD3;--badbg:#F5DCD2;--warnbg:#F6E6BE;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme: dark){:root[data-design="vintage"]:not([data-theme="light"]){
  --bg:#1A2232;--surface:#232D42;--ink:#F2E4C4;--muted:#B5AB92;--line:#3A4560;--soft:#2B364D;
  --accent:#8DB0CC;--accent-ink:#1A2232;--good:#9CC48F;--bad:#E58A72;--warn:#E3B55A;--danger:#E58A72;
  --okbg:#26372A;--badbg:#3F2620;--warnbg:#3D3118}}
:root[data-design="vintage"][data-theme="dark"]{
  --bg:#1A2232;--surface:#232D42;--ink:#F2E4C4;--muted:#B5AB92;--line:#3A4560;--soft:#2B364D;
  --accent:#8DB0CC;--accent-ink:#1A2232;--good:#9CC48F;--bad:#E58A72;--warn:#E3B55A;--danger:#E58A72;
  --okbg:#26372A;--badbg:#3F2620;--warnbg:#3D3118}
:root[data-design="vintage"] body{background:var(--bg)}
:root[data-design="vintage"] h1,:root[data-design="vintage"] h2,:root[data-design="vintage"] h3{font-weight:600;letter-spacing:0}
:root[data-design="vintage"] h2{text-transform:none;font-size:1.3rem;letter-spacing:0}
:root[data-design="vintage"] .eyebrow{letter-spacing:.16em}
/* bandeau : encre avec le liseré trois couleurs du ballon */
:root[data-design="vintage"] .chead{background:var(--v-ink);color:var(--v-cream);border-radius:20px;box-shadow:none;position:relative;overflow:hidden;padding-bottom:20px}
:root[data-design="vintage"] .chead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;background:linear-gradient(90deg,var(--v-mustard) 0 33.3%,var(--v-blue) 0 66.6%,var(--v-brick) 0)}
:root[data-design="vintage"] .chead .tbadge.us{box-shadow:inset 0 0 0 3px var(--v-mustard),0 0 0 2px var(--v-cream)}
:root[data-design="vintage"] .chead .rolesw button[aria-pressed="true"],:root[data-design="vintage"] .gear[aria-pressed="true"]{background:var(--v-mustard);color:var(--v-ink);border-color:var(--v-mustard)}
:root[data-design="vintage"] .chead .rolesw button[aria-pressed="false"],:root[data-design="vintage"] .chead .mechip,:root[data-design="vintage"] .hbtns .chip{background:var(--v-cream);color:var(--v-ink)}
/* cartes : papier, ombre décalée façon affiche */
:root[data-design="vintage"] .card{border-radius:18px;border:1.5px solid var(--line);box-shadow:3px 3px 0 var(--line)}
:root[data-design="vintage"] button{border-radius:999px}
:root[data-design="vintage"] button.primary{background:var(--v-brick);border-color:var(--v-brick);color:#FFF8EA}
:root[data-design="vintage"] button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
:root[data-design="vintage"] .tabs{border-bottom-color:var(--line)}
:root[data-design="vintage"] .tabs button{border-radius:12px 12px 0 0}
:root[data-design="vintage"] .tabs button[aria-selected="true"]{background:var(--ink);color:var(--bg);box-shadow:inset 0 -4px 0 var(--v-mustard)}
/* barre du bas */
:root[data-design="vintage"] .bnav{background:var(--surface);border-top:1.5px solid var(--line)}
:root[data-design="vintage"] .bnav button[aria-selected="true"]{color:var(--v-ink);background:var(--v-mustard)}
:root[data-design="vintage"] .bnav button{border-radius:999px}
:root[data-design="vintage"] .appmark b{font-weight:600}
:root[data-design="vintage"] .onbic{background:var(--v-cream);box-shadow:inset 0 0 0 4px var(--v-ink)}
/* choix du terrain : vignettes sans cadre rond */
.thb,:root[data-design="vintage"] .thb{background:transparent;border:0;border-radius:8px;box-shadow:none;padding:4px 6px;color:var(--muted)}
.thb[aria-pressed="true"],:root[data-design="vintage"] .thb[aria-pressed="true"]{outline:0;background:transparent;color:var(--ink);font-weight:700}
.thb[aria-pressed="true"] .thsw{box-shadow:0 0 0 2.5px var(--ink)}
.thb:focus-visible{outline:2px solid var(--accent)}
/* logo Supaiku dans le bandeau, à droite des réglages */
.hlogo{display:inline-grid;place-items:center;width:40px;height:40px;flex:none}.hlogo .ballsvg{width:36px;height:36px}
#cRole{flex-wrap:nowrap}
.lgpick{flex-wrap:wrap}.lgpick .seg{width:auto}.lgpick .seg button{min-width:0;padding:5px 12px}
/* terrains drapeaux */
.thsw.fl{overflow:hidden;padding:0}.thsw.fl svg{width:46px;height:30px;display:block}
.thflag{display:flex;flex-direction:column;align-items:center;gap:2px;width:72px}
.thflag .thb{padding-bottom:2px}
.thflag select{font-size:.66rem;min-height:22px;height:22px;padding:0 2px;width:68px;max-width:68px;border-radius:6px;line-height:1}
.thr{flex-wrap:nowrap;gap:4px;align-items:flex-start}
@media (max-width:560px){.thb,:root[data-design="vintage"] .thb{padding:4px 2px;font-size:.72rem}.thsw,.thsw.fl svg{width:42px;height:28px}.thsw i{width:27px;height:18px}.thflag{width:60px}.thflag select{width:58px;max-width:58px}}
/* pays : sélecteur à droite de la vignette drapeau */
.thflag,.thflag{flex-direction:row;align-items:flex-start;width:auto;gap:4px}
.thflag select{align-self:flex-start;margin-top:6px;width:auto;max-width:96px;height:26px;min-height:26px;font-size:.7rem}
@media (max-width:560px){.thflag{width:auto}.thflag select{width:auto;max-width:46px;padding:0 1px}}
/* ===== Entraînement ===== */
.trhead .head{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:flex-start}
.trseg{width:auto;margin-top:10px}.trseg button{min-width:0;padding:6px 14px}
.trgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.trx{display:flex;flex-direction:column;gap:8px;padding:10px;text-align:left;cursor:pointer;font:inherit;color:inherit}
.trx svg.thumb{width:100%;height:auto;max-height:220px;border-radius:8px}
.trxb,.trsb{display:flex;flex-direction:column;gap:3px;min-width:0}
.tagl{display:flex;flex-wrap:wrap;gap:4px}.tagl i{font-style:normal;font-size:.68rem;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--soft);color:var(--muted)}
.trlist{display:flex;flex-direction:column;gap:10px}
.trs{display:flex;gap:12px;align-items:center;text-align:left;padding:10px 12px;cursor:pointer;font:inherit;color:inherit}
.trsthumbs{display:flex;gap:4px;flex:none;align-items:center}
svg.drill.mini{width:34px;height:auto;border-radius:4px;flex:none}
.trtags{margin:0}
.trbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:15;background:var(--bg);padding:6px 0}
.trbar .row{gap:6px;flex-wrap:wrap}
.extags{margin-top:8px}
.exwrap{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:760px){.exwrap{grid-template-columns:1fr}}
.excourt{display:flex;flex-direction:column;gap:8px;min-width:0}
.tools{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.tool{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 2px;min-height:0;font-size:1rem;line-height:1.1;border-radius:10px!important}
.tool small{font-size:.62rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#exSvg{touch-action:none;user-select:none;-webkit-user-select:none}
#exSvg svg{width:100%;height:auto;display:block;border-radius:10px;max-height:72vh}
svg.drill.tool-move .it{cursor:grab}svg.drill.edit{cursor:crosshair}svg.drill.tool-move{cursor:default}
.exrow{justify-content:space-between;flex-wrap:wrap;gap:8px}.exrow .seg{width:auto}.exrow .seg button{min-width:0;padding:5px 10px}
.selbox{max-width:220px}
.exside{display:flex;flex-direction:column;gap:12px;min-width:0}
.steps{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.steps [role=tab]{padding:5px 12px;min-height:0}.steps [role=tab][aria-selected=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sesl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sesl li{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--surface)}
.sesl svg.drill.mini{width:40px}
.sesb{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}.sesb input{font-size:.85rem;padding:5px 8px;min-height:0}
.sesa{display:flex;gap:2px;flex:none}
.pickl{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin:10px 0;max-height:55vh;overflow:auto}
.pick{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px;cursor:pointer}.pick span{display:flex;flex-direction:column;min-width:0}
.trview{display:flex;flex-direction:column;gap:18px}
.trtoc{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:2px}.trtoc a{color:var(--accent)}
.trv{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:6px}
.trv h3{margin:0}.trv h4{margin:8px 0 2px;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.trv ul{margin:0;padding-left:18px}
.trvgrid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:640px){.trvgrid{grid-template-columns:1fr}}
.trvcourt{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.trvcourt svg{width:100%;height:auto;border-radius:10px;max-height:62vh}
svg.drill.anim g.it{transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .3s}
svg.drill.anim g.dl.fade{animation:trfade .5s ease .25s both}
@keyframes trfade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){svg.drill.anim g.it{transition:none}svg.drill.anim g.dl.fade{animation:none}}
.trvnav{display:flex;align-items:center;justify-content:center;gap:12px}.trvnav button{min-width:44px;font-size:1.3rem;line-height:1}
.trvcap{margin:0;font-weight:600;min-height:1.4em;text-align:center}
.trgoal{margin:0}
.trleg{display:flex;gap:12px}.trleg span{display:inline-flex;align-items:center;gap:5px}.lg{display:inline-block;width:18px;height:0;border-top:2px solid var(--ink)}.lg.bl{border-top:2px dashed var(--muted)}
.bnav button span{white-space:nowrap}
#stDel{align-self:flex-start}
@media (max-width:420px){.bnav button{font-size:.62rem;letter-spacing:-.01em}}
@media (max-width:700px){.trbar{position:static;padding:0}.trbar .row button{padding:6px 10px;font-size:.85rem}}
.genbox{padding:12px 14px}.genbox summary{cursor:pointer;font-weight:700;font-size:1rem}.genbox[open] summary{margin-bottom:8px}
.genbox textarea{width:100%;margin:6px 0 8px}.genbox .row{align-items:center;gap:8px;flex-wrap:wrap}
.trvnav .chip{font-size:.85rem;min-width:0;padding:5px 12px}.trvs{white-space:nowrap}
/* ===== écrans d'accès (connexion, clubs, invitations) ===== */
#auth{min-height:100vh;display:flex;justify-content:center;padding:24px 0 40px}
.authwrap{width:100%;max-width:440px;display:flex;flex-direction:column;gap:16px}
.authbrand{display:flex;align-items:center;gap:14px;padding:6px 2px}
.authbrand .ballsvg{width:58px;height:58px;flex:none}
.authbrand b{display:block;font-family:var(--display);font-size:2rem;line-height:1.05}
.authbrand small{display:block;color:var(--muted);font-size:.86rem}
.authcard{display:flex;flex-direction:column;gap:12px}
.authcard h2{margin:0}
.authcard .ef{display:flex;flex-direction:column;gap:10px}
.authcard input[type=email],.authcard input[type=password],.authcard input[type=text]{width:100%}
.authseg{width:100%}.authseg button{flex:1}
.authfoot{text-align:center;font-size:.78rem;color:var(--muted)}.authfoot a{color:inherit}
.sep{border:0;border-top:1px solid var(--line);margin:6px 0}
.clublist{display:flex;flex-direction:column;gap:8px}
.clubbtn{display:flex;justify-content:space-between;align-items:center;text-align:left;padding:12px 14px;cursor:pointer;font:inherit;color:inherit}
.invl,.meml{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:6px}
.invl li,.meml li{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--surface)}
.mememail{word-break:break-all}
.meml select{min-height:32px;padding:2px 6px}
.invbox{display:flex;flex-direction:column;gap:6px;border:1px dashed var(--line);border-radius:10px;padding:10px;margin-top:8px}
.invbox input{width:100%;font-size:.85rem}
#amd .mbody h3{margin:14px 0 6px}
.clubrow{display:flex;flex-direction:column;gap:4px}.clubacts{display:flex;gap:6px;justify-content:flex-end}.renform{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--surface)}