: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);
}
.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;
    }
}

.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-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;
}

.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;
}

/* 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: 24px;
    right: 24px;
    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-size: 14px;
    font-weight: 500;
    cursor: pointer !important;
    transition: background 0.2s;
    margin-right: 8px;
    margin-bottom: 8px;
    white-space: nowrap;
}

.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;
}

.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;
}

.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;
}

.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"] {
    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: 14px;
        min-width: 0;
        order: 1;
    }
    #card-opportunities .collapse-btn {
        flex: 0 0 auto;
        order: 2;
        padding: 3px 8px;
        font-size: 12px;
    }
    /* 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-item:hover {
    background-color: var(--hover-bg);
}

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

/* 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 ===== */
/* Utilisé dans watchlist.ts (sans <span>) et portfolio-ui.ts (avec <span>) */
[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;
}

/* ===== 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; }
    #quick-search { width: 100px !important; }
}

/* Bouton étoile watchlist - Style noir et blanc comme ticker.html */
/* En mode clair seulement - dark mode géré par dark-mode.css */
.watchlist-star {
    transition: transform 0.15s ease;
    cursor: pointer;
    background: transparent !important;
    border: none;
    font-size: 20px;
    padding: 0;
    line-height: 1;
}

/* Mode clair seulement */
body:not(.dark-mode) .watchlist-star {
    color: var(--text-color); /* Noir */
}

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

.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);
}

.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;
    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);
}
.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: 13px !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;
    }

    /* 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;
}
.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; }

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