/* ============ Tokens ============ */
:root{
  --ink:#1B2430; --ink-soft:#3B4650;
  --paper:#FAFBFA; --surface:#FFFFFF; --surface-2:#F1F4F2;
  --line:#E4E9E6; --line-soft:#EDF1EF;
  --muted:#62706A; --muted-2:#8A968F;

  --accent:#1F7A63; --accent-ink:#0F4A3B; --accent-wash:#E4F1EC; --accent-line:#BFDDD1;
  --info:#3D6FD1; --info-wash:#E7EDFB;
  --warning:#AD7A1E; --warning-wash:#F5ECD9;
  --critical:#B23A5C; --critical-wash:#F7E4E9;
  --brass:#9C7A2E;

  --shadow-1: 0 1px 2px rgba(27,36,48,.06), 0 1px 1px rgba(27,36,48,.04);
  --shadow-2: 0 6px 20px rgba(27,36,48,.10), 0 2px 6px rgba(27,36,48,.06);

  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* Thème clair par défaut, quel que soit le réglage système — le sombre ne s'active
   que si choisi explicitement via le sélecteur (data-theme="dark"). */
:root[data-theme="dark"]{
  --ink:#E9EEEC; --ink-soft:#C4CDC8;
  --paper:#111613; --surface:#181F1B; --surface-2:#202924;
  --line:#2A342E; --line-soft:#232C27;
  --muted:#8FA098; --muted-2:#6C7A73;
  --accent:#3FAF8C; --accent-ink:#BFE8D8; --accent-wash:#16362C; --accent-line:#2C5346;
  --info:#6B93E0; --info-wash:#1B2740;
  --warning:#C2913A; --warning-wash:#332813;
  --critical:#C94C6B; --critical-wash:#3A1620;
  --brass:#C99A4A;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 10px 26px rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--font-display); font-weight:600; margin:0 0 4px; text-wrap:balance; letter-spacing:-0.01em; }
h1{ font-size:21px; } h2{ font-size:17px; }
p{ margin:0 0 10px; }
a{ color:inherit; }
::selection{ background:var(--accent-line); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.tnum{ font-variant-numeric:tabular-nums; }
.eyebrow{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; }

/* ============ Shell ============ */
.shell{ display:grid; grid-template-columns:236px 1fr; min-height:100vh; }
@media (max-width:920px){ .shell{ grid-template-columns:1fr; } }

.sidebar{
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:18px 12px;
  position:sticky; top:0; height:100vh; overflow-y:auto; z-index:20;
}
@media (max-width:920px){
  .sidebar{ position:fixed; left:-260px; width:236px; height:100vh; transition:left .18s ease; box-shadow:var(--shadow-2); }
  .sidebar.open{ left:0; }
}
.brand{ display:flex; align-items:center; gap:10px; padding:4px 8px 16px; text-decoration:none; }
.brand-mark{
  width:32px; height:32px; border-radius:8px; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display);
  font-style:italic; font-weight:600; font-size:16px; flex:none;
}
.brand-name{ font-family:var(--font-display); font-weight:600; font-size:15.5px; line-height:1.15; color:var(--ink); }
.brand-sub{ font-size:10.5px; color:var(--muted); margin-top:1px; }

.navgroup-label{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); font-weight:700; padding:13px 10px 6px; }
.navitem{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:8px 10px; border-radius:8px; border:none; background:none; color:var(--ink-soft);
  cursor:pointer; font-size:13px; font-weight:500; text-decoration:none;
}
.navitem:hover{ background:var(--surface-2); }
.navitem.active{ background:var(--accent-wash); color:var(--accent-ink); font-weight:600; }
.navitem .ic{ width:16px; text-align:center; flex:none; opacity:.9; }
.navitem .count{ margin-left:auto; font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:99px; background:var(--surface-2); color:var(--muted); }
.navitem.active .count{ background:var(--accent); color:#fff; }

.sidebar-foot{ margin-top:auto; padding-top:14px; border-top:1px solid var(--line); display:flex; align-items:center; gap:9px; padding-left:10px; }
.avatar{ width:26px; height:26px; border-radius:50%; background:var(--surface-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; color:var(--muted); flex:none; }
.who{ font-size:12px; font-weight:600; }
.who-sub{ font-size:10.5px; color:var(--muted); }
.icon-btn{ width:26px; height:26px; border-radius:7px; border:1px solid var(--line); background:var(--surface); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--muted); flex:none; margin-left:auto; font-size:13px; }
.icon-btn:hover{ background:var(--surface-2); }

.main{ min-width:0; }
.topbar{ display:flex; align-items:center; gap:12px; padding:16px 26px; border-bottom:1px solid var(--line); background:var(--surface); flex-wrap:wrap; }
.topbar .sub{ font-size:12px; color:var(--muted); margin-top:1px; }
.topbar-actions{ margin-left:auto; display:flex; gap:8px; }
.mobile-toggle{ display:none; }
@media (max-width:920px){ .mobile-toggle{ display:flex; } }
.sidebar-backdrop{ display:none; }
@media (max-width:920px){ .sidebar-backdrop.open{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:15; } }

.container{ padding:24px 26px 60px; max-width:1180px; }
@media (max-width:600px){ .container{ padding:16px 14px 46px; } }

/* ============ Buttons / chips ============ */
.btn{ display:inline-flex; align-items:center; gap:7px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); padding:8px 13px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; text-decoration:none; font-family:inherit; }
.btn:hover{ background:var(--surface-2); }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-ink); border-color:var(--accent-ink); }
.btn-secondary{ background:var(--surface-2); }
.btn-danger{ background:var(--critical); border-color:var(--critical); color:#fff; }
.btn-sm{ padding:5px 10px; font-size:12px; border-radius:7px; }

.chip{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.chip .dot{ width:6px; height:6px; border-radius:50%; }
.chip-success,.badge-paye,.badge-actif{ background:var(--accent-wash); color:var(--accent-ink); }
.chip-success .dot,.badge-paye .dot,.badge-actif .dot{ background:var(--accent); }
.chip-info{ background:var(--info-wash); color:var(--info); }
.chip-info .dot{ background:var(--info); }
.chip-warning,.badge-partiellement_paye{ background:var(--warning-wash); color:var(--warning); }
.chip-warning .dot,.badge-partiellement_paye .dot{ background:var(--warning); }
.chip-critical,.badge-retard,.badge-du{ background:var(--critical-wash); color:var(--critical); }
.chip-critical .dot,.badge-retard .dot,.badge-du .dot{ background:var(--critical); }
.chip-neutral,.badge-a_venir,.badge-brouillon{ background:var(--surface-2); color:var(--muted); }
.chip-neutral .dot,.badge-a_venir .dot,.badge-brouillon .dot{ background:var(--muted-2); }
.badge{ padding:3px 9px; border-radius:99px; font-size:11.5px; font-weight:700; display:inline-block; }

/* ============ Cards ============ */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-1); padding:18px; margin-bottom:16px; }
.dossier{ position:relative; }
.dossier::before{ content:""; position:absolute; top:0; left:18px; right:18px; height:3px; background:linear-gradient(90deg, var(--accent) 0 34px, transparent 34px); border-radius:0 0 3px 3px; }
.section-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.section-head .meta{ font-size:12px; color:var(--muted); margin-left:auto; }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-bottom:16px; }
.stat-card{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 18px; box-shadow:var(--shadow-1); }
.stat-card .value{ font-family:var(--font-display); font-size:26px; font-weight:600; color:var(--ink); margin-top:4px; }
.stat-card .label{ color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:600; }

