/**
 * Cash Scanner - Thèmes Noir & Blanc + Blanc & Noir (V4.5.253)
 * .bw-mode  : fond noir OLED, texte blanc — pour écrans OLED et présentations
 * .wbw-mode : fond blanc pur, texte noir pur — monochromatique, impression, WCAG AAA
 */

/* Variables B&W — palette cohérente */
html.bw-mode,
body.bw-mode {
    --bg-color: #0a0a0a;
    --bg-secondary: #141414;
    --bg-gradient: var(--bg-color);
    --hover-bg: #171717;
    --text-color: #fafafa;
    --text-primary: var(--text-color);
    --text-secondary: #a3a3a3;
    --card-bg: #171717;
    --border-color: #262626;
    --chart-grid-color: rgba(115,115,115,0.25);
    --shadow-color: rgba(255, 255, 255, 0.06);
    --input-bg: #171717;
    --input-border: #404040;
    --accent-primary: #e5e5e5;
    --accent-secondary: #b5b5b5;
    --accent-success: #4ade80;
    --accent-danger: #f87171;
    --accent-warning: #fbbf24;
    --opp-score-bg: #262626;
    --opp-score-text: #e5e5e5;
    --brief-bg: #171717;
    --secondary-text: #a3a3a3;
    --header-bg: transparent;
    --card-bg-solid: #171717;
    --success-bg: #262626;
    --success-text: #a3a3a3;
    --badge-bg: #262626;
    --badge-text: #a3a3a3;
    --msg-error-bg: #262626;
    --msg-error-text: #e5e5e5;
    --msg-success-bg: #262626;
    --msg-success-text: #e5e5e5;
    --msg-info-bg: #262626;
    --msg-info-text: #e5e5e5;
    --warning-bg: #262626;
    --warning-text: #a3a3a3;
    --msg-warning-bg: #262626;
    --msg-warning-text: #a3a3a3;
    /* Variables guide indicateurs */
    --guide-heading: #a3a3a3;
    --guide-section: #b5b5b5;
    --guide-table-row: #262626;
    --guide-penalty: #a3a3a3;
    --overlay-bg: rgba(0, 0, 0, 0.8);
    --card-border-radius: 12px;
    /* V4.7.82 — vars de gris intermédiaires (évite répétition des hex) */
    --bw-medium: #525252;     /* gris moyen (card borders, boutons bw) */
    --bw-subtle: #737373;     /* gris fin (icônes inactives) */
    --bw-dim: #d4d4d4;        /* gris clair (texte plots, icônes tertiaires) */
    /* V4.7.96 — vars contextuelles bw-theme */
    --bw-login-bg: #020617;      /* fond page login (bleu nuit) */
    --bw-login-border: #27272a;  /* bordures section login */
    --bw-scrollbar: #1f1f1f;     /* piste scrollbar */
    --bw-score-low: #1a1a1a;     /* score-range=low background */
    --bw-score-high: #2a2a2a;    /* score-range=high background */
    /* Aliases ticker.html (score panel) — cohérence avec dark-mode.css */
    --success: var(--accent-success);
    --warning: var(--accent-warning);
    --danger: var(--accent-danger);
    --accent: var(--accent-primary);
    /* V4.8.20 — vars magic numbers bw-mode */
    --bw-msg-success-bg: #052e16;      /* fond message succès (vert très sombre) */
    --bw-msg-success-border: #166534;  /* bordure message succès (vert foncé) */
    --bw-msg-error-bg: #450a0a;        /* fond message erreur (rouge très sombre) */
    --bw-msg-error-border: #dc2626;    /* bordure message erreur (rouge) */
    --bw-biometric-bg: #111827;        /* fond bloc biométrie */
    --bw-biometric-border: #3f3f46;    /* bordure icônes biométrie */
    --bw-biometric-hover: #18181b;     /* survol icônes biométrie */
}

/* ============================================================================
   MONOCHROME COMMUN — bw-mode + wbw-mode (CSS vars uniquement, valeurs via theme)
   ============================================================================ */

/* Body */
html.bw-mode body, body.bw-mode,
html.wbw-mode body, body.wbw-mode {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
}

/* Cards, header, sections */
body.bw-mode .card, body.bw-mode .header, body.bw-mode .section, body.bw-mode .panel,
body.wbw-mode .card, body.wbw-mode .header, body.wbw-mode .section, body.wbw-mode .panel {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

body.bw-mode .grid, body.bw-mode #dashboard-grid,
body.bw-mode .container > div:not(.card):not(.header):not(.opportunities):not(.config-section),
body.wbw-mode .grid, body.wbw-mode #dashboard-grid,
body.wbw-mode .container > div:not(.card):not(.header):not(.opportunities):not(.config-section) {
    background: transparent !important;
}

/* Inputs */
body.bw-mode input, body.bw-mode select, body.bw-mode textarea,
body.wbw-mode input, body.wbw-mode select, body.wbw-mode textarea {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-color) !important;
}

/* Labels, textes, titres */
body.bw-mode label, body.bw-mode p, body.bw-mode span:not(.emoji):not(.score-good):not(.score-warning):not(.score-danger),
body.bw-mode h1, body.bw-mode h2, body.bw-mode h3,
body.bw-mode h4, body.bw-mode h5, body.bw-mode h6,
body.wbw-mode label, body.wbw-mode p, body.wbw-mode span:not(.emoji):not(.score-good):not(.score-warning):not(.score-danger),
body.wbw-mode h1, body.wbw-mode h2, body.wbw-mode h3,
body.wbw-mode h4, body.wbw-mode h5, body.wbw-mode h6 {
    color: var(--text-color) !important;
}

body.bw-mode small, body.bw-mode .hint, body.bw-mode .secondary-text,
body.wbw-mode small, body.wbw-mode .hint, body.wbw-mode .secondary-text {
    color: var(--text-secondary) !important;
}

/* Tables */
body.bw-mode table, body.wbw-mode table { border-color: var(--border-color) !important; }
body.bw-mode th, body.wbw-mode th {
    background: var(--bg-secondary) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}
body.bw-mode td, body.wbw-mode td {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}
body.bw-mode tr:hover td, body.wbw-mode tr:hover td {
    background: var(--hover-bg) !important;
}

/* ============================================================================
   B&W STRICT (bw-mode uniquement)
   ============================================================================ */

