/**
 * ═══════════════════════════════════════════════════════════════════
 * 🏛 INSTITUTIONAL TRACKER - CSS PRODUCTION FINALE (PARTIE 1/2)
 * ═══════════════════════════════════════════════════════════════════
 * ✅ Loader corrigé (style modal)
 * ✅ Performance cards : 2 par ligne mobile
 * ✅ Pattern cards : taille limitée
 * ✅ Bouton remove favoris : visible PC + réduit
 * ✅ Top gainers/losers : STYLE ORIGINAL (scroll horizontal)
 * ═══════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════
   🎨 VARIABLES CSS
   ═══════════════════════════════════════════════════════════════ */
   :root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --success-gradient: linear-gradient(135deg, #10b981, #059669);
    --warning-gradient: linear-gradient(135deg, #f59e0b, #d97706);
    --danger-gradient: linear-gradient(135deg, #ef4444, #dc2626);
    --info-gradient: linear-gradient(135deg, #3b82f6, #2563eb);
    
    --glass-bg: rgba(255, 255, 255, 0.95);
    --glass-border: rgba(203, 213, 225, 0.3);
    --glass-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;
    
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease;
    
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 20px;
    
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
}

body.dark-mode {
    --glass-bg: rgba(15, 23, 42, 0.95);
    --glass-border: rgba(71, 85, 105, 0.3);
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
}

/* ═══════════════════════════════════════════════════════════════
   📊 SECTION & CONTAINERS
   ═══════════════════════════════════════════════════════════════ */
.section {
    background: var(--glass-bg);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--glass-shadow);
    border: 1px solid var(--glass-border);
    transition: var(--transition-smooth);
}

.section:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.section-title.gradient-title {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.75rem;
    font-weight: 900;
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.section-title.gradient-title i {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   🔍 BARRE DE RECHERCHE
   ═══════════════════════════════════════════════════════════════ */
.loader-input,
#institutionSearch,
#positionsSearchInput {
    width: 100%;
    padding: 14px 20px;
    background: white;
    border: 2px solid var(--glass-border);
    border-radius: var(--border-radius-md);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: var(--transition-smooth);
    outline: none;
}

.loader-input:focus,
#institutionSearch:focus,
#positionsSearchInput:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.loader-input::placeholder,
#institutionSearch::placeholder,
#positionsSearchInput::placeholder {
    color: var(--text-tertiary);
}

body.dark-mode .loader-input,
body.dark-mode #institutionSearch,
body.dark-mode #positionsSearchInput {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(71, 85, 105, 0.5);
}

@media (max-width: 768px) {
    .loader-input,
    #institutionSearch,
    #positionsSearchInput {
        padding: 12px 16px;
        font-size: 0.95rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   🏢 INSTITUTIONS GRID - 2 CARDS/LIGNE MOBILE GARANTIES
   ═══════════════════════════════════════════════════════════════ */
.institutions-grid,
#favoriteInstitutionsGrid,
.alerts-grid,
.pattern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

/* ✅ MOBILE : FORCER 2 COLONNES */
@media (max-width: 768px) {
    .institutions-grid,
    #favoriteInstitutionsGrid,
    .alerts-grid,
    .pattern-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}

@media (max-width: 480px) {
    .institutions-grid,
    #favoriteInstitutionsGrid,
    .alerts-grid,
    .pattern-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   📇 INSTITUTION CARD
   ═══════════════════════════════════════════════════════════════ */
.institution-card {
    background: white;
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    border: 2px solid var(--glass-border);
    transition: var(--transition-smooth);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    min-height: 280px;
}

.institution-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary-gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.institution-card:hover {
    transform: translateY(-6px);
    border-color: #667eea;
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.25);
}

.institution-card:hover::before {
    transform: scaleX(1);
}

.institution-card:hover .institution-view-btn {
    transform: scale(1.02);
}

body.dark-mode .institution-card {
    background: rgba(30, 41, 59, 0.95);
}

.institution-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    position: relative;
}

.institution-logo,
.stock-logo-mini,
.modal-company-logo {
    width: 60px;
    height: 60px;
    border-radius: var(--border-radius-md);
    background: rgba(241, 245, 249, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: var(--transition-smooth);
}

.institution-card:hover .institution-logo {
    transform: scale(1.05) rotate(-2deg);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.institution-logo img,
.stock-logo-mini img,
.modal-company-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.institution-logo .text-fallback {
    font-size: 1.3rem;
    font-weight: 900;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.institution-info {
    flex: 1;
    min-width: 0;
}

.institution-name {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.institution-cik {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 700;
    font-family: 'Consolas', 'Monaco', monospace;
    background: rgba(102, 126, 234, 0.1);
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
}

@media (max-width: 768px) {
    .institution-cik {
        display: none !important;
    }
}

.institution-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.institution-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: var(--spacing-md);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(102, 126, 234, 0.05);
    padding: 6px 10px;
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
}

.meta-item i {
    font-size: 0.75rem;
    opacity: 0.7;
}

.institution-view-btn {
    width: 100%;
    padding: 12px 20px;
    background: var(--primary-gradient);
    color: white;
    border: none;
    border-radius: var(--border-radius-md);
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    margin-top: auto;
    min-height: 44px;
}

.institution-view-btn:hover {
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.5);
    transform: translateY(-2px);
}

.institution-view-btn:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .institution-card {
        padding: 8px;
        min-height: 180px;
    }
    
    .institution-logo {
        width: 36px;
        height: 36px;
    }
    
    .institution-name {
        font-size: 0.8rem;
    }
    
    .institution-description {
        font-size: 0.75rem;
        -webkit-line-clamp: 2;
        margin-bottom: 8px;
    }
    
    .institution-meta {
        gap: 4px;
        margin-bottom: 8px;
    }
    
    .meta-item {
        padding: 3px 5px;
        font-size: 0.65rem;
    }
    
    .institution-view-btn {
        padding: 6px 10px;
        font-size: 0.7rem;
        gap: 4px;
        min-height: 36px;
    }
    
    .institution-view-btn i {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .institution-card {
        padding: 6px;
        min-height: 170px;
    }
    
    .institution-logo {
        width: 32px;
        height: 32px;
    }
    
    .institution-name {
        font-size: 0.75rem;
    }
    
    .institution-description {
        font-size: 0.7rem;
    }
    
    .institution-view-btn {
        padding: 5px 8px;
        font-size: 0.65rem;
        gap: 3px;
        min-height: 32px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ⭐ FAVORIS - OPTIMISATION MOBILE + BOUTON REMOVE VISIBLE PC
   ═══════════════════════════════════════════════════════════════ */

/* ✅ BOUTON REMOVE VISIBLE SUR PC (réduit) */
#favoriteInstitutionsGrid button[onclick*="removeFromFavoriteList"] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: all 0.3s ease;
    padding: 0;
    font-size: 0.8rem;
}

#favoriteInstitutionsGrid button[onclick*="removeFromFavoriteList"]:hover {
    opacity: 1;
    background: rgba(239, 68, 68, 0.2);
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .favorite-institution-cik,
    .favorite-institution-headquarters {
        display: none !important;
    }
    
    button[onclick*="openManageListsModal"] span {
        display: none !important;
    }
    
    button[onclick*="openManageListsModal"] {
        padding: 10px !important;
        min-width: 44px !important;
    }
    
    /* ✅ DROPDOWN + BOUTON MANAGE SUR 2 LIGNES */
    .section > div[style*="display: flex"][style*="justify-content: space-between"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    
    /* ✅ DROPDOWN PLEINE LARGEUR */
    #favoriteListSelector {
        width: 100% !important;
        min-width: 100% !important;
        padding: 10px 14px !important;
        font-size: 0.9rem !important;
    }
    
    /* ✅ BOUTON MANAGE PLEINE LARGEUR */
    button[onclick*="openManageListsModal"] {
        width: 100% !important;
        padding: 12px 20px !important;
        justify-content: center !important;
    }
    
    /* ✅ GRID FAVORIS : 2 COLONNES */
    #favoriteInstitutionsGrid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    /* ✅ CARDS FAVORIS COMPACTES */
    #favoriteInstitutionsGrid > div {
        padding: 10px !important;
        gap: 8px !important;
        flex-direction: column !important;
        text-align: center !important;
    }
    
    /* ✅ LOGO FAVORI */
    #favoriteInstitutionsGrid .institution-logo {
        width: 48px !important;
        height: 48px !important;
        margin: 0 auto !important;
    }
    
    /* ✅ TEXTE FAVORI */
    #favoriteInstitutionsGrid [style*="font-weight: 800"] {
        font-size: 0.8rem !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        text-align: center !important;
        line-height: 1.3 !important;
    }
    
    /* ✅ BOUTON REMOVE MOBILE : PLUS PETIT ET EN BAS */
    #favoriteInstitutionsGrid button[onclick*="removeFromFavoriteList"] {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        margin-top: 6px !important;
        padding: 5px !important;
        background: rgba(239, 68, 68, 0.1) !important;
        color: #ef4444 !important;
        border: 1px solid #ef4444 !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        opacity: 1 !important;
    }
}

