:root{
  --bg:#F4F6F9; --surface:#FFFFFF; --surface-2:#EEF1F6;
  --ink:#16202A; --ink-soft:#5B6B7A;
  --primary:#1B4B66; --primary-deep:#123449;
  --accent:#1E8A6E; --accent-deep:#166B55;
  --line:#DCE3EB; --shadow:rgba(20,30,40,.08);
  --warn-bg:#FFF6E5; --warn-line:#F0D999; --warn-ink:#7A5B00;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#12181F; --surface:#1B232C; --surface-2:#212B35;
    --ink:#EDF1F5; --ink-soft:#9FB0BE;
    --line:#2C3742; --shadow:rgba(0,0,0,.35);
    --warn-bg:#332B12; --warn-line:#5A4A17; --warn-ink:#E8C55A;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
body{
  background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100dvh;-webkit-font-smoothing:antialiased;
  padding:20px 16px 56px;
}
.wrap{width:100%;max-width:720px;margin:0 auto}
a{color:inherit}

header.site{text-align:center;margin-bottom:16px}
header.site h1{margin:0 0 6px;font-size:26px;font-weight:800;letter-spacing:-.01em}
header.site p{margin:0;color:var(--ink-soft);font-size:14px;max-width:520px;margin:0 auto}

.disclaimer{
  background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink);
  border-radius:12px;padding:12px 16px;font-size:13px;line-height:1.5;margin:18px 0;text-align:center;
}

/* ---- Bascule de vue ---- */
.view-switch{display:flex;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:6px;margin:0 0 22px}
.view-switch button{flex:1;border:0;background:transparent;color:var(--ink-soft);padding:12px 10px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:700;font-family:inherit;transition:all .15s ease}
.view-switch button[aria-selected="true"]{background:var(--primary);color:#fff;box-shadow:0 2px 8px var(--shadow)}

.hidden{display:none !important}

/* ---- Panneaux / cartes ---- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 6px 20px var(--shadow);margin-bottom:16px}
.panel h2{margin:0 0 14px;font-size:15px;font-weight:800;color:var(--ink)}

.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--ink-soft);letter-spacing:.03em;text-transform:uppercase;margin-bottom:6px}
.field input[type=number],.field input[type=text]{
  width:100%;min-width:0;font-size:18px;padding:12px 14px;border-radius:11px;border:1.5px solid var(--line);
  background:var(--bg);color:var(--ink);font-family:inherit;outline:none;transition:border-color .15s ease;
}
.field input:focus{border-color:var(--primary)}
.field .unit{color:var(--ink-soft);font-size:13px;margin-left:8px}
.field-row{display:flex;gap:12px;flex-wrap:wrap}
.field-row .field{flex:1;min-width:140px}

/* ---- Pills (choix statut / mode / temps de travail) ---- */
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.pills button{border:1.5px solid var(--line);background:var(--surface);color:var(--ink-soft);padding:9px 14px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:700;font-family:inherit;transition:all .15s ease}
.pills button[aria-selected="true"]{border-color:var(--primary);color:var(--primary);background:var(--surface-2)}

/* ---- Résultats ---- */
.result-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.result-row:last-child{border-bottom:0}
.result-row .label{font-size:13px;color:var(--ink-soft);font-weight:600}
.result-row .value{font-size:17px;font-weight:800;text-align:right}
.result-row .value .range{display:block;font-size:11px;font-weight:600;color:var(--ink-soft);margin-top:2px}
.result-row.total{margin-top:6px;padding-top:16px;border-top:2px solid var(--line);border-bottom:0}
.result-row.total .label{font-size:14px;color:var(--ink);font-weight:800}
.result-row.total .value{font-size:24px;color:var(--accent-deep)}

.hint{font-size:12px;color:var(--ink-soft);margin-top:-4px;margin-bottom:16px;line-height:1.5}

/* ---- Vue salarié : conversion double sens ---- */
.convert-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:end;margin-bottom:6px}
.convert-arrow{display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:20px;padding-bottom:12px}
@media (max-width:520px){
  .convert-grid{grid-template-columns:1fr}
  .convert-arrow{display:none}
}

.badge{display:inline-block;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-soft);font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;margin-left:8px;vertical-align:middle}

footer.site{text-align:center;margin-top:28px;color:var(--ink-soft);font-size:12px;line-height:1.6}

@media (max-width:480px){
  .panel{padding:18px 16px}
  .result-row .value{font-size:15px}
  .result-row.total .value{font-size:21px}
}