/* Polices hebergees localement (public/fonts/) au lieu de Google Fonts —
   corrige le 2026-09-04 suite a un scan de securite (ZAP) qui a signale
   l'absence de Sub Resource Integrity sur le chargement externe. Google
   Fonts ne supporte de toute facon pas SRI (le contenu varie selon le
   navigateur), donc heberger soi-meme etait la seule vraie solution — et
   ca evite au passage qu'une requete Google recoive l'IP de chaque
   visiteur a chaque chargement de page, plus coherent avec le
   positionnement "100% Suisse" de Nota. Fraunces et Inter sont des
   polices variables (un seul fichier couvre tous les poids utilises ici,
   400 a 600) ; IBM Plex Mono est chargee en deux poids statiques separes
   (c'est ce que Google fournissait aussi). Sous-ensemble latin uniquement
   (accents francais inclus) — les autres langues ne sont pas utilisees
   par l'app. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/fraunces-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/inter-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-500.woff2') format('woff2');
}

:root {
  /* Editorial redesign (2026-08-27, see docs/design handoff) — same
     variable names reused throughout the file so every screen sharing
     these tokens (chat, admin, login, landing) inherits the new palette
     at once, even though only the chat screen's own markup/spacing has
     been redone so far. --ink/--ink-2 keep their old ROLE (main surface /
     secondary surface) with new warmer values; new tokens are added
     alongside for the surfaces/radii/shadows the old palette had no
     equivalent for. */
  --page-bg: #eae7e2;
  --ink: #fffefd;
  --ink-2: #f8f6f3;
  --ink-3: #faf8f5;
  --field-bg: #fdfcfa;
  --line: #e2ded7;
  --line-soft: #ece8e2;
  --line-row: #f4f0ea;
  --line-header: #f0ece6;
  --hover-row: #f1eeea;
  --paper: #1c1a22;
  --paper-dim: #4a4653;
  --paper-faint: #6b6776;
  --paper-weak: #8a8593;
  --paper-min: #a5a0ae;
  --paper-min-2: #b3aeb9;
  --accent: #6a4ce0;
  --accent-2: #8f6cff;
  --accent-dim: #5a36d6;
  --accent-text: #4f33bd;
  --accent-bg: #f4f0ff;
  --accent-bg-2: #fbf9ff;
  --accent-border: #dcd6ee;
  --accent-border-2: #c9bdf0;
  --accent-grad: linear-gradient(150deg, #8f6cff 0%, #5a36d6 100%);
  --amber: #b3771d;
  --red: #c0392b;
  --green: #2f7a5b;
  --green-dot: #3f9a72;
  --green-bg: #f3f6f4;
  --green-border: #dfe9e3;
  --progress-track: #efebe4;
  --progress-track-2: #eae5dd;
  --radius: 12px;
  /* Reverted 2026-08-27 at Bryan's request: Instrument Serif read as too
     vertically elongated in real use — back to the fonts already in use
     (Fraunces/Inter/IBM Plex Mono) while keeping the rest of the redesign
     (colors, spacing, radii) as-is. */
  --font-serif: 'Fraunces', serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --shadow-soft: 0 1px 2px rgba(28, 26, 34, 0.05);
  --shadow-panel: 0 8px 24px -16px rgba(28, 26, 34, 0.25);
  --shadow-window: 0 30px 60px -30px rgba(28, 26, 34, 0.28), 0 2px 6px rgba(28, 26, 34, 0.06);
  --shadow-card: 0 10px 28px -10px rgba(124, 58, 237, 0.22);
}
* { box-sizing: border-box; }
body, html { margin: 0; padding: 0; background: var(--page-bg); }

.app {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  height: 100vh;
  display: flex;
  width: 100%;
  overflow: hidden;
}
.sidebar {
  width: 268px;
  flex-shrink: 0;
  background: var(--ink-2);
  border-right: 1px solid var(--line-soft);
  box-shadow: none;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 1;
}
.brand {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--paper);
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 8px;
}
.brand-text { display: flex; align-items: baseline; gap: 10px; }
.brand small {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  color: var(--paper-min);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.client-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow-y: auto;
}
.sidebar-section-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-min);
  padding: 0 6px 8px;
}
.client-item {
  position: relative;
  padding: 11px 26px 11px 12px;
  border-radius: 11px;
  cursor: pointer;
  background: var(--ink);
  border: 1px solid var(--line-soft);
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.client-item:hover { background: var(--ink); border-color: var(--accent-border); }
.client-item .remove-client {
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--paper-min);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, color .12s ease;
}
.client-item:hover .remove-client { opacity: 1; }
.client-item .remove-client:hover { color: var(--red); }
.client-item.active { background: var(--ink); border-color: var(--accent-border); box-shadow: var(--shadow-soft); }
.client-item .name { font-size: 13px; font-weight: 500; color: var(--paper); }
.client-item .case {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--paper-min-2);
  margin-top: 2px;
  letter-spacing: 0.03em;
}
.client-item .docs-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--paper-weak);
  margin-top: 5px;
}
.new-client {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--accent-text);
  background: var(--ink);
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  padding: 11px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: block;
  box-sizing: border-box;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.new-client:hover { color: var(--accent-text); border-color: var(--accent-border-2); background: var(--accent-bg); }
