:root { --bg:#080b12; --panel:#111827; --bg2:#0c1018; --line:#1f2937; --line2:#243044;
  --accent:#5ad1ff; --accent2:#8b7bff; --muted:#9aa5b1; --faint:#6b7684; --text:#e8edf3;
  --red:#e05a5a; --orange:#e0a15a; --green:#5ae08a; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:system-ui,sans-serif; }
.screen { display:none; min-height:100vh; padding:0 20px 60px; }
.screen.active { display:block; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:20px 0; }
.brand { font-weight:700; font-size:18px; cursor:pointer; }
.logo { margin-right:6px; }
.hero { max-width:720px; margin:60px auto; text-align:center; }
.badge { display:inline-block; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--line2); border-radius:999px; padding:6px 14px; }
h1 { font-size:34px; margin:20px 0; }
.grad { background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead { color:var(--muted); line-height:1.6; }
.btn { border:none; border-radius:10px; padding:10px 18px; font-size:14px; cursor:pointer;
  color:var(--text); background:var(--line2); }
.btn.primary { background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#04121c; font-weight:700; }
.btn.big { padding:15px 30px; font-size:16.5px; border-radius:14px; }
.btn.ghost { background:transparent; border:1px solid var(--line2); }
.cta-row { display:flex; gap:12px; justify-content:center; margin-top:24px; flex-wrap:wrap; }
.panel { background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--line);
  border-radius:16px; padding:20px; }
.panel.narrow { max-width:640px; margin:30px auto; }
.filters { display:flex; gap:10px; flex-wrap:wrap; margin:16px 0; }
.filters input, .filters select { background:var(--bg2); border:1px solid var(--line2);
  border-radius:8px; padding:9px 12px; color:var(--text); font-size:13.5px; }
.check { display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--muted); }
.chip { background:rgba(90,209,255,.1); color:var(--accent); border:1px solid var(--line2);
  border-radius:999px; padding:6px 12px; font-size:12.5px; }
.tabs { display:flex; gap:8px; margin-top:10px; }
.tab { background:transparent; border:1px solid var(--line2); color:var(--muted);
  border-radius:10px; padding:8px 16px; cursor:pointer; }
.tab.active { color:var(--accent); border-color:var(--accent); }
.offre-list .item { border:1px solid var(--line); border-radius:12px; padding:16px;
  margin-bottom:10px; cursor:pointer; display:flex; justify-content:space-between; gap:12px; }
.jx { border-radius:999px; padding:4px 10px; font-size:12px; font-weight:700; white-space:nowrap; }
.jx.red { background:rgba(224,90,90,.15); color:var(--red); }
.jx.orange { background:rgba(224,161,90,.15); color:var(--orange); }
.jx.green { background:rgba(90,224,138,.15); color:var(--green); }
.jx.gray { background:rgba(154,165,177,.15); color:var(--muted); }
.hidden { display:none !important; }
.row { display:flex; gap:10px; align-items:center; }
.panel label { display:block; margin:14px 0 6px; font-size:13px; color:var(--muted); }
.panel textarea, .panel select.full { width:100%; background:var(--bg2); border:1px solid var(--line2);
  border-radius:8px; padding:10px; color:var(--text); font-size:14px; }
.pieces-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pieces-grid label { display:flex; align-items:center; gap:6px; font-size:13px; margin:0; }
#toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--panel); border:1px solid var(--line2); padding:12px 18px; border-radius:10px;
  opacity:0; transition:.25s; pointer-events:none; }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.foot { text-align:center; color:var(--faint); font-size:13px; padding:40px 0 10px; }
.guide-content h2 { margin-top:0; }
.guide-content p { color:var(--muted); line-height:1.6; }
.guide-content ol { padding-left:20px; line-height:1.7; }
.guide-content li { margin-bottom:12px; }
.disclaimer { margin-top:20px; background:rgba(224,161,90,.1); border:1px solid var(--orange);
  border-radius:10px; padding:14px 16px; color:var(--text); font-size:13.5px; line-height:1.6; }