/* ============================================================================
   HENDERSON — CHARTE UNIFIÉE
   ============================================================================
   Couche d'HARMONISATION chargée EN DERNIER sur toutes les pages. Henderson
   charge historiquement 5 systèmes CSS concurrents (eurotrade / accounting /
   comptabilite / memory / profile) en plus du canon (style.css) → polices,
   cartes, espacements et couleurs divergent d'une page à l'autre.
   Ce fichier réaffirme UNE seule identité (mint #7BB89A / cream #FAF6EE /
   DM Sans) sur tous les composants communs, sans réécrire les 5 systèmes.
   Identité INCHANGÉE — on rend cohérent, on ne change pas la marque.
   ============================================================================ */

:root {
  --hk-ink:        #2b2b28;   /* charcoal warm — texte principal */
  --hk-ink-soft:   #5a6a63;   /* texte secondaire / labels */
  --hk-ink-mute:   #8a978f;   /* texte tertiaire */
  --hk-mint:       #7BB89A;
  --hk-mint-deep:  #5a9b7d;
  --hk-mint-soft:  rgba(123,184,154,.12);
  --hk-cream:      #FAF6EE;
  --hk-cream-2:    #F3EEE3;
  --hk-card:       #ffffff;
  --hk-border:     rgba(42,89,64,.12);
  --hk-border-2:   rgba(42,89,64,.07);
  --hk-radius:     14px;
  --hk-radius-sm:  10px;
  --hk-shadow:     0 1px 3px rgba(42,89,64,.05), 0 6px 20px rgba(42,89,64,.05);
  --hk-font:       'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* ── Fond plein partout (corrige les pages au fond non rempli) ───────────── */
html, body { background: var(--hk-cream) !important; }

/* ── Typo de base — UNE police, échelle cohérente ───────────────────────── */
body, input, select, textarea, button, table, .settings-app, [class*="-page"] {
  font-family: var(--hk-font) !important;
}
body { font-size: 16px; line-height: 1.55; color: var(--hk-ink); -webkit-font-smoothing: antialiased; }

h1, .h1, .page-title { font-size: 26px !important; font-weight: 700; letter-spacing: -.012em; color: var(--hk-ink); line-height: 1.2; }
h2, .h2 { font-size: 20px !important; font-weight: 700; color: var(--hk-ink); line-height: 1.25; }
h3, .h3 { font-size: 17px !important; font-weight: 600; color: var(--hk-ink); }
h4, .h4 { font-size: 15px !important; font-weight: 600; color: var(--hk-ink); }
p, li, dd, dt { font-size: 15.5px; }
label, .label, .field-label { font-size: 14px !important; font-weight: 600; color: var(--hk-ink-soft); letter-spacing: .005em; }
small, .muted, .hint, .help, .help-text, .field-hint, .subtitle, .text-muted {
  font-size: 14px !important; color: var(--hk-ink-soft);
}
a { color: var(--hk-mint-deep); text-decoration: none; }
a:hover { color: var(--hk-mint); }

/* ── Cartes / sections — un seul style ──────────────────────────────────── */
.card, .settings-section, .settings-card, .panel, .box, .widget,
[class*="-card"]:not([class*="-card-"]):not(.sdbr-nav):not([class*="badge"]),
[class*="-panel"], [class*="-section"]:not(nav):not(aside):not(header):not(section.sdbr-nav) {
  /* On harmonise la FORME (bord/rayon/ombre), PAS le fond : forcer le fond
     casserait les cartes à accent voulu (ex: KPI « Total facturé » mint avec
     texte blanc → texte invisible sur fond blanc). */
  border: 1px solid var(--hk-border) !important;
  border-radius: var(--hk-radius) !important;
  box-shadow: var(--hk-shadow) !important;
}

/* ── Champs de formulaire — un seul style ───────────────────────────────── */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
select, textarea {
  font-size: 15px !important;
  color: var(--hk-ink) !important;
  background: #fff !important;
  border: 1px solid var(--hk-border) !important;
  border-radius: var(--hk-radius-sm) !important;
  padding: 11px 14px !important;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--hk-ink-mute) !important; }
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--hk-mint) !important;
  box-shadow: 0 0 0 3px var(--hk-mint-soft) !important;
}

