:root {
  --ink: #17201e;
  --muted: #687570;
  --faint: #f3f5f3;
  --line: #e1e8e4;
  --paper: #fbfcfa;
  --forest: #173e35;
}
* {
  box-sizing: border-box;
}
html {
  /* Équivalent d'un zoom navigateur à 120% — tout le monde n'a pas
     Chrome réglé à ce niveau par défaut, donc on l'intègre à la page. */
  zoom: 120%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
}
button,
input {
  font: inherit;
}
button {
  cursor: pointer;
}
.shell {
  min-height: 100vh;
  display: flex;
  background: var(--paper);
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 250px;
  background: #f5f7f4;
  border-right: 1px solid var(--line);
  padding: 18px 15px 14px;
  display: flex;
  flex-direction: column;
  z-index: 20;
  overflow-y: auto;
}
.brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 16px;
}
.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--forest);
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 700;
}
.brand-name {
  font-size: 13px;
  font-weight: 700;
}
.brand-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}
.mobile-close,
.mobile-menu {
  display: none;
  background: none;
  border: 0;
  color: var(--ink);
}
.phase-card {
  padding: 10px 12px 9px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 14px;
  box-shadow: 0 3px 12px #23352b08;
}
.phase-top {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--forest);
  font-size: 11px;
  font-weight: 700;
}
.phase-top button {
  margin-left: auto;
  color: #7e8c86;
  padding: 2px;
  border: 0;
  background: none;
}
.status-dot,
.sync-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #48a87d;
  display: inline-block;
  box-shadow: 0 0 0 3px #48a87d1e;
}
.phase-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  margin: 6px 0 5px;
}
.phase-date {
  color: #84918c;
}
.progress,
.mini-progress {
  height: 4px;
  overflow: hidden;
  background: #e8ece8;
  border-radius: 10px;
}
.progress span,
.mini-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #65b58d;
}
.nav-list {
  display: grid;
  gap: 2px;
}
.nav-item {
  border: 0;
  background: transparent;
  color: #687570;
  min-height: 33px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-radius: 9px;
  padding: 0 12px;
  width: 100%;
  text-align: left;
  font-size: 13px;
}
.nav-item:hover {
  color: var(--forest);
  background: #e9efea;
}
.nav-active {
  color: var(--forest);
  background: #e0ece5;
  font-weight: 700;
}
.nav-count {
  margin-left: auto;
  font-size: 11px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #f3c36e;
  color: #533a10;
}
.sidebar-bottom {
  margin-top: auto;
  display: grid;
  gap: 2px;
}
.user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding: 9px 9px 0;
}
.avatar,
.top-avatar {
  display: grid;
  place-items: center;
  background: #ead7c9;
  color: #704a38;
  font-size: 10px;
  font-weight: 800;
  border-radius: 50%;
}
.avatar {
  width: 28px;
  height: 28px;
}
.top-avatar {
  width: 29px;
  height: 29px;
}
.user-name {
  font-size: 11px;
  font-weight: 700;
}
.user-role {
  color: var(--muted);
  font-size: 10px;
  margin-top: 2px;
}
.muted-icon {
  margin-left: auto;
  color: #91a09a;
}
/* Le bouton de déconnexion est maintenant un <form>/<button> (CSRF) et
   non plus un <a> directement enfant de .user-chip : c'est le form qui doit
   porter le margin-left:auto pour rester collé à droite. */