/* Buttons */
body.bw-mode .btn-secondary,
body.bw-mode button.secondary {
    background: var(--bg-secondary) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

body.bw-mode .btn-secondary:hover,
body.bw-mode button.secondary:hover {
    background: var(--border-color) !important;
}

/* Modals, alerts */
body.bw-mode .modal,
body.bw-mode .modal-content,
body.bw-mode .dialog,
body.bw-mode .alert,
body.bw-mode .info-box,
body.bw-mode .message {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Stats (B&W : pas de couleur vive) */
body.bw-mode .stat-positive {
    background: transparent !important;
    color: var(--accent-primary) !important;
}
body.bw-mode .stat-negative {
    background: transparent !important;
    color: var(--text-secondary) !important;
}

/* Plotly charts B&W */
body.bw-mode .plotly,
body.bw-mode .js-plotly-plot,
body.bw-mode .plot-container,
body.bw-mode .chart-panel .plotly,
body.bw-mode div[id^="chart-"],
body.bw-mode div[id$="-chart"] {
    background: var(--bg-color) !important;
}

body.bw-mode .plotly .bg,
body.bw-mode .plotly rect.bg,
body.bw-mode .js-plotly-plot .bg,
body.bw-mode .plotly .plot,
body.bw-mode .plotly .subplot,
body.bw-mode svg.main-svg,
body.bw-mode .main-svg .bg {
    fill: var(--bg-color) !important;
}

body.bw-mode .plotly text,
body.bw-mode .js-plotly-plot text,
body.bw-mode .plotly .xtick text,
body.bw-mode .plotly .ytick text,
body.bw-mode .plotly .legendtext {
    fill: var(--bw-dim) !important;
}

body.bw-mode .plotly .gridlayer path,
body.bw-mode .plotly .crisp {
    stroke: var(--input-border) !important;
    stroke-opacity: 0.5 !important;
}

/* Buttons primary (B&W) */
body.bw-mode .btn {
    background: var(--border-color) !important;
    border-color: var(--input-border) !important;
    color: var(--text-color) !important;
}

body.bw-mode .btn:hover {
    background: var(--input-border) !important;
    color: var(--text-color) !important;
}

body.bw-mode .btn.primary {
    background: var(--bw-medium) !important;
    color: var(--text-color) !important;
}

body.bw-mode .modal-button-primary {
    background: var(--border-color) !important;
    color: var(--text-color) !important;
}
body.bw-mode .modal-button-primary:hover { background: var(--input-border) !important; }

/* Cards colored borders → gris B&W */
body.bw-mode .card.blue,
body.bw-mode .card.green,
body.bw-mode .card.purple,
body.bw-mode .card.orange,
body.bw-mode .card.red,
body.bw-mode .card.teal,
body.bw-mode .card.indigo {
    border-top-color: var(--bw-medium) !important;
}

/* Favorite / portfolio / alert icons — gris */
body.bw-mode #favorite-icon,
body.bw-mode button.watchlist-star,
body.bw-mode .watchlist-star { color: var(--accent-primary) !important; }
body.bw-mode #favorite-icon.filled,
body.bw-mode button.watchlist-star.filled { color: var(--text-secondary) !important; }
body.bw-mode #portfolio-icon:not(.filled),
body.bw-mode button.portfolio-btn:not(.filled) { color: var(--accent-primary) !important; }
body.bw-mode #portfolio-icon.filled,
body.bw-mode button.portfolio-btn.filled { color: var(--text-secondary) !important; }
body.bw-mode #alert-btn:not(.has-alert),
body.bw-mode .bell-icon:not(.active) { color: var(--bw-subtle) !important; }
body.bw-mode #alert-btn.has-alert,
body.bw-mode .bell-icon.active { color: var(--bw-dim) !important; }

/* Cartes opportunité & favoris : boutons étoile/cartable/analyser — même rendu, pas de rectangle */
body.bw-mode .opp-action-btn,
body.bw-mode .opp-item .opp-action-btn,
body.bw-mode .opp-item button.watchlist-star,
body.bw-mode .opp-item button.portfolio-btn,
body.bw-mode .card button.watchlist-star,
body.bw-mode .card button.portfolio-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    filter: grayscale(1) !important;
}
body.bw-mode .opp-action-btn:hover,
body.bw-mode .opp-item button.watchlist-star:hover,
body.bw-mode .opp-item button.portfolio-btn:hover {
    background: transparent !important;
}

/* ============================================================================
   B&W STRICT — Boutons, badges, inputs, modales, emojis (toutes pages)
   ============================================================================ */

/* Tous les boutons → gris (override couleurs vives), pas de grayscale sur le texte
   EXCLUSIONS : boutons icônes, close (background:none), fermeture modal */
body.bw-mode .btn:not(.icon-only),
body.bw-mode button:not([type="submit"]):not(.collapse-btn):not(.expand-btn):not(.opp-action-btn):not(.watchlist-star):not(.portfolio-btn):not(.icon-only):not(.score-explain-tab-btn):not([data-action="open-alert"]):not([data-action="close-modal"]),
body.bw-mode a.btn,
body.bw-mode .btn-primary,
body.bw-mode .btn-success,
body.bw-mode .btn-danger,
body.bw-mode .btn-secondary,
body.bw-mode .bt-generate-btn {
    background: var(--border-color) !important;
    border-color: var(--input-border) !important;
    color: var(--text-color) !important;
}
body.bw-mode .btn:hover,
body.bw-mode button:hover,
body.bw-mode a.btn:hover,
body.bw-mode .btn-primary:hover,
body.bw-mode .btn-success:hover,
body.bw-mode .btn-danger:hover,
body.bw-mode .btn-secondary:hover {
    background: var(--input-border) !important;
    color: var(--text-color) !important;
}

/* ============================================================================
   B&W — Score explain tabs (Momentum / Phoenix)
   Empêche les règles globales button:not(...) de dégrader le style.
   ============================================================================ */
body.bw-mode .score-explain-tabs {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    box-shadow: none !important;
}
body.bw-mode .score-explain-tab-btn {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--text-secondary) !important;
    box-shadow: none !important;
}
body.bw-mode .score-explain-tab-btn:hover {
    color: var(--text-color) !important;
}
body.bw-mode .score-explain-tab-btn.active {
    background: var(--input-border) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
}

/* Boutons icônes — transparents APRÈS la règle générale (spécificité ≥ button:not([attr]))
   body.bw-mode button.class = (0,2,2) = égal à button:not([type="submit"]), mais PLUS TARDIF → gagne */
