:root, [data-theme="dark"] {
  --bg:#0e1013; --side:#121418; --panel:#171a1f; --field:#13161a;
  --line:#262b33; --line-2:#323843; --hover:#1d2128; --chip:#232830;
  --ink:#e8ecf1; --ink-2:#b7bec8; --muted:#7d8692;
  --accent:#00aff0; --accent-2:#0094cc; --accent-ink:#7fdcff; --accent-soft:rgba(0,175,240,.12); --ring:rgba(0,175,240,.35);
  --bar-soft:rgba(0,175,240,.55);
  --avatar-bg:#0b3a4f; --avatar-ink:#9fe3ff;
  --ok:#22c55e; --pos:#4ade80; --warn-ink:#fbbf24; --warn-soft:rgba(245,165,36,.14); --bad:#f04848; --neg:#f87171;
  --ok-bg:rgba(34,197,94,.1); --ok-line:rgba(34,197,94,.35); --ok-ink:#86efac;
  --err-bg:rgba(240,72,72,.1); --err-line:rgba(240,72,72,.35); --err-ink:#fca5a5;
  --shadow:none;
}
[data-theme="light"] {
  --bg:#f4f6f9; --side:#ffffff; --panel:#ffffff; --field:#f8fafc;
  --line:#e4e8ee; --line-2:#d3d9e1; --hover:#eef2f6; --chip:#edf1f5;
  --ink:#121820; --ink-2:#3d4754; --muted:#6a7482;
  --accent:#0098d4; --accent-2:#007fb3; --accent-ink:#0077a8; --accent-soft:rgba(0,152,212,.1); --ring:rgba(0,152,212,.28);
  --bar-soft:rgba(0,152,212,.45);
  --avatar-bg:#d9f1fb; --avatar-ink:#00648f;
  --ok:#16a34a; --pos:#15803d; --warn-ink:#b45309; --warn-soft:rgba(245,158,11,.14); --bad:#dc2626; --neg:#dc2626;
  --ok-bg:#ecfdf3; --ok-line:#a7e8bf; --ok-ink:#166534;
  --err-bg:#fef2f2; --err-line:#fecaca; --err-ink:#b91c1c;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
}
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
input, select, textarea, button { font:inherit; color:inherit; }
h1 { font-size:22px; margin:0; letter-spacing:-.02em; }
h2 { font-size:15px; margin:0 0 14px; font-weight:600; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* layout */
.app { display:grid; grid-template-columns:240px minmax(0,1fr); min-height:100vh; background:linear-gradient(to right, var(--side) 239px, var(--line) 239px 240px, transparent 240px); }
aside { background:var(--side); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:18px 12px; position:sticky; top:0; height:100vh; overflow-y:auto; }
main { padding:24px 28px 40px; min-width:0; }
.brand { display:flex; align-items:center; gap:10px; padding:2px 6px 18px; }
.brand b { display:block; font-size:15px; letter-spacing:-.01em; }
.brand small { display:flex; align-items:center; gap:6px; color:var(--accent); font-size:12px; font-weight:600; margin-top:2px; }
.brand small::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.brand.center { justify-content:center; padding-bottom:22px; }
.logo { width:40px; height:40px; border-radius:12px; background:#fff; border:1px solid var(--line-2); display:grid; place-items:center; flex-shrink:0; }
.logo img { width:30px; height:30px; object-fit:contain; }
.logo.big { width:52px; height:52px; border-radius:14px; } .logo.big img { width:38px; height:38px; }
nav { display:flex; flex-direction:column; gap:2px; flex:1; }
nav a { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; text-decoration:none; color:var(--ink-2); font-weight:500; }
nav a svg { width:18px; height:18px; flex-shrink:0; opacity:.85; }
nav a:hover { background:var(--hover); color:var(--ink); }
nav a.on { background:var(--accent-soft); color:var(--accent-ink); }

/* langue + thème */
.prefs { display:flex; align-items:center; gap:8px; padding:12px 6px; }
.seg { display:inline-flex; background:var(--field); border:1px solid var(--line); border-radius:9px; padding:2px; }
.seg a { padding:4px 10px; border-radius:7px; font-size:12px; font-weight:700; text-decoration:none; color:var(--muted); letter-spacing:.03em; }
.seg a.on { background:var(--panel); color:var(--ink); box-shadow:0 0 0 1px var(--line-2); }
.themebtn { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:9px; border:1px solid var(--line); background:var(--field); color:var(--ink-2); text-decoration:none; font-size:12px; font-weight:600; }
.themebtn svg { width:15px; height:15px; }
.themebtn:hover, .seg a:hover { color:var(--ink); }
.authprefs { position:absolute; top:12px; right:12px; }
.authprefs .prefs { padding:0; }

.me { display:flex; align-items:center; gap:10px; padding:12px 8px 0; border-top:1px solid var(--line); }
.me b { display:block; font-size:13px; }
.logout { margin:0; }
.link.muted { color:var(--muted); font-size:12px; font-weight:400; } .link.muted:hover { color:var(--ink); text-decoration:none; }
.avatar { width:32px; height:32px; border-radius:50%; background:var(--avatar-bg); color:var(--avatar-ink); display:grid; place-items:center; font-weight:700; flex-shrink:0; }
.avatar.sm { width:26px; height:26px; font-size:12px; }

.ph { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.ph h1 { margin-right:auto; }
.exports { display:flex; gap:8px; flex-wrap:wrap; }
.monthnav { display:flex; align-items:center; gap:4px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:3px; }
.monthnav a { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; text-decoration:none; font-size:18px; color:var(--ink-2); }
.monthnav a:hover { background:var(--hover); color:var(--ink); }
.monthnav span { min-width:130px; text-align:center; font-weight:600; }

.card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px; margin-bottom:16px; min-width:0; box-shadow:var(--shadow); }
.card.editing { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.cardhead { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.cardhead h2 { margin:0; }
.grid2 { display:grid; grid-template-columns:minmax(0, 380px) minmax(0, 1fr); gap:16px; align-items:start; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }

/* forms */
label { display:block; font-size:13px; font-weight:500; color:var(--ink-2); margin-bottom:12px; }
input, select, textarea { display:block; width:100%; margin-top:6px; padding:10px 12px; background:var(--field); border:1px solid var(--line-2); border-radius:10px; outline:none; font-size:15px; }
input:focus, select:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type=month]::-webkit-calendar-picker-indicator { filter:invert(.7); }
input.code { font-size:22px; letter-spacing:.3em; text-align:center; font-variant-numeric:tabular-nums; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border:0; border-radius:10px; background:var(--accent); color:#fff; font-weight:600; cursor:pointer; text-decoration:none; }
.btn:hover { background:var(--accent-2); }
.btn.ghost { background:transparent; border:1px solid var(--line-2); color:var(--ink); } .btn.ghost:hover { background:var(--hover); }
.btn.sm { padding:7px 12px; font-size:13px; }
.btn.block { width:100%; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.link { background:none; border:0; padding:0; color:var(--accent-ink); cursor:pointer; text-decoration:none; font-weight:500; }
.link:hover { text-decoration:underline; }
.link.danger { color:var(--neg); }
.center-link { display:block; margin:14px auto 0; }
form.inline { display:inline; margin-left:12px; }
.hint { color:var(--muted); font-size:12.5px; margin:-4px 0 12px; }
.ph .hint { margin:0; }
.split { min-height:20px; margin:-4px 0 12px; font-size:13px; color:var(--ink-2); } .split b { color:var(--ink); }
.empty { color:var(--muted); margin:6px 0; }

/* tables */
.tablewrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:12px; font-weight:500; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
td { padding:10px; border-bottom:1px solid var(--line); vertical-align:top; }
tr:last-child td { border-bottom:0; }
tr.muted td { opacity:.55; }
tr.sel td { background:var(--accent-soft); }
.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.right { text-align:right; } .nowrap { white-space:nowrap; }
.sub { font-size:12px; color:var(--muted); margin-top:2px; }
.accent { color:var(--accent-ink); } .warn, .warnc { color:var(--warn-ink); } .neg { color:var(--neg); } .pos { color:var(--pos); }
.tag { display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:6px; background:var(--chip); color:var(--ink-2); }
.tag.bad { background:var(--err-bg); color:var(--neg); }
.pill { font-size:12px; font-weight:600; padding:3px 10px; border-radius:20px; background:var(--chip); color:var(--ink-2); white-space:nowrap; }
.pill.warn { background:var(--warn-soft); color:var(--warn-ink); }
.pill.okp { background:var(--ok-bg); color:var(--pos); }

/* kpis */
.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; margin-bottom:16px; }
.kpi { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px 18px; box-shadow:var(--shadow); min-width:0; }
.kpi span, .kpis.small span { display:block; font-size:12px; color:var(--muted); font-weight:500; }
.kpi b { display:block; font-size:24px; font-weight:700; letter-spacing:-.02em; margin-top:4px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.kpi.hl b { color:var(--accent); }
.kpi small { display:block; font-size:12px; color:var(--muted); margin-top:2px; }
.kpi small.up { color:var(--pos); } .kpi small.down { color:var(--neg); }
.kpis.small { grid-template-columns:repeat(3, minmax(0,1fr)); margin-bottom:12px; }
.kpis.small b { font-size:17px; font-variant-numeric:tabular-nums; }
.ytd { font-size:13px; color:var(--muted); } .ytd b { color:var(--ink); }
.chart { width:100%; margin-top:8px; } .chart svg { display:block; width:100%; }

.bars { display:flex; flex-direction:column; gap:10px; }
.barrow { display:grid; grid-template-columns:150px 1fr auto; gap:12px; align-items:center; font-size:13px; }
.barrow span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.barrow b { font-variant-numeric:tabular-nums; }
.bar { height:8px; background:var(--chip); border-radius:4px; overflow:hidden; } .bar i { display:block; height:100%; background:var(--accent); border-radius:4px; }

.feed { list-style:none; padding:0; margin:0 0 12px; display:flex; flex-direction:column; gap:12px; }
.feed li { display:flex; gap:10px; align-items:flex-start; min-width:0; } .feed li > div { min-width:0; overflow-wrap:anywhere; }
.dot { width:10px; height:10px; border-radius:50%; background:var(--muted); margin-top:5px; flex-shrink:0; }
.dot.good { background:var(--ok); } .dot.bad { background:var(--bad); }

.steps { padding-left:20px; margin:0 0 14px; color:var(--ink-2); } .steps li { margin-bottom:10px; }
.secret { font:600 17px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.06em; background:var(--field); border:1px dashed var(--line-2); border-radius:10px; padding:10px 12px; margin:8px 0 6px; color:var(--ink); word-spacing:.15em; user-select:all; }

.flash { padding:11px 14px; border-radius:10px; margin-bottom:16px; font-weight:500; border:1px solid; }
.flash.ok { background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok-ink); }
.flash.err { background:var(--err-bg); border-color:var(--err-line); color:var(--err-ink); }

/* auth */
.auth { min-height:100vh; display:grid; place-items:center; padding:64px 16px 20px; position:relative; }
.card.login { width:100%; max-width:380px; padding:28px; }
.card.login.wide { max-width:560px; }
.card.login h2 { margin-top:8px; }

/* relevés, justificatifs, chatters */
.hint.lead { margin:-8px 0 16px; font-size:13px; max-width:820px; }
.grid2.even { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
table.ledger td { padding:9px 0; } table.ledger tr.total td { border-top:2px solid var(--line-2); font-weight:700; font-size:15px; padding-top:12px; }
h2.mt { margin-top:22px; }
.btn svg, .link svg, .clip svg { width:15px; height:15px; flex-shrink:0; }
.clip { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:var(--accent-ink); text-decoration:none; background:var(--accent-soft); border-radius:6px; padding:1px 7px; margin-left:4px; vertical-align:1px; }
.clip svg { width:12px; height:12px; }
.attached { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:-4px; }
.attached .link { display:inline-flex; align-items:center; gap:5px; word-break:break-all; }
label.check { display:inline-flex; align-items:center; gap:6px; margin:0; font-weight:500; }
label.check input { width:auto; margin:0; display:inline; }
input.file { padding:8px; font-size:13px; }
input.file::file-selector-button { border:1px solid var(--line-2); background:var(--panel); color:var(--ink); border-radius:8px; padding:6px 10px; margin-right:10px; cursor:pointer; font-weight:600; }

.rowact .link + .link, .rowact .link + form.inline { margin-left:12px; }

/* contrats */
.card.narrow { max-width:820px; }
fieldset { border:1px solid var(--line); border-radius:12px; padding:12px 14px 2px; margin:0 0 14px; min-width:0; }
legend { font-size:12px; font-weight:600; color:var(--muted); padding:0 6px; text-transform:uppercase; letter-spacing:.04em; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 12px; }
label.chip { display:inline-flex; align-items:center; gap:6px; margin:0; padding:6px 10px; border:1px solid var(--line-2); border-radius:999px; background:var(--field); cursor:pointer; font-weight:500; color:var(--ink); }
label.chip input { width:auto; margin:0; accent-color:var(--accent); }
label.chip:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); }
.grid2.wide-right { grid-template-columns:minmax(0, 400px) minmax(0, 1fr); }
.back { margin:-8px 0 14px; }
dl.facts { display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 14px; margin:4px 0 16px; font-size:13px; }
dl.facts dt { color:var(--muted); } dl.facts dd { margin:0; overflow-wrap:anywhere; }
.mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; }
.actions form { margin:0; }
.btn.danger { color:var(--neg); }
.mt8 { margin-top:8px; }
.linkbox { background:var(--accent-soft); border:1px solid var(--accent); border-radius:12px; padding:12px; margin-bottom:14px; }
.linkbox .hint { margin:0 0 8px; color:var(--ink-2); }
.copyrow { display:flex; gap:8px; } .copyrow input { margin:0; font-size:13px; }
.pill.st-sent { background:var(--warn-soft); color:var(--warn-ink); }
.pill.st-expired, .pill.st-cancelled { background:var(--err-bg); color:var(--neg); }
.pill.st-signed { background:var(--accent-soft); color:var(--accent-ink); }
.pill.st-active { background:var(--ok-bg); color:var(--pos); }
.card.doc { font-size:14px; line-height:1.65; color:var(--ink-2); }
.card.doc h1.doc-title { font-size:19px; color:var(--ink); margin:0 0 12px; }
.card.doc h3 { font-size:14.5px; color:var(--ink); margin:18px 0 4px; }
.card.doc p { margin:0 0 8px; }
/* page de signature (publique) */
.auth.bare { place-items:start center; padding:24px 16px 48px; }
.signwrap { width:100%; max-width:760px; }
.signwrap .brand { padding:6px 0 18px; }
.signwrap h2.mt, .card h2.mt { margin-top:22px; }
.keypoints { margin:8px 0 0; padding-left:20px; color:var(--ink-2); } .keypoints li { margin:3px 0; }
label.check.block { display:flex; align-items:flex-start; gap:10px; margin:0 0 12px; color:var(--ink); line-height:1.4; }
label.check.block input { margin-top:2px; accent-color:var(--accent); width:18px; height:18px; flex-shrink:0; }
input.sigfield { font:italic 600 20px/1.3 "Snell Roundhand", "Brush Script MT", "Segoe Script", cursive; }
.btn.big { padding:14px 18px; font-size:16px; margin-top:6px; }
/* sélecteur de période du tableau de bord */
.seg.range a { font-size:13px; padding:6px 12px; }

/* tablettes */
@media (max-width: 1100px) {
  .grid2, .grid2.even, .grid2.wide-right { grid-template-columns:minmax(0,1fr); }
}
/* téléphones */
@media (max-width: 900px) {
  .app { grid-template-columns:minmax(0,1fr); background:none; }
  aside { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; padding:12px; gap:8px; border-right:0; border-bottom:1px solid var(--line); overflow:visible; }
  .brand { padding:0 6px 0 0; }
  nav { flex-direction:row; overflow-x:auto; flex-basis:100%; order:3; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  nav::-webkit-scrollbar { display:none; }
  nav a { white-space:nowrap; padding:8px 10px; }
  .prefs { order:2; padding:0; margin-left:auto; }
  .themebtn span { display:none; }
  .me { border-top:0; padding:0; order:4; flex-basis:100%; justify-content:flex-end; }
  .me .avatar { width:26px; height:26px; font-size:12px; }
  .me > div { display:flex; align-items:center; gap:10px; }
  main { padding:18px 16px 32px; }
  h1 { font-size:20px; }
  .ph { gap:10px; }
  .ph h1 { flex-basis:100%; }
  .monthnav span { min-width:110px; }
  .row2 { grid-template-columns:minmax(0,1fr); }
  .kpis { grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .kpi { padding:14px; } .kpi b { font-size:19px; }
  .kpis.small { grid-template-columns:minmax(0,1fr); }
  .barrow { grid-template-columns:96px 1fr auto; }
  .card { padding:16px; border-radius:14px; }
  /* tableaux -> cartes empilées */
  table.stack thead { display:none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display:block; width:100%; }
  table.stack tr { border-bottom:1px solid var(--line); padding:10px 0; display:flex; flex-wrap:wrap; column-gap:14px; row-gap:4px; }
  table.stack tr:last-child { border-bottom:0; }
  table.stack td { border:0; padding:0; text-align:left; width:auto; }
  table.stack td:first-child { flex-basis:100%; }
  table.stack td[data-l]::before { content:attr(data-l) " "; color:var(--muted); font-size:12px; font-weight:400; }
  table.stack td.num { text-align:left; }
  table.stack td.rowact { flex-basis:100%; text-align:left; padding-top:4px; }
  table.stack td.rowact:empty { display:none; }
  table.stack td.rowact form.inline:first-child { margin-left:0; }
  input, select, textarea { font-size:16px; } /* évite le zoom auto sur iPhone */
}
@media (max-width: 380px) { .kpis { grid-template-columns:minmax(0,1fr); } }

/* logo : J/S noir dans un carré blanc */
.logo { background:#fff !important; } .logo img { filter:invert(1); }

nav a.xlink { margin-top:10px; border-top:1px solid var(--line); border-radius:0 0 10px 10px; padding-top:14px; }