/* ---------- Thème ---------- */
:root{
  --bg:#f7f5f2; --surface:#ffffff; --surface-2:#faf8f5; --text:#1f1b17; --muted:#6b635b; --line:#e8e2da;
  --brand:#c2461c; --brand-hover:#a93b15; --brand-soft:#fdeee6; --brand-text:#9a3412;
  --ok:#15803d; --ok-soft:#e8f6ec; --warn:#b45309; --warn-soft:#fef4dc;
  --shadow:0 1px 2px rgba(31,27,23,.05),0 4px 16px rgba(31,27,23,.06);
  --radius:16px; --radius-sm:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#171412; --surface:#211d1a; --surface-2:#1b1816; --text:#f3eee8; --muted:#a59a8f; --line:#352f2a;
    --brand:#f07a4a; --brand-hover:#f48d62; --brand-soft:#3a251c; --brand-text:#f8a27e;
    --ok:#5fcf8a; --ok-soft:#1d3226; --warn:#f0b357; --warn-soft:#3a2d15;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  --bg:#171412; --surface:#211d1a; --surface-2:#1b1816; --text:#f3eee8; --muted:#a59a8f; --line:#352f2a;
  --brand:#f07a4a; --brand-hover:#f48d62; --brand-soft:#3a251c; --brand-text:#f8a27e;
  --ok:#5fcf8a; --ok-soft:#1d3226; --warn:#f0b357; --warn-soft:#3a2d15;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--brand-text)}
h1,h2,h3{line-height:1.2;letter-spacing:-.01em}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- En-tête ---------- */
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:12px;height:62px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:750;margin-right:auto;min-width:0}
.logo-mark{width:34px;height:34px;border-radius:10px;background:var(--brand);display:grid;place-items:center;font-size:19px;flex:none}
.logo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabs{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px}
.tabs a{padding:6px 14px;border-radius:999px;text-decoration:none;color:var(--muted);font-weight:600;font-size:.92rem;white-space:nowrap}
.tabs a[aria-current]{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}

/* ---------- Hero ---------- */
.hero{padding:36px 0 24px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--brand-text);background:var(--brand-soft);padding:5px 12px;border-radius:999px}
.hero h1{font-size:clamp(1.85rem,4.4vw,2.8rem);margin:14px 0 8px;font-weight:800}
.hero p{color:var(--muted);font-size:1.08rem;margin:0;max-width:640px}

/* ---------- Cartes ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:20px}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.card-head h2{font-size:1.12rem;margin:0}
.card-head p{margin:2px 0 0;color:var(--muted);font-size:.9rem}
.step{width:30px;height:30px;border-radius:50%;background:var(--brand-soft);color:var(--brand-text);font-weight:750;display:grid;place-items:center;flex:none}

/* ---------- Formulaires ---------- */
input,select,textarea{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 12px;width:100%;min-width:0;transition:border-color .15s,box-shadow .15s}
input,select{height:44px}
textarea{min-height:170px;resize:vertical;line-height:1.6}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--muted) 45%,var(--line))}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
label{font-size:.85rem;font-weight:600;color:var(--muted)}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:650;font-size:.95rem;cursor:pointer;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);color:var(--text);padding:0 16px;height:44px;text-decoration:none;transition:background .15s,border-color .15s,transform .05s}
.btn:hover{background:var(--surface-2);border-color:color-mix(in srgb,var(--muted) 40%,var(--line))}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,.chip:focus-visible,.icon-btn:focus-visible,.stepper button:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 30%,transparent)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.btn.ghost{background:none;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--surface-2);color:var(--text)}
.btn.block{width:100%}
.btn.dashed{border-style:dashed;color:var(--muted);background:none}
.btn.dashed:hover{color:var(--text)}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.icon-btn{width:36px;height:36px;display:grid;place-items:center;border:none;background:none;border-radius:8px;color:var(--muted);cursor:pointer}
.icon-btn:hover{background:var(--warn-soft);color:var(--warn)}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chips-label{font-size:.85rem;color:var(--muted);font-weight:600;margin-right:2px}
.chip{font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:999px;padding:6px 13px;transition:all .15s}
.chip:hover{border-color:var(--brand);color:var(--brand-text);background:var(--brand-soft)}

/* ---------- Stepper (+/-) ---------- */
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface);height:44px}
.stepper button{width:42px;height:100%;border:none;background:var(--surface-2);color:var(--text);font-size:1.2rem;cursor:pointer}
.stepper button:hover{background:var(--brand-soft);color:var(--brand-text)}
.stepper input{border:none;border-radius:0;text-align:center;height:100%;font-weight:700;width:56px;padding:0;-moz-appearance:textfield}
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none}
.stepper input:focus{box-shadow:none}

/* ---------- Mise en page ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.aside{position:sticky;top:82px}
@media (max-width:920px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .aside{position:static}
}

/* ---------- Résultats ---------- */
.big{font-size:2.6rem;font-weight:800;color:var(--brand-text);font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:-.02em}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.kpi{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px}
.kpi .lbl{font-size:.8rem;color:var(--muted);font-weight:600}
.kpi .val{font-size:1.35rem;font-weight:750;font-variant-numeric:tabular-nums}
.status{display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;padding:8px 12px;border-radius:var(--radius-sm)}
.status.ok{background:var(--ok-soft);color:var(--ok)}
.status.warn{background:var(--warn-soft);color:var(--warn)}
.bars{margin-top:16px}
.bars h3{font-size:.85rem;color:var(--muted);margin:0 0 8px;font-weight:650}
.bar{margin-bottom:9px;font-size:.88rem}
.bar .top{display:flex;justify-content:space-between;gap:8px;margin-bottom:4px}
.bar .top span:last-child{font-variant-numeric:tabular-nums;color:var(--muted)}
.bar .track{height:7px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.bar .fill{height:100%;background:var(--brand);border-radius:99px}

.hint{font-size:.85rem;color:var(--muted)}
.empty{text-align:center;padding:28px 12px;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}
.empty b{display:block;color:var(--text);margin-bottom:4px}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq details:last-of-type{border-bottom:none}
.faq summary{cursor:pointer;font-weight:650;padding:10px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--muted);font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 12px;color:var(--muted)}

/* ---------- Pied de page ---------- */
.footer{border-top:1px solid var(--line);margin-top:24px;padding:24px 0 40px;color:var(--muted);font-size:.88rem}
.footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.footer a{color:inherit}

/* ---------- Notification ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);background:var(--text);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:600;font-size:.92rem;opacity:0;transition:all .2s;pointer-events:none;z-index:50;display:flex;align-items:center;gap:8px}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:560px){
  .topbar .wrap{height:56px}
  .logo span:not(.logo-mark){display:none}
  .card{padding:16px}
  .hero{padding:24px 0 16px}
}
[hidden]{display:none!important}
@media (max-width:420px){
  .tabs a{padding:6px 9px;font-size:.8rem}
  .topbar .wrap{gap:8px}
  .logo-mark{width:30px;height:30px;font-size:16px}
}