body.bw-mode button.opp-action-btn,
body.bw-mode button.watchlist-star,
body.bw-mode .opp-item button.watchlist-star,
body.bw-mode .card button.watchlist-star,
body.bw-mode button.portfolio-btn,
body.bw-mode .opp-item button.portfolio-btn,
body.bw-mode .card button.portfolio-btn,
body.bw-mode button.collapse-btn,
body.bw-mode button.expand-btn,
body.bw-mode button#toggle-favorite-btn,
body.bw-mode button#toggle-portfolio-btn,
body.bw-mode button#alert-btn,
body.bw-mode button[data-action="open-alert"],
body.bw-mode button.has-alert {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
body.bw-mode button.opp-action-btn:hover,
body.bw-mode button.watchlist-star:hover,
body.bw-mode button.portfolio-btn:hover,
body.bw-mode button.collapse-btn:hover,
body.bw-mode button.expand-btn:hover,
body.bw-mode button#toggle-favorite-btn:hover,
body.bw-mode button#toggle-portfolio-btn:hover,
body.bw-mode button#alert-btn:hover,
body.bw-mode button[data-action="open-alert"]:hover {
    background: transparent !important;
}

/* Header : liens Admin, Portfolio, Logout, etc. */
body.bw-mode .header a,
body.bw-mode .header .btn,
body.bw-mode .header-actions a,
body.bw-mode #header-right-container a,
body.bw-mode #header-user-info a {
    background: var(--border-color) !important;
    border-color: var(--input-border) !important;
    color: var(--accent-primary) !important;
}
/* Exceptions : bouton Retour et liens « texte seul » — pas de fond pour éviter le rectangle qui contraste */
body.bw-mode .header a.btn-back,
body.bw-mode .header-actions a.btn-back,
body.bw-mode .header .btn-back,
body.bw-mode a.btn-back {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
body.bw-mode .header a:hover,
body.bw-mode .header .btn:hover {
    background: var(--input-border) !important;
}
body.bw-mode .header a.btn-back:hover,
body.bw-mode .header-actions a.btn-back:hover,
body.bw-mode a.btn-back:hover {
    background: transparent !important;
    color: var(--text-color) !important;
}

/* Header (barre entière) : fond transparent en B&W pour ne pas contraster avec le fond général */
body.bw-mode .container .header,
body.bw-mode .header {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
body.bw-mode .header-actions {
    background: transparent !important;
}

/* Liens du header (sauf boutons primaires) : fond transparent */
body.bw-mode .header a:not(.btn-primary):not(.btn-success):not(.btn),
body.bw-mode .header-actions a:not(.btn-primary):not(.btn-success),
body.bw-mode #header-right-container a:not(.btn-primary):not(.btn),
body.bw-mode #header-user-info a {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
body.bw-mode .header a:not(.btn-primary):not(.btn-success):hover,
body.bw-mode .header-actions a:not(.btn-primary):not(.btn-success):hover,
body.bw-mode #header-right-container a:hover,
body.bw-mode #header-user-info a:hover {
    background: transparent !important;
}

/* Header : badges sans rectangle plein */
body.bw-mode .role-badge,
body.bw-mode .role-badge.role-admin,
body.bw-mode .role-badge.role-user {
    background: transparent !important;
    border-color: var(--input-border) !important;
    color: var(--text-secondary) !important;
}
body.bw-mode .role-badge.role-admin { color: var(--bw-dim) !important; }
body.bw-mode .portfolio-link {
    background: transparent !important;
    border-color: var(--input-border) !important;
    color: var(--accent-primary) !important;
}
body.bw-mode .portfolio-link:hover {
    background: transparent !important;
    border-color: var(--bw-medium) !important;
    color: var(--text-color) !important;
}

/* Badges (version, env, status) */
body.bw-mode .version-badge,
body.bw-mode .env-badge,
body.bw-mode .env-badge.env-prod,
body.bw-mode .env-badge.env-rec,
body.bw-mode .status-badge {
    background: var(--border-color) !important;
    border-color: var(--input-border) !important;
    color: var(--text-secondary) !important;
}

/* Champs de saisie (recherche, modèle IA, etc.) — pas de blanc ni violet */
body.bw-mode input[type="text"],
body.bw-mode input[type="email"],
body.bw-mode input[type="password"],
body.bw-mode input[type="search"],
body.bw-mode #quick-search,
body.bw-mode #search-ticker-input,
body.bw-mode select,
body.bw-mode textarea {
    background: var(--card-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-color) !important;
}
body.bw-mode input::placeholder,
body.bw-mode textarea::placeholder {
    color: var(--bw-subtle);
}

/* Cases à cocher et radios */
body.bw-mode input[type="checkbox"],
body.bw-mode input[type="radio"] {
    filter: grayscale(1) !important;
    accent-color: var(--input-border) !important;
    background-color: var(--input-bg) !important;
}
body.bw-mode input[type="checkbox"]:checked,
body.bw-mode input[type="radio"]:checked {
    filter: grayscale(1) brightness(0.85) !important;
}
body.bw-mode .settings-checkbox,
body.bw-mode .form-group-checkbox input[type="checkbox"],
body.bw-mode input[type="checkbox"].settings-checkbox {
    accent-color: var(--input-border) !important;
    filter: grayscale(1) !important;
    background-color: var(--input-bg) !important;
}
body.bw-mode .settings-checkbox:checked,
body.bw-mode .form-group-checkbox input[type="checkbox"]:checked {
    filter: grayscale(1) brightness(0.85) !important;
}

/* Modales : fond et contenu gris */
body.bw-mode .modal,
body.bw-mode .modal-content,
body.bw-mode .modal-header,
body.bw-mode .modal-body,
body.bw-mode .dialog,
body.bw-mode [role="dialog"] {
    background: var(--card-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-color) !important;
}
body.bw-mode .modal .btn,
body.bw-mode .modal button,
body.bw-mode .modal input,
body.bw-mode .modal select {
    background: var(--border-color) !important;
    border-color: var(--input-border) !important;
    color: var(--text-color) !important;
}

/* Emojis et icônes colorées → niveaux de gris */
body.bw-mode .emoji,
body.bw-mode span.emoji,
body.bw-mode [class*="emoji"] {
    filter: grayscale(1) !important;
}
body.bw-mode .card-header h2 img,
body.bw-mode .card h2 img,
body.bw-mode td img,
body.bw-mode .opp-item img {
    filter: grayscale(1) !important;
}

/* Messages (success, error, info) */
body.bw-mode .message.success,
body.bw-mode .message.error,
body.bw-mode .message.info,
body.bw-mode .alert,
body.bw-mode .info-box {
    background: var(--border-color) !important;
    border-color: var(--input-border) !important;
    color: var(--accent-primary) !important;
}

/* Cards avec bordures colorées (bleu, vert, etc.) */
body.bw-mode .card.blue .card-header,
body.bw-mode .card.green .card-header,
body.bw-mode .card.purple .card-header,
body.bw-mode .card.orange .card-header {
    border-color: var(--input-border) !important;
    filter: grayscale(1) !important;
}

/* Dropdown / select ouverts */
body.bw-mode option {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
}

/* Liens */
body.bw-mode a {
    color: var(--bw-dim) !important;
}
body.bw-mode a:hover {
    color: var(--text-color) !important;
}

/* ============================================================================
   V4.5.37 — B&W esthétique : login, score pills, modale IA, portfolio, usage, ticker
   ============================================================================ */

/* ----- Login ----- */
body.bw-mode .login-container {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}
body.bw-mode .form-group label {
    color: var(--text-secondary) !important;
}
body.bw-mode .form-group input {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-color) !important;
}
body.bw-mode .form-group input:focus {
    border-color: var(--bw-medium) !important;
    outline-color: var(--bw-medium) !important;
}
body.bw-mode .btn-login,
body.bw-mode .btn-social,
body.bw-mode .btn-google {
    background: var(--border-color) !important;
    border-color: var(--input-border) !important;
    color: var(--text-color) !important;
}
body.bw-mode .btn-login:hover,
body.bw-mode .btn-social:hover,
body.bw-mode .btn-google:hover {
    background: var(--input-border) !important;
    color: var(--text-color) !important;
}
body.bw-mode .auth-tab {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
body.bw-mode .auth-tab.active {
    background: var(--border-color) !important;
    color: var(--text-color) !important;
}
body.bw-mode .divider {
    color: var(--text-secondary) !important;
}

/* ----- Score pills & badges opportunités ----- */
body.bw-mode .opp-score,
body.bw-mode .opp-score.score-adj {
    background: var(--opp-score-bg) !important;
    color: var(--opp-score-text) !important;
}
/* V4.7.19 — Score gradient bw-mode (monochromatique : intensité croissante) */
body.bw-mode .opp-score[data-score-range="low"]      { background: var(--bw-score-low) !important; color: var(--bw-subtle) !important; font-weight: 400; }
body.bw-mode .opp-score[data-score-range="mid"]      { background: var(--opp-score-bg) !important; color: var(--opp-score-text) !important; }
body.bw-mode .opp-score[data-score-range="high"]     { background: var(--bw-score-high) !important; color: var(--bw-dim) !important; }
body.bw-mode .opp-score[data-score-range="excellent"]{ background: var(--input-border) !important; color: var(--text-color) !important; font-weight: 700; }
body.bw-mode .rank-badge,
body.bw-mode .rank-badge.rank-top5 {
    background: var(--border-color) !important;
    border-color: var(--input-border) !important;
    color: var(--text-secondary) !important;
}
body.bw-mode .score-mode-m, body.bw-mode .score-mode-p {
    background: var(--border-color) !important;
    border-color: var(--input-border) !important;
    color: var(--text-secondary) !important;
}
body.bw-mode .score-mode-badge.score-mode-active {
    background: var(--opp-score-bg) !important;
    color: var(--opp-score-text) !important;
    opacity: 1;
}
body.bw-mode .preset-mode-m, body.bw-mode .preset-mode-p {
    background: var(--border-color);
    color: var(--text-secondary);
}

/* ----- Modale Analyse IA (ticker) ----- */
body.bw-mode .analysis-ia-modal {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}
body.bw-mode .analysis-ia-modal h2,
body.bw-mode .analysis-ia-modal h3,
body.bw-mode .analysis-ia-modal p,
body.bw-mode .analysis-ia-modal div {
    color: inherit !important;
}
body.bw-mode .analysis-ia-modal [style*="background: var(--text-color)"],
body.bw-mode .analysis-ia-modal [style*="background:var(--text-color)"] {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}
body.bw-mode .analysis-ia-modal [style*="color:#0f172a"],
body.bw-mode .analysis-ia-modal [style*="color: #1e293b"],
body.bw-mode .analysis-ia-modal [style*="color:#1e293b"] {
    color: var(--text-color) !important;
}
body.bw-mode .analysis-ia-modal button[data-action="close-modal"] {
    color: var(--text-secondary) !important;
}
/* Croix pour fermer (toutes modales / cartes) : contraste B&W visible */
body.bw-mode .close-btn,
body.bw-mode .modal-close,
body.bw-mode .settings-modal-close,
body.bw-mode .close-modal,
body.bw-mode button[data-action="close-modal"],
body.bw-mode #close-alerts-list,
body.bw-mode #indicators-guide-modal button[data-action="close-modal"],
body.bw-mode [class*="close-btn"],
body.bw-mode .modal .close-btn {
    background: var(--border-color) !important;
    border: 1px solid var(--bw-medium) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: var(--accent-primary) !important;
}
body.bw-mode .close-btn:hover,
body.bw-mode .modal-close:hover,
body.bw-mode .settings-modal-close:hover,
body.bw-mode .close-modal:hover,
body.bw-mode button[data-action="close-modal"]:hover,
body.bw-mode #close-alerts-list:hover,
body.bw-mode #indicators-guide-modal button[data-action="close-modal"]:hover,
body.bw-mode .modal .close-btn:hover {
    background: var(--input-border) !important;
    border-color: var(--bw-subtle) !important;
    color: var(--text-color) !important;
}
body.bw-mode .analysis-ia-modal #downloadAnalysisBtn {
    background: var(--input-border) !important;
    border-color: var(--bw-medium) !important;
    color: var(--text-color) !important;
}
body.bw-mode .analysis-ia-modal #downloadAnalysisBtn:hover {
    background: var(--bw-medium) !important;
}