@media (max-width: 480px) {
    #favoriteInstitutionsGrid {
        gap: 8px !important;
    }
    
    #favoriteInstitutionsGrid > div {
        padding: 8px !important;
    }
    
    #favoriteInstitutionsGrid .institution-logo {
        width: 42px !important;
        height: 42px !important;
    }
    
    #favoriteInstitutionsGrid [style*="font-weight: 800"] {
        font-size: 0.75rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   📈 SCORE CARDS - 2 COLONNES MOBILE FORCÉES
   ═══════════════════════════════════════════════════════════════ */
.score-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: var(--spacing-lg);
}

@media (max-width: 768px) {
    .score-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
}

.score-card {
    background: white;
    padding: 1.5rem;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--glass-shadow);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: var(--transition-smooth);
    border: 1px solid var(--glass-border);
}

.score-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

body.dark-mode .score-card {
    background: rgba(30, 41, 59, 0.95);
}

.score-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.score-card:hover .score-icon {
    transform: scale(1.1) rotate(5deg);
}

.score-content {
    flex: 1;
}

.score-label {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.score-value {
    font-size: 2rem;
    font-weight: 900;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 4px;
}

.score-sublabel {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 600;
}

@media (max-width: 768px) {
    .score-card {
        padding: 1rem !important;
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
    }
    
    .score-icon {
        width: 52px !important;
        height: 52px !important;
        font-size: 1.5rem !important;
        margin: 0 auto !important;
    }
    
    .score-content {
        width: 100% !important;
    }
    
    .score-value {
        font-size: 1.6rem !important;
    }
    
    .score-label,
    .score-sublabel {
        font-size: 0.75rem !important;
    }
}

@media (max-width: 480px) {
    .score-card {
        padding: 0.8rem !important;
        gap: 8px !important;
    }
    
    .score-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.3rem !important;
    }
    
    .score-value {
        font-size: 1.4rem !important;
    }
    
    .score-label,
    .score-sublabel {
        font-size: 0.7rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   🤖 ALPHY AI PANEL - KEY METRICS AUTO-FIT
   ═══════════════════════════════════════════════════════════════ */
.alphy-panel {
    background: white;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    border: 2px solid var(--glass-border);
}

body.dark-mode .alphy-panel {
    background: rgba(30, 41, 59, 0.95);
}

.alphy-simple-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
}

@media (max-width: 768px) {
    .alphy-simple-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.5rem;
    }
}

