:root{--bg:#0b0c0f;--surface:#151821;--text:#e6e8ef;--muted:#a4a9b6;--accent:#4f8cff;--border:#242836}
@media (prefers-color-scheme: light){:root{--bg:#f7f8fb;--surface:#ffffff;--text:#11131a;--muted:#5b6270;--accent:#3366ff;--border:#e6e9f2}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;padding:24px;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial}


/* Conteneur */
.container{max-width:980px;margin:0 auto}


/* Barre de nav */
nav{display:flex;gap:12px;align-items:center;border:1px solid var(--border);background:var(--surface);padding:10px 12px;border-radius:14px;box-shadow:0 6px 20px rgba(0,0,0,.12);position:sticky;top:12px;margin-bottom:18px}
nav a{color:var(--text);text-decoration:none;padding:8px 10px;border-radius:10px}
nav a:hover{background:color-mix(in oklab, var(--accent) 16%, transparent)}


/* Liens généraux */
a{color:var(--accent);text-decoration:none;transition:color .15s ease, text-decoration-color .15s ease}
a:hover{color:var(--accent);text-decoration:underline}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}


h1,h2,h3{margin:10px 0 12px 0}


/* Cartes simples (optionnel) */
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,.12);padding:16px}


/* Tables */
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.12);margin:12px 0}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border)}
th{font-weight:600;color:var(--muted);background:color-mix(in oklab, var(--surface) 88%, var(--bg))}
tr:last-child td{border-bottom:none}
tr:hover td{background:color-mix(in oklab, var(--accent) 8%, transparent)}


/* Formulaires */
label{display:flex;gap:8px;align-items:center;margin:8px 0;color:var(--muted)}
input,select,button{font:inherit}
input,select{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:8px 10px;outline:none}
input:focus,select:focus{border-color:var(--accent)}
button{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:9px 14px;cursor:pointer}
button:hover{filter:brightness(1.05)}


/* Petits helpers */
.muted{color:var(--muted)}
.mb-2{margin-bottom:12px}
.mt-2{margin-top:12px}