/* C2ML : nuit de drift. Verre depoli sur un fond de feux arriere (rose -> ambre), traces de pneus en filigrane. */
:root {
  --bg:#0d0d0e; --glass:rgba(27,27,29,.86); --glass-hi:rgba(40,40,43,.97); --inset:rgba(255,255,255,.05);
  --edge:rgba(255,255,255,.09); --edge-hi:rgba(255,255,255,.18);
  --ink:#f2f2f3; --muted:#9b9ba2; --hot:#f2f2f3; --warm:#f2f2f3; --drift-a:rgba(255,255,255,.075); --drift-b:rgba(150,160,175,.07); --drift-c:rgba(255,255,255,.05);
  --grad:#f2f2f3; --grad-hover:#ffffff; --on-grad:#111113; --danger:#d93a3a; --focus:#f2f2f3; --shadow:none;
  --ok:#4ade80; --ok-bg:rgba(74,222,128,.14); --warn:#fb923c; --warn-bg:rgba(251,146,60,.15); --bad:#f87171; --bad-bg:rgba(248,113,113,.15); --info:var(--muted); --info-bg:var(--inset);
  --font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --display:"Segoe UI Variable Display","Segoe UI Semibold","Segoe UI",system-ui,sans-serif;
  --mono:"Cascadia Mono","Cascadia Code",ui-monospace,Consolas,monospace;
  --r-lg:14px; --r-md:9px; --r-sm:6px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg:#f4f4f5; --glass:rgba(255,255,255,.86); --glass-hi:rgba(255,255,255,.97); --inset:rgba(0,0,0,.045);
    --edge:rgba(0,0,0,.10); --edge-hi:rgba(0,0,0,.22);
    --ink:#18181b; --muted:#71717a; --hot:#18181b; --warm:#18181b; --drift-a:rgba(0,0,0,.06); --drift-b:rgba(80,90,110,.07); --drift-c:rgba(0,0,0,.04);
    --grad:#18181b; --grad-hover:#3f3f46; --on-grad:#ffffff; --danger:#c42b2b; --focus:#18181b;
    --ok:#15803d; --ok-bg:rgba(21,128,61,.12); --warn:#c2410c; --warn-bg:rgba(234,88,12,.12); --bad:#b91c1c; --bad-bg:rgba(220,38,38,.10);
    color-scheme:light;
  }
}
* { box-sizing:border-box; scrollbar-width:none; -ms-overflow-style:none; }
*::-webkit-scrollbar { display:none; width:0; height:0; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; position:relative; min-height:100vh; color:var(--ink); font:14px/1.55 var(--font); font-variant-numeric:tabular-nums;
  background:var(--bg); }
body::before { content:""; position:fixed; inset:-35%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(40% 40% at 25% 30%, var(--drift-a), transparent 70%),
    radial-gradient(38% 38% at 78% 24%, var(--drift-b), transparent 70%),
    radial-gradient(45% 45% at 62% 78%, var(--drift-c), transparent 70%);
  animation:drift 60s ease-in-out infinite alternate; will-change:transform; contain:strict; }
@keyframes drift {
  0% { transform:translate3d(-3%,-2%,0); }
  100% { transform:translate3d(4%,3%,0); }
}
[hidden] { display:none !important; }
a { color:var(--ink); text-underline-offset:3px; }
code { font:12.5px var(--mono); }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
::selection { background:var(--ink); color:var(--bg); }

/* ---- structure ---- */
.shell { display:grid; grid-template-columns:260px minmax(0,1fr); min-height:100vh; }
.side { --pv:clamp(5px, calc(5px + (100vh - 760px) * .0154), 9px); --gv:clamp(8px, calc(8px + (100vh - 760px) * .0385), 18px); --bv:clamp(14px, calc(14px + (100vh - 760px) * .0385), 24px); --fv:clamp(10px, calc(10px + (100vh - 760px) * .023), 16px);
  background:var(--glass); border-right:1px solid var(--edge); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow:hidden; }
