/* ============================================================================
   PROVIEW — « REGISTRE » · LOT 2 : LE CONTENU
   ----------------------------------------------------------------------------
   Chargée après app.css et registre-shell.css. Même principe : on se branche sur
   les classes que `pages.js` produit déjà, on n'en renomme aucune, on ne touche
   pas au JavaScript.

   Discipline tenue dans toute la feuille — c'est elle qui rend le lot sûr :
   on ne modifie QUE la couleur, le filet, le rayon, l'ombre et la typographie.
   Jamais `display`, `position`, `width` ni une grille : ce sont eux qui
   casseraient une mise en page qu'on ne peut pas toute relire.

   Les trois règles du système :
     1. le filet plutôt que la carte  → aucune ombre sur ce qui est dans le flux ;
     2. la couleur est une information → gris partout, teinte pour l'état/l'action ;
     3. le rayon est une information   → contenant 0, cliquable 2 px.
   ========================================================================== */

/* ============================================================================
   1. SURFACES — la carte devient un panneau
   Une carte posée dans le flux ne flotte pas : elle n'a donc pas d'ombre.
   L'ombre reste réservée à ce qui se superpose et capte le clic (menus, modales).
   ========================================================================== */
.card, .fiche-panel, .collapse-card, .mod-card, .crm-note-box,
.soc-sync-card, .about-card, .notif-all-card, .settings-section {
  border-radius: 0;
  box-shadow: none;
  border: 1px solid var(--rg-03);
  background: var(--rg-00);
}
.card-clickable:hover { box-shadow: none; transform: none; background: var(--rg-01); }
.card-title, .settings-section-title, .sage-title, .c360-sec-hd, .fiche-panel > h3 {
  font-size: 13px; font-weight: 600; color: var(--rg-08); letter-spacing: -.005em;
}
.card-dark { background: var(--rg-08); border-color: var(--rg-08); }
.divider { background: var(--rg-03); }

/* ============================================================================
   2. LES CHIFFRES
   Les cartes KPI deviennent des cellules d'une bande réglée : des chiffres qu'on
   compare doivent partager une ligne de base. L'icône décorative part — elle
   n'ajoute rien à « CA du mois » et vole la largeur de l'intitulé, qui se
   tronque dès qu'on traduit.
   ========================================================================== */
.kpi-grid { gap: 0; border: 1px solid var(--rg-03); background: var(--rg-00); }
.kpi-card {
  border-radius: 0; box-shadow: none;
  border: 0; border-left: 1px solid var(--rg-03);
  background: none;
}
.kpi-grid > .kpi-card:first-child { border-left: 0; }
.kpi-card:hover { transform: none; box-shadow: none; background: var(--rg-01); border-color: var(--rg-03); }
.kpi-ic, .kpi-icon, .w-kpi-ic { display: none; }
.kpi-label, .fiche-kpi-label, .c360-kpi-lbl, .w-kpi-sub {
  font-size: 10px; font-weight: 600; letter-spacing: .09em; color: var(--rg-06);
}
.kpi-value, .fiche-kpi-val, .c360-kpi-val, .w-kpi-value, .societe-stat-val {
  font-weight: 600; color: var(--rg-08); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.kpi-sub, .fiche-kpi-sub, .societe-stat-label { font-size: 11px; color: var(--rg-06); }
.fiche-kpi-bar, .c360-stats, .w-totals { border-radius: 0; }
.fiche-kpi { border-radius: 0; }

/* Histogramme : barres carrées, une seule teinte. Le graphique d'un ERP sert à
   repérer un creux, pas à décorer. */
.bar { border-radius: 0; background: var(--rg-04); opacity: 1; }
.bar-wrap:hover .bar { background: var(--rg-accent); }
.stock-bar, .stock-bar-wrap, .crm-card-prog-track, .crm-card-prog-fill { border-radius: 0; }

/* ============================================================================
   3. TABLEAUX — la pièce maîtresse
   En-tête souligné en 2 px (la réglure du registre), lignes séparées par un
   filet clair, chiffres à droite en chasse fixe.
   ========================================================================== */
.erp-table-wrap, .lines-table-wrap, .fiche-docs-table, .da-cons-tbl {
  border-radius: 0; box-shadow: none; border: 1px solid var(--rg-03);
}
.erp-table th, .lines-table th, .fiche-docs-table th, .perm-table thead th, .da-cons-tbl th {
  background: var(--rg-02);
  border-bottom: 2px solid var(--rg-08);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--rg-07);
  padding: 7px 12px;
}
.erp-table td, .lines-table td, .fiche-docs-table td, .da-cons-tbl td {
  border-bottom: 1px solid var(--rg-03);
  font-size: 13px; color: var(--rg-07);
  padding: 8px 12px;
}
.erp-table tbody tr:hover td, .lines-table tbody tr:hover td { background: var(--rg-01); }
.erp-table td.num, .erp-table th.num, .lines-table td.num,
.doc-card-amount, .kanban-card-amt, .devis-line-tot, .row-amount, .crm-card-amt,
.article-price, .c360-row-amt, .dash-doc-amt {
  font-variant-numeric: tabular-nums;
}
/* Le pied porte les totaux : filet haut appuyé, jamais un fond coloré. */
.erp-table tfoot td, .devis-total-row {
  border-top: 2px solid var(--rg-08);
  font-weight: 600; color: var(--rg-08);
}
.devis-totals { border-radius: 0; }
.devis-total-ttc { font-weight: 600; }