.user-chip form {
  margin-left: auto;
}
.content {
  margin-left: 250px;
  width: calc(100% - 250px);
  min-height: 100vh;
}
.topbar {
  height: 72px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px, 4vw, 62px);
  background: #fbfcfae8;
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #8a9690;
  font-size: 12px;
}
.breadcrumbs strong {
  color: var(--ink);
  font-weight: 700;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 17px;
}
.sync-label {
  color: #86928d;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.icon-button {
  position: relative;
  border: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #74817b;
  background: transparent;
  border-radius: 8px;
}
.icon-button:hover {
  background: #eef2ef;
  color: var(--forest);
}
.notification-dot {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 5px;
  height: 5px;
  background: #dc725e;
  border-radius: 50%;
}
.subtle {
  width: 28px;
  height: 28px;
}
.page-wrap {
  max-width: 1420px;
  padding: 46px clamp(24px, 4vw, 62px) 70px;
  margin: 0 auto;
}
.hero-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
}
.eyebrow {
  color: #86928d;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}
.hero-row h1 {
  font-family: Georgia, serif;
  font-size: clamp(31px, 3vw, 43px);
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin: 11px 0 7px;
  font-weight: 600;
}
.accent-dot {
  color: #e1a83f;
}
.lede {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}
.hero-actions {
  display: flex;
  gap: 9px;
  padding-bottom: 2px;
}
.button {
  border: 0;
  border-radius: 9px;
  padding: 10px 13px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  white-space: nowrap;
  justify-content: center;
  text-decoration: none;
}
.button-dark {
  background: var(--forest);
  color: #fff;
  box-shadow: 0 4px 10px #173e3518;
}
.button-dark:hover {
  background: #24574b;
  color: #fff;
  text-decoration: none;
}
.button-light {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}
.button-light:hover {
  border-color: #a9b9b0;
}
.button-outline {
  border: 1px solid #cad8d0;
  background: transparent;
  color: var(--forest);
}
.full {
  width: 100%;
  justify-content: center;
}
.button-count {
  background: #ffffff22;
  border-radius: 9px;
  padding: 2px 6px;
  font-size: 10px;
}
.text-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #53776a;
  font-size: 11px;
  font-weight: 700;
  border: 0;
  background: none;
  padding: 4px 0;
}
.text-button:hover {
  color: var(--forest);
}
.mode-banner {
  margin-top: 33px;
  border: 1px solid #c8dfd4;
  background: #edf7f2;
  border-radius: 12px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.mode-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #d7eee4;
  color: #26725c;
}
.mode-banner > div:nth-child(2) {
  display: grid;
  gap: 3px;
}
.mode-banner strong {
  font-size: 12px;
}
.mode-banner span {
  color: #628074;
  font-size: 11px;
}
.mode-banner button {
  margin-left: auto;
  border: 0;
  background: none;
  color: #367360;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 17px;
}
.metric-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 17px;
  min-height: 132px;
  box-shadow: 0 3px 15px #23352b06;
}
.metric-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  margin-bottom: 12px;
}
.metric-navy {
  color: #36675a;
  background: #e8f3ee;
}
.metric-teal {
  color: #2e8171;
  background: #e2f5f0;
}
.metric-amber {
  color: #9d6a22;
  background: #fbf0d9;
}
.metric-violet {
  color: #675994;
  background: #eeecfb;
}
.metric-red {
  color: #a55347;
  background: #fbe5e1;
}
.metric-label {
  color: var(--muted);
  font-size: 11px;
}
.metric-value {
  font-family: Georgia, serif;
  font-size: 22px;
  margin-top: 4px;
  letter-spacing: -0.02em;
}
.metric-detail {
  color: #89958f;
  font-size: 10px;
  margin-top: 5px;
}
.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.8fr);
  gap: 38px;
  margin-top: 38px;
}
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin: 31px 0 14px;
}
.section-title:first-child {
  margin-top: 0;
}
.section-title h2 {
  font-family: Georgia, serif;
  font-weight: 600;
  font-size: 23px;
  letter-spacing: -0.03em;
  margin: 6px 0 0;
}
.task-stack,
.task-list-wide {
  display: grid;
  gap: 8px;
}
.task-card {
  display: flex;
  gap: 13px;
  padding: 15px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
}
.task-card:hover {
  border-color: #b2c8bb;
  box-shadow: 0 5px 20px #23352b08;
}
.task-marker {
  width: 6px;
  border-radius: 7px;
  background: #e7ece9;
  flex: 0 0 6px;
}
.marker-red {
  background: #e78070;
}
.marker-amber {
  background: #edbf63;
}
.task-body {
  min-width: 0;
  width: 100%;
}
.task-top,
.task-bottom,
.deadline-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.task-kind {
  color: #87948e;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 9px;
  font-weight: 700;
}
.task-card h3 {
  margin: 8px 0 4px;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.task-card p {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
}
.task-bottom {
  margin-top: 15px;
}
.owner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #829089;
  font-size: 10px;
}
.small-button {
  border: 0;
  background: transparent;
  color: #4c7566;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 4px 0;
}
.small-button:hover {
  color: #173e35;
}
.pill {
  padding: 4px 7px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  /* Sans ceci, une pastille placée directement comme élément de grille (ex.
     .doc-row) s'étire par défaut pour remplir toute la largeur de sa colonne
     (justify-items normal = stretch) — le fond de la pastille devient alors
     bien plus large que son texte ("Accepté", "TVA : confirmée"), gaspillant
     de la place et resserrant les colonnes suivantes. Remonté par Elena
     (2026-09-26). Sans effet hors grille (flex/bloc normal). */
  justify-self: start;
}
.pill-amber {
  background: #fff1d4;
  color: #996519;
}
.pill-green {
  background: #e1f4ea;
  color: #2b7655;
}
.pill-blue {
  background: #e3effb;
  color: #3d6d9f;
}
.pill-violet {
  background: #efecfb;
  color: #665b96;
}
.pill-slate {
  background: #edf1ef;
  color: #6d7d75;
}
.pill-red {
  background: #fbe5e1;
  color: #a55347;
}
.doc-table {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow-x: auto;
  overflow-y: hidden;
}
.doc-row {
  display: grid;
  grid-template-columns: 32px minmax(150px, 1fr) 90px auto minmax(150px, auto);
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid #edf1ee;
}
/* Variante pour les lignes qui n'ont QUE du texte + des actions — sans
   file-icon, doc-amount ni doc-badges (ledger/settlements.php,
   cfe/index.php, cfe/assessments.php, tva/ca3/show.php). Sans cette
   variante, la grille à 5 colonnes ci-dessus (pensée pour file-icon +
   doc-info + doc-amount + doc-badges + doc-actions) plaçait .doc-info,
   faute d'icône, dans la 1re colonne — 32px, fixe, pensée pour une icône —
   par auto-placement de grille ; le texte du règlement/de l'avis débordait
   alors visuellement de cette colonne et chevauchait .doc-actions, placé
   juste après lui à une position fixe qui ne tient pas compte de ce
   débordement. Chevauchement remonté par Elena (2026-09-29, capture
   d'écran de /ledger/settlements.php — la ligne d'édition d'un règlement
   recouvrait le libellé "CB personnelle · Président" à sa gauche). Toute
   nouvelle ligne de ce type (juste .doc-info + .doc-actions, sans icône)
   doit utiliser `class="doc-row doc-row--simple"`, jamais `.doc-row` seul. */