a.brand, a.brand:hover { color:inherit; text-decoration:none; }
.brand { display:flex; align-items:center; gap:12px; padding:var(--bv, 24px) 20px calc(var(--bv, 24px) - 4px); }
.logo { width:40px; height:40px; flex:none; padding:3px; border-radius:11px; background:#151517; object-fit:contain; }
.brand b { font:700 17px/1.1 var(--display); letter-spacing:.01em; display:block; }
.brand small { display:block; color:var(--muted); font-size:12px; margin-top:3px; }
#nav { padding:0 12px 16px; flex:1 1 auto; min-height:0; overflow-y:auto; }
.group { margin:var(--gv, 18px) 0 calc(var(--gv, 18px) * .3); padding:0 12px; color:var(--muted); font-size:12px; font-weight:600; }
#nav button { position:relative; display:block; width:100%; text-align:left; padding:var(--pv, 9px) 12px var(--pv, 9px) 16px; margin:2px 0; background:transparent; color:var(--muted); border:1px solid transparent; border-radius:var(--r-md); font:inherit; font-weight:500; cursor:pointer; transition:background-color .15s,color .15s; }
#nav button:hover { background:var(--inset); color:var(--ink); }
#nav button[aria-current="page"] { background:var(--glass-hi); border-color:var(--edge); color:var(--ink); font-weight:650; }
#nav button[aria-current="page"]::before { content:""; position:absolute; left:4px; top:9px; bottom:9px; width:2px; border-radius:2px; background:var(--hot); }
.side-foot { border-top:1px solid var(--edge); padding:var(--fv, 16px); display:flex; flex-direction:column; gap:calc(var(--fv, 16px) * .7); }
.side-foot button.ghost { width:100%; }
.top #who { flex:none; }
.top .brand small { white-space:nowrap; }

.top { position:sticky; top:0; z-index:5; background:var(--bg); border-bottom:1px solid var(--edge); display:flex; align-items:center; gap:14px; padding:12px 28px; }
.top .brand { padding:0; flex:1; }
.solo { display:block; }

main { padding:36px 44px 88px; width:100%; min-width:0; }
.solo main { margin:0; }
.pagehead { margin:0 0 26px; }
.pagehead h1 { font:650 26px/1.2 var(--display); letter-spacing:-.01em; margin:0; }
.pagehead p { margin:6px 0 0; color:var(--muted); }

/* ---- panneaux ---- */
.card { position:relative; background:var(--glass); border:1px solid var(--edge); border-radius:var(--r-lg); padding:22px; margin:0 0 18px; overflow-x:auto; }
.card > h2 { font:650 17px/1.3 var(--display); margin:0 0 6px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.card > p.muted { margin:0 0 16px; }
.card > h2:not(:first-child) { margin-top:24px; }
.card > .row:last-child, .card > p:last-child { margin-bottom:0; }
.muted { color:var(--muted); }
.grow { flex:1 1 260px; }

/* ---- tableaux ---- */
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th, td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--edge); vertical-align:middle; overflow-wrap:break-word; }
th { color:var(--muted); font-weight:600; font-size:12.5px; white-space:nowrap; background:var(--inset); }
tbody tr:hover { background:var(--inset); }
td button { padding:5px 12px; font-size:13px; margin:0 4px 4px 0; }
table td.muted[colspan] { text-align:center; padding:34px 12px; }
.card table { border:1px solid var(--edge); border-radius:var(--r-md); border-collapse:separate; border-spacing:0; overflow:hidden; }
.card table tbody tr:last-child td { border-bottom:0; }
.card table + .row, .card table + p { margin-top:18px; }