.new-client#logoutBtn { background: none; border-color: transparent; color: var(--paper-weak); font-weight: 400; }
.new-client#logoutBtn:hover { color: var(--paper); background: none; }

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 4px 0;
  border-top: 1px solid var(--line-soft);
  margin-top: 4px;
}
.sidebar-user-avatar {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #e7e2fb;
  color: var(--accent-text);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.sidebar-user-name {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--paper-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-link {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--paper-dim);
  background: none;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 0;
  cursor: pointer;
  text-align: left;
  display: block;
  box-sizing: border-box;
  width: 100%;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.dashboard-link:hover { color: var(--paper); background: var(--hover-row); }
.dashboard-link.active { background: var(--ink); border-color: #e4dff8; color: var(--accent-text); box-shadow: none; }

.dashboard-page { padding: 26px 36px 0; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 28px; }
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 0;
}
.dashboard-stat {
  border: none;
  border-radius: 0;
  background: var(--ink);
  box-shadow: none;
  padding: 20px 18px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dashboard-stat-value { font-family: var(--font-serif); font-size: 38px; line-height: 1; letter-spacing: -0.02em; color: var(--paper); order: 2; }
.dashboard-stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-min);
  margin-top: 0;
  order: 1;
}
.dashboard-table { width: 100%; border-collapse: collapse; font-size: 13.5px; table-layout: fixed; }
.dashboard-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-min);
  padding: 0 6px 10px;
  border-bottom: 1px solid var(--line-soft);
}
.dashboard-table td { padding: 14px 6px; border-bottom: 1px solid var(--line-row); color: var(--paper-dim); font-size: 12.5px; }
.dashboard-table td:first-child { font-size: 13.5px; font-weight: 500; color: var(--paper); }
.dashboard-case { font-family: var(--font-mono); font-size: 9.5px; color: var(--paper-min-2); margin-top: 2px; }
.dashboard-row { cursor: pointer; transition: background .12s ease; }
.dashboard-row:hover { background: var(--ink-3); }
@media (max-width: 900px) {
  .dashboard-stats { grid-template-columns: repeat(2, 1fr); }
  .dashboard-table { display: block; overflow-x: auto; table-layout: auto; }
}

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.header {
  padding: 26px 34px 20px;
  border-bottom: 1px solid var(--line-header);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 10px;
  gap: 24px;
}
.header .title-block { min-width: 200px; flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px; }
.header .title-block .eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--paper-min);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.header .title-block h1 {
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--paper);
}
.stamp {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--paper-faint);
  background: var(--ink-2);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.stamp b { color: var(--paper-faint); font-weight: 500; }
.badge-privacy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--green);
  background: var(--green-bg);
  border: 1px solid var(--green-border);
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-privacy .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-dot); flex-shrink: 0; }

.body-grid { flex: 1; display: grid; grid-template-columns: 1fr 340px; min-height: 0; }
/* Narrower desktop windows (small laptops, non-maximized windows): give
   the chat column more breathing room instead of holding the vault
   column at a fixed 340px regardless of how little space is left. */
@media (max-width: 900px) {
  .body-grid { grid-template-columns: 1fr 260px; }
}
.body-grid.single-col {
  grid-template-columns: 1fr;
  justify-items: center;
}
.body-grid.single-col .vault-col { width: 100%; max-width: 640px; }

.chat-col { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: none; }
.messages {
  flex: 1;
  overflow-y: auto;
  padding: 30px 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.msg { max-width: 660px; font-size: 14.5px; line-height: 1.5; font-family: var(--font-sans); }
.msg.user {
  align-self: flex-end;
  background: var(--accent);
  padding: 13px 18px;
  border-radius: 16px 16px 4px 16px;
  color: #ffffff;
  max-width: 520px;
  box-shadow: 0 6px 18px -8px rgba(106, 76, 224, 0.6);
}
.msg.assistant {
  align-self: flex-start;
  color: var(--paper);
  display: flex;
  gap: 12px;
  max-width: 660px;
}
.msg-avatar {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 9px;
  background: var(--accent-grad);
  color: #ffffff;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 2px;
}
.msg-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.msg.assistant .label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--paper-min);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: none;
}
.msg.assistant .answer-text {
  padding: 15px 18px;
  border-radius: 4px 16px 16px 16px;
  background: var(--ink-3);
  border: 1px solid #eee9e2;
  font-size: 14.5px;
  line-height: 1.62;
  color: #2b2833;
  display: block;
  /* Les reponses de l'IA contiennent de vrais sauts de ligne (listes a
     puces, paragraphes) — sans cette regle, le comportement HTML par
     defaut ("normal") les ecrase tous et affiche tout sur une seule
     ligne continue. "pre-wrap" garde les sauts de ligne existants tout en
     laissant le texte long continuer a revenir a la ligne normalement. */
  white-space: pre-wrap;
}
/* Elements produits par renderMarkdown (public/employee.js) — gras/italique
   gardent le style natif du navigateur, ces regles ne couvrent que les
   blocs structurels (titre, listes) pour qu'ils s'integrent proprement
   dans la bulle plutot que d'apporter leurs marges par defaut du navigateur. */
