:root {
  --bg:#f6f7fb; --card:#ffffff; --ink:#1f2430; --muted:#6b7280;
  --line:#e7e9f0; --accent:#6366f1; --accent-soft:#eef0ff; --danger:#ef4444;
  --shadow:0 1px 3px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06);
  --radius:16px;
}
* { box-sizing:border-box; }
body { margin:0; font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased; }
header { display:flex; justify-content:space-between; align-items:center; padding:1.1rem 2rem; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
header h1 { font-size:1.25rem; font-weight:700; margin:0; letter-spacing:-.02em; }
nav a { margin-left:1rem; color:var(--muted); text-decoration:none; font-weight:500; }
nav a:hover { color:var(--accent); }
.link-btn { background:none; border:none; color:var(--muted); cursor:pointer; font:inherit; margin-left:1rem; }
main { padding:2rem; max-width:1080px; margin:auto; }
.hint { color:var(--muted); } .retour { color:var(--accent); display:inline-block; margin-bottom:1.2rem; text-decoration:none; font-weight:500; }
h2 { font-weight:700; letter-spacing:-.02em; }

.grille { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.2rem; }
.carte { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s; }
.carte:hover { transform:translateY(-2px); box-shadow:0 6px 28px rgba(16,24,40,.1); }
.carte h2, .carte h3 { margin:.2rem 0 .6rem; }
.couverture { width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:10px; margin-bottom:1rem; background:var(--accent-soft); }
.badge { display:inline-block; background:var(--accent-soft); color:var(--accent); padding:.2rem .7rem; border-radius:999px; font-size:.78rem; font-weight:600; }

.btn { display:inline-block; background:var(--accent); color:#fff; padding:.55rem 1rem; border-radius:10px; text-decoration:none; margin-right:.5rem; font-weight:600; border:none; cursor:pointer; font-size:.9rem; }
.btn.ghost { background:#fff; color:var(--accent); border:1px solid var(--line); }
.btn:hover { filter:brightness(1.05); }

.onglets { display:flex; gap:.4rem; margin:1.4rem 0; background:#fff; padding:.35rem; border-radius:12px; border:1px solid var(--line); width:fit-content; }
.onglets a { padding:.5rem 1rem; color:var(--muted); text-decoration:none; border-radius:9px; font-weight:500; font-size:.9rem; }
.onglets a.actif { background:var(--accent); color:#fff; }

table { width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
th { text-align:left; padding:.9rem 1rem; background:#fafbfe; color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--line); }
td { padding:.85rem 1rem; border-bottom:1px solid var(--line); }
tr:last-child td { border-bottom:none; }
.ligne { cursor:pointer; transition:background .12s; }
.ligne:hover { background:var(--accent-soft); }

label { display:block; margin-bottom:1rem; font-weight:600; font-size:.85rem; color:var(--muted); }
input, textarea, select { width:100%; padding:.65rem .8rem; border:1px solid var(--line); border-radius:10px; font:inherit; margin-top:.35rem; background:#fff; color:var(--ink); }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
button { background:var(--accent); color:#fff; border:none; padding:.6rem 1.1rem; border-radius:10px; cursor:pointer; font:inherit; font-weight:600; margin-top:.5rem; }
button.danger { background:var(--danger); }
button:disabled { opacity:.5; cursor:default; }

.carte.vig { border-left:5px solid var(--accent); }
.vig-head { display:flex; justify-content:space-between; align-items:center; gap:.6rem; }
.vig-head select { width:auto; }
.actions { margin-top:2rem; display:flex; flex-direction:column; gap:1rem; }
details { background:#fff; border:1px solid var(--line); border-radius:12px; padding:.8rem 1rem; }
summary { cursor:pointer; font-weight:600; color:var(--accent); }
.login { max-width:340px; margin:4rem auto; background:#fff; padding:2rem; border-radius:var(--radius); box-shadow:var(--shadow); }
.err { color:var(--danger); }