:root {
  --nav: #102333;
  --nav-2: #18364c;
  --paper: #fbfaf7;
  --surface: #ffffff;
  --line: #e2ddd4;
  --text: #17202e;
  --muted: #647083;
  --copper: #aa5824;
  --copper-dark: #8d4217;
  /* Tokens de statut au CANON §8.3, valeurs vérifiées AA (4,5:1) sur fond clair (§8.4).
     Les anciennes teintes (#1f8a5b / #c27b20) dérivaient du canon et échouaient l'AA sur
     le texte de statut (vert 4,33:1, ambre 3,42:1) ; le canon passe (vert 5,69:1, ambre 5,43:1). */
  --green: #067647;
  --red: #c53b28;
  --amber: #b54708;
  --shadow: 0 18px 45px rgba(26, 31, 40, .08);
}

* { box-sizing: border-box; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

button, input, select { font: inherit; }

.app-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 248px minmax(0, 1fr);
  transition: grid-template-columns .18s ease;
}

.app-shell.sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr); }

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 24px 18px;
  color: #fff;
  background: linear-gradient(180deg, var(--nav), var(--nav-2));
}

.brand, .user-card {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-head { position: relative; }
.sidebar-toggle {
  position: absolute;
  right: -31px;
  top: 16px;
  z-index: 2;
  display: grid;
  width: 26px;
  height: 34px;
  padding: 0;
  place-items: center;
  color: var(--nav);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0 7px 7px 0;
  box-shadow: 3px 0 10px rgba(16,35,51,.08);
  cursor: pointer;
  font-size: 1.25rem;
}

a.brand { color: inherit; text-decoration: none; }

.brand {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.brand-logo {
  display: block;
  width: 182px;
  max-width: 100%;
  height: auto;
}

.sidebar .brand-logo {
  box-sizing: border-box;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.96);
}

.brand-baseline {
  display: block;
  margin-left: 58px;
  color: rgba(255,255,255,.74);
  font-size: .86rem;
}

.brand-mark, .avatar {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 8px;
  background: var(--copper);
  font-weight: 800;
}

.brand strong, .user-card strong { display: block; font-size: 1.22rem; }
.user-card span { display: block; color: rgba(255,255,255,.72); font-size: .88rem; }

.nav {
  display: grid;
  gap: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 12px;
  color: rgba(255,255,255,.86);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-weight: 700;
  text-decoration: none;
}

.nav-counter { margin-left: auto; }

.sidebar-collapsed .sidebar { width: 0; padding: 0; overflow: visible; background: transparent; }
.sidebar-collapsed .sidebar > :not(.sidebar-head) { display: none; }
.sidebar-collapsed .sidebar-head { position: fixed; left: 0; top: 24px; z-index: 20; }
.sidebar-collapsed .brand { display: none; }
.sidebar-collapsed .sidebar-toggle { position: fixed; left: 0; right: auto; top: 24px; border-radius: 0 7px 7px 0; }

.logout-button {
  width: 100%;
  min-height: 38px;
  color: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.page-header h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 2.35rem; }
.page-header p { margin: 7px 0 0; color: var(--muted); }
.page-content { display: grid; gap: 18px; }
.loading-state { padding: 48px; color: var(--muted); text-align: center; }
.page-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 12px; }
.page-kpis.inbox-kpis { grid-template-columns: repeat(3, minmax(0, 220px)); }
.page-kpis > div { display: grid; gap: 3px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.page-kpis strong { font-size: 1.7rem; }
.page-kpis span { color: var(--muted); }
.documents-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, .7fr); gap: 18px; align-items: start; }
.documents-layout > *,
.workspace,
.page-content,
.panel,
.detail-panel { min-width: 0; }
.documents-layout tr { cursor: pointer; }
.documents-layout table { table-layout: fixed; }
.documents-layout th,
.documents-layout td { padding-left: 10px; padding-right: 10px; }
.documents-layout th:nth-child(1) { width: 37%; }
.documents-layout th:nth-child(2) { width: 20%; }
.documents-layout th:nth-child(3) { width: 16%; }
.documents-layout th:nth-child(4) { width: 15%; }
.documents-layout th:nth-child(5) { width: 12%; }
.documents-layout td { overflow-wrap: anywhere; }
.documents-layout td:nth-child(3),
.documents-layout td:nth-child(5) { white-space: nowrap; }
.documents-layout td:first-child small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}
/* L'aperçu est l'ONGLET « Original » du Product Design (§3.3/§10.3) : l'original est
   affiché en lecture seule. La légende l'énonce en clair (jamais la couleur seule) et
   la marge par défaut du <figure> est neutralisée pour que le media colle au panneau. */
