:root { --ink:#0A2540; --ink2:#425466; --line:#DDE3EA; --bg:#EEF1F5; --paper:#fff; --accent:#C9740A; --risk:#B42318; --sel:#E6EDF6; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:14px; line-height:1.45; font-variant-numeric: tabular-nums; }
.topbar { display:flex; align-items:center; gap:18px; padding:0 28px; height:56px; background:var(--ink); color:#fff; }
.brand { color:#fff; font-weight:600; font-size:18px; text-decoration:none; letter-spacing:.2px; }
.tool { color:#B8C6D6; padding-left:18px; border-left:1px solid #2E4A66; }
.cta-link { margin-left:auto; color:#fff; text-decoration:none; border:1px solid #5F7C99; padding:7px 14px; border-radius:6px; }
.cta-link:hover { background:#16385C; }
a:focus-visible, button:focus-visible, input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.layout { display:grid; grid-template-columns:360px 1fr; gap:24px; max-width:1280px; margin:0 auto; padding:24px 28px 48px; align-items:start; }
.panel { position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto; background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:6px 20px 20px; }
fieldset { border:0; border-bottom:1px solid var(--line); margin:0; padding:16px 0 14px; display:grid; gap:10px; }
legend { font-weight:600; font-size:14px; padding:0; float:left; width:100%; margin-bottom:10px; }
fieldset > :not(legend) { clear:both; }
label { display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--ink2); }
input[type=number], input[type=email] { width:100%; padding:8px 10px; border:1px solid #C3CCD6; border-radius:6px; font:inherit; color:var(--ink); background:#fff; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.row3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
button { font:inherit; font-weight:600; cursor:pointer; border:0; border-radius:6px; background:var(--ink); color:#fff; padding:11px 16px; }
button:hover { background:#16385C; }
.rerun { margin-top:16px; width:100%; background:var(--sel); color:var(--ink); }
.rerun:hover { background:#D5E0EE; }

.results { display:grid; gap:20px; }
.summary, figure, #email-gate, .assumptions { background:var(--paper); border:1px solid var(--line); border-radius:10px; margin:0; }
.summary { padding:26px 28px; }
.muted { color:var(--ink2); margin:0; }
.big { margin:2px 0 18px; font-size:clamp(40px,6vw,60px); font-weight:500; letter-spacing:-1px; line-height:1.05; }
.big::after { content:' CAD'; font-size:.35em; color:var(--ink2); letter-spacing:0; }
.range { max-width:640px; margin-bottom:12px; }
.track { position:relative; height:10px; background:var(--sel); border-radius:5px; }
#range-fill { position:absolute; top:0; bottom:0; background:#7C9CC4; border-radius:5px; }
#range-mid { position:absolute; top:-4px; bottom:-4px; width:3px; background:var(--ink); border-radius:2px; }
.range-labels { display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink2); margin-top:6px; }
.risks { list-style:none; padding:0; margin:18px 0 0; display:grid; gap:0; border-top:1px solid var(--line); }
.risks li { display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); }
.risks strong { font-size:16px; color:var(--risk); }

.plots { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
figure { padding:16px 18px 12px; }
.wide { grid-column:1/-1; }
figcaption { font-weight:600; margin-bottom:10px; }
.plot { position:relative; height:280px; }
.wide .plot { height:320px; }
.assumptions { padding:14px 18px; font-size:12.5px; color:var(--ink2); }
#email-gate { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:22px 24px; align-items:center; }
#email-gate h3 { margin:0 0 4px; font-size:16px; }
#email-gate p { margin:0; color:var(--ink2); }
#email-gate form { display:grid; gap:10px; }

@media (max-width:980px) {
  .layout { grid-template-columns:1fr; padding:16px; }
  .panel { position:static; max-height:none; }
  .plots, #email-gate { grid-template-columns:1fr; }
  .topbar { padding:0 16px; } .tool { display:none; }
}

.sub { font-weight:400; font-size:12px; color:var(--ink2); display:block; margin-top:2px; }

.tool { text-decoration:none; }
.pdf-btn { margin-left:auto; background:transparent; border:1px solid #5F7C99; padding:7px 14px; }
.pdf-btn + .cta-link { margin-left:0; }
.print-only { display:none; }
@media print {
  .topbar, .panel, #email-gate, .rerun { display:none !important; }
  body { background:#fff; } .layout { display:block; padding:0; max-width:none; }
  .print-only { display:block; } .print-only h1 { font-size:20px; margin:0 0 2px; } .print-only p { margin:0 0 12px; color:#425466; }
  .summary, figure, .assumptions { border:1px solid #ccd3db; break-inside:avoid; }
  .plot, .wide .plot { height:230px; } .results { gap:12px; }
  #print-params table { width:100%; border-collapse:collapse; font-size:11px; margin-top:12px; }
  #print-params td { border-bottom:1px solid #e1e6ec; padding:3px 6px; } #print-params th { text-align:left; padding:8px 6px 3px; }
}
/* Page de présentation */
.hero { max-width:1100px; margin:0 auto; padding:56px 28px 24px; display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; }
.hero h1 { font-size:clamp(30px,4.2vw,46px); line-height:1.1; letter-spacing:-.8px; margin:0 0 16px; font-weight:600; }
.hero p { font-size:17px; color:var(--ink2); max-width:520px; margin:0 0 24px; }
.actions { display:flex; gap:12px; flex-wrap:wrap; }
.btn { display:inline-block; text-decoration:none; font-weight:600; padding:12px 20px; border-radius:6px; background:var(--ink); color:#fff; }
.btn:hover { background:#16385C; } .btn.alt { background:transparent; color:var(--ink); border:1px solid #9FB0C3; } .btn.alt:hover { background:var(--sel); }
.sample { background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:16px 18px 10px; margin:0; }
.sample figcaption { font-size:12.5px; font-weight:400; color:var(--ink2); margin:6px 0 0; }
.sample svg { width:100%; height:auto; display:block; }
.band { max-width:1100px; margin:0 auto; padding:36px 28px; }
.band h2 { font-size:22px; margin:0 0 20px; letter-spacing:-.3px; }
.three { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.three h3 { font-size:16px; margin:0 0 6px; } .three p, .steps p { margin:0; color:var(--ink2); }
.steps { display:grid; gap:0; counter-reset:s; border-top:1px solid var(--line); }
.steps li { list-style:none; counter-increment:s; display:grid; grid-template-columns:44px 1fr; padding:16px 0; border-bottom:1px solid var(--line); }
.steps li::before { content:counter(s); font-weight:600; font-size:20px; color:var(--accent); }
.steps h3 { margin:0 0 2px; font-size:16px; }
.cols2 { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.cols2 ul { margin:0; padding-left:18px; color:var(--ink2); } .cols2 li { margin:5px 0; }
.foot { max-width:1100px; margin:0 auto; padding:20px 28px 56px; color:var(--ink2); font-size:12.5px; border-top:1px solid var(--line); }
@media (max-width:860px) { .hero, .three, .cols2 { grid-template-columns:1fr; gap:24px; } .hero { padding-top:32px; } }

.hp { position:absolute; left:-9999px; }
#gate-msg { margin:0; min-height:1.4em; font-size:13px; }
#gate-msg.ok { color:#1B6E3C; } #gate-msg.err { color:var(--risk); }
.help-link {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  background: #E6EDF6;
  color: #0A2540;
  border-radius: 50%;
  font-size: 11px;
  text-decoration: none;
  margin-left: 4px;
  vertical-align: middle;
  font-weight: bold;
}
.help-link:hover { background: #C9D2DC; }
/* Espacement du formulaire */
fieldset {
  margin-bottom: 15px;
  padding-bottom: 10px;
}
legend {
  font-size: 14px;
  color: #0A2540;
  margin-bottom: 10px;
  font-weight: 600;
}
label {
  margin-bottom: 8px;
  font-size: 13px;
  color: #425466;
}
input, select {
  margin-top: 4px;
  padding: 10px;
  background-color: #FAFBFC;
  border: 1px solid #C3CCD6;
  border-radius: 6px;
  font-size: 14px;
}