/* === main.css === */
:root {
    --bg-color: #f8fafc;
    --bg-secondary: #f1f5f9;
    --text-color: #1e293b;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --card-bg: #ffffff;
    --card-bg-solid: #ffffff;
    --header-bg: #ffffff;
    --border-color: #e2e8f0;
    --chart-grid-color: rgba(203,213,225,0.4);
    --secondary-text: #64748b;
    --hover-bg: #f1f5f9;
    --shadow-color: rgba(0,0,0,0.1);
    --input-bg: #ffffff;
    --input-border: #e2e8f0;
    --accent-primary: #3b82f6;
    --accent-secondary: #3b82f6;
    --accent-success: #10b981;
    --accent-danger: #ef4444;
    --accent-warning: #f59e0b;
    --accent-teal: #14b8a6;
    --accent-indigo: #6366f1;
    --success-bg: #dcfce7;
    --success-text: #166534;
    --warning-bg: #fef9c3;
    --warning-text: #a16207;
    --badge-bg: #f1f5f9;
    --badge-text: #94a3b8;
    --msg-error-bg: #fef2f2;
    --msg-error-text: #dc2626;
    --msg-success-bg: #f0fdf4;
    --msg-success-text: #166534;
    --msg-info-bg: #eff6ff;
    --msg-info-text: #1e40af;
    --msg-warning-bg: #fffbeb;
    --msg-warning-text: #92400e;
    --opp-score-bg: #dbeafe;
    --opp-score-text: #1e40af;
    --brief-bg: #f8fafc;
    /* Variables guide indicateurs */
    --guide-heading: #3b82f6;
    --guide-section: #3b82f6;
    --guide-table-row: #f1f5f9;
    --guide-penalty: #dc2626;
    --overlay-bg: rgba(0, 0, 0, 0.5);
    /* Hauteur harmonisée pour la première rangée de 4 cards en mode réduit */
    --dashboard-main-row-height: 260px;
    --card-border-radius: 12px;
    /* V4.8.20 — vars magic numbers main.css */
    --main-gradient-from: #3b82f6;        /* début dégradé theme-toggle (bleu) */
    --main-gradient-to: #1e40af;          /* fin dégradé theme-toggle (bleu foncé) */
    --main-btn-secondary: #64748b;        /* fond bouton secondaire */
    --main-btn-secondary-hover: #475569;  /* fond bouton secondaire au survol */
    --main-score-high-text: #065f46;      /* texte badge score "high" (vert foncé) */
}

/* Variables dark-mode/bw-mode definies dans dark-mode.css et bw-theme.css (source unique) */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    line-height: 1.5;
    padding: 16px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.25s ease;
}

/* Réduire la taille des émojis Twemoji pour qu'ils correspondent au texte */
img.emoji {
    height: 1em;
    width: 1em;
    margin: 0 0.05em 0 0.1em;
    vertical-align: -0.1em;
    display: inline-block;
}

/* Empêcher Twemoji sur les icônes de collapse */
.no-emoji {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
}

.no-emoji img.emoji {
    display: none !important;
}

.container { max-width: 1200px; margin: 0 auto; overflow-x: hidden; }

.header {
    background: var(--header-bg);
    border-radius: var(--card-border-radius);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px var(--shadow-color);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.header h1 { font-size: 24px; font-weight: 700; }
.version-badge {
    font-size: 11px;
    color: var(--badge-text);
    font-weight: 400;
    padding: 4px 8px;
    background: var(--badge-bg);
    border-radius: 6px;
    font-family: 'Courier New', monospace;
}
.env-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-family: 'Courier New', monospace;
    line-height: 1;
}
.env-badge.env-prod {
    background: var(--success-bg);
    color: var(--success-text);
    border-color: color-mix(in srgb, var(--accent-success) 40%, transparent);
}
.env-badge.env-rec {
    background: color-mix(in srgb, var(--accent-warning) 12%, transparent);
    color: color-mix(in srgb, var(--accent-warning) 80%, #000);
    border-color: color-mix(in srgb, var(--accent-warning) 40%, transparent);
}

/* Badge non-lus boîte contact (admin) */
.contact-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    background: var(--accent-danger, #ef4444);
    color: #fff;
    cursor: default;
}

/* Messages de la boîte contact dans le panel admin */
.contact-inbox-msg {
    background: var(--card-bg, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
}
.contact-inbox-msg-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}
.contact-inbox-msg-from {
    font-weight: 600;
    color: var(--text-color, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.contact-inbox-msg-date {
    font-size: 11px;
    color: var(--text-secondary, #94a3b8);
    white-space: nowrap;
    flex-shrink: 0;
}
.contact-inbox-msg-subject {
    color: var(--text-secondary, #475569);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.status-badge { 
    padding: 6px 14px; 
    border-radius: 20px;
    font-size: 13px; 
    font-weight: 500;
    background: var(--success-bg);
    color: var(--success-text);
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
    align-items: start; /* Éviter les vides blancs en alignant en haut */
}

/* ============================================
   DASHBOARD GRID - Cartes alignées
   ============================================ */
#dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* minmax(0,1fr) pour que les colonnes puissent rétrécir */
    gap: 16px;
    align-items: start; /* Aligner en haut pour que les cards augmentées ne forcent pas les autres à grandir */
    --dashboard-card-min-height: 230px;
    /* Hauteur minimale des cards augmentées, ajustée pour éviter qu'elles ne s'étendent trop */
    --dashboard-card-expanded-min-height: 340px;
    min-width: 0;
}

#dashboard-grid > .card {
    display: flex;
    flex-direction: column;
    min-height: var(--dashboard-card-min-height); /* Align reduced cards with static cards */
    align-self: start; /* Eviter l'etirement des cartes quand une autre est agrandie */
    justify-content: flex-start; /* On aligne le contenu en haut et on pousse uniquement la zone d'action */
    min-width: 0; /* Permettre le rétrécissement en grille, éviter overflow horizontal */
}

/* Hauteur fixe harmonisée pour les 4 premières cards en mode réduit,
   pour assurer un alignement parfait des zones d'action */
#card-search,
#card-model:not(.card-expanded),
#card-scanner:not(.card-expanded),
#card-telegram {
    height: var(--dashboard-main-row-height);
}

/* Pousser explicitement les zones d'action vers le bas pour les 4 premières cards */
#card-search .btn.success,
#model-card-reduced,
#scanner-card-reduced,
#card-telegram .btn {
    margin-top: auto;
}

/* Assurer un alignement cohérent des contenus réduits dans les cartes extensibles */

/* Les cartes avec collapse (Modèle IA, Scanner) - état réduit */
#card-model .card-content,
#card-scanner .card-content {
    flex: 1;
}

/* Contenu réduit - visible quand card-content est masqué */
.card-reduced-content {
    margin-top: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Le contenu réduit se place vers le bas de la carte */
}

/* Ajustement fin pour la card Modèle IA :
   on pousse spécifiquement le rectangle "Modèle actuel" en bas,
   indépendamment du label au-dessus, pour qu'il s'aligne
   parfaitement avec les autres boutons des cards voisines. */
#model-card-reduced {
    justify-content: flex-start;
}

#model-card-reduced > div {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#model-display {
    margin-top: auto;
}

/* Masquer le contenu réduit quand la card est augmentée */
.card-expanded .card-reduced-content {
    display: none !important;
}

/* Les cards en mode augmenté ont la même taille */
#card-model.card-expanded,
#card-scanner.card-expanded {
    /* Hauteur basée uniquement sur le contenu pour éviter le grand blanc en bas */
    min-height: var(--dashboard-card-min-height);
    max-height: none;
    height: auto;
    overflow-y: visible;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Header en haut, contenu en dessous */
}

/* Mise en page plus aérée pour le contenu du Scanner (mode augmenté) */
#card-scanner.card-expanded #scanner-card {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Espacement entre le select et le bloc d'actions */
    width: 100%;
    justify-content: space-between; /* Répartir le contenu pour éviter un grand vide en bas */
    flex: 1;
}

/* Même logique de distribution verticale pour la card Modèle IA en mode augmenté */
#card-model.card-expanded #model-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    justify-content: space-between;
    flex: 1;
}

/* Bloc actions du scanner collé vers le bas de la card pour réduire le blanc inutile */
#scanner-actions {
    margin-top: 16px; /* Laisser un petit espace sous le select/preset */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Boutons du scanner sur toute la largeur avec plus d'espace vertical */
#scanner-actions .btn {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
}

/* Les autres cards gardent leur taille minimale même si une card est augmentée */
#dashboard-grid > .card:not(.card-expanded) {
    /* Même hauteur minimale pour toutes les cards en mode réduit */
    min-height: var(--dashboard-card-min-height);
    height: auto; /* Permettre la croissance naturelle du contenu */
}

/* Responsive: 2 colonnes sur tablette */
@media (max-width: 1100px) {
    #dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Responsive: 1 colonne sur mobile */
@media (max-width: 600px) {
    #dashboard-grid {
        grid-template-columns: 1fr;
    }
    #dashboard-grid > .card {
        min-height: auto;
    }
}

/* Mobile : réduction des espaces vides en bas de page */
@media (max-width: 640px) {
    body {
        padding: 12px 12px 6px;
    }
    #main-cards-container {
        gap: 12px !important;
        margin-bottom: 8px !important;
    }
    /* Padding bas réduit pour les cartes non-développées (contenu caché = espace inutile) */
    #main-cards-container .card:not(.card-expanded) {
        padding-bottom: 10px;
    }
    /* Supprimer la marge basse du header quand le contenu est replié */
    #main-cards-container .card:not(.card-expanded) .card-header {
        margin-bottom: 0;
    }
}

.card {
    background: var(--card-bg);
    border-radius: var(--card-border-radius);
    padding: 20px;
    box-shadow: 0 1px 3px var(--shadow-color);
    border-top: 3px solid;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.card.blue { border-top-color: var(--accent-primary); }
.card.green { border-top-color: var(--accent-success); }
.card.purple { border-top-color: var(--accent-secondary); }
.card.orange { border-top-color: var(--accent-warning); }
.card.red { border-top-color: var(--accent-danger); }
.card.teal { border-top-color: var(--accent-teal); }
.card.indigo { border-top-color: var(--accent-indigo); }

/* Display limit select styling */
.display-limit-select {
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--card-bg, white);
    color: var(--text-color, inherit);
    font-size: 13px;
    cursor: pointer;
}