/* ============ Alerts ============ */
.alert{ padding:11px 14px; border-radius:9px; margin-bottom:14px; font-size:13px; border:1px solid; }
.alert-error{ background:var(--critical-wash); color:var(--critical); border-color:var(--critical-line, var(--critical)); }
.alert-success{ background:var(--accent-wash); color:var(--accent-ink); border-color:var(--accent-line); }

/* ============ Tables ============ */
table{ width:100%; border-collapse:collapse; background:var(--surface); }
th{ text-align:left; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:700; padding:0 12px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
td{ padding:11px 12px; text-align:left; border-bottom:1px solid var(--line-soft); font-size:13px; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:var(--surface-2); }
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:var(--shadow-1); }
.table-wrap table{ border:none; }

.btn.link-button{ border:none; background:none; padding:0; color:var(--ink-soft); }

/* ============ Forms ============ */
form .field{ margin-bottom:14px; }
label{ display:block; font-weight:600; margin-bottom:5px; font-size:12.5px; color:var(--ink-soft); }
input[type=text],input[type=email],input[type=number],input[type=date],input[type=password],input[type=file],select,textarea{
  width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:8px; font-size:13.5px; font-family:inherit; background:var(--surface); color:var(--ink);
}
textarea{ min-height:70px; }
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; }
.checkbox-line{ display:flex; align-items:center; gap:8px; }
.checkbox-line input{ width:auto; }
fieldset{ border:1px solid var(--line); border-radius:10px; margin-bottom:16px; padding:14px; }
legend{ padding:0 6px; font-weight:600; font-size:12.5px; color:var(--ink-soft); }