.msg.assistant .answer-text .md-heading {
  font-weight: 600;
  margin: 10px 0 4px;
}
.msg.assistant .answer-text .md-heading:first-child {
  margin-top: 0;
}
.msg.assistant .answer-text ul,
.msg.assistant .answer-text ol {
  margin: 4px 0;
  padding-left: 22px;
}
.msg.assistant .answer-text li {
  margin: 2px 0;
}
.msg.error .msg-avatar { background: var(--red); }
.msg.error .label { color: var(--red); display: block; }
.msg-sources {
  padding-top: 0;
  border-top: none;
  font-size: 10.5px;
  color: var(--paper-faint);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
.source-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid #eae5de;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper-faint);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
}
.source-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--accent);
  flex-shrink: 0;
}
.msg.empty-state {
  align-self: center;
  text-align: center;
  color: var(--paper-weak);
  font-size: 13px;
  margin-top: 60px;
  max-width: 380px;
  font-family: var(--font-sans);
}
.msg.empty-state .glyph {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
  opacity: 0.35;
  margin: 0 auto 10px;
}
.suggested-prompts {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.suggested-prompts-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-weak);
  margin-bottom: 2px;
}
.suggested-prompt {
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--accent-text);
  font-family: var(--font-sans);
  font-size: 12.5px;
  padding: 8px 14px;
  cursor: pointer;
  max-width: 360px;
}
.suggested-prompt:hover { border-color: var(--accent-border-2); background: var(--accent-bg); box-shadow: var(--shadow-soft); }

.composer {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  padding: 10px 10px 10px 18px;
  margin: 0 34px 10px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-panel);
}
.composer textarea {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 20px;
  padding: 9px 0;
  resize: none;
  /* height (not min-height) with box-sizing:border-box and 9px top/bottom
     padding was clipping the text to a ~2px sliver — 20px only fit the
     padding itself, none of the actual line. 38px = 9 + line-height 20 + 9,
     one full line visible at rest, still free to grow up to max-height. */
  height: 38px;
  max-height: 120px;
}
.composer textarea::placeholder { color: var(--paper-min); }
.composer textarea:focus { outline: none; }
.send-btn {
  background: var(--paper);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 11px 20px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  letter-spacing: normal;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
  transition: background .12s ease;
}
.send-btn:hover:not(:disabled) { background: var(--accent); }
.send-btn:active:not(:disabled) { background: var(--accent-dim); }
.send-btn:disabled { opacity: 0.4; cursor: default; }

.composer-attach-btn {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: none;
  color: var(--paper-weak);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease, color .12s ease;
}
.composer-attach-btn:hover:not(:disabled) { background: var(--accent-bg); color: var(--accent); }
.composer-attach-btn:disabled { opacity: 0.4; cursor: default; }

#composerAttachments:empty { display: none; }
.composer-attachments-list {
  display: flex;
  gap: 8px;
  padding: 0 34px 10px;
  flex-wrap: wrap;
}
.attachment-chip {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.attachment-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attachment-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(28, 26, 34, 0.72);
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
}
.attachment-remove:hover { background: var(--red); }

.msg-attachments {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.msg-attachments img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.attachment-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent-border-2), var(--paper-min-2), var(--accent-border));
  filter: blur(5px);
  cursor: help;
}

.composer-hint {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--paper-weak);
  text-align: center;
  padding: 6px 4px 0;
  margin: 0 34px 10px;
}