.viewer-original { margin: 0; }
.viewer-readonly {
  margin: 0;
  padding: 9px 18px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted);
  background: #faf8f4;
  border-bottom: 1px solid var(--line);
}
.pdf-frame { width: 100%; min-height: 680px; border: 0; background: #eef0f2; }
.image-preview { display: block; max-width: 100%; max-height: 720px; margin: 0 auto; }
.viewer-loading { padding: 48px 20px; color: var(--muted); text-align: center; }
.viewer-metadata { padding: 18px; border-top: 1px solid var(--line); background: #fff; }
.form-panel { max-width: 820px; }
.form-panel h2 { padding: 18px 20px 0; }
.form-panel .form-grid { padding: 14px 20px 22px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid label, .login-form label { display: grid; gap: 6px; color: var(--muted); font-weight: 700; }
.form-grid input, .form-grid select, .login-form input { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.form-grid button { align-self: end; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.list-row > div:first-child { display: grid; gap: 3px; }
.list-row span, .list-row small { color: var(--muted); }
.row-button { width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.status { padding: 5px 8px; color: var(--green) !important; background: #e9f7f0; border-radius: 5px; font-weight: 700; }
.status.error { color: var(--red) !important; background: #fae8e2; }
.source-panel { padding: 16px 18px; }
.source-panel > div { display: grid; gap: 5px; }
.source-panel span { color: var(--muted); }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.inbox-work .stack { padding-top: 0; }
.inbox-card {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}
.inbox-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f4eee5;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}
.priority-haute .pill,
.priority-bloquante .pill { color: var(--red); background: #fae8e2; }
.priority-moyenne .pill { color: var(--amber); background: #fff4df; }
.treated-item { grid-template-columns: auto minmax(0, 1fr) auto; }
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
  flex: 0 0 auto;
}
.dot.green { background: var(--green); }
.dot.red { background: var(--red); }
.dot.amber { background: var(--amber); }

/* §3.3 / §7.1 : bandeau en compte absolu, jamais en pourcentage ; §8.4 pastille + libellé texte. */
.inbox-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-bottom: 18px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.banner-metric { display: inline-flex; align-items: center; gap: 8px; }
.banner-metric strong { font-size: 1.1rem; }
.banner-metric.metric-action { color: var(--red); }
.banner-metric.metric-watch { color: var(--amber); }
.banner-metric.metric-period { color: var(--muted); }

/* §7.1 : lignes ambre « sous surveillance », plus légères que les cartes rouges. */
.inbox-surveillance { margin-bottom: 22px; }
.watch-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.watch-item:last-child { border-bottom: 0; }
.watch-item strong { display: block; font-weight: 700; }
.watch-item span { color: var(--muted); font-variant-numeric: tabular-nums; }

.expected-kpis { grid-template-columns: repeat(3, minmax(0, 220px)); }
.filters-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(150px, .75fr));
  gap: 12px;
  padding: 6px 20px 16px;
}
.filters-row label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}
.filters-row input,
.filters-row select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
}
.expected-list { display: grid; gap: 10px; padding: 4px 20px 20px; }
.expected-card {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.expected-card.late {
  border-color: #f6b6a8;
  background: #fff8f6;
}
.expected-main {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.expected-main div,
.expected-meta { display: grid; gap: 4px; }
.expected-main span,
.expected-meta {
  color: var(--muted);
  font-size: 13px;
}
.expected-meta {
  min-width: 150px;
  text-align: right;
}
/* La carte est un bouton (clic → détail de l'attendu) : on neutralise le style natif du
   bouton pour conserver l'apparence de carte et l'affordance cliquable (WCAG 2.5.5). */
button.expected-card {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
}
button.expected-card:hover { border-color: var(--copper); }
button.expected-card:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }

/* Détail d'un attendu : modale (native <dialog>) portant l'explication, les pièces
   existantes, l'étape de vérification et l'association. Toutes ces classes sont propres à
   Attendus — les modifier ne peut pas régresser un autre écran. */
.attendu-dialog { width: min(640px, calc(100vw - 28px)); max-height: calc(100vh - 40px); }
.attendu-detail { display: grid; gap: 16px; padding: 22px; }
.attendu-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.attendu-detail-head h2 { margin: 8px 0 2px; font-size: 1.2rem; }
.attendu-detail-head p { margin: 0; color: var(--muted); font-weight: 700; }
.attendu-explication {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.attendu-explication dt { color: var(--muted); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.attendu-explication dd { margin: 3px 0 0; font-weight: 600; }
.attendu-actions-haut { display: flex; gap: 10px; }
.attendu-pieces h3, .attendu-verification h3 { margin: 0 0 8px; font-size: .98rem; }
.piece-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; max-height: 240px; overflow-y: auto; }
.piece-item {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  appearance: none;
}
.piece-item:hover { border-color: var(--copper); }
.piece-item.selected { border-color: var(--copper); background: #fff6ef; box-shadow: inset 0 0 0 1px var(--copper); }
.piece-item .piece-nom { font-weight: 700; }
.piece-item .piece-meta { color: var(--muted); font-size: 13px; }
.attendu-verification {
  padding: 14px 16px;
  border: 1px solid var(--copper);
  border-radius: 8px;
  background: #fff8f1;
}
.verif-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.verif-col h4 { margin: 0 0 6px; font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
.verif-col ul { margin: 0; padding-left: 16px; display: grid; gap: 3px; font-size: 14px; }
.verif-note { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.detail-hint { margin: 0; color: var(--muted); font-size: 14px; }
.detail-error {
  margin: 0;
  padding: 10px 12px;
  color: var(--red);
  font-weight: 700;
  background: #fdece8;
  border: 1px solid #f3b8ab;
  border-radius: 7px;
}
.attendu-detail-actions { display: flex; justify-content: flex-end; gap: 10px; }
@media (max-width: 640px) {
  .attendu-explication, .verif-grid { grid-template-columns: 1fr; }
  .attendu-detail-actions { flex-direction: column-reverse; }
  .attendu-detail-actions button { width: 100%; }
}

.bank-kpis { grid-template-columns: repeat(4, minmax(0, 220px)); }
.money {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}
.money.debit { color: var(--red); }
.money.credit { color: var(--green); }
td small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #eef1f3; }
.login-card { width: min(100%, 430px); display: grid; gap: 26px; padding: 34px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.login-brand { color: var(--text); }
.login-brand .brand-baseline { margin-left: 68px; color: var(--muted); }
.login-logo { width: 220px; padding: 0; background: transparent; }
.login-card h1 { margin: 0 0 8px; font-size: 2rem; }
.login-card p { margin: 0; color: var(--muted); }
.login-form { display: grid; gap: 16px; }
.login-form .primary { width: 100%; margin-top: 4px; }

@media (max-width: 1000px) {
  .documents-layout { grid-template-columns: 1fr; }
  .pdf-frame { min-height: 560px; }
}

@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; padding: 14px; gap: 12px; }
  .nav { display: flex; overflow-x: auto; }
  .nav-item { flex: 0 0 auto; }
  .user-card, .sidebar form { display: none; }
  .workspace { padding: 20px 14px 34px; }
  .page-header { align-items: stretch; flex-direction: column; }
  .page-header h1 { font-size: 2rem; }
  .form-grid { grid-template-columns: 1fr; }
  .filters-row { grid-template-columns: 1fr; }
  .page-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.nav-item.active, .nav-item:hover { background: rgba(255,255,255,.09); color: #fff; }
.nav-counter { min-width: 26px; padding: 2px 8px; text-align: center; border-radius: 999px; background: rgba(170,88,36,.95); }

.user-card {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.16);
}

.workspace {
  min-width: 0;
  padding: 26px 38px 42px;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 34px;
}

.search-shell {
  position: relative;
  flex: 1;
  max-width: 720px;
}

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 16px;
  min-height: 48px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(26, 31, 40, .04);
}

.search-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: min(70vh, 620px);
  overflow: auto;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 46px rgba(26, 31, 40, .16);
}

.search-group { padding: 6px; }
.search-group + .search-group { border-top: 1px solid var(--line); }
.search-group h2 {
  margin: 5px 8px;
  color: var(--muted);
  font-size: .76rem;
  text-transform: uppercase;
}
.search-result {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.search-result:hover, .search-result:focus-visible { background: var(--paper); }
.search-result > span { display: grid; gap: 3px; min-width: 0; }
.search-result strong, .search-result small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-result small { color: var(--muted); }
.search-result b { flex: 0 0 auto; }
.search-result.missing { border-left: 3px solid var(--red); }
.search-empty {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px;
}
.search-empty span { color: var(--muted); }
.search-empty button {
  border: 0;
  padding: 4px;
  color: var(--copper-dark);
  background: transparent;
  cursor: pointer;
}

.search span {
  color: var(--muted);
  font-size: .86rem;
  font-weight: 700;
}

.search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
}

.period {
  margin-left: auto;
  display: grid;
  gap: 3px;
  text-align: right;
}

.period span { color: var(--muted); font-size: .82rem; }
.period strong { font-size: .95rem; }

.hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.hero h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: 1.06;
  font-weight: 700;
}

.hero h1 span { color: var(--copper); }
.hero p { margin: 12px 0 0; color: var(--muted); }

.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.deposit-workflow {
  margin-bottom: 22px;
}

.drop-zone {
  display: grid;
  min-height: 210px;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 28px;
  text-align: center;
  color: var(--text);
  background: var(--surface);
  border: 2px dashed #c8b7a8;
  border-radius: 8px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}

.drop-zone:hover,
.drop-zone.dragging {
  border-color: var(--copper);
  background: #fbf3ec;
}

.drop-zone.processing {
  cursor: progress;
}

.drop-zone strong {
  font-size: 1.45rem;
}

.drop-zone > span,
.drop-zone small {
  color: var(--muted);
}

.drop-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: #fff !important;
  background: var(--copper);
  border-radius: 50%;
  font-size: 1.45rem;
  font-weight: 900;
}

.processing-panel {
  margin-top: 12px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.processing-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.processing-head span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.processing-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.processing-step {
  display: flex;
  align-items: center;
  min-height: 42px;
  gap: 8px;
  padding: 8px 10px;
  color: var(--muted);
  background: #f4f5f6;
  border-radius: 6px;
  font-size: .83rem;
}

.processing-step > span {
  display: grid;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: #e1e5e9;
  font-weight: 900;
}

.processing-step.done { color: var(--green); background: #edf8f2; }
.processing-step.done > span { color: #fff; background: var(--green); }
.processing-step.active { color: var(--copper-dark); background: #fbf3ec; }
.processing-step.active > span { color: #fff; background: var(--copper); }
.processing-step.error { color: var(--red); background: #fae8e2; }
.processing-step.error > span { color: #fff; background: var(--red); }

.primary, .secondary, .ghost, .upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 800;
  text-decoration: none;
}

/* Accessibilité — focus clavier visible et cohérent (WCAG 2.4.7) sur TOUTE cible
   interactive de l'Inbox : actions de carte, menu « ⋯ », lien de l'état vide, Rouvrir.
   L'app neutralise l'outline UA par endroits ; on restitue un anneau explicite et contrasté. */
.primary:focus-visible,
.secondary:focus-visible,
.ghost:focus-visible,
.upload-button:focus-visible,
.link-button:focus-visible,
.row-action:focus-visible,
.card-menu summary:focus-visible,
.traitees-recemment summary:focus-visible,
.empty-state a:focus-visible {
  outline: 3px solid var(--copper);
  outline-offset: 2px;
  border-radius: 6px;
}

.primary, .upload-button {
  color: #fff;
  background: var(--copper);
  border-color: var(--copper-dark);
}

.primary:hover, .upload-button:hover { background: var(--copper-dark); }

.import-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.upload-button.secondary-upload {
  color: var(--text);
  background: var(--surface);
  border-color: var(--line);
}

.upload-button.secondary-upload:hover {
  background: #fbf3ec;
}

.secondary {
  color: var(--text);
  background: var(--surface);
  border-color: var(--line);
}

.ghost {
  color: var(--muted);
  background: transparent;
  border-color: var(--line);
}

.mini-action {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--red);
  background: var(--surface);
  cursor: pointer;
  font-weight: 800;
}

.cards-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.anomaly-card, .empty-state {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  min-height: 118px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.empty-state {
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
  align-content: center;
  color: var(--green);
}

/* Le vert (état vide par défaut) vaut « vérifié, tout va bien ». Une fraîcheur non
   fraîche — périmée, absente ou en erreur — bascule en ambre : jamais de faux vert. */
.empty-state.stale { color: var(--amber); }
.empty-state.error { color: var(--red); }

.empty-state span, .anomaly-card span, .anomaly-card small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}

.anomaly-card .next-action {
  color: var(--text);
  font-weight: 700;
}

.card-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--red);
  background: #fae8e2;
  font-weight: 900;
}

.anomaly-card b {
  color: var(--red);
  font-size: 1.3rem;
}

.card-body { min-width: 0; }

.card-pourquoi { font-style: italic; }

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.card-menu { position: relative; }
/* Cible tactile confortable (WCAG 2.5.5/2.5.8) : le « ⋯ » n'est plus un glyphe minuscule. */
.card-menu summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 6px 10px; }
.card-menu summary::-webkit-details-marker { display: none; }
.card-menu[open] button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
}
/* « Ignorer » : issue destructrice (l'anomalie quitte l'Inbox sur dérogation motivée) —
   teinte d'alerte sobre pour la distinguer de « Reporter », sans crier. */
.card-menu[open] button.danger { color: var(--red); }

.traitees-recemment {
  margin-bottom: 22px;
  color: var(--muted);
}
.traitees-recemment summary { cursor: pointer; }

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  display: flex;
  gap: 16px;
  align-items: center;
  z-index: 50;
}
.toast button {
  background: none;
  border: none;
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.toast[hidden] { display: none; }

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(360px, .85fr);
  gap: 18px;
}

.bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .55fr);
  gap: 18px;
  margin-top: 18px;
}

.bank-panel { grid-column: 1 / -1; }

.panel, .detail-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.panel-head.compact { border-bottom: 0; padding-bottom: 8px; }
.panel h2, .detail-panel h2, dialog h2 { margin: 0; font-size: 1.08rem; }
.panel p, .detail-panel p, dialog p { margin: 5px 0 0; color: var(--muted); }

.tabs {
  display: flex;
  gap: 6px;
  padding: 0 20px 14px;
}

.document-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 20px 14px;
}

.document-kpi {
  display: grid;
  gap: 2px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.document-kpi strong { font-size: 1.15rem; }

.document-kpi span {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
}

.document-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(150px, .75fr));
  gap: 10px;
  padding: 0 20px 14px;
}

.document-filters label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}

