[hidden] { display: none !important; }
:root {
  --fond: #f6f5f1; --carte: #ffffff; --carte2: #f1efe8; --texte: #1f1e1c; --texte2: #5f5e5a; --bord: rgba(0,0,0,.12);
  --accent: #185fa5; --accent-bg: #e6f1fb; --ok: #3b6d11; --ok-bg: #eaf3de; --warn: #854f0b; --warn-bg: #faeeda;
  --danger: #a32d2d; --danger-bg: #fcebeb; --violet: #534ab7; --violet-bg: #eeedfe; --r: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--texte); background: var(--fond);
}
@media (prefers-color-scheme: dark) {
  :root { --fond: #1b1b1a; --carte: #262624; --carte2: #2f2f2c; --texte: #ecebe6; --texte2: #b4b2a9; --bord: rgba(255,255,255,.14);
    --accent: #85b7eb; --accent-bg: #0c447c; --ok: #c0dd97; --ok-bg: #27500a; --warn: #fac775; --warn-bg: #633806;
    --danger: #f7c1c1; --danger-bg: #791f1f; --violet: #cecbf6; --violet-bg: #3c3489; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); font-size: 15px; line-height: 1.5; }
main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: 20px; font-weight: 600; margin: 0; } h1 span { color: var(--texte2); font-weight: 400; }
h2 { font-size: 16px; font-weight: 600; margin: 0 0 12px; }
.muted { color: var(--texte2); font-size: 13px; }
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: 18px 20px; margin-bottom: 18px; }
.entete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 18px; }
.kpi { background: var(--carte2); border-radius: var(--r); padding: 12px; }
.kpi div:first-child { font-size: 12px; color: var(--texte2); } .kpi div:last-child { font-size: 22px; font-weight: 600; }
.barre { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.barre h2 { margin: 0; flex: 1; }
.table { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 500; color: var(--texte2); font-size: 13px; padding: 8px; border-bottom: 1px solid var(--bord); white-space: nowrap; }
td { padding: 9px 8px; border-bottom: 1px solid var(--bord); }
tr.cliquable { cursor: pointer; } tr.cliquable:hover td { background: var(--carte2); }
td.num, th.num { text-align: right; white-space: nowrap; }
.pill { font-size: 12px; padding: 2px 9px; border-radius: var(--r); display: inline-block; white-space: nowrap; background: var(--carte2); color: var(--texte2); }
.p-en_discussion { background: var(--accent-bg); color: var(--accent); } .p-signe { background: var(--ok-bg); color: var(--ok); }
.p-perdu { background: var(--danger-bg); color: var(--danger); } .p-client { background: var(--violet-bg); color: var(--violet); }
.a-verser { color: var(--warn); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: transparent; border: 1px solid var(--bord); border-radius: var(--r); padding: 7px 14px; cursor: pointer; }
button:hover { background: var(--carte2); }
button.primaire { background: var(--texte); color: var(--fond); border-color: var(--texte); }
button.danger { color: var(--danger); }
button.lien { border: none; padding: 0; color: var(--texte2); text-decoration: underline; font-size: 13px; }
input, select, textarea { width: 100%; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--r); padding: 7px 10px; }
input[type=file] { border: none; padding: 0; margin: 8px 0; }
label { display: block; font-size: 13px; color: var(--texte2); margin-bottom: 10px; }
label input, label select, label textarea { margin-top: 4px; color: var(--texte); }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 12px; }
dialog { border: 1px solid var(--bord); border-radius: 12px; background: var(--carte); color: var(--texte); width: min(680px, calc(100vw - 32px)); padding: 20px; }
dialog::backdrop { background: rgba(0,0,0,.4); }
.actions { display: flex; gap: 8px; margin-top: 12px; } .espace { flex: 1; }
.alerte { background: var(--warn-bg); color: var(--warn); border-radius: var(--r); padding: 10px 12px; font-size: 14px; margin: 6px 0; }
.erreur { color: var(--danger); font-size: 14px; }
.journal { font-size: 12px; color: var(--texte2); border-top: 1px solid var(--bord); margin-top: 10px; padding-top: 8px; max-height: 120px; overflow: auto; }
.connexion { max-width: 400px; margin: 10vh auto 0; }
.vide { color: var(--texte2); font-size: 14px; padding: 14px 8px; }