/* ----- Portfolio : performance summary & P&L ----- */
body.bw-mode #performance-summary > div {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
}
body.bw-mode #performance-summary > div > div:first-child {
    color: var(--text-secondary) !important;
}
body.bw-mode #performance-summary > div > div:last-child,
body.bw-mode #total-value,
body.bw-mode #total-cost,
body.bw-mode #total-pnl,
body.bw-mode #total-pnl-pct {
    color: var(--text-color) !important;
}

/* ----- Portfolio : carte Performance + conteneur du graphique (éviter fond blanc / bordure verte) ----- */
body.bw-mode .container .card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-top-color: var(--border-color) !important;
}
body.bw-mode .container .card .card.blue,
body.bw-mode .container .card .card.green,
body.bw-mode .container .card .card.purple,
body.bw-mode .container .card .card.orange,
body.bw-mode .container .card .card.red,
body.bw-mode .container .card .card.teal,
body.bw-mode .container .card .card.indigo {
    border-top-color: var(--border-color) !important;
}
/* Conteneur du canvas Chart.js (performance-chart) : fond sombre pour que le tracé soit visible en B&W */
body.bw-mode div:has(> #performance-chart) {
    background: var(--card-bg) !important;
    border-radius: 8px;
}
body.bw-mode #performance-chart {
    display: block;
}

/* ----- Usage / admin : pills Actif / Suspendu ----- */
body.bw-mode .usage-pill[style*="dcfce7"],
body.bw-mode .usage-pill[style*="166534"] {
    background: var(--border-color) !important;
    color: var(--text-secondary) !important;
    border-color: var(--input-border) !important;
}
body.bw-mode .usage-pill[style*="fee2e2"],
body.bw-mode .usage-pill[style*="991b1b"] {
    background: var(--border-color) !important;
    color: var(--text-secondary) !important;
    border-color: var(--input-border) !important;
}

/* ----- Ticker : score panel ----- */
body.bw-mode #score-panel {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}
body.bw-mode #score-panel:hover {
    background: var(--bg-secondary) !important;
}