.alphy-summary {
    grid-column: 1 / -1;
    padding: var(--spacing-xl);
    background: rgba(102, 126, 234, 0.05);
    border-radius: var(--border-radius-lg);
    border-left: 4px solid #667eea;
}

.alphy-action-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.alphy-action-icon-small {
    width: 60px;
    height: 60px;
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    font-weight: 900;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.alphy-action-text {
    font-size: 2rem;
    font-weight: 900;
}

.alphy-score-text {
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-weight: 700;
}

.ai-text {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

.alphy-section {
    background: rgba(241, 245, 249, 0.5);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
}

body.dark-mode .alphy-section {
    background: rgba(15, 23, 42, 0.5);
}

.alphy-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

@media (max-width: 768px) {
    .alphy-metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

.alphy-metric-compact {
    background: rgba(102, 126, 234, 0.05);
    padding: 12px;
    border-radius: var(--border-radius-md);
    border-left: 3px solid #667eea;
}

.metric-label {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .metric-label {
        font-size: 0.75rem;
    }
}

.metric-value {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .metric-value {
        font-size: 1rem;
    }
    
    .alphy-action-text {
        font-size: 1.5rem;
    }
}

.insight-list,
.action-list,
.risk-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.insight-item,
.action-item,
.risk-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 10px;
    transition: var(--transition-fast);
}

.insight-item:hover,
.action-item:hover,
.risk-item:hover {
    background: rgba(102, 126, 234, 0.1);
    transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════════════════
   ⚠ ALERTS & PATTERNS - TAILLE LIMITÉE
   ═══════════════════════════════════════════════════════════════ */
.alert,
.pattern-card {
    background: white;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    border-left: 4px solid #667eea;
    box-shadow: var(--glass-shadow);
    transition: var(--transition-smooth);
    max-width: 100%;
    overflow: hidden;
}

.alert:hover,
.pattern-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

body.dark-mode .alert,
body.dark-mode .pattern-card {
    background: rgba(30, 41, 59, 0.95);
}

@media (max-width: 768px) {
    .alert,
    .pattern-card {
        padding: 12px !important;
    }
    
    .alert > div,
    .pattern-card > div {
        gap: 8px !important;
    }
    
    .alert [style*="width: 50px"],
    .pattern-card [style*="width: 50px"] {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.2rem !important;
    }
    
    .alert [style*="font-weight: 800"],
    .pattern-card [style*="font-weight: 800"] {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
    }
    
    .alert [style*="color: var(--text-secondary)"],
    .pattern-card [style*="color: var(--text-secondary)"] {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   📊 RISK METRICS - 2 COLONNES MOBILE FORCÉES
   ═══════════════════════════════════════════════════════════════ */
.risk-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: var(--spacing-lg);
}

@media (max-width: 768px) {
    .risk-metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
}

.risk-metric-card {
    background: white;
    padding: 1.25rem;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--glass-shadow);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: var(--transition-smooth);
    border: 1px solid var(--glass-border);
}

.risk-metric-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

body.dark-mode .risk-metric-card {
    background: rgba(30, 41, 59, 0.95);
}

.risk-metric-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.risk-metric-content {
    flex: 1;
}

.risk-metric-label {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.risk-metric-value {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text-primary);
    line-height: 1;
}

.risk-metric-sublabel {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
    margin-top: 4px;
}

@media (max-width: 768px) {
    .risk-metric-card {
        padding: 1rem !important;
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
    }
    
    .risk-metric-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.3rem !important;
        margin: 0 auto !important;
    }
    
    .risk-metric-content {
        width: 100% !important;
    }
    
    .risk-metric-value {
        font-size: 1.3rem !important;
    }
    
    .risk-metric-label,
    .risk-metric-sublabel {
        font-size: 0.75rem !important;
    }
}

@media (max-width: 480px) {
    .risk-metric-card {
        padding: 0.8rem !important;
        gap: 8px !important;
    }
    
    .risk-metric-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.2rem !important;
    }
    
    .risk-metric-value {
        font-size: 1.2rem !important;
    }
    
    .risk-metric-label,
    .risk-metric-sublabel {
        font-size: 0.7rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   📋 TABLES
   ═══════════════════════════════════════════════════════════════ */
.table-container {
    overflow-x: auto;
    margin-top: var(--spacing-md);
    border-radius: var(--border-radius-md);
    box-shadow: var(--glass-shadow);
    -webkit-overflow-scrolling: touch;
}

.table-container table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
}

body.dark-mode .table-container table {
    background: rgba(30, 41, 59, 0.95);
}

.table-container thead tr {
    background: var(--primary-gradient);
}

.table-container th {
    padding: 16px 20px;
    text-align: left;
    font-weight: 800;
    color: white;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
}

.table-container td {
    padding: 14px 18px;
    color: var(--text-primary);
    font-size: 0.95rem;
    border-bottom: 1px solid var(--glass-border);
}

.table-container tbody tr {
    transition: var(--transition-fast);
}

.table-container tbody tr:hover {
    background: rgba(102, 126, 234, 0.08);
}

.table-container tbody tr:last-child td {
    border-bottom: none;
}

.pattern-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: var(--border-radius-sm);
    font-weight: 700;
    font-size: 0.85rem;
}

.stock-logo-mini {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(241, 245, 249, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .table-container th,
    .table-container td {
        padding: 10px 12px;
        font-size: 0.85rem;
    }
    
    .stock-logo-mini {
        width: 36px;
        height: 36px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   🏆 TOP GAINERS / LOSERS - STYLE ORIGINAL (SCROLL HORIZONTAL)
   ═══════════════════════════════════════════════════════════════ */

/* Desktop - Grille 2 colonnes */
.section > div[style*="grid-template-columns: 1fr 1fr"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* ✅ MOBILE - SCROLL HORIZONTAL ENTRE GAINERS ET LOSERS */
@media (max-width: 768px) {
    /* Container parent - scroll horizontal */
    .section > div[style*="grid-template-columns: 1fr 1fr"] {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 16px !important;
        padding-bottom: 12px !important;
    }
    
    /* Chaque section (gainers/losers) - 90% de largeur */
    .section > div[style*="grid-template-columns: 1fr 1fr"] > div {
        min-width: 90% !important;
        flex-shrink: 0 !important;
        scroll-snap-align: start !important;
        padding: 16px !important;
        background: rgba(241, 245, 249, 0.5) !important;
        border-radius: 12px !important;
    }
    
    body.dark-mode .section > div[style*="grid-template-columns: 1fr 1fr"] > div {
        background: rgba(30, 41, 59, 0.5) !important;
    }
    
    /* Titres */
    .section > div[style*="grid-template-columns: 1fr 1fr"] h3 {
        font-size: 1.1rem !important;
        margin-bottom: 16px !important;
        font-weight: 800 !important;
    }
    
    /* Container des items - scroll vertical interne */
    .section > div[style*="grid-template-columns: 1fr 1fr"] > div > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        max-height: 600px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-right: 4px !important;
    }
    
    /* Items individuels */
    .section > div[style*="grid-template-columns: 1fr 1fr"] [style*="display: flex"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 14px !important;
        background: white !important;
        border-radius: 12px !important;
        transition: all 0.3s ease !important;
        border: 1px solid var(--glass-border) !important;
    }
    
    body.dark-mode .section > div[style*="grid-template-columns: 1fr 1fr"] [style*="display: flex"] {
        background: rgba(30, 41, 59, 0.95) !important;
    }
    
    /* Touch feedback */
    .section > div[style*="grid-template-columns: 1fr 1fr"] [style*="display: flex"]:active {
        transform: scale(0.98) !important;
        opacity: 0.9 !important;
    }
    
    /* Header de l'item (rank + logo + nom) */
    .section > div[style*="grid-template-columns: 1fr 1fr"] [style*="display: flex"] > div:first-child {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }
    
    /* Rank number */
    .section > div[style*="grid-template-columns: 1fr 1fr"] [style*="font-size: 1.3rem"] {
        font-size: 1.2rem !important;
        min-width: 36px !important;
        font-weight: 900 !important;
        flex-shrink: 0 !important;
    }
    
    /* Logos agrandis (56px) */
    .section > div[style*="grid-template-columns: 1fr 1fr"] .stock-logo-mini {
        width: 56px !important;
        height: 56px !important;
        flex-shrink: 0 !important;
    }
    
    /* Company info container */
    .section > div[style*="grid-template-columns: 1fr 1fr"] [style*="display: flex"] > div:first-child > div:last-child {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    /* Company name */
    .section > div[style*="grid-template-columns: 1fr 1fr"] [style*="font-size: 0.95rem"] {
        font-size: 1rem !important;
        font-weight: 800 !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        line-height: 1.3 !important;
    }
    
    /* Stats section */
    .section > div[style*="grid-template-columns: 1fr 1fr"] [style*="display: flex"] > div:last-child {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        width: 100% !important;
        padding-top: 12px !important;
        border-top: 1px solid var(--glass-border) !important;
    }
    
    /* Performance value */
    .section > div[style*="grid-template-columns: 1fr 1fr"] [style*="font-size: 1.1rem"] {
        font-size: 1.2rem !important;
        font-weight: 900 !important;
        text-align: right !important;
    }
}

/* Très petit mobile */
@media (max-width: 480px) {
    .section > div[style*="grid-template-columns: 1fr 1fr"] > div {
        min-width: 95% !important;
    }
    
    .section > div[style*="grid-template-columns: 1fr 1fr"] .stock-logo-mini {
        width: 48px !important;
        height: 48px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   🎯 MODALS
   ═══════════════════════════════════════════════════════════════ */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    z-index: 9999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: white;
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-xl);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin: auto;
}

body.dark-mode .modal-content {
    background: rgba(15, 23, 42, 0.98);
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    z-index: 10;
    min-width: 44px;
    min-height: 44px;
}

.modal-close:hover {
    background: rgba(239, 68, 68, 0.2);
    transform: rotate(90deg);
}

.modal-close:active {
    transform: rotate(90deg) scale(0.95);
}

@media (max-width: 768px) {
    .modal {
        padding: 10px;
        align-items: flex-start;
    }
    
    .modal-content {
        max-width: 100%;
        max-height: calc(100vh - 20px);
        padding: 18px;
        margin-top: 10px;
        border-radius: var(--border-radius-lg);
    }
    
    .modal-close {
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
        min-width: 44px;
        min-height: 44px;
    }
    
    button[onclick*="createNewList"] span {
        display: none !important;
    }
    
    button[onclick*="createNewList"] {
        padding: 10px !important;
        min-width: 44px !important;
    }
    
    .modal-content [style*="padding: 32px 24px"] {
        padding: 20px 16px !important;
    }
    
    .modal-content h2 {
        font-size: 1.4rem !important;
    }
    
    .modal-content h3 {
        font-size: 1rem !important;
        margin-bottom: 12px !important;
    }
    
    #manageListsContent > div > div > div {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .modal-content [style*="font-weight: 800"][style*="font-size: 1.15rem"] {
        width: 100% !important;
        word-wrap: break-word !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        margin-bottom: 10px !important;
    }
    
    .modal-content [style*="display: flex"][style*="justify-content: space-between"] {
        width: 100% !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    .manage-list-action-btn {
        font-size: 0.8rem !important;
        padding: 7px 12px !important;
    }
    
    #favoritesListsContainer > div,
    .modal-content [style*="padding: 16px"] {
        padding: 12px !important;
        gap: 10px !important;
    }
    
    .modal-content [style*="width: 48px"][style*="height: 48px"] {
        display: none !important;
    }
    
    .modal-content input[type="text"] {
        padding: 10px 14px !important;
        font-size: 0.9rem !important;
    }
    
    .modal-content button {
        padding: 10px 18px !important;
        font-size: 0.9rem !important;
    }
    
    .modal-content label div {
        font-size: 0.9rem !important;
    }
    
    .modal-content label div + div {
        font-size: 0.8rem !important;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════
   📄 PAGINATION
   ═══════════════════════════════════════════════════════════════ */
#paginationContainer {
    margin-top: var(--spacing-xl);
}

#paginationContainer button {
    padding: 10px 20px;
    border: 2px solid var(--glass-border);
    border-radius: var(--border-radius-md);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-smooth);
    background: white;
    color: var(--text-primary);
    min-height: 44px;
}

body.dark-mode #paginationContainer button {
    background: rgba(30, 41, 59, 0.95);
}

#paginationContainer button:hover:not(:disabled) {
    border-color: #667eea;
    color: #667eea;
    transform: translateY(-2px);
}

#paginationContainer button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    #paginationContainer button {
        padding: 8px 16px;
        font-size: 0.9rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ⏳ LOADING - STYLE IDENTIQUE AU MODAL (CORRIGÉ)
   ═══════════════════════════════════════════════════════════════ */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    animation: fadeIn 0.2s ease;
}

.loading.hidden {
    display: none;
}

.spinner {
    position: relative;
    width: 60px;
    height: 60px;
}

/* ✅ SPINNER SIMPLE (CERCLE TOURNANT) */
.spinner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #667eea;
    animation: spinLoader 0.8s linear infinite;
}

