:root { --bg:#0f1115; --card:#181b22; --fg:#e8eaed; --muted:#9aa0aa; --accent:#7c5cff; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui,sans-serif; background:var(--bg); color:var(--fg); }
.topnav { display:flex; gap:1rem; align-items:center; padding:.7rem 1.2rem; background:var(--card); border-bottom:1px solid #242833; }
.topnav a { color:var(--fg); text-decoration:none; } .topnav .brand { font-weight:700; }
.topnav .logout, .topnav .refresh { margin-left:auto; }
main { max-width:1100px; margin:0 auto; padding:1.5rem; }
.login { display:grid; place-items:center; height:100vh; }
.login-card { background:var(--card); padding:2rem; border-radius:12px; display:grid; gap:.8rem; width:300px; }
button { background:var(--accent); color:#fff; border:0; padding:.5rem .9rem; border-radius:8px; cursor:pointer; }
input { padding:.5rem; border-radius:8px; border:1px solid #333; background:#0c0e12; color:var(--fg); }
.error { color:#ff6b6b; }
.filters { display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0; }
.filters input[type=search] { flex:1 1 260px; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.vcard { display:block; background:var(--card); border:1px solid #242833; border-radius:12px; padding:1rem; color:var(--fg); text-decoration:none; }
.vcard:hover { border-color:var(--accent); }
.vhead { display:flex; gap:.4rem; align-items:center; margin-bottom:.4rem; }
.badge, .verdict { font-size:.72rem; padding:.1rem .5rem; border-radius:999px; }
.badge { background:#2a2f3a; } .verdict.r-4 { background:#1f7a3d; } .verdict.r-3 { background:#2c6cb0; }
.verdict.r-2 { background:#8a6d1f; } .verdict.r-1,.verdict.r-0 { background:#444; }
.fav { margin-left:auto; color:gold; } .chan { color:var(--muted); font-size:.85rem; }
.note { font-size:.85rem; font-weight:700; padding:.1rem .5rem; border-radius:999px; background:var(--accent); color:#fff; }
.conf { font-size:.72rem; padding:.1rem .5rem; border-radius:999px; color:#fff; }
.conf-0 { background:#c0392b; } .conf-1 { background:#d0791f; } .conf-2 { background:#c9a227; color:#1a1a1a; }
.conf-3 { background:#2c9c53; } .conf-4 { background:#2c6cb0; }
.subnotes { color:var(--muted); font-size:.8rem; margin-top:.2rem; }
.date { color:var(--muted); }
.chocs { margin:.5rem 0 0; padding-left:1.1rem; color:#c6c9cf; font-size:.85rem; }
.muted { color:var(--muted); }
.report-layout { display:grid; grid-template-columns:1fr 300px; gap:1.5rem; align-items:start; }
.report { background:var(--card); border-radius:12px; padding:1.5rem 2rem; }
.score-row { display:flex; gap:.5rem; align-items:center; margin:.6rem 0; }
.score-row .note { font-size:1.1rem; }
.subnotes-detail { list-style:none; padding:0; margin:.6rem 0; display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; color:var(--muted); font-size:.85rem; }
.reserve, .tutoriel { background:#1e222b; border-radius:8px; padding:.6rem .8rem; margin:.6rem 0; font-size:.9rem; }
.reserve strong { color:#e0a500; } .tutoriel strong { color:var(--accent); }
.report .rendered h2 { margin-top:1.6rem; border-bottom:1px solid #2a2f3a; padding-bottom:.3rem; }
.report table { border-collapse:collapse; width:100%; margin:1rem 0; display:block; overflow-x:auto; }
.report th, .report td { border:1px solid #2a2f3a; padding:.4rem .6rem; text-align:left; }
.curation { position:sticky; top:1rem; background:var(--card); border-radius:12px; padding:1rem; }
.back { color:var(--muted); text-decoration:none; } .warn { color:#e0a500; }
@media (max-width:800px){ .report-layout{ grid-template-columns:1fr; } }
section { margin:2rem 0; } section h2 { border-bottom:1px solid #2a2f3a; padding-bottom:.3rem; }
.chocs-stream { list-style:none; padding:0; } .chocs-stream li { padding:.5rem 0; border-bottom:1px solid #1e222b; }
.chocs-stream a { color:var(--fg); text-decoration:none; } .chocs-stream .src { color:var(--muted); font-size:.8rem; margin-left:.5rem; }
.typegrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:.6rem; }
.typecell { background:var(--card); padding:.8rem; border-radius:10px; color:var(--fg); text-decoration:none; display:flex; flex-direction:column; }
.typecell span { color:var(--accent); font-size:1.4rem; font-weight:700; }
.curation label, .curation select, .curation textarea, .curation input { display:block; width:100%; margin:.4rem 0; }
.curation textarea { min-height:80px; }
.myscore { display:flex; flex-direction:column; gap:.35rem; margin:.6rem 0; }
.myscore label { display:flex; justify-content:space-between; align-items:center; gap:.5rem; font-size:.85rem; margin:0; }
.myscore input[type="number"], .myscore select { width:5.5rem; margin:0; }
.tag { display:inline-block; background:#2a2f3a; padding:.15rem .5rem; border-radius:999px; margin:.2rem; cursor:pointer; font-size:.8rem; }
.coll-box { display:flex; gap:.4rem; align-items:end; flex-wrap:wrap; }
.addform { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:1rem 0 2rem; }
.addform input[type=url] { flex:1 1 320px; }
.af_kind { display:flex; gap:.8rem; }
.reqs { border-collapse:collapse; width:100%; }
.reqs th, .reqs td { border:1px solid #2a2f3a; padding:.4rem .6rem; text-align:left; }
.reqs .u { max-width:420px; }
.reqs .rtitle { font-weight:600; }
.reqs .rurl { color:var(--muted); font-size:.82rem; word-break:break-all; }
.st { font-size:.75rem; padding:.1rem .5rem; border-radius:999px; }
.st-pending { background:#8a6d1f; } .st-applied { background:#1f7a3d; }
.st-present { background:#2c6cb0; } .st-error { background:#7a1f1f; }
.ecarts { border-collapse:collapse; width:100%; }
.ecarts th, .ecarts td { border:1px solid #2a2f3a; padding:.4rem .6rem; text-align:left; }
.ecarts td.gap { font-weight:600; }

.fiche-layout { display:grid; grid-template-columns:1fr 360px; gap:1.5rem; align-items:start; }
.fiche-main { background:var(--card); border-radius:12px; padding:1.5rem 2rem; }
.fiche-side { position:sticky; top:1rem; display:flex; flex-direction:column; gap:1rem; }
@media (max-width:900px){ .fiche-layout{ grid-template-columns:1fr; } .fiche-side{ position:static; } }

.video-embed { position:relative; border-radius:12px; overflow:hidden; background:#000; }
.video-embed iframe { display:block; width:100%; aspect-ratio:16/9; border:0; }

.fiche-main .rendered h2 { margin-top:1.6rem; border-bottom:1px solid #2a2f3a; padding-bottom:.3rem; }
.fiche-main table { border-collapse:collapse; width:100%; margin:1rem 0; display:block; overflow-x:auto; }
.fiche-main th, .fiche-main td { border:1px solid #2a2f3a; padding:.4rem .6rem; text-align:left; }

.q-interessant, .q-apprends, .q-pratique { margin:2rem 0; }
.q-interessant h2, .q-apprends h2, .q-pratique h2 { border-bottom:1px solid #2a2f3a; padding-bottom:.3rem; }
.badge-sub { font-size:.78rem; padding:.15rem .55rem; border-radius:999px; background:#2a2f3a; color:var(--fg); }
.fiche { margin-top:.6rem; }
.outils, .liens { margin-top:1rem; }
.outils h3, .liens h3 { font-size:.9rem; color:var(--muted); margin:0 0 .4rem; text-transform:uppercase; letter-spacing:.03em; }
.outils ul, .liens ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.3rem; }
.outils a, .liens a { color:var(--accent); text-decoration:none; }
.outils a:hover, .liens a:hover { text-decoration:underline; }

.rapport-complet { margin:2rem 0; background:#1e222b; border-radius:8px; padding:.8rem 1rem; }
.rapport-complet summary { cursor:pointer; font-weight:600; color:var(--muted); }

#refresh-fiche { width:100%; }
#refresh-fiche:disabled { background:#444; cursor:not-allowed; }