/* ----- Ticker : chart panels & modale plein écran (align dark-mode) ----- */
body.bw-mode .chart-panel {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
body.bw-mode .chart-header {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-color) !important;
}
body.bw-mode .chart-title {
    color: var(--text-color) !important;
}
/* Bandeau dégradé en haut des cartes graphiques → gris uni en B&W */
body.bw-mode .chart-panel::before {
    background: var(--input-border);
    background-image: none;
}
body.bw-mode .score-section {
    background: transparent !important;
    border-left-color: var(--bw-medium) !important;
}
body.bw-mode .score-section:hover {
    background: transparent !important;
}
/* Config : boîte scheduler et bouton (éviter rectangles blancs) */
body.bw-mode #scheduler-status-box {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
body.bw-mode #scheduler-status-box span {
    color: var(--text-color) !important;
}
body.bw-mode #scheduler-toggle-btn {
    background: var(--border-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}
body.bw-mode .chart-modal {
    background-color: rgba(0, 0, 0, 0.95) !important;
}

/* Ticker : pas de rectangle sous isin / expand */
body.bw-mode .ticker-isin {
    background: transparent !important;
    color: var(--accent-primary) !important;
}
body.bw-mode .expand-btn:hover {
    background: transparent !important;
}

/* ============================================================================
   B&W — Éléments supplémentaires (analyse complète front)
   ============================================================================ */

/* Styles inline fréquents (index, config, portfolio, etc.) */
body.bw-mode div[style*="background: var(--text-color)"],
body.bw-mode div[style*="background:var(--text-color)"],
body.bw-mode div[style*="background: var(--text-color)fff"],
body.bw-mode div[style*="background:var(--text-color)fff"],
body.bw-mode div[style*="background: white"],
body.bw-mode div[style*="background:white"],
body.bw-mode [style*="background: white"],
body.bw-mode [style*="background:white"] {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
}
body.bw-mode div[style*="background: #f8fafc"],
body.bw-mode div[style*="background:#f8fafc"],
body.bw-mode div[style*="background: var(--text-color)"],
body.bw-mode div[style*="background:var(--text-color)"],
body.bw-mode div[style*="background: #f8f9fa"],
body.bw-mode div[style*="background:#f8f9fa"] {
    background: var(--bg-secondary) !important;
    color: var(--text-color) !important;
}
body.bw-mode [style*="color: #333"],
body.bw-mode [style*="color:#333"],
body.bw-mode [style*="color: #1e293b"],
body.bw-mode [style*="color:#1e293b"] {
    color: var(--text-color) !important;
}
body.bw-mode [style*="color: #64748b"],
body.bw-mode [style*="color:#64748b"],
body.bw-mode [style*="color: #475569"],
body.bw-mode [style*="color:#475569"] {
    color: var(--text-secondary) !important;
}

/* Index : zone scan progress & modèle IA */
body.bw-mode #scan-progress,
body.bw-mode #model-display {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}
body.bw-mode #progress-bar {
    background: linear-gradient(90deg, var(--bw-medium), var(--bw-subtle)) !important;
}
body.bw-mode #progress-details,
body.bw-mode #progress-text {
    color: var(--text-secondary) !important;
}

/* Backtest : alpha pos/nég et drill-down labels */
body.bw-mode .alpha-pos,
body.bw-mode .dd-label-top {
    color: var(--accent-secondary) !important;
}
body.bw-mode .alpha-neg,
body.bw-mode .dd-label-bot {
    color: var(--bw-subtle) !important;
}

/* Barre APK mobile (lien téléchargement) */
body.bw-mode .mobile-apk-bar {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}
body.bw-mode .mobile-apk-bar a {
    color: var(--accent-primary) !important;
    background: var(--card-bg) !important;
}
body.bw-mode .mobile-apk-bar a:hover {
    background: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Barre inline Configuration (user + actions) */
body.bw-mode .user-settings-inline {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Filtres opportunités (sélecteurs avec émojis) */
body.bw-mode .filter-opp-select,
body.bw-mode .display-limit-select {
    filter: grayscale(1) !important;
}
body.bw-mode .filter-opp-select option,
body.bw-mode .display-limit-select option {
    background: var(--bg-secondary) !important;
    color: var(--text-color) !important;
}

/* Login : bouton Google (outil officiel) — fond blanc de l’iframe atténué en B&W */
body.bw-mode #googleButtonContainer,
body.bw-mode #googleButtonContainer > * {
    filter: grayscale(1) brightness(0.55) contrast(1.12) !important;
}

/* Badges Vol+, setup quality, etc. — suppression des dégradés colorés */
body.bw-mode .setup-badge,
body.bw-mode .badge-gold,
body.bw-mode .badge-green,
body.bw-mode .badge-blue {
    background: var(--border-color) !important;
    color: var(--accent-primary) !important;
    border: 1px solid var(--input-border) !important;
    filter: grayscale(1) !important;
}

body.bw-mode .sig-badge,
body.bw-mode .sig-support {
    background: var(--border-color) !important;
    color: var(--text-secondary) !important;
    border-color: var(--input-border) !important;
    filter: grayscale(1) !important;
}

/* Boutons inline (config / header) */
body.bw-mode .btn-inline.btn-settings,
body.bw-mode .btn-inline.btn-logout {
    background: var(--border-color) !important;
    border-color: var(--input-border) !important;
    color: var(--text-color) !important;
}
body.bw-mode .btn-inline.btn-settings:hover,
body.bw-mode .btn-inline.btn-logout:hover {
    background: var(--input-border) !important;
    color: var(--text-color) !important;
}

/* Username pill */
body.bw-mode .username-pill {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Bannière mise à jour app (init.ts) */
body.bw-mode #app-update-banner {
    background: var(--input-border) !important;
    color: var(--text-color) !important;
}
body.bw-mode #app-update-banner button,
body.bw-mode #app-update-banner a {
    color: var(--text-color) !important;
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
}
body.bw-mode #app-update-banner button:hover,
body.bw-mode #app-update-banner a:hover {
    background: var(--hover-bg) !important;
}

/* Reset password page (styles inline dans la page) */
body.bw-mode .message.success {
    background: var(--border-color) !important;
    color: var(--bw-dim) !important;
    border-color: var(--input-border) !important;
}
body.bw-mode .message.error {
    background: var(--border-color) !important;
    color: var(--text-secondary) !important;
    border-color: var(--input-border) !important;
}
body.bw-mode .tab-btn.active {
    color: var(--accent-primary) !important;
    border-bottom-color: var(--bw-medium) !important;
}
body.bw-mode .back-link a {
    color: var(--accent-primary) !important;
}

/* Focus visible (éviter bleu vif et grosse surbrillance) */
body.bw-mode *:focus-visible {
    outline-color: var(--bw-medium) !important;
    box-shadow: 0 0 0 1px var(--border-color) !important;
}

/* Card selected / highlight — pas de halo, juste bordure */
body.bw-mode .card.selected,
body.bw-mode .card.highlight {
    border-color: var(--bw-medium) !important;
    box-shadow: none !important;
}