.document-filters input,
.document-filters select {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.tab {
  min-height: 32px;
  padding: 0 12px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
}

.tab.active {
  color: #fff;
  background: var(--nav);
}

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { padding: 13px 16px; border-top: 1px solid var(--line); text-align: left; font-size: .92rem; }
th { color: var(--muted); text-transform: uppercase; font-size: .72rem; }
tr.selected td { background: #fbf3ec; }
.table-empty { color: var(--muted); text-align: center; padding: 34px 16px; }
.compact-table table { min-width: 640px; }
.compact-table small { color: var(--muted); }

.bank-tabs {
  display: flex;
  gap: 8px;
  padding: 8px 20px 4px;
  overflow-x: auto;
  border-top: 1px solid var(--line);
}

.bank-tab {
  display: grid;
  gap: 2px;
  min-width: 150px;
  min-height: 46px;
  padding: 7px 12px;
  text-align: left;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
}

.bank-tab strong {
  color: var(--text);
  font-size: .92rem;
}

.bank-tab span {
  font-size: .76rem;
  white-space: nowrap;
}

.bank-tab.active {
  border-color: var(--copper);
  background: #fbf3ec;
}

.bank-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 220px);
  gap: 10px;
  padding: 8px 20px 12px;
}

.bank-filters label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}

.bank-filters input,
.bank-filters select {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.doc-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-weight: 800;
  text-align: left;
}
.doc-name span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.file-badge {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 3px 5px;
  border-radius: 5px;
  color: var(--copper);
  background: #fbede3;
  font-size: .68rem;
  text-align: center;
}

.status-pill {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 7px;
  color: var(--green);
  background: #e9f7ef;
  font-weight: 800;
  font-size: .78rem;
  line-height: 1.2;
  white-space: nowrap;
}

.status-pill.danger {
  color: var(--red);
  background: #fae8e2;
}

.status-pill.muted-pill {
  color: var(--muted);
  background: #f1eee8;
}

.status-pill.warn {
  color: var(--amber);
  background: #fdf0e3;
}

.document-motif-blocage {
  display: block;
  max-width: 32ch;
  margin-top: 4px;
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.3;
  white-space: normal;
}

.connector-block {
  display: grid;
  gap: 6px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.connector-block:first-child { border-top: 0; }

.connector-block > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.connector-block p { margin: 0; color: var(--muted); }

.row-action, .icon-link {
  color: var(--copper);
  text-decoration: none;
  font-weight: 800;
}

.detail-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.link-button {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.detail-panel { min-height: 560px; }
/* Le panneau de détail est une colonne étroite (~360 px) même sur grand écran : on en fait un
   conteneur de requête pour que son en-tête s'adapte à SA largeur, pas à celle du viewport. */
#detail-document { height: 100%; container-type: inline-size; }

.detail-head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

/* Bloc titre : peut rétrécir (min-width:0) et un nom de fichier long se coupe au lieu de
   pousser la ligne au-delà du panneau. */
.detail-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.detail-head h2 { overflow-wrap: anywhere; }
.viewer-download {
  width: 40px;
  min-height: 40px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}

/* Panneau étroit : les actions passent sous le titre, sur toute la largeur, et se répartissent
   à gauche — plus aucun débordement horizontal, tous les boutons restent présents et lisibles. */
@container (max-width: 460px) {
  .detail-actions { flex-basis: 100%; justify-content: flex-start; }
}

.detail-empty {
  display: grid;
  height: 100%;
  min-height: 420px;
  place-content: center;
  padding: 24px;
  text-align: center;
}

.preview {
  height: 520px;
  background: #f1f1ef;
  border-bottom: 1px solid var(--line);
}

.preview iframe, .preview img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

.preview-loading, .preview-error {
  margin: 0;
  padding: 24px;
  color: var(--muted);
}

.preview-error { color: var(--red); }

.meta-list {
  display: grid;
  gap: 10px;
  padding: 18px;
  margin: 0;
}

.meta-list div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
}

.meta-list dt { color: var(--muted); }
.meta-list dd { margin: 0; overflow-wrap: anywhere; font-weight: 700; }

.stack {
  display: grid;
  gap: 8px;
  padding: 8px 20px 20px;
}

.stack-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}

.stack-item:first-child { border-top: 0; }
.stack-item span:last-child, .muted { color: var(--muted); }

.proposition-item {
  grid-template-columns: auto 1fr auto auto;
}

.proposition-item.qualify {
  background: #fffdfa;
}