.vault-col {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  min-width: 0;
  background: var(--ink-2);
  border-left: 1px solid var(--line-soft);
}
.vault-title {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-weak);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.vault-title span.count { color: var(--paper); font-family: var(--font-serif); font-size: 20px; }
.doc-input { display: flex; flex-direction: column; gap: 18px; }
.doc-add-card {
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.doc-input textarea {
  width: 100%;
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 12px;
  resize: none;
  height: 96px;
  min-height: 96px;
  margin: 0;
}
.doc-input textarea:focus { outline: none; border-color: var(--accent-border-2); }
.doc-input input[type=text] {
  width: 100%;
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 10px 12px;
  margin-bottom: 0;
}
.doc-input input[type=text]:focus { outline: none; border-color: var(--accent-border-2); }
.add-doc-btn {
  margin-top: 0;
  width: 100%;
  background: var(--accent);
  border: none;
  color: #ffffff;
  border-radius: 10px;
  padding: 11px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  cursor: pointer;
}
.add-doc-btn:hover { background: var(--accent-dim); }
.add-doc-btn:disabled { opacity: 0.4; cursor: default; }

.upload-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-min-2);
}
.upload-divider::before,
.upload-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.upload-zone {
  border: 1.5px dashed var(--accent-border);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  background: var(--accent-bg-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background .12s ease, border-color .12s ease;
}
.upload-zone:hover { background: var(--accent-bg); border-color: var(--accent-border-2); }
.upload-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  background: none;
  border: none;
  color: var(--accent-text);
  border-radius: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: normal;
  cursor: pointer;
  transition: none;
}
.upload-btn:hover { color: var(--accent-text); border-color: transparent; }
.upload-btn.uploading { opacity: 0.5; pointer-events: none; }
.upload-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.6;
  color: #9b96a4;
  text-align: center;
  margin-top: 0;
}

.doc-card { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line-soft); border-radius: 11px; padding: 10px 12px; background: var(--ink); box-shadow: none; margin-bottom: 0; }
.doc-card-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 7px;
  background: var(--accent-bg);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.doc-card-body { flex: 1; min-width: 0; }
.doc-card .doc-name { font-family: var(--font-sans); font-size: 12.5px; color: var(--paper); font-weight: 400; margin-bottom: 3px; overflow-wrap: anywhere; }
.doc-card .doc-preview { font-family: var(--font-mono); font-size: 9.5px; color: var(--paper-min-2); line-height: 1.4; max-height: 26px; overflow: hidden; }
.doc-card .remove { float: right; color: var(--red); cursor: pointer; font-family: var(--font-mono); font-size: 10px; }
#docCards { display: flex; flex-direction: column; gap: 7px; }

.typing { display: flex; gap: 4px; padding: 4px 0; }
.typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-dim); animation: blink 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* --- Page vitrine publique (public/index.html) --- */
.landing {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 900px 560px at 50% 0%, rgba(124, 58, 237, 0.10), transparent 60%),
    repeating-linear-gradient(transparent 0 39px, rgba(28, 27, 34, 0.02) 39px 40px),
    var(--ink);
  color: var(--paper);
  font-family: 'Inter', sans-serif;
}
.landing-nav {
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.landing-nav .brand { font-size: 20px; }
.landing-nav-link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--paper-dim);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 14px;
}
.landing-nav-link:hover { color: var(--accent); border-color: var(--accent-dim); }

.landing-hero {
  max-width: 720px;
  margin: 0 auto;
  padding: 72px 24px 56px;
  text-align: center;
}
.landing-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.landing-hero h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 20px;
}
.landing-hero p {
  font-size: 15.5px;
  color: var(--paper-dim);
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto 32px;
}
.landing-cta {
  display: inline-block;
  background: var(--accent-grad);
  color: #ffffff;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  border-radius: var(--radius);
  padding: 13px 28px;
  box-shadow: var(--shadow-card);
}
.landing-cta:hover { opacity: 0.92; }
/* Secondary action beside the primary "Se connecter" (2026-08-29, when the
   landing page gained a real sign-in entry point). Same shape and rhythm as
   the primary so the pair reads as one control group, but quiet: no accent
   fill and no shadow, so it never competes with the primary. */
.landing-cta-secondary {
  background: none;
  color: var(--paper-dim);
  border: 1px solid var(--line);
  box-shadow: none;
  margin-left: 10px;
}
.landing-cta-secondary:hover { border-color: var(--accent-border-2); color: var(--paper); opacity: 1; }

.landing-section {
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 24px;
}
.landing-section-title {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 36px;
}
.landing-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.landing-feature {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
}
.landing-feature-title {
  font-weight: 600;
  font-size: 14.5px;
  margin-bottom: 8px;
}
.landing-feature-text {
  font-size: 13px;
  color: var(--paper-dim);
  line-height: 1.6;
}

.landing-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.landing-plan {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px;
  text-align: center;
  position: relative;
}
.landing-plan.featured {
  border-color: var(--accent-dim);
  box-shadow: var(--shadow-card);
}
.landing-plan-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-grad);
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius);
}
.landing-plan-name {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 6px;
}
.landing-plan-price {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 4px;
}
.landing-plan-price small {
  font-size: 12px;
  font-weight: 400;
  color: var(--paper-dim);
}
.landing-plan-detail {
  font-size: 12.5px;
  color: var(--paper-dim);
}
.landing-pricing-intro {
  text-align: center;
  font-size: 13px;
  color: var(--paper-dim);
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto 28px;
}