/* Loader / spinner (ui-extras) */
body.bw-mode .loading-spinner {
    border-top-color: var(--bw-medium) !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
}

/* Usage : boutons Suspendre / Activer (styles inline) */
body.bw-mode button[data-action="toggle-status"] {
    background: var(--border-color) !important;
    border-color: var(--input-border) !important;
    color: var(--accent-primary) !important;
}
body.bw-mode button[data-action="toggle-status"]:hover {
    background: var(--input-border) !important;
    color: var(--text-color) !important;
}

/* Portfolio : liens et bouton Analyser (inline) */
body.bw-mode .portfolio-item-actions a.btn,
body.bw-mode .portfolio-item-info a[href*="ticker.html"] {
    background: var(--border-color) !important;
    border-color: var(--input-border) !important;
    color: var(--text-color) !important;
}
body.bw-mode .portfolio-item-actions a.btn:hover {
    background: var(--input-border) !important;
}

/* Portfolio : bloc d’actions — neutralise les surbrillances et emojis colorés */
body.bw-mode .portfolio-item-actions {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    filter: grayscale(1) !important;
}

/* Indicators page (styles dans la page) */
body.bw-mode .hero,
body.bw-mode [class*="gradient"] {
    background: var(--bg-secondary) !important;
    color: var(--text-color) !important;
}
body.bw-mode .card h2,
body.bw-mode .card h3 {
    border-color: var(--border-color) !important;
}
body.bw-mode .info-box.border-green { border-left-color: var(--bw-medium) !important; }
body.bw-mode .info-box.border-red { border-left-color: var(--input-border) !important; }
body.bw-mode .info-box.border-blue { border-left-color: var(--bw-medium) !important; }

/* Indicators page : header, nav, nav-item, content */
body.bw-mode .header {
    color: var(--text-color) !important;
}
body.bw-mode .nav {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}
body.bw-mode .nav h2 {
    color: var(--text-color) !important;
}
body.bw-mode .nav-item {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}
body.bw-mode .nav-item:hover {
    background: var(--border-color) !important;
}
body.bw-mode .content {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* ========================================================================
   Boutons de thème (toutes pages) — suppression des dégradés colorés
   ======================================================================== */

body.bw-mode #theme-toggle,
body.bw-mode #theme-toggle-mobile {
    background: var(--border-color) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--input-border) !important;
}

/* ========================================================================
   Toasts / notifications génériques (ui-extras.css) — palette neutre
   ======================================================================== */

body.bw-mode .toast,
body.bw-mode .toast.success,
body.bw-mode .toast.error,
body.bw-mode .toast.info,
body.bw-mode .alert-toast,
body.bw-mode .alert-toast--info,
body.bw-mode .alert-toast--success,
body.bw-mode .alert-toast--warning,
body.bw-mode .alert-toast--error {
    background: var(--border-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--input-border) !important;
}

/* ========================================================================
   Login — bouton Google (Web SDK) : fond blanc atténué + B&W
   ======================================================================== */

body.bw-mode #googleButtonContainer {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
body.bw-mode #googleButtonContainer,
body.bw-mode #googleButtonContainer > * {
    filter: grayscale(1) brightness(0.55) contrast(1.12) !important;
}

/* ========================================================================
   Pages ticker / portfolio — hover, panneaux, emojis
   ======================================================================== */

/* Hover génériques (opp-item, suggestions, etc.) via --hover-bg */
body.bw-mode .opp-item:hover,
body.bw-mode .search-suggestion-item:hover {
    background: var(--hover-bg) !important;
}

/* Ticker : header principal */
body.bw-mode header {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}
body.bw-mode header:hover {
    transform: none !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) !important;
}

/* Ticker : titre principal (supprimer le dégradé coloré) */
body.bw-mode h1 {
    background: none !important;
    -webkit-text-fill-color: var(--text-color) !important;
    color: var(--text-color) !important;
}

/* Ticker : panneau d'analyse (en-tête + score) */
body.bw-mode .score-header {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-bottom-color: var(--border-color) !important;
}
body.bw-mode .score-header h3,
body.bw-mode .global-score {
    color: var(--text-color) !important;
    text-shadow: none !important;
    filter: grayscale(1) !important; /* emojis B&W */
}

/* Ticker : boutons bas de panneau (Guide des indicateurs, etc.) */
body.bw-mode #score-panel button.btn.secondary {
    background: var(--border-color) !important;
    border-color: var(--input-border) !important;
    color: var(--text-color) !important;
}
body.bw-mode #score-panel button.btn.secondary:hover {
    background: var(--input-border) !important;
}

