/* Mise en page : barre latérale des modules + espace de travail ; sur téléphone, barre d'onglets en bas.
   Pierre claire bleutée, bleu de vitrail en accent, or réservé à l'objectif et aux sceaux. */
:root {
  --bg: #f2f4f8;
  --surface: #ffffff;
  --sunk: #e8ecf3;
  --ink: #141a2b;
  --ink-2: #3f485c;
  --muted: #646d82;
  --line: #dde2ea;
  --line-strong: #c3cad7;
  --accent: #1d4a96;
  --accent-hover: #173c7c;
  --accent-ink: #ffffff;
  --accent-soft: #e3eaf7;
  --accent-2: #8ea9da;
  --gold: #9a6a0b;
  --gold-soft: #f5ecd8;
  --ok: #17734a;
  --ok-soft: #e0f1e8;
  --warn: #935700;
  --warn-soft: #f8ecd8;
  --bad: #b3261e;
  --bad-soft: #f9e4e2;
  --on-bad: #ffffff;
  --paper: #ffffff;
  --paper-ink: #141a2b;
  --paper-muted: #5f6880;
  --paper-line: #dde2ea;
  --paper-band: #1d4a96;
  --paper-tint: #ecf1fa;
  --shadow: 0 1px 2px rgba(20, 26, 43, 0.05), 0 6px 22px rgba(20, 26, 43, 0.07);
  --shadow-lg: 0 10px 40px rgba(20, 26, 43, 0.18);
  --scrim: rgba(14, 18, 32, 0.38);
  --f-display: "Young Serif", Georgia, "Times New Roman", serif;
  --f-ui: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --r: 10px;
  --r-sm: 7px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1220; --surface: #161b2b; --sunk: #1e2437; --ink: #e8ebf3; --ink-2: #c2c9d8; --muted: #8f98ad;
    --line: #283049; --line-strong: #3a4361; --accent: #8aabef; --accent-hover: #a6c0f5; --accent-ink: #0e1220;
    --accent-soft: #1c2a4a; --accent-2: #3f5f9e; --gold: #e2b551; --gold-soft: #382d16; --ok: #5fcb98; --ok-soft: #12321f;
    --warn: #eaab4e; --warn-soft: #3a2a12; --bad: #f28b82; --bad-soft: #3e1c1a; --on-bad: #1d0a09;
    --paper: #eef0f4; --paper-ink: #141a2b; --paper-muted: #545d74; --paper-line: #cfd5df; --paper-band: #1d4a96; --paper-tint: #dfe6f4;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 22px rgba(0, 0, 0, 0.28); --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5); --scrim: rgba(4, 6, 12, 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1220; --surface: #161b2b; --sunk: #1e2437; --ink: #e8ebf3; --ink-2: #c2c9d8; --muted: #8f98ad;
  --line: #283049; --line-strong: #3a4361; --accent: #8aabef; --accent-hover: #a6c0f5; --accent-ink: #0e1220;
  --accent-soft: #1c2a4a; --accent-2: #3f5f9e; --gold: #e2b551; --gold-soft: #382d16; --ok: #5fcb98; --ok-soft: #12321f;
  --warn: #eaab4e; --warn-soft: #3a2a12; --bad: #f28b82; --bad-soft: #3e1c1a; --on-bad: #1d0a09;
  --paper: #eef0f4; --paper-ink: #141a2b; --paper-muted: #545d74; --paper-line: #cfd5df; --paper-band: #1d4a96; --paper-tint: #dfe6f4;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 22px rgba(0, 0, 0, 0.28); --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5); --scrim: rgba(4, 6, 12, 0.6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--f-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--surface); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent); }
code, .mono { font-family: var(--f-mono); font-size: 0.86em; }
.mono-s { font-family: var(--f-mono); font-size: 12px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.num, .amt { font-variant-numeric: tabular-nums; }
.ok-t { color: var(--ok); }
.bad-t { color: var(--bad); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Marque ---------- */
.rosace .ro-ring { fill: none; stroke: var(--accent); stroke-width: 3; }
.rosace .ro-petal ellipse { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2.2; }
.rosace .ro-inner circle { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.rosace .ro-core { fill: var(--gold); }
.ro-paper .ro-ring, .ro-paper .ro-petal ellipse, .ro-paper .ro-inner circle { stroke: var(--paper-band); }
.ro-paper .ro-petal ellipse { fill: var(--paper-tint); }
.ro-paper .ro-inner circle { fill: var(--paper); }
.ro-paper .ro-core { fill: #9a6a0b; }
.ro-spin { animation: spin 9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-t { display: flex; flex-direction: column; min-width: 0; }
.brand-n { font-family: var(--f-display); font-size: 19px; line-height: 1.1; letter-spacing: 0.005em; }
.brand-s { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-c .brand-n { font-size: 17px; }

/* ---------- Coque ---------- */
.shell { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 22px; background: var(--surface); border-right: 1px solid var(--line);
  padding-block: 22px 16px; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: 14px; overflow-y: auto; }
.side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-i { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 11px; border: 0; background: none; border-radius: var(--r-sm); color: var(--ink-2); cursor: pointer; font-weight: 500; font-size: 14.5px; }
.nav-i:hover { background: var(--sunk); color: var(--ink); }
.nav-i.on { background: var(--accent-soft); color: var(--accent); }
.nav-i .ic { flex: none; }
.side-user { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r); background: var(--sunk); }
.su-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.su-t strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-t span { font-size: 12px; color: var(--muted); line-height: 1.3; }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: none; }
.content { padding-block: 28px 56px; padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); width: 100%; max-width: 1240px; }
.banner { display: flex; align-items: center; gap: 9px; padding-block: 9px; padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px));
  background: var(--accent-soft); color: var(--ink); font-size: 13.5px; border-bottom: 1px solid var(--line); }
.banner .ic { flex: none; color: var(--accent); }
.banner-warn { background: var(--warn-soft); }
.banner-warn .ic { color: var(--warn); }
.banner-bad { background: var(--bad-soft); }
.banner-bad .ic { color: var(--bad); }
.banner-ex { background: var(--gold-soft); }
.banner-ex .ic { color: var(--gold); }
.tabbar { display: none; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; border: 0; background: none; color: var(--muted); cursor: pointer; flex: none; }
.icon-btn:hover { background: var(--line); color: var(--ink); }

@media (max-width: 959px) {
  .shell { display: block; }
  .side { display: none; }
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
    background: var(--surface); border-bottom: 1px solid var(--line); padding-block: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .top-user { border: 0; background: none; padding: 0; cursor: pointer; }
  .content { padding-block: 20px calc(92px + env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .banner { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--surface); border-top: 1px solid var(--line);
    padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); }
  .tabbar button { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; color: var(--muted); font-size: 11px; font-weight: 500; padding: 4px 2px; border-radius: 8px; cursor: pointer; min-width: 0; }
  .tabbar button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .tabbar button.on { color: var(--accent); }
}
.sheet-wrap { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; }
.sheet { position: relative; width: 100%; background: var(--surface); border-radius: 16px 16px 0 0; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 12px;
  padding-top: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.sheet-nav { display: flex; flex-direction: column; gap: 2px; }

/* ---------- En-têtes et cartes ---------- */
.page { display: flex; flex-direction: column; gap: 18px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.page-titles { min-width: 0; flex: 1 1 320px; }
.eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.page-title { font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1.15; letter-spacing: -0.005em; }
.page-sub { color: var(--muted); margin-top: 5px; max-width: 68ch; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 0; }
.card-title { font-size: 15.5px; font-weight: 650; }
.card-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.card-body { padding: 14px 18px 18px; min-width: 0; }
.card.flush .card-body { padding: 6px 0 4px; }
.card.flush .card-head { padding-bottom: 6px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1100px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
.h3 { font-size: 13px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.stack { display: flex; flex-direction: column; }
.row-gap { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Boutons, champs ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font-weight: 550; font-size: 14px; cursor: pointer; white-space: nowrap; transition: background 0.12s, border-color 0.12s; }
.btn:hover:not(:disabled) { background: var(--sunk); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn-danger { background: var(--bad); border-color: var(--bad); color: var(--on-bad); }
.btn-ghost-danger { border-color: transparent; background: transparent; color: var(--bad); }
.btn-ghost-danger:hover:not(:disabled) { background: var(--bad-soft); }
.btn-sm { height: 32px; padding: 0 10px; font-size: 13px; }
.spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.7s linear infinite; }
.form { display: flex; flex-direction: column; gap: 14px; border: 0; padding: 0; margin: 0; min-width: 0; }
.form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .form-grid-2 { grid-template-columns: minmax(0, 1fr); } }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field > .label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field-hint { font-size: 12.5px; color: var(--muted); }
.field-err { font-size: 12.5px; color: var(--bad); font-weight: 500; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea {
  width: 100%; min-width: 0; height: 40px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
textarea { height: auto; padding: 9px 11px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.8; }
fieldset:disabled input, fieldset:disabled select { background: var(--sunk); }
.money { position: relative; }
.money input { padding-right: 58px !important; font-variant-numeric: tabular-nums; font-weight: 600; }
.money-unit { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.03em; pointer-events: none; }
.check { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.check input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.fs { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px 16px; margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fs legend { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 0 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px; padding: 6px 12px; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.subform { border: 1px dashed var(--line-strong); border-radius: var(--r-sm); padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.subform-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--sunk); border-radius: 9px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: 6px 12px; border-radius: 7px; font-size: 13.5px; font-weight: 550; color: var(--ink-2); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(20, 26, 43, 0.12); }
.seg-n { font-size: 11.5px; background: var(--line); border-radius: 999px; padding: 0 6px; color: var(--ink-2); }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.toolbar > select, .toolbar > input[type="date"] { width: auto; flex: 0 1 auto; max-width: 100%; }
.search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); flex: 1 1 260px; min-width: 0; color: var(--muted); }
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search input { border: 0 !important; box-shadow: none !important; padding: 0 !important; height: 100% !important; background: transparent !important; }
.combo { position: relative; }
.combo-list { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); list-style: none; margin: 0; padding: 4px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); box-shadow: var(--shadow); max-height: 280px; overflow-y: auto; }
.combo-list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; background: none; border-radius: 6px; cursor: pointer; text-align: left; }
.combo-list button:hover { background: var(--sunk); }
.combo-t, .up-t, .picked-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.combo-t span, .up-t span, .picked-t span { font-size: 12.5px; color: var(--muted); }
.picked { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sunk); }
.avatar { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; }
.avatar.sm { width: 28px; height: 28px; font-size: 11px; }

/* ---------- Badges, notes, montants ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--sunk); color: var(--ink-2); }
.badge-accent { background: var(--accent-soft); color: var(--accent); }
.badge-info { background: var(--accent-soft); color: var(--accent); }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-bad { background: var(--bad-soft); color: var(--bad); }
.note { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-sm); font-size: 13.5px; background: var(--accent-soft); }
.note .ic { flex: none; margin-top: 2px; color: var(--accent); }
.note-warn { background: var(--warn-soft); } .note-warn .ic { color: var(--warn); }
.note-bad { background: var(--bad-soft); } .note-bad .ic { color: var(--bad); }
.note-ok { background: var(--ok-soft); } .note-ok .ic { color: var(--ok); }
.amt { white-space: nowrap; font-weight: 600; }
.amt-u { font-size: 0.74em; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }
.amt-strong { font-weight: 700; }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 36px 20px; }
.empty-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sunk); color: var(--muted); margin-bottom: 4px; }
.empty-t { font-weight: 600; }
.empty-d { color: var(--muted); font-size: 13.5px; max-width: 46ch; margin-bottom: 8px; }
.sumline { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 13.5px; padding: 0 2px; }
.sumline .amt { color: var(--ink); }
.inline-ic { vertical-align: -2px; margin-left: 5px; color: var(--muted); }
.hash { font-family: var(--f-mono); font-size: 12px; word-break: break-all; color: var(--ink-2); }

/* ---------- Listes ---------- */
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li + li { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 200px) 150px; align-items: center; gap: 6px 16px; width: 100%; padding: 11px 18px; border: 0; background: none; text-align: left; cursor: pointer; }
button.row:hover:not(:disabled) { background: var(--sunk); }
button.row:disabled { cursor: default; }
li.row { cursor: default; }
.row > span { min-width: 0; display: flex; flex-direction: column; }
.row strong { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; }
.row .sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-meta { flex-direction: row !important; flex-wrap: wrap; gap: 4px 6px !important; align-items: center; }
.c-meta > span:not(.badge) { width: 100%; }
.c-meta > .sub { width: 100%; }
.c-amt { align-items: flex-end; text-align: right; gap: 3px; }
.c-amt.neg .amt { color: var(--bad); }
.c-amt.pos .amt { color: var(--ok); }
.c-bal { align-items: flex-end; }
.row-void { opacity: 0.62; }
.row-void .c-amt .amt { text-decoration: line-through; }
.row-rel { grid-template-columns: 96px minmax(0, 1fr) 150px 150px; }
.row-dn, .row-user { grid-template-columns: 34px minmax(0, 1fr) minmax(0, 200px) 150px; }
.row-todo { grid-template-columns: 120px minmax(0, 1fr) 150px 170px; }
.c-go { flex-direction: row !important; align-items: center; justify-content: flex-end; gap: 4px; color: var(--accent); font-weight: 600; font-size: 13.5px; }
.row-log { grid-template-columns: 150px minmax(0, 1fr) 170px 110px; }
.row-flag { box-shadow: inset 3px 0 0 var(--warn); }
.c-hash { align-items: flex-end; }
@media (max-width: 760px) {
  .row, .row-rel, .row-dn, .row-user, .row-todo, .row-log { grid-template-columns: minmax(0, 1fr) auto; padding: 11px 16px; }
  .row .c-num { grid-column: 1; grid-row: 2; flex-direction: row; gap: 8px; }
  .row .c-main { grid-column: 1; grid-row: 1; }
  .row .c-meta { grid-column: 1 / -1; grid-row: 3; }
  .row .c-meta:empty { display: none; }
  .row .c-meta > span:not(.badge), .row .c-meta > .sub { width: auto; }
  .row .c-amt { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .row .c-bal, .row .c-go, .row .c-hash { grid-column: 2; grid-row: 3; }
  .row-dn .avatar, .row-user .avatar, .row-user .account-ic { display: none; }
  .row-dn .c-meta, .row-user .c-meta { grid-row: 2; grid-column: 1; }
}
.mini-rows { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.mini-rows li { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.mini-rows li.void { opacity: 0.55; text-decoration: line-through; }

/* ---------- Tableau de bord ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.hero-main { padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.hero-k { font-size: 12px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hero-v .amt { font-family: var(--f-display); font-weight: 400; font-size: clamp(32px, 5vw, 46px); line-height: 1.05; letter-spacing: -0.01em; }
.hero-v .amt-u { font-family: var(--f-ui); font-size: 15px; margin-left: 4px; }
.hero-goal { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.hero-goal-l { display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.hero-goal-l strong { color: var(--gold); font-weight: 700; }
.meter { position: relative; height: 12px; border-radius: 999px; background: var(--sunk); overflow: hidden; }
.meter-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent)); }
.meter-tick { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--surface); opacity: 0.85; }
.hero-facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-left: 1px solid var(--line); background: var(--sunk); }
.hero-facts > div { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.hero-facts > div:nth-child(odd) { border-right: 1px solid var(--line); }
.hero-facts > div:nth-last-child(-n + 2) { border-bottom: 0; }
.hero-facts dt { font-size: 12px; color: var(--muted); }
.hero-facts dd { margin: 2px 0 0; font-size: 20px; font-weight: 650; }
@media (max-width: 860px) { .hero { grid-template-columns: minmax(0, 1fr); } .hero-facts { border-left: 0; border-top: 1px solid var(--line); } .hero-main { padding: 18px; } }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); text-align: left; min-width: 0; }
.tile-link { cursor: pointer; }
.tile-link:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.tile-k { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); font-weight: 550; }
.tile-v .amt { font-size: 21px; font-weight: 700; }
.tile-f { font-size: 12.5px; }
.tile-f .sub { color: var(--muted); }
.chart { position: relative; width: 100%; }
.chart svg { display: block; overflow: visible; }
.ch-grid { stroke: var(--line); stroke-width: 1; }
.ch-base { stroke: var(--line-strong); stroke-width: 1; }
.ch-tick { fill: var(--muted); font-size: 11px; font-family: var(--f-ui); }
.ch-bar { fill: var(--accent); transition: opacity 0.12s; }
.chart svg:hover .ch-bar:not(.on) { opacity: 0.55; }
.ch-tip { position: absolute; width: 150px; pointer-events: none; background: var(--ink); color: var(--bg); border-radius: 8px; padding: 8px 10px; box-shadow: var(--shadow-lg); font-size: 12.5px; }
.ch-tip-t { opacity: 0.75; text-transform: capitalize; }
.ch-tip-v { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.ch-tip-s { opacity: 0.75; }
.hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hbar { display: flex; flex-direction: column; gap: 5px; border-radius: 4px; }
.hbar-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.hbar-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-v { font-weight: 650; white-space: nowrap; }
.hbar-p { color: var(--muted); font-weight: 500; margin-left: 8px; }
.hbar-track { height: 10px; border-radius: 0 4px 4px 0; background: var(--sunk); overflow: hidden; }
.hbar-fill { height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; min-width: 3px; }
.hbar:hover .hbar-fill, .hbar:focus .hbar-fill { background: var(--accent-hover); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 12px; height: 10px; border-radius: 2px; display: inline-block; }
.sw-paye { background: var(--accent); }
.sw-engage { background: var(--accent-2); }
.sw-track { background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line-strong); }
.budget { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.budget-row { display: flex; flex-direction: column; gap: 5px; }
.budget-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.budget-l { font-weight: 550; }
.budget-p { font-weight: 650; }
.budget-p.bad { color: var(--bad); }
.budget-track { position: relative; display: flex; gap: 2px; height: 12px; background: var(--sunk); border-radius: 0 4px 4px 0; }
.budget-paye { background: var(--accent); height: 100%; }
.budget-eng { background: var(--accent-2); height: 100%; border-radius: 0 4px 4px 0; }
.budget-paye:last-child { border-radius: 0 4px 4px 0; }
.budget-limit { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--bad); }
.budget-nums { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }

/* ---------- Tiroirs ---------- */
.drawer-wrap { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; }
.drawer-scrim { position: absolute; inset: 0; background: var(--scrim); animation: fade 0.15s ease-out; }
.drawer { position: relative; display: flex; flex-direction: column; width: min(560px, 100%); height: 100%; background: var(--surface); box-shadow: var(--shadow-lg); animation: slide 0.18s ease-out;
  padding-top: env(safe-area-inset-top, 0px); padding-right: env(safe-area-inset-right, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.drawer-wide { width: min(700px, 100%); }
@keyframes slide { from { transform: translateX(24px); opacity: 0.6; } }
@keyframes fade { from { opacity: 0; } }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 18px; font-weight: 650; line-height: 1.3; }
.drawer-head p { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.drawer-body > * { flex-shrink: 0; }
.drawer-foot { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface); }
@media (max-width: 600px) { .drawer-head, .drawer-body, .drawer-foot { padding-left: 16px; padding-right: 16px; } .drawer-foot .btn { flex: 1 1 auto; } }
.kv-list { margin: 0; display: flex; flex-direction: column; }
.kv { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.danger-zone { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.danger-zone > .confirm { align-self: stretch; }
.confirm { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--r-sm); background: var(--sunk); }
.detail-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.actions-block, .payform { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--sunk); }
.payform .h3 { margin-top: 0; }

/* ---------- Pièces jointes ---------- */
.pieces { display: flex; flex-direction: column; gap: 10px; }
.filepick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); }
.filepick.drag { border-color: var(--accent); background: var(--accent-soft); }
.filepick-h { font-size: 12.5px; color: var(--muted); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.thumb { position: relative; margin: 0; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--sunk); }
.thumb img, .thumb-file { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; max-width: 100%; }
.thumb-file { display: grid; place-items: center; align-content: center; gap: 4px; color: var(--muted); font-size: 12px; font-weight: 600; }
.thumb figcaption { font-size: 11.5px; padding: 5px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--surface); border-top: 1px solid var(--line); }
.thumb-x { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); cursor: pointer; }

/* ---------- Reçu (papier) ---------- */
.paper { position: relative; background: var(--paper); color: var(--paper-ink); border: 1px solid var(--paper-line); border-radius: 6px; padding: 22px 24px 18px; overflow: hidden; box-shadow: var(--shadow); }
.paper-band { position: absolute; inset: 0 0 auto; height: 4px; background: var(--paper-band); }
.paper-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--paper-line); }
.paper-ent { font-weight: 700; font-size: 14px; letter-spacing: 0.04em; }
.paper-proj { font-size: 12.5px; color: var(--paper-muted); }
.paper-titleline { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 14px 0 10px; }
.paper-titleline h3 { font-family: var(--f-display); font-weight: 400; font-size: 22px; }
.paper-num { font-family: var(--f-mono); font-weight: 500; font-size: 15px; letter-spacing: 0.02em; }
.paper-rows { margin: 0; display: flex; flex-direction: column; }
.paper-rows > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; padding: 4px 0; font-size: 13.5px; }
.paper-rows dt { color: var(--paper-muted); }
.paper-rows dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.paper-amount { margin: 14px 0; padding: 12px 14px; background: var(--paper-tint); border-radius: 6px; }
.paper-k { font-size: 11px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--paper-muted); }
.paper-v { font-size: 26px; font-weight: 700; color: var(--paper-band); font-variant-numeric: tabular-nums; }
.paper-v span { font-size: 14px; }
.paper-words { font-style: italic; font-size: 13px; }
.paper-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--paper-line); }
.paper-qr { display: flex; gap: 12px; align-items: center; }
.paper-hash { font-family: var(--f-mono); font-size: 12px; margin-top: 4px; color: var(--paper-ink); }
.paper-sign { width: 170px; }
.paper-line { height: 36px; border-bottom: 1px solid var(--paper-muted); }
.paper-small { font-size: 11.5px; color: var(--paper-muted); margin-top: 3px; }
.paper-ex { display: inline-block; margin-top: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8a5d06; background: #f5ecd8; padding: 2px 7px; border-radius: 4px; }
.paper-stamp { position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg); font-size: 54px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #b3261e; border: 5px solid #b3261e; padding: 0 18px; border-radius: 10px; opacity: 0.32; pointer-events: none; }
.qr { display: block; border-radius: 4px; flex: none; }
.qr-bg { fill: #ffffff; }
.qr-fg { fill: #000000; }
.qr-wait { background: var(--paper-tint); }
.qr-off { display: grid; place-items: center; background: var(--paper-tint); color: var(--paper-muted); }
@media (max-width: 480px) { .paper { padding: 18px 16px 14px; } .paper-rows > div { grid-template-columns: 108px minmax(0, 1fr); } .paper-sign { width: 100%; } }

/* ---------- Trésorerie ---------- */
.accounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.account { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; min-width: 0; }
.account:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.account.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.account-top { display: flex; align-items: center; gap: 8px; }
.account-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.account-type { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.account-name { font-weight: 650; margin-top: 4px; }
.account-detail { font-size: 12.5px; color: var(--muted); }
.account-bal .amt { font-size: 22px; }
.account-flow { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.account-add { align-items: center; justify-content: center; text-align: center; color: var(--accent); border-style: dashed; font-weight: 600; font-size: 13.5px; gap: 8px; }
.billetage { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.bil-h, .bil-r { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 5px 12px; }
.bil-h { background: var(--sunk); font-size: 12px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; padding-block: 8px; }
.bil-r + .bil-r { border-top: 1px solid var(--line); }
.bil-r label { display: flex; gap: 8px; align-items: baseline; }
.bil-v { font-weight: 650; font-variant-numeric: tabular-nums; }
.bil-r .sub { font-size: 12px; color: var(--muted); }
.bil-r input { height: 34px !important; text-align: right; font-variant-numeric: tabular-nums; }
.bil-r .num { text-align: right; font-weight: 600; }
.arrete-sum { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.arrete-sum > div { padding: 10px 12px; border-radius: var(--r-sm); background: var(--sunk); min-width: 0; }
.arrete-sum dt { font-size: 12px; color: var(--muted); }
.arrete-sum dd { margin: 2px 0 0; }
.arrete-sum .ok { background: var(--ok-soft); } .arrete-sum .ok .amt { color: var(--ok); }
.arrete-sum .bad { background: var(--bad-soft); } .arrete-sum .bad .amt { color: var(--bad); }
@media (max-width: 480px) { .arrete-sum { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Dépenses ---------- */
.pipeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pipe { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; text-align: left; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); cursor: pointer; min-width: 0; }
.pipe.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.pipe-l { font-size: 13px; color: var(--muted); font-weight: 550; }
.pipe-n { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.pipe-v { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stepper li { position: relative; display: flex; gap: 8px; align-items: flex-start; padding-top: 4px; min-width: 0; }
.st-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; background: var(--sunk); color: var(--muted); border: 1px solid var(--line-strong); }
.stepper li.done .st-dot { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.stepper li.cur .st-dot { box-shadow: 0 0 0 3px var(--accent-soft); }
.st-t { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; }
.st-t strong { font-size: 13.5px; }
.st-t span { color: var(--muted); }
.st-t em { color: var(--ink-2); }
@media (max-width: 600px) { .stepper { grid-template-columns: minmax(0, 1fr); } }
.funds { padding: 14px; border-radius: var(--r); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.funds .h3 { margin: 0; }
.funds dl { margin: 0; display: flex; flex-direction: column; }
.funds dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13.5px; border-bottom: 1px dashed var(--line); }
.funds dt { color: var(--muted); }
.funds dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.funds .tot dd { font-size: 15px; }
.funds.ok .tot dd { color: var(--ok); }
.funds.bad .tot dd { color: var(--bad); }

/* ---------- Rapports ---------- */
.report { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 26px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.report-head h2 { font-family: var(--f-display); font-weight: 400; font-size: 26px; }
.report-head p { color: var(--muted); margin-top: 4px; }
.report-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0 4px; }
.report-kpis > div { padding: 12px 14px; border-radius: var(--r-sm); background: var(--sunk); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.report-kpis dt { font-size: 12.5px; color: var(--muted); }
.report-kpis dd { margin: 0; }
.report-kpis dd .amt { font-size: 18px; }
.report-kpis span { font-size: 12px; color: var(--muted); }
@media (max-width: 900px) { .report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .report-kpis { grid-template-columns: minmax(0, 1fr); } .report { padding: 18px 16px; } }
.report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 760px) { .report-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.report-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th, .tbl td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl thead th { font-size: 12px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.tbl tbody th { font-weight: 550; }
.tbl .num { text-align: right; white-space: nowrap; }
.tbl .c { text-align: center; }
.matrix tbody th { font-weight: 450; }
.matrix .dash { color: var(--line-strong); }
.card.flush .tbl th:first-child, .card.flush .tbl td:first-child { padding-left: 18px; }

/* ---------- Audit ---------- */
.integrity { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .integrity { grid-template-columns: minmax(0, 1fr); } }
.integ { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); }
.integ div { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.integ.ok { background: var(--ok-soft); } .integ.ok .ic { color: var(--ok); }
.integ.bad { background: var(--bad-soft); } .integ.bad .ic { color: var(--bad); }

/* ---------- Utilisateurs, paramètres ---------- */
.role-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 520px) { .role-pick { grid-template-columns: minmax(0, 1fr); } }
.role-opt { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer; font-size: 13.5px; }
.role-opt input { position: absolute; opacity: 0; pointer-events: none; }
.role-opt span { font-size: 12px; color: var(--muted); }
.role-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.role-opt:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.poste-list { display: flex; flex-direction: column; gap: 8px; }
.poste-row { display: grid; grid-template-columns: minmax(0, 1fr) 220px auto; gap: 10px; align-items: center; }
.poste-row label { font-weight: 550; }
@media (max-width: 600px) { .poste-row { grid-template-columns: minmax(0, 1fr) auto; } .poste-row > :first-child { grid-column: 1 / -1; } }
.poste-new { padding-top: 10px; border-top: 1px dashed var(--line); }

/* ---------- Connexion, vérification ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding-block: 32px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: radial-gradient(1200px 500px at 50% -10%, var(--accent-soft), transparent 70%), var(--bg); }
.auth-card { width: min(520px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 480px) { .auth-card { padding: 22px 18px; } }
.auth-title { font-family: var(--f-display); font-weight: 400; font-size: 28px; margin-top: 10px; }
.user-pick { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.user-pick button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); cursor: pointer; text-align: left; color: var(--ink); }
.user-pick button:hover { border-color: var(--accent); background: var(--accent-soft); }
.user-pick .ic { color: var(--muted); }
.demo-hint { display: flex; gap: 7px; align-items: center; font-size: 13px; color: var(--gold); background: var(--gold-soft); border-radius: var(--r-sm); padding: 8px 10px; }
.auth-link { font-size: 13.5px; font-weight: 550; align-self: flex-start; }
.verdict { display: flex; gap: 10px; padding: 14px; border-radius: var(--r); background: var(--sunk); }
.verdict div { display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.verdict strong { font-size: 16px; }
.v-ok { background: var(--ok-soft); } .v-ok .ic { color: var(--ok); }
.v-annule, .v-falsifie, .v-inconnu { background: var(--bad-soft); } .v-annule .ic, .v-falsifie .ic, .v-inconnu .ic { color: var(--bad); }
.v-indispo { background: var(--warn-soft); } .v-indispo .ic { color: var(--warn); }
.splash { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 16px; color: var(--muted); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); text-align: center; }

/* ---------- Notifications ---------- */
.toasts { position: fixed; z-index: 80; right: max(20px, env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast { display: flex; gap: 9px; align-items: flex-start; padding: 11px 14px; border-radius: var(--r-sm); background: var(--ink); color: var(--bg); box-shadow: var(--shadow-lg); font-size: 14px; animation: fade 0.15s ease-out; }
.toast-ok .ic { color: var(--ok-soft); }
.toast-bad { background: var(--bad); color: var(--on-bad); }
@media (max-width: 959px) { .toasts { left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); max-width: none; } }

/* ---------- Phase 2 : promesses, rapprochement, stock ---------- */
.back-row { margin-bottom: -8px; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.linkbtn:hover { color: var(--accent-hover); }
.sel { user-select: all; }
.mini-meter { display: block; width: 100%; max-width: 180px; height: 6px; border-radius: 999px; background: var(--sunk); overflow: hidden; }
.mini-meter i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.mini-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.mini-kpi > div { display: flex; flex-direction: column; gap: 2px; }
.mini-kpi span { font-size: 12.5px; color: var(--muted); }
.mini-kpi strong { font-size: 19px; font-weight: 700; }
.card-body > .meter + p { margin-top: 10px; }
.stock-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.stock-mini li { display: grid; grid-template-columns: minmax(0, 1fr) auto 72px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.stock-mini li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-mini .badge { justify-self: end; }
.qte { font-weight: 650; white-space: nowrap; }
.qte.low { color: var(--warn); }
.c-amt .qte { font-size: 14px; }
.c-amt.neg .qte { color: var(--bad); }
.c-amt.pos .qte { color: var(--ok); }
.prom-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.prom-sum > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--sunk); min-width: 0; }
.prom-sum span { font-size: 12px; color: var(--muted); }
.prom-sum strong { font-size: 16px; }
@media (max-width: 480px) { .prom-sum, .mini-kpi { grid-template-columns: minmax(0, 1fr); } }
.ech-prev { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
.rel-rows li { grid-template-columns: 1.4fr 1fr 1.2fr auto; }
.tbl-sub { display: inline-block; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-right: 4px; }
.map-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .rap-grid { grid-template-columns: minmax(0, 1fr); } }
.rap-line { display: flex; flex-direction: column; gap: 4px; padding: 10px 18px; }
.rap-line.todo { box-shadow: inset 3px 0 0 var(--warn); }
.rap-line.susp { box-shadow: inset 3px 0 0 var(--line-strong); }
.rap-line.sel { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.rap-line.cand { background: var(--accent-soft); }
.rap-line.dim { opacity: 0.45; }
.rap-top { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; font-size: 13.5px; }
.rap-d { color: var(--muted); font-variant-numeric: tabular-nums; }
.rap-l { min-width: 0; overflow-wrap: anywhere; }
.rap-a { font-weight: 650; white-space: nowrap; }
.rap-st { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-left: 94px; font-size: 12.5px; color: var(--ink-2); }
@media (max-width: 560px) { .rap-top { grid-template-columns: minmax(0, 1fr) auto; } .rap-d { grid-column: 1 / -1; } .rap-st { padding-left: 0; } .rap-line { padding: 10px 16px; } }
.etat-rap th { font-weight: 500; }
.etat-rap tr.tot th, .etat-rap tr.tot td { font-weight: 700; border-top: 1px solid var(--line-strong); }
.etat-rap tr.ok td { color: var(--ok); }
.etat-rap tr.bad td { color: var(--bad); }
.inv { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.inv-h, .inv-r { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 80px; gap: 10px; align-items: center; padding: 6px 12px; }
.inv-h { background: var(--sunk); font-size: 12px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; padding-block: 8px; }
.inv-r + .inv-r { border-top: 1px solid var(--line); }
.inv-r label { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; }
.inv-r label strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-r .sub { font-size: 12px; color: var(--muted); }
.inv-r .num { text-align: right; font-size: 13.5px; }
.inv-r input { height: 34px !important; text-align: right; }
@media (max-width: 560px) { .inv-h { display: none; } .inv-r { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .inv-r label { grid-column: 1 / -1; } }
a.btn { text-decoration: none; }
.rap-st:not(.rap-act) { flex-wrap: nowrap; }
.rap-st > span { min-width: 0; }
.rap-st .linkbtn, .rap-st .ic { flex: none; }
@media (max-width: 420px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tile { padding: 11px 12px; }
  .tile-k { font-size: 12px; }
  .tile-v .amt { font-size: 16px; }
  .tile-v .amt-u { font-size: 0.68em; }
}

/* ---------- Phase 3 : don en ligne, sacrements, comptabilité ---------- */
.give { min-height: 100vh; max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; padding-block: 28px 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.give-head { display: flex; gap: 14px; align-items: center; }
.give-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(24px, 5vw, 32px); line-height: 1.15; }
.give-goal { display: flex; flex-direction: column; gap: 8px; }
.give-goal-l { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13.5px; color: var(--muted); }
.give-goal-l strong { color: var(--ink); font-size: 16px; }
.give-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 22px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 480px) { .give-card { padding: 18px 16px; } }
.pay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pay-opt { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; font-weight: 550; font-size: 14px; text-align: left; color: var(--ink); }
.pay-opt .ic { color: var(--muted); }
.pay-opt.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.pay-opt.on .ic { color: var(--accent); }
.give-wait, .give-ok { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.give-wait h2, .give-ok h2 { font-size: 20px; font-weight: 650; }
.give-wait p, .give-ok p { color: var(--ink-2); max-width: 48ch; }
.spin.big { width: 34px; height: 34px; border-width: 3px; color: var(--accent); }
.demo-box { align-self: stretch; display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 14px; border: 1px dashed var(--gold); border-radius: var(--r); background: var(--gold-soft); font-size: 13.5px; }
.demo-box strong { color: var(--gold); text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }
.give-ok-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); }
.give-ko .give-ok-ic { background: var(--bad-soft); color: var(--bad); }
.give-recu { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: var(--r); background: var(--paper); color: var(--paper-ink); border: 1px solid var(--paper-line); text-align: left; }
.give-recu .paper-num { font-size: 16px; }
.give-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; font-size: 13px; color: var(--muted); }
.give-foot span { display: inline-flex; gap: 6px; align-items: center; }
.tx-pick { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); max-height: 300px; overflow-y: auto; }
.tx-pick li + li { border-top: 1px solid var(--line); }
.tx-pick .check { padding: 9px 12px; align-items: center; }
.tx-l { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 13.5px; }
.tx-pick .num { font-weight: 600; white-space: nowrap; }
.acte { position: relative; background: var(--paper); color: var(--paper-ink); border: 1px solid var(--paper-line); border-left: 4px solid var(--paper-band); border-radius: 6px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.acte header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.acte header .eyebrow { color: #8a5d06; margin: 0; }
.acte header .mono { font-size: 15px; font-weight: 500; }
.acte .paper-rows dt { color: var(--paper-muted); }
.acte-foot { display: flex; gap: 12px; align-items: center; padding-top: 10px; border-top: 1px solid var(--paper-line); }
.acte-foot .muted { color: var(--paper-muted); }
.mentions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mentions li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-left: 3px solid var(--gold); background: var(--sunk); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 13.5px; }
.sys-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.sys-strip > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; min-width: 0; }
.sys-strip > div + div { border-left: 1px solid var(--line); }
.sys-strip span { font-size: 12.5px; color: var(--muted); }
.sys-strip strong { font-size: 15.5px; }
.sys-strip .amt { font-size: 15.5px; }
@media (max-width: 900px) { .sys-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sys-strip > div:nth-child(3) { border-left: 0; } .sys-strip > div:nth-child(n + 3) { border-top: 1px solid var(--line); } }
.jr { list-style: none; margin: 0; padding: 0; }
.jr-e { padding: 12px 18px; display: flex; flex-direction: column; gap: 6px; }
.jr-e + .jr-e { border-top: 1px solid var(--line); }
.jr-e.man { box-shadow: inset 3px 0 0 var(--accent); }
.jr-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 13.5px; }
.jr-h .mono { font-size: 12.5px; color: var(--muted); }
.jr-h strong { font-weight: 600; flex: 1 1 200px; min-width: 0; }
.jr-t td { padding: 4px 8px; font-size: 13px; border-bottom: 0; }
.jr-t td:first-child { width: 80px; color: var(--muted); }
.jr-t td.num { width: 120px; }
.jr-a { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.more { display: flex; justify-content: center; padding: 10px; border-top: 1px solid var(--line); }
.tbl tr.cls th { background: var(--sunk); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); font-weight: 650; }
.tbl tr.tot th, .tbl tr.tot td { font-weight: 700; border-top: 1px solid var(--line-strong); }
.bal td.num, .bal th.num { min-width: 110px; }
.res-banner { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px; border-radius: var(--r); }
.res-banner.ok { background: var(--ok-soft); } .res-banner.ok strong .amt { color: var(--ok); }
.res-banner.bad { background: var(--bad-soft); } .res-banner.bad strong .amt { color: var(--bad); }
.res-banner strong .amt { font-size: 20px; }
.card-pad { padding: 10px 18px; }
.in-sm { height: 34px !important; max-width: 140px; }
.plan-wrap { max-height: 380px; overflow-y: auto; border-top: 1px solid var(--line); }
.stack.gap { gap: 18px; }
.od-lines { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.od-h, .od-r { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 34px; gap: 8px; align-items: start; padding: 8px 10px; }
.od-h { background: var(--sunk); font-size: 12px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.od-r + .od-r { border-top: 1px solid var(--line); }
.od-c { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.od-c .sub { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-r input { height: 36px !important; }
.od-t { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 10px; border-top: 1px solid var(--line); background: var(--sunk); font-size: 13.5px; }
@media (max-width: 640px) { .od-h { display: none; } .od-r { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; } .od-c { grid-column: 1 / -1; } .od-r > input[aria-label^="Libellé"] { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .tbl.bal .mv { display: none; }
  .tbl.bal thead th { white-space: normal; }
  .tbl.bal td:nth-child(2) { min-width: 0; }
}
@media (max-width: 640px) { .tbl .xs-h { display: none; } }
.tbl .xs-cell, .xs-line, .xs-line-i { display: none; }
@media (max-width: 640px) {
  .tbl .xs-cell { display: table-cell; }
  .xs-line { display: block; font-size: 12px; color: var(--muted); }
  .xs-line-i { display: inline; font-weight: 700; }
}
/* ---------- Phase 4 : états financiers ---------- */
.tbl.ef td:first-child, .tbl.ef th:first-child { width: 46px; }
.tbl.ef tr.ef-sub td:nth-child(2) { padding-left: 26px; color: var(--ink-2); }
.tbl.ef tr.ef-head td { font-weight: 650; }
.tbl.ef tr.ef-tot td { font-weight: 700; background: var(--accent-soft); }
.tbl.ef tr.ef-grand td { font-weight: 750; background: var(--accent); color: var(--accent-ink); }
.tbl.ef tr.ef-grand td .sub, .tbl.ef tr.ef-grand td.muted { color: inherit; }
.tbl.ef tr.ef-click { cursor: pointer; }
.tbl.ef tr.ef-click:hover td { background: var(--sunk); }
.tbl.ef tr.ef-tot.ef-click:hover td { background: var(--accent-soft); }
.tbl.ef tr.ef-det td { font-size: 12.5px; color: var(--muted); background: var(--surface); border-bottom-style: dashed; }
.tbl.ef tr.ef-det td:nth-child(2) { padding-left: 26px; }
.tbl.ef tr.ef-ctl td { font-size: 12.5px; color: var(--muted); font-style: italic; }
.ef-chev { margin-left: 6px; vertical-align: -2px; color: var(--muted); transform: rotate(90deg); transition: transform .15s; }
.ef-chev.open { transform: rotate(-90deg); }
.ef-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r); flex-wrap: wrap; }
.ef-banner.ok { background: var(--ok-soft); color: var(--ok); }
.ef-banner.warn { background: var(--warn-soft); color: var(--warn); }
.ef-banner > div:nth-child(2) { display: flex; flex-direction: column; flex: 1 1 260px; min-width: 0; }
.ef-banner strong { color: var(--ink); }
.ef-banner span { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.ef-ctls { display: flex; gap: 6px; flex-wrap: wrap; }
.checklist { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; }
.checklist li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.checklist li > .ic { margin-top: 2px; }
.checklist li.ok > .ic { color: var(--ok); } .checklist li.bad > .ic { color: var(--bad); } .checklist li.warn > .ic { color: var(--warn); }
.checklist li > span { display: flex; flex-direction: column; }
.checklist .sub { font-size: 13px; color: var(--muted); }
.notes-form { margin-top: 14px; }
.notes-form textarea { width: 100%; }
.tbl.corr th { width: 200px; font-weight: 650; color: var(--ink-2); font-size: 13px; }
.tbl.corr td { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 640px) {
  .tbl.corr th { width: auto; display: block; border-bottom: 0; padding-bottom: 0; }
  .tbl.corr td { display: block; }
  .tbl.ef td:first-child, .tbl.ef th:first-child { width: 34px; padding-right: 4px; }
}
/* ---------- V2 ---------- */
.side-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.side-top .brand { min-width: 0; }
.bell { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 0; background: none; color: var(--ink-2); cursor: pointer; flex: none; }
.bell:hover { background: var(--sunk); color: var(--ink); }
.bell-n { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: var(--on-bad); font-size: 11px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.topbar .bell { margin-left: auto; }
.notif-wrap { align-items: stretch; justify-content: flex-end; }
.notif { position: relative; width: min(420px, 100%); height: 100%; background: var(--surface); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; }
.notif header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 18px 18px 12px; border-bottom: 1px solid var(--line); padding-top: max(18px, env(safe-area-inset-top, 0px)); }
.notif header strong { font-size: 17px; }
.notif header .sub { grid-row: 2; font-size: 13px; color: var(--muted); }
.notif header .icon-btn { grid-column: 2; grid-row: 1 / span 2; }
.notif ul { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; flex: 1; }
.notif li button { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; padding: 11px 18px; border: 0; background: none; cursor: pointer; border-bottom: 1px solid var(--line); color: var(--ink); }
.notif li button:hover { background: var(--sunk); }
.notif-l { align-self: flex-start; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); }
.notif li strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.notif li .sub { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.notif-empty { padding: 18px; }
@media (max-width: 959px) { .notif { width: 100%; } }

.give-lien { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 10px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); font-size: 13px; font-weight: 600; }
.give-env { display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.liens { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.lien.off { opacity: 0.6; }
.lien-b { display: flex; gap: 16px; align-items: flex-start; }
.lien-b svg.qr { flex: none; background: #fff; padding: 4px; border-radius: 6px; }
.lien-t { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lien-t strong { font-size: 15px; }
.lien-t .mono-s { overflow-wrap: anywhere; font-size: 11.5px; color: var(--muted); }
.lien-t .sub { font-size: 13px; color: var(--muted); }
.msg-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bulle { padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: var(--sunk); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; margin-bottom: 14px; }
.bulle-whatsapp { background: #dcf8c6; color: #111b21; }
.bulle-email { border-radius: 8px; border: 1px solid var(--line); background: var(--surface); }
.ech-lines { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px; }
.ech-r { display: grid; grid-template-columns: 170px minmax(0, 1fr) 90px 34px; gap: 8px; align-items: center; }
.ech-pct { display: flex; align-items: center; gap: 4px; }
.ech-pct input { width: 100%; text-align: right; }
.ech-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@media (max-width: 600px) { .ech-r { grid-template-columns: minmax(0, 1fr) 80px 34px; } .ech-r select { grid-column: 1 / -1; } }
.decompte { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.decompte > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.decompte > div:last-child { border-bottom: 0; }
.decompte span { color: var(--muted); }
.decompte .tot { background: var(--accent-soft); }
.decompte .tot span, .decompte .tot strong { color: var(--ink); font-weight: 700; }
.ma-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.ma-kpi > div { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: var(--r-sm); background: var(--sunk); min-width: 0; }
.ma-kpi span { font-size: 12px; color: var(--muted); }
.ma-kpi em { font-style: normal; font-size: 12px; color: var(--muted); }
.ma-kpi .amt { font-size: 16px; font-weight: 700; }
@media (max-width: 720px) { .ma-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ma-bar { display: flex; height: 5px; border-radius: 3px; background: var(--sunk); overflow: hidden; margin-top: 6px; max-width: 360px; }
.ma-bar i { background: var(--accent); }
.ma-bar b { background: var(--accent-2); }
.ma-rec { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 10px; }
.row-pr { grid-template-columns: minmax(0, 1fr) minmax(0, 200px) 120px; }
.row-bs .c-amt, .row-pr .c-amt { justify-self: end; }
.timeline { list-style: none; margin: 10px 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.timeline li { display: flex; flex-direction: column; gap: 1px; position: relative; }
.timeline li::before { content: ''; position: absolute; left: -19px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.timeline .sub { font-size: 12.5px; color: var(--muted); }
.tbl.ecarts td:first-child { min-width: 180px; }
.tbl.ecarts .sub { display: block; font-size: 12px; color: var(--muted); }
@media (max-width: 640px) { .tbl.ecarts td:first-child { min-width: 0; } }
/* Espace donateur */
.esp-live { align-items: stretch; }
.esp-k { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold); }
.esp-big .amt { font-family: var(--f-display); font-size: 34px; font-weight: 400; }
.esp-lots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.esp-lot-t { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 5px; }
.esp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.esp-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.esp-list li:last-child { border-bottom: 0; }
.esp-list li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 200px; }
.esp-list .sub { font-size: 12.5px; color: var(--muted); }
.esp-list .num { font-weight: 600; white-space: nowrap; }
.esp-list .meter { flex-basis: 100%; }
.esp-login { display: flex; flex-direction: column; gap: 12px; }
.esp-hello { display: flex; align-items: center; gap: 12px; }
.esp-hello > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.esp-att { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.esp-perso { display: flex; flex-direction: column; gap: 10px; }
.give-card .h3 { display: flex; align-items: center; gap: 8px; margin: 0; }

.nav-todo { margin-bottom: 8px; border: 1px solid var(--line); }
.nav-todo:hover { border-color: var(--line-strong); }
.nav-n { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--bad); color: var(--on-bad); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.nav-todo.bell { position: static; width: 100%; height: auto; display: flex; place-items: initial; }

/* ---------- V3 ---------- */
.side { gap: 16px; }
.side-nav { gap: 1px; }
.side-nav .nav-i { padding: 7px 11px; font-size: 14px; }
.nav-sec { display: block; padding: 12px 11px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.sheet-nav .nav-sec { padding-top: 10px; }
.banner-ok { background: var(--ok-soft); }
.banner-ok .ic { color: var(--ok); }
.banner .btn { margin-left: auto; }
/* Cartes d'équipements, de groupes */
.eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.eq-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; min-width: 0; font: inherit; color: inherit; }
.eq-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.eq-card.off { opacity: 0.65; }
.eq-card strong { font-size: 15px; font-weight: 650; }
.eq-card .sub, .es-card .sub { font-size: 12.5px; color: var(--muted); }
.eq-cat { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold); }
.eq-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.bad-t { color: var(--bad); }
.row-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 190px) auto; }
.row-an { grid-template-columns: 110px minmax(0, 1fr) 120px 140px; }
.row-an .c-main .sub { white-space: normal; }
@media (max-width: 760px) { .row-3, .row-an { grid-template-columns: minmax(0, 1fr) auto; } .row-3 .c-meta { grid-row: 2; grid-column: 1; } }
/* Agenda des salles : une ligne par jour */
.agenda { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.ag-day { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 16px; border-bottom: 1px solid var(--line); min-width: 0; }
.ag-day:last-child { border-bottom: 0; }
.ag-day.today { box-shadow: inset 3px 0 0 var(--accent); background: var(--accent-soft); }
.ag-day.past { opacity: 0.7; }
.ag-h { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.ag-h > div { display: flex; flex-direction: column; line-height: 1.25; }
.ag-h strong { text-transform: capitalize; font-size: 14px; }
.ag-h .sub { font-size: 12px; color: var(--muted); }
.ag-add { margin-left: auto; width: 26px; height: 26px; display: grid; place-items: center; border: 1px dashed var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--muted); cursor: pointer; flex: none; }
.ag-add:hover { color: var(--accent); border-color: var(--accent); }
.ag-items { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.ag-item { display: flex; flex-direction: column; gap: 1px; text-align: left; padding: 7px 10px; border: 0; border-left: 3px solid var(--accent); border-radius: 6px; background: var(--accent-soft); color: var(--ink); cursor: pointer; font: inherit; min-width: 0; flex: 0 1 260px; }
.ag-day.today .ag-item { background: var(--surface); }
.ag-item strong { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-item .sub { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-item.st-option { border-left-color: var(--warn); background: var(--warn-soft); }
.ag-item.st-soldee { border-left-color: var(--ok); background: var(--ok-soft); }
.ag-t { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ag-empty { font-size: 13px; color: var(--muted); align-self: center; }
@media (max-width: 640px) { .ag-day { grid-template-columns: minmax(0, 1fr); gap: 6px; } .ag-item { flex-basis: 100%; } }
.es-tarifs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.es-tarifs span { font-size: 12.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px; background: var(--sunk); }
.calc-box { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r); background: var(--accent-soft); }
.calc-box > span:first-child { font-size: 12.5px; color: var(--ink-2); }
.calc-box strong .amt { font-size: 20px; }
.calc-box .sub { font-size: 12.5px; color: var(--ink-2); }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .form-grid-3 { grid-template-columns: minmax(0, 1fr); } }
.grp-pick { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 10px; }
.grp-pick li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; }
.grp-pick select { width: auto; min-width: 130px; }
.grp-pick .sub { color: var(--muted); font-size: 12.5px; }
/* Sécurité */
.code-in { font-size: 22px; letter-spacing: 0.3em; text-align: center; max-width: 220px; }
.totp-qr { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.totp-qr > div:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.totp-key { font-size: 14px; word-break: break-all; padding: 6px 8px; background: var(--sunk); border-radius: 6px; }
.sceau-l { display: flex; gap: 8px; align-items: flex-start; color: var(--gold); margin: -4px 0 0; }
.sceau-l .ic { flex: none; margin-top: 1px; }
/* Analyses */
.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .tiles-3 { grid-template-columns: minmax(0, 1fr); } }
.tbl-tight td, .tbl-tight th { padding: 7px 8px; }
.tbl .sub { color: var(--muted); font-size: 12px; }
.insight { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--gold-soft); color: var(--ink); }
.insight .ic { color: var(--gold); flex: none; margin-top: 1px; }
.ch-band { fill: var(--accent); opacity: 0.13; }
.ch-line { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.ch-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.ch-dot.neg { stroke: var(--bad); }
.cr-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .cr-grid { grid-template-columns: minmax(0, 1fr); } }
.cr-out { white-space: pre-wrap; font-size: 14.5px; line-height: 1.6; min-height: 200px; }
.cr-edit { width: 100%; min-height: 420px; font: inherit; font-size: 14.5px; line-height: 1.6; resize: vertical; }
.cr-wait { display: flex; align-items: center; gap: 10px; }
/* Diocèse */
.decl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.decl-grid > div { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 640px) { .decl-grid { grid-template-columns: minmax(0, 1fr); } }
.ro-v { display: block; padding: 8px 0; font-weight: 600; }
.bareme { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bareme > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--sunk); }
.bareme .sub { font-size: 12px; color: var(--muted); }
.bareme strong { font-size: 18px; }
.tbl tfoot td { border-top: 2px solid var(--line-strong); }
.tile-v { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .tile-v { font-size: 16px; } }
.side-user { gap: 6px; padding: 8px; }
.side-user .icon-btn { width: 32px; height: 32px; flex: none; }
.su-t span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- V4 ---------- */
.banner-ent { background: var(--sunk); }
.banner-ent a { margin-left: auto; font-weight: 600; }
.ch-zone { fill: var(--sunk); }
.ch-bar.alerte { fill: var(--bad); }
.code-block { margin: 8px 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--sunk); font-family: var(--f-mono); font-size: 12px; white-space: pre-wrap; overflow-x: auto; }
.stack.gap8 { gap: 8px; align-items: flex-start; }
.tile-app .app-qr { display: flex; align-items: center; gap: 10px; }
.row-messe { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 220px) 40px; }
.ent-card { cursor: default; gap: 6px; }
.ent-card .row-gap { margin-top: 6px; }
.ent-usage { display: flex; flex-wrap: wrap; gap: 6px; }
.ent-usage span { font-size: 12px; padding: 1px 8px; border-radius: 20px; background: var(--sunk); color: var(--ink-2); }
/* Application des fidèles */
.fid { min-height: 100vh; max-width: 480px; margin: 0 auto; background: var(--bg); display: flex; flex-direction: column; padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
.fid-top { display: flex; align-items: center; gap: 10px; padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 12px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.fid-top > div { display: flex; flex-direction: column; line-height: 1.25; }
.fid-ent { font-family: var(--f-display); font-size: 17px; }
.fid-main { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.fid-sec { display: flex; flex-direction: column; gap: 12px; }
.fid-h { font-family: var(--f-display); font-weight: 400; font-size: 22px; }
.fid-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; text-align: left; color: inherit; font: inherit; }
.fid-card.form { gap: 14px; }
.fid-k { font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gold); }
.fid-hero { border-radius: 16px; padding: 18px; background: var(--accent); color: var(--accent-ink); display: flex; flex-direction: column; gap: 4px; }
.fid-hero .fid-k { color: var(--accent-ink); opacity: 0.8; }
.fid-big { font-size: 20px; font-weight: 700; }
.fid-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fid-actions button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: center; }
.fid-actions button span { color: var(--ink); }
.fid-lots { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.fid-lots li { display: grid; grid-template-columns: minmax(0, 1fr) 90px 38px; gap: 8px; align-items: center; }
.fid-bar { height: 6px; border-radius: 4px; background: var(--sunk); overflow: hidden; }
.fid-bar span { display: block; height: 100%; background: var(--gold); }
.fid-evts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fid-evts li { display: flex; gap: 12px; align-items: center; }
.fid-evts li > div { display: flex; flex-direction: column; min-width: 0; }
.fid-date { width: 44px; flex: none; display: flex; flex-direction: column; align-items: center; padding: 4px 0; border-radius: 10px; background: var(--accent-soft); color: var(--accent); line-height: 1.1; }
.fid-date strong { font-size: 18px; }
.fid-date span { font-size: 11px; text-transform: uppercase; }
.fid-link { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; border: 0; background: none; color: var(--accent); font-weight: 600; font-size: 13.5px; cursor: pointer; padding: 0; text-decoration: none; }
.fid-prog { gap: 0; padding: 4px 16px; }
.fid-jour { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); align-items: center; }
.fid-jour:last-child { border-bottom: 0; }
.fid-jour > div { display: flex; flex-wrap: wrap; gap: 6px; }
.fid-heure { font-weight: 650; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 8px; background: var(--sunk); font-size: 13.5px; }
.fid-heure em { font-style: normal; font-weight: 500; color: var(--muted); font-size: 12px; }
.fid-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fid-choix { flex-direction: row; align-items: center; gap: 12px; cursor: pointer; }
.fid-choix > div { flex: 1; display: flex; flex-direction: column; }
.fid-choix > .ic:first-child { color: var(--accent); }
.fid-formules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fid-formules .pay-opt { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 12.5px; }
.fid-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.fid-row:last-child { border-bottom: 0; }
.fid-row > div:first-child { display: flex; flex-direction: column; min-width: 0; flex: 1 1 180px; }
.fid-foot { text-align: center; }
.fid-nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--surface); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); z-index: 6; }
.fid-nav button { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; color: var(--muted); font-size: 11px; font-weight: 550; padding: 4px 0; cursor: pointer; }
.fid-nav button.on { color: var(--accent); }
@media (min-width: 700px) { .fid { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }