/* calc-tool.css — Feuille de style commune aux calculateurs SHADES (outils par métier)
   Charte identique à /roi.html. Chaque outil peut surcharger --accent pour sa couleur métier. */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --gold:#C9A961;--gold-dark:#B8853A;--bg:#F7F7F5;--dark:#0F0F0E;
  --green:#10B981;--red:#ef9b9b;--muted:rgba(15,15,14,.6);
  --accent:#B8853A;--accent-soft:rgba(184,133,58,.1);--accent-line:rgba(184,133,58,.35)
}
html,body{background:var(--bg);color:var(--dark);font-family:'Inter',-apple-system,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.6}

.nav{background:#fff;border-bottom:.5px solid rgba(15,15,14,.06);padding:16px 24px;position:sticky;top:0;z-index:10}
.nav-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.logo{font-family:'Cormorant Garamond',serif;font-size:22px;letter-spacing:.06em;color:var(--dark);text-decoration:none}
.logo span{color:var(--gold-dark);font-weight:500}
.nav-link{color:rgba(15,15,14,.6);text-decoration:none;font-size:13px;margin-left:24px}
.nav-cta{padding:9px 18px;background:var(--dark);color:#fff;border-radius:6px;font-size:12px;text-decoration:none;font-weight:500;margin-left:24px}
@media(max-width:640px){.nav-link{display:none}}

.hero{padding:60px 24px 28px;text-align:center;max-width:820px;margin:0 auto}
.badge{display:inline-block;background:var(--accent-soft);color:var(--accent);padding:6px 14px;border-radius:99px;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
.hero h1{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:46px;line-height:1.1;letter-spacing:-.015em;margin-bottom:12px}
.hero h1 em{color:var(--accent);font-style:italic}
.lead{font-size:16px;font-weight:300;color:var(--muted);max-width:600px;margin:0 auto 28px;line-height:1.6}
@media(max-width:640px){.hero h1{font-size:34px}}

.calc{max-width:1000px;margin:30px auto;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
@media(max-width:900px){.calc{grid-template-columns:1fr}.results{position:static}}
.calc-form{background:#fff;border-radius:14px;padding:32px;box-shadow:0 8px 32px rgba(0,0,0,.05)}
.calc-form h2{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:500;margin-bottom:6px}
.calc-form .sub{font-size:13px;color:var(--muted);margin-bottom:24px}
.field{margin-bottom:18px}
.field label{display:block;font-size:12px;color:rgba(15,15,14,.7);font-weight:500;margin-bottom:6px;letter-spacing:.02em}
.field .unit{display:block;font-size:11px;color:rgba(15,15,14,.4);margin-top:3px}
.field input[type=number], .field select{width:100%;padding:12px 14px;border:1px solid rgba(15,15,14,.15);border-radius:8px;font-size:15px;font-family:inherit;background:#fff;transition:border-color .15s;font-weight:500}
.field input[type=number]:focus, .field select:focus{outline:none;border-color:var(--accent)}
.field input[type=range]{width:100%;height:6px;margin:8px 0 4px;accent-color:var(--accent)}
.field .range-val{display:inline-block;font-size:14px;color:var(--accent);font-weight:600;margin-left:8px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.field-row{grid-template-columns:1fr}.calc{padding:0 16px}.calc-form,.results{padding:22px 20px}.hero{padding:44px 18px 22px}.headline-value{font-size:38px}}

.results{background:linear-gradient(180deg,var(--dark),#1a1a18);border-radius:14px;padding:32px;color:#fff;position:sticky;top:80px}
.results h2{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:500;margin-bottom:8px;color:#fff}
.results .sub{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:24px}
.r-row{display:flex;justify-content:space-between;align-items:baseline;padding:13px 0;border-bottom:.5px solid rgba(255,255,255,.08);gap:12px}
.r-row:last-child{border-bottom:0}
.r-label{font-size:13px;color:rgba(255,255,255,.7)}
.r-value{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:500;color:#fff;text-align:right;white-space:nowrap}
.r-value.sm{font-size:18px}
.r-value.gold{color:var(--gold)}
.r-value.green{color:var(--green)}
.r-value.big{font-size:36px;line-height:1}
.r-value.neg{color:var(--red)}

.headline{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:10px;padding:18px;margin-top:18px}
.headline-label{font-size:11px;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.headline-value{font-family:'Cormorant Garamond',serif;font-size:44px;font-weight:500;color:var(--gold);line-height:1;margin-bottom:4px}
.headline-sub{font-size:12px;color:rgba(255,255,255,.6)}

.cta-row{margin-top:24px;text-align:center}
.cta-row a{display:inline-block;padding:14px 28px;background:var(--accent);color:#fff;text-decoration:none;border-radius:8px;font-size:13.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;transition:all .2s}
.cta-row a:hover{transform:translateY(-1px);box-shadow:0 8px 24px var(--accent-line)}
.cta-row .small{font-size:11px;color:rgba(255,255,255,.5);margin-top:10px;display:block}

.warn{max-width:1000px;margin:18px auto 0;padding:0 24px;font-size:12px;color:rgba(15,15,14,.45);text-align:center}
.warn strong{color:rgba(15,15,14,.6)}

.assumptions{max-width:820px;margin:40px auto;padding:0 24px}
.assumptions h3{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:500;margin-bottom:14px;text-align:center}
.assumptions ul{list-style:none;padding:24px;background:#fff;border-radius:10px;font-size:13.5px;color:rgba(15,15,14,.75);line-height:1.7}
.assumptions li{padding:6px 0;border-bottom:.5px solid rgba(15,15,14,.04)}
.assumptions li:last-child{border-bottom:0}
.assumptions li strong{color:var(--dark);font-weight:600}

.related{max-width:820px;margin:30px auto 10px;padding:0 24px;text-align:center}
.related h3{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:500;margin-bottom:16px}
.related-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.related-grid a{background:#fff;border:1px solid rgba(15,15,14,.1);border-radius:8px;padding:10px 16px;font-size:13px;color:var(--dark);text-decoration:none;transition:all .15s}
.related-grid a:hover{border-color:var(--accent);color:var(--accent)}

footer{padding:50px 24px 40px;text-align:center;color:var(--muted);font-size:12px;line-height:1.7;border-top:.5px solid rgba(15,15,14,.06);margin-top:30px}
footer a{color:rgba(15,15,14,.7);text-decoration:none;margin:0 8px}