/* ============================================================================
   HENDERSON × EUROTRADE LIGHT THEME — V5.0
   Inspired by /Users/HH/Downloads/backups/eurotrade_v11_backup_2026-05-11_22h57_FINAL.html
   Loaded AFTER style.css + style-home-refresh.css → wins on cascade.
   ============================================================================ */

/* --- TOKENS ----------------------------------------------------------------- */
html, html[data-theme="dark"], html[data-theme="light"] {
  --et-bg-ivory: #fcfaf3;
  --et-bg-cream: #f7f3e8;
  --et-bg-neutral: #efede7;
  --et-bg-paper: #fdfbf5;

  --et-text: #1a1a1a;
  --et-text-soft: #4a4a4a;
  --et-text-mute: #6b6b6b;

  --et-petrol: #004953;
  --et-petrol-deep: #003741;
  --et-petrol-soft: #00626f;

  --et-mint: #00b77f;
  --et-mint-soft: #2cd9a8;
  --et-mint-deep: #009166;

  --et-gold: #c8a018;
  --et-red: #ea0018;

  --et-border: rgba(0, 73, 83, 0.14);
  --et-border-strong: rgba(0, 73, 83, 0.28);
  --et-divider: rgba(0, 73, 83, 0.08);

  --et-glass-bg: rgba(255, 255, 255, 0.55);
  --et-glass-border: rgba(255, 255, 255, 0.75);
  --et-glass-shadow: 0 8px 32px rgba(0, 73, 83, 0.08);

  --et-shadow-card: 0 4px 16px rgba(0, 73, 83, 0.06), 0 1px 3px rgba(0, 73, 83, 0.04);
  --et-shadow-card-hover: 0 8px 28px rgba(0, 73, 83, 0.10), 0 2px 6px rgba(0, 73, 83, 0.06);
  --et-shadow-mint: 0 4px 16px rgba(0, 183, 127, 0.20);

  --et-gradient-hero: linear-gradient(160deg, #002b33 0%, #004953 22%, #007062 50%, #00b77f 82%, #2cd9a8 100%);
  --et-gradient-kpi: linear-gradient(180deg, #003a44 0%, #004953 60%, #003741 100%);

  --et-font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  --et-font-display: 'Manrope', 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;

  --et-tracking-cap: 0.22em;
  --et-radius-pill: 999px;
  --et-radius-card: 16px;
  --et-radius-tile: 12px;
}

/* --- RESET DARK MODE ------------------------------------------------------- */
html,
html[data-theme="dark"],
html[data-theme="light"],
html.dashboard-page,
html:has(body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page)) {
  background: var(--et-bg-ivory) !important;
  color-scheme: light !important;
}
html[data-theme="dark"] body,
html[data-theme="light"] body,
html[data-theme="dark"] body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page),
html[data-theme="light"] body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page),
html body,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) {
  background:
    radial-gradient(circle at 20% 10%, rgba(0, 183, 127, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(0, 73, 83, 0.04) 0%, transparent 50%),
    var(--et-bg-ivory) !important;
  background-attachment: fixed !important;
  color: var(--et-text) !important;
  font-family: var(--et-font-body) !important;
}

/* Texture papier discrète */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page)::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0, 73, 83, 0.03) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}
/* Z-index lift for in-flow content only — exclude fixed/overlay panels */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) > header,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) > main,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) > footer {
  position: relative;
  z-index: 1;
}

/* --- TYPO GLOBALE ---------------------------------------------------------- */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page),
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) * {
  color: inherit;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) h1,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) h2,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) h3,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) h4 {
  font-family: var(--et-font-display) !important;
  color: var(--et-petrol) !important;
  letter-spacing: 0.01em !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .section-label,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .pill-label,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) [data-section-title] {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: var(--et-tracking-cap) !important;
  text-transform: uppercase !important;
  color: var(--et-petrol) !important;
}

/* --- HEADER GLASS ---------------------------------------------------------- */
/* v660 : counter-zoom retiré (le zoom global html: 1.5 a été supprimé aussi).
   Tout est désormais à sa taille native. */
html body header.header {
  position: sticky !important;
  top: 10px !important;
  margin: 10px 14px 0 !important;
  padding: 10px 20px !important;
  /* Verre dépoli : fond ivoire semi-transparent (pas blanc opaque) */
  background: rgba(252, 250, 243, 0.52) !important;
  -webkit-backdrop-filter: blur(36px) saturate(180%) brightness(1.04) !important;
  backdrop-filter: blur(36px) saturate(180%) brightness(1.04) !important;
  /* Bord supérieur brillant + bord subtil petrol → rend le verre visible */
  border: 1px solid rgba(255,255,255,0.82) !important;
  border-bottom: 1px solid rgba(0, 73, 83, 0.08) !important;
  border-radius: var(--et-radius-pill) !important;
  box-shadow:
    0 2px 24px rgba(0, 73, 83, 0.07),
    0 8px 40px rgba(0, 73, 83, 0.05),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
  z-index: 99 !important;
}
html body header.header,
html body header.header * {
  color: var(--et-petrol) !important;
}
html body header.header a,
html body header.header .nav-link,
html body header.header nav a {
  color: var(--et-text) !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  opacity: 0.85;
}
html body header.header a:hover {
  color: var(--et-petrol) !important;
  opacity: 1;
}

/* Logo HENDERSON. */
html body header.header .logo,
html body header.header [class*="brand"],
html body header.header [class*="logo-text"] {
  font-family: var(--et-font-display) !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: var(--et-petrol) !important;
}

/* CTA Profil Entreprise → pill mint */
html body header.header .cta,
html body header.header .btn-primary,
html body header.header [class*="profile"],
html body header.header .btn-cta {
  background: var(--et-mint) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 10px 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  box-shadow: var(--et-shadow-mint) !important;
  transition: background .15s, transform .15s, box-shadow .15s !important;
}
html body header.header .cta:hover,
html body header.header .btn-primary:hover,
html body header.header .btn-cta:hover {
  background: var(--et-petrol) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 73, 83, 0.3) !important;
}

/* --- SECTION VÉRITÉ FINANCIÈRE / KPI CARDS --------------------------------- */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .kpi-section,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .truth-section,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) [class*="verite"] {
  background: transparent !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .kpi-section > [class*="label"]:first-child,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .truth-section > [class*="label"]:first-child {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: var(--et-tracking-cap) !important;
  text-transform: uppercase !important;
  color: var(--et-petrol) !important;
  margin-bottom: 14px !important;
}

/* KPI ribbon → pétrol dark accent comme Eurotrade */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .kpi-row,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1px !important;
  background: var(--et-gradient-kpi) !important;
  border-radius: var(--et-radius-card) !important;
  padding: 1px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(0, 73, 83, 0.18) !important;
  position: relative !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .kpi-row::before,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .kpi-grid::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, var(--et-gold) 50%, transparent 100%);
  opacity: 0.55;
  z-index: 2;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .kpi-card,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .kpi {
  background: var(--et-gradient-kpi) !important;
  color: #fff !important;
  padding: 22px 24px !important;
  border-radius: 0 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .kpi-card *,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .kpi * {
  color: #fff !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .kpi-card .kpi-label,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .kpi-card [class*="label"],
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .kpi [class*="label"] {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: var(--et-tracking-cap) !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.7) !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .kpi-card .kpi-value,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .kpi-card [class*="value"],
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .kpi [class*="value"] {
  font-family: var(--et-font-display) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: 0.01em !important;
}

/* Pills delta (+0%, -0%) sur les KPI */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .kpi-card [class*="delta"],
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .kpi-card [class*="badge"],
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .kpi-card [class*="trend"] {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--et-mint-soft) !important;
  border: 1px solid rgba(44, 217, 168, 0.3) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* --- CHAT CONTAINER BRUCE -------------------------------------------------- */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .chat-container,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) [class*="chat-wrap"],
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) main > [class*="chat"] {
  background: #fff !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-card) !important;
  box-shadow: var(--et-shadow-card) !important;
  margin: 28px 0 !important;
  overflow: hidden !important;
}

/* Chat header — bandeau pétrol comme l'Eurotrade KPI bar */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .chat-header {
  background: var(--et-gradient-kpi) !important;
  color: #fff !important;
  padding: 16px 22px !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .chat-header *,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .chat-header h1,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .chat-header h2,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .chat-header h3 {
  color: #fff !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .chat-header [class*="icon"],
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .chat-header svg {
  color: var(--et-mint-soft) !important;
  fill: var(--et-mint-soft) !important;
}

/* Mode pills (Compta / Finances / Explorer) */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mode-button,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .chat-header [class*="mode"],
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) button[class*="mode"] {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 8px 16px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  transition: all .15s !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mode-button *,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) button[class*="mode"] * {
  color: #fff !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mode-button:hover,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) button[class*="mode"]:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  transform: translateY(-1px);
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mode-button.active,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) button[class*="mode"].active,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) button[class*="mode"][aria-pressed="true"] {
  background: var(--et-mint) !important;
  border-color: var(--et-mint) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 4px 12px rgba(0, 183, 127, 0.4) !important;
}

/* Chat messages */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .chat-messages,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .chat-main {
  background: #fdfbf5 !important;
  color: var(--et-text) !important;
  padding: 28px !important;
  min-height: 240px !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .chat-messages *,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .chat-main * {
  color: var(--et-text);
}

/* Bulle message Bruce */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .message-bubble,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .bruce-message,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) [class*="bruce-intro"] {
  background: #fff !important;
  border: 1px solid var(--et-border) !important;
  border-radius: 18px !important;
  padding: 18px 22px !important;
  color: var(--et-text) !important;
  box-shadow: 0 2px 8px rgba(0, 73, 83, 0.04) !important;
}

/* Avatar Bruce — halo subtil mint */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .bruce-avatar,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .chat-messages img[alt*="Bruce"],
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) img[alt*="Bruce"] {
  border-radius: 50% !important;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(0, 183, 127, 0.35), 0 4px 12px rgba(0, 73, 83, 0.12) !important;
}

/* --- ZONE INPUT CHAT ------------------------------------------------------- */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .chat-input-container,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) [class*="chat-input"] {
  background: rgba(255, 255, 255, 0.85) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  border-top: 1px solid var(--et-border) !important;
  padding: 16px 22px !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .chat-input,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) input[placeholder*="HENDERSON"],
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) textarea[placeholder*="HENDERSON"] {
  background: #fff !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-pill) !important;
  color: var(--et-text) !important;
  padding: 14px 22px !important;
  font-family: var(--et-font-body) !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .chat-input::placeholder,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) input::placeholder,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) textarea::placeholder {
  color: var(--et-text-mute) !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .chat-input:focus {
  outline: none !important;
  border-color: var(--et-mint) !important;
  box-shadow: 0 0 0 3px rgba(0, 183, 127, 0.15) !important;
}

/* Bouton Envoyer */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .send-button,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) button[class*="send"],
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) button[type="submit"] {
  background: var(--et-mint) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 12px 26px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  box-shadow: var(--et-shadow-mint) !important;
  cursor: pointer !important;
  transition: all .15s !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .send-button:hover,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) button[class*="send"]:hover {
  background: var(--et-petrol) !important;
  transform: translateY(-1px);
}

/* Trombone upload — see solid mint rule at bottom of file (line ~745) */

/* --- SUGGESTIONS RAIL ------------------------------------------------------ */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .rail-buttons,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .suggestions-rail,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) [class*="suggest"] {
  background: transparent !important;
  border-top: 1px solid var(--et-divider) !important;
  padding: 12px 22px !important;
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .rail-button,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .suggestion-button,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .rail-buttons button {
  background: #fff !important;
  color: var(--et-text) !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all .15s !important;
  box-shadow: 0 1px 2px rgba(0, 73, 83, 0.04);
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .rail-button:hover,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .suggestion-button:hover {
  border-color: var(--et-mint) !important;
  color: var(--et-mint-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 73, 83, 0.08);
}

/* --- PROFIL ENTREPRISE / LANG / LOGOUT ------------------------------------- */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) [class*="lang"],
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) [class*="logout"] {
  color: var(--et-text-soft) !important;
}

/* --- 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) .footer {
  background: transparent !important;
  border-top: 1px solid var(--et-divider) !important;
  color: var(--et-text-mute) !important;
  padding: 22px !important;
  font-size: 13px !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) footer a,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .footer a {
  color: var(--et-text-soft) !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) footer a:hover {
  color: var(--et-petrol) !important;
}

/* --- TOASTS / OVERLAYS ----------------------------------------------------- */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) #hdsnHomeUploadOverlay {
  background: #fff !important;
  color: var(--et-text) !important;
  border: 2px solid var(--et-mint) !important;
  box-shadow: 0 12px 40px rgba(0, 73, 83, 0.2) !important;
}

/* --- LINKS GLOBAUX --------------------------------------------------------- */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) a {
  color: var(--et-petrol);
  text-decoration: none;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) a:hover {
  color: var(--et-mint-deep);
}

/* --- SCROLLBAR ------------------------------------------------------------- */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page)::-webkit-scrollbar { width: 10px; }
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page)::-webkit-scrollbar-track { background: transparent; }
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page)::-webkit-scrollbar-thumb {
  background: rgba(0, 73, 83, 0.15);
  border-radius: 5px;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page)::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 73, 83, 0.28);
}

/* --- HENDERSON-SPECIFIC KPI STRIP ------------------------------------------- */
/* Real DOM: .kpi-strip-wrap > .kpi-strip-meta + .mini-financial-strip > .mini-metric */

html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .kpi-strip-wrap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 24px 0 12px !important;
}

html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .kpi-strip-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
  padding: 0 4px !important;
}