.proposition-item.qualify strong {
  color: var(--amber);
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot.green { background: var(--green); }
.dot.red { background: var(--red); }

.inline-form {
  display: flex;
  gap: 10px;
  padding: 8px 20px 0;
}

.inline-form input, dialog input, dialog select {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.feedback {
  min-height: 24px;
  padding: 0 20px 18px;
  color: var(--muted);
  font-weight: 700;
}

dialog {
  width: min(520px, calc(100vw - 28px));
  padding: 0;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 28px 80px rgba(16, 35, 51, .24);
}

dialog::backdrop { background: rgba(16, 35, 51, .42); }

.dialog-card {
  display: grid;
  gap: 14px;
  padding: 22px;
}

.dialog-card label {
  display: grid;
  gap: 6px;
  font-weight: 800;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-shell.sidebar-collapsed { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
  }
  .sidebar-toggle { display: none; }
  .sidebar-collapsed .sidebar { padding: 24px 18px; gap: 22px; }
  .sidebar-collapsed .sidebar > .nav { display: grid; }
  .sidebar-collapsed .sidebar > .user-card { display: flex; }
  .sidebar-collapsed .sidebar > form { display: block; }
  .sidebar-collapsed .sidebar-head { position: relative; left: auto; top: auto; }
  .sidebar-collapsed .brand { display: flex; }
  .sidebar-collapsed .brand-logo-full { display: block; }
  .sidebar-collapsed .brand-baseline, .sidebar-collapsed .nav-label, .sidebar-collapsed .user-card > div:last-child, .sidebar-collapsed .logout-label { display: block; }
  .sidebar-collapsed .nav-counter { position: static; min-width: 26px; padding: 2px 8px; font-size: inherit; }
  .brand, .user-card { flex: 0 0 auto; }
  .user-card { margin-top: 0; padding-top: 0; padding-left: 18px; border-top: 0; border-left: 1px solid rgba(255,255,255,.16); }
  .nav { grid-auto-flow: column; grid-auto-columns: max-content; }
  .content-grid, .bottom-grid { grid-template-columns: 1fr; }
  .document-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .workspace { padding: 18px 14px 28px; }
  .topbar, .hero, .panel-head, .inline-form { flex-direction: column; align-items: stretch; }
  .period { margin-left: 0; text-align: left; }
  .search-shell { display: none; }
  .hero-actions { justify-content: stretch; }
  .hero-actions > *, .inline-form > * { width: 100%; }
  .cards-row { grid-template-columns: 1fr; }
  .processing-steps { grid-template-columns: 1fr 1fr; }
  .processing-head { flex-direction: column; }
  .bank-filters { grid-template-columns: 1fr; }
  .document-filters { grid-template-columns: 1fr; }
  .sidebar { padding: 16px 12px; }
  .preview { height: 420px; }
}

/* ==========================================================================================
   Écran Banque V2.1 — « relevé bancaire intelligent » (Product Design consolidé).
   La ligne bancaire est l'objet principal ; le rapprochement est une propriété de la ligne.
   Classes 100 % propres à Banque (préfixe .bank-* / .releve-*), sans régression ailleurs.
   ========================================================================================== */

/* --- LA ligne de tête unique (§1.5) : devise · mois · 3 pastilles · synchro · actions ----- */
/* [23/09/2026] Quatre bandeaux empilés (barre d'outils, bandeau d'identité, cartes KPI, ligne
   de pastilles) fusionnent en une seule ligne. Les tuiles, les cartes KPI et la progression
   sont SUPPRIMÉES : cinq tuiles étaient figées, les KPI redisaient les pastilles. */
.bank-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.bank-headline-right { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bank-field { display: grid; gap: 5px; color: var(--muted); font-size: .78rem; font-weight: 800; }
.bank-field select { min-height: 44px; padding: 0 12px; color: var(--text); background: #fff; border: 1px solid var(--line); border-radius: 7px; }
.bank-month-nav { display: flex; align-items: center; gap: 6px; }
.bank-nav-btn {
  min-width: 44px; min-height: 44px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 7px; background: #fff;
  color: var(--text); font-size: 1.3rem; font-weight: 800; cursor: pointer;
}
.bank-nav-btn:hover:not(:disabled) { border-color: var(--copper); }
.bank-nav-btn:disabled { opacity: .45; cursor: not-allowed; }
.bank-month-nav select { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--text); font-weight: 700; }

/* Sélecteur de devise : il remplace le numéro de compte brut ET sert de légende aux montants,
   qui n'affichent plus le symbole monétaire. */
.bank-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.bank-seg-btn {
  min-height: 44px; padding: 0 14px; border: 0; border-right: 1px solid var(--line);
  background: transparent; color: var(--muted); font: inherit; font-weight: 800; cursor: pointer;
}
.bank-seg-btn:last-child { border-right: 0; }
.bank-seg-btn.on { background: var(--nav); color: #fff; }

.bank-sync { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .84rem; font-weight: 700; }
.bank-sync.absent { font-style: italic; }
.bank-sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.bank-toggle { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); cursor: pointer; }
.bank-toggle input { width: 20px; height: 20px; }
.bank-certify { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 7px; font-weight: 800; cursor: pointer; }
.bank-certify:disabled { opacity: .6; cursor: not-allowed; }
/* Étiquette « à développer » — capacité backend ABSENTE, jamais présentée comme active. */
.bank-todo {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: #f1eee8; color: var(--muted); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
}

/* Menu « ⋯ » : les réglages rares (compte bancaire, mode comptable) quittent la ligne de tête
   sans disparaître — la liste des comptes reste accessible. */
.bank-menu { position: relative; }
.bank-menu > summary { display: inline-flex; align-items: center; justify-content: center; list-style: none; }
.bank-menu > summary::-webkit-details-marker { display: none; }
.bank-menu-body {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5;
  display: grid; gap: 12px; min-width: 260px; padding: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow);
}

/* L'alerte de compte en erreur SURVIT à la suppression du bandeau : c'est une information
   anti-fraude (connexion bancaire interrompue), pas une décoration. */
.bank-erreur {
  margin-bottom: 16px; padding: 10px 14px; border-radius: 7px;
  background: #fae8e2; color: var(--red); font-weight: 700;
}
.bank-erreur a { color: var(--red); }

/* --- Trois pastilles de filtre (§1.4) ---------------------------------------------------- */
.bank-pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  font-weight: 800; cursor: pointer;
}
.bank-pill:hover { border-color: var(--copper); }
.bank-pill.active { background: var(--nav); color: #fff; border-color: var(--nav); }
.bank-pill-count { padding: 1px 8px; border-radius: 999px; background: #f1eee8; color: var(--muted); font-size: .76rem; }
.bank-pill.active .bank-pill-count { background: rgba(255,255,255,.2); color: #fff; }
/* « Pièces manquantes » est le besoin n°1 : teinte ambre, visuellement distincte. */
.bank-pill.danger { color: var(--amber); border-color: #f0d9b5; }
.bank-pill.danger .bank-pill-count { background: #fdf0e3; color: var(--amber); }
.bank-pill.danger.active { background: var(--amber); color: #fff; border-color: var(--amber); }
.bank-pill.danger.active .bank-pill-count { background: rgba(255,255,255,.22); color: #fff; }

/* --- Relevé : table desktop (colonnes) / cartes mobile ------------------------------------ */
.bank-releve { margin-bottom: 16px; }
.bank-notice { margin: 0; padding: 10px 20px; color: var(--muted); background: var(--paper); border-bottom: 1px solid var(--line); font-size: .85rem; }
.bank-table-wrap { overflow-x: auto; }
/* `table-layout: fixed` : sans lui, `max-width` sur une cellule est ignoré et le libellé
   s'étale jusqu'à pousser la colonne « Pièce » hors de l'écran (mesuré : 163 px de
   débordement). Les largeurs sont portées par les en-têtes ; le libellé prend le reste et se
   coupe proprement avec des points de suspension.
   [24/09/2026, audit Codex, blocage 1] « Pièce » était à 34 % : à 1500 px le libellé tombait à
   175 px utiles (−29 % par rapport à la prod, 248 px) — « VIR SEPA KUEHNE+NA… ». Cible
   chiffrée : Date 58 + Débit 88 + Crédit 88 + Pièce 230 + Commentaire 44 = 508 px fixes ; avec
   le panneau initial ramené à 380 px, le tableau fait 776 px et le libellé 268 px bruts, soit
   248 px utiles — la largeur de production. Verrouillé par banque.e2e.spec.mjs. */
table.releve-table { width: 100%; min-width: 0; border-collapse: collapse; table-layout: fixed; }
.releve-table th:first-child { width: 58px; }
.releve-table th.col-money { width: 88px; }
.releve-table th.col-piece { width: 230px; }
/* MESURÉ le 23/09/2026 : avec 16 px de respiration horizontale et un libellé à 280 px, la
   colonne « Pièce » débordait de 163 px de la zone de liste — donc le nom de la facture et le
   bouton « Lettrer » étaient hors champ, cachés derrière un scroll horizontal. Or c'est
   exactement ce que Jérôme vient chercher. La table est donc resserrée et le libellé accepte
   de se compresser : le travail à faire reste visible sans faire défiler. */
.releve-table th, .releve-table td { padding: 11px 10px; border-top: 1px solid var(--line); text-align: left; font-size: .9rem; vertical-align: middle; }
.releve-table th { color: var(--muted); text-transform: uppercase; font-size: .7rem; }
/* ATTENTION SPÉCIFICITÉ : `.releve-table th, .releve-table td { text-align: left }` ci-dessus
   vaut (0,1,1) et battrait un simple `td.money` (0,0,2 → en réalité 0,1,1 avec égalité, donc
   c'est l'ordre du fichier qui trancherait). L'alignement à droite est donc TOUJOURS qualifié
   par `.releve-table` pour passer devant, sans dépendre de l'ordre des règles. */
.releve-table th.col-money, .releve-table td.col-money { text-align: right; }
.releve-table td.money { font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; }
.releve-table td.col-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.releve-table td.col-libelle { max-width: 280px; }
.releve-table td.col-libelle span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.releve-table td.col-comment { color: var(--muted); }
/* La colonne 💬 ne mange pas la largeur utile : 44 px en fin de ligne. */
.releve-table th.col-comment, .releve-table td.col-comment { width: 44px; padding-left: 4px; padding-right: 10px; text-align: center; }
.bank-cmt { color: var(--copper); font-size: 1rem; cursor: help; }

/* --- Colonne « Pièce » : le signe porte l'état, le texte porte la pièce (§1.8) ------------ */
.releve-table td.col-piece { min-width: 190px; }
.bank-piece { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bank-sign {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .95rem; font-weight: 900; line-height: 1;
  background: #f1eee8; color: var(--muted);
}
/* Chaque teinte DOUBLE une information déjà portée par le texte et par title/aria-label :
   la couleur n'est jamais le seul indice (WCAG 1.4.1). Les deux ✓ (lettré / règle) sont de
   teintes distinctes ET le second est préfixé « Règle · » dans le texte. */
.bank-sign.lettre { background: #e9f7ef; color: var(--green); }
.bank-sign.regle { background: #edf7f2; color: #177245; }
.bank-sign.valider { background: #e8eefb; color: #1e4fa3; }
.bank-sign.manque { background: #fdf0e3; color: var(--amber); }
.bank-sign.qualifier { background: #f3f0ff; color: #5b3aa6; }
.bank-sign.ecartee { background: #f1eee8; color: var(--muted); }
.bank-piece-txt { min-width: 0; display: grid; gap: 1px; }
.bank-piece-txt strong { font-weight: 700; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-piece-txt small { color: var(--muted); font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-piece-actions { margin-left: auto; flex: 0 0 auto; }
.bank-piece-btn {
  min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px;
  background: #fff; color: var(--text); font: inherit; font-weight: 800; font-size: .8rem; cursor: pointer;
}
.bank-piece-btn.primary { background: var(--nav); color: #fff; border-color: var(--nav); }
.bank-piece-btn:hover:not(:disabled) { border-color: var(--copper); }
.bank-piece-btn:disabled { opacity: .6; cursor: not-allowed; }
/* Ligne écartée : présente, lisible, mais visiblement sortie du flux de travail. */
.releve-row.ecartee td.col-date, .releve-row.ecartee td.col-libelle, .releve-row.ecartee td.money { opacity: .55; }
.bank-dev {
  display: inline-block; margin-right: 6px; padding: 0 4px; border-radius: 4px;
  background: #f1eee8; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .03em;
}
.bank-releve-compte { margin: 0; padding: 12px 20px; color: var(--muted); font-size: .86rem; border-bottom: 1px solid var(--line); }
.releve-row { cursor: pointer; }
.releve-row:nth-child(even) { background: var(--paper); }
.releve-row:hover { background: #f3efe8; }
.releve-row.selected { background: #fbf3ec; box-shadow: inset 3px 0 0 var(--copper); }
.releve-row:focus-visible { outline: 3px solid var(--copper); outline-offset: -3px; }

/* Badges de statut : icône + libellé TEXTUEL (jamais la couleur seule — §11.4, WCAG 1.4.1). */
.bank-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 7px; font-weight: 800; font-size: .78rem; white-space: nowrap;
  background: #f1eee8; color: var(--muted);
}
.bank-badge.reconciled { background: #e9f7ef; color: var(--green); }
.bank-badge.proposed { background: #e8eefb; color: #1e4fa3; }
.bank-badge.missing { background: #fdf0e3; color: var(--amber); }
.bank-badge.justify { background: #f3f0ff; color: #5b3aa6; }
.bank-badge.parking { background: #eef2f4; color: #475569; }
.bank-badge.auto-justified { background: #edf7f2; color: #177245; }
.bank-badge.excluded { background: #f1eee8; color: var(--muted); }
.bank-badge.unknown { background: #fae8e2; color: var(--red); }

.bank-empty { display: grid; gap: 10px; justify-items: center; padding: 40px 24px; text-align: center; color: var(--muted); }
.bank-empty strong { color: var(--text); font-size: 1.05rem; }
.bank-feedback { margin-bottom: 12px; }

/* --- Imports OFX/CSV (capacités réelles préservées) --------------------------------------- */
.bank-imports { margin-bottom: 16px; }
.bank-imports > summary { cursor: pointer; padding: 16px 20px; font-weight: 800; }
.bank-import-body { padding: 0 20px 18px; display: grid; gap: 12px; }
.bank-import-list { display: grid; gap: 8px; }
.bank-import-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.bank-import-row.active { border-color: var(--green); background: #f3fbf6; }
.bank-import-row span { color: var(--muted); }
.bank-import-row > div { display: grid; gap: 2px; }
.bank-import-empty { color: var(--muted); margin: 0; }
.bank-import-detail { display: grid; gap: 12px; }
.bank-import-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.bank-import-summary > div {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}
.bank-import-summary span { color: var(--muted); font-size: .78rem; font-weight: 800; }

/* --- Panneau droit PERSISTANT : détail sans quitter le relevé (§6) ------------------------ */
/* [23/09/2026, §1.14] Le panneau d'aperçu est REDIMENSIONNABLE, comme la page « À payer ».
   Sans largeur mémorisée (--bank-drawer-width absente), le panneau part à 380 px : c'est ce
   qui rend au relevé les 60 px dont le libellé a besoin (audit Codex, blocage 1 — à 440 px le
   libellé perdait 29 % de sa largeur). Le séparateur occupe l'ancien gap de 16 px (gap: 0 +
   colonne de 18 px), il n'est monté qu'au-dessus de 1100 px. */
.bank-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); gap: 16px; align-items: start; }
.bank-main { min-width: 0; }
.bank-drawer-resizer { display: none; }
@media (min-width: 1100px) {
  .bank-layout { gap: 0; grid-template-columns: minmax(0, 1fr) 18px var(--bank-drawer-width, 380px); }
  .bank-drawer-resizer {
    display: block; position: sticky; top: 16px; z-index: 3;
    width: 18px; height: min(720px, calc(100vh - 32px));
    cursor: col-resize; touch-action: none; outline: 0;
  }
  .bank-drawer-resizer::before {
    content: ""; position: absolute; inset: 0 8px; border-radius: 2px;
    background: var(--line); transition: background .15s ease, inset .15s ease;
  }
  .bank-drawer-resizer:hover::before,
  .bank-drawer-resizer:focus-visible::before,
  .bank-layout.is-resizing .bank-drawer-resizer::before { inset-inline: 7px; background: var(--copper); }
  .bank-layout.is-resizing { cursor: col-resize; user-select: none; }
}
.bank-drawer {
  position: sticky; top: 16px; display: flex; flex-direction: column;
  max-height: calc(100vh - 32px); overflow: hidden;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--text);
}
.bank-panel-empty { display: grid; gap: 6px; justify-items: center; padding: 48px 24px; text-align: center; color: var(--muted); }
.bank-panel-empty strong { color: var(--text); }
.bank-drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.bank-drawer-head h2 { margin: 8px 0 4px; font-size: 1.12rem; overflow-wrap: anywhere; }
.bank-drawer-head p { margin: 0; color: var(--muted); }
.bank-drawer-head .money { font-size: 1.02rem; }
.bank-close {
  flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.bank-close:hover { border-color: var(--copper); color: var(--text); }
.bank-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 20px 24px; }
.bank-section { padding: 16px 0; border-bottom: 1px solid var(--line); }
.bank-section:last-child { border-bottom: 0; }
.bank-section h3 { margin: 0 0 10px; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.bank-meta { display: grid; gap: 8px; margin: 0; }
.bank-meta div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
.bank-meta dt { color: var(--muted); }
.bank-meta dd { margin: 0; overflow-wrap: anywhere; font-weight: 700; }
.bank-proposition { padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; margin-bottom: 8px; }
.bank-aucun { display: grid; gap: 4px; padding: 14px; background: var(--paper); border-radius: 7px; }
.bank-aucun strong { color: var(--text); }
.bank-aucun span { color: var(--muted); }
.bank-justif { display: grid; gap: 8px; padding: 12px 14px; background: var(--paper); border-radius: 7px; }
.bank-document-card { display: grid; gap: 14px; }
.bank-document-preview { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #f1f1ef; }
/* En-tête du document (§1.15) : une seule ligne — le nom, et le téléchargement. */
.bank-doc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-bottom: 0; border-radius: 7px 7px 0 0; background: #fff; }
.bank-doc-nom { font-weight: 700; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-doc-dl { flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--muted); font-weight: 800; text-decoration: none; }
.bank-doc-dl:hover { border-color: var(--copper); color: var(--copper); }
.bank-doc-head + .bank-document-preview { border-radius: 0 0 7px 7px; }
/* [23/09/2026, §1.12] `height: 300px` FIGÉE + `object-fit: contain` enfermaient le document
   dans une boîte de 300 px : le panneau s'élargissait, le document non — le « faux zoom ».
   La règle `.image-preview` (plus haut : display:block ; max-width:100% ; max-height:720px ;
   margin:0 auto) reprend la main et le document grandit PROPORTIONNELLEMENT, exactement comme
   sur la page « À payer ». Rien ici ne fixe plus la hauteur. */
.bank-document-preview img { background: #fff; }
/* MESURÉ le 23/09/2026 : avec la seule règle `.image-preview` (max-height: 720px), élargir le
   panneau au-delà d'environ 1000 px ne grandit plus le document — le plafond de hauteur prend
   le relais de la boîte figée. La page « À payer », qui est la référence explicite de la spec,
   lève ce plafond dans son panneau (`#payment-viewer .pdf-preview-image`, plus haut). On
   s'aligne sur elle, à l'identique, pour que la poignée serve sur TOUTE sa course.
   [24/09/2026, audit Codex, blocage 3] …mais SEULEMENT là où la poignée existe : écran et
   >= 1100 px. Sous 1100 px (une colonne, panneau pleine largeur) le plafond levé laissait une
   page A4 monter à 1 385 px de haut (mesuré à 1099 px), et à l'impression rien n'était borné.
   Partout ailleurs, `.image-preview` reprend la main : max-height 720 px, ratio conservé. */
@media screen and (min-width: 1100px) {
  #bank-drawer .pdf-preview-image { width: 100%; max-width: none; max-height: none; height: auto; }
}
.bank-document-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bank-document-actions .bank-linkbtn { min-height: 40px; padding: 0 12px; display: inline-flex; align-items: center; text-decoration: none; }
.bank-group-editor, .bank-group-summary { display: grid; gap: 10px; margin-top: 12px; }
.bank-group-choice, .bank-group-document { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.bank-group-document { grid-template-columns: minmax(0, 1fr) auto; }
.bank-group-choice span, .bank-group-document span { display: grid; gap: 2px; min-width: 0; }
.bank-group-choice small, .bank-group-document small { color: var(--muted); overflow-wrap: anywhere; }
.bank-group-warning { margin: 0; padding: 10px 12px; color: var(--danger); background: var(--danger-soft); border-radius: 7px; }
.bank-group-search { display: grid; gap: 5px; color: var(--muted); font-size: .82rem; font-weight: 700; }
.bank-group-search select { width: 100%; min-height: 40px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.bank-group-total { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; }
.bank-group-total small { grid-column: 1 / -1; color: var(--muted); }
.bank-historique { margin: 0; padding-left: 18px; display: grid; gap: 5px; color: var(--text); }
.bank-comment { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: #f6f4ef; color: var(--muted); resize: none; }
/* Toute mention « à développer » — capacité backend ABSENTE, honnête et non actionnable. */
.bank-todo-note { margin: 8px 0 0; color: var(--muted); font-size: .8rem; font-style: italic; }
.bank-todo-cell { color: var(--muted); font-weight: 600; font-style: italic; }
.bank-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bank-actions button, .bank-actions .bank-linkbtn {
  min-height: 44px; padding: 0 16px; border-radius: 7px; font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
}
.bank-actions button:disabled { opacity: .6; cursor: not-allowed; }

.bank-headline select:focus-visible, .bank-nav-btn:focus-visible, .bank-pill:focus-visible,
.bank-seg-btn:focus-visible, .bank-piece-btn:focus-visible, .bank-drawer-resizer:focus-visible,
.releve-row:focus-visible, .bank-close:focus-visible,
.bank-actions button:focus-visible, .bank-actions .bank-linkbtn:focus-visible,
.bank-toggle input:focus-visible {
  outline: 3px solid var(--copper); outline-offset: 2px;
}

/* --- Responsive : tablette --------------------------------------------------------------- */
/* [24/09/2026, audit Codex, blocage 2] La bascule était à 1000 px alors que le séparateur n'est
   monté qu'à partir de 1100 px : entre 1001 et 1099 px, deux colonnes sans poignée et un libellé
   réduit à 10–95 px (mesuré). La bascule est alignée sur la frontière du séparateur, comme
   « À payer » : >= 1100 px deux colonnes, en dessous une seule. 1099.98 et non 1099 : aucune
   largeur fractionnaire (zoom navigateur) ne tombe entre les deux règles. */
@media (max-width: 1099.98px) {
  .bank-layout { grid-template-columns: 1fr; }
  .bank-drawer { position: static; max-height: none; }
}

/* --- Responsive : mobile — relevé en cartes, panneau en bottom sheet (§5, §10.4) ---------- */
@media (max-width: 640px) {
  /* La ligne de tête s'empile : chaque groupe prend toute la largeur, rien ne déborde. */
  .bank-headline { flex-direction: column; align-items: stretch; }
  .bank-headline-right { margin-left: 0; justify-content: space-between; }
  .bank-field select, .bank-month-nav select { width: 100%; }
  .bank-month-nav { justify-content: space-between; }
  .bank-seg { width: 100%; }
  .bank-seg-btn { flex: 1 1 0; }
  .bank-pill { flex: 1 1 auto; justify-content: space-between; }
  .bank-menu-body { right: auto; left: 0; width: 100%; }

  /* La table devient une pile de cartes verticales : aucun scroll horizontal (§5.6). */
  .bank-table-wrap { overflow-x: visible; }
  .releve-table, .releve-table tbody, .releve-table tr, .releve-table td { display: block; width: 100%; }
  .releve-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .releve-row { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 12px; padding: 8px 14px; }
  .releve-row:nth-child(even) { background: #fff; }
  .releve-table td { border-top: 0; padding: 5px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .releve-table td::before { content: attr(data-label); color: var(--muted); font-weight: 800; font-size: .74rem; text-transform: uppercase; }
  .releve-table td:empty { display: none; }
  .releve-table td.col-libelle { max-width: none; }
  .releve-table td.col-libelle span { white-space: normal; font-weight: 700; }
  .releve-table td.col-money { text-align: right; }
  /* La colonne « Pièce » garde sa mise en page interne en carte ; le bouton reste au doigt. */
  .releve-table td.col-piece { display: grid; gap: 6px; }
  .releve-table td.col-comment { width: auto; text-align: left; }
  .bank-piece-btn { min-height: 44px; }

  /* Mobile : pas d'état vide affiché ; une ligne ouverte devient un bottom sheet. */
  .bank-drawer { display: none; }
  .bank-drawer.open {
    display: flex; position: fixed; inset: auto 0 0 0; z-index: 30; height: 90%; max-height: 90%;
    border: 0; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0;
    box-shadow: 0 -14px 44px rgba(16, 24, 40, .2);
  }
  .bank-meta div { grid-template-columns: 1fr; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .bank-drawer-resizer::before { transition: none; }
}

/* --- Cabinet V2 : « Quelle période est prête à transmettre ? » (§3.6/§5.6/§10.6) ------------
   Deux colonnes : liste des périodes DÉRIVÉES (gauche) et détail de préparation (droite).
   Réutilise .panel / .panel-head / .empty-state / .feedback / .table-wrap et les tokens. */
.cab-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.cab-periodes { padding: 0; align-self: start; }
.cab-periodes .panel-head { padding: 16px 18px 8px; }
.cab-periode-list { list-style: none; margin: 0; padding: 8px; display: grid; gap: 8px; }
.cab-periode {
  width: 100%; display: grid; gap: 4px; text-align: left; cursor: pointer;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: inherit; font: inherit; min-height: 44px;
}
.cab-periode:hover { border-color: var(--copper); }
.cab-periode.active { border-color: var(--nav); box-shadow: inset 0 0 0 1px var(--nav); background: #fbf3ec; }
.cab-periode-titre { font-weight: 800; font-size: 1rem; }
.cab-periode-meta { color: var(--muted); font-size: .8rem; }

/* Badge d'état de préparation : pastille + libellé TEXTUEL (jamais la couleur seule). */
.cab-badge {
  display: inline-flex; align-items: center; gap: 6px; align-self: start;
  padding: 3px 10px; border-radius: 7px; font-weight: 800; font-size: .76rem; white-space: nowrap;
  background: #f1eee8; color: var(--muted); width: max-content;
}
.cab-badge.ready { background: #e9f7ef; color: var(--green); }
.cab-badge.todo { background: #fdf0e3; color: var(--amber); }
.cab-badge.muted { background: #f1eee8; color: var(--muted); }

.cab-detail { display: grid; gap: 16px; min-width: 0; }
.cab-detail-head {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-start;
  padding: 16px 20px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: var(--shadow);
}
.cab-detail-head h2 { margin: 0 0 8px; font-size: 1.3rem; }
.cab-detail-sub { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cab-detail-sub small { color: var(--muted); font-weight: 700; }
.cab-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cab-detail-actions button {
  min-height: 44px; padding: 0 16px; border-radius: 7px; font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.cab-detail-actions button:disabled { opacity: .6; cursor: not-allowed; }
.cab-note { margin: 0; color: var(--muted); font-size: .85rem; }
.cab-detail > .feedback { margin: 0; }

.cab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cab-grid .panel { margin: 0; }

.cab-comp { display: grid; gap: 2px; padding: 4px 20px 8px; }
.cab-comp-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(90px, auto);
  gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line);
}
.cab-comp-row:first-child { border-top: 0; }
.cab-comp-row > strong { font-variant-numeric: tabular-nums; font-size: 1.05rem; text-align: right; }
.cab-comp-row.secondaire span:first-child { color: var(--muted); }
.cab-comp-flag { font-weight: 800; font-size: .78rem; text-align: right; }
.cab-comp-flag.ok { color: var(--green); }
.cab-comp-flag.todo { color: var(--amber); }
.cab-comp-note { color: var(--muted); font-size: .74rem; font-style: italic; text-align: right; }
.panel .cab-note { padding: 0 20px 16px; }

/* Refus 409 du serveur (sélection ≠ pièces transmissibles) : écarts listés, texte + filet rouge. */
.cab-refus { border-left: 4px solid var(--red); }
.cab-refus-groupe { padding: 0 20px 12px; }
.cab-refus-groupe > strong { display: block; margin-bottom: 4px; }
.cab-refus-groupe ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: .9rem; overflow-wrap: anywhere; }

.cab-blocages { list-style: none; margin: 0; padding: 4px 20px 16px; display: grid; gap: 12px; }
.cab-blocages > li { padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.cab-blocages > li > strong { display: block; margin-bottom: 6px; overflow-wrap: anywhere; }
.cab-blocages ul { margin: 0; padding-left: 18px; color: var(--amber); display: grid; gap: 3px; font-size: .88rem; }
.cab-grid .empty-state { margin: 4px 20px 20px; }

.cab-histo { width: 100%; border-collapse: collapse; }
.cab-histo th, .cab-histo td { padding: 12px 20px; border-top: 1px solid var(--line); text-align: left; font-size: .9rem; }
.cab-histo th { color: var(--muted); text-transform: uppercase; font-size: .7rem; }
.cab-histo-statut { font-weight: 800; }
.cab-histo-statut.ok { color: var(--green); }
.cab-histo-statut.ko { color: var(--red); }

.cab-help .cab-help-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 20px 18px; }
.cab-help-actions a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; text-decoration: none; }

.cab-periode:focus-visible, .cab-detail-actions button:focus-visible,
.cab-help-actions a:focus-visible {
  outline: 3px solid var(--copper); outline-offset: 2px;
}

/* Inspecteur documentaire persistant #cabinet-viewer à droite (même gabarit que /documents,
   /paiements et /inbox) ; les éléments à vérifier sont sélectionnables au clic et au clavier. */
.cab-inspector-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, .7fr); gap: 18px; align-items: start; }
.cab-inspector-layout > * { min-width: 0; }
.cab-page { min-width: 0; }
#cabinet-viewer { position: sticky; top: 16px; }
.cab-blocage[data-selection] { cursor: pointer; }
.cab-blocage[data-selection]:focus-visible { outline: 3px solid var(--copper); outline-offset: 2px; }
.cab-blocage.selected { border-color: var(--copper); background: #fff7ef; box-shadow: inset 3px 0 0 var(--copper); }

/* Cabinet contient déjà une colonne de périodes et une colonne de synthèse. Sous 1500 px,
   placer l'aperçu après la synthèse évite de comprimer ou chevaucher les informations. */
@media (max-width: 1500px) {
  .cab-inspector-layout { grid-template-columns: 1fr; }
  #cabinet-viewer { position: static; min-height: 0; }
}

/* --- Responsive : tablette --------------------------------------------------------------- */
@media (max-width: 1000px) {
  .cab-layout { grid-template-columns: 1fr; }
  .cab-periodes { position: static; }
  .cab-periode-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Responsive : mobile ----------------------------------------------------------------- */
@media (max-width: 640px) {
  .cab-grid { grid-template-columns: 1fr; }
  .cab-periode-list { grid-template-columns: 1fr; }
  .cab-detail-head { flex-direction: column; }
  .cab-detail-actions { width: 100%; }
  .cab-detail-actions button { flex: 1 1 auto; justify-content: center; }
  .cab-comp-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cab-comp-flag, .cab-comp-note { grid-column: 1 / -1; text-align: left; }
  .cab-histo th, .cab-histo td { padding: 10px 14px; }
}

/* =========================================================================================
   Écran Connecteurs V2 (Product Design §3.7/§8.5/§10.7) — « Mes flux fonctionnent-ils ? »
   Cartes lisibles (Email, Nextcloud, Facture électronique à venir), statut TEXTUEL, dernier
   passage, dernière erreur, activité récente. Réutilise .status-pill / .list-row / les tokens.
   ========================================================================================= */
.conn-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.conn-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 200px));
  gap: 12px;
  margin: 0;
}

.conn-kpis > div {
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.conn-kpis dt { color: var(--muted); font-size: .9rem; }
.conn-kpis dd { margin: 0; font-size: 1.7rem; font-weight: 800; }
.conn-kpis .conn-kpi-date { font-size: 1rem; font-weight: 700; align-self: end; }
.conn-kpi-alerte dd { color: var(--amber); }

.conn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

.conn-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.conn-card--avenir { box-shadow: none; background: #fbfaf7; }

.conn-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.conn-card-head > div { flex: 1 1 auto; min-width: 0; }
.conn-card-head h2 { margin: 0; font-size: 1.1rem; }
.conn-card-head p { margin: 3px 0 0; color: var(--muted); font-size: .92rem; }

.conn-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--copper);
  background: #fbf3ec;
  border-radius: 9px;
}

.conn-icon svg { width: 22px; height: 22px; }

.conn-facts { display: grid; gap: 8px; margin: 0; }

.conn-facts > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.conn-facts > div:last-child { padding-bottom: 0; border-bottom: 0; }
.conn-facts dt { color: var(--muted); }
.conn-facts dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.conn-alerte dd { color: var(--red); }

.conn-vide { margin: 0; color: var(--muted); }

.conn-details > summary {
  cursor: pointer;
  padding: 8px 0;
  color: var(--copper);
  font-weight: 800;
  list-style-position: inside;
}

.conn-details > summary:focus-visible {
  outline: 3px solid var(--copper);
  outline-offset: 2px;
  border-radius: 6px;
}

.conn-liste { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.conn-liste .list-row { min-height: 48px; }

.conn-footer {
  display: grid;
  gap: 4px;
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.conn-footer p { margin: 0; color: var(--muted); }
.conn-secure { font-weight: 700; color: var(--text) !important; }

/* --- Responsive : mobile ----------------------------------------------------------------- */
@media (max-width: 640px) {
  .conn-summary { flex-direction: column; align-items: stretch; }
  .conn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conn-summary #conn-refresh { width: 100%; }
  .conn-grid { grid-template-columns: 1fr; }
  .conn-card-head { flex-wrap: wrap; }
  .conn-card-head .status-pill { margin-left: 52px; }
}

/* =========================================================================================
   Écran « Aujourd'hui » V2 (Product Design §3.1/§5.1/§10.1) — cockpit quotidien compris en
   moins de 10 s : état du jour, KPIs réels, file priorisée, activité datée, risques.
   Réutilise .panel / .panel-head / .status-pill / .list-row / .empty-state / les tokens.
   ========================================================================================= */
.auj-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.auj-hero-main { display: grid; gap: 6px; min-width: 0; }
.auj-hero-count { font-size: 1.35rem; font-weight: 800; color: var(--text); }
.auj-hero-fresh { font-weight: 700; font-size: .92rem; }
.auj-fresh-success { color: var(--green); }
.auj-fresh-stale { color: var(--amber); }
.auj-fresh-error { color: var(--red); }
.auj-hero-semaine { color: var(--muted); font-size: .92rem; }

.auj-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.auj-kpi {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.auj-kpi:hover { border-color: var(--copper); box-shadow: var(--shadow); }
.auj-kpi:focus-visible { outline: 3px solid var(--copper); outline-offset: 2px; }
.auj-kpi-valeur { font-size: 1.9rem; font-weight: 800; color: var(--text); line-height: 1.1; }
.auj-kpi-texte { font-size: 1.15rem; }
.auj-kpi-label { color: var(--muted); font-size: .9rem; }
.auj-kpi.alerte .auj-kpi-valeur { color: var(--amber); }

.auj-action-list, .auj-liste { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.auj-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.auj-action-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--copper);
  background: #fbf3ec;
  border-radius: 9px;
}

.auj-action-icon svg { width: 22px; height: 22px; }
.auj-action-body { display: grid; gap: 5px; min-width: 0; }
.auj-action-body strong { font-size: 1.02rem; }
.auj-action-ref { color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }
.auj-action-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.auj-action-raison, .auj-action-echeance { color: var(--muted); font-size: .88rem; }
.auj-action-quoi { margin: 2px 0 0; color: var(--text); font-size: .9rem; }

.auj-action-cta { display: grid; gap: 8px; justify-items: stretch; }
.auj-action-cta .primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--copper);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.auj-action-cta .primary:hover { background: var(--copper-dark); }
.auj-action-cta .primary:focus-visible,
.auj-action-lien:focus-visible,
.auj-lien:focus-visible { outline: 3px solid var(--copper); outline-offset: 2px; border-radius: 6px; }
.auj-action-lien { color: var(--copper); font-weight: 700; text-decoration: none; text-align: center; font-size: .88rem; }
.auj-action-lien:hover { text-decoration: underline; }

.auj-lien { display: inline-block; color: var(--copper); font-weight: 800; text-decoration: none; }
.auj-lien:hover { text-decoration: underline; }
.auj-voir-tout { margin-top: 12px; }

.auj-bottom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.auj-bottom .panel { margin: 0; }
.auj-bottom .auj-lien { margin-top: 12px; }
.auj-vide { margin: 0; color: var(--muted); }
.auj-risque-actif { border-color: #f0d6bd; }

/* --- Responsive : mobile ----------------------------------------------------------------- */
@media (max-width: 1000px) {
  .auj-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auj-bottom { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .auj-hero { flex-direction: column; align-items: stretch; }
  .auj-hero #auj-refresh { width: 100%; }
  .auj-action { grid-template-columns: auto minmax(0, 1fr); }
  .auj-action-cta { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; align-items: center; gap: 14px; }
  .auj-action-cta .primary { padding: 0 18px; }
}

/* --- Paiements -------------------------------------------------------------------------- */
/* Paiements : liste à gauche, aperçu persistant #payment-viewer à droite (même gabarit que
   /documents). La colonne liste étant ~770 px à 1440, les cartes fournisseur et KPI passent
   sur deux rangées au lieu de la grille 7 colonnes plein écran. */
.payments-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, .95fr); gap: 18px; align-items: start; }
.payments-layout > * { min-width: 0; }
.payments-layout > .payments-page { container-type: inline-size; }
#payment-viewer {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow: auto;
}
#payment-viewer .viewer-metadata { padding: 10px 16px; }
#payment-viewer .meta-list {
  grid-template-columns: 1.2fr 1fr .85fr .65fr .65fr 1fr;
  gap: 12px;
  padding: 0;
}
#payment-viewer .meta-list div {
  display: block;
  min-width: 0;
}
#payment-viewer .meta-list dt {
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
#payment-viewer .meta-list dd {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#payment-viewer .viewer-original { background: #eef0f2; }
#payment-viewer .pdf-preview-image {
  width: 100%;
  max-width: none;
  max-height: none;
  height: auto;
}
/* Séparateur redimensionnable entre liste et aperçu, comme dans un client mail — desktop
   >= 1100 px uniquement. Il occupe l'ancien gap de 18 px (gap: 0 + colonne de 18 px) : sans
   largeur mémorisée (--payment-viewer-width absente), la répartition 1fr / .95fr est
   strictement identique à la grille historique. */
.payment-viewer-resizer { display: none; }
@media (min-width: 1100px) {
  .payments-layout { gap: 0; grid-template-columns: minmax(0, 1fr) 18px var(--payment-viewer-width, minmax(440px, .95fr)); }
  .payment-viewer-resizer {
    display: block;
    position: sticky;
    top: 16px;
    z-index: 3;
    width: 18px;
    height: min(720px, calc(100vh - 32px));
    cursor: col-resize;
    touch-action: none;
    outline: 0;
  }
  .payment-viewer-resizer::before {
    content: "";
    position: absolute;
    inset: 0 8px;
    border-radius: 2px;
    background: var(--line);
    transition: background .15s ease, inset .15s ease;
  }
  .payment-viewer-resizer:hover::before,
  .payment-viewer-resizer:focus-visible::before,
  .payments-layout.is-resizing .payment-viewer-resizer::before {
    inset-inline: 7px;
    background: var(--copper);
  }
  .payments-layout.is-resizing { cursor: col-resize; user-select: none; }
}
.payments-layout .payment-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.payments-layout .payment-controls { grid-template-columns: minmax(160px, 1.2fr) minmax(0, .5fr) minmax(0, .45fr); }
.payments-layout .payment-supplier-head { grid-template-columns: 44px minmax(120px, 1fr) auto minmax(120px, auto) minmax(92px, auto) auto; }
.payments-layout .payment-supplier-actions { min-width: 0; }
.payments-layout .payment-invoice-row, .payments-layout .payment-invoice-head { grid-template-columns: var(--payment-invoice-columns); }
.payments-layout .payment-detail-card { grid-template-columns: 40px minmax(0, 1fr) minmax(110px, auto) minmax(0, auto) 28px; }
.payment-invoice-row.selected, .payment-detail-card.selected { background: #f7f2ec; box-shadow: none; }
.payment-invoice-row.selected { margin: 0; padding: 0; }
button.payment-ref { padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; }
button.payment-ref:hover, button.payment-ref:focus-visible { color: var(--copper); text-decoration: underline; }
.payment-ref-wrap { display: inline-flex; gap: 7px; align-items: center; min-width: 0; }
.payment-copy-ref { opacity: 0; pointer-events: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; }
.payment-ref-wrap:hover .payment-copy-ref, .payment-copy-ref:focus-visible { opacity: 1; pointer-events: auto; }
.payment-copy-ref:hover { color: var(--copper); }
.payment-date { display: grid; gap: 2px; }
.payment-date small { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.payments-page { display: grid; gap: 14px; }
.payments-page .primary { background: var(--copper); color: #fff; border-color: var(--copper); }
.payments-page .primary.ghost { color: var(--copper); background: #fff7ef; border-color: transparent; }
.payment-kpis { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 10px; }
.payment-kpis button {
  min-height: 64px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  background: #fff;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(20, 27, 36, .05);
}
.payment-kpis strong { display: block; color: var(--text); font-size: 17px; line-height: 1.15; }
.payment-kpis span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.payment-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(120px, .45fr) minmax(112px, .4fr) minmax(230px, .8fr) minmax(140px, .5fr);
  gap: 10px;
  align-items: center;
}
.payment-controls input,
.payment-controls select {
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(20, 27, 36, .08);
}
.payment-selection-bar {
  position: sticky;
  bottom: 10px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(20, 27, 36, .12);
}
.payment-selection-bar strong { margin-right: auto; }
.payment-status,
.payment-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  color: #42526a;
  background: #f1f4f8;
  font-size: 12px;
  font-weight: 750;
}
.payment-status.late,
.payment-chip.late { color: #9f341d; background: #fff1ea; }
.payment-status.sent { color: #8a5a00; background: #fff7df; }
.payment-status.paid { color: #087443; background: #eaf7f0; }
.payment-chip.owner { color: var(--copper-dark); background: #fff4ea; }
.payment-groups { display: grid; gap: 12px; }
.payment-supplier-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(20, 27, 36, .04), 0 12px 28px rgba(20, 27, 36, .045);
  overflow: hidden;
}
.payment-supplier-card.open { box-shadow: 0 1px 2px rgba(20, 27, 36, .05), 0 18px 40px rgba(20, 27, 36, .07); }
.payment-supplier-head {
  display: grid;
  grid-template-columns: 44px minmax(160px, 1fr) auto minmax(150px, auto) minmax(110px, auto) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 20px;
}
.payment-supplier-identity { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.payment-supplier-logo {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 8px;
  color: var(--logo-fg);
  background: var(--logo-bg);
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0;
}
.payment-supplier-logo.image {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(20, 27, 36, .08);
  overflow: hidden;
}
.payment-supplier-logo img {
  display: block;
  max-width: 32px;
  max-height: 32px;
  object-fit: contain;
}
.payment-supplier-logo.small { width: 34px; height: 34px; font-size: 12px; }
.payment-supplier-logo.small img { max-width: 24px; max-height: 24px; }
.payment-supplier-head h2 { margin: 0; font-size: 18px; letter-spacing: 0; }
.payment-supplier-head p { margin: 0; color: var(--muted); font-weight: 700; white-space: nowrap; }
.payment-supplier-amount {
  display: grid;
  gap: 3px;
  justify-items: end;
  min-width: 0;
  text-align: right;
}
.payment-supplier-amount strong {
  font-size: 16px;
  white-space: nowrap;
}
.payment-meta-badges {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 24px;
  min-width: 0;
}
.payment-meta-due {
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
}
.payment-supplier-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  justify-self: end;
  min-width: 0;
}
.payment-supplier-actions button { white-space: nowrap; }
.payment-invoices {
  --payment-invoice-columns: 24px minmax(84px, .72fr) minmax(148px, 1.55fr) minmax(84px, .72fr) minmax(104px, .84fr) minmax(88px, .76fr);
  display: grid;
  padding: 0 20px 16px;
}
.payment-invoice-head {
  display: grid;
  grid-template-columns: var(--payment-invoice-columns);
  gap: 8px;
  align-items: center;
  min-height: 30px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}
.payment-invoice-row {
  display: grid;
  grid-template-columns: var(--payment-invoice-columns);
  gap: 8px;
  align-items: center;
  min-height: 42px;
  border-top: 1px solid rgba(20, 27, 36, .06);
  font-size: 14px;
}
.payment-invoice-row > .pay-select { margin: 0; justify-self: start; }
.payment-col-amount { justify-self: end; text-align: right; }
.payment-invoice-head > .payment-col-status,
.payment-invoice-row > .payment-status { justify-self: start; }
.payment-cell-label { display: none; }
.payment-invoice-row:first-child { border-top: 0; }
.payment-date { color: var(--muted); white-space: nowrap; }
.payment-ref { color: var(--text); font-weight: 700; text-decoration: none; }
.payment-ref-wrap,
.payment-ref { min-width: 0; }
.payment-ref { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Le panneau d'aperçu peut réduire la liste sans réduire le viewport. La grille doit donc
   réagir à la largeur réelle de la colonne, pas uniquement aux media queries de la page. */
@container (max-width: 620px) {
  .payment-supplier-head {
    grid-template-columns: 36px minmax(0, 1fr) auto auto;
    gap: 8px 10px;
    padding: 12px;
  }
  .payment-supplier-head > .payment-supplier-logo {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 36px;
    height: 36px;
  }
  .payment-supplier-identity { grid-column: 2; grid-row: 1; overflow: hidden; }
  .payment-supplier-identity h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .payment-meta-badges { grid-column: 2; grid-row: 2; }
  .payment-meta-due { grid-column: 3 / 5; grid-row: 2; font-size: 11px; }
  .payment-supplier-amount { grid-column: 3; grid-row: 1; }
  .payment-supplier-actions { grid-column: 4; grid-row: 1; }
  .payment-invoices {
    --payment-invoice-columns: 20px 58px minmax(90px, 1fr) 58px minmax(74px, auto) 58px;
    padding-inline: 8px;
  }
  .payment-invoice-head,
  .payment-invoice-row { gap: 12px; }
  .payment-invoice-row { font-size: 12px; }
  .payment-invoice-head { font-size: 9px; }
  .payment-copy-ref { width: 18px; height: 20px; font-size: 13px; }
  .payment-ref-wrap { gap: 3px; }
  .payment-status { font-size: 10px; padding-inline: 6px; }
}
.payment-detail-list { display: grid; gap: 8px; }
.payment-detail-card {
  display: grid;
  grid-template-columns: 40px minmax(220px, 1fr) 150px 130px 28px;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(20, 27, 36, .05);
}
.payment-detail-card span { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; }
.pay-select { width: 18px; height: 18px; accent-color: var(--copper); }

.recurrence-panel {
  margin-top: 4px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(20, 27, 36, .05);
}
.recurrence-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}
.recurrence-panel > summary::-webkit-details-marker { display: none; }
.recurrence-panel > summary span:first-child { display: grid; gap: 3px; }
.recurrence-panel > summary small { color: var(--muted); font-weight: 500; }
.recurrence-panel-body { display: grid; gap: 14px; padding: 0 18px 18px; }
.recurrence-list { display: grid; }
.recurrence-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 80px 90px 105px;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  border-top: 1px solid rgba(20, 27, 36, .07);
}
.recurrence-row.inactive { opacity: .62; }
.recurrence-row div { display: grid; gap: 4px; }
.recurrence-row div span { color: var(--muted); font-size: 13px; }
.recurrence-payment-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 12px;
  padding: 16px;
  background: #f8f5ef;
  border-radius: 8px;
}
.recurrence-payment-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 750; }
.recurrence-payment-form input,
.recurrence-payment-form select { min-height: 40px; padding: 0 10px; border: 1px solid rgba(20, 27, 36, .1); border-radius: 7px; background: #fff; }
.recurrence-form-actions { display: flex; gap: 8px; align-items: end; }

.inbox-payment-meta {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 4px;
}
.inbox-payment-meta div {
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8f5ef;
}
.inbox-payment-meta dt {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.inbox-payment-meta dd {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

@media (max-width: 1000px) {
  .payments-layout { grid-template-columns: 1fr; }
  #payment-viewer { position: static; }
}
@media (max-width: 980px) {
  .payment-kpis, .payments-layout .payment-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payments-layout .payment-controls { grid-template-columns: 1fr; }
  .payments-layout .payment-supplier-head, .payments-layout .payment-invoice-row, .payments-layout .payment-detail-card { grid-template-columns: 1fr; }
  .payment-invoice-head { display: none; }
  .payment-cell-label { display: block; }
  .payments-layout .payment-supplier-meta, .payments-layout .payment-supplier-actions { grid-column: auto; }
  .payment-controls, .payment-supplier-head, .payment-invoice-row, .payment-detail-card { grid-template-columns: 1fr; }
  .recurrence-row, .recurrence-payment-form { grid-template-columns: 1fr; }
  .payment-supplier-meta { display: grid; grid-template-columns: 1fr; }
  .payment-supplier-amount { justify-items: start; text-align: left; }
  .payment-supplier-actions { justify-content: flex-start; justify-self: stretch; min-width: 0; }
  .inbox-payment-meta { grid-template-columns: 1fr; }
}

/* Inbox : file à gauche, panneau de détail persistant #inbox-viewer à droite (même gabarit
   que /documents et /paiements). Cartes et lignes de surveillance sélectionnables au clic et
   au clavier (tabindex) ; l'élément sélectionné est surligné comme une facture Paiements. */
.inbox-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, .7fr); gap: 18px; align-items: start; }
.inbox-layout > * { min-width: 0; }
.inbox-page { min-width: 0; }
#inbox-viewer { position: sticky; top: 16px; }
.inbox-card[data-selection], .watch-item[data-selection] { cursor: pointer; }
.inbox-card[data-selection]:focus-visible, .watch-item[data-selection]:focus-visible { outline: 3px solid var(--copper); outline-offset: 2px; }
.inbox-card.selected { border-color: var(--copper); background: #fff7ef; box-shadow: inset 3px 0 0 var(--copper); }
.watch-item.selected { background: #fff7ef; box-shadow: inset 3px 0 0 var(--copper); }
.inbox-detail-meta { margin: 8px 0 0; color: var(--muted); }
.inbox-detail-sans-piece { margin-top: 14px; }
@media (max-width: 1000px) {
  .inbox-layout { grid-template-columns: 1fr; }
  #inbox-viewer { position: static; min-height: 0; }
}

/* Dépôt iSuite (écran Cabinet, 18/09/2026) */
.cab-isuite .panel-head { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cab-isuite-message { margin: 0 20px 8px; font-weight: 700; }
.cab-isuite-resume, .cab-isuite-cr { padding: 0 20px 14px; display: grid; gap: 10px; }
.cab-isuite-synthese { margin: 0; }
.cab-isuite-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cab-isuite-compteurs, .cab-isuite-pieces, .cab-isuite-nombres { margin: 4px 0 0; padding-left: 18px; }
.cab-isuite-pieces li { overflow-wrap: anywhere; margin: 2px 0; }
.cab-isuite-cr h3 { margin: 6px 0 0; font-size: 1rem; }
.cab-isuite-liberer, .cab-isuite-autoriser { margin-left: 6px; }
.cab-isuite-suivi { padding: 0 20px 10px; display: grid; gap: 8px; }
.cab-isuite-mois { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; text-decoration: underline; cursor: pointer; }
@media (max-width: 720px) { .cab-isuite-colonnes { grid-template-columns: 1fr; } }

/* Correction humaine d'un champ de classement (R13) : visible sous la valeur corrigée. */
.correction-humaine {
  display: block;
  margin-top: 2px;
  font-size: 0.85em;
  font-style: italic;
  color: var(--muted, #6b7280);
}
.correction-a-revoir { font-style: normal; font-weight: 600; color: var(--warning, #b45309); }

/* [19/09/2026] Virement à vérifier : visible sur la ligne, fermé par un humain. */
.payment-verification { display: block; margin-top: 4px; font-size: 0.85em; color: var(--warning, #b45309); font-weight: 600; }
.payment-verification button { margin-left: 6px; font-size: 0.9em; }