:root{
  --blue:#1e63ff;
  --green:#5fd000;
  --violet:#7a40ff;
  --bg:#0b2540;
  --card:#ffffff;
  --muted:#5b6b7a;
  --ring:rgba(30,99,255,.2);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  background: linear-gradient(135deg, #0f5bd7, #1bbf66);
  background-attachment: fixed;
  color:#0b1b2b;
}
.hero{
  padding:24px 16px 8px;
  text-align:center;
  color:#fff;
}
.brand{font-size:28px;font-weight:800;letter-spacing:.5px; display:flex; align-items:center; justify-content:center; gap:8px}
.logo{font-size:28px}
.brand-name{word-spacing:2px}
.sub{opacity:.9;margin-top:6px;font-weight:600}
.card{
  background: var(--card);
  width:min(940px, 92vw);
  margin:18px auto 28px;
  border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.18);
  padding:22px;
}
h1{
  margin:0 0 10px;
  font-size: clamp(20px, 3.4vw, 28px);
  color:#0b1b2b;
  display:flex; align-items:center; gap:8px
}
.row{display:flex; flex-direction:column; gap:8px; margin:12px 0}
.grid-2{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px}
@media (max-width:720px){.grid-2{grid-template-columns:1fr}}
label{font-weight:700; color:#0b1b2b}
select, input{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid #d7dee6; background:#f8fafc; font-size:16px;
  outline:none;
}
select:focus, input:focus{border-color:var(--blue); box-shadow:0 0 0 4px var(--ring)}
.hint{color:var(--muted); font-size:13px}
.multiselect{display:flex; flex-direction:column; gap:8px}
.multiselect label{font-weight:600; display:flex; align-items:center; gap:10px}
.multiselect input[type=checkbox]{width:18px;height:18px}
.totaux{margin-top:12px; display:grid; gap:8px}
#btnCredit{
  width:max-content; border:none; background:#d9f99d; color:#0b1b2b; font-weight:800; padding:10px 14px; border-radius:999px; cursor:pointer
}
#btnCredit[aria-pressed=true]{background:#bef264}
.primary{
  background: linear-gradient(90deg, var(--blue), var(--violet));
  color:#fff; border:none; padding:14px 18px; border-radius:12px; font-weight:800; cursor:pointer; font-size:16px;
}
.primary:hover{filter:brightness(1.05)}
.actions{display:flex; flex-direction:column; gap:10px; align-items:flex-start; margin-top:10px}
.fine{color:var(--muted); font-size:13px}
.foot{color:#e6f0ff; text-align:center; padding:10px 0 24px; font-size:13px}