/* Portfolio : cartes de la liste d'investissements */
body.bw-mode .portfolio-item {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
/* Tickers (AI.PA, EXA.PA…) et zone titre : pas de halo / fond contrasté */
body.bw-mode .portfolio-item-info h3,
body.bw-mode .portfolio-item-info h3 a,
body.bw-mode .portfolio-item-info h3 .watchlist-star {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
body.bw-mode .portfolio-item-info h3 a:hover {
    background: transparent !important;
}
body.bw-mode .portfolio-item-info p {
    color: var(--text-secondary) !important;
}
body.bw-mode .empty-state {
    background: transparent !important;
    color: var(--text-secondary) !important;
}

/* Portfolio : actions (⚡, 🔔, Modifier, Supprimer) — bloc entièrement neutre */
body.bw-mode .portfolio-item-actions {
    background: transparent !important;
    border-color: transparent !important;
    filter: grayscale(1) !important;
}
/* Modifier / Supprimer : pas de fond contrastant */
body.bw-mode .portfolio-item-actions .btn-secondary,
body.bw-mode .portfolio-item-actions .btn-danger.btn-small,
body.bw-mode .portfolio-item-actions button[data-action="edit"],
body.bw-mode .portfolio-item-actions button[data-action="delete"] {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
body.bw-mode .portfolio-item-actions .btn-secondary:hover,
body.bw-mode .portfolio-item-actions button[data-action="edit"]:hover {
    background: transparent !important;
}

/* Boutons Supprimer (alertes, listes) — pas de rectangle contrasté */
body.bw-mode button[data-action="delete-alert"],
body.bw-mode [data-action="delete-alert"],
body.bw-mode .btn-danger.btn-small {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

/* Emojis principaux (graphique, sections, titres) → niveaux de gris */
body.bw-mode .chart-title,
body.bw-mode .score-section h4,
body.bw-mode .score-header h3,
body.bw-mode .portfolio-item-info h3,
body.bw-mode .global-score {
    filter: grayscale(1) !important;
}

/* Guide des indicateurs : bouton retour — rester transparent au hover */
body.bw-mode .btn-back:hover {
    background: transparent !important;
    color: var(--text-color) !important;
}

/* Modal Guide des Indicateurs — contenu en grayscale (émojis) */
body.bw-mode .indicators-guide-inner {
    filter: grayscale(1) !important;
}

/* Modal Mes préférences — fond et contraste B&W */
body.bw-mode .settings-modal-content {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}
body.bw-mode .settings-modal-header h2 {
    color: var(--text-color) !important;
}
body.bw-mode .settings-modal-close {
    background: var(--border-color) !important;
    border: 1px solid var(--bw-medium) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: var(--accent-primary) !important;
}
body.bw-mode .settings-modal-close:hover {
    background: var(--input-border) !important;
    border-color: var(--bw-subtle) !important;
    color: var(--text-color) !important;
}
body.bw-mode .settings-form .settings-label {
    color: var(--text-secondary) !important;
}
body.bw-mode .settings-input {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-color) !important;
}
body.bw-mode .settings-input:focus {
    border-color: var(--bw-medium) !important;
    box-shadow: 0 0 0 3px rgba(115, 115, 115, 0.25) !important;
}
body.bw-mode .settings-subsection {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}
body.bw-mode .settings-hint,
body.bw-mode .settings-checkbox-label,
body.bw-mode .settings-checkbox-label span {
    color: var(--text-secondary) !important;
}

/* Portfolio : bloc infos (émojis 📅📊💰💵 etc.) en grayscale */
body.bw-mode .portfolio-item-info {
    filter: grayscale(1) !important;
}

/* Score value (ex. "611.8% (🔥 Fort)") — émojis en grayscale */
body.bw-mode .score-value {
    filter: grayscale(1) !important;
}

/* Panneau droit ticker : Objectifs & Risques, Stop suggéré, etc. — émojis en grayscale */
body.bw-mode #score-content,
body.bw-mode #score-content .score-section {
    filter: grayscale(1) !important;
}

/* ============================================================================
   Ascenseurs (scrollbars) — thème B&W (contraste renforcé)
   ============================================================================ */
body.bw-mode ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
body.bw-mode ::-webkit-scrollbar-track {
    background: var(--bw-scrollbar) !important;
    border-radius: 4px;
}
body.bw-mode ::-webkit-scrollbar-thumb {
    background: var(--bw-subtle) !important;
    border-radius: 4px;
    border: 2px solid var(--bw-scrollbar);
}
body.bw-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary) !important;
}
body.bw-mode ::-webkit-scrollbar-button {
    background: var(--bw-scrollbar) !important;
    color: var(--text-secondary) !important;
}
/* Firefox */
body.bw-mode {
    scrollbar-color: var(--bw-subtle) var(--bw-scrollbar);
    scrollbar-width: thin;
}

/* Boutons “retour” / icônes seules (étoiles, cartables, cloches) : pas de rectangle sous-jacent */
body.bw-mode .btn-back,
body.bw-mode #btn-back,
body.bw-mode #toggle-favorite-btn,
body.bw-mode #toggle-portfolio-btn,
body.bw-mode #alert-btn,
body.bw-mode .portfolio-item-actions button[data-action="open-alert"],
body.bw-mode button[onclick*="openAlertModal"] {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
body.bw-mode #toggle-favorite-btn:hover,
body.bw-mode #toggle-portfolio-btn:hover,
body.bw-mode #alert-btn:hover,
body.bw-mode .portfolio-item-actions button[data-action="open-alert"]:hover,
body.bw-mode button[onclick*="openAlertModal"]:hover {
    background: transparent !important;
}

/* ============================================================================
   Synthèse IA (brief) — zone de texte : fond sombre, pas de vert
   ============================================================================ */
body.bw-mode .brief-display,
body.bw-mode #brief-display,
body.bw-mode .card-content .brief-display,
body.bw-mode #card-brief .brief-display {
    background: var(--card-bg) !important;
    border-left: 4px solid var(--border-color) !important;
    color: var(--text-color) !important;
}
body.bw-mode .brief-display a,
body.bw-mode #brief-display a,
body.bw-mode .brief-display a[href],
body.bw-mode #brief-display a[href] {
    color: var(--accent-primary) !important;
}
body.bw-mode #card-brief .card-content,
body.bw-mode #card-brief #brief-card {
    background: transparent !important;
}

/* Eliminer les gros dégradés restants en B&W */
body.bw-mode [style*="linear-gradient"],
body.bw-mode .hero,
body.bw-mode [class*="gradient"] {
    background-image: none !important;
    background: var(--bg-secondary) !important;
}

/* ============================================================================
   Page de login — thème B&W
   ============================================================================ */

/* Fond général */
body.bw-mode {
    background: var(--bw-login-bg) !important;
    color: var(--accent-primary) !important;
}

/* Carte de login */
body.bw-mode .login-container {
    background: var(--bw-login-bg) !important;
    border-color: var(--bw-login-border) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.75) !important;
}

/* Titre / logo */
body.bw-mode .logo h1 {
    color: var(--accent-primary) !important;
}

/* Labels et textes secondaires */
body.bw-mode .form-group label,
body.bw-mode .divider,
body.bw-mode .register-link,
body.bw-mode .info-box {
    color: var(--text-secondary) !important;
}

/* Champs de formulaire */
body.bw-mode .form-group input,
body.bw-mode .login-container input,
body.bw-mode .login-form input {
    background: var(--bw-login-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-color) !important;
}
body.bw-mode .form-group input:focus,
body.bw-mode .login-container input:focus {
    border-color: var(--bw-subtle) !important;
    box-shadow: 0 0 0 3px rgba(115, 115, 115, 0.3) !important;
}

/* Bouton œil (afficher mot de passe) et onglets Email / Telegram ID */
body.bw-mode #toggleEmailPassword,
body.bw-mode .auth-tab {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
body.bw-mode #toggleEmailPassword:hover,
body.bw-mode .auth-tab:hover {
    background: transparent !important;
}
body.bw-mode .auth-tab.active {
    color: var(--text-color) !important;
    border-bottom-color: var(--bw-medium) !important;
}

/* Boutons principaux / secondaires */
body.bw-mode .btn-login {
    background: var(--bw-medium) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--bw-subtle) !important;
}
body.bw-mode .btn-login:hover {
    background: var(--bw-subtle) !important;
}
body.bw-mode .btn-secondary {
    background: transparent !important;
    color: var(--bw-dim) !important;
    border-color: var(--bw-medium) !important;
}

/* Boutons sociaux */
body.bw-mode .btn-social,
body.bw-mode .btn-google {
    background: var(--bw-login-bg) !important;
    border-color: var(--bw-login-border) !important;
    color: var(--accent-primary) !important;
}

/* Messages d'info / succès / erreur */
body.bw-mode .info-box {
    background: var(--bg-color) !important;
    border-left-color: var(--bw-medium) !important;
}
body.bw-mode .info-box a {
    color: var(--bw-dim) !important;
}
body.bw-mode .success-message {
    background: var(--bw-msg-success-bg) !important;
    border-left-color: var(--bw-msg-success-border) !important;
    color: var(--accent-primary) !important;
}
body.bw-mode .error-message {
    background: var(--bw-msg-error-bg) !important;
    border-left-color: var(--bw-msg-error-border) !important;
    color: var(--text-color) !important;
}