.landing-footer {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px 56px;
  text-align: center;
  border-top: 1px solid var(--line);
}
.landing-footer-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: 10px;
}
.landing-footer p {
  font-size: 12.5px;
  color: var(--paper-dim);
  line-height: 1.7;
  margin: 0;
}
.landing-footer a { color: var(--accent); text-decoration: none; }
.landing-footer a:hover { text-decoration: underline; }
.landing-legal-links {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.landing-legal-links a {
  font-size: 11.5px;
  color: var(--paper-dim);
  text-decoration: none;
}
.landing-legal-links a:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 720px) {
  .landing-features, .landing-pricing { grid-template-columns: 1fr; }
}

/* Page CGV (/cgv) — meme coquille .landing que la page d'accueil, contenu
   long-format en plus. Genere a partir de docs/cgv.md ; le contenu changera
   (relecture par un avocat suisse en attente au 2026-09-05), garder les deux
   synchronises. */
.legal-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}
.legal-content h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(26px, 3.6vw, 36px);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.legal-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--paper-dim);
  line-height: 1.7;
  margin: 0 0 40px;
}
.legal-content h2 {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  font-weight: 600;
  margin: 40px 0 14px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.legal-content h2:first-of-type { padding-top: 0; border-top: none; }
.legal-content p {
  font-size: 14px;
  color: var(--paper-dim);
  line-height: 1.7;
  margin: 0 0 12px;
}
.legal-content p strong:first-child { color: var(--paper); }
.legal-toc {
  font-size: 13px;
  color: var(--paper-dim);
  line-height: 2;
  padding-left: 20px;
  margin: 0 0 40px;
}

/* Petits utilitaires (2026-09-05) — remplacent les attributs style="..."
   statiques eparpilles dans admin.js/employee.js/login.js/team.js, pour
   pouvoir retirer 'unsafe-inline' de style-src dans le CSP (server.js).
   Les 2 seules valeurs VRAIMENT dynamiques (barres de progression en %,
   voir usageBar/marginPct/budgetPct dans admin.js) restent hors CSS : elles
   sont fixees via element.style.width en JS apres le rendu, ce que le CSP
   n'a jamais couvert (seul le style="..." texte HTML/CSS l'est, pas la
   CSSOM) — inutile d'inventer une classe par pourcentage possible.
   Nommage volontairement plat (mt-16, col-14...) plutot que semantique :
   ce sont des reglages ponctuels, pas des composants reutilises. */
.hidden-file-input { display: none; }
.btn-max-260 { max-width: 260px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; }
.mt-28 { margin-top: 28px; }
.mt-neg-4 { margin-top: -4px; }
.mb-14 { margin-bottom: 14px; }
.w-full { width: 100%; }
.flex-1 { flex: 1; }
.text-accent { color: var(--accent); }
.muted-note { color: var(--paper-dim); font-size: 11.5px; }
.muted-note-pad { color: var(--paper-dim); font-size: 11.5px; padding: 8px; }
.muted-note-tight { color: var(--paper-dim); font-size: 11.5px; padding: 4px 0; }
.empty-state-auto { margin: auto; }
.empty-state-auto-lg { margin: 32px auto; }
.empty-state-wide { grid-column: 1 / -1; margin: auto; max-width: 420px; }
.totp-input { text-align: center; letter-spacing: 0.3em; font-family: 'IBM Plex Mono', monospace; }
.totp-input-lg { font-size: 18px; }
.margin-block-bar-accent { background: var(--accent); }
.margin-block-bar-budget { background: var(--accent-border-2); }
.col-11 { width: 11%; }
.col-12 { width: 12%; }
.col-14 { width: 14%; }
.col-16 { width: 16%; }
.col-22 { width: 22%; }

.login-screen {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 780px 520px at 50% 32%, rgba(124, 58, 237, 0.08), transparent 62%),
    repeating-linear-gradient(transparent 0 39px, rgba(28, 27, 34, 0.025) 39px 40px),
    var(--ink);
  color: var(--paper);
  font-family: 'Inter', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  position: relative;
  width: 100%;
  max-width: 360px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 38px 32px 32px;
  background: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow:
    0 30px 60px -24px rgba(0, 0, 0, 0.65),
    0 0 48px -18px rgba(124, 58, 237, 0.20);
  animation: login-card-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes login-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.login-stamp {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid rgba(179, 119, 29, 0.5);
  padding: 3px 6px;
  border-radius: var(--radius);
  transform: rotate(4deg);
  opacity: 0.85;
  white-space: nowrap;
}
.login-crest {
  align-self: center;
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(124, 58, 237, 0.35));
  margin-bottom: 10px;
}
.login-card .brand {
  align-self: center;
  margin-bottom: 2px;
}
.login-card .brand-icon { display: none; }
/* Sign-in screen (login.js): no big crest above, so the logo sits next to
   the word instead. Lifted 2px: the N in logo-icon.png sits low in its
   canvas and would otherwise read as below the text. */