/* ✅ ICÔNE CENTRALE */
.spinner i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    color: white;
    animation: pulse 1.5s ease-in-out infinite;
}

.loading p {
    margin-top: 20px;
    font-size: 1rem;
    font-weight: 700;
    color: white;
    text-align: center;
    padding: 0 20px;
}

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

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(0.95);
    }
}

/* ✅ LOADER DES GRAPHIQUES (IDENTIQUE) */
.chart-loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(102, 126, 234, 0.2);
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spinLoader 0.8s linear infinite;
    margin: 0 auto;
}

.chart-loading-text {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   🌐 NETWORK GRAPH
   ═══════════════════════════════════════════════════════════════ */
.network-graph-container {
    position: relative;
    background: rgba(241, 245, 249, 0.5);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    overflow: hidden;
}

body.dark-mode .network-graph-container {
    background: rgba(15, 23, 42, 0.5);
}

#networkGraphSvg {
    width: 100%;
    height: 600px;
    border-radius: var(--border-radius-md);
    background: white;
}

body.dark-mode #networkGraphSvg {
    background: rgba(30, 41, 59, 0.95);
}

.network-controls {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    z-index: 10;
}

.network-control-btn {
    padding: 10px 16px;
    background: white;
    border: 2px solid var(--glass-border);
    border-radius: var(--border-radius-md);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: var(--glass-shadow);
    min-height: 44px;
}