/* ---- formulaires ---- */
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin:0 0 16px; }
.row > input, .row > textarea { flex:1 1 180px; }
.row > select { flex:0 0 240px; }
.field { display:flex; flex-direction:column; align-items:stretch; gap:6px; flex:1 1 220px; min-width:0; }
.field > span { font-weight:600; font-size:13px; }
.field > small { color:var(--muted); font-size:12.5px; }
input, textarea, select { padding:10px 14px; border:1px solid var(--edge-hi); border-radius:var(--r-md); background:var(--inset); color:var(--ink); font:inherit; min-width:0; transition:border-color .15s, background-color .15s; }
select option { background:#1b1b1d; color:#f2f2f3; }
input:hover, textarea:hover, select:hover { border-color:var(--muted); }
input:focus, textarea:focus, select:focus { border-color:var(--focus); background:var(--glass-hi); outline:none; }
input::placeholder, textarea::placeholder { color:var(--muted); opacity:.75; }
textarea { resize:vertical; width:100%; }
input[type=file] { padding:4px 8px; border-style:dashed; width:100%; }
input[type=file]::file-selector-button { margin-right:12px; padding:5px 14px; border:1px solid var(--edge-hi); border-radius:var(--r-sm); background:var(--glass-hi); color:var(--ink); font:inherit; cursor:pointer; }
input[type=checkbox] { width:18px; height:18px; padding:0; accent-color:var(--ink); flex:none; }
label { display:flex; align-items:center; gap:10px; }
label:has(> input[type=file]) { flex-direction:column; align-items:stretch; gap:6px; width:100%; font-weight:600; font-size:13px; }
label:has(> input[type=checkbox]) { cursor:pointer; }

/* ---- boutons ---- */
button { white-space:nowrap; padding:9px 18px; border:1px solid transparent; border-radius:var(--r-md); background:var(--grad); color:var(--on-grad); font:inherit; font-weight:650; cursor:pointer; transition:background-color .15s, transform .12s; }
button:hover:not(:disabled) { background:var(--grad-hover); }
button.ghost { background:var(--inset); color:var(--ink); border-color:var(--edge-hi); font-weight:550; }
button.ghost:hover:not(:disabled) { background:var(--glass-hi); }
button.danger { background:var(--danger); color:#fff; }
button.danger:hover:not(:disabled) { background:#e44d4d; }
button:disabled { opacity:.45; cursor:not-allowed; }

/* ---- statuts : drapeaux de course ---- */
.badge { display:inline-flex; align-items:center; gap:6px; padding:2px 11px; border-radius:99px; font:600 12px/1.6 var(--font); background:var(--inset); color:var(--muted); border:1px solid var(--edge); white-space:nowrap; margin-right:4px; }
.badge.ok { background:var(--ok-bg); color:var(--ok); border-color:transparent; }
.badge.warn { background:var(--warn-bg); color:var(--warn); border-color:transparent; }
.badge.bad { background:var(--bad-bg); color:var(--bad); border-color:transparent; }
.badge.info { background:var(--info-bg); color:var(--info); border-color:transparent; }
.badge.ok::before, .badge.warn::before, .badge.bad::before, .badge.info::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }

/* ---- messages ---- */
.msg { margin:0 0 20px; padding:12px 16px; border-radius:var(--r-md); border:1px solid var(--edge); background:var(--glass); }
.msg.ok { border-color:transparent; background:var(--ok-bg); color:var(--ok); }
.msg.err { border-color:transparent; background:var(--bad-bg); color:var(--bad); }
pre { margin:14px 0 0; padding:14px 16px; background:rgba(8,5,12,.62); color:#e7dff0; border:1px solid var(--edge); border-radius:var(--r-md); font:12.5px/1.65 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; max-height:280px; overflow:auto; }
pre:empty { display:none; }

/* ---- joueurs ---- */
.person { display:inline-flex; align-items:center; gap:10px; vertical-align:middle; }
.person .av { width:34px; height:34px; border-radius:50%; object-fit:cover; background:var(--inset); flex:none; }
.person .pinfo { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.person .pname { font-weight:650; }
.person code { color:var(--muted); font-size:12px; white-space:nowrap; }

/* ---- sections d'un panneau (panel developpeur) ---- */
.section { border-top:1px solid var(--edge); margin-top:24px; padding-top:20px; }
.section > h3 { font:650 15px/1.3 var(--display); margin:0 0 12px; }
.section > p.muted { margin:0 0 12px; }
.section.danger-zone > h3 { color:var(--bad); }
.limits { display:flex; flex-wrap:wrap; gap:8px 28px; margin:0 0 14px; padding:0; list-style:none; }
.limits li { color:var(--muted); }
.limits b { color:var(--ink); font-weight:700; }

/* ---- en-tete de panneau : titre a gauche, actions a droite ---- */
.card-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px; margin:0 0 14px; }
.card-head > h2, .card-head > h3 { margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.card-head > h2 { font:650 17px/1.3 var(--display); }
.card-head > h3 { font:650 15px/1.3 var(--display); }
.card-head .actions { display:flex; flex-wrap:wrap; gap:8px; margin-left:auto; }
.card-head .actions button { padding:7px 14px; font-size:13px; }
.card > .card-head:not(:first-child) { margin-top:24px; }
.row.split { justify-content:space-between; align-items:flex-end; }
.stack { display:flex; flex-direction:column; gap:10px; flex:1 1 320px; }
.row > label:has(> input[type=file]) { flex:1 1 240px; width:auto; }

/* ---- fiche de mod repliable ---- */
details.mod { padding:0; }
details.mod > summary { list-style:none; cursor:pointer; display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:16px 22px; border-radius:var(--r-lg); }
details.mod > summary::-webkit-details-marker { display:none; }
details.mod > summary::before { content:""; flex:none; width:7px; height:7px; margin:0 6px 2px 2px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(-45deg); transition:transform .15s; }
details.mod[open] > summary::before { transform:rotate(45deg); }
details.mod > summary:hover { background:var(--inset); }
details.mod[open] > summary { border-bottom:1px solid var(--edge); border-radius:var(--r-lg) var(--r-lg) 0 0; }
.mod-name { font:650 16px/1.3 var(--display); margin-right:4px; }
.mod-meta { margin-left:auto; color:var(--muted); font-size:13px; }
.mod-body { padding:6px 22px 22px; }
.mod-body > .section:first-child, .mod-body > .msg + .section { border-top:0; margin-top:8px; }
.idlist { display:flex; flex-direction:column; gap:8px; margin:0 0 14px; }
.idlist .item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px; border:1px solid var(--edge); border-radius:var(--r-md); background:var(--inset); }
.idlist > p { margin:0; }
button.plus { padding:9px 15px; font-size:18px; line-height:1; }

/* ---- connexion ---- */
.login { max-width:420px; margin:12vh auto 0; padding:36px 32px; text-align:center; background:var(--glass); border:1px solid var(--edge); border-radius:var(--r-lg); }
.login .mark { display:block; width:76px; height:76px; padding:6px; border-radius:18px; margin:0 auto 18px; }
.login h1 { font:650 22px/1.2 var(--display); margin:0 0 6px; }
.login p { margin:0 0 22px; }
.login .msg { text-align:left; }
.login a { display:inline-block; padding:10px 22px; border-radius:var(--r-md); background:var(--grad); color:var(--on-grad); font-weight:650; text-decoration:none; }
.login a:hover { background:var(--grad-hover); }
.bare .side { display:none; }
.bare.admin .shell { display:block; }

/* ecrans peu hauts : le menu se resserre pour tenir sans defiler */
@media (max-height: 700px) and (min-width: 861px) {
  .group { display:none; }
  #nav button { padding:5px 12px 5px 16px; font-size:13px; }
  .brand small { display:none; }
}

/* ---- fenetre (liste des mods d'un joueur) ---- */
dialog.modal { width:min(460px, 92vw); max-height:80vh; padding:0; border:1px solid var(--edge-hi); border-radius:var(--r-lg); background:var(--glass-hi); color:var(--ink); }
dialog.modal::backdrop { background:rgba(0,0,0,.55); }
dialog.modal[open] { display:flex; flex-direction:column; }
.modal-head { padding:20px 22px 8px; }
.modal-head h2 { font:650 17px/1.3 var(--display); margin:0; }
.modal-head p { margin:4px 0 0; color:var(--muted); }
.modlist { list-style:none; margin:0; padding:8px 22px; overflow-y:auto; flex:1; }
.modlist li { display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--edge); }
.modlist li:last-child { border-bottom:0; }
.modlist span { color:var(--muted); }
.modal-foot { padding:12px 22px 20px; display:flex; justify-content:flex-end; }

/* ---- intro : logo peint a la bombe (voir splash.js) ---- */
#splash { display:none; position:fixed; inset:0; z-index:1000; place-items:center; background:#0d0d0e; cursor:pointer; }
#splash.on { display:grid; }
#splash.out { opacity:0; pointer-events:none; transition:opacity .9s ease; }
#splash canvas { width:min(74vmin,440px); height:min(74vmin,440px); display:block; }
html.splash-hold body > :not(#splash):not(script) { visibility:hidden; }

/* ---- choix de langue compact (accueil et espace developpeur) ---- */
.seg { display:inline-flex; gap:2px; padding:3px; border:1px solid var(--edge-hi); border-radius:var(--r-md); background:var(--inset); }
.seg button { padding:5px 10px; font-size:12px; font-weight:650; background:transparent; color:var(--muted); border:0; border-radius:7px; }
.seg button:hover:not(:disabled) { background:var(--glass-hi); color:var(--ink); }
.seg button[aria-pressed="true"] { background:var(--glass-hi); color:var(--ink); box-shadow:inset 0 0 0 1px var(--edge-hi); }

/* ---- petits ecrans ---- */
@media (max-width: 860px) {
  .shell { display:block; }
  .side { position:static; height:auto; overflow:visible; border-right:0; border-bottom:1px solid var(--edge); }
  .brand { padding:14px 18px 8px; }
  #nav { display:flex; gap:6px; overflow-x:auto; padding:0 12px 12px; flex:none; }
  .group { display:none; }
  #nav button { width:auto; white-space:nowrap; padding:8px 14px; }
  #nav button[aria-current="page"]::before { display:none; }
  #nav button[aria-current="page"] { background:var(--glass-hi); border-color:var(--edge-hi); }
  .side-foot { flex-direction:row; align-items:center; justify-content:space-between; padding:10px 18px; }
  .side-foot button.ghost { width:auto; }
  main { padding:24px 16px 64px; }
  .pagehead h1 { font-size:26px; }
  .top { padding:10px 16px; flex-wrap:wrap; }
  .card { padding:16px; }
}
/* ---- animations de l'admin et de l'espace developpeur : tout monte en douceur, rien ne claque ---- */
html { --ease:cubic-bezier(.16,1,.3,1); }
@keyframes uiRise { from { opacity:0; transform:translate3d(0,22px,0); } to { opacity:1; transform:none; } }
@keyframes uiFade { from { opacity:0; } to { opacity:1; } }
@keyframes uiDrop { from { opacity:0; transform:translate3d(0,-14px,0); } to { opacity:1; transform:none; } }
@keyframes uiMsg { from { opacity:0; transform:translate3d(0,-8px,0); } to { opacity:1; transform:none; } }
@keyframes uiModal { from { opacity:0; transform:translate3d(0,16px,0) scale(.97); } to { opacity:1; transform:none; } }

/* premiere arrivee (apres l'intro) : menu, puis titre, puis panneaux en cascade */
html.stage .side { animation:uiFade .9s var(--ease) .15s both; }
html.stage .top { animation:uiDrop .9s var(--ease) .15s both; }
html.stage #nav > * { animation:uiRise .7s var(--ease) both; }
html.stage #nav > :nth-child(1) { animation-delay:332ms; }
html.stage #nav > :nth-child(2) { animation-delay:364ms; }
html.stage #nav > :nth-child(3) { animation-delay:396ms; }
html.stage #nav > :nth-child(4) { animation-delay:428ms; }
html.stage #nav > :nth-child(5) { animation-delay:460ms; }
html.stage #nav > :nth-child(6) { animation-delay:492ms; }
html.stage #nav > :nth-child(7) { animation-delay:524ms; }
html.stage #nav > :nth-child(8) { animation-delay:556ms; }
html.stage #nav > :nth-child(9) { animation-delay:588ms; }
html.stage #nav > :nth-child(10) { animation-delay:620ms; }
html.stage #nav > :nth-child(11) { animation-delay:652ms; }
html.stage #nav > :nth-child(12) { animation-delay:684ms; }
html.stage #nav > :nth-child(13) { animation-delay:716ms; }
html.stage #nav > :nth-child(14) { animation-delay:748ms; }
html.stage #nav > :nth-child(15) { animation-delay:780ms; }
html.stage #nav > :nth-child(16) { animation-delay:812ms; }
html.stage #nav > :nth-child(17) { animation-delay:844ms; }
html.stage #nav > :nth-child(18) { animation-delay:876ms; }
html.stage .side-foot { animation:uiFade .8s ease-out .8s both; }
html.stage #app .pagehead, html.stage #app .login { animation:uiRise .85s var(--ease) .4s both; }
html.stage #app .card { animation:uiRise .85s var(--ease) both; }
html.stage #app .card:nth-child(1) { animation-delay:640ms; }
html.stage #app .card:nth-child(2) { animation-delay:720ms; }
html.stage #app .card:nth-child(3) { animation-delay:800ms; }
html.stage #app .card:nth-child(4) { animation-delay:880ms; }
html.stage #app .card:nth-child(5) { animation-delay:960ms; }
html.stage #app .card:nth-child(6) { animation-delay:1040ms; }

/* changement d'onglet ou de vue : meme geste, plus court (la classe enter est posee par le script pendant 1,6 s) */
#app.enter .pagehead, #app.enter .login { animation:uiRise .6s var(--ease) both; }
#app.enter .card { animation:uiRise .7s var(--ease) both; }
#app.enter .card:nth-child(1) { animation-delay:60ms; }
#app.enter .card:nth-child(2) { animation-delay:120ms; }
#app.enter .card:nth-child(3) { animation-delay:180ms; }
#app.enter .card:nth-child(4) { animation-delay:240ms; }
#app.enter .card:nth-child(5) { animation-delay:300ms; }
#app.enter .card:nth-child(6) { animation-delay:360ms; }

/* petits gestes */
.msg { animation:uiMsg .4s var(--ease); }
details.mod[open] > .mod-body { animation:uiFade .45s ease-out; }
dialog.modal[open] { animation:uiModal .32s var(--ease); }
dialog.modal[open]::backdrop { animation:uiFade .3s ease-out; }
button:active:not(:disabled) { transform:scale(.97); }

@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } body::before { animation:none; } }