/* ========================================== */
        /* VARIABLES GLOBALES                         */
        /* ========================================== */
        :root {
            --bg-main: #0F172A;
            --bg-section: #1E293B;
            --bg-card: #0F172A;
            --border: #334155;
            --text-primary: #F8FAFC;
            --text-secondary: #94A3B8;
            --text-muted: #64748B;
            --color-positive: #10B981;
            --color-negative: #EF4444;
            --color-neutral: #3B82F6;
        }

        /* ========================================== */
        /* RESET & BASE                               */
        /* ========================================== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--bg-main);
            color: var(--text-primary);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        /* ========================================== */
        /* HEADER                                     */
        /* ========================================== */
        .header {
            background: var(--bg-main);
            padding: 20px 16px;
            text-align: center;
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-content {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
        }

        .header-logo {
            font-size: 24px;
        }

        .header-logo-img {
            height: 24px;
            width: auto;
            object-fit: contain;
        }

        .header-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .back-btn {
            position: absolute;
            left: 16px;
            width: 36px;
            height: 36px;
            background: var(--bg-section);
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* ========================================== */
        /* PAGE ACCUEIL - RECHERCHE & FILTRES         */
        /* ========================================== */
        .search-section {
            padding: 16px;
        }

        .search-box {
            width: 100%;
            padding: 12px 16px 12px 44px;
            background: var(--bg-section);
            border: 1px solid var(--border);
            border-radius: 12px;
            color: var(--text-primary);
            font-family: 'Poppins', sans-serif;
            font-size: 16px; /* Évite le zoom auto sur iOS */
            font-size: 14px;
            outline: none;
        }

        .search-box::placeholder {
            color: var(--text-muted);
        }

        .search-wrapper {
            position: relative;
            margin-bottom: 16px;
        }

        .search-icon {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 18px;
            pointer-events: none;
        }

        /* ✅ Bouton pour effacer la recherche */
        .search-clear {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 24px;
            height: 24px;
            border: none;
            background: var(--text-muted);
            color: var(--bg-main);
            border-radius: 50%;
            font-size: 18px; /* ✅ Réduit de 20px à 18px */
            font-weight: 300; /* ✅ Plus fin */
            line-height: 24px; /* ✅ Égal à la hauteur du bouton */
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            transition: background 0.2s;
        }

        .search-clear:hover {
            background: var(--text-secondary);
        }

        .search-clear:active {
            background: var(--text-primary);
        }

        .filters {
            display: flex;
            gap: 8px;
            margin-top: 12px;
            overflow-x: auto;
            padding-bottom: 4px;
        }

        .filters::-webkit-scrollbar {
            height: 2px;
        }

        .filter-btn {
            padding: 8px 16px;
            background: var(--bg-section);
            border: 1px solid var(--border);
            border-radius: 20px;
            color: var(--text-secondary);
            font-family: 'Poppins', sans-serif;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.2s;
        }

        .filter-btn.active {
            background: var(--color-positive);
            color: white;
            border-color: var(--color-positive);
        }

        /* ========================================== */
        /* GRILLE ENTREPRISES (2x2)                   */
        /* ========================================== */
        .companies-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
            padding: 16px;
            max-width: 100%;
            overflow: hidden;
        }

        .company-card {
            aspect-ratio: 1;
            background: var(--bg-section);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 16px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            transition: transform 0.2s;
        }

        .company-card:active {
            transform: scale(0.98);
        }

        .company-logo-wrapper {
            position: relative;
            margin-bottom: 12px;
        }

        .company-logo {
            width: 60px;
            height: 60px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            font-weight: 700;
            color: var(--bg-main);
        }

        .company-logo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 50%;
        }

        /* Badge "story" Instagram */
        .story-badge {
            position: absolute;
            inset: -3px;
            border-radius: 50%;
            padding: 3px;
            background: linear-gradient(45deg, var(--badge-color, #10B981), var(--badge-color, #10B981));
        }

        .story-badge-inner {
            width: 100%;
            height: 100%;
            background: var(--bg-section);
            border-radius: 50%;
            padding: 3px;
        }

        .company-name {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .company-sector {
            font-size: 11px;
            color: var(--text-muted);
            margin-bottom: 8px;
        }

        .company-stats {
            display: flex;
            flex-direction: column;
            gap: 4px;
            width: 100%;
        }

        .company-variation {
            font-size: 13px;
            font-weight: 600;
        }

        .company-variation.positive {
            color: var(--color-positive);
        }

        .company-variation.negative {
            color: var(--color-negative);
        }

        .company-last-news {
            font-size: 10px;
            color: var(--text-muted);
        }

        /* ========================================== */
/* HEADER ENTREPRISE - Style Instagram       */
/* ========================================== */
.company-header {
    padding: 20px 16px;
    display: flex;
    align-items: center; /* ✅ Center - aligne stats avec milieu du logo */
    gap: 16px;
}

.company-header-logo {
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.company-header-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

/* Section détails à droite du logo */
.company-header-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px; /* ✅ Réduit de 8px à 4px pour remonter les stats */
}

/* Nom de l'entreprise - Même taille que les labels */
.company-header-name {
    font-size: 12px; /* ✅ Même taille que "création", "variation 24h", etc. */
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 0; /* ✅ Pas de marge */
}

/* Stats en grille horizontale */
.company-header-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px; /* ✅ Réduit pour compacité */
}

.header-info-item {
    text-align: center;
    padding: 0;
}

.header-info-value {
    font-size: 14px; /* ✅ Remis à 14px */
    font-weight: 600; /* ✅ GRAS sur les chiffres */
    margin-bottom: 2px; /* ✅ Réduit pour variation 24h sur 1 ligne */
    white-space: nowrap; /* ✅ Force variation 24h sur 1 ligne */
}

.header-info-label {
    font-size: 12px;
    color: white; /* ✅ BLANC au lieu de gris */
    font-weight: 400;
    text-transform: capitalize; /* ✅ Majuscule au début seulement */
    letter-spacing: 0;
    white-space: nowrap; /* ✅ Labels sur 1 ligne */
}

.header-info-value.positive {
    color: var(--color-positive);
}

.header-info-value.negative {
    color: var(--color-negative);
}

        /* ========================================== */
        /* GRAPHIQUE                                  */
        /* ========================================== */
        .chart-section {
            background: var(--bg-section);
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            padding: 24px 16px 16px;
            position: relative;
            margin-bottom: 16px;
        }

        .chart-container {
            height: 200px;
            position: relative;
        }

        .focus-line {
            position: absolute;
            width: 1px;
            background: var(--active-color, #10B981);
            top: 0;
            bottom: 0;
            opacity: 0;
            transition: all 0.3s ease;
            pointer-events: none;
            border-left: 1px dashed var(--active-color, #10B981);
        }

        .focus-line.active {
            opacity: 0.4;
        }

        /* ========================================== */
        /* CARROUSEL NEWS                             */
        /* ========================================== */
        .news-carousel-wrapper {
            padding: 0 16px 24px;
        }

        .news-carousel {
            display: flex;
            flex-direction: row;
            gap: 20px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            padding: 0 calc(50vw - 110px);
            scroll-padding: 0 calc(50vw - 110px);
        }

        .news-carousel::-webkit-scrollbar {
            height: 4px;
        }

        .news-carousel::-webkit-scrollbar-thumb {
            background: var(--border);
            border-radius: 2px;
        }

        .news-card {
            flex: 0 0 220px;
            background: var(--bg-card);
            border: 2px solid var(--card-color, #10B981);
            border-radius: 16px;
            overflow: hidden;
            scroll-snap-align: start;
            transition: all 0.3s;
            opacity: 0.7;
            cursor: pointer;
        }

        .news-card.active {
            opacity: 1;
            border: 2px solid var(--card-color, #10B981);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }

        .news-card.positive { --card-color: #10B981; }
        .news-card.negative { --card-color: #EF4444; }
        .news-card.neutral { --card-color: #3B82F6; }

        .news-content {
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            height: 100%;
        }

        .news-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }

        .news-date {
            font-size: 10px;
            color: var(--text-muted);
        }

        .news-impact-badge {
            font-size: 9px;
            font-weight: 600;
            padding: 2px 6px;
            border-radius: 20px;
            white-space: nowrap;
        }

        .news-impact-badge.positive { background: rgba(16,185,129,0.15); color: #10B981; }
        .news-impact-badge.negative { background: rgba(239,68,68,0.15); color: #EF4444; }
        .news-impact-badge.neutral  { background: rgba(59,130,246,0.15); color: #3B82F6; }

        .news-title {
            font-size: 14px; /* Augmenté de 13px à 14px */
            font-weight: 700;
            line-height: 1.3;
        }

        .news-description {
            font-size: 12px; /* Augmenté de 11px à 12px */
            color: var(--text-secondary);
            line-height: 1.5;
        }

        .news-explanation {
            font-size: 10px;
            color: var(--text-muted);
            padding-top: 8px;
            border-top: 1px solid var(--border);
            font-style: italic;
            line-height: 1.4;
        }

        .news-score {
            font-size: 9px;
            color: var(--text-muted);
            margin-top: auto;
        }

        /* ========================================== */
        /* BLOCS ANALYSE                              */
        /* ========================================== */
        .analysis-section {
            padding: 0 16px 100px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .analysis-block {
            background: var(--bg-section);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 20px;
        }

        .block-title {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 16px;
            text-align: center;
        }

        .block-content {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.6;
        }

        .revenue-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .revenue-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .revenue-emoji {
            font-size: 20px;
        }

        .revenue-label {
            flex: 1;
            font-size: 13px;
        }

        .revenue-value {
            font-weight: 600;
            font-size: 14px;
        }

        /* Grille marques */
        .brands-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }

        .brand-item {
            aspect-ratio: 1;
            background: var(--bg-main);
            border: 1px solid var(--border);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            overflow: hidden;
        }

        .brand-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Avis liste */
        .advice-list {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .advice-item {
            display: flex;
            gap: 12px;
        }

        .advice-emoji {
            font-size: 24px;
            flex-shrink: 0;
        }

        .advice-content h4 {
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .advice-content p {
            font-size: 12px;
            color: var(--text-secondary);
            line-height: 1.5;
        }

        /* ========================================== */
        /* CTA INVESTIR                               */
        /* ========================================== */
        .cta-invest {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 16px;
            background: linear-gradient(to top, var(--bg-main) 80%, transparent);
            z-index: 50;
        }

        .cta-button {
            width: 100%;
            padding: 16px;
            background: var(--color-positive);
            border: none;
            border-radius: 12px;
            color: white;
            font-family: 'Poppins', sans-serif;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        /* ========================================== */
        /* PAGE PARTENAIRES                           */
        /* ========================================== */
        .partners-section {
            padding: 24px 16px 100px;
        }

        .partners-intro {
            text-align: center;
            margin-bottom: 32px;
        }

        .partners-intro h1 {
            font-size: 24px;
            margin-bottom: 12px;
        }

        .partners-intro p {
            font-size: 14px;
            color: var(--text-secondary);
            line-height: 1.6;
        }

        .partner-card {
            background: var(--bg-section);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 24px;
            margin-bottom: 16px;
        }

        .partner-logo {
            width: 80px;
            height: 80px;
            background: white;
            border-radius: 12px;
            margin: 0 auto 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
        }
        
        .partner-logo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 8px;
        }

        .partner-name {
            font-size: 18px;
            font-weight: 700;
            text-align: center;
            margin-bottom: 8px;
        }

        .partner-tagline {
            font-size: 13px;
            color: var(--text-secondary);
            text-align: center;
            margin-bottom: 16px;
        }

        .partner-features {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 20px;
        }

        .partner-feature {
            font-size: 12px;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .partner-button {
            width: 100%;
            padding: 14px;
            background: var(--color-positive);
            border: 2px solid var(--color-positive);
            border-radius: 10px;
            color: white;
            font-family: 'Poppins', sans-serif;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
        }

        /* ========================================== */
        /* PAGES VISIBILITY                           */
        /* ========================================== */
        .page {
            display: none;
        }

        .page.active {
            display: block;
        }
/* ========================================== */
/* NEWS LOADING STATE                         */
/* ========================================== */
.news-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 14px;
    min-width: 200px;
}

.news-loading-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border);
    border-top-color: #3B82F6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========================================== */
/* VARIATION COURS LENDEMAIN NEWS             */
/* ========================================== */
.news-variation {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 8px;
    margin-top: auto;
    display: inline-block;
}

.news-variation.positive {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

.news-variation.negative {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
}

/* ================================================
   MARKET BUBBLES - Bulles plus grandes
   ================================================ */

.market-bubbles {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: center;
    padding: 20px 10px;
    min-height: 200px;
}

.market-bubble {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.1);
    border: 2px solid rgba(59, 130, 246, 0.3);
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    padding: 10px;
}

.market-bubble.current {
    background: rgba(16, 185, 129, 0.15);
    border: 2px solid rgba(16, 185, 129, 0.5);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.market-bubble-country {
    font-size: 28px;
    line-height: 1;
}

.market-bubble-name {
    font-size: 13px;
    color: #F8FAFC;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

.market-bubble-cap {
    font-size: 11px;
    color: #E2E8F0;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
}

/* Tailles augmentées : 90px min → 180px max */
.market-bubble.size-100 { width: 180px; height: 180px; }
.market-bubble.size-90 { width: 170px; height: 170px; }
.market-bubble.size-80 { width: 160px; height: 160px; }
.market-bubble.size-70 { width: 150px; height: 150px; }
.market-bubble.size-60 { width: 140px; height: 140px; }
.market-bubble.size-50 { width: 130px; height: 130px; }
.market-bubble.size-40 { width: 120px; height: 120px; }
.market-bubble.size-30 { width: 110px; height: 110px; }
.market-bubble.size-20 { width: 100px; height: 100px; }
.market-bubble.size-10 { width: 90px; height: 90px; }

/* Texte réduit pour petites bulles */
.market-bubble.size-10 .market-bubble-country,
.market-bubble.size-20 .market-bubble-country {
    font-size: 24px;
}

.market-bubble.size-10 .market-bubble-name,
.market-bubble.size-20 .market-bubble-name {
    font-size: 11px;
    line-height: 1.1;
}

.market-bubble.size-10 .market-bubble-cap,
.market-bubble.size-20 .market-bubble-cap {
    font-size: 10px;
}

/* ================================================
   FIX HEADER - À AJOUTER dans styles.css
   ================================================ */

/* Renommer les classes du header pour éviter conflits */
.header-info-item {
    text-align: center;
    padding: 8px 12px;
}


/* ================================================
   STYLES POUR LOGOS MARQUES - À AJOUTER dans styles.css
   ================================================ */

/* Image logos dans la grille marques */
.brand-item img.brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
}

/* Fond blanc pour mieux voir les logos */
.brand-item {
    background: white;
}

/* ================================================
   CAROUSEL MARQUES - Avec overscroll bounce
   ================================================ */

/* Wrapper pour centrer */
.brands-carousel-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Container avec scroll horizontal + OVERSCROLL BOUNCE */
.brands-carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px 20px; /* Padding pour permettre le scroll */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    
    /* EFFET BOUNCE comme les cartes news */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    
    /* Force le scroll même avec peu d'items */
    max-width: calc(100vw - 32px);
}

/* Masquer la scrollbar mais garder le scroll */
.brands-carousel::-webkit-scrollbar {
    height: 6px;
}

.brands-carousel::-webkit-scrollbar-track {
    background: var(--bg-main);
    border-radius: 3px;
}

.brands-carousel::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.brands-carousel::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Items du carousel */
.brand-carousel-item {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Image logos */
.brand-carousel-item img.brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

/* Responsive mobile */
@media (max-width: 768px) {
    .brand-carousel-item {
        width: 70px;
        height: 70px;
    }
    
    .brands-carousel {
        gap: 10px;
        padding: 12px 16px;
        max-width: calc(100vw - 16px);
    }
}