:root {
  --noir:#0b0e14; --nuit:#121826; --panneau:#1a2233; --ligne:#2a3348;
  --or:#d4a94e; --or-clair:#e8c87e; --blanc:#f4f1ea; --gris:#9aa3b5; --lagon:#3d8f8a;
  --ok:#4fbf8a; --warn:#e0a84a; --err:#d95b5b;
  --serif:Georgia,"Times New Roman",serif; --sans:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body { background:var(--noir); color:var(--blanc); font:15px/1.5 var(--sans); min-height:100%; }
a { color:var(--or-clair); text-decoration:none; }
h1,h2,h3 { font-family:var(--serif); font-weight:normal; letter-spacing:.01em; }
h1 { font-size:30px; } h2 { font-size:22px; color:var(--or-clair); } h3 { font-size:17px; }
.muted { color:var(--gris); } .small { font-size:13px; } .center { text-align:center; }
button, .btn { font:inherit; cursor:pointer; border:1px solid var(--or); background:var(--or); color:var(--noir); padding:10px 18px; border-radius:6px; font-weight:600; letter-spacing:.02em; display:inline-block; line-height:1.3; }
.btn.ghost, button.ghost { background:transparent; color:var(--or-clair); }
.btn.sm, button.sm { padding:6px 12px; font-size:13px; font-weight:500; }
.btn.ok, button.ok { background:var(--lagon); border-color:var(--lagon); color:#fff; }
.btn.danger, button.danger { background:transparent; border-color:var(--err); color:var(--err); }
.btn.link, button.link { background:none; border:0; color:var(--or-clair); padding:0; font-weight:500; }
input, select, textarea { font:inherit; width:100%; padding:10px 12px; border-radius:6px; border:1px solid var(--ligne); background:var(--nuit); color:var(--blanc); }
input[type=checkbox] { width:auto; }
label { display:block; font-size:13px; color:var(--gris); margin:12px 0 4px; }
.card { background:var(--panneau); border:1px solid var(--ligne); border-radius:10px; padding:20px 22px; }
.grid { display:grid; gap:16px; } .g2 { grid-template-columns:1fr 1fr; } .g3 { grid-template-columns:repeat(3,1fr); } .g4 { grid-template-columns:repeat(4,1fr); } .g32 { grid-template-columns:1.4fr 1fr; } .gs { grid-template-columns:1fr 320px; }
table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--ligne); vertical-align:top; }
th { font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--gris); font-weight:600; }
td.num, th.num { text-align:right; white-space:nowrap; }
.tag { display:inline-block; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:99px; border:1px solid var(--ligne); color:var(--gris); white-space:nowrap; }
.tag.ok { color:var(--ok); border-color:var(--ok); } .tag.warn { color:var(--warn); border-color:var(--warn); } .tag.err { color:var(--err); border-color:var(--err); } .tag.or { color:var(--or-clair); border-color:var(--or); }
header.top { display:flex; align-items:center; gap:18px; padding:14px 28px; border-bottom:1px solid var(--ligne); background:var(--nuit); position:sticky; top:0; z-index:10; }
header.top .logo { font-family:var(--serif); font-size:19px; letter-spacing:.06em; color:var(--blanc); }
header.top .logo small { display:block; font:11px var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--or); }
header.top nav { display:flex; gap:4px; margin-left:26px; flex-wrap:wrap; }
header.top nav a { padding:8px 12px; border-radius:6px; color:var(--gris); font-size:14px; }
header.top nav a.on { color:var(--blanc); background:var(--panneau); }
header.top .who { margin-left:auto; text-align:right; font-size:13px; color:var(--gris); }
header.top .who b { display:block; color:var(--blanc); font-weight:500; }
main { max-width:1120px; margin:0 auto; padding:30px 28px 60px; }
.titre { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; flex-wrap:wrap; }
.titre p { color:var(--gris); margin-top:4px; }
.kpi { display:flex; flex-direction:column; gap:4px; } .kpi b { font-family:var(--serif); font-size:28px; font-weight:normal; color:var(--or-clair); } .kpi span { color:var(--gris); font-size:13px; }
.liste { list-style:none; } .liste li { display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--ligne); } .liste li:last-child { border-bottom:0; }
.check { width:20px; height:20px; border:1.5px solid var(--gris); border-radius:5px; flex:0 0 20px; margin-top:2px; display:grid; place-items:center; }
.check.on { background:var(--lagon); border-color:var(--lagon); color:#fff; font-size:13px; }
button.check { padding:0; background:transparent; cursor:pointer; color:transparent; } button.check.on { color:#fff; }
.dem .t { flex:1; min-width:0; } .dem .t s { color:var(--gris); } .dem .meta { font-size:12.5px; color:var(--gris); margin-top:2px; }
.dem .rep { margin-top:6px; font-size:13.5px; background:var(--nuit); border-left:2px solid var(--or); padding:6px 10px; border-radius:0 6px 6px 0; white-space:pre-wrap; }
.dem .txt { white-space:pre-wrap; }
.dem .outils { margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .dem .outils input, .dem .outils select { padding:6px 10px; font-size:13px; width:auto; flex:1; min-width:180px; }
.steps { display:flex; margin:6px 0 22px; } .steps div { flex:1; text-align:center; font-size:12.5px; color:var(--gris); padding:10px 6px; border-bottom:2px solid var(--ligne); }
.steps div.on { color:var(--or-clair); border-color:var(--or); } .steps div.done { color:var(--ok); border-color:var(--ok); }
.hero { text-align:center; padding:70px 20px 40px; } .hero h1 { font-size:38px; margin-bottom:12px; } .hero p { color:var(--gris); max-width:560px; margin:0 auto 26px; font-size:16px; }
.hero .cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.phrase { text-align:center; font-family:var(--serif); font-size:19px; color:var(--or-clair); }
.formulaire { max-width:560px; margin:0 auto; }
.onglets { display:flex; gap:6px; margin-bottom:16px; } .onglets a { padding:10px 18px; border-radius:6px; border:1px solid var(--ligne); color:var(--gris); font-weight:500; } .onglets a.on { color:var(--noir); background:var(--or); border-color:var(--or); }
.note { font-size:13px; color:var(--gris); border-left:2px solid var(--or); padding:6px 12px; margin:14px 0; }
.flash { max-width:1120px; margin:18px auto -10px; padding:0 28px; } .flash div { padding:10px 14px; border-radius:6px; border:1px solid; font-size:14px; }
.flash .success { border-color:var(--ok); color:var(--ok); background:rgba(79,191,138,.08); } .flash .error { border-color:var(--err); color:var(--err); background:rgba(217,91,91,.08); }
.doc { display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--ligne); } .doc:last-child { border-bottom:0; }
.doc .ic { width:38px; height:44px; border:1px solid var(--ligne); border-radius:4px; display:grid; place-items:center; font-size:10px; color:var(--gris); letter-spacing:.05em; background:var(--nuit); flex:0 0 38px; }
.doc .d { flex:1; min-width:0; } .doc .d b { font-weight:500; display:block; } .doc .d span { font-size:12.5px; color:var(--gris); }
.barre { height:6px; background:var(--nuit); border-radius:99px; overflow:hidden; } .barre i { display:block; height:100%; background:linear-gradient(90deg,var(--or),var(--or-clair)); }
.voile { position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:60; } .fen { position:fixed; z-index:61; top:50%; left:50%; transform:translate(-50%,-50%); width:min(440px, 92vw); box-shadow:0 30px 80px rgba(0,0,0,.6); }
footer { text-align:center; color:var(--gris); font-size:12px; padding:30px; border-top:1px solid var(--ligne); margin-top:30px; }
details summary { cursor:pointer; color:var(--or-clair); }
.inline { display:inline; }
@media (max-width:820px) { .g2,.g3,.g4,.g32,.gs { grid-template-columns:1fr; } header.top nav { margin-left:0; } main { padding:20px 16px 50px; } .hero h1 { font-size:28px; } }