/* Une RÉFÉRENCE n'est pas du texte : c'est un identifiant. On la lit caractère
   par caractère, on la compare en colonne, on la dicte au téléphone. */
.doc-card-ref, .kanban-card-ref, .article-card-ref, .article-grid-ref,
.fiche-ref, .line-ref, .ref-badge, .badge-sage, .soc-code, .dash-doc-ref, .log-time {
  font-family: var(--rg-mono);
  font-size: 12px; font-weight: 500; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   4. ÉTATS — la gélule devient une pastille carrée
   Fond teinté à ~10 %, contour à ~35 %, texte à la teinte PLEINE : lisible, et
   non un aplat saturé qui écraserait les montants voisins. Sur 200 lignes, 200
   gélules pleines forment un damier qui prend le pas sur les données.
   ========================================================================== */
.badge, .doc-badge, .conn-badge, .selected-badge, .fiche-tab-badge, .pdf-flag {
  border-radius: var(--rg-r);
  font-size: 11px; font-weight: 600;
  text-transform: none; letter-spacing: 0;
  padding: 2px 7px;
  border: 1px solid transparent;
}
.badge-ok,   .conn-ok   { background: #eaf3ed; color: #1f7a45; border-color: rgba(31,122,69,.35); }
.badge-info               { background: #e9eff5; color: #1a5b91; border-color: rgba(26,91,145,.35); }
.badge-warn, .conn-warn { background: #f6f0e2; color: #92610a; border-color: rgba(146,97,10,.35); }
.badge-err,  .conn-err  { background: #f7ebea; color: #a92a20; border-color: rgba(169,42,32,.35); }
.badge-gray               { background: var(--rg-01); color: var(--rg-06); border-color: var(--rg-04); }
/* La référence Sage est un CODE, pas un état : filet neutre, chasse fixe. */
.badge-sage, .ref-badge {
  background: var(--rg-00); color: var(--rg-07); border-color: var(--rg-04);
  font-weight: 500;
}

/* ============================================================================
   5. ONGLETS — soulignés, jamais posés dans une gouttière arrondie
   L'onglet actif se rattache visuellement au contenu qu'il ouvre : c'est la
   métaphore d'origine, et elle se perd dans un fond gris à coins ronds.
   ========================================================================== */
.type-tabs, .fiche-tabs, .filter-tabs {
  background: none; border-radius: 0; padding: 0;
  gap: 18px; border-bottom: 1px solid var(--rg-03);
}
.type-tab, .fiche-tab {
  border-radius: 0; background: none; box-shadow: none;
  padding: 9px 0; font-size: 13px; font-weight: 500; color: var(--rg-06);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.type-tab:hover, .fiche-tab:hover { color: var(--rg-08); border-bottom-color: var(--rg-04); }
.type-tab.active, .fiche-tab.active {
  background: none; box-shadow: none;
  color: var(--rg-08); font-weight: 600; border-bottom-color: var(--rg-08);
}
.type-tab-count, .fiche-tab-badge, .kanban-cnt, .doc-type-cnt {
  background: none; color: var(--rg-05);
  font-size: 11px; font-weight: 500; padding: 0 0 0 2px;
  border-radius: 0; min-width: 0;
}
.type-tab.active .type-tab-count { color: var(--rg-07); }

/* Onglets de type de pièce (DE / BC / BL / FA …) — ils portent une icône et un
   code : on les garde en cases, mais carrées et sans ombre. */
.doc-type-tabs { gap: 0; }
.doc-type-tab {
  border-radius: 0; box-shadow: none;
  border: 1px solid var(--rg-03); margin-right: -1px;
  background: var(--rg-00);
}
.doc-type-tab:hover { background: var(--rg-01); z-index: 1; }
.doc-type-tab.active {
  background: var(--rg-02); border-color: var(--rg-08);
  box-shadow: inset 0 -2px 0 var(--rg-08);
  z-index: 2;
}
.doc-type-code { font-family: var(--rg-mono); font-weight: 600; letter-spacing: .04em; }
.doc-type-label { font-size: 11px; color: var(--rg-06); }
.doc-type-icon { color: var(--rg-05); }

/* ============================================================================
   6. FILTRES — des cases à filet, pas des gélules
   Le compte reste lisible même quand le filtre est actif.
   ========================================================================== */
.filter-pill, .adv-chip, .w-period-chip, .soc-conn-chip, .da-seg > * {
  border-radius: var(--rg-r);
  border: 1px solid var(--rg-04);
  font-size: 12px; font-weight: 500;
  padding: 5px 10px;
  background: var(--rg-00); color: var(--rg-06);
}
.filter-pill:hover { border-color: var(--rg-05); color: var(--rg-08); background: var(--rg-02); }
.filter-pill.active {
  background: var(--rg-08); border-color: var(--rg-08); color: var(--rg-00); font-weight: 600;
}
.filter-pill-count {
  background: none; border-radius: 0; color: var(--rg-05);
  font-size: 11px; font-weight: 500; padding: 0 0 0 2px; min-width: 0;
}
.filter-pill.active .filter-pill-count { background: none; color: rgba(255,255,255,.72); }
.adv-chip { border-left: var(--rg-rail) solid var(--rg-accent); border-radius: 0; }
.adv-chip-remove:hover { color: #a92a20; }

/* ============================================================================
   7. BOUTONS — un seul plein par écran
   Dans un logiciel de saisie, cinq boutons pleins côte à côte ne hiérarchisent
   plus rien. Et l'action destructrice n'est jamais le bouton plein : ici on
   supprime des pièces comptables réelles.
   ========================================================================== */
.btn, .export-btn, .filter-btn, .col-picker-btn, .sync-btn, .adv-filter-toggle,
.adv-filter-apply, .adv-filter-reset, .vtoggle-btn, .btn-icon-sm {
  border-radius: var(--rg-r);
  font-weight: 500;
  box-shadow: none;
}
.btn { min-height: 32px; font-size: 13px; border-color: var(--rg-04); }
.btn:hover { background: var(--rg-02); border-color: var(--rg-05); }
.btn-sm { min-height: 28px; font-size: 12px; border-radius: var(--rg-r); }
.btn-primary, .adv-filter-apply {
  background: var(--rg-accent); border-color: var(--rg-accent); font-weight: 600;
}
.btn-primary:hover { filter: brightness(.94); }
.btn-danger { background: var(--rg-00); color: #a92a20; border-color: var(--rg-04); }
.btn-danger:hover { background: #f7ebea; border-color: #a92a20; }
.btn-dark { background: var(--rg-08); border-color: var(--rg-08); }
.btn-full { min-height: 40px; }

/* Bascule de vue (Cartes / Tableau / Kanban) : boutons soudés = même famille. */
.view-toolbar, .vtoggle, .odoo-toolbar { border-radius: 0; box-shadow: none; background: none; }
.vtoggle { border: 0; padding: 0; }
.vtoggle-btn { border: 1px solid var(--rg-04); margin-left: -1px; border-radius: 0; background: var(--rg-00); }
.vtoggle-btn:first-child { border-radius: var(--rg-r) 0 0 var(--rg-r); margin-left: 0; }
.vtoggle-btn:last-child  { border-radius: 0 var(--rg-r) var(--rg-r) 0; }
.vtoggle-btn.active { background: var(--rg-08); border-color: var(--rg-08); color: var(--rg-00); z-index: 1; }

/* ============================================================================
   8. CARTES DE LISTE (documents, tiers, articles, kanban)
   Elles restent des cartes — la vue « Cartes » existe pour ça — mais elles
   cessent de flotter : filet 1 px, coins vifs, et le FILET D'ÉTAT à gauche,
   qui place la couleur à une abscisse fixe et se balaie d'un seul regard.
   ========================================================================== */
.doc-card, .tiers-card, .article-card, .article-grid-card, .kanban-card,
.crm-opp-card, .fiche-depot-card, .crm-act-row, .notif-item, .log-row, .mod-card {
  border-radius: 0;
  box-shadow: none;
  border: 1px solid var(--rg-03);
  background: var(--rg-00);
}
.doc-card:hover, .tiers-card:hover, .article-card:hover, .article-grid-card:hover,
.kanban-card:hover, .crm-opp-card:hover {
  box-shadow: none; transform: none; background: var(--rg-01); border-color: var(--rg-04);
}
.doc-card-client, .tiers-name, .article-card-name, .article-grid-name,
.kanban-card-name, .crm-card-title, .dash-doc-client {
  font-weight: 600; color: var(--rg-08);
}
.doc-card-date, .tiers-meta, .article-card-cat, .kanban-card-date,
.crm-card-sub, .card-meta, .row-sub, .notif-when, .log-msg {
  color: var(--rg-06);
}
/* L'avatar de tiers est carré, comme celui de l'utilisateur. */
.tiers-avatar, .avatar, .fiche-contact-avatar { border-radius: var(--rg-r); font-weight: 600; }

.kanban-board { gap: 10px; }
.kanban-col { border-radius: 0; background: var(--rg-01); border: 1px solid var(--rg-03); }
.kanban-col-hdr {
  border-radius: 0; background: var(--rg-02);
  border-bottom: 2px solid var(--rg-08);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
}

/* ============================================================================
   9. FORMULAIRES
   Le champ se signale par son FILET, pas par une ombre interne. Le libellé est
   au-dessus, en micro-capitales : il ne concurrence jamais la valeur saisie.
   ========================================================================== */
.field label, .adv-filter-field > label, .line-label, .detail-item > label {
  font-size: 10px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--rg-06);
}
.field input, .field select, .field textarea, .inp-sm,
.adv-filter-field input, .adv-filter-field select, .search-bar input {
  border-radius: var(--rg-r);
  border: 1px solid var(--rg-04);
  font-size: 13px;
  box-shadow: none;
}
.field input:focus, .field select:focus, .field textarea:focus,
.adv-filter-field input:focus, .adv-filter-field select:focus {
  border-color: var(--rg-accent);
  box-shadow: inset 0 0 0 1px var(--rg-accent);
}
.adv-filter-panel, .adv-filter-bar {
  border-radius: 0; box-shadow: none; border: 1px solid var(--rg-03); background: var(--rg-00);
}
.adv-filter-panel-title {
  font-size: 10px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--rg-06);
}

/* ============================================================================
   10. MENUS ET SURFACES FLOTTANTES
   Le SEUL endroit où l'ombre est autorisée : elle dit « ceci flotte au-dessus
   et capte le clic », pas « ceci est important ».
   ========================================================================== */
.col-picker-menu, .typeahead-dd, .notif-panel, .modal-card, .login-lang-menu {
  border-radius: 0;
  border: 1px solid var(--rg-04);
  box-shadow: 0 4px 16px rgba(20,20,18,.14), 0 0 0 1px rgba(20,20,18,.08);
}
.modal-card { box-shadow: 0 24px 64px rgba(20,20,18,.30); }
.modal-head { border-bottom: 2px solid var(--rg-08); }
.modal-foot { border-top: 1px solid var(--rg-03); background: var(--rg-01); }
.modal-ov { background: rgba(17,17,16,.44); }
.col-picker-menu-title, .col-picker-menu-title, .notif-sec {
  font-size: 10px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--rg-05);
}
.col-opt:hover, .typeahead-item:hover, .notif-item:hover { background: var(--rg-02); }

/* ============================================================================
   11. ALERTES ET MESSAGES
   Filet d'état à gauche + fond très pâle : le même vocabulaire que les lignes de
   tableau. L'utilisateur n'a qu'un code couleur à apprendre pour toute l'app.
   ========================================================================== */
.alert, .stock-alerte-banner, .ent-banner {
  border-radius: 0;
  border: 1px solid var(--rg-03);
  border-left: var(--rg-rail) solid var(--rg-04);
  font-size: 13px;
}
.alert-error   { background: #f7ebea; border-color: var(--rg-03); border-left-color: #a92a20; color: #7d2019; }
.alert-success { background: #eaf3ed; border-color: var(--rg-03); border-left-color: #1f7a45; color: #175832; }
.toast {
  border-radius: var(--rg-r);
  background: var(--rg-08); color: var(--rg-00);
  box-shadow: 0 4px 16px rgba(20,20,18,.24);
  font-size: 13px;
}
.toast-err  { background: #a92a20; }
.toast-warn { background: #92610a; }

/* ============================================================================
   12. ÉTATS LIMITES — vide, chargement
   Aucune illustration, aucun emoji géant. Un vide dans un ERP n'est pas un
   moment de charme : c'est une question à trancher (« pas encore de donnée » ou
   « mon filtre est trop étroit ? »).
   ========================================================================== */
.empty-state, .empty, .kanban-empty, .lines-empty, .fiche-no-data, .notif-empty {
  border-radius: 0;
  border: 1px dashed var(--rg-04);
  background: var(--rg-00);
  box-shadow: none;
}
.empty-icon { font-size: 22px; opacity: .35; }
.empty-title { font-size: 13px; font-weight: 600; color: var(--rg-08); }
.empty-sub, .empty-mini { font-size: 12px; color: var(--rg-06); }
.spinner { border-radius: 50%; border-top-color: var(--rg-accent); }

/* ============================================================================
   13. FICHES
   Une fiche se lit comme un formulaire papier : intitulé à gauche, valeur à
   droite, une ligne par fait — pas un empilement de cartes qui rejette la
   moitié des informations sous la ligne de flottaison.
   ========================================================================== */
.fiche-topbar { border-bottom: 2px solid var(--rg-08); background: none; box-shadow: none; }
.fiche-topbar-title { font-size: 19px; font-weight: 600; color: var(--rg-08); letter-spacing: -.015em; }
.fiche-id-item, .detail-item, .fiche-tarif-row, .c360-row, .crm-act-row {
  border-bottom: 1px solid var(--rg-03);
}
.fiche-id-item > span:last-child, .fiche-tarif-val, .detail-item > span { color: var(--rg-08); }
.fiche-page, .fiche-body { background: none; }
.results-bar, .docs-summary, .list-count {
  border-radius: 0; background: var(--rg-02); border: 1px solid var(--rg-03);
  font-size: 12px; color: var(--rg-06);
}

/* ============================================================================
   14. PAGINATION
   ========================================================================== */
.erp-pager .btn, .erp-pager button { border-radius: var(--rg-r); }

/* ============================================================================
   15. RTL — le filet d'état change de côté avec la lecture
   ========================================================================== */
[dir="rtl"] .adv-chip { border-left: 1px solid var(--rg-04); border-right: var(--rg-rail) solid var(--rg-accent); }
[dir="rtl"] .alert, [dir="rtl"] .stock-alerte-banner, [dir="rtl"] .ent-banner {
  border-left: 1px solid var(--rg-03); border-right: var(--rg-rail) solid var(--rg-04);
}
[dir="rtl"] .alert-error   { border-right-color: #a92a20; }
[dir="rtl"] .alert-success { border-right-color: #1f7a45; }
/* Montants, dates et références restent en LTR même en arabe : « 1 250,00 » et
   « DE00005 » se lisent à l'envers si on les laisse suivre la direction. */
[dir="rtl"] .doc-card-ref, [dir="rtl"] .kanban-card-ref, [dir="rtl"] .article-card-ref,
[dir="rtl"] .fiche-ref, [dir="rtl"] .badge-sage, [dir="rtl"] .ref-badge,
[dir="rtl"] .kpi-value, [dir="rtl"] .fiche-kpi-val, [dir="rtl"] .doc-card-amount,
[dir="rtl"] .erp-table td.num { direction: ltr; unicode-bidi: isolate; }

/* ============================================================================
   16. CORRECTIFS DE CONTRASTE
   Piège rencontré et corrigé : partout où app.css posait du BLANC EN DUR sur un
   fond coloré, éclaircir ce fond rend le texte invisible. Le blanc n'était pas
   un choix esthétique, c'était une dépendance implicite au fond.
   Règle à retenir : quand on change un fond, on redéclare TOUJOURS la couleur du
   texte dans la même règle — même si elle semble déjà bonne.
   ========================================================================== */
.doc-type-tab.active .doc-type-code  { color: var(--rg-08); }
.doc-type-tab.active .doc-type-label { color: var(--rg-06); }
.doc-type-tab.active .doc-type-icon  { color: var(--rg-06); }
.doc-type-tab.active .doc-type-cnt   { background: var(--rg-03); color: var(--rg-08); border-radius: var(--rg-r); }

/* Le sous-menu suit l'entrée principale : filet de 3 px, pas un aplat vert.
   Sans cela, le menu mélangeait deux vocabulaires d'état actif. */
.sidebar-sub {
  border-radius: 0;
  border-left: var(--rg-rail) solid transparent;
}
.sidebar-sub.active {
  background: var(--ch-bg-2);
  color: var(--ch-fg-hi);
  border-left-color: var(--rg-accent);
  font-weight: 600;
}
.sidebar-sub.active .sub-icon { color: var(--rg-accent); }
[dir="rtl"] .sidebar-sub { border-left: 0; border-right: var(--rg-rail) solid transparent; }
[dir="rtl"] .sidebar-sub.active { border-right-color: var(--rg-accent); }

/* En-tête de colonne kanban : fond clair ⇒ texte encre, explicitement. */
.kanban-col-hdr, .kanban-col-hdr * { color: var(--rg-08); }
.kanban-col-hdr .kanban-cnt { color: var(--rg-06); }

/* ============================================================================
   17. DEUX RÉGRESSIONS QUE J'AI MOI-MÊME INTRODUITES
   Trouvées par une sonde de contraste automatique passée sur 10 écrans, pas à
   l'œil : elles étaient invisibles justement parce que le texte l'était.
   La cause est symétrique du piège précédent — j'ai forcé du texte ENCRE sur des
   fonds que je n'avais pas neutralisés. Même leçon, sens inverse : on ne change
   jamais une couleur de texte sans savoir sur quel fond elle atterrit.
   ========================================================================== */

/* a) Le connecteur Sage vit dans une `.card.card-dark` : mon `.sage-title` en
      encre devenait encre sur encre, donc illisible. Sur fond sombre, tout le
      texte repasse en clair. */
.card-dark, .card-dark .sage-title, .card-dark .card-title, .card-dark .log-msg,
.card-dark .sage-sub, .card-dark .sage-meta, .card-dark h3, .card-dark h4 {
  color: var(--rg-00);
}
.card-dark .sage-sub, .card-dark .sage-meta, .card-dark .log-time { color: rgba(255,255,255,.62); }
.card-dark .log-row { border-bottom-color: rgba(255,255,255,.12); }

/* b) Les tuiles KPI de fiche étaient des aplats saturés (bleu, vert, gris,
      orange) avec du texte blanc. En leur donnant des intitulés gris, je les
      rendais illisibles — mais surtout, ce sont précisément les « gros KPI
      colorés » que la refonte doit supprimer : un aplat de couleur ne dit rien
      de plus qu'un chiffre bien posé, et il interdit d'y placer une alerte.
      Elles deviennent des cellules réglées, la teinte passant dans un filet de
      3 px à gauche — le même vocabulaire que partout ailleurs. */
.fiche-kpi, .fiche-kpi.green, .fiche-kpi.blue, .fiche-kpi.gray, .fiche-kpi.orange {
  background: var(--rg-00);
  border: 1px solid var(--rg-03);
  border-left: var(--rg-rail) solid var(--rg-04);
  border-radius: 0;
  box-shadow: none;
}
.fiche-kpi.green  { border-left-color: #1f7a45; }
.fiche-kpi.blue   { border-left-color: #1a5b91; }
.fiche-kpi.orange { border-left-color: #92610a; }
.fiche-kpi.gray   { border-left-color: var(--rg-05); }
.fiche-kpi .fiche-kpi-label { color: var(--rg-06); }
.fiche-kpi .fiche-kpi-val   { color: var(--rg-08); }
.fiche-kpi .fiche-kpi-sub   { color: var(--rg-06); }
[dir="rtl"] .fiche-kpi { border-left: 1px solid var(--rg-03); border-right: var(--rg-rail) solid var(--rg-04); }
[dir="rtl"] .fiche-kpi.green { border-right-color: #1f7a45; }
[dir="rtl"] .fiche-kpi.blue  { border-right-color: #1a5b91; }

/* ============================================================================
   18. DERNIERS RÉSIDUS DE DÉCOR
   Trouvés en balayant les 12 écrans à la recherche de tout rayon > 3 px et de
   toute ombre. Ce qui reste après ce bloc est VOULU : l'ombre des menus
   flottants et le soulignement inset de l'onglet de type actif.

   ⚠ `[id^="erp-table-"] > .erp-table-wrap` (0,2,0) l'emportait sur mon
   `.erp-table-wrap` (0,1,0) : le tableau gardait ses coins arrondis alors que
   la règle « contenant = 0 » semblait posée. Leçon : quand une règle du système
   « ne prend pas », c'est presque toujours une spécificité, pas une faute de
   syntaxe — et il faut égaler le sélecteur d'origine, pas ajouter !important.
   ========================================================================== */
[id^="erp-table-"] > .erp-table-wrap { border-radius: 0; }
.erp-pager { border-radius: 0; box-shadow: none; }
.adv-chip-clear { border-radius: var(--rg-r); }

/* Pastille d'état du journal : carrée comme toutes les autres du système. */
.log-icon { border-radius: var(--rg-r); }

/* Nuancier des couleurs de société : des carrés, pas des jetons ronds — et la
   sélection se marque par un anneau franc plutôt que par une ombre diffuse. */
.color-swatch { border-radius: var(--rg-r); box-shadow: none; }
.color-swatch.selected { box-shadow: 0 0 0 2px var(--rg-00), 0 0 0 3px var(--rg-08); }
.color-preview-pill { border-radius: var(--rg-r); }
.color-custom-input, input[type="color"] { border-radius: var(--rg-r); }

/* Même piège de spécificité que le tableau : `[id^="erp-table-"] > .erp-pager`
   (0,2,0). Le pied de pagination prolonge le tableau, il ne flotte pas. */
[id^="erp-table-"] > .erp-pager {
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--rg-03);
  background: var(--rg-01);
}

/* ============================================================================
   19. LE FILET D'ÉTAT SUR LES LIGNES — la signature du système
   ----------------------------------------------------------------------------
   C'est l'élément le plus important du template, et il manquait : la couleur
   d'état vit à une abscisse FIXE, dans la marge gauche. L'œil balaie UNE colonne
   pour lire l'état de cinquante lignes, là où une pastille se déplace avec la
   largeur du texte et ne se balaie pas.

   Le tour de force : `pages.js` ne pose aucune classe d'état sur le <tr>, mais
   il pose déjà `.badge-ok` / `.badge-err` / … dans la dernière cellule.
   `:has()` permet de remonter du badge à la ligne — donc d'obtenir le filet
   SANS TOUCHER AU JS. (Support vérifié sur l'instance avant d'écrire ceci.)
   ========================================================================== */
.erp-table tbody tr > td:first-child,
.lines-table tbody tr > td:first-child {
  border-left: var(--rg-rail) solid transparent;
  transition: border-left-width var(--rg-mo), border-left-color var(--rg-mo);
}
.erp-table tbody tr:has(.badge-ok)   > td:first-child { border-left-color: #1f7a45; }
.erp-table tbody tr:has(.badge-info) > td:first-child { border-left-color: #1a5b91; }
.erp-table tbody tr:has(.badge-warn) > td:first-child { border-left-color: #92610a; }
.erp-table tbody tr:has(.badge-err)  > td:first-child { border-left-color: #a92a20; }
.erp-table tbody tr:has(.badge-gray) > td:first-child { border-left-color: var(--rg-04); }
/* Le survol ÉPAISSIT le filet : le geste renforce la colonne de balayage au lieu
   d'ajouter un effet gratuit. */
.erp-table tbody tr:hover > td:first-child { border-left-width: 5px; }
[dir="rtl"] .erp-table tbody tr > td:first-child { border-left: 0; border-right: var(--rg-rail) solid transparent; }
[dir="rtl"] .erp-table tbody tr:has(.badge-ok)   > td:first-child { border-right-color: #1f7a45; }
[dir="rtl"] .erp-table tbody tr:has(.badge-info) > td:first-child { border-right-color: #1a5b91; }
[dir="rtl"] .erp-table tbody tr:has(.badge-warn) > td:first-child { border-right-color: #92610a; }
[dir="rtl"] .erp-table tbody tr:has(.badge-err)  > td:first-child { border-right-color: #a92a20; }
[dir="rtl"] .erp-table tbody tr:hover > td:first-child { border-left-width: 0; border-right-width: 5px; }

/* Le carré d'état DANS la pastille : elle se lit alors de loin (la surface) et
   se balaie de près (le carré). Les deux lectures cohabitent. */
.badge::before {
  content: ''; display: inline-block; vertical-align: 1px;
  width: 6px; height: 6px; margin-right: 6px;
  background: currentColor; flex-shrink: 0;
}
.badge-sage::before, .ref-badge::before, .pdf-flag::before { display: none; }
[dir="rtl"] .badge::before { margin-right: 0; margin-left: 6px; }

/* L'en-tête de colonnes reste collé pendant le défilement : perdre le nom des
   colonnes au bout de trente lignes est la faute la plus courante des listes ERP. */
.erp-table thead th { position: sticky; top: 0; z-index: 3; }

/* Densité : 40 px de ligne, c'est six lignes perdues par écran. On descend à 34
   sans rien tasser — la typographie n'a pas bougé. */
.erp-table td { padding-top: 6px; padding-bottom: 6px; }
.erp-table th { padding-top: 6px; padding-bottom: 6px; }

/* Le numéro de pièce est un IDENTIFIANT : chasse fixe, comme partout ailleurs. */
.erp-table tbody td:first-child b,
.lines-table tbody td:first-child b {
  font-family: var(--rg-mono); font-weight: 500; font-size: 12.5px;
  letter-spacing: .01em; color: var(--rg-08);
}
/* Le nom du tiers cesse d'être un lien souligné en pointillé : il est le second
   axe de lecture de la ligne, il doit se lire comme une donnée. */
.erp-table .lien-tiers { border-bottom: 0; color: var(--rg-08); font-weight: 500; }
.erp-table .lien-tiers:hover { color: var(--rg-accent); text-decoration: underline; }

/* ============================================================================
   20. FILTRES DE STATUT EN COULEUR
   ----------------------------------------------------------------------------
   Un filtre de statut porte la MÊME information que la colonne « Statut » : il
   doit parler la même langue. Gris, il oblige à relire le mot pour savoir sur
   quoi on filtre ; en couleur, la barre de filtres devient la LÉGENDE du
   tableau qu'elle commande.

   Le statut n'est ni une classe ni un data-attribut — il est dans l'appel :
   `onclick="loadVentesType('DE','ACCEPTE')"`. On le cible donc par sélecteur
   d'attribut. Les quotes dans le motif sont indispensables : sans elles,
   `'ANNULE'` matcherait aussi `'ANNULEE'` et `'LIVREE'` matcherait
   `'PARTIELLEMENT_LIVREE'`.

   La correspondance statut → teinte est recopiée de `badge()` dans app.js :
   une seule table de vérité, sinon un filtre vert commanderait des badges bleus.
   ========================================================================== */
.filter-pill::before {
  content: ''; display: inline-block; vertical-align: 0;
  width: 7px; height: 7px; margin-right: 6px;
  background: var(--rg-04); flex-shrink: 0;
}
/* « Tous » n'est pas un état : c'est l'absence de filtre. Il reste neutre. */
.filter-pill[onclick$="'')"]::before,
.filter-pill[onclick*=",'')"]::before { display: none; }

/* ── vert : la pièce a abouti ── */
.filter-pill[onclick*="'ACCEPTE'"]::before, .filter-pill[onclick*="'CONFIRME'"]::before,
.filter-pill[onclick*="'CONFIRMEE'"]::before, .filter-pill[onclick*="'PAYEE'"]::before,
.filter-pill[onclick*="'LIVREE'"]::before, .filter-pill[onclick*="'LIVRE'"]::before,
.filter-pill[onclick*="'VALIDEE'"]::before, .filter-pill[onclick*="'VALIDE'"]::before { background: #1f7a45; }

/* ── bleu : la pièce avance ── */
.filter-pill[onclick*="'EN_COURS'"]::before, .filter-pill[onclick*="'EMISE'"]::before,
.filter-pill[onclick*="'ENVOYEE'"]::before, .filter-pill[onclick*="'CONVERTI'"]::before,
.filter-pill[onclick*="'COMMANDEE'"]::before, .filter-pill[onclick*="'A_FACTURER'"]::before,
.filter-pill[onclick*="'A_COMPTABILISER'"]::before, .filter-pill[onclick*="'A_PREPARER'"]::before,
.filter-pill[onclick*="'A_LIVRER'"]::before, .filter-pill[onclick*="'COMPTABILISEE'"]::before { background: #1a5b91; }

/* ── ambre : la pièce attend quelqu'un ── */
.filter-pill[onclick*="'ENVOYE'"]::before, .filter-pill[onclick*="'SOUMISE'"]::before,
.filter-pill[onclick*="'PARTIELLEMENT_LIVREE'"]::before,
.filter-pill[onclick*="'PARTIELLEMENT_PAYEE'"]::before { background: #92610a; }

/* ── rouge : la pièce est bloquée ou perdue ── */
.filter-pill[onclick*="'REFUSE'"]::before, .filter-pill[onclick*="'EN_RETARD'"]::before,
.filter-pill[onclick*="'BLOQUE'"]::before, .filter-pill[onclick*="'ERREUR'"]::before { background: #a92a20; }

/* ── gris : la pièce est sortie du circuit ── */
.filter-pill[onclick*="'BROUILLON'"]::before, .filter-pill[onclick*="'EXPIRE'"]::before,
.filter-pill[onclick*="'ANNULEE'"]::before, .filter-pill[onclick*="'ANNULE'"]::before,
.filter-pill[onclick*="'CLOTUREE'"]::before { background: var(--rg-05); }

/* Actif : le carré passe en blanc pour rester visible sur le fond encre —
   sinon la teinte disparaît exactement au moment où elle compte le plus. */
.filter-pill.active::before { background: var(--rg-00); }
[dir="rtl"] .filter-pill::before { margin-right: 0; margin-left: 6px; }

/* La barre de résultats prolonge le tableau : c'est le total de la liste, pas
   une carte flottante posée au-dessus. */
.results-bar { border-bottom: 0; }
.results-bar b { color: var(--rg-08); font-variant-numeric: tabular-nums; }