/* Bloc biométrie */
body.bw-mode .biometric-options {
    background: var(--bw-biometric-bg) !important;
    border-color: var(--bw-login-border) !important;
    color: var(--bw-dim) !important;
}
body.bw-mode .biometric-options .biometric-login-link {
    color: var(--accent-primary) !important;
}
body.bw-mode .biometric-options .biometric-icon-btn {
    background: var(--bw-biometric-bg) !important;
    border-color: var(--bw-biometric-border) !important;
    color: var(--accent-primary) !important;
}
body.bw-mode .biometric-options .biometric-icon-btn:hover {
    background: var(--bw-biometric-hover) !important;
}

/* Overlay cold start (login) */
body.bw-mode #cold-start-overlay {
    background: radial-gradient(circle at 50% 40%, var(--bw-login-bg) 0%, var(--bw-login-bg) 55%, var(--bw-login-bg) 100%) !important;
}

/* ============================================================================
   B&W : suppression des surbrillances et fonds contrastants (nettoyage global)
   ============================================================================ */

/* Bouton expand/collapse des cartes : pas de fond contrastant */
body.bw-mode .collapse-btn {
    background: transparent !important;
    box-shadow: none !important;
}
body.bw-mode .collapse-btn:hover {
    background: transparent !important;
    box-shadow: none !important;
}

/* Suppression des box-shadow sur cartes, modales, boutons, inputs */
body.bw-mode .card,
body.bw-mode .card-header,
body.bw-mode .card-content,
body.bw-mode .draggable-card,
body.bw-mode .opportunities,
body.bw-mode .opp-item,
body.bw-mode .modal,
body.bw-mode .modal-content,
body.bw-mode .btn,
body.bw-mode button,
body.bw-mode input,
body.bw-mode select,
body.bw-mode textarea,
body.bw-mode .portfolio-item {
    box-shadow: none !important;
}

/* Focus inputs : contour fin, pas de halo */
body.bw-mode input:focus,
body.bw-mode select:focus,
body.bw-mode textarea:focus,
body.bw-mode .settings-input:focus {
    box-shadow: 0 0 0 1px var(--border-color) !important;
}

/* ============================================================================
   BW — ticker.html : gradients violets (h1, score-header, chart-panel::before)
   ============================================================================ */
body.bw-mode h1 {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--text-color) !important;
    color: var(--text-color) !important;
}
body.bw-mode .score-header {
    background: var(--border-color) !important;
    color: var(--text-color) !important;
}
body.bw-mode .score-header h3,
body.bw-mode .score-header span,
body.bw-mode .score-header p {
    color: var(--text-color) !important;
    -webkit-text-fill-color: var(--text-color) !important;
}
body.bw-mode .global-score {
    color: var(--text-color) !important;
    -webkit-text-fill-color: var(--text-color) !important;
    text-shadow: none !important;
}
body.bw-mode .chart-panel:hover { transform: none !important; }

/* BW — indicators.html */
body.bw-mode .indicator-card {
    background: var(--border-color) !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
}
body.bw-mode .indicator-card h4,
body.bw-mode .indicator-card p {
    color: var(--text-color) !important;
    -webkit-text-fill-color: var(--text-color) !important;
}
body.bw-mode .nav-item {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--input-border) !important;
    box-shadow: none !important;
}
body.bw-mode .nav-item h3,
body.bw-mode .nav-item p { color: var(--text-color) !important; }
body.bw-mode .nav-item:hover { background: var(--border-color) !important; transform: none !important; }

/* index.html progress bar inline style (cold-start overlay) */
body.bw-mode #progress-bar { background: var(--bw-medium) !important; }

/* ============================================================================
   WBW + BW — Boutons de modales JS (inline styles colorés)
   Ces boutons ont background: rgba(...) ou #dc2626 etc. en inline → overridés
   ============================================================================ */

/* Boutons fermeture × (background: none inline — normalement exclus du sélecteur,
   filet de sécurité au cas où la détection [style*=...] rate une variante) */
body.bw-mode button[data-action="close-modal"],
body.bw-mode button[id^="close-"],
body.bw-mode button#close-alerts-list,
body.bw-mode button#close-alerts-triggered,
body.bw-mode button#app-update-banner-close {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-secondary) !important;
}

/* Boutons "Supprimer" alerte (delete-alert) — gris clair avec bordure en WBW */
body.bw-mode button[data-action="delete-alert"] {
    background: var(--border-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--input-border) !important;
}

/* Boutons confirm/cancel de modale de suppression */
body.bw-mode #alert-delete-confirm-btn {
    background: var(--input-border) !important;
    color: var(--text-color) !important;
    border: none !important;
}
body.bw-mode #alert-delete-cancel-btn,
body.bw-mode #btn-cancel-alert,
body.bw-mode #portfolio-modal-cancel-btn {
    background: var(--border-color) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--input-border) !important;
}

/* Tout button[style*=background: none] — filet de sécurité général */
body.bw-mode button[style*="background: none"],
body.bw-mode button[style*="background:none"] {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* ============================================================================
   DIALOGS NATIFS — backdrops thème B&W / WBW (V4.5.75)
   ============================================================================ */
body.bw-mode dialog#config-loading-dialog::backdrop,
html.bw-mode dialog#config-loading-dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
}
body.wbw-mode dialog#config-loading-dialog::backdrop,
html.wbw-mode dialog#config-loading-dialog::backdrop {
    background: rgba(255, 255, 255, 0.65);
}

/* ============================================================================
   SCORE INDICATORS — Accents couleur ciblés (V4.5.178)
   Remplacent les gris indistinguables par des couleurs fonctionnelles lisibles
   dans les deux thèmes mono, sans casser le style global noir/blanc.
   ============================================================================ */

/* BW mode (fond noir OLED) — couleurs vives adoucies */
body.bw-mode .score-good   { color: var(--accent-success) !important; } /* vert doux */
body.bw-mode .score-warning { color: var(--accent-warning) !important; } /* ambre */
body.bw-mode .score-danger  { color: var(--accent-danger) !important; } /* rouge doux */

/* WBW mode (fond blanc) — couleurs accessibles WCAG AA */
body.wbw-mode .score-good   { color: var(--wbw-score-good) !important; }    /* vert foncé */
body.wbw-mode .score-warning { color: var(--wbw-score-warning) !important; } /* ambre foncé */
body.wbw-mode .score-danger  { color: var(--wbw-score-danger) !important; }  /* rouge */

/* ============================================================================
   WBW + BW — Boutons de modales JS (inline styles colorés)
   Ces boutons ont background: rgba(...) ou #dc2626 etc. en inline → overridés
   ============================================================================ */