/* ── Boutons — primaire mint, secondaire contour, taille cohérente ──────── */
/* Police/poids sur tous les boutons, mais PAS le border-radius sur les boutons
   ronds/icônes (FAB chat, cloche, avatar…) — sinon on carre le FAB. Le radius
   n'est appliqué qu'aux boutons à libellé (.btn-*, submit). */
button, .btn, [class*="-btn"], .button {
  font-family: var(--hk-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn-primary, button[type=submit], .primary, .btn--primary, .btn-mint {
  /* mint #7BB89A donnait texte blanc 2,29:1 (echec AA). mint-deep #3D7A5A = 5,1:1. */
  background: var(--mint-deep, #3D7A5A) !important;
  border: 1px solid var(--mint-deep, #3D7A5A) !important;
  color: #fff !important;
}
.btn-primary:hover, button[type=submit]:hover, .primary:hover, .btn--primary:hover {
  background: var(--mint-darker, #1F4A33) !important; border-color: var(--mint-darker, #1F4A33) !important;
}
.btn-secondary, .btn--secondary, .btn-outline, .secondary {
  background: #fff !important; border: 1px solid var(--hk-border) !important; color: var(--hk-ink) !important;
}
.btn-secondary:hover, .btn-outline:hover { background: var(--hk-cream-2) !important; }

/* ── Tables — en-tête sobre, lignes lisibles ────────────────────────────── */
table { border-collapse: collapse; width: 100%; }
th {
  font-size: 13px !important; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--hk-ink-soft) !important; text-align: left;
  padding: 12px 14px !important; border-bottom: 1px solid var(--hk-border) !important;
}
td { font-size: 15px !important; color: var(--hk-ink); padding: 13px 14px !important; border-bottom: 1px solid var(--hk-border-2) !important; }
tbody tr:hover { background: var(--hk-mint-soft) !important; }

/* ── Badges / pills / statuts — pilule cohérente ────────────────────────── */
.status-badge, .acct-badge, [class*="-badge"]:not(.hd-fab__badge):not(.hdr-notif-badge):not(.hdsn-conv-badge),
[class*="-pill"], [class*="-chip"], .tag, .badge {
  font-size: 12.5px !important; font-weight: 600 !important;
  border-radius: 999px !important; padding: 4px 11px !important;
  letter-spacing: .01em; display: inline-flex; align-items: center; gap: 5px;
}

/* ── Sidebar (.sdbr-) — espacement + état actif cohérents ───────────────── */
.sdbr-nav a, .sdbr-link, .sdbr-nav__link {
  font-size: 15px !important; color: var(--hk-ink-soft) !important;
  border-radius: var(--hk-radius-sm) !important; font-weight: 500;
}
.sdbr-nav a:hover, .sdbr-link:hover { background: var(--hk-mint-soft) !important; color: var(--hk-ink) !important; }
.sdbr-nav a.active, .sdbr-link.active, .sdbr-nav a[aria-current="page"] {
  background: var(--hk-mint-soft) !important; color: var(--hk-mint-deep) !important; font-weight: 600 !important;
}

/* ── Header (.hdr-) — fond cohérent ─────────────────────────────────────── */
header, .hdr, [class*="app-header"], [class*="topbar"] { background: var(--hk-cream) !important; }
/* ADAPTATIF : le header avait margin-left:16px + width:100% → débordait de 16px
   à droite (barre de défilement horizontale, « une partie sort de l'écran »).
   On le force à occuper pile la largeur dispo, sans débord. */
header.header, body.sidebar-layout > header.header {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* Pastille d'alertes (cloche) : la règle eurotrade `header.header *` forçait
   le texte en petrol (encre verte) → 3,38:1 sur coral-medium. On force texte
   blanc + fond coral-deep (#B84A35) = 5,16:1 (AA). Spécificité (0,2,3) >
   eurotrade (0,1,3). */
html body header.header .hdr-notif-badge {
  background: var(--coral-deep, #B84A35) !important;
  color: #FFFFFF !important;
}
/* Chip langue actif (FR/EN/BG) : même piège — eurotrade `header.header *
   {color:var(--et-petrol)!important}` + `.lang-btn.active{background:white}`
   gagnaient → texte sombre sur fond saturé (1,46-3,25:1). Spécificité (0,2,3)
   + !important → fond mint-deep + texte blanc = 5,1:1 (AA). */
html body header.header .hdr-lang-opt.active,
html body header.header .lang-btn.active {
  background: var(--mint-deep, #3D7A5A) !important;
  border-color: var(--mint-deep, #3D7A5A) !important;
  color: #FFFFFF !important;
}

/* ── Scrollbars — discrètes, dans la palette (fini la barre sombre) ─────── */
* { scrollbar-color: var(--hk-mint) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(123,184,154,.5); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(123,184,154,.8); border: 3px solid transparent; background-clip: content-box; }

/* ============================================================================
   RESPONSIVE MOBILE — toutes les pages (≤768px tél, ≤1024px tablette)
   ============================================================================
   Henderson reste un outil desktop, mais on assure une dégradation propre sur
   mobile : zéro débordement horizontal, contenu empilé, tables scrollables, et
   la sidebar passe en tiroir (déjà géré dans sidebar.js + burger header.js).
   Chargé en dernier sur les 80 pages → couvre tout l'app d'un coup. */

/* ── Tablette : grilles denses → 2 colonnes ─────────────────────────────── */
@media (max-width: 1024px) and (min-width: 769px) {
  .hdsn-analytics-grid, [class*="-cards"], .cards, .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ── Mobile (téléphone) ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Contenu pleine largeur (la sidebar passe en tiroir via sidebar.js) */
  body.sidebar-layout > *:not(.hdsn-sidebar):not(.header) { margin-left: 0 !important; }
  .container, [class*="-container"], .main-layout, main {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    overflow-x: hidden;            /* évite le débordement du layout desktop */
  }

  /* Toute grille multi-colonnes → 1 colonne empilée */
  .hdsn-analytics-grid, .hdsn-cfo-watch-grid, [class*="-grid"], [class*="grid-"],
  [class*="-cards"], .cards, .stats-grid, .kpi-strip, .mini-financial-strip,
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* Grilles dashboard à forte spécificité eurotrade (html body.dashboard-page …)
     → on égale/dépasse la spécificité, sinon le 5-colonnes l'emporte. */
  html body.dashboard-page .hdsn-analytics-grid,
  html body .hdsn-analytics-grid,
  html body .hdsn-cfo-watch-grid,
  html body .hdsn-cash-hero-accounts,
  html body .mini-financial-strip {
    grid-template-columns: 1fr !important;
  }

  /* Tables : scroll horizontal au lieu de déborder la page */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  thead th, tbody td { white-space: nowrap; }

  /* Cartes / sections : padding réduit */
  .card, [class*="-card"], [class*="-section"], .panel, .settings-section { padding: 16px !important; }

  /* Typo un cran plus compacte sur tél */
  h1, .h1, .page-title { font-size: 22px !important; }
  h2, .h2 { font-size: 18px !important; }
  h3, .h3 { font-size: 16px !important; }

  /* Header compact + n'occupe que la largeur dispo */
  header.header { padding: 8px 12px !important; }

  /* Rangées d'actions / filtres : passent à la ligne au lieu de déborder */
  [class*="-toolbar"], [class*="-actions"], [class*="-filters"], .toolbar, .filters {
    flex-wrap: wrap !important;
  }

  /* Boutons : cible tactile confortable, pleine largeur des CTA primaires */
  .btn-primary, button[type="submit"] { min-height: 44px; }

  /* Le chat overlay prend tout l'écran sur mobile (lisibilité) */
  [class*="chat-panel"], [class*="chat-overlay"] { width: 100% !important; max-width: 100% !important; }

  /* ──────────────────────────────────────────────────────────────────────
     ADDITIONS RESPONSIVE (audit 80 pages) — layouts multi-colonnes en
     -row / -col / two-col / tiles / *-stats NON captés par les patterns
     génériques ci-dessus. Sélecteurs réels vérifiés, mécanisme grid/flex
     confirmé, spécificité ajustée pour battre eurotrade/memory.
     ────────────────────────────────────────────────────────────────────── */

  /* Grilles à colonnes fixes (display:grid) → 1 colonne.
     form-row PRÉFIXÉ html[data-theme] body : sinon eurotrade-theme.css
     (html[data-theme=light] body .form-row, 0,1,3 !important) gagne et la
     règle est inerte (theme.js pose toujours data-theme=light). */
  html[data-theme] body .form-row,
  .comm-modal-row,
  .calc-results, .calc-results.secondary,
  .du-stats,
  .member-stats, .role-selector,
  .ob-row,
  .notification-stats,
  .mr-kpis,
  .yc-summary {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Grilles structurelles 3-4 col (style-memory.css forte spéc → html body) */
  html body .br-match-row,
  html body .mem-file-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  /* Barres d'en-tête flex (titre + action) → empilées */
  .section-header,
  .co-header,
  .billing-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  /* Cartes/items flex-row (icône + contenu + action) → colonne */
  .payment-method,
  .alert-item,
  .schedule-item,
  .security-item, .session-item, .api-key-item,
  .invite-item {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  /* Cartouches invoice/portail → empilés. iv-* = invoice-view.html ;
     .top/.parties/.title-block scopés à pay.html via body.portal. */
  .iv-top, .iv-parties,
  .invoice-doc .top, .invoice-doc .parties,
  body.portal .top, body.portal .parties {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }
  .iv-title-block,
  .invoice-doc .title-block, body.portal .title-block { text-align: left !important; }

  /* Bandeaux stats/CTA flex-row → colonne */
  .hero-stats,
  .quick-links, .contact-options,
  .score-tips,
  .client-selector {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  /* Onglets flex-row sans wrap → retour ligne autorisé */
  .chart-tabs, .tp-tabs { flex-wrap: wrap !important; }

  /* Lignes d'item devis/facture récurrente (desc+qty+prix+suppr, px fixes) →
     wrap, description pleine largeur */
  .q-line, .r-line {
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }
  .q-line input.desc, .r-line input.desc { flex: 1 1 100% !important; }

  /* Bloc « Personnaliser la période » (confrontation.html) : 3 contrôles
     date/select en flex inline → colonne. Ne matche que ce bloc. */
  details > div[style*="display:flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   ACCESSIBILITÉ & INTERACTION (hors media query — s'applique partout).
   Aligné sur style.css (focus clavier seul, outline:none au clic souris).
   Ne touche AUCUN layout. Audit 80 pages → couche manquante harmonisée.
   ════════════════════════════════════════════════════════════════════════ */

/* Bague de focus mint, visible UNIQUEMENT au clavier (pas au clic souris) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--hk-mint) !important;
  outline-offset: 2px !important;
  border-radius: var(--hk-radius-sm);
  box-shadow: 0 0 0 3px var(--hk-mint-soft) !important;
}
:focus:not(:focus-visible) { outline: none !important; }

/* Sélection de texte (mint doux, texte encre — contraste OK) */
::selection      { background: var(--hk-mint-soft); color: var(--hk-ink); }
::-moz-selection { background: var(--hk-mint-soft); color: var(--hk-ink); }

/* État désactivé cohérent */
button:disabled, .btn:disabled, [class*="-btn"]:disabled,
input:disabled, select:disabled, textarea:disabled,
[aria-disabled="true"] {
  opacity: .55 !important;
  cursor: not-allowed !important;
}

/* prefers-reduced-motion (opt-in utilisateur) : coupe anim/transition/scroll */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   CONTRASTE / LISIBILITÉ — couche correctrice WCAG AA (audit 2026-06-15)
   ════════════════════════════════════════════════════════════════════════
   Chargée EN DERNIER (henderson-charte.css). MÉCANISME RÉEL DE CASCADE :
   ce n'est PAS « html body » qui bat eurotrade (html body = 0,0,0,2 PERD même
   contre :root = 0,0,1,0). Ce qui gagne, c'est !important : nos overrides sont
   en !important et les cibles eurotrade visées ne le sont PAS — sauf les
   badges .memory-page (eux !important, spéc 0,0,3,1) qui exigent un préfixe
   body.memory-page pour être battus (0,0,3,2 + ordre de source tardif).
   ON NE TOUCHE QUE LA LISIBILITÉ : couleur de texte (ou fond de badge quand
   le texte EST sur ce fond). Palette de marque (mint/cream) INCHANGÉE — on
   remplace les teintes vives par leur encre foncée de même teinte.
   Ratios RECALCULÉS (fond crème #FAF6EE ou carte blanche, tints aplaties) :
   tous >= 4,5 (texte) / 3 (grand texte). Les chiffres en commentaire sont les
   ratios réels mesurés, pas estimés.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS GLOBAUX muté/tertiaire — racine du « texte trop pâle » ──────
   Redéfinir le token corrige par cascade TOUTES ses consommations. !important
   bat les défs originales (:root, non-!important). Vérifié : --taupe n'a AUCUN
   usage en border/background/fill (que du texte + alias texte) → sûr. ──────── */
/* NB : doit cibler :root (= html) lui-même, PAS seulement html body — sinon les
   tokens dérivés déclarés au :root (ex eurotrade `--et-text-mute: var(--taupe)`)
   se calculent au :root avec l'ANCIENNE valeur puis héritent figés vers le bas.
   `html :root` (workflow) était INERTE (:root ne peut pas être descendant de html). */
:root, html, html body {
  --taupe:        #6a6258 !important;  /* #8A8278 (3.5:1) → 5,56:1 ; corrige aussi --et-text-mute (var(--taupe)) → légendes donut, etc. */
  --hk-ink-mute:  #5f6e66 !important;  /* charte #8a978f (3.4:1) → 4,98:1 */
  --text-muted:   #6b6f76 !important;  /* memory #9CA3AF (2.5:1) → 4,68:1 */
}
/* Belt direct pour les % de légende donut (eurotrade html body.dashboard-page
   .hdsn-legend-value em, !important) — garantit le fix même si le token bouge. */
html body.dashboard-page .hdsn-legend-value em { color: #6a6258 !important; }

/* Belt explicite pour les sélecteurs --et-text-mute posés en !important
   (la cascade de token les couvre déjà via --taupe ; ceci verrouille les cas
   chart-hint/footer qui pourraient avoir une autre source). */
html body.dashboard-page .hdsn-chart-hint,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) footer,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .footer,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-footer,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-footer * {
  color: #6a6258 !important;  /* 5,56:1 sur cream (texte normal, AA OK) */
}

/* Texte indicatif vide / méta document (gray-400/500, style.css) */
html body .empty-hint,
html body .document-meta,
html body .documents-empty {
  color: #6b6f76 !important;  /* 4,68:1 sur cream */
}

/* Notification système discrète (style.css #94a3b8 ~2,6:1) */
html body .system-notification { color: #5f6b7a !important; }  /* 5,03:1 sur cream */

/* ── 2. SIDEBAR — item ACTIF : pastille mint conservée, encre mint foncée ───
   La régression vient de henderson-charte.css:131 (mint-deep #5a9b7d sur
   mint-soft = 2,8:1). On garde le fond d'identité et on passe texte + icône
   (currentColor) en encre. Markup réel (sidebar.js) : <a class="sdbr-item
   is-active" aria-current="page"> + .sdbr-item-icon/.sdbr-item-label. ──────── */
html body .sdbr-nav a.active,
html body .sdbr-link.active,
html body .sdbr-nav a[aria-current="page"],
html body .sdbr-item.is-active {
  background: var(--hk-mint-soft) !important;
  color: #1F4A33 !important;        /* mint-darker, 8,63:1 sur fond composé #EBEFE4 */
  font-weight: 600 !important;
}
html body .sdbr-item.is-active .sdbr-item-icon,
html body .sdbr-nav a[aria-current="page"] .sdbr-item-icon,
html body .sdbr-item.is-active .sdbr-item-label,
html body .sdbr-nav a[aria-current="page"] .sdbr-item-label {
  color: #1F4A33 !important;        /* icône + libellé enfant suivent l'encre */
}

/* ── 3. CARTES CFO « eyebrow » (badges accent au-dessus des donuts) ─────────
   Cibles eurotrade NON-!important (style-eurotrade-theme.css:4062-4064) → nos
   !important gagnent. ──────────────────────────────────────────────────────── */
html body .hdsn-cfo-eyebrow[data-accent="mint"] {
  color: var(--mint-darker,#1F4A33) !important;     /* teal #0d9488 (3.4:1) → 8,25:1 sur tint mint(cream), repasse mint */
  background: rgba(123,184,154,0.18) !important;     /* tint mint marque (remplace tint teal hors-charte) */
}
html body .hdsn-cfo-eyebrow[data-accent="red"] {
  color: var(--coral-darker,#7A2A1C) !important;     /* #dc2626 → 8,55:1, fond inchangé */
}
html body .hdsn-cfo-eyebrow[data-accent="amber"] {
  color: var(--warning-text,#6B4F0E) !important;     /* #b45309 → 7,07:1, fond inchangé */
}

/* ── 4. PRÉVISIONNEL / Cashflow 90j — insight en mode alerte ───────────────
   eurotrade:4121/4128 NON-!important → !important gagne. ──────────────────── */
html body .hdsn-forecast-insight.alert .hdsn-forecast-insight-label,
html body .hdsn-forecast-insight.alert .hdsn-forecast-insight-value {
  color: var(--coral-darker,#7A2A1C) !important;     /* #dc2626 sur fond rouge clair → 8,81:1 */
}

/* ── 5. AGING / commissions — âge vert + pastille « relancé » ───────────────
   eurotrade:4203/4229 NON-!important → !important gagne. ──────────────────── */
html body .hdsn-age-green {
  color: var(--mint-darker,#1F4A33) !important;      /* success #16A34A (3.18:1) → 10,07:1 */
}
html body .hdsn-aging-reminded {
  color: var(--mint-darker,#1F4A33) !important;      /* teal #0d9488 → 8,51:1, repasse mint */
  background: rgba(123,184,154,0.22) !important;      /* tint mint marque (remplace tint teal) */
}

/* ── 6. TABLEAU COMPTABLE — montants +/- (style-accounting.css:198-199,
   NON-!important, 0,0,2,0) ; marge de sécu sur hover mint-soft ────────────── */
html body .acct-table .pos { color: #2f6347 !important; }  /* 7,01:1 sur blanc / 6,39:1 sur hover mint-soft */
html body .acct-table .neg { color: #9a3a28 !important; }  /* 6,98:1 sur blanc / 6,36:1 sur hover */

/* ── 7. BADGES / PILLS MEMORY ───────────────────────────────────────────────
   IMPORTANT : deux familles de spécificité distincte.
   (a) .mem-badge-* et .mem-count-pill.* (style-memory.css:923-930, 1529-1536)
       sont NON-!important, basse spéc → `html body` + !important suffit.
   (b) .mem-tile-badge.* sont écrasés par eurotrade `html body.memory-page
       .mem-tile-badge` (0,0,3,1, !important, style-eurotrade-theme.css:1239)
       et .mem-tile-badge.error (:1260). Il FAUT préfixer body.memory-page
       (→ 0,0,3,2) sinon le fix est INERTE (badges rendus #d97706 2,86:1 /
       #ea0018 3,91:1, ÉCHEC AA). ─────────────────────────────────────────── */

/* (a) familles basse-spéc — html body suffit */
/* Jaune ambre « à revoir / non rapproché » */
html body .mem-badge-review,
html body .mem-badge-unmatched {
  color: #854d0e !important; background: rgba(234,179,8,.18) !important;  /* 6,08:1 */
}
/* Orange « en attente / alerte » */
html body .mem-badge-pending,
html body .mem-count-pill.warning {
  color: #92400e !important; background: rgba(245,158,11,.18) !important;  /* 6,19:1 */
}
/* Bleu « en traitement / info » */
html body .mem-badge-processing,
html body .mem-count-pill.info {
  color: #1d4ed8 !important; background: rgba(59,130,246,.20) !important;  /* 5,32:1 */
}
/* Violet « transfert interne » */
html body .mem-badge-internal {
  color: #6d28d9 !important; background: rgba(139,92,246,.15) !important;  /* 5,92:1 */
}
/* Rouge erreur / fermer (mem-badge-error, preview-error, close = basse spéc) */
html body .mem-preview-error,
html body .mem-preview-actions .close,
html body .mem-badge-error {
  color: #c81e1e !important;  /* 5,74:1 sur blanc */
}

/* (b) tuiles .mem-tile-badge.* — DOIVENT battre eurotrade 0,0,3,1 !important
   → préfixe body.memory-page (0,0,3,2 ; départage par ordre, charte charge après) */
html body.memory-page .mem-tile-badge.review {
  color: #854d0e !important; background: rgba(234,179,8,.18) !important;  /* 6,08:1 */
}
html body.memory-page .mem-tile-badge.pending {
  color: #92400e !important; background: rgba(245,158,11,.18) !important;  /* 6,19:1 */
}
html body.memory-page .mem-tile-badge.processing {
  color: #1d4ed8 !important; background: rgba(59,130,246,.20) !important;  /* 5,32:1 */
}
html body.memory-page .mem-tile-badge.error {
  color: #c81e1e !important;  /* sur fond eurotrade red.10 conservé → 4,82:1 */
}

/* Grand chiffre stat en alerte — eurotrade [class*=mem-stat] [class*=value]
   (0,0,3,1 !important) le force en encre ; on rétablit l'ambre 'warn' avec
   body.memory-page (0,0,3,2). Grand texte → seuil 3:1, on dépasse. */
html body.memory-page .mem-stat-value.warn { color: #a16207 !important; }  /* 4,92:1 sur blanc */

/* Libellés/méta de la modale de dédup (petit texte 11-12px → seuil 4.5) */
html body .mem-dedup-stat .lbl,
html body .mem-dedup-meta,
html body .mem-dedup-section-title,
html body .mem-dedup-soft,
html body .mem-dedup-ref.muted {
  color: #6a6258 !important;  /* aligné sur --taupe corrigé, 5,56:1 */
}

/* ── 8. VIGNETTES ICÔNES FICHIER (style.css:1903-1915, NON-!important) ────── */
html body .document-icon.excel { color: #15803d !important; }  /* #22c55e (~2.2:1) → 5,02:1 */
html body .document-icon.image { color: #1d4ed8 !important; }  /* #3b82f6 (~3.0:1) → 6,70:1 */
html body .document-icon.csv   { color: #854d0e !important; }  /* #eab308 (~1.7:1) → 6,85:1 */
/* ════════════════════════════════════════════════════════════════════════ */
/* ── Résidus audit contraste (vague 2) ─────────────────────────────────────
   KPI accent mint sur fond clair (acct-hub-tile) → vert profond lisible ;
   initiales d'avatar (sidebar + header, présentes partout) → encre mint. */
html body .acct-hub-tile .kpi { color: #2f6149 !important; }   /* #7BB89A 2.29:1 → ~5.9:1 */
html body .sdbr-user-avatar,
html body .hdr-avatar-initials,
html body #sdbrAvatar,
html body #hdsnAvatarInitials { color: #1F4A33 !important; }   /* initiales 3.76 → ~8:1 sur pastille mint-soft */