.login-card .brand--with-icon { gap: 10px; }
.login-card .brand--with-icon .brand-icon {
  display: block;
  width: 28px;
  height: 28px;
  transform: translateY(-2px);
}
.login-eyebrow {
  align-self: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: 22px;
}
.login-sub {
  font-size: 12.5px;
  color: var(--paper-dim);
  margin: 0;
  line-height: 1.55;
  text-align: center;
}
.field-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin: 14px 0 6px;
}
.login-card input[type=password],
.login-card input[type=email],
.login-card input[type=text] {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  padding: 12px 13px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.login-card input[type=password]:focus,
.login-card input[type=email]:focus,
.login-card input[type=text]:focus {
  outline: none;
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14);
}
.login-error {
  color: var(--red);
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.login-error::before {
  content: '!';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--red);
  font-size: 10px;
  flex-shrink: 0;
}


/* --- Toasts --- */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
}
.toast {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 16px;
  color: var(--paper);
  font-size: 12.5px;
  max-width: 340px;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.toast-error { border-left-color: var(--red); }
.toast.toast-success { border-left-color: var(--accent); }

/* --- Modal (replaces native confirm/prompt) --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  padding: 24px;
  animation: modal-fade-in .12s ease;
}
@keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  width: 100%;
  max-width: 380px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7);
}
.modal-title {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  color: var(--paper);
  margin-bottom: 8px;
}
.modal-message {
  font-size: 13px;
  color: var(--paper-dim);
  line-height: 1.5;
  margin-bottom: 14px;
}
.modal-input {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--paper);
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  padding: 10px 12px;
  margin-bottom: 14px;
  box-sizing: border-box;
}
.modal-input:focus { outline: none; border-color: var(--accent-dim); }
textarea.modal-input { resize: vertical; line-height: 1.5; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.modal-btn {
  border-radius: var(--radius);
  padding: 9px 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  cursor: pointer;
  border: 1px solid var(--line);
  background: none;
  color: var(--paper-dim);
}
.modal-btn:hover { color: var(--paper); border-color: var(--paper-dim); }
.modal-btn.modal-confirm { background: var(--accent-grad); color: #ffffff; border-color: var(--accent); font-weight: 500; box-shadow: 0 4px 12px -6px rgba(124, 58, 237, 0.5); }
.modal-btn.modal-confirm:hover { opacity: 0.92; }
.modal-btn.modal-confirm.danger { background: var(--red); border-color: var(--red); color: var(--ink); }

/* --- Plan / forfait picker --- */
.plan-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.plan-option {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.plan-option:has(input:checked) { border-color: var(--accent-dim); background: var(--ink); }
.plan-option input[type=radio] { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }
.plan-option-label { font-size: 13px; color: var(--paper); font-weight: 500; }
.plan-option-meta { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--paper-dim); margin-top: 2px; }
.plan-pill {
  background: var(--ink-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  color: var(--accent);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  padding: 1px 7px;
  cursor: pointer;
  vertical-align: middle;
}
.plan-pill:hover { background: rgba(124, 58, 237, 0.12); }

/* Amber rather than the plan-pill's purple — flags this as an internal
   infrastructure toggle (which AI provider answers this client), never a
   customer-facing setting like the plan. */
.provider-pill {
  background: var(--ink-2);
  border: 1px solid #d97706;
  border-radius: var(--radius);
  color: #d97706;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  padding: 1px 7px;
  cursor: pointer;
  vertical-align: middle;
}
.provider-pill:hover { background: rgba(217, 119, 6, 0.12); }

.usage-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  border: 1px solid transparent;
}
.usage-badge.usage-ok { color: var(--green); background: rgba(47, 158, 68, 0.1); border-color: rgba(47, 158, 68, 0.35); }
.usage-badge.usage-warn { color: var(--amber); background: rgba(179, 119, 29, 0.1); border-color: rgba(179, 119, 29, 0.35); }
.usage-badge.usage-danger { color: var(--red); background: rgba(192, 57, 43, 0.1); border-color: rgba(192, 57, 43, 0.35); }
.modal-btn.danger { color: var(--red); border-color: rgba(220, 90, 90, 0.4); }
.modal-btn.danger:hover { border-color: var(--red); }

/* --- Utilisation IA en barre (uniquement le tableau "Vue d'ensemble") ---
   Remplace la pastille "0%" par une barre + un chiffre tertiaire — la barre
   porte l'information, le texte n'est qu'un repere. N'affecte pas
   usage-badge (toujours utilise ailleurs : en-tete client, journal). */
.usage-bar-cell { display: flex; align-items: center; gap: 10px; }
.usage-bar-track { flex: 1; height: 5px; border-radius: 999px; background: var(--progress-track); overflow: hidden; }
.usage-bar-fill { height: 100%; border-radius: 999px; background: var(--accent); }
.usage-bar-fill.usage-warn { background: var(--amber); }
.usage-bar-fill.usage-danger { background: var(--red); }
.usage-bar-value { font-family: var(--font-mono); font-size: 11px; color: var(--paper-weak); width: 34px; text-align: right; flex: none; }

/* --- Backups page (/admin) --- */
.backups-intro { font-size: 12.5px; color: var(--paper-dim); line-height: 1.6; max-width: 640px; margin-bottom: 16px; }
.backups-list { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; max-width: 640px; }
.backup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 8px;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
}
.backup-info { display: flex; align-items: center; gap: 8px; }
.backup-date { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--paper); }
.backup-actions { display: flex; gap: 8px; }
.backup-actions .modal-btn { text-decoration: none; display: inline-block; }