html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .kpi-strip-label {
  font-family: var(--et-font-display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: var(--et-tracking-cap) !important;
  text-transform: uppercase !important;
  color: var(--et-petrol) !important;
}

html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .kpi-period-select {
  background: #fff !important;
  border: 1px solid var(--et-border) !important;
  color: var(--et-text) !important;
  padding: 8px 14px !important;
  border-radius: var(--et-radius-pill) !important;
  font-family: var(--et-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0, 73, 83, 0.05) !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .kpi-period-select:hover {
  border-color: var(--et-mint) !important;
}

html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-financial-strip {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2px !important;
  background: var(--et-petrol) !important;
  border-radius: var(--et-radius-card) !important;
  overflow: hidden !important;
  box-shadow: 0 6px 20px rgba(0, 73, 83, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  position: relative !important;
}

html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-financial-strip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, var(--et-gold) 50%, transparent 100%);
  opacity: 0.55;
  z-index: 2;
  pointer-events: none;
}

html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-metric {
  background: var(--et-gradient-kpi) !important;
  color: #fff !important;
  padding: 20px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  border: none !important;
  border-radius: 0 !important;
  position: relative !important;
  transition: background .2s !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-metric * {
  color: #fff !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-metric:hover {
  background: linear-gradient(180deg, #004f59 0%, #005a66 60%, #00424e 100%) !important;
}

html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-icon {
  font-size: 22px !important;
  color: var(--et-mint-soft) !important;
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 50% !important;
  border: 1px solid rgba(44, 217, 168, 0.25) !important;
}

html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-metric .mini-label {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: var(--et-tracking-cap) !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.65) !important;
  display: block !important;
  margin-bottom: 2px !important;
}

html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-metric .mini-value {
  font-family: var(--et-font-display) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: 0.005em !important;
  display: block !important;
}

html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-metric .mini-delta {
  margin-left: auto !important;
  background: rgba(255, 255, 255, 0.10) !important;
  color: var(--et-mint-soft) !important;
  border: 1px solid rgba(44, 217, 168, 0.30) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 4px 10px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  align-self: center !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-metric .mini-delta.negative,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-metric .mini-delta.down {
  color: #ffb1b1 !important;
  border-color: rgba(255, 100, 100, 0.30) !important;
}

/* --- MAIN LAYOUT WRAPPER --------------------------------------------------- */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) main,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .main-layout,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .container,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .dashboard-main {
  background: transparent !important;
  color: var(--et-text) !important;
}

/* --- MINI-FOOTER (réel sélecteur) ------------------------------------------ */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-footer {
  background: transparent !important;
  color: var(--et-text-mute) !important;
  border-top: 1px solid var(--et-divider) !important;
  padding: 14px 24px !important;
  font-family: var(--et-font-body) !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-footer * {
  color: var(--et-text-mute) !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-footer a {
  color: var(--et-text-soft) !important;
  text-decoration: none !important;
  transition: color .15s !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-footer a:hover {
  color: var(--et-petrol) !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-footer-sep {
  color: var(--et-border-strong) !important;
  opacity: 0.6;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-footer-icon {
  width: 16px !important;
  height: 16px !important;
  opacity: 0.75;
}

/* --- RAIL BUTTONS (vrai sélecteur .rail-btn) ------------------------------- */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .rail-buttons {
  background: transparent !important;
  border-top: 1px solid var(--et-divider) !important;
  padding: 14px 22px !important;
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .rail-btn {
  background: #fff !important;
  color: var(--et-text) !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 9px 18px !important;
  font-family: var(--et-font-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all .15s !important;
  box-shadow: 0 1px 2px rgba(0, 73, 83, 0.04) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .rail-btn * {
  color: var(--et-text) !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .rail-btn:hover {
  border-color: var(--et-mint) !important;
  color: var(--et-mint-deep) !important;
  background: rgba(0, 183, 127, 0.04) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 73, 83, 0.08) !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .rail-icon {
  font-size: 14px !important;
  flex-shrink: 0 !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .rail-label {
  font-weight: 600 !important;
}

/* --- BTN-UPLOAD TROMBONE (force visible icon + nice circle) ---------------- */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .btn-upload {
  background: var(--et-mint) !important;
  border: none !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 183, 127, 0.30) !important;
  transition: all .15s !important;
  flex-shrink: 0 !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .btn-upload:hover {
  background: var(--et-petrol) !important;
  transform: translateY(-1px) rotate(-8deg);
  box-shadow: 0 4px 12px rgba(0, 73, 83, 0.30) !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .btn-upload svg,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .btn-upload svg * {
  fill: #fff !important;
  stroke: #fff !important;
  color: #fff !important;
  width: 20px !important;
  height: 20px !important;
}

/* --- KPI DELTA PILLS (real class: .mini-change.up/.down) ------------------- */
/* Base neutral pill */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-change,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-metric .mini-change {
  margin-left: auto !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 4px 10px !important;
  font-family: var(--et-font-body) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  align-self: center !important;
  flex-shrink: 0 !important;
}

/* Semantic: inflows.up = GOOD (mint) | inflows.down = BAD (red) */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-metric.inflows .mini-change.up,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-metric.cash .mini-change.up {
  color: #b8f5d8 !important;
  background: rgba(44, 217, 168, 0.20) !important;
  border-color: rgba(44, 217, 168, 0.40) !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-metric.inflows .mini-change.down,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-metric.cash .mini-change.down {
  color: #ffc6c6 !important;
  background: rgba(255, 130, 130, 0.18) !important;
  border-color: rgba(255, 130, 130, 0.32) !important;
}

/* Semantic: outflows.down = GOOD (mint) | outflows.up = BAD (red) */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-metric.outflows .mini-change.down {
  color: #b8f5d8 !important;
  background: rgba(44, 217, 168, 0.20) !important;
  border-color: rgba(44, 217, 168, 0.40) !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-metric.outflows .mini-change.up {
  color: #ffc6c6 !important;
  background: rgba(255, 130, 130, 0.18) !important;
  border-color: rgba(255, 130, 130, 0.32) !important;
}

/* --- MODE ICONS (remove visible rectangle around emoji) -------------------- */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mode-icon,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mode-btn .mode-icon,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mode-btn > span:first-child {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 6px !important;
  box-shadow: none !important;
}

/* --- MODE BUTTONS (real class: .mode-btn, .active) ------------------------- */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mode-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 8px 18px !important;
  font-family: var(--et-font-body) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all .15s !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mode-btn * {
  color: #fff !important;
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mode-btn:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  transform: translateY(-1px);
}
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mode-btn.active {
  background: var(--et-mint) !important;
  border-color: var(--et-mint) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 4px 12px rgba(0, 183, 127, 0.40) !important;
}

/* --- FIX rail-buttons + chat-input-container fixed overlap ----------------- */
/* Original Henderson positions both fixed at bottom which clips rail-buttons.
   Make them flow normally inside chat-container so they stack vertically. */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .rail-buttons,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .chat-input-container {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  z-index: auto !important;
}

/* Keep chat-input clean visual separation */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .chat-input-container {
  background: rgba(255, 255, 255, 0.92) !important;
  border-top: 1px solid var(--et-border) !important;
  padding: 16px 22px !important;
}

/* --- MÉMOIRE BADGE (header pill with count + cost) ------------------------- */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .nav-link [class*="badge"],
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .nav-link [class*="count"],
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .nav-memoire-count,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .nav-memoire-cost {
  background: rgba(0, 183, 127, 0.12) !important;
  color: var(--et-petrol) !important;
  border: 1px solid rgba(0, 183, 127, 0.30) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 2px 8px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  margin-left: 4px !important;
}

/* --- BRUCE AVATAR (slightly larger, nicer halo) ---------------------------- */
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .bruce-avatar,
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) img[alt*="Bruce"],
html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .chat-messages img[alt*="Bruce"] {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 4.5px rgba(0, 183, 127, 0.30),
    0 4px 14px rgba(0, 73, 83, 0.14) !important;
}

/* --- RESPONSIVE TWEAKS ----------------------------------------------------- */
@media (max-width: 768px) {
  html body header.header {
    margin: 8px 12px 0 !important;
    padding: 10px 14px !important;
  }
  html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-financial-strip {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }
  html body:is(.dashboard-page,.memory-page,.hdsn-light,.doctrine-page,.profile-page) .mini-metric {
    padding: 14px 18px !important;
  }
}

/* ============================================================================
   MEMORY-PAGE SPECIFIC OVERRIDES (documents, memory, bank-ledger, alerts)
   ============================================================================ */

/* Reset body padding-top (header is now sticky, not fixed, takes its own space) */
html body.memory-page {
  padding-top: 0 !important;
}
html body.memory-page > .container {
  padding-top: 32px !important;
}

/* Page header (mem-page-header) */
html body.memory-page .mem-page-header {
  margin-bottom: 28px !important;
}
html body.memory-page .mem-page-title {
  color: var(--et-petrol) !important;
  font-family: var(--et-font-display) !important;
  font-weight: 800 !important;
  font-size: 36px !important;
  letter-spacing: 0.01em !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
html body.memory-page .mem-page-subtitle {
  color: var(--et-text-mute) !important;
  font-size: 14px !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
}

/* Action buttons (Rafraîchir, Upload) */
html body.memory-page .mem-btn-secondary,
html body.memory-page .mem-btn-primary,
html body.memory-page .mem-btn-upload,
html body.memory-page .mem-btn {
  background: #fff !important;
  color: var(--et-petrol) !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 10px 20px !important;
  font-family: var(--et-font-body) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  transition: all .15s !important;
  box-shadow: 0 1px 3px rgba(0, 73, 83, 0.05) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
html body.memory-page .mem-btn-secondary:hover,
html body.memory-page .mem-btn:hover {
  border-color: var(--et-mint) !important;
  color: var(--et-mint-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 73, 83, 0.08) !important;
}
html body.memory-page .mem-btn-upload,
html body.memory-page .mem-btn-primary {
  background: var(--et-mint) !important;
  color: #fff !important;
  border-color: var(--et-mint) !important;
  box-shadow: var(--et-shadow-mint) !important;
}
html body.memory-page .mem-btn-upload:hover,
html body.memory-page .mem-btn-primary:hover {
  background: var(--et-petrol) !important;
  border-color: var(--et-petrol) !important;
  color: #fff !important;
}
html body.memory-page .mem-btn-delete {
  background: rgba(234, 0, 24, 0.08) !important;
  color: var(--et-red) !important;
  border: 1px solid rgba(234, 0, 24, 0.25) !important;
}

/* Stats grid (TOTAL / TRAITES / EN COURS / A REVOIR / ERREURS / ENTITES) */
html body.memory-page .mem-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 1px !important;
  background: var(--et-border) !important;
  border-radius: var(--et-radius-card) !important;
  padding: 1px !important;
  overflow: hidden !important;
  box-shadow: var(--et-shadow-card) !important;
  margin-bottom: 28px !important;
}
html body.memory-page .mem-stat,
html body.memory-page .mem-stats-grid > * {
  background: #fff !important;
  padding: 18px 22px !important;
  border: none !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
html body.memory-page [class*="mem-stat"] [class*="label"],
html body.memory-page .mem-stat-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: var(--et-tracking-cap) !important;
  text-transform: uppercase !important;
  color: var(--et-text-mute) !important;
}
html body.memory-page [class*="mem-stat"] [class*="value"],
html body.memory-page .mem-stat-value {
  font-family: var(--et-font-display) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--et-text) !important;
  line-height: 1 !important;
}

/* Filters bar (search + dropdowns) */
html body.memory-page .mem-filters {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
}
html body.memory-page .mem-filters input[type="text"],
html body.memory-page .mem-filters input,
html body.memory-page input#searchInput {
  background: #fff !important;
  color: var(--et-text) !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 12px 22px !important;
  font-family: var(--et-font-body) !important;
  font-size: 14px !important;
  flex: 1 !important;
  min-width: 240px !important;
  box-shadow: 0 1px 3px rgba(0, 73, 83, 0.04) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
html body.memory-page .mem-filters input::placeholder {
  color: var(--et-text-mute) !important;
}
html body.memory-page .mem-filters input:focus {
  outline: none !important;
  border-color: var(--et-mint) !important;
  box-shadow: 0 0 0 3px rgba(0, 183, 127, 0.12) !important;
}
html body.memory-page .mem-filters select,
html body.memory-page select#filterType,
html body.memory-page select#filterStatus {
  background: #fff !important;
  color: var(--et-text) !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 10px 18px !important;
  font-family: var(--et-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  appearance: auto !important;
  min-width: 160px !important;
  box-shadow: 0 1px 3px rgba(0, 73, 83, 0.04) !important;
}
html body.memory-page .mem-filters select:hover {
  border-color: var(--et-mint) !important;
}

/* Selection bar (Aucune sélection / X sélectionnés) — real class .mem-toolbar */
html body.memory-page .mem-toolbar,
html body.memory-page .mem-selection-bar,
html body.memory-page [class*="selection-bar"],
html body.memory-page [class*="batch-bar"] {
  background: rgba(0, 73, 83, 0.04) !important;
  color: var(--et-text) !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-card) !important;
  padding: 12px 20px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
html body.memory-page .mem-toolbar *,
html body.memory-page .mem-selection-bar *,
html body.memory-page [class*="selection-bar"] *,
html body.memory-page .mem-toolbar-left,
html body.memory-page .mem-toolbar-right {
  color: var(--et-text) !important;
  background: transparent !important;
}
html body.memory-page .mem-toolbar button,
html body.memory-page .mem-selection-bar button,
html body.memory-page [class*="selection-bar"] button {
  background: #fff !important;
  color: var(--et-text) !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 6px 14px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  cursor: pointer !important;
}
html body.memory-page kbd,
html body.memory-page [class*="kbd"] {
  background: #fff !important;
  border: 1px solid var(--et-border) !important;
  border-radius: 4px !important;
  padding: 2px 7px !important;
  font-family: 'SF Mono', Menlo, monospace !important;
  font-size: 11px !important;
  color: var(--et-petrol) !important;
  box-shadow: 0 1px 0 var(--et-border) !important;
}

/* Document tile cards — ONLY outer tile gets border/bg, NOT children */
html body.memory-page .mem-tiles,
html body.memory-page .mem-doc-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 16px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
html body.memory-page .mem-tile,
html body.memory-page .mem-doc-tile {
  background: #fff !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-tile) !important;
  padding: 18px 16px !important;
  position: relative !important;
  transition: all .15s !important;
  box-shadow: 0 1px 3px rgba(0, 73, 83, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
}
html body.memory-page .mem-tile:hover,
html body.memory-page .mem-doc-tile:hover {
  border-color: var(--et-mint) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 73, 83, 0.10) !important;
}

/* Children of tile — NO borders, transparent bg */
html body.memory-page .mem-tile-checkbox,
html body.memory-page .mem-tile-icon,
html body.memory-page .mem-tile-name,
html body.memory-page .mem-tile-meta,
html body.memory-page .mem-tile-actions,
html body.memory-page .mem-tile-status {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

html body.memory-page .mem-tile-checkbox {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
}
html body.memory-page .mem-tile-icon {
  width: 56px !important;
  height: 56px !important;
  background: rgba(0, 73, 83, 0.04) !important;
  border-radius: 8px !important;
  margin-top: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body.memory-page .mem-tile-icon img,
html body.memory-page .mem-tile-icon svg {
  width: 36px !important;
  height: 36px !important;
  opacity: 0.7 !important;
}
html body.memory-page .mem-tile-name {
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--et-text) !important;
  word-break: break-word !important;
  line-height: 1.3 !important;
}
html body.memory-page .mem-tile-meta {
  text-align: center !important;
  font-size: 11px !important;
  color: var(--et-text-mute) !important;
}

/* Tile badges (REVOIR / processed / error) — absolute position top-right */
html body.memory-page .mem-tile-badge {
  background: rgba(245, 158, 11, 0.14) !important;
  color: #d97706 !important;
  border: 1px solid rgba(245, 158, 11, 0.32) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 3px 9px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  box-shadow: none !important;
}
html body.memory-page .mem-tile-badge.processed,
html body.memory-page .mem-tile-badge.success {
  background: rgba(0, 183, 127, 0.12) !important;
  color: var(--et-mint-deep) !important;
  border-color: rgba(0, 183, 127, 0.30) !important;
}
html body.memory-page .mem-tile-badge.error {
  background: rgba(234, 0, 24, 0.10) !important;
  color: var(--et-red) !important;
  border-color: rgba(234, 0, 24, 0.28) !important;
}

/* Custom checkboxes — replace black squares with light pill checkboxes */
html body.memory-page input[type="checkbox"],
html body.memory-page .mem-doc-checkbox,
html body.memory-page [class*="checkbox"] input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  border: 2px solid var(--et-border-strong) !important;
  border-radius: 6px !important;
  background: #fff !important;
  cursor: pointer !important;
  position: relative !important;
  flex-shrink: 0 !important;
  transition: all .15s !important;
}
html body.memory-page input[type="checkbox"]:hover {
  border-color: var(--et-mint) !important;
}
html body.memory-page input[type="checkbox"]:checked {
  background: var(--et-mint) !important;
  border-color: var(--et-mint) !important;
}
html body.memory-page input[type="checkbox"]:checked::after {
  content: '' !important;
  position: absolute !important;
  left: 6px !important;
  top: 2px !important;
  width: 5px !important;
  height: 10px !important;
  border: solid #fff !important;
  border-width: 0 2.5px 2.5px 0 !important;
  transform: rotate(45deg) !important;
}

/* REVOIR badges */
html body.memory-page [class*="badge"][class*="revoir"],
html body.memory-page [class*="badge-revoir"],
html body.memory-page .mem-badge-revoir {
  background: rgba(245, 158, 11, 0.14) !important;
  color: #d97706 !important;
  border: 1px solid rgba(245, 158, 11, 0.32) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 3px 10px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* Pagination */
html body.memory-page .mem-pagination,
html body.memory-page [class*="pagination"] {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  align-items: center !important;
  margin-top: 28px !important;
  padding: 16px 0 !important;
}
html body.memory-page .mem-pagination button,
html body.memory-page [class*="pagination"] button {
  background: #fff !important;
  color: var(--et-petrol) !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 8px 18px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
html body.memory-page .mem-pagination button:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}
html body.memory-page .mem-pagination button:hover:not(:disabled) {
  border-color: var(--et-mint) !important;
  color: var(--et-mint-deep) !important;
}

/* ============================================================================
   MEMORY.HTML (PHOSPHORE chat) — conversation sidebar + examples + input
   ============================================================================ */

/* Conversation sidebar (left) */
html body.memory-page .conv-aside,
html body.memory-page [class*="conv-aside"],
html body.memory-page [class*="conv-list"] {
  background: rgba(0, 73, 83, 0.04) !important;
  border-right: 1px solid var(--et-border) !important;
  color: var(--et-text) !important;
}
html body.memory-page .conv-aside *,
html body.memory-page [class*="conv-aside"] * {
  color: var(--et-text) !important;
}
html body.memory-page .mem-conv-item {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--et-radius-tile) !important;
  padding: 10px 14px !important;
  margin-bottom: 4px !important;
  cursor: pointer !important;
  color: var(--et-text) !important;
  transition: all .15s !important;
}
html body.memory-page .mem-conv-item:hover {
  background: #fff !important;
  border-color: var(--et-border) !important;
  box-shadow: 0 1px 3px rgba(0, 73, 83, 0.05) !important;
}
html body.memory-page .mem-conv-item.active,
html body.memory-page .mem-conv-item[class*="active"] {
  background: rgba(0, 183, 127, 0.10) !important;
  border-color: rgba(0, 183, 127, 0.35) !important;
  color: var(--et-petrol) !important;
}
html body.memory-page .mem-conv-search,
html body.memory-page .conv-aside input[type="text"],
html body.memory-page .conv-aside input[type="search"] {
  background: #fff !important;
  color: var(--et-text) !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 8px 16px !important;
}

/* Nouvelle conversation button */
html body.memory-page [class*="new-conv"],
html body.memory-page button[class*="nouvelle"],
html body.memory-page .conv-aside .mem-btn-primary {
  background: var(--et-mint) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 10px 18px !important;
  font-weight: 700 !important;
  width: 100% !important;
  box-shadow: var(--et-shadow-mint) !important;
}

/* PHOSPHORE main panel */
html body.memory-page .mem-chat-panel,
html body.memory-page .mem-layout {
  background: transparent !important;
}

/* PHOSPHORE title block */
html body.memory-page .mem-hero,
html body.memory-page [class*="phosphore-title"] {
  color: var(--et-petrol) !important;
  text-align: center !important;
}
html body.memory-page [class*="phosphore-subtitle"] {
  color: var(--et-text-soft) !important;
}

/* Example prompt cards */
html body.memory-page .mem-examples {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  max-width: 720px !important;
  margin: 24px auto !important;
}
html body.memory-page .mem-example {
  background: #fff !important;
  color: var(--et-text) !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-card) !important;
  padding: 18px 22px !important;
  cursor: pointer !important;
  transition: all .15s !important;
  box-shadow: 0 1px 3px rgba(0, 73, 83, 0.04) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}
html body.memory-page .mem-example:hover {
  border-color: var(--et-mint) !important;
  background: rgba(0, 183, 127, 0.03) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 73, 83, 0.08) !important;
}
html body.memory-page .mem-example * {
  color: var(--et-text) !important;
}

/* Input area at bottom */
html body.memory-page .mem-input-area {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid var(--et-border) !important;
  padding: 16px 22px !important;
}
html body.memory-page .mem-input-wrap {
  background: #fff !important;
  border: 1px solid var(--et-border) !important;
  border-radius: 22px !important;
  padding: 8px 12px 8px 18px !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: 10px !important;
  box-shadow: 0 2px 8px rgba(0, 73, 83, 0.06) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
html body.memory-page .mem-input-wrap:focus-within {
  border-color: var(--et-mint) !important;
  box-shadow: 0 0 0 3px rgba(0, 183, 127, 0.12) !important;
}
html body.memory-page .mem-textarea {
  background: transparent !important;
  color: var(--et-text) !important;
  border: none !important;
  outline: none !important;
  font-family: var(--et-font-body) !important;
  font-size: 14px !important;
  flex: 1 !important;
  resize: none !important;
  padding: 8px 0 !important;
}
html body.memory-page .mem-textarea::placeholder {
  color: var(--et-text-mute) !important;
}

/* PHOSPHORE send button (the arrow up button) */
html body.memory-page .mem-input-wrap button,
html body.memory-page [class*="mem-send"],
html body.memory-page button[class*="send"] {
  background: var(--et-mint) !important;
  color: #fff !important;
  border: none !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all .15s !important;
  box-shadow: var(--et-shadow-mint) !important;
}
html body.memory-page [class*="mem-send"]:hover {
  background: var(--et-petrol) !important;
  transform: translateY(-1px);
}
html body.memory-page [class*="mem-send"] svg,
html body.memory-page [class*="mem-send"] svg * {
  fill: #fff !important;
  stroke: #fff !important;
  color: #fff !important;
}

/* Attach (paperclip) button in input */
html body.memory-page .mem-input-wrap a[class*="attach"],
html body.memory-page .mem-input-wrap [class*="attach"] {
  color: var(--et-petrol) !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(0, 73, 83, 0.05) !important;
}
html body.memory-page .mem-input-wrap [class*="attach"]:hover {
  background: rgba(0, 183, 127, 0.10) !important;
  color: var(--et-mint-deep) !important;
}

/* Chat message bubbles in conversation */
html body.memory-page .mem-msg,
html body.memory-page .mem-message,
html body.memory-page [class*="msg-user"],
html body.memory-page [class*="msg-assistant"] {
  background: #fff !important;
  color: var(--et-text) !important;
  border: 1px solid var(--et-border) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  margin-bottom: 12px !important;
}
html body.memory-page [class*="msg-user"] {
  background: rgba(0, 183, 127, 0.08) !important;
  border-color: rgba(0, 183, 127, 0.25) !important;
}
html body.memory-page .mem-msg *,
html body.memory-page .mem-message * {
  color: var(--et-text) !important;
}

/* ============================================================================
   BANK-LEDGER.HTML + MEMORY-UPLOAD.HTML + table wrappers, dropzones, chips
   ============================================================================ */

/* Table wrappers (mem-table-wrap, etc.) — bring to light */
html body.memory-page .mem-table-wrap,
html body.memory-page [class*="table-wrap"],
html body.memory-page [class*="table-card"] {
  background: #fff !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-card) !important;
  box-shadow: var(--et-shadow-card) !important;
  overflow: hidden !important;
}

/* Table itself */
html body.memory-page .mem-tx-table,
html body.memory-page table.mem-tx-table,
html body.memory-page [class*="tx-table"] {
  width: 100% !important;
  border-collapse: collapse !important;
  background: transparent !important;
  color: var(--et-text) !important;
}
html body.memory-page .mem-tx-table thead,
html body.memory-page [class*="tx-table"] thead,
html body.memory-page table.mem-tx-table tr:first-child {
  background: rgba(0, 73, 83, 0.04) !important;
  border-bottom: 1px solid var(--et-border) !important;
}
html body.memory-page .mem-tx-table th,
html body.memory-page [class*="tx-table"] th {
  background: transparent !important;
  color: var(--et-petrol) !important;
  font-family: var(--et-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: var(--et-tracking-cap) !important;
  text-transform: uppercase !important;
  padding: 14px 18px !important;
  text-align: left !important;
  border-bottom: 1px solid var(--et-border) !important;
}
html body.memory-page .mem-tx-table td,
html body.memory-page [class*="tx-table"] td {
  color: var(--et-text) !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--et-divider) !important;
  font-size: 13px !important;
}
html body.memory-page .mem-tx-table tbody tr:hover,
html body.memory-page [class*="tx-table"] tbody tr:hover {
  background: rgba(0, 183, 127, 0.04) !important;
}

/* Empty state inside table-wrap */
html body.memory-page .mem-empty,
html body.memory-page [class*="empty-state"] {
  text-align: center !important;
  padding: 48px 20px !important;
  color: var(--et-text-mute) !important;
}
html body.memory-page .mem-empty-icon {
  font-size: 48px !important;
  margin-bottom: 16px !important;
  opacity: 0.7 !important;
  filter: none !important;
}
html body.memory-page .mem-empty-text,
html body.memory-page .mem-empty p {
  color: var(--et-text-soft) !important;
}

/* Filter chips */
html body.memory-page .mem-filter-chip {
  background: rgba(0, 73, 83, 0.06) !important;
  color: var(--et-petrol) !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Progress bar */
html body.memory-page .mem-progress-bar {
  background: rgba(0, 73, 83, 0.08) !important;
  border-radius: var(--et-radius-pill) !important;
  overflow: hidden !important;
  height: 8px !important;
}
html body.memory-page .mem-progress-bar > * {
  background: var(--et-mint) !important;
  height: 100% !important;
  transition: width .3s ease !important;
}

/* Memory-upload dropzone */
html body.memory-page .mem-dropzone,
html body.memory-page [class*="dropzone"] {
  background: #fff !important;
  color: var(--et-text) !important;
  border: 2px dashed var(--et-border-strong) !important;
  border-radius: var(--et-radius-card) !important;
  padding: 48px 24px !important;
  text-align: center !important;
  transition: all .15s !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0, 73, 83, 0.04) !important;
}
html body.memory-page .mem-dropzone *,
html body.memory-page [class*="dropzone"] * {
  color: var(--et-text) !important;
}
html body.memory-page .mem-dropzone:hover,
html body.memory-page [class*="dropzone"]:hover,
html body.memory-page [class*="dropzone"].active,
html body.memory-page [class*="dropzone"].dragover {
  background: rgba(0, 183, 127, 0.04) !important;
  border-color: var(--et-mint) !important;
  border-style: solid !important;
}
html body.memory-page .mem-dropzone a,
html body.memory-page [class*="dropzone"] a {
  color: var(--et-mint-deep) !important;
  font-weight: 700 !important;
}
html body.memory-page [class*="dropzone-arrow"],
html body.memory-page [class*="dropzone-icon"] {
  font-size: 48px !important;
  color: var(--et-mint) !important;
  margin-bottom: 18px !important;
  opacity: 0.8 !important;
}

/* Generic button override for dark inline-styled exports (CSV / XLSX)
   Target buttons that have NO class but are inside mem-page-header actions */
html body.memory-page .mem-page-header button:not([class]),
html body.memory-page .mem-page-header > div > button:not([class]),
html body.memory-page [class*="page-header"] button:not([class]) {
  background: #fff !important;
  color: var(--et-petrol) !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 10px 18px !important;
  font-family: var(--et-font-body) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  margin-left: 8px !important;
  transition: all .15s !important;
  box-shadow: 0 1px 3px rgba(0, 73, 83, 0.05) !important;
}
html body.memory-page .mem-page-header button:not([class]):hover {
  border-color: var(--et-mint) !important;
  color: var(--et-mint-deep) !important;
  transform: translateY(-1px);
}

/* Toutes / Hors transferts dropdowns on bank-ledger */
html body.memory-page select {
  background: #fff !important;
  color: var(--et-text) !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 10px 18px !important;
  font-family: var(--et-font-body) !important;
  font-size: 13px !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0, 73, 83, 0.04) !important;
}

/* ============================================================================
   SETTINGS.HTML + PROFILE.HTML — pages with inline <style> & no -page class
   Use html[data-theme="light"] body for stronger specificity matching
   ============================================================================ */

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 20% 10%, rgba(0, 183, 127, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(0, 73, 83, 0.04) 0%, transparent 50%),
    var(--et-bg-ivory) !important;
  color: var(--et-text) !important;
  font-family: var(--et-font-body) !important;
}

/* Generic form panels (used by settings/profile) */
html[data-theme="light"] body .form-section,
html[data-theme="light"] body .panel,
html[data-theme="light"] body .card,
html[data-theme="light"] body [class*="section-card"],
html[data-theme="light"] body [class*="form-panel"],
html[data-theme="light"] body .settings-panel,
html[data-theme="light"] body .profile-panel,
html[data-theme="light"] body fieldset {
  background: #fff !important;
  color: var(--et-text) !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-card) !important;
  box-shadow: var(--et-shadow-card) !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
}
html[data-theme="light"] body .form-section *,
html[data-theme="light"] body .panel *,
html[data-theme="light"] body .card * {
  color: inherit;
}

/* Settings/profile sidebar */
html[data-theme="light"] body .settings-sidebar,
html[data-theme="light"] body .sidebar,
html[data-theme="light"] body [class*="settings-nav"],
html[data-theme="light"] body [class*="settings-menu"] {
  background: #fff !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-card) !important;
  box-shadow: var(--et-shadow-card) !important;
  padding: 12px !important;
}
html[data-theme="light"] body .settings-sidebar a,
html[data-theme="light"] body .settings-sidebar button,
html[data-theme="light"] body [class*="settings-nav"] a,
html[data-theme="light"] body [class*="settings-nav"] button,
html[data-theme="light"] body [class*="menu-item"] {
  background: transparent !important;
  color: var(--et-text) !important;
  border: 1px solid transparent !important;
  border-radius: var(--et-radius-tile) !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-weight: 600 !important;
  transition: all .15s !important;
  margin-bottom: 2px !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
html[data-theme="light"] body .settings-sidebar a:hover,
html[data-theme="light"] body .settings-sidebar [class*="menu-item"]:hover,
html[data-theme="light"] body [class*="menu-item"]:hover {
  background: rgba(0, 73, 83, 0.04) !important;
}
html[data-theme="light"] body .settings-sidebar .active,
html[data-theme="light"] body [class*="menu-item"].active,
html[data-theme="light"] body [class*="menu-item"][aria-current="page"] {
  background: rgba(0, 183, 127, 0.10) !important;
  border-color: rgba(0, 183, 127, 0.32) !important;
  color: var(--et-petrol) !important;
}

/* Form inputs (text/email/tel/password/textarea/select) */
html[data-theme="light"] body input[type="text"],
html[data-theme="light"] body input[type="email"],
html[data-theme="light"] body input[type="tel"],
html[data-theme="light"] body input[type="password"],
html[data-theme="light"] body input[type="url"],
html[data-theme="light"] body input[type="number"],
html[data-theme="light"] body input[type="date"],
html[data-theme="light"] body input:not([type]),
html[data-theme="light"] body textarea,
html[data-theme="light"] body select {
  background: #fff !important;
  color: var(--et-text) !important;
  border: 1px solid var(--et-border) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-family: var(--et-font-body) !important;
  font-size: 14px !important;
  transition: border-color .15s, box-shadow .15s !important;
}
html[data-theme="light"] body input:focus,
html[data-theme="light"] body textarea:focus,
html[data-theme="light"] body select:focus {
  outline: none !important;
  border-color: var(--et-mint) !important;
  box-shadow: 0 0 0 3px rgba(0, 183, 127, 0.12) !important;
}
html[data-theme="light"] body input::placeholder,
html[data-theme="light"] body textarea::placeholder {
  color: var(--et-text-mute) !important;
}

/* Labels */
html[data-theme="light"] body label,
html[data-theme="light"] body .form-label {
  color: var(--et-text) !important;
  font-family: var(--et-font-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Section titles inside settings */
html[data-theme="light"] body .section-title,
html[data-theme="light"] body [class*="section-title"],
html[data-theme="light"] body .form-section h2,
html[data-theme="light"] body .form-section h3,
html[data-theme="light"] body .panel h2,
html[data-theme="light"] body .panel h3 {
  color: var(--et-petrol) !important;
  font-family: var(--et-font-display) !important;
  font-weight: 700 !important;
}

/* Subtitles + helper text */
html[data-theme="light"] body .form-section .subtitle,
html[data-theme="light"] body [class*="subtitle"],
html[data-theme="light"] body .help-text,
html[data-theme="light"] body [class*="help-text"],
html[data-theme="light"] body small {
  color: var(--et-text-soft) !important;
}

/* Primary buttons (ENREGISTRER etc.) */
html[data-theme="light"] body button.btn-primary,
html[data-theme="light"] body button[class*="primary"],
html[data-theme="light"] body button[class*="save"],
html[data-theme="light"] body button[class*="submit"],
html[data-theme="light"] body input[type="submit"],
html[data-theme="light"] body .btn-save,
html[data-theme="light"] body .btn-enregistrer {
  background: var(--et-mint) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 11px 24px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  font-size: 13px !important;
  cursor: pointer !important;
  box-shadow: var(--et-shadow-mint) !important;
  transition: all .15s !important;
}
html[data-theme="light"] body button.btn-primary:hover,
html[data-theme="light"] body button[class*="primary"]:hover {
  background: var(--et-petrol) !important;
  transform: translateY(-1px);
}

/* Secondary buttons (Annuler / Supprimer outline) */
html[data-theme="light"] body button.btn-secondary,
html[data-theme="light"] body button[class*="cancel"],
html[data-theme="light"] body button[class*="annuler"],
html[data-theme="light"] body .btn-outline {
  background: #fff !important;
  color: var(--et-petrol) !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 11px 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  transition: all .15s !important;
}

/* Danger buttons (Supprimer) */
html[data-theme="light"] body button[class*="danger"],
html[data-theme="light"] body button[class*="delete"],
html[data-theme="light"] body button[class*="supprimer"],
html[data-theme="light"] body .btn-danger {
  background: rgba(234, 0, 24, 0.08) !important;
  color: var(--et-red) !important;
  border: 1px solid rgba(234, 0, 24, 0.28) !important;
}
html[data-theme="light"] body button[class*="danger"]:hover {
  background: rgba(234, 0, 24, 0.14) !important;
}

/* Avatar / photo de profil — restricted from [class*="avatar"] (was tinting
   the entire .avatar-upload + .avatar-actions block teal). Now only the
   actual circular preview. */
html[data-theme="light"] body .avatar-preview,
html[data-theme="light"] body .profile-photo {
  background: rgba(0, 73, 83, 0.06) !important;
}

/* Sticky header in settings/profile (uses .header, .top-bar, etc.) */
html[data-theme="light"] body header,
html[data-theme="light"] body .top-bar,
html[data-theme="light"] body .navbar,
html[data-theme="light"] body .topbar {
  background: rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(28px) saturate(140%) !important;
  backdrop-filter: blur(28px) saturate(140%) !important;
  border: 1px solid var(--et-glass-border) !important;
  border-radius: var(--et-radius-pill) !important;
  box-shadow: var(--et-glass-shadow) !important;
  margin: 12px 16px 0 !important;
}
html[data-theme="light"] body header *,
html[data-theme="light"] body .top-bar *,
html[data-theme="light"] body .navbar *,
html[data-theme="light"] body .topbar * {
  color: var(--et-petrol) !important;
}
html[data-theme="light"] body header a,
html[data-theme="light"] body header .nav-link,
html[data-theme="light"] body header nav a {
  color: var(--et-text) !important;
  font-weight: 500 !important;
  opacity: 0.85;
  text-decoration: none !important;
}

/* Profile page-specific: progress bar (Business / Identité / Fiscalité / Finances) */
html[data-theme="light"] body [class*="progress-bar"],
html[data-theme="light"] body [class*="stepper"],
html[data-theme="light"] body [class*="wizard-steps"] {
  background: rgba(0, 73, 83, 0.06) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 4px !important;
  margin: 24px 0 !important;
}
html[data-theme="light"] body [class*="progress-bar"] > *,
html[data-theme="light"] body [class*="step"][data-step] {
  color: var(--et-petrol) !important;
}

/* Tip / info callouts */
html[data-theme="light"] body [class*="tip"],
html[data-theme="light"] body [class*="callout"],
html[data-theme="light"] body [class*="info-box"] {
  background: rgba(0, 183, 127, 0.06) !important;
  color: var(--et-text) !important;
  border: 1px solid rgba(0, 183, 127, 0.25) !important;
  border-radius: var(--et-radius-card) !important;
  padding: 14px 18px !important;
}

/* ============================================================================
   DOCUMENTS.HTML — Vue toggle Tous / Année-Mois + grouped view
   ============================================================================ */

/* View toggle (pills) */
html body.memory-page .mem-view-toggle {
  display: inline-flex !important;
  background: rgba(0, 73, 83, 0.06) !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 4px !important;
  gap: 2px !important;
  margin-bottom: 16px !important;
}
html body.memory-page .mem-view-tab {
  background: transparent !important;
  color: var(--et-text-soft) !important;
  border: none !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 8px 18px !important;
  font-family: var(--et-font-body) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all .15s !important;
}
html body.memory-page .mem-view-tab:hover {
  background: rgba(255, 255, 255, 0.5) !important;
  color: var(--et-text) !important;
}
html body.memory-page .mem-view-tab.active {
  background: #fff !important;
  color: var(--et-petrol) !important;
  box-shadow: 0 1px 3px rgba(0, 73, 83, 0.08), 0 0 0 1px var(--et-border) !important;
}

/* Year card */
html body.memory-page .mem-year {
  background: transparent !important;
  border: none !important;
  margin-bottom: 28px !important;
}
html body.memory-page .mem-year > .mem-year-summary {
  background: var(--et-gradient-kpi) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--et-radius-card) !important;
  padding: 14px 22px !important;
  font-family: var(--et-font-display) !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  list-style: none !important;
  position: relative !important;
  box-shadow: 0 4px 14px rgba(0, 73, 83, 0.18) !important;
  user-select: none !important;
}
html body.memory-page .mem-year > .mem-year-summary::-webkit-details-marker { display: none; }
html body.memory-page .mem-year > .mem-year-summary::before {
  content: '▸';
  color: var(--et-mint-soft);
  margin-right: 12px;
  font-size: 14px;
  transition: transform .2s;
  display: inline-block;
}
html body.memory-page .mem-year[open] > .mem-year-summary::before {
  transform: rotate(90deg);
}
html body.memory-page .mem-year-label {
  flex: 1 !important;
  color: #fff !important;
}
html body.memory-page .mem-year-count {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-family: var(--et-font-body) !important;
}
html body.memory-page .mem-year-body {
  padding: 20px 0 0 0 !important;
}

/* Month card */
html body.memory-page .mem-month {
  background: #fff !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-card) !important;
  box-shadow: var(--et-shadow-card) !important;
  margin-bottom: 14px !important;
  overflow: hidden !important;
}
html body.memory-page .mem-month > .mem-month-summary {
  background: rgba(0, 73, 83, 0.04) !important;
  color: var(--et-petrol) !important;
  border: none !important;
  border-bottom: 1px solid var(--et-border) !important;
  padding: 12px 20px !important;
  font-family: var(--et-font-display) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  list-style: none !important;
  user-select: none !important;
}
html body.memory-page .mem-month:not([open]) > .mem-month-summary { border-bottom-color: transparent !important; }
html body.memory-page .mem-month > .mem-month-summary::-webkit-details-marker { display: none; }
html body.memory-page .mem-month > .mem-month-summary::before {
  content: '▸';
  color: var(--et-mint);
  font-size: 11px;
  transition: transform .2s;
}
html body.memory-page .mem-month[open] > .mem-month-summary::before {
  transform: rotate(90deg);
}
html body.memory-page .mem-month-label {
  flex: 1 !important;
  color: var(--et-petrol) !important;
}
html body.memory-page .mem-month-count {
  background: rgba(0, 183, 127, 0.10) !important;
  color: var(--et-mint-deep) !important;
  border: 1px solid rgba(0, 183, 127, 0.28) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-family: var(--et-font-body) !important;
}
html body.memory-page .mem-month-body {
  padding: 14px 16px 16px !important;
}

/* Category folder */
html body.memory-page .mem-cat {
  margin-bottom: 12px !important;
  border: 1px solid var(--et-divider) !important;
  border-radius: var(--et-radius-tile) !important;
  background: rgba(0, 73, 83, 0.015) !important;
  overflow: hidden !important;
}
html body.memory-page .mem-cat:last-child { margin-bottom: 0 !important; }
html body.memory-page .mem-cat-summary {
  background: transparent !important;
  border: none !important;
  padding: 10px 14px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  list-style: none !important;
  user-select: none !important;
  color: var(--et-text) !important;
  font-family: var(--et-font-body) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}
html body.memory-page .mem-cat-summary::-webkit-details-marker { display: none; }
html body.memory-page .mem-cat-summary::before {
  content: '▸';
  color: var(--cat-color, var(--et-petrol));
  font-size: 10px;
  transition: transform .2s;
}
html body.memory-page .mem-cat[open] > .mem-cat-summary::before {
  transform: rotate(90deg);
}
html body.memory-page .mem-cat-icon {
  font-size: 14px !important;
}
html body.memory-page .mem-cat-label {
  flex: 1 !important;
  color: var(--cat-color, var(--et-petrol)) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}
html body.memory-page .mem-cat-count {
  background: rgba(0, 73, 83, 0.06) !important;
  color: var(--et-text-soft) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 2px 9px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
html body.memory-page .mem-cat-tiles {
  padding: 6px 12px 14px !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 12px !important;
}

/* ============================================================================
   ANALYTICS DASHBOARD (home index.html) — doughnuts + 12-month timeline
   ============================================================================ */

html body.dashboard-page .hdsn-analytics {
  margin: 28px 0 12px !important;
  padding: 0 !important;
}

html body.dashboard-page .hdsn-analytics-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
  padding: 0 4px !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

html body.dashboard-page .hdsn-analytics-eyebrow {
  font-family: var(--et-font-display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: var(--et-tracking-cap) !important;
  text-transform: uppercase !important;
  color: var(--et-petrol) !important;
}

html body.dashboard-page .hdsn-analytics-tabs {
  display: inline-flex !important;
  background: rgba(0, 73, 83, 0.06) !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 3px !important;
  gap: 2px !important;
}

html body.dashboard-page .hdsn-analytics-tab {
  background: transparent !important;
  color: var(--et-text-soft) !important;
  border: none !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 6px 14px !important;
  font-family: var(--et-font-body) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  transition: all .15s !important;
}
html body.dashboard-page .hdsn-analytics-tab:hover {
  color: var(--et-petrol) !important;
}
html body.dashboard-page .hdsn-analytics-tab.active {
  background: #fff !important;
  color: var(--et-petrol) !important;
  box-shadow: 0 1px 3px rgba(0, 73, 83, 0.08) !important;
}

html body.dashboard-page .hdsn-analytics-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr 1fr !important;
  gap: 14px !important;
  align-items: stretch !important;
}
@media (max-width: 1100px) {
  html body.dashboard-page .hdsn-analytics-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  html body.dashboard-page .hdsn-chart-card--wide {
    grid-column: 1 / -1 !important;
  }
}
@media (max-width: 640px) {
  html body.dashboard-page .hdsn-analytics-grid {
    grid-template-columns: 1fr !important;
  }
}

html body.dashboard-page .hdsn-chart-card {
  background: #fff !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-card) !important;
  padding: 16px 18px !important;
  box-shadow: var(--et-shadow-card) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

html body.dashboard-page .hdsn-chart-card--wide {
  grid-column: span 2 !important;
}

html body.dashboard-page .hdsn-chart-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

html body.dashboard-page .hdsn-chart-eyebrow {
  font-family: var(--et-font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: var(--et-tracking-cap) !important;
  text-transform: uppercase !important;
  color: var(--et-petrol) !important;
}
html body.dashboard-page .hdsn-chart-eyebrow[data-accent="red"] { color: #b91c1c !important; }
html body.dashboard-page .hdsn-chart-eyebrow[data-accent="mint"] { color: var(--et-mint-deep) !important; }

html body.dashboard-page .hdsn-chart-total {
  font-family: var(--et-font-display) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--et-text) !important;
  letter-spacing: 0.005em !important;
}

html body.dashboard-page .hdsn-chart-hint {
  font-size: 11px !important;
  color: var(--et-text-mute) !important;
  font-weight: 500 !important;
}

html body.dashboard-page .hdsn-chart-canvas {
  position: relative !important;
  height: 200px !important;
  width: 100% !important;
}
html body.dashboard-page .hdsn-chart-canvas--wide {
  height: 260px !important;
}

html body.dashboard-page .hdsn-chart-legend {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  max-height: 140px !important;
  overflow-y: auto !important;
}

html body.dashboard-page .hdsn-legend-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: var(--et-text) !important;
  padding: 2px 0 !important;
}
html body.dashboard-page .hdsn-legend-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
}
html body.dashboard-page .hdsn-legend-label {
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-weight: 600 !important;
}
html body.dashboard-page .hdsn-legend-value {
  color: var(--et-text-soft) !important;
  font-weight: 600 !important;
  flex-shrink: 0 !important;
}
html body.dashboard-page .hdsn-legend-value em {
  color: var(--et-text-mute) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  margin-left: 4px !important;
}

html body.dashboard-page .hdsn-timeline-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 12px !important;
  color: var(--et-text-soft) !important;
}
html body.dashboard-page .hdsn-timeline-breadcrumb:empty {
  display: none !important;
}
html body.dashboard-page .hdsn-breadcrumb-back {
  background: rgba(0, 73, 83, 0.06) !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 4px 12px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: var(--et-petrol) !important;
  cursor: pointer !important;
}
html body.dashboard-page .hdsn-breadcrumb-back:hover {
  background: rgba(0, 183, 127, 0.10) !important;
}
html body.dashboard-page .hdsn-breadcrumb-current {
  font-weight: 700 !important;
  color: var(--et-petrol) !important;
}

/* ============================================================================
   HOME LAYOUT — hide legacy KPI strip + stretch chat to footer
   ============================================================================
   Analytics dashboard supersedes the old "Vérité financière" inline strip,
   so we hide that strip entirely. We then make the page body a flex column
   so the chat container fills whatever space is left between the analytics
   section and the footer — no more empty ivory gap. */

html body.dashboard-page .kpi-strip-wrap {
  display: none !important;
}

html body.dashboard-page {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Everything above the footer in the flex column. The chat lives inside
   .main-layout / .container; we tell its furthest growable ancestor to take
   the remaining height. */
html body.dashboard-page > main,
html body.dashboard-page > .main-layout {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}
html body.dashboard-page > main > .container,
html body.dashboard-page .main-layout > .container {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* main-layout sits inside .container; it must also flex-grow so chat-main
   inherits the slack. Without this, main-layout collapses to natural content
   height and chat-main has no room to grow into. */
html body.dashboard-page .main-layout {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* The chat-main wrapper is the immediate parent of .chat-container. Let it
   grow so chat-container can fill the available vertical space. */
html body.dashboard-page .chat-main {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
html body.dashboard-page .chat-main {
  /* style-home-refresh.css line 291 imposes:
       height: fit-content !important;
       max-height: fit-content !important;
       margin-bottom: 220px !important;
       display: block !important;
     These were added to fix an old dark-theme bug ("162px de vide noir") and
     now actively block our flex grow. Force them all back so chat-main can
     fill the remaining flex slack down to the footer. */
  height: auto !important;
  max-height: none !important;
  margin-bottom: 0 !important;
}
html body.dashboard-page .chat-main > .chat-container {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 380px !important; /* keeps a sensible minimum on tall screens */
  max-height: none !important;
}
html body.dashboard-page .chat-main .chat-messages {
  flex: 1 1 auto !important; /* messages area absorbs the slack */
  overflow-y: auto !important;
}

/* Mini-footer was position:fixed in style-footer.css which overlapped the
   chat input. With the body now a flex column, putting it back in flow makes
   it sit right under the chat container — no overlap, no gap. */
html body.dashboard-page .mini-footer,
html body.memory-page .mini-footer {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  flex: 0 0 auto !important;
  z-index: auto !important;
}

/* ============================================================================
   DOCUMENTS — reclassify panel + date row + bulk reclassify modal
   ============================================================================ */

/* Panel principal — la dark legacy (#0f1f1d) ne correspond plus au thème ivoire */
html body.memory-page .mem-reclassify-panel {
  background: #f4f7f6 !important;
  border-bottom: 1px solid var(--et-border) !important;
}

/* Titre de section du panel */
html body.memory-page .mem-reclassify-title {
  color: var(--et-petrol) !important;
  opacity: 1 !important;
}

html body.memory-page .mem-reclassify-daterow {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--et-border) !important;
  flex-wrap: wrap !important;
}
html body.memory-page .mem-reclassify-datelabel {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--et-text) !important;
  margin: 0 !important;
}
/* Deux selects Mois / Année remplacent l'ancien type="month" inutilisable */
html body.memory-page .mem-reclassify-dateselect {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23004953' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 8px 30px 8px 14px !important;
  font-family: var(--et-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--et-petrol) !important;
  cursor: pointer !important;
  min-width: 110px !important;
  transition: border-color .15s, box-shadow .15s !important;
}
html body.memory-page .mem-reclassify-dateselect:focus {
  outline: none !important;
  border-color: var(--et-mint) !important;
  box-shadow: 0 0 0 3px rgba(0, 183, 127, 0.12) !important;
}
/* Compatibilité ancien champ (caché mais gardé au cas où) */
html body.memory-page .mem-reclassify-dateinput {
  display: none !important;
}
html body.memory-page .mem-reclassify-datebtn {
  background: var(--et-mint) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 8px 16px !important;
  font-family: var(--et-font-body) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  cursor: pointer !important;
  box-shadow: var(--et-shadow-mint) !important;
}
html body.memory-page .mem-reclassify-datebtn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Bulk reclassify toolbar button */
html body.memory-page .mem-bulk-reclassify {
  background: rgba(0, 183, 127, 0.10) !important;
  color: var(--et-mint-deep) !important;
  border: 1px solid rgba(0, 183, 127, 0.32) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 6px 14px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: all .15s !important;
}
html body.memory-page .mem-bulk-reclassify:hover:not(:disabled) {
  background: var(--et-mint) !important;
  color: #fff !important;
  border-color: var(--et-mint) !important;
}
html body.memory-page .mem-bulk-reclassify:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* Bulk reclassify modal */
html body.memory-page .mem-bulk-modal {
  max-width: 720px !important;
  background: #fff !important;
  border-radius: var(--et-radius-card) !important;
  padding: 24px !important;
  box-shadow: 0 24px 64px rgba(0, 73, 83, 0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}
html body.memory-page .mem-bulk-modal h2 {
  margin: 0 !important;
  color: var(--et-petrol) !important;
  font-family: var(--et-font-display) !important;
  font-weight: 800 !important;
  font-size: 22px !important;
}
html body.memory-page .mem-bulk-hint {
  margin: 0 !important;
  color: var(--et-text-mute) !important;
  font-size: 13px !important;
}
html body.memory-page .mem-bulk-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
html body.memory-page .mem-bulk-section-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: var(--et-tracking-cap) !important;
  text-transform: uppercase !important;
  color: var(--et-petrol) !important;
}
html body.memory-page .mem-bulk-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  border-top: 1px solid var(--et-border) !important;
  padding-top: 16px !important;
}

/* Modal background for bulk modal — was display:none inline, override flex for show */
html body.memory-page #bulkReclassifyModal {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 73, 83, 0.45) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 9999 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  overflow-y: auto !important;
}

/* Highlight the currently picked category in bulk modal */
html body.memory-page [data-bulk-cls].applying {
  background: rgba(0, 183, 127, 0.14) !important;
  border-color: rgba(0, 183, 127, 0.45) !important;
  color: var(--et-mint-deep) !important;
}

/* ============================================================================
   CHAT-ATTACH — Trombone popover menu + ephemeral attachment pill
   ============================================================================ */

html body.dashboard-page .hdsn-attach-wrap {
  position: relative !important;
  display: inline-flex !important;
}

html body.dashboard-page .hdsn-attach-menu {
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  left: 0 !important;
  min-width: 280px !important;
  background: #fff !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-card) !important;
  box-shadow: 0 12px 32px rgba(0, 73, 83, 0.18) !important;
  padding: 6px !important;
  z-index: 999 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
html body.dashboard-page .hdsn-attach-menu[hidden] {
  display: none !important;
}

html body.dashboard-page .hdsn-attach-opt {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: transparent !important;
  border: none !important;
  border-radius: var(--et-radius-tile) !important;
  padding: 10px 12px !important;
  text-align: left !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: background .12s !important;
  font-family: var(--et-font-body) !important;
}
html body.dashboard-page .hdsn-attach-opt:hover {
  background: rgba(0, 183, 127, 0.08) !important;
}
html body.dashboard-page .hdsn-attach-opt-icon {
  font-size: 22px !important;
  width: 32px !important;
  flex-shrink: 0 !important;
  text-align: center !important;
}
html body.dashboard-page .hdsn-attach-opt-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 !important;
}
html body.dashboard-page .hdsn-attach-opt-title {
  font-weight: 700 !important;
  color: var(--et-petrol) !important;
  font-size: 13px !important;
}
html body.dashboard-page .hdsn-attach-opt-sub {
  font-size: 11px !important;
  color: var(--et-text-mute) !important;
  font-weight: 500 !important;
}

/* Attached-file pill above the chat input */
html body.dashboard-page .hdsn-attached-pill {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(0, 183, 127, 0.10) !important;
  border: 1px solid rgba(0, 183, 127, 0.32) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 8px 14px !important;
  margin: 0 22px 6px !important;
  font-family: var(--et-font-body) !important;
  font-size: 12px !important;
  color: var(--et-petrol) !important;
}
html body.dashboard-page .hdsn-attached-icon {
  font-size: 14px !important;
}
html body.dashboard-page .hdsn-attached-name {
  font-weight: 700 !important;
  max-width: 240px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body.dashboard-page .hdsn-attached-meta {
  flex: 1 !important;
  color: var(--et-text-mute) !important;
  font-size: 11px !important;
}
html body.dashboard-page .hdsn-attached-clear {
  background: transparent !important;
  border: none !important;
  color: var(--et-petrol) !important;
  font-size: 16px !important;
  cursor: pointer !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  opacity: 0.7 !important;
}
html body.dashboard-page .hdsn-attached-clear:hover {
  background: rgba(0, 73, 83, 0.08) !important;
  opacity: 1 !important;
}

/* Tiny attachment pill that appears under a sent user message */
html body.dashboard-page .message-attachment-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(0, 73, 83, 0.06) !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 4px 10px !important;
  margin: 4px 0 0 auto !important;
  font-size: 11px !important;
  color: var(--et-text-soft) !important;
  align-self: flex-end !important;
  max-width: fit-content !important;
}
html body.dashboard-page .message-attachment-pill .muted {
  color: var(--et-text-mute) !important;
}

/* ============================================================================
   CHAT — "thinking" bubble (file analysis in progress)
   ============================================================================ */

html body.dashboard-page .hdsn-thinking {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: rgba(0, 73, 83, 0.04) !important;
  border: 1px solid var(--et-border) !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  margin: 8px 0 !important;
  max-width: fit-content !important;
}

html body.dashboard-page .hdsn-thinking-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--et-mint) !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body.dashboard-page .hdsn-thinking-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

html body.dashboard-page .hdsn-thinking-body {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--et-font-body) !important;
  font-size: 13px !important;
  color: var(--et-text-soft) !important;
}
html body.dashboard-page .hdsn-thinking-label strong {
  color: var(--et-petrol) !important;
  font-weight: 700 !important;
  margin: 0 4px !important;
}

/* Animated dots */
html body.dashboard-page .hdsn-thinking-dots {
  display: inline-flex !important;
  gap: 4px !important;
  align-items: center !important;
}
html body.dashboard-page .hdsn-thinking-dots i {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--et-mint) !important;
  animation: hdsnDot 1.2s infinite ease-in-out !important;
}
html body.dashboard-page .hdsn-thinking-dots i:nth-child(2) {
  animation-delay: 0.15s !important;
}
html body.dashboard-page .hdsn-thinking-dots i:nth-child(3) {
  animation-delay: 0.30s !important;
}
@keyframes hdsnDot {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-3px); }
}

html body.dashboard-page .hdsn-thinking-elapsed {
  background: rgba(0, 73, 83, 0.10) !important;
  color: var(--et-text-mute) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 600 !important;
}

/* ============================================================================
   GLOBAL ZOOM — retiré en v660
   ============================================================================
   v600 : on avait mis zoom: 1.5 pour compenser des tailles px-codées en dur
   (10/11/12px) trop petites. Mais ça rendait TOUT 150%, header inclus, ce qui
   nous a forcés à counter-zoomer le header à 0.667 — équilibre fragile.
   v660 : on remet à 1 (= retiré). Les éléments trop petits seront corrigés
   individuellement avec des `font-size: 14px` ciblés là où c'est nécessaire,
   plutôt que de zoomer aveuglément tout.

html { zoom: 1.5; }  /* legacy */
*/

/* Chat container — was 1338 inside a 1800 container. Stretch to use the
   full available width minus a small breathing room. */
html body.dashboard-page .chat-main,
html body.dashboard-page .chat-main > .chat-container {
  width: 100% !important;
  max-width: 100% !important;
}

/* Messages inside the chat get a comfortable 15px reading size */
html body.dashboard-page .chat-messages,
html body.dashboard-page .chat-messages .message,
html body.dashboard-page .chat-messages p {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Bruce intro / message bubble */
html body.dashboard-page .message-bubble,
html body.dashboard-page .bruce-message,
html body.dashboard-page [class*="bruce-intro"] {
  font-size: 15px !important;
  line-height: 1.6 !important;
  padding: 20px 24px !important;
}

/* Suggestion rail pills */
html body.dashboard-page .rail-btn,
html body.dashboard-page .rail-buttons button {
  font-size: 13.5px !important;
  padding: 10px 18px !important;
}

/* KPI strip values + labels feel proportionally bigger */
html body.dashboard-page .mini-metric .mini-value {
  font-size: 24px !important;
}
html body.dashboard-page .mini-metric .mini-label {
  font-size: 11.5px !important;
}

/* Analytics chart totals + headers */
html body.dashboard-page .hdsn-chart-total {
  font-size: 24px !important;
}
html body.dashboard-page .hdsn-chart-eyebrow,
html body.dashboard-page .hdsn-analytics-eyebrow {
  font-size: 13px !important;
}
html body.dashboard-page .hdsn-analytics-tab {
  font-size: 13px !important;
  padding: 7px 16px !important;
}

/* Header pill — was tight, give it air on big screens */
html body.dashboard-page header.header,
html body.memory-page header.header {
  padding: 16px 26px !important;
}
html body.dashboard-page header.header .logo-text,
html body.memory-page header.header .logo-text {
  font-size: 22px !important;
  letter-spacing: 0.10em !important;
}
html body.dashboard-page header.header .nav-link,
html body.memory-page header.header .nav-link {
  font-size: 14px !important;
}

/* ============================================================================
   CHAT — Continue chip (offered after a truncated assistant reply)
   ============================================================================ */
html body.dashboard-page .hdsn-continue-row {
  display: flex !important;
  gap: 8px !important;
  margin: 6px 0 10px 0 !important;
  align-items: center !important;
}
html body.dashboard-page .hdsn-continue-btn {
  background: var(--et-mint) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 8px 18px !important;
  font-family: var(--et-font-body) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  box-shadow: var(--et-shadow-mint) !important;
  transition: background .15s, transform .15s !important;
}
html body.dashboard-page .hdsn-continue-btn:hover {
  background: var(--et-petrol) !important;
  transform: translateY(-1px) !important;
}
html body.dashboard-page .hdsn-continue-cancel {
  background: transparent !important;
  color: var(--et-text-soft) !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 7px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
html body.dashboard-page .hdsn-continue-cancel:hover {
  background: rgba(0, 73, 83, 0.05) !important;
}

/* ============================================================================
   SETTINGS.HTML + PROFILE.HTML — full restyle (everything 100% bigger, clean)
   ============================================================================
   Inline <style> in those pages targeted .settings-layout / .settings-nav etc
   with cramped 14px fonts and a 1200px max-width. We override with
   higher-specificity selectors. */

/* Wider container, more breathing room */
html[data-theme="light"] body .settings-layout {
  max-width: 1500px !important;
  grid-template-columns: 320px 1fr !important;
  gap: 32px !important;
  padding: 40px 32px !important;
  min-height: calc(100vh - 140px) !important;
}

/* --- Sidebar -------------------------------------------------------------- */
html[data-theme="light"] body .settings-nav {
  background: #fff !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-card) !important;
  padding: 22px 16px !important;
  box-shadow: var(--et-shadow-card) !important;
  top: 110px !important;
}
html[data-theme="light"] body .settings-nav-title {
  font-family: var(--et-font-display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: var(--et-tracking-cap) !important;
  text-transform: uppercase !important;
  color: var(--et-petrol) !important;
  margin-bottom: 14px !important;
  padding: 0 12px !important;
}
html[data-theme="light"] body .settings-nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 13px 14px !important;
  border-radius: var(--et-radius-tile) !important;
  font-family: var(--et-font-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--et-text) !important;
  margin-bottom: 4px !important;
  transition: all .15s !important;
  border: 1px solid transparent !important;
}
html[data-theme="light"] body .settings-nav-item:hover {
  background: rgba(0, 73, 83, 0.05) !important;
  color: var(--et-petrol) !important;
}
html[data-theme="light"] body .settings-nav-item.active {
  background: rgba(0, 183, 127, 0.10) !important;
  color: var(--et-petrol) !important;
  border-color: rgba(0, 183, 127, 0.30) !important;
  font-weight: 700 !important;
}
html[data-theme="light"] body .settings-nav-item .nav-icon {
  font-size: 20px !important;
  width: 24px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

/* --- Section cards ------------------------------------------------------- */
html[data-theme="light"] body .settings-section {
  background: #fff !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-card) !important;
  box-shadow: var(--et-shadow-card) !important;
  overflow: hidden !important;
}
html[data-theme="light"] body .section-header {
  padding: 26px 32px 20px !important;
  border-bottom: 1px solid var(--et-divider) !important;
}
html[data-theme="light"] body .section-header h2 {
  font-family: var(--et-font-display) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--et-petrol) !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.005em !important;
}
html[data-theme="light"] body .section-header p {
  font-size: 14px !important;
  color: var(--et-text-mute) !important;
}
html[data-theme="light"] body .section-body {
  padding: 28px 32px !important;
}

/* --- Form fields --------------------------------------------------------- */
html[data-theme="light"] body .form-group { margin-bottom: 22px !important; }
html[data-theme="light"] body .form-group label {
  display: block !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--et-text) !important;
  margin-bottom: 8px !important;
}
html[data-theme="light"] body .form-group .hint {
  font-size: 12.5px !important;
  color: var(--et-text-mute) !important;
  margin-top: 6px !important;
}
html[data-theme="light"] body .form-input,
html[data-theme="light"] body .form-select {
  width: 100% !important;
  padding: 13px 16px !important;
  border: 1px solid var(--et-border) !important;
  border-radius: 10px !important;
  font-family: var(--et-font-body) !important;
  font-size: 15px !important;
  background: #fff !important;
  color: var(--et-text) !important;
  box-sizing: border-box !important;
  min-height: 48px !important;
  transition: border-color .15s, box-shadow .15s !important;
}
html[data-theme="light"] body .form-input:focus,
html[data-theme="light"] body .form-select:focus {
  outline: none !important;
  border-color: var(--et-mint) !important;
  box-shadow: 0 0 0 3px rgba(0, 183, 127, 0.12) !important;
}
html[data-theme="light"] body .form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
}

/* --- Avatar / logo upload ----------------------------------------------- */
html[data-theme="light"] body .avatar-upload {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
}
html[data-theme="light"] body .avatar-preview {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  background: rgba(0, 183, 127, 0.10) !important;
  border: 3px solid #fff !important;
  box-shadow: 0 0 0 1px var(--et-border), 0 4px 14px rgba(0, 73, 83, 0.10) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 38px !important;
  color: var(--et-mint-deep) !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}
html[data-theme="light"] body .avatar-preview img,
html[data-theme="light"] body .avatar-preview svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
html[data-theme="light"] body .avatar-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  align-items: flex-start !important;
}
html[data-theme="light"] body .avatar-actions .btn-upload {
  background: var(--et-mint) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 10px 18px !important;
  font-family: var(--et-font-body) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  box-shadow: var(--et-shadow-mint) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
  white-space: nowrap !important;
}
html[data-theme="light"] body .avatar-actions .btn-upload:hover {
  background: var(--et-petrol) !important;
}
html[data-theme="light"] body .avatar-actions .btn-remove {
  background: transparent !important;
  color: var(--et-text-soft) !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius-pill) !important;
  padding: 8px 16px !important;
  font-family: var(--et-font-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  width: auto !important;
}
html[data-theme="light"] body .avatar-actions .btn-remove:hover {
  background: rgba(0, 73, 83, 0.05) !important;
  color: var(--et-petrol) !important;
}

/* --- Toggle switch ------------------------------------------------------- */
html[data-theme="light"] body .toggle-row {
  padding: 18px 0 !important;
  border-bottom: 1px solid var(--et-divider) !important;
}
html[data-theme="light"] body .toggle-label {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--et-text) !important;
}
html[data-theme="light"] body .toggle-desc {
  font-size: 13px !important;
  color: var(--et-text-mute) !important;
  margin-top: 4px !important;
}
html[data-theme="light"] body .toggle-switch {
  width: 52px !important;
  height: 30px !important;
  background: rgba(0, 73, 83, 0.18) !important;
  border-radius: 999px !important;
}
html[data-theme="light"] body .toggle-switch.active {
  background: var(--et-mint) !important;
}
html[data-theme="light"] body .toggle-switch::after {
  width: 24px !important;
  height: 24px !important;
  top: 3px !important;
  left: 3px !important;
  background: #fff !important;
  box-shadow: 0 2px 4px rgba(0, 73, 83, 0.15) !important;
}
html[data-theme="light"] body .toggle-switch.active::after {
  transform: translateX(22px) !important;
}

/* --- Section footer (Save / Cancel) ------------------------------------- */
html[data-theme="light"] body .section-footer {
  padding: 18px 32px !important;
  background: rgba(0, 73, 83, 0.03) !important;
  border-top: 1px solid var(--et-divider) !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}
html[data-theme="light"] body .section-footer .btn {
  padding: 11px 22px !important;
  border-radius: var(--et-radius-pill) !important;
  font-family: var(--et-font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  transition: all .15s !important;
}
html[data-theme="light"] body .section-footer .btn-secondary {
  background: #fff !important;
  color: var(--et-petrol) !important;
  border: 1px solid var(--et-border) !important;
}
html[data-theme="light"] body .section-footer .btn-secondary:hover {
  border-color: var(--et-mint) !important;
}
html[data-theme="light"] body .section-footer .btn-primary {
  background: var(--et-mint) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--et-shadow-mint) !important;
}
html[data-theme="light"] body .section-footer .btn-primary:hover {
  background: var(--et-petrol) !important;
}

/* --- Danger zone -------------------------------------------------------- */
html[data-theme="light"] body .danger-zone {
  border-color: rgba(234, 0, 24, 0.28) !important;
}
html[data-theme="light"] body .danger-zone .section-header {
  background: rgba(234, 0, 24, 0.05) !important;
  border-bottom-color: rgba(234, 0, 24, 0.18) !important;
}
html[data-theme="light"] body .danger-zone .section-header h2 {
  color: var(--et-red) !important;
}

/* Responsive: stack sidebar on narrow viewports */
@media (max-width: 900px) {
  html[data-theme="light"] body .settings-layout {
    grid-template-columns: 1fr !important;
    padding: 24px 16px !important;
  }
  html[data-theme="light"] body .settings-nav {
    position: static !important;
  }
}

/* ============================================================================
   PROFILE.HTML — override legacy inline <style> that made the subtitle white
   on a now-light background.
   ============================================================================ */
html[data-theme="light"] body .profile-page-header h1 {
  color: var(--et-petrol) !important;
  font-family: var(--et-font-display) !important;
  font-weight: 800 !important;
  font-size: 32px !important;
  letter-spacing: 0.005em !important;
}
html[data-theme="light"] body .profile-page-header p {
  color: var(--et-text-soft) !important;
  font-size: 15px !important;
  margin-top: 6px !important;
}
html[data-theme="light"] body .info-box {
  background: rgba(0, 183, 127, 0.08) !important;
  border-color: rgba(0, 183, 127, 0.28) !important;
  color: var(--et-text) !important;
}
html[data-theme="light"] body .info-box-text {
  color: var(--et-text) !important;
}
html[data-theme="light"] body .warning-box {
  background: rgba(245, 158, 11, 0.10) !important;
  border-color: rgba(245, 158, 11, 0.28) !important;
}
html[data-theme="light"] body .warning-box-text {
  color: var(--et-text) !important;
}

/* Stepper (1 Business · 2 Identité · 3 Fiscalité · 4 Finances) */
html[data-theme="light"] body [class*="stepper"],
html[data-theme="light"] body [class*="profile-step"] {
  font-family: var(--et-font-body) !important;
}
html[data-theme="light"] body [class*="step-label"],
html[data-theme="light"] body [class*="step-name"] {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--et-text-soft) !important;
}

/* ============================================================================
   CHAT INPUT — textarea (multiline, auto-resize, Enter = newline)
   ============================================================================ */
html body.dashboard-page .chat-input,
html body.dashboard-page textarea.chat-input {
  resize: none !important;
  overflow-y: hidden !important; /* grows via JS, no scrollbar flash */
  min-height: 52px !important;
  max-height: 160px !important;
  line-height: 1.5 !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  font-family: var(--et-font-body) !important;
  vertical-align: middle !important;
  display: block !important;
}
/* Align wrapper vertically when textarea grows */
html body.dashboard-page .chat-input-wrapper {
  align-items: flex-end !important;
}
html body.dashboard-page .btn-send,
html body.dashboard-page .btn-stop {
  flex-shrink: 0 !important;
  align-self: flex-end !important;
}

/* ============================================================================
   THINKING DOTS — animated indicator while Bruce fetches the response
   ============================================================================ */
.hdsn-thinking-dots {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 18px 22px !important;
  min-width: 60px !important;
}
.hdsn-thinking-dots span {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--et-petrol, #004953) !important;
  opacity: 0.25 !important;
  animation: hdsn-dot-pulse 1.4s ease-in-out infinite both !important;
  display: inline-block !important;
}
.hdsn-thinking-dots span:nth-child(1) { animation-delay: 0s !important; }
.hdsn-thinking-dots span:nth-child(2) { animation-delay: 0.22s !important; }
.hdsn-thinking-dots span:nth-child(3) { animation-delay: 0.44s !important; }

@keyframes hdsn-dot-pulse {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
  40%            { opacity: 1;   transform: scale(1.15); }
}

/* ============================================================================
   CHAT STREAMING — Claude-style UX (fade-in tokens, cursor, per-msg actions)
   ============================================================================ */

/* Streaming message: subtle entrance, content fades in block-by-block. */
.message.henderson.hdsn-streaming .hdsn-stream-content > * {
  animation: hdsn-block-fade-in 0.35s ease-out both;
}
@keyframes hdsn-block-fade-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Blinking caret while streaming. */
.hdsn-typing-cursor {
  display: inline-block;
  width: 7px;
  height: 1.05em;
  vertical-align: text-bottom;
  margin-left: 2px;
  background: var(--et-petrol, #004953);
  animation: hdsn-caret-blink 1s steps(2) infinite;
  opacity: 0.65;
  border-radius: 1px;
}
@keyframes hdsn-caret-blink {
  50% { opacity: 0; }
}

/* Per-message action buttons (copy / regenerate) — Claude-style, visible on hover. */
.hdsn-msg-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 73, 83, 0.08);
  opacity: 0;
  transition: opacity 0.2s;
}
.message.henderson:hover .hdsn-msg-actions,
.message.henderson .hdsn-msg-actions:focus-within {
  opacity: 1;
}
.hdsn-msg-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid rgba(0, 73, 83, 0.15);
  background: transparent;
  color: var(--et-text-soft, #5a6a73);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: var(--et-font-body), Inter, sans-serif;
}
.hdsn-msg-action:hover {
  background: rgba(0, 73, 83, 0.06);
  color: var(--et-petrol, #004953);
  border-color: rgba(0, 73, 83, 0.3);
}
.hdsn-msg-action svg {
  flex-shrink: 0;
}

/* Source pills (RAG mode) */
.hdsn-stream-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.hdsn-stream-sources:empty {
  display: none;
}
.hdsn-source-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: rgba(20, 184, 166, 0.12);
  color: var(--mint-700, #0d9488);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--et-font-body), Inter, sans-serif;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================================
   MARKDOWN — fully rendered Claude-style typography
   ============================================================================ */
.message.henderson .message-bubble h1,
.message.henderson .message-bubble h2,
.message.henderson .message-bubble h3,
.message.henderson .message-bubble h4 {
  font-family: var(--et-font-display), 'Inter Display', Inter, sans-serif;
  color: var(--et-petrol, #004953);
  font-weight: 700;
  line-height: 1.25;
  margin: 1.1em 0 0.4em;
}
.message.henderson .message-bubble h1 { font-size: 1.5em; }
.message.henderson .message-bubble h2 { font-size: 1.3em; }
.message.henderson .message-bubble h3 { font-size: 1.15em; }
.message.henderson .message-bubble h4 { font-size: 1.05em; }
.message.henderson .message-bubble h1:first-child,
.message.henderson .message-bubble h2:first-child,
.message.henderson .message-bubble h3:first-child { margin-top: 0; }

.message.henderson .message-bubble p {
  margin: 0.45em 0;
  line-height: 1.55;
}
.message.henderson .message-bubble p:first-child { margin-top: 0; }
.message.henderson .message-bubble p:last-child { margin-bottom: 0; }

.message.henderson .message-bubble ul,
.message.henderson .message-bubble ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
  line-height: 1.55;
}
.message.henderson .message-bubble li {
  margin: 0.2em 0;
}
.message.henderson .message-bubble li::marker {
  color: var(--mint-500, #14b8a6);
}

.message.henderson .message-bubble strong {
  color: var(--et-petrol, #004953);
  font-weight: 700;
}

.message.henderson .message-bubble em {
  font-style: italic;
  color: inherit;
}

.message.henderson .message-bubble a {
  color: var(--mint-600, #0d9488);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.message.henderson .message-bubble a:hover {
  color: var(--et-petrol, #004953);
}

.message.henderson .message-bubble blockquote {
  margin: 0.6em 0;
  padding: 0.4em 0.9em;
  border-left: 3px solid var(--mint-500, #14b8a6);
  background: rgba(20, 184, 166, 0.05);
  color: var(--et-text-soft, #5a6a73);
  font-style: italic;
  border-radius: 0 6px 6px 0;
}

.message.henderson .message-bubble hr {
  border: none;
  border-top: 1px solid rgba(0, 73, 83, 0.15);
  margin: 1em 0;
}

/* Inline code */
.hdsn-inline-code {
  background: rgba(0, 73, 83, 0.07);
  color: var(--et-petrol, #004953);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
  font-size: 0.88em;
}

/* Code blocks */
.hdsn-code-block {
  position: relative;
  background: #0f1f1d;
  color: #e8edf0;
  padding: 14px 16px;
  border-radius: 10px;
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
  font-size: 13px;
  line-height: 1.55;
  overflow-x: auto;
  margin: 0.8em 0;
  border: 1px solid rgba(255,255,255,0.04);
}
.hdsn-code-block code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  white-space: pre;
}
.hdsn-code-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 8px;
  background: rgba(255,255,255,0.08);
  color: #aab8be;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s, color 0.15s;
}
.hdsn-code-copy:hover {
  background: rgba(255,255,255,0.16);
  color: #fff;
}

/* Tables */
.hdsn-table-wrap {
  overflow-x: auto;
  margin: 0.8em 0;
  border-radius: 8px;
  border: 1px solid rgba(0, 73, 83, 0.12);
}
.hdsn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93em;
}
.hdsn-table th {
  background: rgba(0, 73, 83, 0.05);
  color: var(--et-petrol, #004953);
  padding: 8px 12px;
  text-align: left;
  font-weight: 700;
  border-bottom: 1px solid rgba(0, 73, 83, 0.15);
}
.hdsn-table td {
  padding: 7px 12px;
  border-bottom: 1px solid rgba(0, 73, 83, 0.08);
}
.hdsn-table tr:last-child td {
  border-bottom: none;
}
.hdsn-table tr:hover td {
  background: rgba(0, 73, 83, 0.03);
}

/* Smooth scroll inside chat messages container */
.chat-messages {
  scroll-behavior: smooth;
}
.chat-messages.userHasScrolledUp {
  scroll-behavior: auto;  /* don't fight the user */
}

/* ============================================================================
   SIDEBAR CONVERSATIONS — Claude-style (groupé par récence, hover delete)
   ============================================================================ */

/* Override base styling pour matcher l'esthétique eurotrade */
html body.dashboard-page .history-sidebar {
  background: var(--et-ivory, #fcfaf3) !important;
  border-right: 1px solid rgba(0, 73, 83, 0.08) !important;
  box-shadow: 4px 0 32px rgba(0, 73, 83, 0.06) !important;
  font-family: var(--et-font-body), Inter, sans-serif !important;
  padding: 0 !important;
}

html body.dashboard-page .history-header {
  padding: 22px 20px 14px !important;
  border-bottom: 1px solid rgba(0, 73, 83, 0.08) !important;
  background: transparent !important;
}
html body.dashboard-page .history-title {
  font-family: var(--et-font-display), 'Inter Display', Inter, sans-serif !important;
  font-weight: 700 !important;
  color: var(--et-petrol, #004953) !important;
  font-size: 17px !important;
  letter-spacing: 0.02em !important;
}
html body.dashboard-page .history-close {
  color: var(--et-text-soft, #5a6a73) !important;
  font-size: 24px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  transition: background 0.15s, color 0.15s !important;
}
html body.dashboard-page .history-close:hover {
  background: rgba(0, 73, 83, 0.06) !important;
  color: var(--et-petrol, #004953) !important;
}

/* "Nouvelle conversation" en haut, prominent */
html body.dashboard-page .history-new-chat {
  padding: 14px 16px 12px !important;
  border-bottom: 1px solid rgba(0, 73, 83, 0.06) !important;
  border-top: none !important;
  order: -1 !important;  /* Affiché en haut, pas en bas */
}
html body.dashboard-page .btn-new-chat {
  width: 100% !important;
  padding: 11px 16px !important;
  background: var(--et-petrol, #004953) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  font-family: var(--et-font-body), Inter, sans-serif !important;
  transition: background 0.15s, transform 0.15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
html body.dashboard-page .btn-new-chat:hover {
  background: #003942 !important;
  transform: translateY(-1px) !important;
}

/* Search input */
html body.dashboard-page .history-search {
  padding: 10px 16px !important;
  background: transparent !important;
}
html body.dashboard-page .history-search input {
  width: 100% !important;
  padding: 10px 12px !important;
  background: rgba(0, 73, 83, 0.04) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-family: var(--et-font-body), Inter, sans-serif !important;
  color: var(--et-text, #1a1a1a) !important;
  transition: background 0.15s, border-color 0.15s !important;
}
html body.dashboard-page .history-search input:focus {
  outline: none !important;
  background: #fff !important;
  border-color: rgba(0, 73, 83, 0.2) !important;
}

/* List container */
html body.dashboard-page .history-list {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 6px 10px 20px !important;
  background: transparent !important;
}
html body.dashboard-page .history-list::-webkit-scrollbar { width: 6px; }
html body.dashboard-page .history-list::-webkit-scrollbar-thumb {
  background: rgba(0, 73, 83, 0.12);
  border-radius: 3px;
}

/* Buckets (Today / Yesterday / etc.) */
.hdsn-sidebar-bucket {
  margin-bottom: 18px;
}
.hdsn-sidebar-bucket-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--et-text-soft, #5a6a73);
  padding: 10px 8px 6px;
  opacity: 0.7;
}

/* Conversation card */
.hdsn-conv-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.12s;
  margin-bottom: 2px;
}
.hdsn-conv-item:hover {
  background: rgba(0, 73, 83, 0.05);
}
.hdsn-conv-item.hdsn-conv-active {
  background: rgba(20, 184, 166, 0.10);
}
.hdsn-conv-item.hdsn-conv-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--mint-500, #14b8a6);
}

.hdsn-conv-main {
  flex: 1;
  min-width: 0;
}
.hdsn-conv-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--et-text, #1a1a1a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 5px;
}
.hdsn-conv-meta {
  font-size: 11.5px;
  color: var(--et-text-soft, #5a6a73);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.hdsn-conv-time {
  font-variant-numeric: tabular-nums;
}
.hdsn-conv-count {
  opacity: 0.7;
}

/* Badge for local-only conversations */
.hdsn-conv-badge {
  color: var(--mint-500, #14b8a6);
  font-size: 10px;
  flex-shrink: 0;
}

/* Delete button — visible on hover */
.hdsn-conv-delete {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--et-text-soft, #5a6a73);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.hdsn-conv-item:hover .hdsn-conv-delete {
  opacity: 1;
}
.hdsn-conv-delete:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* Empty state */
.hdsn-sidebar-empty {
  text-align: center;
  padding: 60px 20px 40px;
  color: var(--et-text-soft, #5a6a73);
}
.hdsn-sidebar-empty-icon {
  font-size: 36px;
  margin-bottom: 14px;
  opacity: 0.5;
}
.hdsn-sidebar-empty p {
  font-size: 13.5px;
  margin: 0;
}

/* Loading skeletons */
.hdsn-sidebar-loading {
  padding: 10px;
}
.hdsn-sidebar-skeleton {
  height: 48px;
  background: linear-gradient(90deg,
    rgba(0,73,83,0.04) 0%,
    rgba(0,73,83,0.08) 50%,
    rgba(0,73,83,0.04) 100%);
  background-size: 200% 100%;
  border-radius: 9px;
  margin-bottom: 6px;
  animation: hdsn-skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes hdsn-skeleton-shimmer {
  0%   { background-position: 200% 50%; }
  100% { background-position: -200% 50%; }
}

/* Sidebar slide-in animation */
html body.dashboard-page .history-sidebar.open {
  transform: translateX(0) !important;
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1) !important;
}
html body.dashboard-page .history-sidebar:not(.open) {
  transition: transform 0.22s cubic-bezier(0.4, 0.0, 1, 1) !important;
}

/* Overlay: subtler darken */
html body.dashboard-page .history-overlay {
  background: rgba(0, 73, 83, 0.18) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

/* ============================================================================
   CFO WIDGETS — Cashflow forecast + Aging + Commissions
   ============================================================================ */

.hdsn-cfo-suite {
  display: grid;
  gap: 20px;
  margin: 28px 0;
}

.hdsn-cfo-card {
  background: #fff;
  border: 1px solid rgba(0, 73, 83, 0.10);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 1px 3px rgba(0, 73, 83, 0.04);
}

.hdsn-cfo-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}

.hdsn-cfo-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--et-text-soft, #5a6a73);
  padding: 3px 8px;
  background: rgba(0, 73, 83, 0.05);
  border-radius: 4px;
}
.hdsn-cfo-eyebrow[data-accent="red"]   { color: #dc2626; background: rgba(220, 38, 38, 0.08); }
.hdsn-cfo-eyebrow[data-accent="mint"]  { color: #0d9488; background: rgba(20, 184, 166, 0.10); }
.hdsn-cfo-eyebrow[data-accent="amber"] { color: #b45309; background: rgba(245, 158, 11, 0.10); }

.hdsn-cfo-title {
  font-family: var(--et-font-display), 'Inter Display', Inter, sans-serif;
  font-weight: 700;
  color: var(--et-petrol, #004953);
  font-size: 18px;
  margin: 0;
  letter-spacing: 0.01em;
}

.hdsn-cfo-meta {
  color: var(--et-text-soft, #5a6a73);
  font-size: 12.5px;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.hdsn-cfo-meta strong {
  color: var(--et-petrol, #004953);
  font-weight: 700;
}

/* ── Forecast chart card ───────────────────────────────────────────────── */
.hdsn-cfo-forecast-card .hdsn-cfo-canvas {
  position: relative;
  height: 280px;
  margin-bottom: 10px;
}
.hdsn-cfo-forecast-insights {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 73, 83, 0.06);
}
.hdsn-forecast-insight {
  display: flex;
  flex-direction: column;
  padding: 8px 14px;
  background: rgba(0, 73, 83, 0.04);
  border-radius: 9px;
  border-left: 3px solid var(--mint-500, #14b8a6);
}
.hdsn-forecast-insight.alert {
  background: rgba(220, 38, 38, 0.06);
  border-left-color: #dc2626;
}
.hdsn-forecast-insight-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--et-text-soft, #5a6a73);
}
.hdsn-forecast-insight.alert .hdsn-forecast-insight-label { color: #dc2626; }
.hdsn-forecast-insight-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--et-petrol, #004953);
  font-variant-numeric: tabular-nums;
}
.hdsn-forecast-insight.alert .hdsn-forecast-insight-value { color: #dc2626; }
.hdsn-forecast-insight-date {
  font-size: 11.5px;
  color: var(--et-text-soft, #5a6a73);
  font-style: italic;
}

/* ── Watch grid : 3 cards (AP, Commissions, AR) ───────────────────────── */
.hdsn-cfo-watch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 18px;
}
.hdsn-cfo-watch-card {
  display: flex;
  flex-direction: column;
}
.hdsn-cfo-watch-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 60px;
}
.hdsn-cfo-empty {
  padding: 28px 12px;
  text-align: center;
  color: var(--et-text-soft, #5a6a73);
  font-size: 13.5px;
  line-height: 1.5;
}
.hdsn-cfo-card-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--mint-600, #0d9488);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s;
}
.hdsn-cfo-card-link:hover { color: var(--et-petrol, #004953); }

/* Row in aging / commission list */
.hdsn-aging-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(0, 73, 83, 0.025);
  border-radius: 9px;
  border-left: 3px solid transparent;
  transition: background 0.12s;
}
.hdsn-aging-row[data-bucket="red"]   { border-left-color: var(--error, #DC2626); }
.hdsn-aging-row[data-bucket="orange"]{ border-left-color: var(--accent, #C4571A); }
.hdsn-aging-row[data-bucket="amber"] { border-left-color: var(--warning, #F59E0B); }
.hdsn-aging-row[data-bucket="green"] { border-left-color: var(--success, #16A34A); }
.hdsn-aging-row:hover {
  background: rgba(0, 73, 83, 0.05);
}

.hdsn-aging-main { min-width: 0; }
.hdsn-aging-name {
  font-weight: 600;
  color: var(--et-text, #1a1a1a);
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hdsn-aging-reminded {
  font-size: 10px;
  background: rgba(20, 184, 166, 0.15);
  color: var(--mint-600, #0d9488);
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
}
.hdsn-comm-period {
  font-weight: 500;
  color: var(--et-text-soft, #5a6a73);
  font-size: 11.5px;
}
.hdsn-aging-sub {
  font-size: 11.5px;
  color: var(--et-text-soft, #5a6a73);
  margin-top: 2px;
}
.hdsn-aging-age {
  font-weight: 600;
}
.hdsn-age-red    { color: var(--error, #DC2626); }
.hdsn-age-orange { color: var(--accent, #C4571A); }
.hdsn-age-amber  { color: var(--warning-dark, #92400E); }
.hdsn-age-green  { color: var(--success, #16A34A); }

.hdsn-aging-amount {
  font-weight: 700;
  color: var(--et-petrol, #004953);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  white-space: nowrap;
}
.hdsn-aging-action button {
  padding: 5px 10px;
  background: var(--et-petrol, #004953);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  white-space: nowrap;
}
.hdsn-aging-action button:hover {
  background: #003942;
  transform: translateY(-1px);
}
.hdsn-aging-more {
  text-align: center;
  font-size: 11.5px;
  color: var(--et-text-soft, #5a6a73);
  font-style: italic;
  padding: 6px;
}

/* ============================================================================
   DOCTOR BAR — diagnostic + bouton synchroniser sur la home
   ============================================================================ */
.hdsn-doctor-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  margin: 18px 0;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 10px;
  font-size: 13.5px;
  flex-wrap: wrap;
}
.hdsn-doctor-info {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--et-text, #1a1a1a);
  flex: 1;
  min-width: 250px;
}
.hdsn-doctor-status {
  font-size: 14px;
  line-height: 1;
}
.hdsn-doctor-actions {
  display: flex;
  gap: 8px;
}
.hdsn-doctor-actions button {
  padding: 8px 14px;
  background: var(--et-petrol, #004953);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  font-family: var(--et-font-body), Inter, sans-serif;
}
.hdsn-doctor-actions button:hover:not(:disabled) {
  background: #003942;
}
.hdsn-doctor-actions button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.hdsn-doctor-actions button[id$="RefreshBtn"] {
  background: transparent;
  color: var(--et-text-soft, #5a6a73);
  border: 1px solid rgba(0, 73, 83, 0.15);
  padding: 8px 12px;
  font-size: 14px;
}
.hdsn-doctor-actions button[id$="RefreshBtn"]:hover {
  background: rgba(0, 73, 83, 0.05);
  color: var(--et-petrol, #004953);
}

/* ============================================================================
   TOKEN COST CHIP — compteur de coût IA dans le header (toutes pages)
   ============================================================================ */
.hdsn-token-cost {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  background: rgba(20, 184, 166, 0.10);
  color: var(--mint-700, #0d9488);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--et-font-body), Inter, sans-serif;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  cursor: help;
  white-space: nowrap;
  border: 1px solid rgba(20, 184, 166, 0.18);
  transition: background 0.15s, color 0.15s;
}
.hdsn-token-cost:hover {
  background: rgba(20, 184, 166, 0.16);
  color: var(--et-petrol, #004953);
}

/* Active nav link state — souligné mint sous le lien de la page courante */
html body header.header .nav-menu .nav-link.active {
  color: var(--et-petrol, #004953) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  position: relative;
}
html body header.header .nav-menu .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--mint-500, #14b8a6);
  border-radius: 1px;
}

/* ============================================================================
   DOCUMENTS — Badge sous-type facture (AVOIR / PROFORMA / DEVIS)
   ============================================================================ */
.mem-tile-subtype {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  font-family: var(--et-font-body), Inter, sans-serif;
  pointer-events: none;
  user-select: none;
}

/* Bouton sous-type dans la modal reclassify (plus petits que les boutons catégorie) */
.mem-reclassify-btn.mem-subtype-btn {
  padding: 8px 10px !important;
  min-height: 56px !important;
}
.mem-reclassify-btn.mem-subtype-btn .icon { font-size: 16px !important; }
.mem-reclassify-btn.mem-subtype-btn .lbl { font-size: 12px !important; }

/* ============================================================================
   INTERRUPTED BADGE — réponse partielle + bouton Continuer
   ============================================================================ */
.hdsn-interrupted-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 8px 14px;
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 8px;
  font-size: 12.5px;
  color: #b45309;
}
.hdsn-interrupted-icon {
  font-size: 14px;
}
.hdsn-interrupted-text {
  font-weight: 600;
}
.hdsn-interrupted-continue {
  margin-left: auto;
  padding: 5px 12px;
  background: #b45309;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  font-family: var(--et-font-body), Inter, sans-serif;
}
.hdsn-interrupted-continue:hover:not(:disabled) {
  background: #92400e;
}
.hdsn-interrupted-continue:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================================
   MANUAL DATA ENTRY — saisie manuelle des chiffres dans le preview
   ============================================================================ */
.mem-manual-entry {
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.20);
  border-radius: 10px;
}
.mem-manual-entry[open] {
  background: rgba(245, 158, 11, 0.08);
}
.mem-manual-summary {
  font-weight: 600;
  color: #b45309;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  user-select: none;
  font-size: 13.5px;
}
.mem-manual-summary::-webkit-details-marker { display: none; }
.mem-manual-summary::before {
  content: '▸';
  display: inline-block;
  transition: transform 0.15s;
  color: #b45309;
}
.mem-manual-entry[open] .mem-manual-summary::before { transform: rotate(90deg); }
.mem-manual-hint {
  font-weight: 400;
  font-size: 12px;
  color: var(--et-text-soft, #5a6a73);
  font-style: italic;
}
.mem-manual-form {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mem-manual-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.mem-manual-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mem-manual-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--et-petrol, #004953);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mem-manual-field label .required { color: #dc2626; }
.mem-manual-field input,
.mem-manual-field select {
  padding: 8px 10px;
  border: 1px solid rgba(0, 73, 83, 0.18);
  border-radius: 7px;
  font-size: 13.5px;
  font-family: var(--et-font-body), Inter, sans-serif;
  background: #fff;
  color: var(--et-text, #1a1a1a);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mem-manual-field input:focus,
.mem-manual-field select:focus {
  outline: none;
  border-color: var(--mint-500, #14b8a6);
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.18);
}
.mem-manual-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  justify-content: flex-end;
}
.mem-manual-save {
  padding: 8px 16px;
  background: var(--et-petrol, #004953);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.mem-manual-save:hover { background: #003942; }
.mem-manual-cancel {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid rgba(0, 73, 83, 0.15);
  color: var(--et-text-soft, #5a6a73);
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
}
.mem-manual-cancel:hover {
  background: rgba(0, 73, 83, 0.05);
}

/* Bouton Ré-analyser dans la toolbar Documents */
.mem-bulk-reanalyze {
  padding: 8px 14px;
  background: rgba(99, 91, 255, 0.10);
  color: #5b52ff;
  border: 1px solid rgba(99, 91, 255, 0.22);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  font-family: var(--et-font-body), Inter, sans-serif;
}
.mem-bulk-reanalyze:hover:not(:disabled) {
  background: rgba(99, 91, 255, 0.18);
  transform: translateY(-1px);
}
.mem-bulk-reanalyze:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================================================
   EXPIRED / PÉRIMÉE BUCKET — factures non payées > 180j
   ============================================================================ */

/* Ligne de tuile périmée : grisée MAIS lisible (WCAG AA respecté).
   Fix 2026-05-20 : l'ancienne version cumulait opacity:0.78 sur bg
   rgba(120,120,120,0.06) + color #6b7280 → contraste ~2:1 (illisible).
   Nouvelle version : bg gris clair PLEIN + texte secondary (~7:1 sur #F3F4F6). */
.hdsn-aging-row[data-bucket="expired"] {
  background: var(--bg-tertiary, #F3F4F6);
  border-left-color: var(--text-muted, #9CA3AF);
}
.hdsn-aging-row[data-bucket="expired"]:hover {
  background: #E5E7EB;
}
.hdsn-aging-row[data-bucket="expired"] .hdsn-aging-name {
  text-decoration: line-through;
  text-decoration-color: var(--text-muted, #9CA3AF);
  color: var(--text-secondary, #555555);
}
.hdsn-aging-row[data-bucket="expired"] .hdsn-aging-amount {
  color: var(--text-secondary, #555555);
  font-weight: 500;
}
.hdsn-age-expired {
  color: var(--text-secondary, #555555);
  font-style: italic;
  font-weight: 600;
}

/* Petit pill dans la meta du widget pour signaler les périmées — gris lisible */
.hdsn-expired-pill {
  display: inline-block;
  padding: 1px 7px;
  background: var(--bg-tertiary, #F3F4F6);
  color: var(--text-secondary, #555555);
  border: 1px solid var(--border, #E5E5E0);
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: help;
}

/* ============================================================================
   CASH HERO — widget trésorerie totale en tête de home
   ============================================================================ */
.hdsn-cash-hero {
  display: grid;
  grid-template-columns: minmax(260px, 1.3fr) 2fr;
  gap: 24px;
  padding: 24px 28px;
  margin: 24px 0 28px;
  background: linear-gradient(135deg, #fff 0%, rgba(20, 184, 166, 0.04) 100%);
  border: 1px solid rgba(0, 73, 83, 0.10);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 73, 83, 0.05);
}
@media (max-width: 800px) {
  .hdsn-cash-hero { grid-template-columns: 1fr; }
}

.hdsn-cash-hero-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  border-right: 1px solid rgba(0, 73, 83, 0.08);
  padding-right: 24px;
}
@media (max-width: 800px) {
  .hdsn-cash-hero-main {
    border-right: none;
    border-bottom: 1px solid rgba(0, 73, 83, 0.08);
    padding-right: 0;
    padding-bottom: 18px;
  }
}
.hdsn-cash-hero-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--et-text-soft, #5a6a73);
}
.hdsn-cash-hero-total {
  font-family: var(--et-font-display), 'Inter Display', Inter, sans-serif;
  font-size: 42px;
  font-weight: 800;
  color: var(--et-petrol, #004953);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.hdsn-cash-hero-meta {
  font-size: 12.5px;
  color: var(--et-text-soft, #5a6a73);
  font-style: italic;
}

.hdsn-cash-hero-accounts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  max-height: 200px;
  overflow-y: auto;
  align-content: start;
}
.hdsn-cash-acct {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(0, 73, 83, 0.08);
  border-radius: 10px;
  transition: box-shadow 0.15s, transform 0.15s;
}
.hdsn-cash-acct:hover {
  box-shadow: 0 2px 8px rgba(0, 73, 83, 0.08);
  transform: translateY(-1px);
}
.hdsn-cash-acct-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.hdsn-cash-acct-icon {
  font-size: 14px;
}
.hdsn-cash-acct-bank {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--et-petrol, #004953);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hdsn-cash-acct-iban {
  font-size: 10.5px;
  color: var(--et-text-soft, #5a6a73);
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}
.hdsn-cash-acct-balance {
  font-size: 18px;
  font-weight: 700;
  color: var(--et-text, #1a1a1a);
  font-variant-numeric: tabular-nums;
}
.hdsn-cash-acct-eur {
  font-size: 11px;
  color: var(--mint-700, #0d9488);
  font-weight: 600;
  display: block;
  margin-top: 2px;
}
.hdsn-cash-acct-date {
  font-size: 10.5px;
  color: var(--et-text-soft, #5a6a73);
  font-style: italic;
  margin-top: 4px;
}

/* ============================================================================
   DEDUP — badges sur tiles + bouton bulk + modal
   ============================================================================ */

/* Badge doublon auto-marqué */
.mem-tile-badge.duplicate {
  background: rgba(120, 120, 120, 0.18) !important;
  color: #6b7280 !important;
  cursor: pointer !important;
}
.mem-tile.status-processed:has(.mem-tile-badge.duplicate) {
  opacity: 0.6;
}
.mem-tile.status-processed:has(.mem-tile-badge.duplicate):hover {
  opacity: 1;
}

/* Badge doublon en attente de review */
.mem-tile-badge.dup-review {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #b45309 !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  animation: hdsn-dup-pulse 2.4s ease-in-out infinite;
}
@keyframes hdsn-dup-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15); }
}

/* Bouton bulk scan dans la toolbar */
.mem-bulk-dedup {
  padding: 8px 14px;
  background: rgba(245, 158, 11, 0.10);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  font-family: var(--et-font-body), Inter, sans-serif;
}
.mem-bulk-dedup:hover {
  background: rgba(245, 158, 11, 0.18);
  transform: translateY(-1px);
}

/* Refresh button on cash hero */
.hdsn-cash-hero-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
.hdsn-cash-hero-refresh {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(0, 73, 83, 0.15);
  border-radius: 6px;
  color: var(--et-text-soft, #5a6a73);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hdsn-cash-hero-refresh:hover:not(:disabled) {
  background: rgba(0, 73, 83, 0.06);
  color: var(--et-petrol, #004953);
  border-color: rgba(0, 73, 83, 0.3);
}
.hdsn-cash-hero-refresh:disabled { opacity: 0.6; }
@keyframes hdsn-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}