.network-control-btn:hover {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

.network-tooltip {
    position: absolute;
    display: none;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 12px 16px;
    border-radius: var(--border-radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    max-width: 250px;
}

.network-link {
    stroke: rgba(102, 126, 234, 0.3);
    stroke-width: 1.5px;
}

.network-node circle {
    stroke: white;
    stroke-width: 2px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.network-node:hover circle {
    stroke-width: 4px;
    stroke: #f59e0b;
}

.network-label {
    font-size: 11px;
    font-weight: 700;
    fill: var(--text-primary);
    text-anchor: middle;
    pointer-events: none;
}

@media (max-width: 768px) {
    #networkGraphSvg {
        height: 400px;
    }
    
    .network-controls {
        top: var(--spacing-sm);
        right: var(--spacing-sm);
    }
    
    .network-control-btn {
        padding: 8px 12px;
        font-size: 0.85rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   🔥 WATERFALL LEGEND
   ═══════════════════════════════════════════════════════════════ */
.waterfall-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
    flex-wrap: wrap;
}

.waterfall-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.waterfall-legend-color {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.waterfall-legend-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   🎨 FACTOR EXPOSURE
   ═══════════════════════════════════════════════════════════════ */
.factor-radar-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-lg);
    align-items: start;
}

.factor-legend {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.factor-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(241, 245, 249, 0.5);
    border-radius: var(--border-radius-sm);
}

.factor-color-box {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
}

.factor-legend-label {
    flex: 1;
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.factor-legend-value {
    font-weight: 900;
    color: var(--text-primary);
    font-size: 1rem;
}

@media (max-width: 768px) {
    .factor-radar-container {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   🗓 QUARTERS SELECTOR - 2 BOUTONS PAR LIGNE MOBILE
   ═══════════════════════════════════════════════════════════════ */
.quarters-selector-btn {
    padding: 10px 20px;
    background: white;
    color: var(--text-primary);
    border: 2px solid var(--glass-border);
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.quarters-selector-btn.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-color: #667eea;
}

.quarters-selector-btn:hover {
    border-color: #667eea;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .section [style*="display: flex; gap: 10px"] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .quarters-selector-btn {
        padding: 9px 14px;
        font-size: 0.85rem;
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   📱 RESPONSIVE UTILITIES
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
    
    .section {
        padding: var(--spacing-lg);
    }
    
    .section-title.gradient-title {
        font-size: 1.4rem;
    }
    
    .header-right {
        flex-direction: column;
        gap: 8px;
    }
    
    button,
    a.institution-view-btn,
    .network-control-btn,
    .modal-close {
        min-height: 44px;
        min-width: 44px;
    }
}

@media (max-width: 480px) {
    .section {
        padding: var(--spacing-md);
    }
    
    .section-title.gradient-title {
        font-size: 1.25rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   🎯 ACCESSIBILITY & TOUCH ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════ */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}

* {
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
}

body {
    -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════════════════════════════
   🎨 DARK MODE SPECIFIC ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════ */
body.dark-mode {
    background: #0f172a;
}

body.dark-mode .institution-card:hover {
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.4);
}

body.dark-mode .score-card:hover,
body.dark-mode .risk-metric-card:hover {
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.3);
}

body.dark-mode .institution-logo,
body.dark-mode .stock-logo-mini,
body.dark-mode .modal-company-logo {
    background: rgba(30, 41, 59, 0.8);
}

body.dark-mode .institution-cik {
    background: rgba(102, 126, 234, 0.2);
}

/* ═══════════════════════════════════════════════════════════════
   ✨ ANIMATIONS ADDITIONNELLES
   ═══════════════════════════════════════════════════════════════ */
@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.gradient-animated {
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.shimmer {
    background: linear-gradient(
        90deg,
        rgba(241, 245, 249, 0.5) 0%,
        rgba(241, 245, 249, 0.8) 50%,
        rgba(241, 245, 249, 0.5) 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

/* ═══════════════════════════════════════════════════════════════
   📐 PRINT STYLES
   ═══════════════════════════════════════════════════════════════ */
@media print {
    .sidebar,
    .top-header,
    .modal,
    .loading,
    .network-controls,
    #paginationContainer {
        display: none !important;
    }
    
    .main-content {
        margin-left: 0 !important;
    }
    
    .section {
        page-break-inside: avoid;
    }
}

/* ═══════════════════════════════════════════════════════════════
   🔧 FORÇAGE ULTRA-COMPLET - VERSION FINALE
   ═══════════════════════════════════════════════════════════════
   ✅ Spinner sans AUCUN contour
   ✅ Bouton delete favoris PC visible + mobile réduit
   ✅ Performance cards : 2 par ligne mobile
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   ⏳ LOADER - SUPPRESSION TOTALE DU CONTOUR
   ═══════════════════════════════════════════════════════════════ */

/* ✅ Fond loader transparent */
.loading {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ✅ Container spinner */
.spinner {
    width: 50px !important;
    height: 50px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* ✅ Trait tournant SANS contour externe */
.spinner::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    border: 3px solid transparent !important;
    border-top-color: #667eea !important;
    border-right-color: #764ba2 !important;
    animation: spinLoader 0.6s linear infinite !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

/* ✅ SUPPRIMER COMPLÈTEMENT LE ::after */
.spinner::after {
    content: none !important;
    display: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ✅ Icône centrale */
.spinner i {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 1.2rem !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: pulse 1.5s ease-in-out infinite !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ✅ Texte loader */
.loading p {
    margin-top: 20px !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-align: center !important;
    padding: 0 20px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ✅ Animation */
@keyframes spinLoader {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1); 
    }
    50% { 
        opacity: 0.6; 
        transform: translate(-50%, -50%) scale(0.9); 
    }
}

/* ═══════════════════════════════════════════════════════════════
   ⭐ BOUTON DELETE FAVORIS - CORRECTION MOBILE
   ═══════════════════════════════════════════════════════════════ */

/* ✅ DESKTOP : Visible en haut à droite */
#favoriteInstitutionsGrid button[onclick*="removeFromFavoriteList"] {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    background: rgba(239, 68, 68, 0.12) !important;
    color: #ef4444 !important;
    border: 2px solid rgba(239, 68, 68, 0.35) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
    font-size: 0.95rem !important;
    z-index: 15 !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2) !important;
}

#favoriteInstitutionsGrid button[onclick*="removeFromFavoriteList"]:hover {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: #ef4444 !important;
    transform: scale(1.15) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
}

#favoriteInstitutionsGrid button[onclick*="removeFromFavoriteList"]:active {
    transform: scale(1.05) !important;
}

body.dark-mode #favoriteInstitutionsGrid button[onclick*="removeFromFavoriteList"] {
    background: rgba(239, 68, 68, 0.18) !important;
    border-color: rgba(239, 68, 68, 0.45) !important;
}

body.dark-mode #favoriteInstitutionsGrid button[onclick*="removeFromFavoriteList"]:hover {
    background: rgba(239, 68, 68, 0.32) !important;
    border-color: #ef4444 !important;
}

/* ✅ MOBILE : RESTE EN HAUT À DROITE, MAIS PLUS PETIT */
@media (max-width: 768px) {
    #favoriteInstitutionsGrid button[onclick*="removeFromFavoriteList"] {
        position: absolute !important;
        top: 4px !important;
        right: 4px !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        padding: 0 !important;
        background: rgba(239, 68, 68, 0.15) !important;
        color: #ef4444 !important;
        border: 1.5px solid rgba(239, 68, 68, 0.4) !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.75rem !important;
        opacity: 1 !important;
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25) !important;
        z-index: 15 !important;
    }
    
    #favoriteInstitutionsGrid button[onclick*="removeFromFavoriteList"] i {
        font-size: 0.75rem !important;
        margin: 0 !important;
    }
    
    /* Masquer le texte sur mobile, garder seulement l'icône */
    #favoriteInstitutionsGrid button[onclick*="removeFromFavoriteList"] span {
        display: none !important;
    }
}