.doc-row--simple {
  grid-template-columns: minmax(150px, 1fr) minmax(150px, auto);
}
.doc-row:last-child {
  border-bottom: 0;
}
.file-icon {
  width: 29px;
  height: 29px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #668274;
  background: #eaf2ee;
}
.doc-info {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.doc-info strong {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-info span {
  color: #8a9690;
  font-size: 10px;
}
.doc-amount {
  color: #4e5f58;
  font-size: 11px;
  text-align: right;
}
/* Regroupe toutes les pastilles d'une ligne (acceptation + TVA sur
   ledger/index.php) dans UN SEUL élément de grille, quel que soit leur
   nombre (1 ou 2) — évite que `.doc-row` ait, selon les lignes, un nombre
   d'éléments différent du nombre de colonnes définies (bug remonté par
   Elena, 2026-09-26 : la 2e pastille volait la colonne des actions,
   rejetée sur une ligne implicite étroite). `flex-wrap` reste en secours
   si les deux textes ne tenaient vraiment pas, mais `justify-self: start`
   (comme .pill) l'empêche de s'étirer inutilement. */
.doc-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  justify-self: start;
}
.doc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: end;
  gap: 6px 8px;
}

/* Imports Wise/PayPal : la ligne visible et le formulaire de rapprochement
   sont deux niveaux distincts. Le formulaire ne doit jamais être enfermé
   dans la dernière colonne de la grille (ce qui produisait une colonne
   géante, un défilement horizontal et des champs tronqués). */
.external-record-row {
  display: block;
  position: relative;
  padding: 0;
}
.external-record-main {
  display: grid;
  grid-template-columns: 34px minmax(200px, 420px) 90px auto minmax(170px, 1fr);
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
}
.external-record-row .reconcile-summary {
  position: absolute;
  top: 14px;
  right: 16px;
}
.external-record-row .reconcile-panel {
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0 16px 14px;
  text-align: left;
}
.reconcile-summary {
  cursor: pointer;
}
.reconcile-panel .button {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}
/* Sous ~1180px (ce qui, avec le zoom:120% de la page, couvre déjà pas mal
   de fenêtres de bureau non maximisées — pas seulement les tablettes), la
   ligne à colonnes fixes n'a plus la place pour justificatif+décision sur
   une seule ligne : on repasse sur la disposition compacte (pastille +
   actions sur leur propre ligne) plutôt que de les laisser se chevaucher
   ou disparaître dans un défilement horizontal peu visible. Volontairement
   séparé du @media 760px ci-dessous, qui réduit aussi le menu latéral —
   un changement qu'on ne veut pas déclencher ici. */
