/* Free tools (calculators). Loaded only on /tools and /fr/outils pages. Uses the site's colour variables. */
.tool-hero{padding:56px 0 8px}
.tool-hero .wrap{display:block}
.tool-hero .lead{max-width:44em}
.tool{padding:28px 0 72px}
.tool .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:900px){.tool .wrap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.calc,.tres{padding:22px 18px;border-radius:18px}.seg label{white-space:normal}}
.calc{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:var(--shadow)}
.calc h2,.tres h2{font-size:1.35rem;margin:0 0 6px}
.calc .fhint{margin-bottom:18px}
.calc .fields{display:grid;gap:18px}
.calc .ff label,.calc .ff legend{font-weight:600;font-size:.95rem}
.calc .unit{position:relative;display:flex;align-items:center}
.calc .unit .pre,.calc .unit .suf{position:absolute;color:var(--ink-2);font-size:.95rem;pointer-events:none}
.calc .unit .pre{left:14px}
.calc .unit .suf{right:14px}
.calc .unit.has-pre input{padding-left:42px}
.calc .unit.has-suf input{padding-right:64px}
.calc input[type=number],.calc input[type=text],.calc select{font:inherit;font-size:1.05rem;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%;min-height:50px;font-variant-numeric:tabular-nums}
.calc input:focus,.calc select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.calc input[aria-invalid=true]{border-color:#C0392B;outline-color:#C0392B}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:9px 16px;cursor:pointer;font-weight:500;font-size:.95rem}
.seg label:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg))}
.seg input{accent-color:var(--accent);width:18px;height:18px;margin:0}
.tres{position:sticky;top:90px;background:var(--ink);color:var(--bg);border-radius:24px;padding:28px;box-shadow:var(--shadow)}
@media (max-width:900px){.tres{position:static}}
.tres .eyebrow{color:var(--accent-on-ink)}
.tres .big{font-family:var(--font-head);font-size:clamp(2.2rem,5vw,3.2rem);font-weight:700;line-height:1;letter-spacing:-.03em;margin:6px 0 6px;font-variant-numeric:tabular-nums}
.tres .big-l{color:color-mix(in srgb,var(--bg) 75%,transparent);margin:0 0 20px}
.tres dl{margin:0;display:grid;gap:0;border-top:1px solid color-mix(in srgb,var(--bg) 18%,transparent)}
.tres dl div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid color-mix(in srgb,var(--bg) 18%,transparent)}
.tres dt{min-width:0;color:color-mix(in srgb,var(--bg) 75%,transparent);font-size:.95rem}
.tres dd{margin:0;font-weight:650;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.verdict{margin:20px 0 0;padding:14px 16px;border-radius:14px;background:color-mix(in srgb,var(--bg) 10%,transparent);font-size:.95rem;line-height:1.5}
.verdict:empty{display:none}
.tres .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.tres .btn{font:inherit;font-weight:600;cursor:pointer;max-width:100%;text-align:left}
.calc,.tres{min-width:0}
.tres .btn-primary{background:var(--accent-on-ink);color:var(--ink);border:0}
.tres .btn-ghost{background:transparent;color:var(--bg);border-color:color-mix(in srgb,var(--bg) 35%,transparent)}
.tres .note{font-size:.8rem;color:color-mix(in srgb,var(--bg) 65%,transparent);margin:16px 0 0}
.howto{max-width:780px}
.howto h3{margin-top:26px}
.howto code,.formula{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88rem;background:var(--surface-2);border-radius:8px;padding:2px 6px}
.formula{display:block;padding:12px 14px;margin:8px 0 14px;white-space:pre;overflow-x:auto;line-height:1.6;max-width:100%}
.howto ul{padding-left:1.2em}
.howto li{margin-bottom:6px}
.sources{font-size:.85rem;color:var(--ink-2)}
.sources a{color:var(--accent)}
.toolgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:40px}
@media (max-width:900px){.toolgrid{grid-template-columns:1fr}}
.toolgroup{margin:0 0 14px;font-size:1.25rem}
.door .chip{align-self:flex-start;font-size:.75rem;font-weight:600;border:1px solid var(--line);border-radius:999px;padding:3px 10px;color:var(--ink-2);margin-bottom:12px}
.toolcta{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:28px 30px}
.toolcta h2{font-size:1.5rem;margin:0 0 6px}
.toolcta p{margin:0;color:var(--ink-2);max-width:40em}
.nojs{background:var(--surface-2);border-radius:14px;padding:14px 16px;margin:0 0 18px}
.toolink{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--surface);border:1px dashed var(--accent);border-radius:18px;padding:18px 22px;margin-top:28px;text-decoration:none}
.toolink b{font-family:var(--font-head);font-size:1.1rem}
.toolink span{color:var(--ink-2)}
.toolink .go{color:var(--accent);font-weight:600}
.report-form{max-width:820px}
@media print{
  .nav,.crumb,footer,.report-sec,.toolcta,.howto,.tres .actions,.skip,.tool-hero .btn-row{display:none!important}
  body{background:#fff;color:#000}
  .tool .wrap{grid-template-columns:1fr 1fr}
  .tres{position:static;background:#fff;color:#000;border:1px solid #999;box-shadow:none}
  .tres dt,.tres .big-l,.tres .note{color:#333}
  .tres dl,.tres dl div{border-color:#ccc}
  .calc{box-shadow:none}
}
.chart{margin:18px 0 0}
.chart svg{width:100%;height:110px;display:block}
.chart rect.pos{fill:var(--accent-on-ink)}
.chart rect.neg{fill:color-mix(in srgb,var(--bg) 45%,transparent)}
.chart line.zero{stroke:color-mix(in srgb,var(--bg) 55%,transparent);stroke-width:1;vector-effect:non-scaling-stroke}
.chart-l{display:flex;justify-content:space-between;gap:8px;font-size:.75rem;color:color-mix(in srgb,var(--bg) 70%,transparent);margin-top:6px}
@media print{.chart rect.pos{fill:#555}.chart rect.neg{fill:#bbb}.chart-l{color:#333}}
/* v3 additions */
.tips{white-space:pre-line;margin:16px 0 0;font-size:.95rem;line-height:1.55;color:color-mix(in srgb,var(--bg) 85%,transparent)}
.tips:empty{display:none}
.tips-h{font-size:1rem;margin:20px 0 0;color:var(--bg)}
.calc-go{border:0;cursor:pointer;font:inherit;font-weight:600;justify-content:center}
.calc input[type=text],.calc textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%}
.calc textarea{resize:vertical;line-height:1.5}
.calc textarea:focus,.calc input[type=text]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.calc ::placeholder{color:var(--ink-2);opacity:.7}
.calc .fgroup{margin-top:6px;padding-top:14px;border-top:1px solid var(--line)}
.calc .fgroup h3{font-size:1.05rem;margin:0}
/* plan document */
.tres.doc{position:static;background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.tres.doc .eyebrow{color:var(--accent)}
.tres.doc .verdict{background:var(--surface-2)}
.tres.doc .note{color:var(--ink-2)}
.tres.doc .btn-primary{background:var(--accent);color:var(--accent-ink)}
.bplan h3{font-size:1.5rem;margin:6px 0 2px}
.bplan .plan-sub{color:var(--ink-2);font-size:.85rem;margin:0 0 10px}
.bplan h4{font-family:var(--font-head);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:14px 0 2px}
.bplan p{margin:0;font-size:.95rem}
.bplan .plan-empty{color:var(--ink-2);font-style:italic}
/* check lists (name, site, ai) */
.checks{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:0}
.checks li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid color-mix(in srgb,currentColor 15%,transparent)}
.checks li>b{flex:1}
.checks li div{flex:1;min-width:0}
.checks li p{margin:4px 0 0;font-size:.9rem;opacity:.85}
.checks code{font-size:.8rem;word-break:break-all;background:color-mix(in srgb,currentColor 8%,transparent);border-radius:6px;padding:1px 6px}
.checks .st{font-size:.8rem;font-weight:600;opacity:.85}
.dot-s{width:12px;height:12px;border-radius:50%;flex:none;margin-top:6px;background:#9aa0a6}
.chk-pass .dot-s{background:#2EA86F}
.chk-warn .dot-s{background:#E0A526}
.chk-fail .dot-s{background:#E5534B}
.checks-box h3{font-size:1rem;margin:18px 0 4px}
.checks-box.wide{max-width:900px}
.checks-box.wide:empty{display:none}
.handles{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.handles a{display:inline-block;border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:999px;padding:6px 12px;font-size:.85rem;text-decoration:none}
/* start-up checklist */
.cl-prof{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.cl-prof .chk,.cl-all{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:8px 14px;align-items:center;font-size:.9rem}
.cl-prof .chk:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg))}
.cl-all{display:inline-flex;margin-top:10px;font-size:.85rem}
.cl-phase h3{font-size:1.1rem;margin:22px 0 8px}
.cl-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.cl-step{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.cl-step:has(input:checked){opacity:.7}
.cl-step:has(input:checked) .st-title{text-decoration:line-through}
.cl-box{display:flex;gap:10px;align-items:flex-start;font-weight:650;cursor:pointer}
.cl-box input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent);flex:none}
.cl-step p{margin:6px 0 0 30px;font-size:.92rem;color:var(--ink-2)}
.cl-step .cond{display:inline-block;margin:8px 0 0 30px;font-size:.78rem;font-weight:600;border:1px solid var(--line);border-radius:999px;padding:2px 10px;color:var(--ink-2)}
.cl-step .cl-src{font-size:.8rem}
.cl-step .cl-src a{color:var(--accent)}
.bar{height:8px;border-radius:99px;background:color-mix(in srgb,var(--bg) 20%,transparent);overflow:hidden;margin:0 0 16px}
.bar span{display:block;height:100%;width:0;background:var(--accent-on-ink);transition:width .2s}
ul.sources{padding-left:1.2em;columns:2;font-size:.85rem}
@media (max-width:700px){ul.sources{columns:1}}
.tool .calc:has(.cl-phases){grid-column:auto}
@media print{
  .tool:has(.doc) .calc{display:none!important}
  .tool:has(.doc) .wrap{grid-template-columns:1fr}
  .tres.doc{border:0}
  .cl-step{break-inside:avoid}
  .checks-box.wide{max-width:none}
  .dot-s{print-color-adjust:exact;-webkit-print-color-adjust:exact}
}

.calc .cl-all{display:inline-flex;width:auto}
.tips-h:empty{display:none}
/* EU compliance checks */
.whybox:empty{display:none}
ul.why{margin:8px 0 0;padding-left:1.1em;display:grid;gap:8px;font-size:.93rem;line-height:1.5;color:color-mix(in srgb,var(--bg) 88%,transparent)}
ul.why b{color:var(--bg)}
.tres .actions a.btn{text-decoration:none}
.cl-list2{display:grid;gap:8px;margin-top:6px}
.cl-box2{border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:10px 12px;font-size:.93rem;align-items:center}
.cl-box2:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg))}
.checks-box.wide h2{font-size:1.4rem}
.tres [hidden],.calc [hidden]{display:none!important}
.tres.stale{opacity:.45;filter:grayscale(.4)}
@media print{
  .tool:has(.cl-phases) .wrap{grid-template-columns:1fr}
  .tool:has(.cl-phases) .tres .verdict,.tool:has(.cl-phases) .tres .note,.tool:has(.doc) .tres .verdict,.tool:has(.doc) .tres .note,.tool:has(.doc) .tres .small{display:none}
  .cl-step{opacity:1!important}
  .report-sec,.toolcta,.kitcheck-sec{display:none!important}
  section{padding:24px 0}
}
.ai-answer{margin:10px 0 0;padding:16px 18px;border-left:3px solid var(--accent);background:var(--surface-2);border-radius:0 14px 14px 0;font-size:.98rem;line-height:1.55}
.handles .hit{font-weight:700;color:var(--accent)}