@media (max-width: 480px) {
    #favoriteInstitutionsGrid button[onclick*="removeFromFavoriteList"] {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        top: 3px !important;
        right: 3px !important;
        font-size: 0.7rem !important;
        border-radius: 5px !important;
    }
    
    #favoriteInstitutionsGrid button[onclick*="removeFromFavoriteList"] i {
        font-size: 0.7rem !important;
    }
}

/* ✅ Position relative sur le container */
#favoriteInstitutionsGrid > div {
    position: relative !important;
}

/* ═══════════════════════════════════════════════════════════════
   📊 PERFORMANCE ANALYTICS CARDS - 2 PAR LIGNE MOBILE FORCÉ
   ═══════════════════════════════════════════════════════════════ */

/* ✅ Cibler spécifiquement les 6 cards de performance */
.section [style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 1.5rem !important;
}

@media (max-width: 768px) {
    /* ✅ FORCER 2 COLONNES pour les performance cards */
    .section [style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    /* ✅ Cards individuelles plus compactes */
    .section [style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] .score-card {
        padding: 0.9rem !important;
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px !important;
    }
    
    /* ✅ Icônes centrées */
    .section [style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] .score-card .score-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.4rem !important;
        margin: 0 auto !important;
    }
    
    /* ✅ Valeurs */
    .section [style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] .score-card .score-value {
        font-size: 1.5rem !important;
    }
    
    /* ✅ Labels */
    .section [style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] .score-card .score-label,
    .section [style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] .score-card .score-sublabel {
        font-size: 0.72rem !important;
        line-height: 1.2 !important;
    }
}

