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

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

/* ============================================================================
   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"] {
    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;
}
.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 ===== */
/* 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; }
    /* 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-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-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;
    gap: 6px;
}
.portfolio-collapse-icon {
    display: inline-block;
    width: 14px;
    opacity: 0.8;
}
.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;
}
.journal-banner-all {
    margin-left: auto;
}
.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);
}
.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-card-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    cursor: pointer;
    font-size: 14px;
}
.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 {
    margin-left: 30px;
}
.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;
}
.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;
    }
}