/* --- Account page (/admin) --- */
/* --- Bloc "Marge minimale garantie" (Vue d'ensemble uniquement) — classes
   dediees plutot que de reutiliser .account-section/.account-hint,
   partagees avec la page Compte (hors perimetre de cette refonte) : aucun
   risque de faire bouger visuellement une page non retouchee. */
.margin-block { display: flex; gap: 28px; align-items: flex-start; }
.margin-block-text { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.margin-block-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-weak);
}
.margin-block-desc { font-size: 13.5px; line-height: 1.68; color: var(--paper-dim); max-width: 640px; margin: 0; }
.margin-block-card {
  width: 340px;
  flex: none;
  background: var(--ink-3);
  border: 1px solid #eee9e2;
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.margin-block-row { display: flex; align-items: flex-end; gap: 10px; }
.margin-block-input {
  font-family: var(--font-serif);
  font-size: 44px;
  line-height: 0.9;
  color: var(--paper);
  background: none;
  border: none;
  width: 90px;
  padding: 0;
}
.margin-block-input:focus { outline: none; }
.margin-block-suffix { font-size: 12.5px; color: var(--paper-faint); line-height: 1.3; padding-bottom: 6px; }
.margin-block-save {
  margin-left: auto;
  padding: 9px 16px;
  border-radius: 10px;
  border: none;
  background: var(--paper);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s ease;
}
.margin-block-save:hover { background: var(--accent); }
.margin-block-bar { height: 6px; border-radius: 999px; background: var(--progress-track-2); overflow: hidden; display: flex; }
.margin-block-bar-seg { height: 100%; }
.margin-block-note { font-size: 11.5px; line-height: 1.6; color: var(--paper-weak); margin: 0; }
.margin-block-note b { color: var(--accent-text); font-weight: 600; }

.account-section { max-width: 640px; margin-bottom: 28px; }
.account-section-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: 10px;
}
.account-email { font-family: 'Fraunces', serif; font-size: 18px; color: var(--paper); }
.account-hint { font-size: 12.5px; color: var(--paper); line-height: 1.6; margin: 0 0 12px; }
.admins-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.quota-ratio-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.quota-ratio-form input[type=number] {
  width: 80px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  padding: 9px 10px;
}
.quota-ratio-form input[type=number]:focus { outline: none; border-color: var(--accent-dim); }
.quota-ratio-form span { font-size: 12.5px; color: var(--paper-dim); }
.quota-ratio-form select {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--paper);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  padding: 9px 10px;
  max-width: 260px;
}
.quota-ratio-form select:focus { outline: none; border-color: var(--accent-dim); }
.quota-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 9px 14px;
  border-radius: var(--radius);
  margin: 0 24px 10px;
  border: 1px solid;
}
.quota-banner.notice { color: var(--paper-dim); background: var(--ink-2); border-color: var(--line); }
.quota-banner.warn { color: var(--amber); background: rgba(179, 119, 29, 0.1); border-color: rgba(179, 119, 29, 0.35); }
.quota-banner.blocked { color: var(--red); background: rgba(192, 57, 43, 0.1); border-color: rgba(192, 57, 43, 0.35); }
.quota-banner-text { flex: 1; }
.quota-banner-close {
  flex-shrink: 0;
  cursor: pointer;
  color: inherit;
  opacity: 0.55;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  line-height: 1;
  padding: 2px;
}
.quota-banner-close:hover { opacity: 1; }
.totp-secret {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
  word-break: break-all;
  margin-bottom: 14px;
}

/* --- Onboarding overlay (first visit) --- */
.onboarding-card { max-width: 420px; text-align: center; }
.onboarding-card .modal-title { text-align: center; }
.onboarding-card .modal-message { text-align: center; }
.onboarding-steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; text-align: left; }
.onboarding-step {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--ink);
}
.onboarding-step-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--accent);
  margin-bottom: 4px;
}
.onboarding-step-text { font-size: 12.5px; color: var(--paper-dim); line-height: 1.5; }
.onboarding-card .modal-actions { justify-content: center; }

/* --- Disclosure / doc editing bits --- */
.disclosure-note {
  font-size: 11.5px;
  font-family: var(--font-sans);
  color: #5c6b64;
  line-height: 1.65;
  padding: 13px 14px;
  border: 1px solid var(--green-border);
  border-radius: 12px;
  background: var(--green-bg);
  margin-top: auto;
}
.disclosure-note strong { color: var(--green); font-weight: 600; }
.usage-line {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--paper-min);
  margin-top: 2px;
}
.doc-card .edit {
  float: right;
  color: var(--accent-dim);
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  margin-right: 8px;
}
.doc-card .edit:hover { color: var(--accent); }

