/* tools.css — styles partagés des outils du Cosy (DA glaz / caramel / crème).
   Réutilise les tokens :root du styles.css du front (--primary, --ink, --cream, --line…). */
.tool-page{background:var(--cream);color:var(--ink)}
.tool-hero{padding:60px 0 32px;background:linear-gradient(104deg,var(--panel) 0%,var(--cream) 60%,var(--sand) 100%)}
.tool-hero .wrap{width:min(880px,calc(100% - 40px))}
.tool-crumb{font-size:12px;color:var(--muted);margin-bottom:16px}
.tool-crumb a{color:var(--muted);border-bottom:1px solid var(--line)}
.tool-crumb a:hover{color:var(--primary)}
.tool-crumb span{margin:0 6px}
.tool-eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px;display:flex;align-items:center;gap:8px;color:var(--caramel)}
.tool-eyebrow i{width:22px;height:2px;background:var(--caramel);display:inline-block}
.tool-hero h1{font:700 clamp(32px,4.4vw,54px)/1.03 var(--serif);letter-spacing:-.04em;margin:0;color:var(--ink)}
.tool-hero p.lead{font-size:17px;max-width:620px;margin:18px 0 0;color:var(--text-secondary)}
.tool-wrap{padding:34px 0 70px}
.tool-wrap .wrap{width:min(880px,calc(100% - 40px))}
.tool-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:0 14px 36px rgba(31,58,64,.06)}
.tool-panel+.tool-panel{margin-top:22px}
.tool-panel h2{font:700 25px/1.15 var(--serif);letter-spacing:-.02em;margin:0 0 8px;color:var(--ink)}
.tool-panel h3{font:600 19px/1.2 var(--serif);margin:22px 0 8px;color:var(--ink)}
.tool-panel p{font-size:15px;color:var(--text-secondary);margin:0 0 4px}
.tool-panel p.note{font-size:13px;color:var(--muted);margin-top:12px}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin:20px 0 4px}
.tool-field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.tool-field select,.tool-field input[type=number]{width:100%;font:inherit;font-size:15px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink)}
.tool-field select:focus,.tool-field input:focus{outline:2px solid var(--primary);outline-offset:1px}
.tool-field .hint{display:block;font-size:12px;color:var(--muted);margin-top:5px}
.tool-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:16px 0 0}
.tool-check{display:flex;align-items:center;gap:9px;font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--cream);cursor:pointer}
.tool-check input{accent-color:var(--primary);width:16px;height:16px}
.tool-check:hover{border-color:var(--primary)}
.tool-result{background:var(--ink);color:var(--white);border-radius:var(--radius);padding:28px;margin-top:22px}
.tool-result h2{color:var(--white);font:700 25px/1.15 var(--serif);margin:0 0 4px}
.tool-result p{color:var(--text-faint);font-size:14px}
.tool-headline{font:700 clamp(34px,5vw,52px)/1 var(--serif);color:var(--sky);margin:16px 0 6px;display:block}
.tool-sub{font-size:14px;color:var(--text-faint)}
.tool-table{width:100%;border-collapse:collapse;margin:18px 0 0;font-size:14px}
.tool-table th,.tool-table td{text-align:left;padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.14)}
.tool-table th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--sky);font-weight:700}
.tool-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tool-table tr.total td{border-bottom:0;font-weight:700;color:var(--white);border-top:2px solid rgba(255,255,255,.28)}
.tool-panel .tool-table th{color:var(--primary)}
.tool-panel .tool-table th,.tool-panel .tool-table td{border-bottom:1px solid var(--line)}
.tool-split{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:18px}
.tool-stat{background:rgba(255,255,255,.07);border-radius:12px;padding:16px}
.tool-stat b{display:block;font:700 27px/1 var(--serif);color:var(--sky);margin-bottom:5px}
.tool-stat span{font-size:12px;color:var(--text-faint);letter-spacing:.05em;text-transform:uppercase}
.tool-callout{background:var(--callout-bg);border:1px solid var(--callout-border);border-radius:12px;padding:16px 18px;margin-top:18px;font-size:14px;color:var(--callout-text)}
.tool-callout strong{color:var(--callout-text)}
.tool-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.tool-links a{font-size:13px;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:9px 14px;color:var(--ink);background:var(--cream)}
.tool-links a:hover{border-color:var(--primary);color:var(--primary)}
.tool-quiz-q{border-top:1px solid var(--line);padding:20px 0 4px}
.tool-quiz-q:first-of-type{border-top:0;padding-top:6px}
.tool-quiz-q p.q{font:600 18px/1.3 var(--serif);color:var(--ink);margin:0 0 12px}
.tool-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:9px}
.tool-opt{display:flex;align-items:center;gap:9px;font-size:14px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--cream);cursor:pointer;color:var(--text-secondary)}
.tool-opt input{accent-color:var(--primary)}
.tool-opt:hover{border-color:var(--primary)}
.tool-opt:has(input:checked){border-color:var(--primary);background:var(--panel);color:var(--ink);font-weight:600}
.tool-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.tool-btn{background:var(--primary);color:var(--white);border:1px solid var(--primary);border-radius:9px;padding:13px 20px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.tool-btn:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.tool-btn.alt{background:transparent;color:var(--ink);border-color:var(--line)}
.tool-btn.alt:hover{background:var(--cream);color:var(--ink)}
.tool-hidden{display:none}
@media(max-width:800px){.tool-hero{padding:44px 0 26px}.tool-panel{padding:22px}.tool-split{grid-template-columns:1fr}.tool-result{padding:22px}}