@media (max-width: 480px) {
    .section [style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] {
        gap: 0.75rem !important;
    }
    
    .section [style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] .score-card {
        padding: 0.75rem !important;
        gap: 6px !important;
    }
    
    .section [style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] .score-card .score-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.2rem !important;
    }
    
    .section [style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] .score-card .score-value {
        font-size: 1.3rem !important;
    }
    
    .section [style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] .score-card .score-label,
    .section [style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] .score-card .score-sublabel {
        font-size: 0.68rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   🎨 LOADER GRAPHIQUES - STYLE UNIFORME
   ═══════════════════════════════════════════════════════════════ */

.chart-loading-spinner {
    width: 50px !important;
    height: 50px !important;
    border: 3px solid transparent !important;
    border-top-color: #667eea !important;
    border-radius: 50% !important;
    animation: spinLoader 0.6s linear infinite !important;
    margin: 0 auto !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

.chart-loading-text {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
    text-align: center !important;
    margin-top: 12px !important;
}

/* ═══════════════════════════════════════════════════════════════
   🔧 FIN DU FORÇAGE ULTRA-COMPLET
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   ✅ CORRECTIONS FINALES - BOUTON MANAGE + SUPPRESSION PASTILLES
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   📱 DROPDOWN + BOUTON CÔTE À CÔTE (PC + MOBILE IDENTIQUE)
   ═══════════════════════════════════════════════════════════════ */

/* Container - Toujours flex row */
.section > div:has(#favoriteListSelector) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
}

/* Dropdown - Prend l'espace restant */
#favoriteListSelector {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 12px 20px !important;
    background: white !important;
    border: 2px solid var(--glass-border) !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: var(--text-primary) !important;
    cursor: pointer !important;
}

body.dark-mode #favoriteListSelector {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: rgba(71, 85, 105, 0.5) !important;
}

/* Bouton Manage - Taille fixe */
button[onclick*="openManageListsModal"] {
    flex: 0 0 auto !important;
    padding: 12px 24px !important;
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
    white-space: nowrap !important;
    min-height: 44px !important;
}