@media (max-width: 1180px) {
  .doc-row,
  .doc-table-full .doc-row {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 8px;
  }
  .doc-amount {
    display: none;
  }
  .doc-row > .pill,
  .doc-row > .doc-badges {
    grid-column: 2;
    justify-self: start;
  }
  .doc-actions {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .external-record-main {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 8px;
  }
  .external-record-main .doc-amount {
    display: none;
  }
  .external-record-main > .doc-badges {
    grid-column: 2;
    justify-self: start;
  }
  /* .doc-row--simple n'a pas d'icône ni de colonne d'actions fixe à
     réserver en dessous de ~1180px — empile simplement info puis actions,
     chacune prenant toute la largeur disponible. */
  .doc-row--simple {
    grid-template-columns: minmax(0, 1fr);
  }
}
.right-column {
  display: grid;
  align-content: start;
  gap: 12px;
}
.side-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 13px;
  padding: 17px;
}
.side-card-head,
.integrity-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.side-card h3 {
  font-size: 14px;
  margin: 6px 0 0;
}
.side-icon {
  color: #6e8d80;
}
.deadline-date {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 13px;
}
.deadline-date strong {
  font-family: Georgia, serif;
  font-size: 39px;
  line-height: 1;
  font-weight: 500;
}
.deadline-date span {
  font-size: 10px;
  color: #73827a;
  letter-spacing: 0.08em;
  line-height: 1.4;
}
.mini-progress {
  margin-top: 14px;
  height: 5px;
}
.mini-progress span {
  background: #e2b457;
}
.side-note {
  color: #7d8b85;
  font-size: 10px;
  line-height: 1.5;
  margin: 13px 0 14px;
}
.integrity-card {
  background: #f0f8f3;
  border-color: #d8e9df;
}
.integrity-check {
  width: 33px;
  height: 33px;
  color: #328161;
  background: #d8efdf;
  border-radius: 9px;
  display: grid;
  place-items: center;
}
.integrity-card h3 {
  margin-top: 5px;
}
.integrity-list {
  margin: 17px 0 15px;
  display: grid;
  gap: 10px;
}
.integrity-list > div {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #668077;
  font-size: 10px;
}
.check-dot {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: #388263;
  background: #d7eddf;
  border-radius: 50%;
}
.list-value {
  margin-left: auto;
  color: #4e6e61;
  font-weight: 700;
}
.quick-links {
  padding: 7px 2px;
  display: grid;
  gap: 2px;
}
.quick-links .eyebrow {
  margin: 0 10px 5px;
}
.quick-links a,
.quick-links button {
  color: #62776e;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  font-size: 11px;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  border-radius: 8px;
}
.quick-links a:hover,
.quick-links button:hover {
  background: #edf2ee;
  color: var(--forest);
}
.quick-links a svg:last-child,
.quick-links button svg:last-child {
  margin-left: auto;
}
.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 15px;
  color: #245d49;
  border: 1px solid #c6e4d3;
  background: #edf9f1;
  border-radius: 10px;
  box-shadow: 0 10px 25px #163f2a1a;
  font-size: 12px;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #12231e55;
  display: grid;
  place-items: center;
  padding: 20px;
}
.upload-modal {
  width: min(500px, 100%);
  background: #fff;
  border-radius: 17px;
  padding: 22px;
  box-shadow: 0 25px 70px #132b2240;
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.modal-head h3 {
  font-family: Georgia, serif;
  font-size: 24px;
  margin: 5px 0 20px;
}
.dropzone {
  min-height: 240px;
  border: 1.5px dashed #a8c8b8;
  border-radius: 13px;
  background: #f3faf6;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  gap: 10px;
  color: #5c786d;
}
.dropzone strong {
  color: var(--ink);
  font-size: 13px;
}
.dropzone span {
  color: #799086;
  font-size: 11px;
}
.security-note {
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #85938c;
  font-size: 10px;
}
.view-intro {
  color: var(--muted);
  font-size: 12px;
  max-width: 720px;
  margin: -4px 0 20px;
}
.filter-row,
.documents-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 13px;
}
.filter-chip,
.filter-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 7px;
  color: #728078;
  font-size: 10px;
}
.filter-chip span {
  padding: 2px 5px;
  border-radius: 5px;
  background: #edf1ee;
}
.filter-chip.active {
  border-color: #9cbcac;
  color: #285c4a;
  background: #eff8f2;
  font-weight: 700;
}
.filter-button {
  margin-left: auto;
}
.filter-row .filter-button {
  margin-left: auto;
}
.search-box {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  background: #fff;
  height: 35px;
  padding: 0 10px;
  border-radius: 7px;
  width: min(370px, 100%);
  color: #89958f;
}
.search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  font-size: 11px;
  color: var(--ink);
}
.documents-toolbar .filter-button {
  margin-left: 0;
}
.documents-toolbar .filter-button:last-child {
  margin-left: auto;
}
.document-stats {
  display: flex;
  gap: 8px;
  margin: 22px 0 14px;
}
.document-stats > div {
  display: flex;
  gap: 6px;
  align-items: baseline;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9px;
  padding: 9px 12px;
  color: #7a8981;
  font-size: 10px;
}
.stat-number {
  color: var(--forest);
  font-weight: 700;
  font-size: 16px;
}
.stat-number.warning {
  color: #b17823;
}
.doc-table-full .doc-row {
  /* Colonne info plafonnée (au lieu d'un `1fr` sans limite) : sur un écran
     large, un nom de contrepartie court n'a plus besoin d'étirer sa colonne
     jusqu'à repousser le montant très loin à droite avec un grand vide entre
     les deux (remonté par Elena, 2026-09-26). Colonne montant resserrée et
     colonne des pastilles passée en largeur automatique (elle contient
     1 à 2 pastilles désormais toujours regroupées dans .doc-badges, voir
     plus haut) plutôt qu'une largeur fixe pensée pour une seule pastille. */
  grid-template-columns: 34px minmax(200px, 420px) 90px auto minmax(170px, 1fr);
  padding: 14px 16px;
}
.ledger-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #d4e7dc;
  background: #f0f8f3;
  padding: 15px 17px;
  border-radius: 12px;
}
.ledger-status {
  display: flex;
  gap: 10px;
  align-items: center;
}
.ledger-status-icon {
  color: #368264;
}
.ledger-status strong,
.ledger-status span {
  display: block;
}
.ledger-status strong {
  font-size: 12px;
}
.ledger-status span {
  color: #769084;
  font-size: 10px;
  margin-top: 3px;
}
.ledger-actions {
  display: flex;
  gap: 8px;
}
.journal-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  margin-top: 25px;
}
.journal-tabs span {
  padding: 10px 13px;
  color: #829089;
  font-size: 11px;
}
.journal-tabs .journal-active {
  color: var(--forest);
  border-bottom: 2px solid #4e9077;
  font-weight: 700;
}
.journal-tabs em {
  font-style: normal;
  font-size: 9px;
  background: #edf1ee;
  padding: 2px 5px;
  border-radius: 5px;
  margin-left: 4px;
}
.ledger-table {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 14px;
}
.ledger-header,
.ledger-row {
  display: grid;
  grid-template-columns: 110px 150px 1.2fr 1.1fr 100px;
  gap: 15px;
  padding: 13px 15px;
  align-items: center;
}
.ledger-header {
  background: #f6f8f6;
  color: #85928c;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 9px;
}
.ledger-row {
  border-top: 1px solid #edf1ee;
  color: #708078;
  font-size: 11px;
}
.ledger-row strong {
  color: #31594c;
}
.align-right {
  text-align: right;
}
.accounting-note,
.audit-banner,
.obligation-hero {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e5d9b9;
  background: #fff9eb;
  border-radius: 11px;
  padding: 13px 15px;
  margin-top: 15px;
  color: #87672f;
}
.accounting-note > div,
.audit-banner > div,
.obligation-hero > div:nth-child(2) {
  display: grid;
  gap: 3px;
}
.accounting-note strong,
.audit-banner strong,
.obligation-hero strong {
  color: #5e4923;
  font-size: 11px;
}
.accounting-note span,
.audit-banner span,
.obligation-hero span {
  color: #90784a;
  font-size: 10px;
}
.accounting-note .small-button {
  margin-left: auto;
}
.obligation-hero {
  border-color: #c8dfd4;
  background: #edf7f2;
  color: #2d7c5f;
}
.obligation-hero strong {
  color: #285e4d;
}
.obligation-hero span {
  color: #678578;
}
.obligation-hero .pill {
  margin-left: auto;
}
.obligations-list {
  display: grid;
  margin-top: 19px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.obligation-row {
  display: grid;
  grid-template-columns: 90px 1fr 30px;
  gap: 16px;
  align-items: center;
  padding: 17px;
  border-bottom: 1px solid #edf1ee;
}
.obligation-row:last-child {
  border-bottom: 0;
}
.obligation-date strong,
.obligation-date span {
  display: block;
}
.obligation-date strong {
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 500;
}
.obligation-date span {
  color: #819088;
  font-size: 10px;
  margin-top: 2px;
}
.obligation-main > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.obligation-main strong {
  font-size: 12px;
}
.obligation-main > span {
  display: block;
  color: #7d8a84;
  font-size: 10px;
  margin-top: 5px;
}
.official-channels {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 13px;
  margin-top: 24px;
  padding: 18px;
}
.official-channels h3 {
  font-family: Georgia, serif;
  font-size: 20px;
  margin: 7px 0 6px;
}
.official-channels p {
  max-width: 720px;
  color: #718078;
  font-size: 11px;
  line-height: 1.55;
  margin: 0;
}
.channel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 17px;
}
.channel-grid > div {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 2px 7px;
  padding: 11px;
  border: 1px solid #e8eeea;
  border-radius: 9px;
}
.channel-grid svg {
  grid-row: span 2;
  color: #588776;
}
.channel-grid strong {
  font-size: 10px;
}
.channel-grid span {
  color: #85938c;
  font-size: 9px;
}
.audit-banner {
  border-color: #d3e3ec;
  background: #eff7fb;
  color: #44708a;
}
.audit-banner strong {
  color: #365d70;
}
.audit-banner span {
  color: #648394;
}
.audit-banner .pill {
  margin-left: auto;
}
.audit-list {
  display: grid;
  margin-top: 19px;
  border-left: 1px solid #d8e2dc;
  margin-left: 8px;
}
.audit-row {
  display: flex;
  gap: 14px;
  position: relative;
  padding: 14px 10px 14px 21px;
  border-bottom: 1px solid #edf1ee;
}
.audit-dot {
  position: absolute;
  left: -5px;
  top: 21px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: #67a88c;
  box-shadow: 0 0 0 1px #82b6a0;
}
.audit-content {
  flex: 1;
}
.audit-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.audit-top strong {
  font-size: 12px;
}
.audit-top span {
  color: #87948e;
  font-size: 10px;
}
.audit-meta {
  display: flex;
  gap: 11px;
  margin-top: 6px;
  color: #87948e;
  font-size: 10px;
}
.audit-meta span:last-child {
  color: #60786e;
}
.empty-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #6f887c;
  padding: 50px 20px;
  border: 1px dashed #c9d9cf;
  border-radius: 12px;
  background: #f6fbf7;
}
.empty-state strong {
  color: var(--ink);
  font-size: 13px;
}
.empty-state span {
  color: #84938b;
  font-size: 11px;
}
@media (max-width: 1050px) {
  .content-grid {
    grid-template-columns: 1fr;
  }
  .right-column {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
  .quick-links {
    grid-column: 1/-1;
  }
  .metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 760px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 15px 0 35px #173e3526;
  }
  .sidebar-open {
    transform: translateX(0);
  }
  .mobile-close {
    display: block;
    margin-left: auto;
  }
  .content {
    margin-left: 0;
    width: 100%;
  }
  .topbar {
    padding: 0 18px;
    height: 62px;
  }
  .mobile-menu {
    display: grid;
    place-items: center;
    margin-right: 10px;
  }
  .breadcrumbs {
    margin-right: auto;
  }
  .sync-label {
    display: none;
  }
  .page-wrap {
    padding: 30px 18px 55px;
  }
  .hero-row {
    align-items: start;
    flex-direction: column;
  }
  .hero-actions {
    width: 100%;
  }
  .hero-actions .button {
    flex: 1;
    justify-content: center;
  }
  .metric-grid {
    gap: 8px;
  }
  .metric-card {
    padding: 13px;
    min-height: 120px;
  }
  .metric-value {
    font-size: 19px;
  }
  .content-grid {
    margin-top: 30px;
  }
  .right-column {
    grid-template-columns: 1fr;
  }
  .doc-row,
  .doc-table-full .doc-row {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 8px;
  }
  .doc-amount {
    display: none;
  }
  .doc-row > .pill,
  .doc-row > .doc-badges {
    grid-column: 2;
    justify-self: start;
  }
  .doc-actions {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .documents-toolbar {
    flex-wrap: wrap;
  }
  .search-box {
    width: 100%;
  }
  .documents-toolbar .filter-button:last-child {
    margin-left: 0;
  }
  .document-stats {
    overflow-x: auto;
  }
  .document-stats > div {
    white-space: nowrap;
  }
  .ledger-summary {
    display: grid;
    gap: 14px;
  }
  .ledger-actions {
    flex-wrap: wrap;
  }
  .ledger-header,
  .ledger-row {
    grid-template-columns: 82px 110px 1fr 80px;
    gap: 8px;
  }
  .ledger-header span:nth-child(4),
  .ledger-row span:nth-child(4) {
    display: none;
  }
  .ledger-header,
  .ledger-row {
    font-size: 9px;
  }
  .ledger-row {
    font-size: 10px;
  }
  .channel-grid {
    grid-template-columns: 1fr;
  }
  .obligation-row {
    grid-template-columns: 68px 1fr 24px;
    gap: 10px;
    padding: 14px 11px;
  }
  .obligation-date strong {
    font-size: 18px;
  }
  .section-title h2 {
    font-size: 21px;
  }
}

/* Champs de formulaire — absents de la maquette d'origine (qui s'appuyait sur
   les composants shadcn/Tailwind, non repris ici). Mêmes tokens de couleur. */
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 24px;
  max-width: 640px;
  margin-top: 20px;
}
/* Variante pour les cartes qui affichent un tableau de données plutôt
   qu'un formulaire de saisie — les 640px pensés pour un formulaire
   coupaient inutilement les tableaux larges (/tva/rules.php, retour
   d'Elena) alors que la page laissait de la place disponible. */
