:root {
  --bg: #f4f6f9; --card: #ffffff; --ink: #1f2937; --muted: #6b7280;
  --accent: #1d4ed8; --ok: #047857; --err: #b91c1c; --border: #e5e7eb;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--ink); }
.container { max-width: 1280px; margin: 0 auto; padding: 20px; }
.topnav { display: flex; align-items: center; gap: 24px; background: #111827; color: #fff; padding: 10px 20px; flex-wrap: wrap; }
.topnav .brand { font-weight: 700; } .topnav .brand span { color: #93c5fd; }
.topnav a { color: #d1d5db; text-decoration: none; margin-right: 14px; }
.topnav a:hover { color: #fff; }
.topnav .userbox { margin-left: auto; display: flex; gap: 10px; align-items: center; font-size: 0.9em; }
h1 { font-size: 1.5em; } h2 { font-size: 1.1em; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; margin: 14px 0; }
.alert { padding: 10px 14px; border-radius: 6px; margin: 12px 0; }
.alert.ok { background: #d1fae5; color: var(--ok); }
.alert.err { background: #fee2e2; color: var(--err); }
table.matrix { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.matrix th, .matrix td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.matrix thead th { background: #111827; color: #fff; font-size: 0.85em; }
.matrix tfoot th { background: #eef2ff; }
.matrix td.num, .matrix th.num { text-align: right; }
.matrix td.corrected { background: #fff7ed; }
.matrix td.empty .val { color: var(--err); font-weight: 700; }
.matrix tr:hover td { background: #f9fafb; }
.matrix td.corrected:hover { background: #ffedd5; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75em; font-weight: 600; }
.badge.op-speek { background: #ede9fe; color: #6d28d9; }
.badge.op-teams { background: #dbeafe; color: #1d4ed8; }
.badge.op-3cx  { background: #dcfce7; color: #15803d; }
.badge.status-brouillon { background: #fef3c7; color: #92400e; }
.badge.status-valide { background: #d1fae5; color: var(--ok); }
.role { padding: 2px 8px; border-radius: 999px; font-size: 0.75em; font-weight: 700; text-transform: uppercase; }
.role-admin { background: #fee2e2; color: #b91c1c; }
.role-compta { background: #dbeafe; color: #1d4ed8; }
.role-visiteur { background: #e5e7eb; color: #374151; }
.tag { background: #e5e7eb; color: #374151; border-radius: 4px; padding: 0 5px; font-size: 0.72em; margin-left: 4px; }
.tag.corr { background: #ffedd5; color: #9a3412; }
.strike { text-decoration: line-through; color: var(--muted); margin-left: 5px; }
.muted { color: var(--muted); font-size: 0.9em; }
.spacer { flex: 1; }
.statusbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
form.inline { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
input, select, button { padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
button, .btn { background: var(--accent); color: #fff; border: none; cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .btn:hover { filter: brightness(1.1); }
button.danger { background: var(--err); }
button.small, .btn.small { padding: 4px 10px; font-size: 0.85em; }
.pagehead { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.authbox { max-width: 460px; margin: 60px auto; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 30px; }
.authbox form { display: flex; flex-direction: column; gap: 8px; }
.authbox label { font-size: 0.85em; color: var(--muted); margin-top: 6px; }
.qr { display: block; margin: 10px auto; width: 200px; }
.backup-codes { columns: 2; list-style: none; padding: 0; }
.backup-codes code { background: #f3f4f6; padding: 3px 8px; border-radius: 4px; display: inline-block; margin: 3px 0; }
details.correct-box summary { cursor: pointer; font-size: 0.78em; color: var(--accent); }
details.correct-box form { display: flex; gap: 4px; margin-top: 5px; }
details.correct-box input[type=number] { width: 70px; }
details.correct-box input[type=text] { width: 150px; }
.mapline { font-size: 0.85em; margin: 2px 0; }
.inline-label { font-size: 0.85em; display: inline-flex; align-items: center; gap: 4px; }
button.ghost-danger { background: transparent; color: var(--err); border: 1px solid var(--err); }
button.ghost-danger:hover { background: #fee2e2; }