button[onclick*="openManageListsModal"]:hover {
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* Texte visible sur desktop */
button[onclick*="openManageListsModal"] span {
    display: inline !important;
}

/* Mobile - Masquer le texte, garder icône */
@media (max-width: 768px) {
    /* Container reste en row */
    .section > div:has(#favoriteListSelector) {
        gap: 10px !important;
    }
    
    /* Dropdown - Taille réduite */
    #favoriteListSelector {
        flex: 1 1 auto !important;
        padding: 10px 14px !important;
        font-size: 0.9rem !important;
    }
    
    /* Bouton - Icône seule */
    button[onclick*="openManageListsModal"] {
        padding: 10px !important;
        width: 44px !important;
        min-width: 44px !important;
        gap: 0 !important;
    }
    
    /* ✅ MASQUER LE TEXTE SUR MOBILE */
    button[onclick*="openManageListsModal"] span {
        display: none !important;
    }
    
    /* Icône reste visible */
    button[onclick*="openManageListsModal"] i {
        margin: 0 !important;
        font-size: 1.1rem !important;
    }
}

@media (max-width: 480px) {
    .section > div:has(#favoriteListSelector) {
        gap: 8px !important;
    }
    
    #favoriteListSelector {
        padding: 9px 12px !important;
        font-size: 0.85rem !important;
    }
    
    button[onclick*="openManageListsModal"] {
        width: 40px !important;
        min-width: 40px !important;
        padding: 8px !important;
    }
    
    button[onclick*="openManageListsModal"] i {
        font-size: 1rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   🚫 SUPPRESSION COMPLÈTE DES PASTILLES VERTES D'ENRICHISSEMENT
   ═══════════════════════════════════════════════════════════════ */

/* 1. Pastille verte ronde dans les cards (position absolue top-right) */
.institution-card > div[style*="position: absolute"][style*="background: linear-gradient(135deg, #10b981, #059669)"],
.institution-card div[style*="position: absolute"][style*="top: 8px"][style*="right: 8px"][style*="background: linear-gradient(135deg, #10b981, #059669)"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* 2. Badge "Enhanced Data" dans modal */
div[style*="Enhanced Data"],
div[style*="background: rgba(16, 185, 129, 0.2)"] {
    display: none !important;
}

/* 3. Pastille verte ronde 32px dans favoris */
div[style*="background: linear-gradient(135deg, #10b981, #059669)"][style*="width: 32px"][style*="height: 32px"] {
    display: none !important;
}

/* 4. Pastille verte ronde 28px dans institution cards */
div[style*="background: linear-gradient(135deg, #10b981, #059669)"][style*="width: 28px"][style*="height: 28px"] {
    display: none !important;
}

/* 5. Container du compteur "X enriched" */
.section > div[style*="display: flex"] > div[style*="background: linear-gradient(135deg, #667eea, #764ba2)"] {
    display: none !important;
}

/* 6. Span enrichedCount */
span#enrichedCount,
#enrichedCount {
    display: none !important;
}

/* 7. Tous les éléments avec title "Enhanced" */
[title*="Enhanced with Google Knowledge Graph"],
[title*="enhanced with"],
[title*="Enhanced Data"] {
    display: none !important;
}

/* 8. Icônes check vertes */
i.fa-check-circle[style*="color: #10b981"],
i.fa-check-circle[style*="color: rgb(16, 185, 129)"],
i.fa-check[style*="color: white"] {
    display: none !important;
}

/* 9. Tous les divs avec background vert gradient */
div[style*="background: linear-gradient(135deg, #10b981"][style*="border-radius: 50%"] {
    display: none !important;
}

/* 10. Alternative : cibler par z-index (la pastille a souvent z-index: 2) */
.institution-card div[style*="z-index: 2"][style*="position: absolute"][style*="background: linear-gradient"] {
    display: none !important;
}

/* 11. Badge enriched générique */
.badge-enriched,
.enrichment-badge,
.enriched-indicator,
[class*="enriched"],
[data-enriched="true"] {
    display: none !important;
}

/* 12. Suppression de tout élément contenant "enriched" dans le texte */
*:has(> i.fa-check-circle[style*="color: #10b981"]) {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   ✅ FIN DES CORRECTIONS
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   📊 FACTOR EXPOSURE ANALYSIS - 2 COLONNES MOBILE
   ═══════════════════════════════════════════════════════════════ */

/* Container des legend items - Desktop */
.factor-legend {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 12px !important;
}

/* ✅ MOBILE : FORCER 2 COLONNES */
@media (max-width: 768px) {
    .factor-legend {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .factor-legend-item {
        padding: 10px !important;
        gap: 8px !important;
        flex-direction: column !important;
        text-align: center !important;
        align-items: center !important;
    }
    
    .factor-color-box {
        width: 24px !important;
        height: 24px !important;
        margin: 0 auto !important;
    }
    
    .factor-legend-label {
        font-size: 0.8rem !important;
        text-align: center !important;
        line-height: 1.3 !important;
    }
    
    .factor-legend-value {
        font-size: 1.1rem !important;
        font-weight: 900 !important;
    }
    
    /* Container radar + legend */
    .factor-radar-container {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .factor-legend {
        gap: 8px !important;
    }
    
    .factor-legend-item {
        padding: 8px !important;
        gap: 6px !important;
    }
    
    .factor-color-box {
        width: 20px !important;
        height: 20px !important;
    }
    
    .factor-legend-label {
        font-size: 0.75rem !important;
    }
    
    .factor-legend-value {
        font-size: 1rem !important;
    }
}