.login-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--ink); }
.login-box{ background:var(--surface); padding:32px 28px; border-radius:14px; width:100%; max-width:360px; box-shadow:var(--shadow-2); }
.login-box .brand{ justify-content:center; padding-bottom:22px; }
.login-box h1{ text-align:center; }

.actions-row{ margin:0 0 16px; display:flex; gap:9px; flex-wrap:wrap; }

/* ============ Emails ============ */
.tabs-row{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.tab-pill{
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:99px;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-soft);
  font-size:12.5px; font-weight:600; text-decoration:none; white-space:nowrap;
}
.tab-pill:hover{ background:var(--surface-2); }
.tab-pill-active{ background:var(--accent-wash); border-color:var(--accent-line); color:var(--accent-ink); }
.tab-count{ font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:99px; background:var(--surface-2); color:var(--muted); }
.tab-pill-active .tab-count{ background:var(--accent); color:#fff; }

.cooldown-ring{
  --pct:0; width:32px; height:32px; border-radius:50%; flex:none;
  background:conic-gradient(var(--accent) calc(var(--pct)*1%), var(--surface-2) 0);
  display:flex; align-items:center; justify-content:center; position:relative; cursor:default;
}
.cooldown-ring::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--surface); }
.cooldown-ring span{ position:relative; z-index:1; font-size:8.5px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
.cooldown-ring.syncing{ animation:cooldown-spin 0.9s linear infinite; }
.cooldown-ring.syncing span{ opacity:0; }
@keyframes cooldown-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .cooldown-ring.syncing{ animation:none; } }

.email-row{ cursor:pointer; }
.email-row:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.email-row-non-lu{ font-weight:700; }
.email-row-selected{ background:var(--accent-wash); }
.unread-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--info); }

.cat-pill{ display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:99px; font-size:11px; font-weight:700; white-space:nowrap; }
.cat-a_traiter{ background:var(--info-wash); color:var(--info); }
.cat-candidature{ background:var(--accent-wash); color:var(--accent-ink); }
.cat-paiement{ background:#F5ECD9; color:var(--brass); }
.cat-technique{ background:var(--warning-wash); color:var(--warning); }
.cat-administratif{ background:var(--critical-wash); color:var(--critical); }
.cat-archive{ background:var(--surface-2); color:var(--muted); }
:root[data-theme="dark"] .cat-paiement{ background:#332813; color:var(--brass); }

.email-detail-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.email-body{ white-space:pre-wrap; font-size:13.5px; line-height:1.6; }
.cat-actions{ margin:12px 0; }
.cat-action-active{ background:var(--accent); border-color:var(--accent); color:#fff; }

@media (max-width:720px){
  .table-wrap thead{ display:none; }
  .table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap td{ display:block; width:100%; }
  .table-wrap tr{ border-bottom:2px solid var(--line); padding:8px 0; }
  .table-wrap td{ border:none; padding:4px 12px; }
  .table-wrap td::before{ content:attr(data-label) ": "; font-weight:600; color:var(--muted); }
}