/* --- Collaborateurs (admin) : icone d'en-tete + dialog --- */
.header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.employees-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--paper-dim);
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.employees-toggle:hover { color: var(--accent); border-color: var(--accent-dim); }
.employees-toggle svg { width: 16px; height: 16px; }
.employees-toggle .badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  background: var(--accent);
  color: var(--ink);
  border-radius: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}
.employees-modal { max-width: 660px; }
.employees-modal .modal-input { margin-bottom: 10px; }
.employees-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; margin-bottom: 14px; }
.add-employee-btn {
  width: 100%;
  background: none;
  border: 1px dashed var(--line);
  color: var(--paper-dim);
  border-radius: var(--radius);
  padding: 9px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.add-employee-btn:hover { color: var(--accent); border-color: var(--accent-dim); }
.employee-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 6px;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
  font-size: 12px;
}
.employee-row .employee-name { font-weight: 500; color: var(--paper); flex-shrink: 0; min-width: 90px; }
.employee-row .employee-link {
  flex: 1;
  color: var(--accent);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.employee-row .employee-stats {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  color: var(--paper-dim);
  flex-shrink: 0;
}
.employee-row button {
  background: none;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  border-radius: var(--radius);
  padding: 3px 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  cursor: pointer;
  flex-shrink: 0;
}
.employee-row button:hover { background: rgba(124, 58, 237, 0.08); }
.employee-row .remove-employee {
  color: var(--red);
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  flex-shrink: 0;
  padding: 0 4px;
}
.employee-row .remove-employee:hover { opacity: 0.7; }

/* --- Role badge (used in employee-row and headers) --- */
.role-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  color: var(--accent);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

/* --- Checkbox row (used in the "add collaborator" dialogs) --- */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--paper-dim);
  margin-bottom: 14px;
  cursor: pointer;
}
.checkbox-row input[type=checkbox] {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* --- Team management page (/team) --- */
.team-page { padding: 24px 32px; overflow-y: auto; flex: 1; }
.team-page .employees-list { max-height: none; max-width: 760px; }
.team-page .modal-input { width: 100%; max-width: 760px; box-sizing: border-box; margin-bottom: 14px; }

/* --- Conversation list (employee view) --- */
.search-wrap { position: relative; }
.search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--paper-min);
  border-radius: 50%;
  pointer-events: none;
}
.conversation-search {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 10px 12px 10px 32px;
  box-sizing: border-box;
  margin-bottom: 0;
}
.conversation-search::placeholder { color: var(--paper-min); }
.conversation-search:focus { outline: none; border-color: var(--accent-border-2); }
.conversation-item {
  position: relative;
  padding: 10px 26px 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  background: none;
  border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.conversation-item:hover { background: var(--hover-row); }
.conversation-item.active {
  background: var(--ink);
  border-color: #e4dff8;
  box-shadow: var(--shadow-soft);
}
.conversation-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.conversation-item .title {
  font-size: 13px;
  font-weight: 500;
  color: var(--paper);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conversation-item:not(.active) .title { color: var(--paper-dim); font-weight: 400; }
.conversation-item .updated {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--paper-min-2);
  margin-top: 3px;
}
.conversation-item:not(.active) .updated { color: var(--paper-min); }
.conversation-item .remove-conversation {
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--paper-min);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, color .12s ease;
}
.conversation-item:hover .remove-conversation { opacity: 1; }
.conversation-item .remove-conversation:hover { color: var(--red); }

/* --- Mobile (admin/employee/team app shells) -------------------------------
   Below 768px, the sidebar (conversation/client list + nav) becomes an
   off-canvas drawer instead of a permanent 260px column — there isn't
   room for both it and the main content on a phone. The toggle button and
   backdrop are injected once into <body> by ui.js's initMobileSidebar(),
   not templated per-view, since #app's content (and therefore any
   in-template button) gets fully replaced on every render() call. */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 60;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--paper);
  font-size: 17px;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(23, 21, 34, 0.35);
  z-index: 45;
}
.sidebar-backdrop.open { display: block; }

@media (max-width: 768px) {
  .sidebar-toggle { display: flex; }
  .app { position: relative; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    max-width: 82vw;
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 50;
  }
  .sidebar.open { transform: translateX(0); }
  .main { width: 100%; padding-top: 46px; }
  .header { padding-left: 20px; }
  .body-grid,
  .body-grid.single-col { grid-template-columns: 1fr; }
  .body-grid.single-col .vault-col { max-width: 100%; }
  .chat-col { border-right: none; border-bottom: 1px solid var(--line); }
  .vault-col { max-height: 46vh; }
}