/* Modal styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--card-bg, white);
    color: var(--text-color, #1e293b);
    border-radius: var(--card-border-radius);
    padding: 24px;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.modal-overlay-app {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.modal-content-sm {
    border-radius: 12px;
    max-width: 400px;
}
.modal-content-md {
    border-radius: 12px;
    max-width: 420px;
    border: 1px solid var(--border-color, #e2e8f0);
}
.modal-content-scroll {
    max-height: 90dvh;
    overflow-y: auto;
}
.modal-title-confirm {
    margin: 0 0 16px 0;
    font-size: 18px;
    color: var(--text-color, #1e293b);
}
.modal-copy {
    margin: 0 0 24px 0;
    color: var(--text-secondary, #64748b);
    line-height: 1.5;
}
.modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}
.modal-action-btn {
    padding: 8px 16px;
    font-size: 14px;
}
.danger-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.danger-confirm-card {
    width: 100%;
    max-width: 420px;
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    background: var(--surface-elevated, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
}
.danger-confirm-body {
    padding: 22px 22px 16px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.danger-confirm-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: color-mix(in srgb, var(--danger, #ef4444) 12%, transparent);
}
.danger-confirm-content {
    min-width: 0;
}
.danger-confirm-title {
    margin: 0 0 8px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-color, #1e293b);
    line-height: 1.3;
}
.danger-confirm-description {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--secondary-text, #64748b);
}
.danger-confirm-warning {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--danger, #dc2626);
    background: color-mix(in srgb, var(--danger, #ef4444) 8%, transparent);
    border-left: 3px solid var(--danger, #ef4444);
}
.danger-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding: 12px 22px 20px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    background: color-mix(in srgb, var(--text-color, #1e293b) 2%, transparent);
}
.danger-confirm-cancel {
    min-width: 108px;
}
.danger-confirm-ok {
    min-width: 132px;
    background: var(--danger, #dc2626);
    color: #fff;
    border: none;
}
/* CXII-1 : sur tres petits ecrans (iPhone SE, libelles longs ES/DE), empiler les CTA pour eviter overflow */
@media (max-width: 360px) {
    .danger-confirm-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .danger-confirm-cancel,
    .danger-confirm-ok {
        min-width: 0;
        width: 100%;
    }
}
.modal-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}
.modal-header-row-center {
    align-items: center;
    margin-bottom: 16px;
}
.modal-close-btn {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary, #64748b);
    padding: 0 0 0 8px;
    flex-shrink: 0;
}
.modal-close-btn-plain {
    padding: 0;
}
.modal-field {
    margin-bottom: 16px;
}
.modal-field-spacious {
    margin-bottom: 24px;
}
.modal-field-label-secondary {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-secondary, #475569);
}
.modal-input,
.modal-select {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--input-bg, #fff);
    color: var(--text-color, #1e293b);
    font-size: 14px;
    box-sizing: border-box;
}
.modal-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-secondary, #64748b);
}
.modal-secondary-outline-btn,
.modal-primary-solid-btn {
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}
.modal-secondary-outline-btn {
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-secondary, #fff);
    color: var(--text-color, #1e293b);
}
.modal-primary-solid-btn {
    background: var(--accent-primary, #3b82f6);
    color: #fff;
    border: none;
    font-weight: 500;
}
.modal-form-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.modal-title-row {
    margin: 0 0 4px 0;
    font-size: 18px;
    color: var(--text-color, #1e293b);
    display: flex;
    align-items: center;
    gap: 8px;
}
.modal-small-subtitle {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary, #64748b);
}
.modal-label-strong {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--text-color, #1e293b);
}
.modal-label-optional {
    font-weight: 400;
    color: var(--text-secondary, #64748b);
}
.modal-current-price-line {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-secondary, #64748b);
}
.modal-actions-equal {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}
.modal-actions-equal > button {
    flex: 1 1 140px;
    padding: 11px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.modal-title {
    margin: 0 0 8px 0;
    font-size: 20px;
    color: var(--text-color, #1e293b);
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-subtitle {
    margin: 0;
    color: var(--text-secondary, #64748b);
    font-size: 14px;
}

.modal-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color, #1e293b);
}

.modal-button-primary {
    flex: 1;
    padding: 12px;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    /* CXII-1 : centrage label avec icone eventuelle */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
}

.modal-button-primary:hover {
    background: var(--accent-primary);
    filter: brightness(0.85);
}

.modal-button-secondary {
    flex: 1;
    padding: 12px;
    background: var(--hover-bg, #f1f5f9);
    color: var(--text-color, #475569);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    /* CXII-1 : centrage label avec icone eventuelle */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
}

/* Theme toggle button styling - Position fixe en bas à droite sur PC */
#theme-toggle,
#theme-toggle-mobile {
    background: linear-gradient(135deg, var(--main-gradient-from) 0%, var(--main-gradient-to) 100%);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Bouton fixe pour PC */
#theme-toggle {
    width: 44px;
    height: 44px;
    font-size: 20px;
    position: fixed;
    bottom: max(24px, calc(16px + env(safe-area-inset-bottom, 0px)));
    right: max(24px, calc(12px + env(safe-area-inset-right, 0px)));
    z-index: 9999;
}

#theme-toggle:hover {
    transform: rotate(20deg) scale(1.1);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

/* Bouton dans le header pour mobile */
#theme-toggle-mobile {
    width: 32px;
    height: 32px;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
    flex-shrink: 0;
}

#theme-toggle-mobile:hover {
    transform: none;
}

/* Sur PC, masquer le bouton mobile dans le header */
@media (min-width: 769px) {
    #theme-toggle-mobile {
        display: none;
    }
}

/* Sur mobile, masquer le bouton fixe */
@media (max-width: 768px) {
    #theme-toggle {
        display: none;
    }
}

/* Smooth background transition for body (transition consolidée — V4.7.10) */

.draggable-card {
    cursor: default;
    transition: opacity 0.2s, transform 0.2s;
}

/* Seul le header est draggable */
.draggable-card .card-header,
.draggable-card h3 {
    cursor: move;
    -webkit-user-select: none;
    user-select: none;
}

/* Le contenu des cartes reste sélectionnable */
.draggable-card .card-content {
    cursor: default;
    user-select: text;
    -webkit-user-select: text;
}

/* Permettre la sélection du texte dans le brief même dans les cartes draggables */
.draggable-card .brief-display,
.draggable-card .brief-display *,
#brief-display,
#brief-display *,
.card-content .brief-display,
.card-content .brief-display *,
#brief-card .brief-display,
#brief-card .brief-display *,
.brief-display div,
.brief-display p,
.brief-display span {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    cursor: text !important;
    pointer-events: auto !important;
}

/* Les boutons de la card brief doivent garder un curseur de bouton (pas curseur texte) */
#card-brief .card-content button,
#card-brief .card-content .btn {
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* ✅ V3.8.22: Exclure les liens de la règle cursor: text pour qu'ils aient cursor: pointer */
.draggable-card .brief-display a,
.draggable-card .brief-display a[href],
#brief-display a,
#brief-display a[href],
.card-content .brief-display a,
.card-content .brief-display a[href],
#brief-card .brief-display a,
#brief-card .brief-display a[href] {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* S'assurer que la carte brief n'empêche pas la sélection */
#card-brief .card-content,
#card-brief #brief-card {
    user-select: text !important;
    -webkit-user-select: text !important;
}

/* Sur mobile, le cursor move n'est pas nécessaire */
@media (hover: none) and (pointer: coarse) {
    .draggable-card {
        cursor: default;
    }
}

.draggable-card:hover {
    opacity: 0.9;
}

.draggable-card.sortable-ghost {
    opacity: 0.4;
}

.draggable-card.sortable-drag {
    opacity: 0.8;
    transform: rotate(2deg);
}

.card h3 {
    font-size: 16px; 
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card p { font-size: 14px; color: var(--secondary-text); margin-bottom: 16px; }

.input-group { margin-bottom: 12px; }
.input-group label { 
    display: block; 
    font-size: 13px; 
    font-weight: 500; 
    margin-bottom: 6px;
    color: var(--secondary-text);
}

.input-group input,
.input-group select,
.input-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-color);
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
}

/* Badge de description du preset sélectionné */
.preset-description-badge {
    margin: 5px 0 0 0;
    padding: 0;
    font-size: 12px;
    color: var(--text-secondary, #64748b);
    line-height: 1.4;
    min-height: 0;
    display: none; /* affiché par JS dès qu'une description est disponible */
}
.preset-description-badge:not(:empty) {
    display: block;
}

.input-group textarea {
    min-height: 80px;
    resize: vertical;
    font-family: monospace;
    font-size: 12px;
}

.btn {
    background: var(--accent-primary);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer !important;
    transition: background 0.2s;
    margin-right: 8px;
    margin-bottom: 8px;
    white-space: nowrap;
    /* CXII-1 : label toujours centre (notamment quand flex:1 etire le bouton) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
}

.btn-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 8px;
}

.btn-row .btn {
    margin-right: 0;
    margin-bottom: 0;
}

.btn:hover { background: var(--accent-primary); filter: brightness(0.85); }
.btn.success { background: var(--accent-success); }
.btn.success:hover { background: var(--accent-success); filter: brightness(0.85); }
.btn.secondary { background: var(--main-btn-secondary); }
.btn.secondary:hover { background: var(--main-btn-secondary-hover); }
.btn.warning { background: var(--accent-warning); }
.btn.warning:hover { background: var(--accent-warning); filter: brightness(0.85); }

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================================
   MOBILE POLISH — labels/overflow/touch targets
   Objectif: éviter les débordements (boutons/labels longs) sans casser
   les toolbars compactes (ex: ticker.css possède sa propre règle .btn).
   ============================================================================ */

/* Cibles tactiles (WCAG 2.5.5) sur mobile */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .btn-back,
    .legal-footer-link,
    .u-link-button {
        min-height: 44px;
    }
}

/* Très petits écrans: autoriser le retour à la ligne sur les CTA */
@media (max-width: 420px) {
    .btn {
        white-space: normal;
        text-align: center;
        line-height: 1.25;
        padding: 10px 14px;
        hyphens: auto;
        overflow-wrap: anywhere;
    }
    .u-link-button {
        white-space: normal;
    }

    /* Exceptions: conserver le format compact là où c'est un contrôle "outil" */
    .scan-progress-actions .btn,
    .opp-action-btn,
    .btn-filters-toggle {
        white-space: nowrap;
        hyphens: none;
        overflow-wrap: normal;
    }

    /* Lists (brief + legal): réduire l'indentation et stabiliser l'alignement des puces */
    .brief-md-list { padding-left: 16px; }
    .legal-list { margin-left: 16px; line-height: 1.65; }
}

.message {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    display: none;
}

.message.error { background: var(--msg-error-bg); color: var(--msg-error-text); }
.message.success { background: var(--msg-success-bg); color: var(--msg-success-text); }
.message.info { background: var(--msg-info-bg); color: var(--msg-info-text); }

/* Spinner de chargement */
.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 3px solid color-mix(in srgb, var(--accent-primary) 30%, transparent);
    border-radius: 50%;
    border-top-color: var(--accent-primary);
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spin-anim {
    animation: spin 2s linear infinite;
}

/* Loader brief IA (UI) */
.brief-loader {
    display: grid;
    place-items: center;
    text-align: center;
    padding: 28px 16px;
}
.brief-loader-ring {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    border: 4px solid color-mix(in srgb, var(--accent-primary) 22%, transparent);
    border-top-color: var(--accent-primary);
    animation: spin 0.85s linear infinite;
}
.brief-loader-title {
    margin-top: 14px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.01em;
    color: var(--text-color);
}
.brief-loader-sub {
    margin-top: 6px;
    font-size: 12px;
    color: var(--secondary-text);
}

.message.loading {
    background: var(--msg-info-bg);
    color: var(--msg-info-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.brief-display {
    background: var(--brief-bg);
    color: var(--text-color);
    padding: 16px;
    border-radius: 8px;
    white-space: pre-line;
    font-size: 15px;
    line-height: 1.7;
    max-height: none; /* Adaptatif au contenu */
    overflow-y: visible; /* Pas de scroll, afficher tout le contenu */
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    cursor: text;
}

/* Curseur pointeur pour les liens dans le brief */
.brief-display a {
    cursor: pointer !important;
}

/* S'assurer que les liens dans les sources ont aussi le curseur pointeur */
.brief-display a[href] {
    cursor: pointer !important;
}
.brief-link {
    color: var(--accent-primary, #2563eb);
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
}
.brief-source-link {
    color: var(--accent-primary, #2563eb);
    text-decoration: none;
}
.brief-sources {
    margin: 12px 0 0 0;
    padding: 0;
    font-size: 13px;
    color: var(--text-secondary, #475569);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.brief-md-section {
    margin: 18px 0 5px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-secondary, #64748b);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    padding-bottom: 4px;
}
.brief-md-hr {
    border: none;
    border-top: 1px solid var(--border-color, #e2e8f0);
    margin: 12px 0;
}
.brief-md-list {
    margin: 6px 0;
    padding-left: 18px;
}
.brief-md-list-item {
    margin: 3px 0;
    line-height: 1.55;
}
.brief-md-spacer {
    height: 6px;
}
.brief-md-paragraph {
    margin: 0 0 5px;
    line-height: 1.6;
}
.brief-empty,
.brief-loading {
    color: var(--text-secondary, #64748b);
}
.brief-error-text {
    color: var(--accent-danger, #dc2626);
}
.brief-date-heading {
    font-weight: 600;
    color: var(--text-color, #0f172a);
    margin: 0 0 8px 0;
}
.brief-display {
    border-left: 4px solid #28a745;
}
.brief-content-body {
    font-family: system-ui;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: var(--text-color, #0f172a);
    user-select: text;
    -webkit-user-select: text;
}
.brief-model-badge {
    font-size: 11px;
    color: var(--text-secondary, #64748b);
    margin-top: 6px;
    text-align: right;
}
.brief-fallback-note {
    font-size: 12px;
    color: var(--text-secondary, #64748b);
    background: var(--msg-info-bg, rgba(33, 150, 243, 0.08));
    border-left: 3px solid var(--accent-primary, #2196f3);
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 12px;
}
.brief-callout {
    padding: 16px;
    border-radius: 8px;
}
.brief-callout-info {
    background: var(--msg-info-bg, #e3f2fd);
    border-left: 4px solid var(--accent-primary, #2196f3);
}
.brief-callout-warning {
    background: var(--msg-error-bg, #fff3cd);
    border-left: 4px solid var(--accent-warning, #ffc107);
}
.brief-callout-title {
    margin: 0 0 8px 0;
    color: var(--text-color, #1565c0);
}
.brief-callout-body {
    margin: 0 0 12px 0;
    color: var(--text-color, #1565c0);
}
.brief-callout-btn {
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}
.icon-spin {
    animation: icon-spin 0.9s linear infinite;
}
@keyframes icon-spin {
    to { transform: rotate(360deg); }
}
.ticker-status-loading {
    padding: 28px 20px;
}
.ticker-skeleton-line {
    height: 8px;
    border-radius: 4px;
    margin-bottom: 10px;
    background: linear-gradient(90deg, var(--hover-bg, #e2e8f0) 25%, var(--card-bg, #f8fafc) 50%, var(--hover-bg, #e2e8f0) 75%);
    background-size: 200% 100%;
    animation: ticker-status-shimmer 1.5s ease-in-out infinite;
}
.ticker-skeleton-line-narrow {
    width: 65%;
    margin-bottom: 0;
    animation-delay: 0.25s;
}
.ticker-status-message {
    text-align: center;
    color: var(--text-secondary, #666);
    font-size: 13px;
    margin-top: 14px;
}
.ticker-status-feedback {
    text-align: center;
    padding: 20px;
}
.ticker-status-feedback-error {
    color: var(--accent-danger, #ef4444);
}
.ticker-status-feedback-info {
    color: var(--accent-primary, #2196f3);
}
.ticker-status-icon-wrap {
    display: inline-flex;
    vertical-align: -2px;
    margin-right: 6px;
}
@keyframes ticker-status-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 8px;
}

/* Classe commune pour tous les filtres dans l'en-tête des opportunités */
.filter-opp-select {
    font-size: 12px;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid var(--border-color, #cbd5e1);
    background: var(--card-bg, #fff);
    color: var(--text-color, #1e293b);
    cursor: pointer;
    min-width: 0;
    /* Hauteur cohérente avec les autres contrôles */
    height: 30px;
    line-height: 1.2;
}
.filter-opp-select:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}

/* V4.7.24 — Signal multi-select dropdown */
.signal-multiselect {
    position: relative;
    display: inline-block;
}
.signal-multiselect summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.signal-multiselect summary::-webkit-details-marker { display: none; }
.signal-filter-count {
    background: var(--accent-primary);
    color: #fff;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    padding: 0 5px;
    line-height: 16px;
}
.signal-multiselect-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 200;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px var(--shadow-color);
    padding: 6px 4px;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.signal-check-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 12px;
    color: var(--text-color);
    cursor: pointer;
    white-space: nowrap;
}
.signal-check-option:hover {
    background: var(--hover-bg);
}
.signal-check-option input[type="checkbox"] {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

/* Wrapper des filtres opportunités — scroll horizontal sur très petits écrans */
.opp-filters-row {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Card opportunités : ordre visuel par défaut (desktop) — triangle à la fin */
#card-opportunities .card-header h3      { order: 1; }
#card-opportunities .btn-filters-toggle  { order: 2; }
#card-opportunities .opp-filters-row     { order: 3; }
#card-opportunities .collapse-btn        { order: 4; }

/* Mobile : le header passe en wrap — row 1 : titre + triangle, row 2+ : filtres */
@media (max-width: 520px) {
    #card-opportunities .card-header {
        flex-wrap: wrap;
        gap: 6px;
    }
    /* Row 1 : titre (flexible) + triangle (fixe à droite) */
    #card-opportunities .card-header h3 {
        flex: 1 1 auto;
        font-size: 16px;
        min-width: 0;
        order: 1;
    }
    #card-opportunities .collapse-btn {
        flex: 0 0 auto;
        order: 2;
        padding: 4px 12px;
        font-size: 14px;
    }
    /* Row 2 : bouton filtres sur toute la largeur */
    #card-opportunities .btn-filters-toggle {
        flex: 1 0 100%;
        order: 3;
    }
    /* Row 3 : filtres sur toute la largeur */
    #card-opportunities .opp-filters-row {
        width: 100%;
        order: 4;
        gap: 4px;
    }
    .filter-opp-select {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
        max-width: calc(50% - 4px);
        font-size: 11px;
        padding: 3px 4px;
        height: 28px;
    }
    #display-limit {
        flex: 0 0 52px;
        font-size: 11px;
        height: 28px;
    }
}

/* Sur téléphones très étroits, empiler les filtres en 2 lignes */
@media (max-width: 380px) {
    .filter-opp-select {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Le select garde son apparence native pour rester cohérent */

.collapse-btn {
    background: rgba(128, 128, 128, 0.1);
    color: var(--text-color);
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.collapse-btn:hover {
    background: rgba(128, 128, 128, 0.2);
    transform: scale(1.05);
}


.card-content {
    transition: all 0.3s ease;
    overflow: hidden;
}

.card-content.collapsed {
    max-height: 0 !important;
    opacity: 0;
    margin: 0;
    padding: 0;
}

.opportunities {
    background: var(--card-bg);
    border-radius: var(--card-border-radius);
    padding: 20px;
    box-shadow: 0 1px 3px var(--shadow-color);
    min-width: 0; /* Éviter débordement si dans un flex/grid */
    overflow-x: hidden;
    /* margin-bottom géré par le gap du conteneur main-cards-container */
}

.opp-item {
    padding: 16px 14px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    transition: background-color 0.2s ease;
    min-width: 0; /* Permettre rétrécissement en flex */
}

/* Colonne gauche (texte) peut rétrécir pour éviter overflow horizontal */
.opp-item > div:first-of-type {
    min-width: 0;
    overflow: hidden;
}
.opp-left-flex {
    flex: 1;
}
.opp-clickable {
    cursor: pointer;
}
.opp-title-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}
.opp-meta-row {
    margin-bottom: 4px;
}
.opp-company-name {
    color: var(--text-color, #475569);
    font-weight: 500;
}
.opp-sector {
    color: var(--text-secondary, #94a3b8);
}
.opp-info-line {
    font-size: 12px;
    color: var(--text-secondary, #64748b);
    line-height: 1.4;
}
/* Drapeau pays : SVG self-hosted (Twemoji) — Windows desktop n'a pas les
 * glyphes drapeaux dans Segoe UI Emoji, donc on évite le rendu RIS natif. */
.opp-info-line .opp-country-flag {
    display: inline-block;
    width: 18px;
    height: 13px;
    margin-right: 4px;
    vertical-align: -0.15em;
    object-fit: contain;
}
/* Fallback emoji (🌍 / 🌏) pour pays non mappés — rendu OK partout. */
.opp-info-line .opp-country-flag-emoji {
    display: inline-block;
    margin-right: 4px;
    font-style: normal;
    line-height: 1;
    vertical-align: -0.15em;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.opp-side {
    text-align: right;
    margin-left: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.opp-action-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.opp-action-link {
    color: var(--accent-primary, #3b82f6);
    text-decoration: none;
    font-size: 18px;
}
.opp-muted-hint {
    color: var(--text-secondary, #94a3b8);
}

.opp-item:hover {
    background-color: var(--hover-bg);
}

.opp-item:last-child { border-bottom: none; }
.opp-ticker { font-weight: 600; font-size: 15px; }

/* Colonne gauche cliquable — zone de navigation vers la page ticker */
.opp-left-link {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 44px; /* cible tactile mobile */
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Bouton "Télécharger l’analyse" dans le modal Analyse IA (thème jour) */
.analysis-ia-modal #downloadAnalysisBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-primary);
    color: #ffffff;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
}

/* Colonne droite de la carte opportunité (score + actions) */
.opp-right {
    margin-left: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

/* Rangée de boutons d'action (étoile, portfolio, analyse) */
.opp-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Bouton d'action individuel dans la carte opportunité */
.opp-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 18px;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.opp-action-btn:hover {
    background: transparent;
    transform: scale(1.15);
}

.opp-action-btn:active {
    transform: scale(0.95);
}

.opp-score {
    background: var(--opp-score-bg);
    color: var(--opp-score-text);
    padding: 4px 12px;
    border-radius: var(--card-border-radius);
    font-size: 13px;
    font-weight: 500;
}

/* V4.7.19 — Score badge color-gradient (data-score-range) */
.opp-score[data-score-range="low"] {
    background: var(--badge-bg);
    color: var(--badge-text);
}
.opp-score[data-score-range="mid"] {
    background: var(--opp-score-bg);
    color: var(--opp-score-text);
}
.opp-score[data-score-range="high"] {
    background: rgba(16, 185, 129, 0.12);
    color: var(--main-score-high-text);
}
.opp-score[data-score-range="excellent"] {
    background: rgba(245, 158, 11, 0.15);
    color: var(--msg-warning-text);
    font-weight: 700;
}

/* V4.5.9 — Score ajusté intra-secteur (biais tech/utilities corrigé) */
.score-adj {
    background: var(--opp-score-bg);
    color: var(--accent-primary);
    padding: 4px 12px;
    border-radius: var(--card-border-radius);
    font-size: 13px;
    font-weight: 500;
    cursor: help;
}

/* V4.8.210 — Badges duaux M/P (score_momentum / score_phoenix) */
.score-mode-badges {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    justify-content: flex-end;
}
.score-mode-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.02em;
    opacity: 0.45;
    cursor: default;
}
.score-mode-badge.score-mode-active { opacity: 1; }
.score-mode-m {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.22);
}
.score-mode-p {
    background: rgba(168, 85, 247, 0.12);
    color: #9333ea;
    border: 1px solid rgba(168, 85, 247, 0.22);
}
.score-mode-badge.score-mode-active.score-mode-m { background: rgba(59, 130, 246, 0.18); }
.score-mode-badge.score-mode-active.score-mode-p { background: rgba(168, 85, 247, 0.18); }

/* V4.8.210 — Preset mode pill dans la description badge */
.preset-mode-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    margin-right: 4px;
    vertical-align: middle;
    letter-spacing: 0.03em;
}
.preset-mode-m { background: rgba(59, 130, 246, 0.15); color: #2563eb; }
.preset-mode-p { background: rgba(168, 85, 247, 0.15); color: #9333ea; }

/* V4.5.7 — Ligne prix / SL / TP sur les cartes opportunités */
.opp-price-line {
    font-size: 11px;
    color: var(--secondary-text);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* V4.5.6 — Rang percentile sur les cartes opportunités */
.rank-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 5px;
    vertical-align: middle;
    background: var(--success-bg);
    color: var(--success-text);
}
.rank-badge.rank-top5 {
    background: var(--warning-bg);
    color: var(--warning-text);
}

/* Sur mobile app : réduire la taille des boutons d'action pour éviter les débordements */
@media (max-width: 400px) {
    .opp-actions {
        gap: 3px;
    }
    .opp-action-btn {
        width: 24px;
        height: 24px;
        font-size: 16px;
    }
    .watchlist-star, .portfolio-btn {
        font-size: 17px;
    }
    .opp-score {
        font-size: 11px;
        padding: 3px 8px;
    }
    .opp-item {
        gap: 8px;
        padding: 12px 10px;
    }
}

/* Autocomplete dropdown — styles globaux (complète les styles inline de ticker.ts) */
#search-suggestions {
    z-index: 1000;
}
.search-suggestion-item {
    transition: background-color 0.12s ease;
    border-bottom: 1px solid var(--border-color, #f1f5f9);
}
.search-suggestion-item:last-child {
    border-bottom: none;
}
.search-suggestion-item:hover,
.search-suggestion-item.active {
    background: var(--hover-bg, rgba(59, 130, 246, 0.07));
}

/* (V4.4.2 : .hidden-ticker-chip supprimé) */

/* ===== V4.4.2 : Bouton Retour harmonisé ===== */
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-color, #1e293b);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    transition: background 0.15s;
    white-space: nowrap;
}
.btn-back:hover { background: var(--input-bg, #f8fafc); }

/* ===== Bouton alerte [data-action="open-alert"] — harmonisé cloche ===== */
/* Emoji historique ; depuis C-6 (V4.8.352) glyphe SVG dans ``.alert-btn-glyph``. */
[data-action="open-alert"] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    font-size: 18px;
    transition: transform 0.15s ease;
}
[data-action="open-alert"]:hover { transform: scale(1.2); background: transparent !important; }
[data-action="open-alert"]:active { transform: scale(0.9); }

/* Mode clair — cloche inactive (grise, contour sombre) */
body:not(.dark-mode) [data-action="open-alert"]:not(.has-alert),
body:not(.dark-mode) [data-action="open-alert"]:not(.has-alert) span {
    filter: grayscale(100%) brightness(0.8) contrast(1.3);
    -webkit-text-stroke: 1.5px #1e293b;
    color: #94a3b8;
}
/* Mode clair — cloche active (noire pleine) */
body:not(.dark-mode) [data-action="open-alert"].has-alert,
body:not(.dark-mode) [data-action="open-alert"].has-alert span {
    filter: grayscale(100%) brightness(0) contrast(1.5);
    -webkit-text-stroke: 0;
}
/* Dark mode — cloche inactive */
body.dark-mode [data-action="open-alert"]:not(.has-alert),
body.dark-mode [data-action="open-alert"]:not(.has-alert) span {
    filter: grayscale(100%) brightness(1.2) contrast(1.3);
    -webkit-text-stroke: 1.5px #8b949e;
    color: #94a3b8;
}
/* Dark mode — cloche active (verte) */
body.dark-mode [data-action="open-alert"].has-alert,
body.dark-mode [data-action="open-alert"].has-alert span {
    color: #3fb950;
    filter: brightness(1.2);
    -webkit-text-stroke: 0;
}

/* Cloche SVG — pas de filtres / text-stroke emoji sur le glyphe */
[data-action="open-alert"] .alert-btn-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    filter: none !important;
    -webkit-text-stroke: 0 !important;
}
body:not(.dark-mode) [data-action="open-alert"]:not(.has-alert) .alert-btn-glyph svg {
    color: #64748b;
}
body:not(.dark-mode) [data-action="open-alert"].has-alert .alert-btn-glyph svg {
    color: #0f172a;
}
body.dark-mode [data-action="open-alert"]:not(.has-alert) .alert-btn-glyph svg {
    color: #8b949e;
}
body.dark-mode [data-action="open-alert"].has-alert .alert-btn-glyph svg {
    color: #3fb950;
}

/* Liens / boutons « graphe » — mini-barres SVG (C-6) */
.opp-chart-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    vertical-align: middle;
}
.opp-action-link.opp-action-chart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: inherit;
}

/* ===== V4.5.0 : Filtres mobile collapsible (amélioré) ===== */
.btn-filters-toggle { display: none; }

@media (max-width: 640px) {
    .btn-filters-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 8px;
        border: 1px solid var(--border-color, #e2e8f0);
        background: var(--card-bg, #fff);
        font-size: 13px;
        cursor: pointer;
        color: var(--text-color, #1e293b);
        font-weight: 500;
        white-space: nowrap;
    }
    .opp-filters-row {
        display: none;
        gap: 6px;
        padding: 8px 0 4px;
        width: 100%;
    }
    /* V4.5.1 : grille 2×2 colonnes égales (Signal+Limit ligne 1, Country+Sector ligne 2) */
    .opp-filters-row.filters-open {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .opp-filters-row.filters-open #filter-signal-display {
        grid-column: 1;
        grid-row: 1;
    }
    .opp-filters-row.filters-open #display-limit {
        grid-column: 2;
        grid-row: 1;
    }
    .opp-filters-row.filters-open #filter-country {
        grid-column: 1;
        grid-row: 2;
    }
    .opp-filters-row.filters-open #filter-sector {
        grid-column: 2;
        grid-row: 2;
    }
    .opp-filters-row .filter-opp-select,
    .opp-filters-row .display-limit-select { width: 100%; max-width: 100%; box-sizing: border-box; }
    .filters-badge {
        background: var(--accent-primary);
        color: white;
        border-radius: 999px;
        font-size: 11px;
        padding: 1px 6px;
        font-weight: 700;
    }
}

/* ===== V4.4.2 : Toolbar ticker — texte masqué sur mobile ===== */
@media (max-width: 480px) {
    .btn-label-text { display: none; }
    /* Analyse IA : garder le libellé (sinon bouton secondaire vide / illisible) */
    #ai-analysis-btn .btn-label-text {
        display: inline;
    }
    #quick-search { width: 100px !important; }
}

/* Bouton watchlist — fusée avec étoiles-devise (€/$) quand activé */
.watchlist-star {
    position: relative;
    transition: transform 0.15s ease, opacity 0.15s ease;
    cursor: pointer;
    background: transparent !important;
    border: none;
    font-size: 20px;
    padding: 0;
    line-height: 1;
    opacity: 0.35;
}

.watchlist-star.filled {
    opacity: 1;
}

/* Étoiles-devise qui orbitent autour de la fusée (état activé) */
.watchlist-star.filled::before,
.watchlist-star.filled::after {
    position: absolute;
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
    animation: cur-twinkle 1.6s ease-in-out infinite;
}
.watchlist-star.filled::before {
    content: '€';
    top: -1px;
    left: -5px;
    color: #f59e0b !important;
    animation-delay: 0s;
}
.watchlist-star.filled::after {
    content: '$';
    bottom: -1px;
    right: -5px;
    color: #10b981 !important;
    animation-delay: 0.8s;
}

@keyframes cur-twinkle {
    0%, 100% { opacity: 0.45; transform: scale(0.8); }
    50%       { opacity: 1;    transform: scale(1.2); }
}

/* Mode clair seulement — couleur héritage (no-op pour emoji) */
body:not(.dark-mode) .watchlist-star {
    color: var(--text-color);
}

.watchlist-star:hover {
    transform: scale(1.2);
    background: transparent !important;
    opacity: 0.7;
}
.watchlist-star.filled:hover { opacity: 1; }

.watchlist-star:active {
    transform: scale(0.9);
}

/* Bouton portefeuille - Style noir et blanc comme les étoiles */
.portfolio-btn {
    transition: transform 0.15s ease;
    cursor: pointer;
    background: transparent !important;
    border: none;
    font-size: 20px;
    padding: 0;
    line-height: 1;
}

/* Cartable rempli (noir) si dans le portefeuille - mode clair seulement */
body:not(.dark-mode) .portfolio-btn.filled {
    filter: grayscale(100%) brightness(0) contrast(1.5);
    -webkit-text-stroke: 0;
}

/* Cartable vide (blanc avec contour noir) si pas dans le portefeuille - mode clair seulement */
body:not(.dark-mode) .portfolio-btn:not(.filled) {
    filter: grayscale(100%) brightness(2) contrast(1);
    -webkit-text-stroke: 1px var(--text-color);
    color: white;
}

.portfolio-btn:hover {
    transform: scale(1.2);
    background: transparent !important;
}

.portfolio-btn:active {
    transform: scale(0.9);
}

/* Bouton alerte - Style noir et blanc comme les étoiles et portefeuille */
/* En mode clair seulement - dark mode géré par dark-mode.css */
button[data-action="open-alert"],
.alert-btn {
    transition: transform 0.15s ease;
    cursor: pointer;
    background: transparent !important;
    border: none;
    font-size: 18px;
    padding: 0;
    line-height: 1;
}

/* Cloche remplie (noire) si alerte active - Mode clair seulement */
body:not(.dark-mode) button[data-action="open-alert"].has-alert,
body:not(.dark-mode) .alert-btn.has-alert {
    filter: grayscale(100%) brightness(0) contrast(1.5);
    -webkit-text-stroke: 0;
}

/* Cloche vide (gris avec contour noir) si pas d'alerte - Mode clair seulement */
body:not(.dark-mode) button[data-action="open-alert"]:not(.has-alert),
body:not(.dark-mode) .alert-btn:not(.has-alert) {
    filter: grayscale(100%) brightness(0.8) contrast(1.3);
    -webkit-text-stroke: 1.5px var(--text-color);
    color: var(--badge-text); /* Gris moyen accentué */
}

button[data-action="open-alert"]:hover,
.alert-btn:hover {
    transform: scale(1.2);
    background: transparent !important;
}

button[data-action="open-alert"]:active,
.alert-btn:active {
    transform: scale(0.9);
}

.alert-muted-text {
    color: var(--text-secondary, #64748b);
}
.alert-empty-state {
    text-align: center;
    color: var(--text-secondary, #64748b);
    padding: 20px;
}
.alert-error-text {
    color: var(--accent-danger, #dc2626);
}
.alert-error-centered {
    color: var(--accent-danger, #ef4444);
    text-align: center;
}
.alert-list-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.alert-list-row-card {
    border-radius: 6px;
    margin-bottom: 8px;
    background: var(--bg-secondary, #f8fafc);
}
.alert-list-info {
    flex: 1;
}
.alert-company-name {
    font-weight: 600;
    color: var(--text-color, #1e293b);
    font-size: 15px;
}
.alert-company-name-compact {
    font-weight: 600;
    color: var(--text-color, #1e293b);
}
.alert-ticker-subline {
    font-size: 12px;
    color: var(--text-secondary, #94a3b8);
    margin-top: 2px;
}
.alert-condition-line {
    font-size: 13px;
    color: var(--text-secondary, #64748b);
    margin-top: 4px;
}
.alert-delete-btn,
.alert-edit-btn,
.alert-secondary-btn,
.alert-primary-btn {
    border: none;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
}
.alert-delete-btn {
    color: var(--accent-danger, #ef4444);
    background: rgba(239, 68, 68, 0.12);
    padding: 6px 12px;
    transition: all 0.2s;
}
.alert-edit-btn {
    color: var(--accent-primary, #0ea5e9);
    background: rgba(14, 165, 233, 0.12);
}
.alert-primary-btn {
    background: var(--accent-primary, #0ea5e9);
    color: #fff;
    padding: 5px 12px;
}
.alert-secondary-btn {
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-secondary, #64748b);
}
.alerts-modal-overlay,
.alert-delete-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.alerts-modal-overlay {
    background: var(--overlay-bg);
    z-index: 10000;
}
.alerts-modal-overlay--triggered {
    z-index: 10001;
}
.alerts-modal-card {
    background: var(--card-bg, #fff);
    padding: 24px;
    border-radius: 12px;
    width: 90%;
    max-width: 520px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color, #e2e8f0);
}
.alerts-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.alerts-modal-header-compact {
    margin-bottom: 16px;
}
.alerts-modal-title {
    margin: 0;
    color: var(--text-color, #1e293b);
}
.alerts-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary, #64748b);
}
.alerts-modal-list {
    flex: 1;
    overflow-y: auto;
    min-height: 100px;
}
.alerts-modal-list-compact {
    min-height: 80px;
}
.alert-triggered-row {
    padding: 12px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    margin-bottom: 8px;
    background: var(--bg-secondary, #f8fafc);
}
.alert-triggered-info {
    margin-bottom: 8px;
}
.alert-actions-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.alert-edit-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.alert-edit-label {
    font-size: 13px;
    color: var(--text-color, #374151);
    white-space: nowrap;
}
.alert-edit-input {
    width: 88px;
    padding: 4px 8px;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 6px;
    font-size: 13px;
    background: var(--input-bg, #fff);
    color: var(--text-color, #1e293b);
}
.alert-delete-overlay {
    background: rgba(2, 6, 23, 0.55);
    z-index: 10030;
    padding: 16px;
}
.alert-delete-card {
    width: min(420px, 100%);
    background: var(--card-bg, #fff);
    border-radius: 14px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.28);
    border: 1px solid var(--border-color, #e2e8f0);
    overflow: hidden;
}
.alert-delete-body {
    padding: 18px 20px 12px 20px;
}
.alert-delete-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-color, #0f172a);
    margin-bottom: 6px;
}
.alert-delete-copy {
    font-size: 14px;
    color: var(--text-secondary, #475569);
    line-height: 1.45;
}
.alert-delete-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px 18px 20px;
    border-top: 1px solid var(--border-color, #f1f5f9);
}
.alert-delete-cancel-btn,
.alert-delete-confirm-btn {
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 14px;
    cursor: pointer;
}
.alert-delete-cancel-btn {
    border: 1px solid var(--border-color, #cbd5e1);
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-color, #334155);
    font-weight: 600;
}
.alert-delete-confirm-btn {
    border: none;
    background: #dc2626;
    color: #fff;
    font-weight: 700;
}
.alert-toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10002;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.config-section {
    /* margin géré par le gap du conteneur main-cards-container */
    background: var(--card-bg);
    border-radius: var(--card-border-radius);
    padding: 20px;
    box-shadow: 0 1px 3px var(--shadow-color);
    border-top: 3px solid;
}

.collapsible-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}

.collapsible-content {
    display: none;
    padding-top: 16px;
}

.collapsible-content.open { display: block; }

@media (max-width: 768px) {
    .grid { grid-template-columns: 1fr; }
    .header { 
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        padding: 10px 12px !important;
        gap: 8px !important;
    }
    .header h1 { 
        font-size: 16px !important; 
        margin: 0 !important;
        flex: 0 0 auto !important;
    }
    #header-right-container {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex: 0 0 auto !important;
    }
    .version-badge, .env-badge, .status-badge {
        font-size: 9px !important;
        padding: 2px 6px !important;
    }
}

/* ============================================================================
   GUIDE INDICATEURS TECHNIQUES — Classes CSS pilotées par variables thème
   Remplace les inline styles JS (V4.5.71)
   ============================================================================ */
.indicators-guide-inner {
    background: var(--card-bg);
    color: var(--text-color);
    border-radius: 16px;
    padding: 30px;
    padding-top: 40px;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    border: 1px solid var(--border-color);
}
.guide-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--secondary-text);
}
.guide-title {
    color: var(--text-color);
    margin-bottom: 20px;
}
.guide-section-block {
    margin-bottom: 25px;
}
.guide-h3 {
    color: var(--guide-heading);
    margin-bottom: 15px;
}
.guide-h3.guide-h3-section {
    color: var(--guide-section);
}
.guide-hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 20px 0;
}
.guide-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 10px;
}
.guide-table-head {
    background: var(--guide-table-row);
}
.indicators-guide-modal {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.guide-table th,
.guide-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--border-color);
}
.guide-table th {
    padding-top: 6px;
    padding-bottom: 6px;
}
.guide-table-left {
    text-align: left;
}
.guide-table-right {
    text-align: right;
}
.guide-penalty-row {
    color: var(--accent-danger);
}
.guide-note {
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-secondary);
}
.guide-full-link-row {
    border-top: 1px solid var(--border-color);
    margin-top: 20px;
    padding-top: 16px;
    text-align: center;
}
.guide-full-link {
    color: var(--accent-primary, #0ea5e9);
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 8px 0;
}

.legal-table thead tr {
    background: var(--bg-secondary, #f1f5f9);
}

.legal-table th,
.legal-table td {
    padding: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
}

.legal-table th {
    text-align: left;
}

/* Mobile: éviter overflow horizontal des tableaux légaux (RGPD/CGU) */
@media (max-width: 520px) {
    .legal-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.legal-list {
    margin: 8px 0 8px 20px;
    line-height: 1.8;
}

.legal-link-row {
    margin-top: 2rem;
}

.legal-separator {
    color: var(--secondary-text, #64748b);
}

.legal-container {
    max-width: 720px;
    margin: 2rem auto;
    padding: 0 16px;
}

.legal-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.legal-toolbar-item {
    margin: 0;
}

.legal-title {
    margin-top: 14px;
}

.muted {
    color: var(--secondary-text, #64748b);
    font-size: 14px;
}

/* CSP-friendly dashboard utilities */
.u-hidden { display: none; }
.u-draggable { cursor: move; }
.u-pointer { cursor: pointer; }
.u-mt-8 { margin-top: 8px; }
.u-mt-12 { margin-top: 12px; }
.u-mt-16 { margin-top: 16px; }
.u-my-12 { margin: 12px 0; }
.u-title-reset { margin: 0; }
.u-subtitle-reset { margin: 4px 0 0 0; }
.u-full-width { width: 100%; }
.u-nowrap-inline { white-space: nowrap; display: inline-block; letter-spacing: 0; }
.u-flex-center-gap-8 { display: flex; align-items: center; gap: 8px; }
.u-flex-center-gap-8 > input[type="checkbox"] {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin: 0;
}
.u-flex-center-gap-12 { display: flex; align-items: center; gap: 12px; }
.u-flex-col-gap-4 { display: flex; flex-direction: column; gap: 4px; }
.u-flex-col-gap-8 { display: flex; flex-direction: column; gap: 8px; }
.u-inline-flex-col-gap-8 { margin-top: 8px; display: inline-flex; flex-direction: column; gap: 8px; align-items: stretch; }
.u-grid-2-gap-12 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.u-grid-2-gap-16 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.u-link-button { text-decoration: none; justify-content: center; white-space: nowrap; }

.dashboard-small-label {
    font-size: 13px;
    color: #64748b;
}
.dashboard-small-label-xs {
    font-size: 12px;
    color: #64748b;
}
.dashboard-muted-help {
    font-size: 12px;
    color: #64748b;
    margin-top: 8px;
}
.dashboard-model-current-label {
    font-size: 12px;
    color: var(--secondary-text);
    margin-bottom: 8px;
}
#model-display {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
    padding: 8px 12px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(139, 92, 246, 0.2);
}
#telegram-include-brief {
    cursor: pointer;
    width: 18px;
    height: 18px;
}
#scan-preset-mini {
    width: 100%;
    margin-bottom: 8px;
}
#scan-btn-reduced,
#recalc-btn-reduced {
    width: 100%;
}
#scan-progress {
    display: none;
    margin-top: 16px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
}
.scan-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 6px;
}
#progress-text {
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    flex: 1;
    min-width: 0;
}
.scan-progress-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.scan-progress-actions .btn {
    padding: 4px 10px;
    font-size: 12px;
    margin: 0;
    white-space: nowrap;
}
.progress-track {
    background: #e2e8f0;
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}
#progress-bar {
    background: linear-gradient(90deg, #10b981, #059669);
    height: 100%;
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 4px;
}
#progress-details {
    margin-top: 8px;
    font-size: 12px;
    color: #64748b;
}
.skeleton-flex-fill { flex: 1; }
.skeleton-line-primary {
    margin-bottom: 8px;
    height: 16px;
}
.skeleton-line-secondary {
    height: 12px;
}
.portfolio-item-name {
    color: var(--text-secondary, #64748b);
    font-size: 14px;
    margin-top: -8px;
    margin-bottom: 8px;
}
.portfolio-warning-text {
    color: var(--accent-warning, #f59e0b);
}
.portfolio-warning-small {
    color: var(--accent-warning, #f59e0b);
    font-size: 12px;
}
.portfolio-pnl-positive {
    color: var(--accent-success, #10b981);
}
.portfolio-pnl-negative {
    color: var(--accent-danger, #ef4444);
}
.portfolio-item-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.portfolio-item-title-icons {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.portfolio-ticker-link {
    color: var(--accent-primary, #3b82f6);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    word-break: keep-all;
}
.portfolio-item-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.portfolio-action-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.portfolio-collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.portfolio-collapse-icon {
    display: inline-block;
    width: 14px;
    opacity: 0.8;
}

/* Portfolio « Mes investissements » : barre d’actions pleine largeur sous le ticker sur mobile */
@media (max-width: 768px) {
    .portfolio-item-title-row .portfolio-item-actions {
        flex-basis: 100%;
        width: 100%;
        margin-left: 0;
    }
    .portfolio-action-link {
        white-space: normal;
        hyphens: none;
    }
}
.portfolio-stat-full {
    grid-column: 1 / -1;
}
.portfolio-modal-heading {
    margin-bottom: 20px;
}
.portfolio-modal-icon {
    font-size: 24px;
}
.portfolio-modal-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.portfolio-modal-input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
}
.portfolio-modal-current-price {
    font-size: 12px;
    display: block;
    margin-top: 4px;
}
.portfolio-modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}
.load-error-text {
    color: var(--accent-danger, #dc2626);
}
.import-op-badge.dividend {
    background: rgba(59, 130, 246, 0.15);
    color: #1d4ed8;
}
.import-subline {
    color: var(--secondary-text, #64748b);
}
.journal-banner-link {
    text-decoration: none;
}
.journal-banner-title {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.35;
    color: var(--text-color, #0f172a);
}
/* Bandeau filtre ticker : grille desktop (voir @media min-width 769px), flex sur mobile */
body.page-portfolio-journal #journal-ticker-filter-banner.journal-banner-ticker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
}
.journal-banner-link--all {
    margin-left: auto;
}
.journal-kind-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.28em 0.65em;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.journal-kind-badge--buy {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
}
.journal-kind-badge--sell {
    background: rgba(249, 115, 22, 0.14);
    color: #c2410c;
}
.journal-kind-badge--dividend {
    background: rgba(59, 130, 246, 0.14);
    color: #1d4ed8;
}
.journal-kind-badge--other {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
}
.journal-ticker-code {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--text-color, #0f172a);
}
.journal-empty-cell {
    text-align: center;
    padding: 24px 16px;
    color: var(--secondary-text, #64748b);
}
.journal-num-cell {
    text-align: right;
}
.journal-action-cell {
    text-align: center;
}
.journal-delete-btn {
    margin-left: 6px;
    color: var(--accent-danger, #ef4444);
}

/* Journal des mouvements — mobile / app : cartes par ligne (data-label) + actions lisibles */
@media (max-width: 768px) {
    body.page-portfolio-journal #portfolio-journal-table-wrap {
        overflow-x: visible;
        -webkit-overflow-scrolling: auto;
    }
    body.page-portfolio-journal .portfolio-journal-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 14px;
    }
    body.page-portfolio-journal .portfolio-journal-table thead {
        display: none;
    }
    body.page-portfolio-journal .portfolio-journal-table tbody {
        display: block;
        width: 100%;
    }
    body.page-portfolio-journal .portfolio-journal-table tbody tr {
        display: block;
        width: 100%;
        margin-bottom: 12px;
        padding: 12px 14px;
        border: 1px solid var(--border-color, #e2e8f0);
        border-radius: 10px;
        background: var(--card-bg, #ffffff);
        box-sizing: border-box;
    }
    body.page-portfolio-journal .portfolio-journal-table tbody tr:last-child {
        margin-bottom: 0;
    }
    body.page-portfolio-journal .portfolio-journal-table td {
        display: grid;
        grid-template-columns: minmax(6.75rem, 40%) 1fr;
        gap: 6px 10px;
        align-items: center;
        padding: 8px 0;
        border: none;
        width: 100%;
        text-align: end;
        vertical-align: middle;
    }
    body.page-portfolio-journal .portfolio-journal-table td:first-child {
        padding-top: 0;
    }
    body.page-portfolio-journal .portfolio-journal-table td[data-label]::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--secondary-text, #64748b);
        text-align: start;
        line-height: 1.3;
    }
    body.page-portfolio-journal .portfolio-journal-table td.journal-action-cell {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        padding-top: 12px;
        margin-top: 6px;
        border-top: 1px solid var(--border-color, #e2e8f0);
        text-align: center;
        grid-template-columns: unset;
    }
    body.page-portfolio-journal .portfolio-journal-table td.journal-action-cell::before {
        display: none;
    }
    body.page-portfolio-journal .journal-action-cell .btn,
    body.page-portfolio-journal .journal-action-cell .btn-small {
        flex: 1 1 0;
        min-width: 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        hyphens: none;
        overflow-wrap: normal;
        word-break: normal;
        padding: 8px 10px;
        box-sizing: border-box;
        margin: 0;
    }
    body.page-portfolio-journal .journal-delete-btn {
        margin-left: 0;
    }
    body.page-portfolio-journal .portfolio-journal-table .journal-empty-cell {
        display: block;
        text-align: center;
        padding: 20px 12px;
        font-size: 14px;
    }
    body.page-portfolio-journal .portfolio-journal-table .journal-empty-cell::before {
        display: none;
    }
    body.page-portfolio-journal .portfolio-journal-card-header {
        flex-direction: column;
        align-items: stretch;
    }
    body.page-portfolio-journal .portfolio-journal-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    body.page-portfolio-journal .portfolio-journal-actions .btn {
        width: 100%;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    body.page-portfolio-journal #journal-ticker-filter-banner {
        flex-direction: column;
        align-items: stretch;
    }
    body.page-portfolio-journal #journal-ticker-filter-banner .journal-banner-link--all {
        margin-left: 0;
    }
    body.page-portfolio-journal #journal-ticker-filter-banner .btn,
    body.page-portfolio-journal #journal-ticker-filter-banner a.journal-banner-link {
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
    }
}

/* Journal des mouvements — PC & tablette : tableau aligné, bandeau ticker équilibré */
@media (min-width: 769px) {
    body.page-portfolio-journal .container {
        max-width: 1080px;
    }
    body.page-portfolio-journal #journal-ticker-filter-banner.journal-banner-ticker {
        display: grid;
        grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
        align-items: center;
        gap: 12px 20px;
        padding: 14px 18px;
        margin-bottom: 16px;
        background: var(--card-bg, #ffffff);
        border: 1px solid var(--border-color, #e2e8f0);
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    }
    body.page-portfolio-journal #journal-ticker-filter-banner.journal-banner-ticker .journal-banner-link--all {
        margin-left: 0;
        justify-self: end;
    }
    body.page-portfolio-journal #journal-ticker-filter-banner.journal-banner-ticker .journal-banner-link--back {
        justify-self: start;
    }
    body.page-portfolio-journal #journal-ticker-filter-banner.journal-banner-ticker .journal-banner-title {
        justify-self: center;
        text-align: center;
        font-size: 1.05rem;
        font-weight: 600;
        letter-spacing: -0.02em;
        padding: 0 8px;
    }
    body.page-portfolio-journal #journal-ticker-filter-banner.journal-banner-ticker .journal-banner-link {
        min-height: 40px;
        padding: 8px 16px;
        white-space: nowrap;
    }
    body.page-portfolio-journal #portfolio-journal-page-card.card {
        border: 1px solid var(--border-color, #e8ecf1);
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
    }
    body.page-portfolio-journal .portfolio-journal-card-header {
        margin-bottom: 14px;
        padding-bottom: 2px;
        border-bottom: 1px solid var(--border-color, #eef2f6);
    }
    body.page-portfolio-journal .portfolio-journal-card-header h2 {
        font-size: 1.2rem;
        font-weight: 600;
    }
    body.page-portfolio-journal .portfolio-journal-actions .btn-small {
        min-height: 38px;
        padding: 8px 14px;
    }
    body.page-portfolio-journal #portfolio-journal-table-wrap {
        overflow: hidden;
        border: 1px solid var(--border-color, #e8ecf1);
        border-radius: 10px;
        background: var(--card-bg, #ffffff);
    }
    body.page-portfolio-journal .portfolio-journal-table {
        table-layout: fixed;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 14px;
    }
    body.page-portfolio-journal .portfolio-journal-table thead {
        background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    }
    body.page-portfolio-journal .portfolio-journal-table thead th {
        padding: 11px 12px;
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #64748b;
        border-bottom: 1px solid var(--border-color, #e2e8f0);
        vertical-align: middle;
    }
    body.page-portfolio-journal .portfolio-journal-table thead th:nth-child(1) {
        width: 12%;
    }
    body.page-portfolio-journal .portfolio-journal-table thead th:nth-child(2) {
        width: 14%;
    }
    body.page-portfolio-journal .portfolio-journal-table thead th:nth-child(3) {
        width: 12%;
    }
    body.page-portfolio-journal .portfolio-journal-table thead th:nth-child(4) {
        width: 11%;
    }
    body.page-portfolio-journal .portfolio-journal-table thead th:nth-child(5) {
        width: 13%;
    }
    body.page-portfolio-journal .portfolio-journal-table thead th:nth-child(6) {
        width: 12%;
    }
    body.page-portfolio-journal .portfolio-journal-table thead th:nth-child(7) {
        width: 26%;
    }
    body.page-portfolio-journal .portfolio-journal-table tbody td {
        padding: 13px 12px;
        vertical-align: middle;
        border-bottom: 1px solid #f1f5f9;
        word-wrap: break-word;
    }
    body.page-portfolio-journal .portfolio-journal-table tbody tr:nth-child(even) td {
        background: rgba(248, 250, 252, 0.72);
    }
    body.page-portfolio-journal .portfolio-journal-table tbody tr:hover td {
        background: rgba(239, 246, 255, 0.95);
    }
    body.page-portfolio-journal .portfolio-journal-table tbody tr:last-child td {
        border-bottom: none;
    }
    body.page-portfolio-journal .portfolio-journal-table .journal-cell-type {
        width: 12%;
    }
    body.page-portfolio-journal .portfolio-journal-table .journal-cell-date {
        font-variant-numeric: tabular-nums;
        color: var(--text-color, #334155);
    }
    body.page-portfolio-journal .portfolio-journal-table .journal-num-cell {
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum" 1;
    }
    body.page-portfolio-journal .portfolio-journal-table .journal-action-cell {
        text-align: right;
        white-space: nowrap;
        padding-left: 8px;
    }
    body.page-portfolio-journal .portfolio-journal-table .journal-action-cell .btn-small {
        min-height: 36px;
        padding: 6px 12px;
        margin-left: 8px;
    }
    body.page-portfolio-journal .portfolio-journal-table .journal-action-cell .btn-small:first-child {
        margin-left: 0;
    }
    body.page-portfolio-journal .journal-delete-btn {
        margin-left: 8px;
        border-color: rgba(239, 68, 68, 0.35);
    }
}

.performance-chart-canvas {
    height: 280px;
    max-height: 400px;
}
.portfolio-chart-error {
    text-align: center;
    color: var(--accent-danger, #ef4444);
    padding: 24px 16px;
    font-size: 14px;
}
#hidden-cards-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hidden-card-row {
    margin-bottom: 0;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.45;
    transition: background-color 0.15s ease;
}
.hidden-card-row:hover {
    background: color-mix(in srgb, var(--text-color, #0f172a) 5%, transparent);
}
.hidden-card-row .settings-checkbox {
    margin: 0;
    justify-self: start;
}
.hidden-card-label {
    min-width: 0;
}
.scan-log-link {
    color: var(--accent-primary, #2563eb);
    text-decoration: none;
}
.google-icon {
    width: 20px;
    height: 20px;
}
.inapp-hint {
    background: rgba(14, 165, 233, 0.08);
    border: 1px solid rgba(14, 165, 233, 0.25);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #64748b;
    text-align: center;
    line-height: 1.5;
}
.search-suggestions-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    max-height: 240px;
    overflow-y: auto;
    display: none;
}
.search-suggestions-dropdown-quick {
    z-index: 2000;
    max-height: 280px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.search-suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border-color, #f1f5f9);
}
.search-suggestion-ticker {
    font-size: 13px;
    min-width: 60px;
}
.search-suggestion-name {
    font-size: 12px;
    color: var(--text-secondary, #64748b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.search-suggestion-country {
    font-size: 11px;
    color: var(--text-secondary, #94a3b8);
}
.header-user-info-mobile {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
}
.header-user-info-desktop {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 0;
    margin-right: auto;
}
.dashboard-main-cards-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 0;
}
.app-update-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99998;
    background: #0ea5e9;
    color: #fff;
    padding: 12px 16px;
    padding-top: max(16px, calc(env(safe-area-inset-top, 0px) + 10px));
    padding-bottom: max(12px, 10px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.app-update-banner-actions {
    display: flex;
    gap: 8px;
}
.app-update-banner-cta {
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    text-decoration: none;
}
.app-update-banner-close {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    padding: 0 4px;
}
#mobile-app-prompt {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.65);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    z-index: 10000;
}
#mobile-app-prompt .prompt-card {
    width: min(520px, 100%);
    background: var(--card-bg, #111827);
    color: var(--text-color, #e5e7eb);
    border-radius: 16px;
    border: 1px solid var(--border-color, rgba(148, 163, 184, 0.2));
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
    padding: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
#mobile-app-prompt .prompt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
#mobile-app-prompt .prompt-title {
    font-size: 16px;
    font-weight: 600;
}
#mobile-app-prompt .prompt-close {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
}
#mobile-app-prompt .prompt-body {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(229, 231, 235, 0.92);
}
#mobile-app-prompt .prompt-actions {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
#mobile-app-prompt .btn {
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.65);
    color: inherit;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
#mobile-app-prompt .btn.primary {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: #0b1220;
}
.bt-muted-small {
    color: var(--secondary-text);
    font-size: 0.85rem;
}
.bt-intro {
    font-size: 0.85rem;
    color: var(--secondary-text);
    margin-bottom: 8px;
}
.bt-muted-cell {
    color: var(--secondary-text);
}
.bt-rank-cell {
    text-align: center;
    color: var(--secondary-text);
    font-weight: 500;
}
.bt-left-cell {
    text-align: left;
}
.bt-table-wrap-tight {
    margin-bottom: 0;
}
.bt-table-wrap-narrow {
    max-width: 500px;
}
.bt-table-compact {
    min-width: 0;
}
.usage-pill-active {
    background: var(--success-bg, #dcfce7);
    color: var(--success-text, #166534);
}
.usage-pill-suspended {
    background: var(--msg-error-bg, #fee2e2);
    color: var(--msg-error-text, #991b1b);
}
.usage-pill-muted {
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-secondary, #64748b);
}
.usage-pill-accent {
    background: color-mix(in srgb, var(--accent-primary, #2563eb) 15%, transparent);
    color: var(--accent-primary, #2563eb);
}
.usage-admin-btn {
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 4px;
}
.usage-admin-btn-suspend {
    background: var(--msg-error-bg, #fff8f8);
    color: var(--msg-error-text, #b91c1c);
}
.usage-admin-btn-activate {
    background: var(--msg-success-bg, #f0fdf4);
    color: var(--msg-success-text, #15803d);
}
.usage-admin-btn-muted {
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-secondary, #64748b);
    margin-left: 6px;
}
.usage-admin-btn-accent {
    background: color-mix(in srgb, var(--accent-primary, #2563eb) 10%, transparent);
    color: var(--accent-primary, #2563eb);
    margin-left: 6px;
}
.usage-table-wrap-spaced {
    margin-top: 8px;
}
.usage-map-message {
    color: var(--secondary-text);
    padding: 1rem;
}
.usage-map-legend-gradient {
    background: linear-gradient(90deg, #eff6ff 0%, #60a5fa 50%, #1d4ed8 100%);
}
.settings-subsection-hidden {
    display: none;
}
.settings-form-group-spacious {
    margin-bottom: 30px;
}
.settings-hint-indent {
    /* Alignée avec la colonne texte (22px case + 12px marge libellé — .settings-checkbox-label). */
    margin-left: 34px;
}
.settings-form-group-compact {
    margin-bottom: 20px;
}
.settings-hint-block {
    display: block;
    margin-bottom: 8px;
}
.settings-preview-section {
    margin-top: 16px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    padding-top: 16px;
}
.settings-preview-btn {
    width: 100%;
}
.settings-preview-result {
    display: none;
    margin-top: 12px;
    padding: 12px;
    background: var(--card-bg, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    font-size: 13px;
    white-space: pre-wrap;
    max-height: 300px;
    overflow-y: auto;
    font-family: monospace;
}
.api-budget-loading {
    display: flex;
    align-items: center;
    gap: 8px;
}
.api-budget-row {
    margin-bottom: 8px;
}
.api-budget-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}
.api-budget-provider {
    font-weight: 500;
}
.api-budget-status,
.api-budget-percent {
    font-weight: 600;
}
.api-budget-status-active,
.api-budget-percent-ok {
    color: var(--accent-success);
}
.api-budget-status-invalid,
.api-budget-percent-danger {
    color: var(--accent-danger);
}
.api-budget-status-missing {
    color: var(--text-secondary);
}
.api-budget-status-error,
.api-budget-percent-warning {
    color: var(--accent-warning);
}
.api-budget-note {
    color: var(--text-secondary, #6b7280);
}
.api-budget-link {
    color: var(--accent-primary, #3b82f6);
    text-decoration: underline;
}
.api-budget-progress {
    width: 100%;
    height: 8px;
    accent-color: var(--accent-success);
}
.api-budget-progress-warning {
    accent-color: var(--accent-warning);
}
.api-budget-progress-danger {
    accent-color: var(--accent-danger);
}
.api-budget-empty {
    color: var(--text-secondary, #6b7280);
}
.api-budget-empty small {
    font-size: 11px;
}
.api-budget-error {
    color: var(--accent-danger, #ef4444);
}
.ai-md-link {
    color: var(--accent-primary, #3b82f6);
    text-decoration: underline;
}
.ai-md-section {
    margin: 20px 0 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-secondary, #64748b);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    padding-bottom: 4px;
}
.ai-md-list {
    margin: 6px 0;
    padding-left: 18px;
}
.ai-md-list-item {
    margin: 3px 0;
    line-height: 1.55;
}
.ai-md-spacer {
    height: 8px;
}
.ai-md-paragraph {
    margin: 0 0 5px;
    line-height: 1.6;
}
.ai-loading-overlay,
.ai-analysis-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-loading-overlay {
    background: rgba(0, 0, 0, 0.6);
    flex-direction: column;
    gap: 16px;
}
.ai-loading-spinner {
    width: 36px;
    height: 36px;
    border-width: 3px;
}
.ai-loading-title {
    color: var(--text-color, #e2e8f0);
    font-size: 14px;
    font-weight: 500;
}
.ai-loading-subtitle {
    color: var(--text-secondary, #94a3b8);
    font-size: 12px;
}
.ai-sources {
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-secondary, #475569);
}
.ai-source-link {
    margin-right: 8px;
    color: var(--accent-primary, #2563eb);
}
.ai-analysis-overlay {
    background: rgba(0, 0, 0, 0.8);
    padding: 20px;
}
.analysis-ia-modal {
    background: var(--card-bg, #fff);
    color: var(--text-color, #1e293b);
    border-radius: 12px;
    padding: 30px;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}
.ai-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary, #666);
}
.ai-modal-title {
    margin-top: 0;
}
.ai-indicators-card {
    background: var(--bg-secondary, #f5f5f5);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}
.ai-indicators-title {
    margin-top: 0;
}
.ai-indicators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.ai-model-line {
    margin: 0 0 20px 0;
    color: var(--text-color, #0f172a);
    font-size: 13px;
}
.ai-analysis-body {
    font-size: 14px;
    color: var(--text-color, #1e293b);
}
.ai-generated-at {
    margin-top: 20px;
    color: var(--text-secondary, #999);
    font-size: 12px;
}
.ai-download-btn {
    margin-top: 15px;
    padding: 10px 20px;
    background: var(--accent-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: filter 0.2s;
}
.ai-download-btn:hover {
    filter: brightness(0.85);
}
.dashboard-hour-input { width: 80px; }
.scheduler-control-row {
    display: flex;
    align-items: stretch;
    gap: 12px;
    height: auto;
}
#scheduler-status-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    flex: 1;
    border: 1px solid #e2e8f0;
    box-sizing: border-box;
}
.scheduler-status-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}
.scheduler-status-value {
    font-size: 13px;
    font-weight: 600;
}
.scheduler-schedule {
    font-size: 13px;
    color: #64748b;
    margin-left: auto;
}
.scheduler-toggle-btn {
    min-width: 140px;
    padding: 12px 18px;
    border: 1px solid #e2e8f0;
    box-sizing: border-box;
}
#api-budgets-display {
    background: var(--card-bg, #f8fafc);
    padding: 16px;
    border-radius: 8px;
    margin-top: 8px;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}
.api-budgets-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.dashboard-small-btn {
    padding: 4px 8px;
    font-size: 12px;
}
.admin-links-help {
    font-size: 13px;
    color: var(--secondary-text, #64748b);
    margin: 0 0 8px 0;
}
.token-limits-hint {
    font-size: 12px;
    color: #64748b;
    margin: 4px 0 8px;
}
.dashboard-config-box {
    background: var(--card-bg, #f8fafc);
    padding: 16px;
    border-radius: 8px;
    margin-top: 8px;
}
.dashboard-section-title {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}
.token-limit-input {
    width: 100%;
    margin-top: 4px;
}
#manage-cookies-sep,
#manage-cookies-btn {
    display: none;
}
#manage-cookies-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.guide-td {
    border-bottom: 1px solid var(--border-color);
}
.guide-penalty-row {
    color: var(--guide-penalty);
}
.guide-footnote {
    margin-top: 10px;
    font-size: 12px;
    color: var(--secondary-text);
}

/* ============================================================================
   DIALOG CONFIG LOADING — Spinner centré pendant loadConfig() admin (V4.5.82)
   ============================================================================ */
dialog#config-loading-dialog {
    border: none !important;
    outline: none;
    padding: 0;
    background: transparent;
    overflow: visible;
    position: fixed;
    inset: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
}
dialog#config-loading-dialog::backdrop {
    background: rgba(0, 0, 0, 0.15);
}
.config-loading-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Empty & loading states partagés */
.empty-state {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-secondary, #64748b);
}
.empty-state p { margin: 0; }
.empty-state p + p {
    font-size: 13px;
    margin-top: 8px;
    opacity: 0.8;
}
.loading-state {
    text-align: center;
    padding: 16px;
    color: var(--text-secondary, #64748b);
    font-size: 14px;
}

/* Garde desktop : s'assurer que les overrides mobile ne leaked sur >=769px */
@media (min-width: 769px) {
    .header {
        flex-direction: row !important;
        align-items: center !important;
    }
    .header-title {
        order: 0 !important;
        width: auto !important;
        display: block !important;
    }
    #header-user-info {
        order: 0 !important;
        padding: 0 !important;
        border-top: none !important;
        width: auto !important;
    }
}

/* ============================================================================
   LANDSCAPE MOBILE — orientation: landscape + max-height
   Les breakpoints width (600px, 768px) ne couvrent pas le cas landscape :
   un iPhone SE en paysage fait 667×375px — width > 600px mais height ~360px.
   Ces règles compensent la hauteur réduite sans toucher au desktop.
   ============================================================================ */

/* Téléphones landscape (hauteur <= 500px) : iPhone SE, Pixel, Galaxy S */
@media (orientation: landscape) and (max-height: 500px) {
    /* Header : compact */
    .header {
        padding: 4px 12px !important;
        gap: 4px !important;
    }
    .header h1 {
        font-size: 14px !important;
    }
    .version-badge, .env-badge, .status-badge {
        font-size: 8px !important;
        padding: 1px 5px !important;
    }

    /* Dashboard : 2 colonnes (la grille passe en 1 col à <=600px width,
       mais en landscape 667px > 600px donc le breakpoint width joue déjà.
       On s'assure qu'on reste à 2 cols même si la width est juste en dessous). */
    #dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    #dashboard-grid > .card {
        min-height: auto !important;
        padding: 10px !important;
    }

    /* Cards générales : padding réduit */
    .card {
        padding: 10px !important;
    }

    /* Opportunités : garder les filtres sur une ligne */
    #card-opportunities .card-header {
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }
    #card-opportunities .card-header h3 {
        flex: 0 0 auto !important;
        font-size: 16px !important;
    }
    .opp-filters-row {
        flex-wrap: nowrap !important;
        gap: 4px !important;
    }
    .filter-opp-select {
        font-size: 11px !important;
        padding: 2px 4px !important;
        height: 26px !important;
    }

    /* Modals : limiter la hauteur pour rester dans le viewport */
    .modal-content, .modal-inner {
        max-height: 85vh !important;
        overflow-y: auto !important;
    }
    .indicators-guide-inner {
        max-height: 85vh !important;
        padding: 16px !important;
        padding-top: 28px !important;
    }

    /* Body : pas de scroll horizontal */
    body {
        overflow-x: hidden;
    }
}

/* Petites tablettes landscape (hauteur 501–600px) : iPad mini portrait-ish, Nexus 7 */
@media (orientation: landscape) and (min-height: 501px) and (max-height: 600px) {
    .header {
        padding: 6px 12px !important;
    }
    #dashboard-grid {
        gap: 10px !important;
    }
    .card {
        padding: 14px !important;
    }
    .modal-content, .modal-inner {
        max-height: 88vh !important;
        overflow-y: auto !important;
    }
}

/* V4.8.198 — Score modes row (ticker-analysis : Momentum vs Phoenix) */
.score-modes-row {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.score-mode-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-secondary, rgba(0,0,0,.04));
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 12px;
}

button.score-mode-badge {
    font: inherit;
    margin: 0;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-height: 44px;
    box-sizing: border-box;
    border: 1px solid transparent;
}

button.score-mode-badge:focus-visible {
    outline: 2px solid var(--accent-primary, #3b82f6);
    outline-offset: 2px;
}
.score-mode-label {
    color: var(--text-secondary, #64748b);
    font-weight: 500;
}
.score-mode-active-badge {
    background: var(--bg-secondary, rgba(0,0,0,.04));
    border: 1px solid var(--accent-primary, #3b82f6);
    opacity: 1;
}
.score-mode-active-badge .score-mode-label { color: var(--text-color, #1e293b); font-weight: 600; }
.score-muted-message {
    color: var(--text-secondary, #666);
}
.score-note-small {
    font-weight: 400;
    opacity: 0.7;
    font-size: 11px;
}
.score-delta-small {
    opacity: 0.65;
    font-weight: 600;
}
.score-delta-note {
    opacity: 0.75;
    font-weight: 500;
}
.score-source-badges {
    display: inline-flex;
    gap: 6px;
    margin-left: 8px;
    vertical-align: middle;
}
.score-source-badge {
    font-size: 11px;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    color: var(--text-secondary, #64748b);
}
.score-quality-badge-row {
    margin-top: 8px;
}
.score-collapsible-reset {
    margin: 0;
}
.score-summary-reset {
    cursor: pointer;
    list-style: none;
}
.score-chevron {
    display: inline-block;
    width: 14px;
    opacity: 0.65;
}
.score-collapsible-body {
    margin-top: 12px;
}

/* Onglets Facteurs de score : voir /web/styles/score-explain-tabs.css (chargé dans index + ticker) */

/* =====================================================================
   Tooltips contextuels — desktop (:hover) + mobile (tap .tooltip-active)
   ===================================================================== */
[data-tooltip] {
    position: relative;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #f8fafc;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    max-width: 220px;
    min-width: 80px;
    pointer-events: none;
    opacity: 0;
    z-index: 200;
    transition: opacity 0.15s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}
/* Petite flèche sous le tooltip */
[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1e293b;
    pointer-events: none;
    opacity: 0;
    z-index: 201;
    transition: opacity 0.15s ease;
}
[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip].tooltip-active::after,
[data-tooltip].tooltip-active::before {
    opacity: 1;
}
/* Éviter que le tooltip déborde sur mobile */
@media (max-width: 480px) {
    [data-tooltip]::after {
        max-width: 180px;
        font-size: 10.5px;
    }
}



/* === dark-mode.css === */
/**
 * Cash Scanner - Dark Mode Styles (shared across all pages)
 * Version: 4.7.17
 */

/* ============================================================================
   CSS VARIABLES (light defaults now in main.css :root — source unique)
   ============================================================================ */

/* Dark mode variables */
html.dark-mode,
body.dark-mode {
    --bg-color: #0d1117;
    --bg-secondary: #161b22;
    --bg-gradient: var(--bg-color);
    --text-color: #e6edf3;
    --text-primary: var(--text-color);
    --text-secondary: #8b949e;
    --card-bg: #21262d;
    --border-color: #30363d;
    --chart-grid-color: rgba(71,85,105,0.3);
    --shadow-color: rgba(0, 0, 0, 0.4);
    --input-bg: #0d1117;
    --input-border: #30363d;
    --accent-primary: #58a6ff;
    --accent-secondary: #60a5fa;
    --accent-success: #3fb950;
    --accent-danger: #f85149;
    --accent-warning: #d29922;
    --accent-teal: #39c5cf;
    --accent-indigo: #7986ff;
    --brief-bg: #161b22;
    --opp-score-bg: rgba(88, 166, 255, 0.15);
    --opp-score-text: #58a6ff;
    --hover-bg: #1c2128;
    --secondary-text: #8b949e;
    --header-bg: #21262d;
    --card-bg-solid: #21262d;
    --success-bg: rgba(63, 185, 80, 0.15);
    --success-text: #3fb950;
    --badge-bg: rgba(88, 166, 255, 0.1);
    --badge-text: #8b949e;
    --msg-error-bg: rgba(248, 81, 73, 0.15);
    --msg-error-text: #f85149;
    --msg-success-bg: rgba(63, 185, 80, 0.15);
    --msg-success-text: #3fb950;
    --msg-info-bg: rgba(88, 166, 255, 0.15);
    --msg-info-text: #58a6ff;
    --warning-bg: rgba(210, 153, 34, 0.15);
    --warning-text: #d29922;
    --msg-warning-bg: rgba(210, 153, 34, 0.15);
    --msg-warning-text: #d29922;
    /* Variables guide indicateurs */
    --guide-heading: #58a6ff;
    --guide-section: #60a5fa;
    --guide-table-row: #0d1117;
    --guide-penalty: #f85149;
    --overlay-bg: rgba(0, 0, 0, 0.7);
    --card-border-radius: 12px;
    /* V4.7.97 — vars signal badges, chart et contextuels */
    --dm-white: #ffffff;            /* texte blanc pur (boutons colorés) */
    --dm-chart-bg: #171717;         /* fond conteneur chart Performance */
    --dm-plotly-text: #c9d1d9;      /* texte axes/légendes Plotly */
    --dm-link-hover: #79c0ff;       /* liens en survol (bleu clair) */
    --dm-star-gold: #f59e0b;        /* étoile favoris + gradient scan */
    --dm-chart-gold: #f2cc60;       /* tracé chart or (Plotly) */
    --dm-sig-support: #fcd34d;      /* badge signal support (jaune clair) */
    --dm-sig-breakout: #6ee7b7;     /* badge signal breakout (vert clair) */
    --dm-sig-macd: #93c5fd;         /* badge signal MACD (bleu clair) */
    --dm-sig-bb: #93c5fd;           /* badge signal BB (bleu clair) */
    --dm-sig-rr: #5eead4;           /* badge signal RR (teal clair) */
    --dm-sig-kst: #a5b4fc;          /* badge signal KST (indigo clair) */
    --dm-sig-risk: #fca5a5;         /* badge signal risk/divergence */
    --dm-badge-gold-text: #3a2000;  /* texte badge gold (fond doré) */
    --dm-badge-green-text: #052a15; /* texte badge green (fond vert) */
    --dm-badge-blue-text: #001a33;  /* texte badge blue (fond bleu) */
    --dm-card-purple: #60a5fa;      /* bordure supérieure carte .purple (bleu) */
    --dm-scan-gradient-end: #f97316; /* fin dégradé bouton scan (orange) */
}

/* V4.7.19 — Score badge color-gradient dark overrides */
body.dark-mode .opp-score[data-score-range="low"] {
    background: var(--badge-bg);
    color: var(--badge-text);
}
body.dark-mode .opp-score[data-score-range="high"] {
    background: rgba(63, 185, 80, 0.15);
    color: var(--accent-success);
}
body.dark-mode .opp-score[data-score-range="excellent"] {
    background: rgba(210, 153, 34, 0.20);
    color: var(--accent-warning);
    font-weight: 700;
}
body.dark-mode .score-mode-m { background: rgba(59, 130, 246, 0.18); color: #60a5fa; border-color: rgba(59, 130, 246, 0.3); }
body.dark-mode .score-mode-p { background: rgba(168, 85, 247, 0.18); color: #c084fc; border-color: rgba(168, 85, 247, 0.3); }
body.dark-mode .score-mode-badge.score-mode-active.score-mode-m { background: rgba(59, 130, 246, 0.28); }
body.dark-mode .score-mode-badge.score-mode-active.score-mode-p { background: rgba(168, 85, 247, 0.28); }
body.dark-mode .score-mode-active-badge { border-color: var(--accent-primary, #60a5fa); }
body.dark-mode .score-mode-active-badge .score-mode-label { color: var(--text-color); }
body.dark-mode .preset-mode-m { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
body.dark-mode .preset-mode-p { background: rgba(168, 85, 247, 0.2); color: #c084fc; }

/* ============================================================================
   BODY STYLES
   ============================================================================ */
/* Fond plein viewport sur html uniquement — le body peut rester à la hauteur du contenu pour limiter le « vide » inutile en bas */
html.dark-mode {
    min-height: 100%;
    background: linear-gradient(180deg, var(--bg-color) 0%, var(--bg-secondary) 100%);
}
html.dark-mode body,
body.dark-mode {
    background: transparent !important;
    min-height: auto;
    color: var(--text-color) !important;
}

/* ============================================================================
   COMMON ELEMENTS
   ============================================================================ */

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

/* Header shadow (V4.7.47 — migré depuis main.css) */
body.dark-mode .header {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Grille et conteneurs - fond transparent pour laisser voir le fond principal */
body.dark-mode .grid,
body.dark-mode #dashboard-grid,
body.dark-mode .container > div:not(.card):not(.header):not(.opportunities):not(.config-section) {
    background: transparent !important;
}

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

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--text-secondary) !important;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15) !important;
}

/* Labels and text */
body.dark-mode label {
    color: var(--text-color) !important;
}

body.dark-mode p,
body.dark-mode span:not(.emoji) {
    color: var(--text-color);
}

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

/* Headings */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--text-color) !important;
}

/* Tables */
body.dark-mode table {
    border-color: var(--border-color) !important;
}

body.dark-mode th {
    background: var(--bg-secondary) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode td {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode tr:hover td {
    background: var(--bg-secondary) !important;
}

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

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

/* Btn box-shadows (V4.7.47 — migré depuis main.css) */
body.dark-mode .btn {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
body.dark-mode .btn:hover {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
body.dark-mode .btn.success:hover {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* Links */
body.dark-mode a {
    color: var(--accent-primary);
}

/* CTA header visiteur : c'est un <a> — sans override le texte reprend --accent-primary
   sur un fond bleu (--accent-secondary) et devient illisible. */
body.dark-mode a.btn-inline.btn-login,
body.dark-mode a.header-login,
body.dark-mode #header-login-btn {
    color: var(--dm-white) !important;
    text-decoration: none;
}
body.dark-mode a.btn-inline.btn-login:hover,
body.dark-mode a.header-login:hover,
body.dark-mode #header-login-btn:hover {
    color: var(--dm-white) !important;
}

/* Popup / toast visiteur « Créer un compte » : <a> avec une seule classe utilitaire
   perd face à `body.dark-mode a` (1 classe + 2 types) — texte bleu sur fond bleu. */
body.dark-mode a.guest-action-cta-btn-primary,
body.dark-mode a.guest-conversion-btn-primary {
    color: var(--dm-white) !important;
    text-decoration: none;
}
body.dark-mode a.guest-action-cta-btn-primary:hover,
body.dark-mode a.guest-conversion-btn-primary:hover {
    color: var(--dm-white) !important;
}

/* CTA mode visiteur — guide indicateurs (panneau score) : accent lisible sur fond sombre */
body.dark-mode.guest-mode button#indicators-guide-btn {
    color: var(--dm-white) !important;
    background: color-mix(in srgb, var(--accent-secondary) 76%, #0d1117) !important;
    border-color: color-mix(in srgb, var(--accent-secondary) 52%, #0d1117) !important;
}
body.dark-mode.guest-mode button#indicators-guide-btn:hover {
    color: var(--dm-white) !important;
    background: color-mix(in srgb, var(--accent-primary) 70%, #0d1117) !important;
    border-color: color-mix(in srgb, var(--accent-primary) 48%, #0d1117) !important;
}

/* Modals */
body.dark-mode .modal,
body.dark-mode .modal-content,
body.dark-mode .dialog {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Modal buttons (V4.7.47 — migré depuis main.css) */
body.dark-mode .modal-button-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-color);
}
body.dark-mode .modal-button-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Alert/Info boxes */
body.dark-mode .alert,
body.dark-mode .info-box,
body.dark-mode .message {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Stats cards with colored backgrounds - keep legibility */
body.dark-mode .stat-positive {
    background: rgba(16, 185, 129, 0.15) !important;
    color: var(--accent-success) !important;
}

body.dark-mode .stat-negative {
    background: rgba(239, 68, 68, 0.15) !important;
    color: var(--accent-danger) !important;
}

/* Override inline styles for dynamically created elements */
body.dark-mode div[style*="background: white"],
body.dark-mode div[style*="background:white"],
body.dark-mode div[style*="background: #fff"],
body.dark-mode div[style*="background:#fff"],
body.dark-mode div[style*="background: var(--dm-white)"],
body.dark-mode div[style*="background:var(--dm-white)"] {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
}

body.dark-mode div[style*="background: #f8fafc"],
body.dark-mode div[style*="background:#f8fafc"],
body.dark-mode div[style*="background: #f5f5f5"],
body.dark-mode div[style*="background:#f5f5f5"],
body.dark-mode div[style*="background: #f8f9fa"],
body.dark-mode div[style*="background:#f8f9fa"] {
    background: var(--bg-secondary) !important;
}

body.dark-mode [style*="color: #333"],
body.dark-mode [style*="color:#333"],
body.dark-mode [style*="color: #1e293b"],
body.dark-mode [style*="color:#1e293b"] {
    color: var(--text-color) !important;
}

body.dark-mode [style*="color: #64748b"],
body.dark-mode [style*="color:#64748b"],
body.dark-mode [style*="color: #666"],
body.dark-mode [style*="color:#666"] {
    color: var(--text-secondary) !important;
}

body.dark-mode [style*="color: #475569"],
body.dark-mode [style*="color:#475569"],
body.dark-mode [style*="color: #6b7280"],
body.dark-mode [style*="color:#6b7280"],
body.dark-mode [style*="color: #999"],
body.dark-mode [style*="color:#999"],
body.dark-mode [style*="color: #94a3b8"],
body.dark-mode [style*="color:#94a3b8"] {
    color: var(--text-secondary) !important;
}

body.dark-mode [style*="color: #2c3e50"],
body.dark-mode [style*="color:#2c3e50"],
body.dark-mode [style*="color: #0f172a"],
body.dark-mode [style*="color:#0f172a"],
body.dark-mode [style*="color: #334155"],
body.dark-mode [style*="color:#334155"],
body.dark-mode [style*="color: #856404"],
body.dark-mode [style*="color:#856404"],
body.dark-mode [style*="color: #1565c0"],
body.dark-mode [style*="color:#1565c0"] {
    color: var(--text-color) !important;
}

body.dark-mode div[style*="background: #e3f2fd"],
body.dark-mode div[style*="background:#e3f2fd"],
body.dark-mode div[style*="background: #fff3cd"],
body.dark-mode div[style*="background:#fff3cd"],
body.dark-mode div[style*="background: #e8f5e8"],
body.dark-mode div[style*="background:#e8f5e8"],
body.dark-mode div[style*="background: #fff8e1"],
body.dark-mode div[style*="background:#fff8e1"],
body.dark-mode div[style*="background: #e5e7eb"],
body.dark-mode div[style*="background:#e5e7eb"],
body.dark-mode div[style*="background: #f1f5f9"],
body.dark-mode div[style*="background:#f1f5f9"],
body.dark-mode div[style*="background: #e2e8f0"],
body.dark-mode div[style*="background:#e2e8f0"],
body.dark-mode div[style*="background: #dcfce7"],
body.dark-mode div[style*="background:#dcfce7"],
body.dark-mode div[style*="background: #fee2e2"],
body.dark-mode div[style*="background:#fee2e2"],
body.dark-mode div[style*="background: #dbeafe"],
body.dark-mode div[style*="background:#dbeafe"] {
    background: var(--bg-secondary) !important;
    color: var(--text-color) !important;
}

/* ============================================================================
   PLOTLY CHARTS DARK MODE
   ============================================================================ */
/* Force Plotly charts background to dark */
body.dark-mode .plotly,
body.dark-mode .js-plotly-plot,
body.dark-mode .plot-container,
body.dark-mode .chart-panel .plotly,
body.dark-mode div[id^="chart-"],
body.dark-mode div[id$="-chart"] {
    background: var(--bg-color) !important;
}

/* Conteneur du graphique Performance portefeuille (Chart.js) : fond sombre */
body.dark-mode div:has(> #performance-chart) {
    background: var(--dm-chart-bg) !important;
    border-radius: 8px;
}

/* Force all Plotly background elements to dark */
body.dark-mode .plotly .bg,
body.dark-mode .plotly rect.bg,
body.dark-mode .js-plotly-plot .bg,
body.dark-mode .plotly .plot,
body.dark-mode .plotly .subplot,
body.dark-mode svg.main-svg,
body.dark-mode .main-svg .bg {
    fill: var(--bg-color) !important;
}

/* Force paper background to dark */
body.dark-mode .plotly rect[style*="fill: rgb(255, 255, 255)"],
body.dark-mode .plotly rect[style*="fill: white"],
body.dark-mode .plotly rect[style*="fill:#fff"] {
    fill: var(--bg-color) !important;
}

/* Text colors for better visibility */
body.dark-mode .plotly text,
body.dark-mode .js-plotly-plot text,
body.dark-mode .plotly .xtick text,
body.dark-mode .plotly .ytick text,
body.dark-mode .plotly .legendtext,
body.dark-mode .plotly .g-xtitle text,
body.dark-mode .plotly .g-ytitle text {
    fill: var(--dm-plotly-text) !important;
}

/* Grid lines subtle but visible */
body.dark-mode .plotly .gridlayer path,
body.dark-mode .plotly .crisp,
body.dark-mode .plotly .xlines-above path,
body.dark-mode .plotly .ylines-above path {
    stroke: var(--card-bg) !important;
    stroke-opacity: 0.5 !important;
}

/* Zero lines more visible */
body.dark-mode .plotly .zerolinelayer path {
    stroke: var(--border-color) !important;
    stroke-width: 1.5 !important;
}

/* Chart modals in dark mode */
body.dark-mode .chart-modal {
    background-color: rgba(0, 0, 0, 0.95) !important;
}

body.dark-mode .modal-content {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
}

body.dark-mode .modal-header {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

body.dark-mode .close-modal {
    color: var(--text-color) !important;
}

body.dark-mode .close-modal:hover {
    color: var(--accent-danger) !important;
}

/* ============================================================================
   TICKER PAGE SPECIFIC DARK MODE
   ============================================================================ */

/* Buttons */
body.dark-mode .btn {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}
html.dark-mode .btn {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

body.dark-mode .btn:hover {
    background: var(--accent-primary) !important;
    color: var(--dm-white) !important;
}
html.dark-mode .btn:hover {
    background: var(--accent-primary) !important;
    color: var(--dm-white) !important;
}

body.dark-mode .btn.primary {
    background: var(--accent-primary) !important;
    color: var(--dm-white) !important;
}

body.dark-mode .btn.secondary {
    background: var(--border-color) !important;
}

body.dark-mode .btn.success {
    background: var(--accent-success) !important;
    color: var(--dm-white) !important;
}

/* Select dropdowns */
body.dark-mode select {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
    color-scheme: dark;
}
body.dark-mode select option {
    background: var(--card-bg);
    color: var(--text-color);
}

/* Preset description badge — visibility dark mode */
body.dark-mode .preset-description-badge {
    color: var(--text-secondary);
    opacity: 0.9;
}

/* Chart panels */
body.dark-mode .chart-panel {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .chart-header {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-color) !important;
}

body.dark-mode .chart-title {
    color: var(--text-color) !important;
}

/* Score panel */
body.dark-mode #score-panel {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .score-section {
    background: var(--bg-secondary) !important;
    border-left-color: var(--accent-primary) !important;
}

body.dark-mode .score-section:hover {
    background: var(--hover-bg) !important;
}

/* Header */
body.dark-mode header {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* ============================================================================
   FAVORITE, PORTFOLIO AND ALERT ICONS - HARMONIZED ACROSS ALL PAGES
   Style identique à ticker.html pour cohérence visuelle
   ============================================================================ */

/* STARS - Favorite icons (ticker.html, index.html, portfolio.html) */
/* Surcharge des styles inline et des styles de index.html avec spécificité maximale */
body.dark-mode #favorite-icon,
body.dark-mode button.watchlist-star,
body.dark-mode .watchlist-star,
body.dark-mode button[class*="watchlist-star"],
body.dark-mode button.watchlist-star[data-ticker],
body.dark-mode button[class*="watchlist-star"][data-ticker],
body.dark-mode button.watchlist-star[style],
body.dark-mode button[class*="watchlist-star"][style],
body.dark-mode .opp-item button.watchlist-star,
body.dark-mode .opp-item .watchlist-star,
body.dark-mode .card button.watchlist-star,
body.dark-mode .card .watchlist-star {
    color: var(--text-color) !important; /* Blanc cassé pour étoile vide */
    filter: none !important;
    -webkit-text-stroke: 0 !important;
}

/* Stars filled state - Or doré pour rempli (comme ticker.html) */
/* Surcharge même les styles inline avec style="color: ..." */
body.dark-mode #favorite-icon.filled,
body.dark-mode button.watchlist-star.filled,
body.dark-mode .watchlist-star.filled,
body.dark-mode button[class*="watchlist-star"].filled,
body.dark-mode button.watchlist-star[data-ticker].filled,
body.dark-mode button[class*="watchlist-star"][data-ticker].filled,
body.dark-mode button.watchlist-star[style*="color"].filled,
body.dark-mode button[class*="watchlist-star"][style*="color"].filled,
body.dark-mode button.watchlist-star[style].filled,
body.dark-mode button[class*="watchlist-star"][style].filled,
body.dark-mode .opp-item button.watchlist-star.filled,
body.dark-mode .opp-item .watchlist-star.filled,
body.dark-mode .card button.watchlist-star.filled,
body.dark-mode .card .watchlist-star.filled {
    color: var(--dm-star-gold) !important; /* Or doré pour étoile remplie */
    filter: none !important;
}

/* Stars hover - Surcharge même les styles inline */
body.dark-mode #toggle-favorite-btn:hover #favorite-icon,
body.dark-mode button.watchlist-star:hover,
body.dark-mode .watchlist-star:hover,
body.dark-mode button[class*="watchlist-star"]:hover,
body.dark-mode button.watchlist-star[data-ticker]:hover,
body.dark-mode button[class*="watchlist-star"][data-ticker]:hover {
    color: var(--accent-primary) !important; /* Bleu au survol */
}

/* BRIEFCASES - Portfolio icons (ticker.html, index.html, portfolio.html) */
/* Surcharge des styles inline et des styles de index.html avec spécificité maximale */
body.dark-mode #portfolio-icon,
body.dark-mode button.portfolio-btn,
body.dark-mode .portfolio-btn,
body.dark-mode button[class*="portfolio-btn"],
body.dark-mode button.portfolio-btn[data-ticker],
body.dark-mode button[class*="portfolio-btn"][data-ticker] {
    filter: none !important;
    -webkit-text-stroke: 0 !important;
}

/* Briefcase empty (not in portfolio) - Blanc avec contour */
body.dark-mode #portfolio-icon:not(.filled),
body.dark-mode button.portfolio-btn:not(.filled),
body.dark-mode .portfolio-btn:not(.filled),
body.dark-mode button[class*="portfolio-btn"]:not(.filled),
body.dark-mode button.portfolio-btn[data-ticker]:not(.filled),
body.dark-mode button[class*="portfolio-btn"][data-ticker]:not(.filled) {
    color: white !important;
    filter: grayscale(100%) brightness(2) contrast(1) !important;
    -webkit-text-stroke: 1px var(--text-color) !important;
}

/* Briefcase filled (in portfolio) - Bleu vif pour visibilité */
/* Surcharge même les styles inline avec style="color: ..." */
body.dark-mode #portfolio-icon.filled,
body.dark-mode button.portfolio-btn.filled,
body.dark-mode .portfolio-btn.filled,
body.dark-mode button[class*="portfolio-btn"].filled,
body.dark-mode button.portfolio-btn[data-ticker].filled,
body.dark-mode button[class*="portfolio-btn"][data-ticker].filled,
body.dark-mode button.portfolio-btn[style*="color"].filled,
body.dark-mode button[class*="portfolio-btn"][style*="color"].filled {
    color: var(--accent-primary) !important; /* Bleu pour rempli */
    filter: grayscale(0%) brightness(1.2) !important;
    -webkit-text-stroke: 0 !important;
}

/* Briefcase hover - Surcharge même les styles inline */
body.dark-mode #toggle-portfolio-btn:hover #portfolio-icon,
body.dark-mode button.portfolio-btn:hover,
body.dark-mode .portfolio-btn:hover,
body.dark-mode button[class*="portfolio-btn"]:hover,
body.dark-mode button.portfolio-btn[data-ticker]:hover,
body.dark-mode button[class*="portfolio-btn"][data-ticker]:hover {
    color: var(--dm-link-hover) !important; /* Bleu clair au survol */
}

/* BELLS - Alert icons (ticker.html, index.html, portfolio.html) */
/* Surcharge des styles inline et des styles de index.html avec spécificité maximale */
body.dark-mode #alert-btn,
body.dark-mode #alert-btn span,
body.dark-mode .bell-icon,
body.dark-mode [class*="bell"],
body.dark-mode [title*="Alerte"],
body.dark-mode [title*="Alerte"] span,
body.dark-mode [title*="alerte"],
body.dark-mode [title*="alerte"] span,
body.dark-mode button[data-action="open-alert"],
body.dark-mode button[data-action="open-alert"] span,
body.dark-mode .alert-btn {
    filter: none !important;
    -webkit-text-stroke: 0 !important;
    opacity: 1 !important;
}

/* Bell empty (no alert) - Gris clair avec contour */
body.dark-mode #alert-btn:not(.has-alert),
body.dark-mode #alert-btn:not(.has-alert) span,
body.dark-mode .bell-icon:not(.active),
body.dark-mode button[data-action="open-alert"]:not(.has-alert),
body.dark-mode button[data-action="open-alert"]:not(.has-alert) span,
body.dark-mode .alert-btn:not(.has-alert) {
    filter: grayscale(100%) brightness(1.2) contrast(1.3) !important;
    -webkit-text-stroke: 1.5px var(--text-secondary) !important;
    color: var(--text-secondary) !important;
}

/* Bell filled (has alert) - Vert */
body.dark-mode #alert-btn.has-alert,
body.dark-mode #alert-btn.has-alert span,
body.dark-mode .bell-icon.active,
body.dark-mode .has-alert,
body.dark-mode .has-alert span,
body.dark-mode .btn.has-alert,
body.dark-mode .btn.has-alert span,
body.dark-mode button[data-action="open-alert"].has-alert,
body.dark-mode button[data-action="open-alert"].has-alert span,
body.dark-mode .alert-btn.has-alert {
    color: var(--accent-success) !important;
    filter: brightness(1.2) !important;
    -webkit-text-stroke: 0 !important;
}

/* Expand buttons */
body.dark-mode .expand-btn {
    color: var(--text-secondary) !important;
}

body.dark-mode .expand-btn:hover {
    color: var(--accent-primary) !important;
    background: transparent !important;
}

/* Ticker info */
body.dark-mode .ticker-isin {
    background: transparent !important;
    color: var(--accent-primary) !important;
}

/* Status messages */
body.dark-mode #status {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* ============================================================================
   CONFIG CARD - Pas de rectangles blancs (heure, minutes, scheduler)
   ============================================================================ */
body.dark-mode #recette-daily-job-hour,
body.dark-mode #recette-daily-job-minute,
body.dark-mode #card-config input,
body.dark-mode #card-config select,
body.dark-mode .config-section input,
body.dark-mode .config-section select {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-color) !important;
}

body.dark-mode #scheduler-status-box {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode #scheduler-status-box span {
    color: var(--text-color) !important;
}

body.dark-mode #scheduler-toggle-btn {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

body.dark-mode #scheduler-toggle-btn:hover {
    background: var(--border-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* ============================================================================
   PORTFOLIO PAGE - INVESTMENT ITEMS DARK MODE
   ============================================================================ */

/* Portfolio items background - Fond sombre uniforme */
/* Surcharge maximale pour forcer le fond sombre même avec styles inline */
body.dark-mode .portfolio-item,
html.dark-mode .portfolio-item,
body.dark-mode div.portfolio-item,
html.dark-mode div.portfolio-item,
body.dark-mode [class*="portfolio-item"],
html.dark-mode [class*="portfolio-item"],
body.dark-mode div[class*="portfolio-item"] {
    background: var(--bg-secondary) !important; /* Fond sombre */
    background-color: var(--bg-secondary) !important; /* Double surcharge */
    border: none !important; /* Pas de bordure */
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
}

body.dark-mode .portfolio-item:hover,
html.dark-mode .portfolio-item:hover,
body.dark-mode div.portfolio-item:hover,
html.dark-mode div.portfolio-item:hover,
body.dark-mode [class*="portfolio-item"]:hover,
html.dark-mode [class*="portfolio-item"]:hover,
body.dark-mode div[class*="portfolio-item"]:hover {
    background: var(--hover-bg) !important; /* Légèrement plus clair au survol */
    background-color: var(--hover-bg) !important; /* Double surcharge */
    border: none !important; /* Pas de bordure */
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
}

/* Lien ticker (AI.PA 📊) : pas de fond contrasté, transparent comme l'arrière-plan */
body.dark-mode .portfolio-item-info h3 a,
body.dark-mode .portfolio-item-info h3 a[href*="ticker.html"] {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--accent-primary) !important;
}

body.dark-mode .portfolio-item-info h3 a:hover {
    background: transparent !important;
    color: var(--dm-link-hover) !important;
}

/* Boutons d'action (Analyser, Modifier, etc.) : fond aligné sur la carte, pas de bloc gris */
body.dark-mode .portfolio-item-actions .btn,
html.dark-mode .portfolio-item-actions .btn,
body.dark-mode .portfolio-item-actions a.btn,
html.dark-mode .portfolio-item-actions a.btn,
body.dark-mode .portfolio-item-actions .btn-success,
html.dark-mode .portfolio-item-actions .btn-success,
body.dark-mode .portfolio-item-actions .btn-secondary,
html.dark-mode .portfolio-item-actions .btn-secondary,
body.dark-mode .portfolio-item-actions .btn-danger,
html.dark-mode .portfolio-item-actions .btn-danger,
body.dark-mode .portfolio-item-actions button.btn {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

body.dark-mode .portfolio-item-actions .btn-success,
html.dark-mode .portfolio-item-actions .btn-success,
body.dark-mode .portfolio-item-actions a.btn-success {
    border-color: var(--accent-success) !important;
    color: var(--accent-success) !important;
}

body.dark-mode .portfolio-item-actions .btn:hover,
html.dark-mode .portfolio-item-actions .btn:hover,
body.dark-mode .portfolio-item-actions a.btn:hover {
    background: var(--card-bg) !important;
    border-color: var(--text-secondary) !important;
    color: var(--text-color) !important;
}

body.dark-mode .portfolio-item-actions .btn-success:hover,
html.dark-mode .portfolio-item-actions .btn-success:hover,
body.dark-mode .portfolio-item-actions a.btn-success:hover {
    border-color: var(--accent-success) !important;
    color: var(--accent-success) !important;
    background: rgba(63, 185, 80, 0.1) !important;
}

/* Icône alerte (cloche) : pas de fond */
body.dark-mode .portfolio-item-actions button[data-action="open-alert"] {
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
}

body.dark-mode .portfolio-item-actions button[data-action="open-alert"]:hover {
    background: transparent !important;
    color: var(--text-color) !important;
}

/* Portfolio item info text */
body.dark-mode .portfolio-item-info h3 {
    color: var(--text-color) !important; /* Titre / ticker zone */
}

body.dark-mode .portfolio-item-info h3 a {
    color: var(--accent-primary) !important; /* Lien ticker reste bleu */
}

body.dark-mode .portfolio-item-info p {
    color: var(--text-secondary) !important; /* Texte secondaire */
}

/* Performance summary cards - Fond sombre */
body.dark-mode #performance-summary > div {
    background: var(--bg-secondary) !important; /* Fond sombre au lieu de blanc */
    border: 1px solid var(--border-color) !important;
}

/* Override inline styles with !important - Surcharge maximale */
body.dark-mode div[style*="background: #f8fafc"],
body.dark-mode div[style*="background:#f8fafc"],
body.dark-mode div[style*="background: #f8fafc;"],
body.dark-mode div[style*="background:#f8fafc;"],
body.dark-mode [style*="background: #f8fafc"],
body.dark-mode [style*="background:#f8fafc"] {
    background: var(--bg-secondary) !important; /* Force fond sombre */
    background-color: var(--bg-secondary) !important; /* Double surcharge */
}

/* Surcharge des couleurs de texte inline */
body.dark-mode [style*="color: #1e293b"],
body.dark-mode [style*="color:#1e293b"],
body.dark-mode [style*="color: #1e293b;"],
body.dark-mode [style*="color:#1e293b;"] {
    color: var(--text-color) !important; /* Texte clair */
}

body.dark-mode [style*="color: #64748b"],
body.dark-mode [style*="color:#64748b"],
body.dark-mode [style*="color: #64748b;"],
body.dark-mode [style*="color:#64748b;"] {
    color: var(--text-secondary) !important; /* Texte secondaire */
}

body.dark-mode #performance-summary > div > div:first-child,
body.dark-mode #performance-summary > div[style*="background"] > div:first-child {
    color: var(--text-secondary) !important; /* Labels en gris */
}

body.dark-mode #performance-summary > div > div:last-child,
body.dark-mode #performance-summary > div[style*="background"] > div:last-child {
    color: var(--text-color) !important; /* Valeurs en blanc */
}

/* Cards dark mode — source unique (ex main.css) */
body.dark-mode .card {
    background: var(--card-bg) !important;
    border-left: 1px solid var(--border-color) !important;
    border-right: 1px solid var(--border-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-top: 3px solid; /* couleur définie par .card.blue/green/etc. ci-dessous */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.03),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Carte "Mes Investissements" : même fond que les items pour pas de contraste */
body.dark-mode .card:has(.portfolio-list) {
    background: var(--bg-secondary) !important;
}

/* Lignes colorées au-dessus des cartes (couleurs vives sur fond sombre) */
body.dark-mode .card.blue { border-top: 3px solid var(--accent-primary) !important; }
body.dark-mode .card.green { border-top: 3px solid var(--accent-success) !important; }
body.dark-mode .card.purple { border-top: 3px solid var(--dm-card-purple) !important; }
body.dark-mode .card.orange { border-top: 3px solid var(--accent-warning) !important; }
body.dark-mode .card.red { border-top: 3px solid var(--accent-danger) !important; }
body.dark-mode .card.teal { border-top: 3px solid var(--accent-teal) !important; }
body.dark-mode .card.indigo { border-top: 3px solid var(--accent-indigo) !important; }

body.dark-mode .card:hover {
    border-color: rgba(88, 166, 255, 0.3) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(88, 166, 255, 0.2) !important;
}

body.dark-mode .card h2 {
    color: var(--text-color) !important; /* Titres en clair */
}

/* Portfolio page header */
body.dark-mode .header {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* Portfolio page benchmark select */
body.dark-mode .benchmark-select {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Performance summary cards - override inline styles */
body.dark-mode #performance-summary > div[style*="background: #f8fafc"],
body.dark-mode #performance-summary > div[style*="background:#f8fafc"] {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

body.dark-mode #performance-summary > div[style*="background: #f8fafc"] > div:first-child,
body.dark-mode #performance-summary > div[style*="background:#f8fafc"] > div:first-child {
    color: var(--text-secondary) !important;
}

body.dark-mode #performance-summary > div[style*="background: #f8fafc"] > div:last-child,
body.dark-mode #performance-summary > div[style*="background:#f8fafc"] > div:last-child {
    color: var(--text-color) !important;
}

/* Opportunity items */
body.dark-mode .opp-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
}

body.dark-mode .opp-item:hover {
    background: rgba(88, 166, 255, 0.05);
    border-color: rgba(88, 166, 255, 0.2);
}

/* Brief display */
body.dark-mode .brief-display {
    background: var(--brief-bg) !important;
    border-left-color: var(--accent-success) !important;
}

/* Version / env / status badges */
body.dark-mode .version-badge {
    background: rgba(88, 166, 255, 0.1);
    color: var(--accent-primary);
    border: 1px solid rgba(88, 166, 255, 0.2);
}
body.dark-mode .env-badge.env-prod {
    background: rgba(63, 185, 80, 0.15);
    color: var(--accent-success);
    border-color: rgba(63, 185, 80, 0.35);
}
body.dark-mode .env-badge.env-rec {
    background: rgba(210, 153, 34, 0.2);
    color: var(--dm-chart-gold);
    border-color: rgba(210, 153, 34, 0.35);
}

body.dark-mode .status-badge {
    background: color-mix(in srgb, var(--accent-success) 15%, transparent);
    color: var(--accent-success);
    border: 1px solid color-mix(in srgb, var(--accent-success) 30%, transparent);
}

/* Scheduler span */
body.dark-mode #scheduler-status span {
    color: var(--text-color) !important;
}

/* Rank badges (V4.7.47 — migré depuis main.css) */
html.dark-mode .rank-badge,
body.dark-mode .rank-badge {
    background: color-mix(in srgb, var(--accent-success) 12%, var(--card-bg));
    color: var(--accent-success);
}
html.dark-mode .rank-badge.rank-top5,
body.dark-mode .rank-badge.rank-top5 {
    background: color-mix(in srgb, var(--accent-warning) 10%, var(--card-bg));
    color: var(--accent-warning);
}



/* Theme toggle buttons (V4.7.62 — migré depuis main.css) */
body.dark-mode #theme-toggle {
    background: linear-gradient(135deg, var(--dm-star-gold) 0%, var(--dm-scan-gradient-end) 100%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

body.dark-mode #theme-toggle:hover {
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
}

body.dark-mode #theme-toggle-mobile {
    background: linear-gradient(135deg, var(--dm-star-gold) 0%, var(--dm-scan-gradient-end) 100%);
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

body.dark-mode #theme-toggle-mobile:hover {
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

/* ==========================================================================
   ui-extras.css groupe 1 — migrés V4.7.69
   Modal + user-info badges + tabs + settings-input option
   ========================================================================== */

/* border additive sur modals (base sans border) */
body.dark-mode .modal-content,
body.dark-mode .settings-modal-content {
    border: 1px solid var(--border-color);
}

body.dark-mode .hidden-card-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* User-name badge */
body.dark-mode .user-name-badge {
    color: var(--text-primary);
}

/* Role badges — couleurs claires pour fond sombre */
body.dark-mode .role-badge.role-admin {
    background: transparent;
    color: var(--dm-sig-risk);
    border-color: rgba(252, 165, 165, 0.35);
}

body.dark-mode .role-badge.role-user {
    background: transparent;
    color: var(--dm-sig-macd);
    border-color: rgba(147, 197, 253, 0.35);
}

body.dark-mode .role-badge {
    border-color: var(--border-color);
}

/* API budgets display */
body.dark-mode #api-budgets-display {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

/* Header user info text */
body.dark-mode #header-user-info span {
    color: var(--text-primary) !important;
}

/* Tabs */
body.dark-mode .tabs {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

body.dark-mode .tab-btn {
    color: var(--text-secondary);
    background: transparent;
}

body.dark-mode .tab-btn.active {
    background: var(--accent-success);
    color: var(--dm-white);
}

body.dark-mode .tab-btn:hover:not(.active) {
    background: var(--card-bg);
    color: var(--text-primary);
}

/* Mobile header border */
@media (max-width: 768px) {
    body.dark-mode #header-user-info {
        border-top-color: var(--border-color) !important;
    }
}

/* select option bg — propriété additive non couverte par les vars de base */
body.dark-mode .settings-input option {
    background: var(--card-bg);
    color: var(--text-primary);
}

/* ==========================================================================
   ui-extras.css groupe 2 — migrés V4.7.70
   Setup badges + signal badges + skeleton
   ========================================================================== */

/* Setup quality badges — text contrast on gradient backgrounds */
body.dark-mode .badge-gold { color: var(--dm-badge-gold-text); }
body.dark-mode .badge-green { color: var(--dm-badge-green-text); }
body.dark-mode .badge-blue { color: var(--dm-badge-blue-text); }

/* Signal badges */
body.dark-mode .sig-badge { background: var(--border-color); color: var(--text-secondary); }
body.dark-mode .sig-support { background: color-mix(in srgb, var(--accent-warning) 20%, var(--card-bg)); color: var(--dm-sig-support); }
body.dark-mode .sig-breakout { background: color-mix(in srgb, var(--accent-success) 20%, var(--card-bg)); color: var(--dm-sig-breakout); border-color: color-mix(in srgb, var(--accent-success) 35%, transparent); }
body.dark-mode .sig-macd { background: color-mix(in srgb, var(--accent-primary) 18%, var(--card-bg)); color: var(--dm-sig-macd); border-color: color-mix(in srgb, var(--accent-primary) 35%, transparent); }
body.dark-mode .sig-bb { background: color-mix(in srgb, var(--accent-secondary) 18%, var(--card-bg)); color: var(--dm-sig-bb); border-color: color-mix(in srgb, var(--accent-secondary) 35%, transparent); }
body.dark-mode .sig-rr { background: color-mix(in srgb, var(--accent-teal) 18%, var(--card-bg)); color: var(--dm-sig-rr); border-color: color-mix(in srgb, var(--accent-teal) 35%, transparent); }
body.dark-mode .sig-kst { background: color-mix(in srgb, var(--accent-indigo) 18%, var(--card-bg)); color: var(--dm-sig-kst); border-color: color-mix(in srgb, var(--accent-indigo) 35%, transparent); }
body.dark-mode .sig-risk { background: color-mix(in srgb, var(--accent-danger) 20%, var(--card-bg)); color: var(--dm-sig-risk); border-color: color-mix(in srgb, var(--accent-danger) 35%, transparent); }

/* Signal key-preset badge (V4.7.12) */
body.dark-mode .sig-badge.sig-key-preset {
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.25), 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Skeleton loading */
body.dark-mode .skeleton {
    background: linear-gradient(90deg, var(--card-bg) 25%, var(--border-color) 50%, var(--card-bg) 75%);
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

/* Étoiles-devise watchlist (dark mode) — couleurs conservées */
body.dark-mode .watchlist-star.filled::before { color: #fbbf24 !important; }
body.dark-mode .watchlist-star.filled::after  { color: #34d399 !important; }

/* Tooltips data-tooltip — dark mode */
body.dark-mode [data-tooltip]::after {
    background: #334155;
    color: #e2e8f0;
    box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}
body.dark-mode [data-tooltip]::before {
    border-top-color: #334155;
}

/* ==========================================================================
   MOBILE RESPONSIVE — dark mode overrides
   ========================================================================== */

/* Autofill override — empêche le fond blanc/jaune du navigateur sur mobile */
body.dark-mode input:-webkit-autofill,
body.dark-mode input:-webkit-autofill:hover,
body.dark-mode input:-webkit-autofill:focus,
body.dark-mode input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
    -webkit-text-fill-color: var(--text-color) !important;
    caret-color: var(--text-color) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Scrollbar webkit — évite le fond clair par défaut sur Chrome/Safari desktop */
body.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
body.dark-mode ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}
body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Barre APK (cohérence bw/wbw) — les vars CSS suffisent, override explicite */
body.dark-mode .mobile-apk-bar {
    background: color-mix(in srgb, var(--accent-success) 10%, var(--bg-secondary));
    border-color: color-mix(in srgb, var(--accent-success) 20%, var(--border-color));
}
body.dark-mode .mobile-apk-bar a {
    color: var(--accent-success);
    background: color-mix(in srgb, var(--accent-success) 15%, var(--card-bg));
}
body.dark-mode .mobile-apk-bar a:hover {
    background: color-mix(in srgb, var(--accent-success) 22%, var(--card-bg));
}

/* Petits écrans (≤480px) : focus ring moins large pour ne pas déborder */
@media (max-width: 480px) {
    body.dark-mode input:focus,
    body.dark-mode select:focus,
    body.dark-mode textarea:focus {
        box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2) !important;
    }
}

/* Très petits écrans (≤380px) : ombre card réduite */
@media (max-width: 380px) {
    body.dark-mode .card {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
    }
}



/* === bw-theme.css === */
/**
 * 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 */
    --mono-score-tabs-bg: var(--bg-secondary);
    --mono-score-tabs-border: var(--border-color);
    --mono-score-tab-active-bg: var(--input-border);
    --mono-score-tab-active-border: var(--border-color);
    --mono-score-tab-active-color: var(--text-color);
}

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

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

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

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

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

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

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

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

/* Score explain tabs — commun bw/wbw, couleurs portées par variables de thème. */
:is(body.bw-mode, body.wbw-mode) .score-explain-tabs {
    background: var(--mono-score-tabs-bg) !important;
    border-color: var(--mono-score-tabs-border) !important;
    box-shadow: none !important;
}
:is(body.bw-mode, body.wbw-mode) .score-explain-tab-btn {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--text-secondary) !important;
    box-shadow: none !important;
}
:is(body.bw-mode, body.wbw-mode) .score-explain-tab-btn:hover {
    color: var(--text-color) !important;
}
:is(body.bw-mode, body.wbw-mode) .score-explain-tab-btn.active {
    background: var(--mono-score-tab-active-bg) !important;
    border-color: var(--mono-score-tab-active-border) !important;
    color: var(--mono-score-tab-active-color) !important;
    box-shadow: none !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(.score-mode-badge):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 button.score-mode-badge:hover {
    background: var(--bg-secondary, rgba(0, 0, 0, 0.06)) !important;
    border-color: var(--input-border) !important;
    color: inherit !important;
}
body.bw-mode .btn:hover,
body.bw-mode button:hover:not(.score-mode-badge),
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;
}

/* 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;
}
body.bw-mode .settings-checkbox:not(:checked),
body.bw-mode input[type="checkbox"].settings-checkbox:not(:checked) {
    background-color: var(--input-bg) !important;
    background-image: none !important;
}
body.bw-mode .settings-checkbox:checked,
body.bw-mode .form-group-checkbox input[type="checkbox"]:checked,
body.bw-mode input[type="checkbox"].settings-checkbox:checked {
    filter: grayscale(1) brightness(0.92) !important;
    background-color: var(--input-border) !important;
    border-color: var(--bw-medium) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6.5 12.3 10.5 16.2 18 8.5'/%3E%3C/svg%3E") !important;
    background-size: 14px 14px !important;
    background-position: center !important;
    background-repeat: no-repeat !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
   ============================================================================ */


/* ============================================================================
   ANALYSE IA PORTEFEUILLE — .portfolio-ai-card (sprint XCV)
   ============================================================================ */
body.bw-mode .ai-score-badge,
body.wbw-mode .ai-score-badge {
    background: var(--border-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--input-border) !important;
}
body.bw-mode .portfolio-ai-card,
body.wbw-mode .portfolio-ai-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
body.bw-mode .ai-section-title,
body.wbw-mode .ai-section-title {
    color: var(--text-secondary) !important;
}
body.bw-mode #portfolio-ai-error,
body.wbw-mode #portfolio-ai-error {
    color: var(--text-secondary) !important;
}

/* ============================================================================
   PORTFOLIO P&L — couleurs positif/négatif neutralisées (sprint XCV)
   ============================================================================ */
body.bw-mode .pnl-positive, body.bw-mode .profit-positive, body.bw-mode .return-positive {
    color: var(--accent-primary) !important; font-weight: 600;
}
body.bw-mode .pnl-negative, body.bw-mode .profit-negative, body.bw-mode .return-negative {
    color: var(--text-secondary) !important; font-weight: 600;
}
body.wbw-mode .pnl-positive, body.wbw-mode .profit-positive, body.wbw-mode .return-positive {
    color: var(--wbw-score-good) !important; font-weight: 600;
}
body.wbw-mode .pnl-negative, body.wbw-mode .profit-negative, body.wbw-mode .return-negative {
    color: var(--wbw-score-danger) !important; font-weight: 600;
}

/* ============================================================================
   PILLS ADMIN/ACTIF (usage.html) — neutralisation couleurs vives (sprint XCV)
   ============================================================================ */
body.bw-mode .badge-active, body.bw-mode .user-badge-active {
    background: var(--bw-medium) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--input-border) !important;
}
body.bw-mode .badge-inactive, body.bw-mode .user-badge-inactive {
    background: var(--border-color) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--input-border) !important;
}


/* === wbw-theme.css === */
/**
 * Cash Scanner - Theme White B&W (wbw-mode) - V4.5.253
 * .wbw-mode : fond blanc pur, texte noir pur — monochromatique, impression, WCAG AAA
 * Extrait de bw-theme.css (V4.5.119)
 */

/* ============================================================================
   THÈME WHITE B&W (wbw-mode) — V4.5.41
   Fond blanc pur, texte noir pur, zéro accent coloré
   Usage : impression, présentations, accessibilité WCAG AAA
   ============================================================================ */

/* Variables WBW */
html.wbw-mode,
body.wbw-mode {
    --bg-color: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-gradient: var(--bg-color);
    --hover-bg: #f0f0f0;
    --text-color: #111111;
    --text-primary: #111111;
    --text-secondary: #555555;
    --card-bg: #ffffff;
    --border-color: #d4d4d4;
    --chart-grid-color: rgba(180,180,180,0.4);
    --shadow-color: rgba(0, 0, 0, 0.08);
    --input-bg: #ffffff;
    --input-border: #aaaaaa;
    --accent-primary: #222222;
    --accent-secondary: #525252;
    --accent-success: #16a34a;
    --accent-danger: #dc2626;
    --accent-warning: #d97706;
    --opp-score-bg: #f0f0f0;
    --opp-score-text: #111111;
    --brief-bg: #f8f8f8;
    --secondary-text: #555555;
    --header-bg: #ffffff;
    --card-bg-solid: #ffffff;
    --success-bg: #f0f0f0;
    --success-text: #111111;
    --badge-bg: #eeeeee;
    --badge-text: #333333;
    --msg-error-bg: #f5f5f5;
    --msg-error-text: #222222;
    --msg-success-bg: #f5f5f5;
    --msg-success-text: #222222;
    --msg-info-bg: #f0f0f0;
    --msg-info-text: #111111;
    --warning-bg: #fefce8;
    --warning-text: #713f12;
    --msg-warning-bg: #fefce8;
    --msg-warning-text: #713f12;
    /* Variables guide indicateurs */
    --guide-heading: #111111;
    --guide-section: #333333;
    --guide-table-row: #f5f5f5;
    --guide-penalty: #111111;
    --overlay-bg: rgba(0, 0, 0, 0.4);
    /* Nouvelles vars DA-D (V4.7.87) */
    --text-hover: #000000;
    --text-dimmed: #444444;
    --text-muted: #888888;
    --border-subtle: #cccccc;
    --skeleton-from: #e8e8e8;
    --score-low-text: #737373;
    --score-high-bg: #e5e5e5;
    --score-high-text: #171717;
    --score-excellent-bg: #262626;
    --score-excellent-text: #fafafa;
    --delete-hover-bg: #e0e0e0;
    --card-border-radius: 4px; /* Intentionnel : coins nets pour impression/WCAG (vs 12px autres thèmes) */
    /* Vars UI buttons et badges spécifiques wbw-mode */
    --wbw-btn-secondary: #e5e5e5;   /* fond boutons secondaires et badges */
    --wbw-btn-dark: #262626;         /* hover foncé bouton settings */
    --wbw-btn-medium: #525252;       /* fond bouton logout */
    --wbw-btn-hover: #404040;        /* hover bouton logout */
    --wbw-white: #ffffff;            /* texte blanc sur fonds foncés */
    --wbw-sig-risk-bg: #f5e5e5;      /* fond signal risk (rose pâle) */
    --wbw-sig-risk-text: #5c1a1a;    /* texte signal risk (rouge sombre) */
    --wbw-sig-risk-border: #d4c0c0;  /* bordure signal risk */
    /* V4.8.20 — vars score couleurs accessibles WCAG AA (wbw) */
    --wbw-score-good: #16a34a;       /* score-good texte vert foncé */
    --wbw-score-warning: #d97706;    /* score-warning texte ambre foncé */
    --wbw-score-danger: #dc2626;     /* score-danger texte rouge */
    /* 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);
    --mono-score-tabs-bg: var(--bg-secondary);
    --mono-score-tabs-border: var(--input-border);
    --mono-score-tab-active-bg: var(--text-color);
    --mono-score-tab-active-border: var(--text-color);
    --mono-score-tab-active-color: var(--bg-color);
}

/* NOTE : body, cards, grid, inputs, labels, tables, .modal-content communs
   à bw-mode et wbw-mode sont désormais définis dans bw-theme.css
   (section "MONOCHROME COMMUN") — ne pas redéfinir ici. */

body.wbw-mode input[type="checkbox"],
body.wbw-mode input[type="radio"],
body.wbw-mode select {
    accent-color: var(--badge-text) !important;
}

body.wbw-mode input::placeholder,
body.wbw-mode textarea::placeholder {
    color: var(--text-secondary);
}

body.wbw-mode input:focus,
body.wbw-mode select:focus,
body.wbw-mode textarea:focus,
body.wbw-mode .settings-input:focus {
    border-color: var(--text-color) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--text-color) 15%, transparent) !important;
    outline: none;
}

/* Boutons — gris anthracite sur blanc
   EXCLUSIONS directes dans :not() — PAS d'ID dans :not() (ajoute (1,0,0) à la spécificité,
   rendant impossible tout override button#id à (1,1,2)).
   Icônes/close/modales sont exclus par classe ou attribut uniquement. */
body.wbw-mode .btn:not(.icon-only),
body.wbw-mode button:not(.modal-close):not(.settings-modal-close):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(.score-mode-badge):not([data-action="open-alert"]):not([data-action="close-modal"]):not([style*="background: none"]):not([style*="background:none"]) {
    background: var(--accent-primary) !important;
    color: var(--bg-color) !important;
    border-color: var(--accent-primary) !important;
}
body.wbw-mode .btn:not(.icon-only):hover,
body.wbw-mode button:not(.modal-close):not(.settings-modal-close):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(.score-mode-badge):not([data-action="open-alert"]):not([data-action="close-modal"]):not([style*="background: none"]):not([style*="background:none"]):hover {
    background: var(--text-color) !important;
    border-color: var(--text-color) !important;
}
body.wbw-mode .btn-secondary,
body.wbw-mode button.secondary {
    background: var(--card-bg) !important;
    color: var(--accent-primary) !important;
    border-color: var(--input-border) !important;
}

/* Modales */
body.wbw-mode .modal,
body.wbw-mode .modal-content,
body.wbw-mode .dialog,
body.wbw-mode .settings-modal-content {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}
body.wbw-mode .modal-close,
body.wbw-mode .settings-modal-close {
    color: var(--text-secondary) !important;
    background: transparent !important;
}

/* Score badges */
body.wbw-mode .opp-score {
    background: var(--opp-score-bg) !important;
    color: var(--opp-score-text) !important;
}
/* V4.7.19 — Score gradient wbw-mode (monochromatique clair : intensité croissante) */
body.wbw-mode .opp-score[data-score-range="low"]      { background: var(--bg-secondary) !important; color: var(--score-low-text) !important; font-weight: 400; }
body.wbw-mode .opp-score[data-score-range="mid"]      { background: var(--opp-score-bg) !important; color: var(--opp-score-text) !important; }
body.wbw-mode .opp-score[data-score-range="high"]     { background: var(--score-high-bg) !important; color: var(--score-high-text) !important; }
body.wbw-mode .opp-score[data-score-range="excellent"]{ background: var(--score-excellent-bg) !important; color: var(--score-excellent-text) !important; font-weight: 700; }
body.wbw-mode .rank-badge,
body.wbw-mode .rank-top5 {
    background: var(--badge-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--input-border) !important;
}

/* Setup badges (gold/green/blue → gris en WBW) */
body.wbw-mode .badge-gold,
body.wbw-mode .badge-green,
body.wbw-mode .badge-blue {
    background: var(--badge-bg) !important;
    color: var(--accent-primary) !important;
}

/* Signal badges */
body.wbw-mode .sig-badge { background: var(--badge-bg) !important; color: var(--badge-text) !important; }
body.wbw-mode .sig-support { background: var(--bg-secondary) !important; color: var(--accent-primary) !important; }

/* Toasts (zéro couleur) */
body.wbw-mode .toast.success,
body.wbw-mode .toast.error,
body.wbw-mode .toast.info,
body.wbw-mode .alert-toast--info,
body.wbw-mode .alert-toast--success,
body.wbw-mode .alert-toast--warning,
body.wbw-mode .alert-toast--error {
    background: var(--accent-primary) !important;
    color: var(--bg-color) !important;
    border-left: 3px solid var(--input-border) !important;
}

/* Skeleton shimmer en WBW */
body.wbw-mode .skeleton {
    background: linear-gradient(90deg, var(--skeleton-from) 25%, var(--hover-bg) 50%, var(--skeleton-from) 75%);
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

/* Links */
body.wbw-mode a { color: var(--text-color); text-decoration: underline; }
body.wbw-mode a:hover { color: var(--text-hover); }

/* Header */
body.wbw-mode .header {
    background: var(--bg-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
body.wbw-mode .username-pill {
    background: var(--hover-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}
body.wbw-mode .role-badge.role-admin {
    color: var(--text-color) !important;
    border-color: rgba(0,0,0,0.3) !important;
}
body.wbw-mode .role-badge.role-user {
    color: var(--text-dimmed) !important;
    border-color: rgba(0,0,0,0.2) !important;
}
body.wbw-mode .portfolio-link {
    color: var(--accent-primary) !important;
    border-color: rgba(0,0,0,0.25) !important;
}

/* Icônes d'action (favoris, portfolio, alerte) */
body.wbw-mode .watchlist-star,
body.wbw-mode #toggle-favorite-btn,
body.wbw-mode #toggle-portfolio-btn,
body.wbw-mode #alert-btn {
    filter: grayscale(1) !important;
    background: transparent !important;
    border: none !important;
}

/* Charts */
body.wbw-mode .chart-panel,
body.wbw-mode .chart-header {
    background: var(--bg-color) !important;
    border-color: var(--border-color) !important;
}
body.wbw-mode .chart-title { color: var(--text-color) !important; }
body.wbw-mode .score-section { border-left-color: var(--input-border) !important; }
body.wbw-mode .chart-modal {
    background: rgba(0, 0, 0, 0.6) !important;
}

/* Score panel (ticker) */
body.wbw-mode #score-panel {
    background: var(--brief-bg) !important;
    border-color: var(--border-color) !important;
}

/* Pas d'ombres */
body.wbw-mode .card,
body.wbw-mode .opportunities,
body.wbw-mode .opp-item,
body.wbw-mode .modal,
body.wbw-mode .modal-content,
body.wbw-mode .btn,
body.wbw-mode button,
body.wbw-mode input,
body.wbw-mode select,
body.wbw-mode textarea,
body.wbw-mode .portfolio-item {
    box-shadow: none !important;
}

/* Emojis : désaturation (B&W fonctionnel, conserve les formes) */
body.wbw-mode img.emoji { filter: grayscale(1) opacity(0.7); }

/* Override styles inline (éléments créés dynamiquement en JS) */
body.wbw-mode div[style*="background: #f8fafc"],
body.wbw-mode div[style*="background:#f8fafc"],
body.wbw-mode div[style*="background: white"],
body.wbw-mode div[style*="background:white"],
body.wbw-mode div[style*="background: #fff"],
body.wbw-mode div[style*="background:#fff"],
body.wbw-mode div[style*="background: #ffffff"],
body.wbw-mode div[style*="background:#ffffff"] {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
}
body.wbw-mode div[style*="color: #1e293b"],
body.wbw-mode div[style*="color:#1e293b"],
body.wbw-mode div[style*="color: #64748b"],
body.wbw-mode div[style*="color:#64748b"] {
    color: var(--badge-text) !important;
}

/* Mobile header */
@media (max-width: 768px) {
    body.wbw-mode #header-user-info {
        border-top-color: var(--border-color) !important;
    }
}

/* ============================================================================
   WBW — Audit complet V4.5.48
   Tous les éléments manquants : boutons, badges, charts, pages, portfolio…
   ============================================================================ */

/* --- Bouton theme toggle --- */
body.wbw-mode #theme-toggle,
body.wbw-mode #theme-toggle-mobile {
    background: var(--text-color) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    color: var(--bg-color) !important;
}
body.wbw-mode #theme-toggle:hover,
body.wbw-mode #theme-toggle-mobile:hover {
    background: var(--badge-text) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    transform: none !important;
}

/* --- Bordures colorées des cartes → gris neutre --- */
body.wbw-mode .card {
    border-left: 1px solid var(--border-color) !important;
    border-right: 1px solid var(--border-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
body.wbw-mode .card.blue,
body.wbw-mode .card.green,
body.wbw-mode .card.purple,
body.wbw-mode .card.orange,
body.wbw-mode .card.red,
body.wbw-mode .card.teal,
body.wbw-mode .card.indigo { border-top-color: var(--text-muted) !important; }
body.wbw-mode .card:hover {
    border-color: var(--input-border) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

/* Carte contenant la portfolio-list */
body.wbw-mode .card:has(.portfolio-list) { background: var(--brief-bg) !important; }

/* --- Boutons variantes colorées --- */
body.wbw-mode .btn.success,
body.wbw-mode .btn.success:not(:disabled) { background: var(--badge-text) !important; color: var(--bg-color) !important; }
body.wbw-mode .btn.success:hover { background: var(--text-color) !important; }
body.wbw-mode .btn.warning,
body.wbw-mode .btn.warning:not(:disabled) { background: var(--text-secondary) !important; color: var(--bg-color) !important; }
body.wbw-mode .btn.warning:hover { background: var(--badge-text) !important; }
body.wbw-mode .btn.secondary,
body.wbw-mode button.secondary { background: var(--text-secondary) !important; color: var(--bg-color) !important; border-color: var(--text-secondary) !important; }
body.wbw-mode .btn.secondary:hover { background: var(--text-secondary) !important; }
body.wbw-mode .btn.primary { background: var(--text-color) !important; color: var(--bg-color) !important; }
body.wbw-mode .btn.primary:hover { background: var(--accent-primary) !important; }

/* --- Bouton retour --- */
body.wbw-mode .btn-back {
    background: transparent !important;
    border: none !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
}
body.wbw-mode .btn-back:hover { background: transparent !important; text-decoration: underline !important; }

/* --- Modal buttons --- */
body.wbw-mode .modal-button-primary {
    background: var(--accent-primary) !important;
    color: var(--bg-color) !important;
}
body.wbw-mode .modal-button-primary:hover { background: var(--text-color) !important; }
body.wbw-mode .modal-button-secondary {
    background: var(--bg-secondary) !important;
    color: var(--accent-primary) !important;
}
body.wbw-mode .modal-button-secondary:hover { background: var(--border-color) !important; }

/* --- Messages (erreur / succès / info) --- */
body.wbw-mode .alert,
body.wbw-mode .message {
    background: var(--bg-secondary) !important;
    border-color: var(--input-border) !important;
    color: var(--text-color) !important;
}
body.wbw-mode .message.error { background: var(--hover-bg) !important; color: var(--accent-primary) !important; }
body.wbw-mode .message.success { background: var(--hover-bg) !important; color: var(--accent-primary) !important; }
body.wbw-mode .message.info { background: var(--bg-secondary) !important; color: var(--accent-primary) !important; }
body.wbw-mode .message.loading { background: var(--bg-secondary) !important; color: var(--accent-primary) !important; }

/* --- Spinner --- */
body.wbw-mode .spinner {
    border-color: rgba(0, 0, 0, 0.1) !important;
    border-top-color: var(--badge-text) !important;
}

/* --- Score ajusté intra-secteur --- */
body.wbw-mode .score-adj { color: var(--text-secondary) !important; background: var(--hover-bg) !important; }

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

/* --- Bouton collapse/expand --- */
body.wbw-mode .collapse-btn {
    background: var(--bg-secondary) !important;
    color: var(--accent-primary) !important;
    border-color: transparent !important;
}
body.wbw-mode .collapse-btn:hover { background: var(--border-color) !important; transform: none !important; }

/* --- Brief display --- */
body.wbw-mode .brief-display {
    background: var(--brief-bg) !important;
    color: var(--text-color) !important;
    border-left: 3px solid var(--input-border) !important;
}
body.wbw-mode .brief-display a { color: var(--badge-text) !important; }

/* --- Autocomplete / suggestions --- */
body.wbw-mode #search-suggestions,
body.wbw-mode div[id$="-suggestions"] {
    background: var(--bg-color) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
body.wbw-mode .search-suggestion-item {
    color: var(--text-color) !important;
    border-bottom-color: var(--badge-bg) !important;
    background: var(--bg-color) !important;
}
body.wbw-mode .search-suggestion-item:hover,
body.wbw-mode .search-suggestion-item.active {
    background: var(--hover-bg) !important;
    color: var(--text-color) !important;
}

/* --- Scheduler / Config --- */
body.wbw-mode #scheduler-status-box {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}
body.wbw-mode #scheduler-status-box span,
body.wbw-mode #scheduler-status span { color: var(--text-color) !important; }
body.wbw-mode #scheduler-toggle-btn {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}
body.wbw-mode #scheduler-toggle-btn:hover { background: var(--score-high-bg) !important; }
body.wbw-mode #recette-daily-job-hour,
body.wbw-mode #recette-daily-job-minute,
body.wbw-mode #card-config input,
body.wbw-mode #card-config select,
body.wbw-mode .config-section input,
body.wbw-mode .config-section select {
    background: var(--bg-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* --- Scrollbars --- */
body.wbw-mode {
    scrollbar-color: var(--input-border) var(--bg-secondary);
    scrollbar-width: thin;
}
body.wbw-mode ::-webkit-scrollbar { width: 6px; height: 6px; }
body.wbw-mode ::-webkit-scrollbar-track { background: var(--bg-secondary); }
body.wbw-mode ::-webkit-scrollbar-thumb { background: var(--input-border); border-radius: 3px; }
body.wbw-mode ::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* --- Badges mobile / ligne prix --- */
body.wbw-mode .filters-badge { background: var(--badge-text) !important; color: var(--bg-color) !important; }
body.wbw-mode .opp-price-line { color: var(--text-secondary) !important; }

/* --- Bloc "Modèle actuel" (inline style violet/purple) --- */
body.wbw-mode #model-display {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}
body.wbw-mode div[style*="rgba(139, 92, 246"],
body.wbw-mode div[style*="rgba(59, 130, 246"],
body.wbw-mode div[style*="rgba(16, 185, 129"],
body.wbw-mode div[style*="rgba(239, 68, 68"],
body.wbw-mode div[style*="rgba(245, 158, 11"] {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* --- Icônes étoiles / portefeuille / cloche : grayscale strict --- */
body.wbw-mode .watchlist-star { color: var(--badge-text) !important; filter: none !important; }
body.wbw-mode .watchlist-star.filled { color: var(--text-color) !important; }
body.wbw-mode .watchlist-star:hover { color: var(--text-hover) !important; }
body.wbw-mode .portfolio-btn:not(.filled) { color: var(--text-secondary) !important; filter: grayscale(1) !important; }
body.wbw-mode .portfolio-btn.filled { color: var(--text-color) !important; filter: none !important; }
body.wbw-mode #alert-btn,
body.wbw-mode .alert-btn { filter: grayscale(1) !important; }

/* --- Plotly charts WBW (fond blanc, texte sombre, grilles légères) --- */
body.wbw-mode .plotly,
body.wbw-mode .js-plotly-plot,
body.wbw-mode .plot-container,
body.wbw-mode div[id^="chart-"],
body.wbw-mode div[id$="-chart"] { background: var(--bg-color) !important; }
body.wbw-mode .plotly .bg,
body.wbw-mode .plotly rect.bg,
body.wbw-mode .js-plotly-plot .bg,
body.wbw-mode .main-svg .bg { fill: var(--bg-color) !important; }
body.wbw-mode .plotly text,
body.wbw-mode .js-plotly-plot text,
body.wbw-mode .plotly .xtick text,
body.wbw-mode .plotly .ytick text,
body.wbw-mode .plotly .legendtext,
body.wbw-mode .plotly .g-xtitle text,
body.wbw-mode .plotly .g-ytitle text { fill: var(--badge-text) !important; }
body.wbw-mode .plotly .gridlayer path,
body.wbw-mode .plotly .crisp { stroke: var(--border-color) !important; stroke-opacity: 0.8 !important; }
body.wbw-mode .plotly .zerolinelayer path { stroke: var(--input-border) !important; }
body.wbw-mode .chart-modal { background: rgba(0, 0, 0, 0.6) !important; }
/* Conteneur Chart.js performance */
body.wbw-mode div:has(> #performance-chart) {
    background: var(--bg-color) !important;
    border-radius: 8px;
}

/* --- Portfolio items WBW --- */
body.wbw-mode .portfolio-item,
body.wbw-mode div.portfolio-item {
    background: var(--bg-color) !important;
    border: none !important;
    border-bottom: 1px solid var(--badge-bg) !important;
}
body.wbw-mode .portfolio-item:hover,
body.wbw-mode div.portfolio-item:hover { background: var(--brief-bg) !important; }
body.wbw-mode .portfolio-item-info h3 { color: var(--text-color) !important; }
body.wbw-mode .portfolio-item-info h3 a {
    color: var(--badge-text) !important;
    text-decoration: underline !important;
    background: transparent !important;
}
body.wbw-mode .portfolio-item-info h3 a:hover { color: var(--text-hover) !important; }
body.wbw-mode .portfolio-item-info p { color: var(--text-secondary) !important; }
body.wbw-mode .portfolio-item-actions .btn,
body.wbw-mode .portfolio-item-actions a.btn,
body.wbw-mode .portfolio-item-actions button.btn {
    background: transparent !important;
    border: 1px solid var(--input-border) !important;
    color: var(--badge-text) !important;
}
body.wbw-mode .portfolio-item-actions .btn:hover,
body.wbw-mode .portfolio-item-actions a.btn:hover { background: var(--hover-bg) !important; }
body.wbw-mode .portfolio-item-actions button[data-action="open-alert"] {
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
}

/* Performance summary cards */
body.wbw-mode #performance-summary > div {
    background: var(--brief-bg) !important;
    border: 1px solid var(--border-color) !important;
}
body.wbw-mode #performance-summary > div > div:first-child,
body.wbw-mode #performance-summary > div[style*="background"] > div:first-child { color: var(--text-secondary) !important; }
body.wbw-mode #performance-summary > div > div:last-child,
body.wbw-mode #performance-summary > div[style*="background"] > div:last-child { color: var(--text-color) !important; }

/* --- Ticker page: score sections, isin, status --- */
body.wbw-mode .score-section {
    background: var(--brief-bg) !important;
    border-left-color: var(--text-muted) !important;
}
body.wbw-mode .score-section:hover { background: var(--hover-bg) !important; }
body.wbw-mode .ticker-isin { background: transparent !important; color: var(--badge-text) !important; }
body.wbw-mode #status {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}
body.wbw-mode .expand-btn { color: var(--text-secondary) !important; }
body.wbw-mode .expand-btn:hover { color: var(--text-color) !important; background: transparent !important; }

/* --- Surcharges inline background: #f8fafc (portfolio summary, divers) --- */
body.wbw-mode [style*="background: #f8fafc"],
body.wbw-mode [style*="background:#f8fafc"],
body.wbw-mode [style*="background: #f8fafc;"],
body.wbw-mode [style*="background:#f8fafc;"] {
    background: var(--brief-bg) !important;
}
body.wbw-mode [style*="color: #1e293b"],
body.wbw-mode [style*="color:#1e293b"] { color: var(--text-color) !important; }
body.wbw-mode [style*="color: #64748b"],
body.wbw-mode [style*="color:#64748b"] { color: var(--text-secondary) !important; }

/* --- Login page WBW --- */
body.wbw-mode .login-container {
    background: var(--bg-color) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
}
body.wbw-mode .logo h1 { color: var(--text-color) !important; }
body.wbw-mode .divider,
body.wbw-mode .register-link { color: var(--text-secondary) !important; }
body.wbw-mode .form-group input:focus,
body.wbw-mode .login-container input:focus {
    border-color: var(--badge-text) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08) !important;
}
body.wbw-mode .auth-tab.active { color: var(--text-color) !important; border-bottom-color: var(--badge-text) !important; }
body.wbw-mode .btn-login {
    background: var(--accent-primary) !important;
    color: var(--bg-color) !important;
    border: 1px solid var(--accent-primary) !important;
}
body.wbw-mode .btn-login:hover { background: var(--text-hover) !important; }
body.wbw-mode .btn-social,
body.wbw-mode .btn-google {
    background: var(--bg-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}
body.wbw-mode .success-message {
    background: var(--hover-bg) !important;
    border-left-color: var(--text-secondary) !important;
    color: var(--text-color) !important;
}
body.wbw-mode .error-message {
    background: var(--hover-bg) !important;
    border-left-color: var(--text-muted) !important;
    color: var(--accent-primary) !important;
}
body.wbw-mode .biometric-options {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--badge-text) !important;
}
body.wbw-mode .biometric-options .biometric-login-link { color: var(--text-color) !important; }
body.wbw-mode .biometric-options .biometric-icon-btn {
    background: var(--bg-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}
body.wbw-mode #cold-start-overlay { background: var(--bg-color) !important; color: var(--text-color) !important; }

/* --- Opportunités / Favoris --- */
body.wbw-mode .opportunities {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
body.wbw-mode .opp-item { border-bottom-color: var(--badge-bg) !important; }
body.wbw-mode .opp-item:hover { background-color: var(--bg-secondary) !important; }

/* --- Header ombre légère --- */
body.wbw-mode .header { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important; }

/* ============================================================================
   WBW — V4.5.50 : Spécificité boutons icônes + gradients ticker
   Ces règles doivent être APRÈS la règle générale body.wbw-mode button:not(...)
   body.wbw-mode button.classe = (0,2,2) = même spécificité, mais position TARDIVE → gagne
   ============================================================================ */

/* Boutons icônes WBW — transparents.
   NOTE : le sélecteur général a été modifié pour les EXCLURE directement (voir au-dessus).
   Ces règles sont conservées comme filet de sécurité. */
body.wbw-mode button.opp-action-btn,
body.wbw-mode button.watchlist-star,
body.wbw-mode .opp-item button.watchlist-star,
body.wbw-mode .card button.watchlist-star,
body.wbw-mode button.portfolio-btn,
body.wbw-mode .opp-item button.portfolio-btn,
body.wbw-mode .card button.portfolio-btn,
body.wbw-mode button.expand-btn,
body.wbw-mode button#toggle-favorite-btn,
body.wbw-mode button#toggle-portfolio-btn,
body.wbw-mode button#alert-btn,
body.wbw-mode button[data-action="open-alert"],
body.wbw-mode button.has-alert {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--badge-text) !important;
}
body.wbw-mode button.opp-action-btn:hover,
body.wbw-mode button.watchlist-star:hover,
body.wbw-mode button.portfolio-btn:hover,
body.wbw-mode button.expand-btn:hover,
body.wbw-mode button#toggle-favorite-btn:hover,
body.wbw-mode button#toggle-portfolio-btn:hover,
body.wbw-mode button#alert-btn:hover,
body.wbw-mode button[data-action="open-alert"]:hover {
    background: transparent !important;
    color: var(--text-hover) !important;
}

/* Collapse btn WBW — gris clair (override #222222 général) */
body.wbw-mode button.collapse-btn {
    background: var(--skeleton-from) !important;
    color: var(--badge-text) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: none !important;
}
body.wbw-mode button.collapse-btn:hover {
    background: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Bouton Retour WBW — sans rectangle (texte seul, transparence) */
body.wbw-mode button.btn-back,
body.wbw-mode a.btn-back {
    background: transparent !important;
    border: none !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
}
body.wbw-mode button.btn-back:hover,
body.wbw-mode a.btn-back:hover {
    background: transparent !important;
    text-decoration: underline !important;
}


/* ============================================================================
   WBW — Ticker page : gradients violets à neutraliser
   ============================================================================ */

/* h1 "Graphique" : gradient clip text → texte noir pur */
body.wbw-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;
}

/* Barre violette 3px en haut des chart-panel */
body.wbw-mode .chart-panel::before {
    background: var(--border-subtle);
}

/* .chart-panel hover : pas de translate en WBW */
body.wbw-mode .chart-panel:hover {
    transform: none !important;
}

/* En-tête score panel (fond violet dégradé → gris foncé) */
body.wbw-mode .score-header {
    background: var(--badge-text) !important;
    color: var(--bg-color) !important;
}
body.wbw-mode .score-header h3,
body.wbw-mode .score-header span,
body.wbw-mode .score-header p {
    color: var(--bg-color) !important;
    -webkit-text-fill-color: var(--bg-color) !important;
}
body.wbw-mode .global-score {
    color: var(--bg-color) !important;
    -webkit-text-fill-color: var(--bg-color) !important;
    text-shadow: none !important;
}

/* Bouton Analyse IA dans la toolbar ticker — fond clair pour lisibilité WBW */
body.wbw-mode button#ai-analysis-btn,
body.wbw-mode #ai-analysis-btn {
    background: var(--bg-secondary) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--text-secondary) !important;
    box-shadow: none !important;
}

/* ============================================================================
   WBW — indicators.html : cartes et nav-items avec gradient inline violet/rose
   ============================================================================ */
body.wbw-mode .indicator-card {
    background: var(--badge-text) !important;
    color: var(--bg-color) !important;
    box-shadow: none !important;
}
body.wbw-mode .indicator-card h4,
body.wbw-mode .indicator-card p,
body.wbw-mode .indicator-card span {
    color: var(--bg-color) !important;
    -webkit-text-fill-color: var(--bg-color) !important;
}
body.wbw-mode .nav-item {
    background: var(--text-dimmed) !important;
    color: var(--bg-color) !important;
    box-shadow: none !important;
}
body.wbw-mode .nav-item h3,
body.wbw-mode .nav-item p { color: var(--bg-color) !important; }
body.wbw-mode .nav-item:hover {
    background: var(--accent-primary) !important;
    transform: none !important;
    box-shadow: none !important;
}
body.wbw-mode .formula { background: rgba(0,0,0,0.1) !important; }

/* index.html progress bar inline style (cold-start overlay) */
body.wbw-mode #progress-bar { background: var(--badge-text) !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.wbw-mode button[data-action="close-modal"],
body.wbw-mode button[id^="close-"],
body.wbw-mode button#close-alerts-list,
body.wbw-mode button#close-alerts-triggered,
body.wbw-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.wbw-mode button[data-action="delete-alert"] {
    background: var(--hover-bg) !important;
    color: var(--badge-text) !important;
    border: 1px solid var(--input-border) !important;
}
body.wbw-mode button[data-action="delete-alert"]:hover {
    background: var(--delete-hover-bg) !important;
}

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

/* Portfolio modal "Ajouter" (type=submit exclu du sélecteur général) */
body.wbw-mode .portfolio-add-modal button[type="submit"],
body.wbw-mode #portfolio-modal button[type="submit"] {
    background: var(--accent-primary) !important;
    color: var(--bg-color) !important;
}

/* Tout button[style*=background: none] — filet de sécurité général */
body.wbw-mode button[style*="background: none"],
body.wbw-mode button[style*="background:none"] {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
/* ============================================================================
   GUIDE INDICATEURS — pénalités distinguées sans rouge (WBW / WCAG AAA)
   ============================================================================ */
body.wbw-mode .guide-penalty-row {
    font-weight: 700;
    text-decoration: underline dotted #555555;
}

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