.form-card--wide {
  max-width: none;
}
.field {
  margin-bottom: 16px;
}
.field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.field-row {
  display: flex;
  gap: 14px;
}
.field-row > .field {
  flex: 1;
}
.field input[type="text"],
.field input[type="date"],
.field input[type="email"],
.field input[type="password"],
.field input[type="file"],
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 13px;
  color: var(--ink);
  background: var(--paper);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid #a9c9bb;
  outline-offset: 1px;
  border-color: var(--forest);
}
.field textarea {
  resize: vertical;
  min-height: 64px;
}
.field-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.field-check input {
  width: auto;
}
.field-check label {
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
}
.field-hint {
  color: var(--muted);
  font-size: 11px;
  margin-top: 4px;
  margin-bottom: 14px;
}
/* Édition compacte EN LIGNE, dans une .doc-row/.doc-actions plutôt qu'un
   formulaire pleine largeur (ledger/settlements.php : modifier un règlement
   sans quitter sa ligne ; obligations/index.php : confirmer une date sans
   ouvrir l'écran d'édition) — mêmes tokens que .field input, sans le
   label/la marge verticale d'un champ de formulaire classique, pour tenir
   sur une seule ligne. Remonté par Elena (2026-09-29) : plusieurs de ces
   inputs ponctuels retombaient sur `style="width:...px"`/`style="padding:
   ...px"` ad hoc, sans bordure/fond/police du système de design — donc
   visuellement « à l'ancienne » (chrome par défaut du navigateur) à côté
   d'un `.field` normal sur la même page. Toute nouvelle édition en ligne
   doit utiliser cette classe plutôt que du style ad hoc. */
.inline-field {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 12px;
  color: var(--ink);
  background: var(--paper);
}
.inline-field:focus {
  outline: 2px solid #a9c9bb;
  outline-offset: 1px;
  border-color: var(--forest);
}
.form-errors {
  background: #fbe5e1;
  color: #a55347;
  border-radius: 9px;
  padding: 11px 14px;
  margin-bottom: 16px;
  font-size: 12px;
}
.form-errors ul {
  margin: 0;
  padding-left: 18px;
}
.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--paper);
}
.auth-card {
  width: min(380px, 92vw);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 30px 28px;
  box-shadow: 0 15px 45px #23352b0f;
}
.auth-card .brand-row {
  padding: 0 0 22px;
}
.auth-card h1 {
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}
.auth-error {
  background: #fbe5e1;
  color: #a55347;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 12px;
  margin-bottom: 14px;
}
.auth-note {
  color: var(--muted);
  font-size: 11px;
  margin-top: 16px;
  text-align: center;
}

/* 7.23.0 — barre latérale par groupes de tâches (natif <details>, sans JavaScript : la CSP du site l'interdit) */
.nav-group { margin-top: 10px; }
.nav-group > summary {
  list-style: none;
  cursor: pointer;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a9892;
  font-weight: 700;
  padding: 4px 12px 4px;
  user-select: none;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after { content: "▾"; float: right; opacity: .6; }
.nav-group:not([open]) > summary::after { content: "▸"; }
.nav-group > summary:hover { color: var(--forest); }

/* 7.23.0 — parcours guidé : étapes + « Que faire ensuite ? » + en-tête de contexte */
.flow-stepper { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.flow-step { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #687570; }
.flow-step + .flow-step::before { content: "→"; color: #b4beb9; margin-right: 2px; }
.flow-step-dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #e9efea; color: #687570; }
.flow-step-done .flow-step-dot { background: #2f6b4f; color: #fff; }
.flow-step-current { color: var(--forest); font-weight: 700; }
.flow-step-current .flow-step-dot { background: var(--forest); color: #fff; }
.next-action { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 16px 18px; margin: 0 0 16px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.next-action-text { flex: 1 1 320px; }
.next-action-text strong { display: block; font-size: 15px; margin-bottom: 4px; }
.next-action-text span { color: #687570; font-size: 13px; line-height: 1.45; }
.next-action-done { background: #eef6f1; border-color: #cfe3d6; }
.next-action-alert { background: #fdf3e4; border-color: #f0d9ae; }
.next-action-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.context-header { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 12px 16px; margin: 0 0 14px; display: flex; gap: 10px 22px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.context-header strong { font-size: 14px; }
.context-header .context-links { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; }
.flash-ok { background: #eef6f1; border: 1px solid #cfe3d6; border-radius: 12px; padding: 10px 14px; margin: 0 0 14px; font-size: 13px; color: var(--forest); font-weight: 700; }
.tva-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; }
.tva-tabs a { padding: 6px 12px; border-radius: 9px; font-size: 13px; color: #687570; border: 1px solid var(--line); background: #fff; }
.tva-tabs a.tab-active { background: #e0ece5; color: var(--forest); font-weight: 700; border-color: #cfe3d6; }

/* 7.23.1 — menu mobile sans JavaScript */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.nav-burger { white-space: nowrap; display: none; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--forest); padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; margin-right: 10px; }
.mobile-close { cursor: pointer; font-size: 18px; color: #687570; padding: 0 6px; }
@media (max-width: 760px) {
  .nav-burger { display: inline-flex; }
  .nav-toggle:checked ~ .sidebar { transform: translateX(0); }
  .topbar { gap: 8px; }
}

/* Documents / Décisions (B1/B2) : lien de titre dans une ligne de liste — sobre, souligné au survol */
.doc-info strong a {
  color: inherit;
  text-decoration: none;
}
.doc-info strong a:hover {
  text-decoration: underline;
}

/* 7.27 — Actes de société : texte courant aux mêmes tailles que les autres pages (le corps de page est à 15px ; les listes et
   paragraphes nus de l'écran d'un acte paraissaient donc plus grands). Les champs d'une même ligne sont alignés sur leur bas
   même quand un libellé passe sur deux lignes. */
.act-card p,
.act-card li {
  font-size: 12px;
  line-height: 1.6;
}
.act-card ul {
  margin: 6px 0 14px;
  padding-left: 18px;
}
.act-card h3 {
  font-size: 14px;
  margin: 18px 0 6px;
}
.act-card h3:first-child {
  margin-top: 0;
}
.act-card .field-row {
  align-items: flex-end;
  flex-wrap: wrap;
}
.act-card .field-row > .field {
  min-width: 180px;
}

/* 7.28 — Gouvernance : panneau d'état (mêmes tailles de texte que le reste de l'application) */
.gov-title {
  font-size: 13px;
  margin: 24px 0 8px;
}
.gov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.gov-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 14px 16px;
  box-shadow: 0 3px 15px #23352b06;
}
.gov-label {
  color: #86928d;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}
.gov-value {
  font-size: 13px;
  font-weight: 700;
  margin: 6px 0 4px;
}
.gov-detail {
  color: #6d7d75;
  font-size: 11px;
  line-height: 1.6;
}
.gov-ok {
  font-size: 12px;
  margin: 6px 0;
}
.gov-same {
  font-size: 12px;
  margin: 0 0 10px;
}

/* 7.28.2 — `.doc-row--simple` à l'intérieur de `.doc-table-full` : la règle `.doc-table-full .doc-row` (5 colonnes, 1re = 34 px pour l'icône) l'emportait
   et enfermait le texte dans 34 px (lignes de Gouvernance, du registre légal…). Deux colonnes : texte pleine largeur + actions. */
.doc-table-full .doc-row--simple {
  grid-template-columns: minmax(0, 1fr) auto;
}
/* 7.28.3 — « Lu dans le document » (suggestions issues du texte du PDF) */
.act-read {
  background: #f4f8f6;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 14px;
  font-size: 12px;
}
.act-read ul {
  margin: 6px 0;
  padding-left: 18px;
}

/* 7.29.1 : fiche de déclaration CA3 (imprimable) */
.ca3-sheet-table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.ca3-sheet-table th, .ca3-sheet-table td { text-align: left; padding: 9px 8px; border-bottom: 1px solid #e3e0d8; }
.ca3-sheet-table .ca3-tick { width: 32px; font-size: 18px; }
.ca3-sheet-table .ca3-amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media print {
    .sidebar, .topbar, .no-print { display: none !important; }
    .shell { display: block !important; }
    .ca3-sheet { border: 0 !important; box-shadow: none !important; }
}