:root {
            --bg: #f8fafc;
            --biwatis-blue: #2e4a5f;
            --text-main: #1e293b;
            --text-muted: #64748b;
            --success: #10b981;
            --danger: #ef4444;
            --border: #e2e8f0;
            --biwatis-orange: #f0a30a;
            
        }

        /* Empêche le scroll tant que le loader est là */
        body {
            overflow: hidden;
        }

        body { font-family: 'Inter', sans-serif; background-color: var(--bg); color: var(--text-main); margin: 0; overflow-x: hidden; }

        /* --- HEADER --- */
        .live-header {
            background: white; border-bottom: 1px solid var(--border); padding: 20px 60px;
            display: flex; align-items: center; justify-content: space-between;
            position: sticky; top: 0; z-index: 1000;
        }
        .center-stats { display: flex; gap: 40px; align-items: center; position: absolute; left: 50%; transform: translateX(-50%); }
        .header-stat-box { display: flex; align-items: center; gap: 10px; }
        .pulse-icon { width: 6px; height: 6px; background: var(--danger); border-radius: 50%; animation: pulse 1.5s infinite; }
        .freq-wave { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
        .freq-bar { width: 2px; background: var(--biwatis-blue); border-radius: 1px; animation: wave 1s infinite alternate; }

        @keyframes pulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } }
        @keyframes wave { from { height: 3px; } to { height: 12px; } }

        .stat-label { font-size: 10px !important; text-transform: uppercase; font-weight: 600; color: var(--text-muted); letter-spacing: 0.02em; }
        .stat-value { font-size: 17px; font-weight: 700; color: var(--biwatis-blue); }

        /* --- LAYOUT --- */
        .container { max-width: 1350px; margin: 25px auto; padding: 0 60px; padding-bottom: 110px; }
        .dashboard-grid { display: grid; grid-template-columns: 400px 1fr; gap: 30px; align-items: start; }

        /* --- HERO CARD --- */
        .hero-card {
            background: var(--biwatis-blue); border-radius: 18px; padding: 25px 40px; color: white;
            display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px;
        }
        .hero-main { display: flex; justify-content: space-between; align-items: center; }
        .hero-sub { display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 10px; }
        .hero-value { font-size: 32px; font-weight: 700; }
        .sub-label { font-size: 11px; text-transform: uppercase; opacity: 0.6; font-weight: 600; }
        .sub-val { font-size: 15px; font-weight: 500; opacity: 0.9; }

        /* --- CARDS --- */
        .card { background: white; border: 1px solid var(--border); border-radius: 18px; padding: 24px; margin-bottom: 25px; }
        .card-h { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 18px; letter-spacing: 0.5px; }
        
        /* --- FLUX POSTE --- */
        .eq-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f1f5f9; }
        .eq-name { font-size: 12px; color: var(--text-muted); font-weight: 500; }
        .eq-val { font-size: 14px; font-weight: 500; color: var(--text-muted); } 
        .btn-detail { font-size: 11px; color: var(--biwatis-blue); border: 1px solid #e2e8f0; padding: 2px 6px; border-radius: 4px; background: white; cursor: pointer; margin-right: 10px}

        /* --- PROJECTION AI --- */
        .projection-box { background: #fcfcfd; border: 1px solid #f1f5f9; border-radius: 14px; padding: 22px; margin-top: 15px; position: relative; }
        .settings-icon { position: absolute; top: 22px; right: 22px; cursor: pointer; opacity: 0.5; transition: 0.3s; font-size: 16px; }
        .settings-icon:hover { opacity: 1; transform: rotate(45deg); }
        .pred-main-val { font-size: 30px; font-weight: 800; color: var(--biwatis-blue); margin-bottom: 15px; }
        .progress-bg { width: 100%; height: 8px; background: #e2e8f0; border-radius: 100px; overflow: hidden; margin-bottom: 8px; }
        .progress-fill { height: 100%; background: var(--biwatis-blue); border-radius: 100px; }
        .budget-hint { font-size: 11px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; margin-bottom: 20px; display: block; }

        /* Graph 72h */
        .trend-line-container { height: 50px; width: 100%; margin-top: 15px; display: flex; align-items: flex-end; gap: 3px; }
        .trend-dot { flex: 1; background: var(--biwatis-blue); opacity: 0.15; border-radius: 1px; position: relative; }
        .trend-dot:hover { opacity: 0.6; background: var(--biwatis-blue); }
        .trend-dot:hover::after {
            content: attr(data-info); position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
            background: var(--biwatis-blue); color: white; padding: 4px 8px; border-radius: 4px; font-size: 10px; white-space: nowrap; z-index: 100;
        }

        .btn-sm-action { flex: 1; font-size: 12px; font-weight: 700; padding: 8px; border-radius: 8px; border: 1px solid var(--border); background: white; color: var(--biwatis-blue); cursor: pointer; text-transform: uppercase; }

        /* --- ALERTES --- */
        .alerts-scroll { max-height: 60vh; overflow-y: auto; padding-right: 10px; }
        .alert-box { padding: 15px; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 10px; position: relative; }
        .alert-box.success { background-color: rgba(16, 185, 129, 0.05); border-color: rgba(16, 185, 129, 0.1); }
        .alert-box.danger { background-color: rgba(239, 68, 68, 0.05); border-color: rgba(239, 68, 68, 0.1); }
        .alert-time { position: absolute; top: 15px; right: 15px; font-size: 11px; font-weight: 600; color: var(--text-muted); }
        .text-gain { color: var(--success); font-weight: 700; }
        .text-perte { color: var(--danger); font-weight: 700; }

        /* --- FOOTER --- */
        .floating-footer {
            position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%);
            background: var(--biwatis-blue); padding: 14px 40px; border-radius: 18px;
            color: white; display: flex; align-items: center; gap: 30px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); z-index: 2000;
        }

        .modal-overlay {
            display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(46, 74, 95, 0.4); backdrop-filter: blur(4px);
            z-index: 3000; align-items: center; justify-content: center;
        }

        .modal-content {
            background: white; padding: 40px; border-radius: 24px; text-align: center;
            max-width: 450px; width: 90%; box-shadow: 0 20px 50px rgba(0,0,0,0.2);
            position: relative; animation: modalSlide 0.3s ease-out;
        }

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

        .close-modal {
            position: absolute; top: 20px; right: 25px; font-size: 24px;
            cursor: pointer; color: var(--text-muted);
        }

        /* Défilement fluide sur toute la page */
        html {
            scroll-behavior: smooth;
        }

        /* Style du Préchargeur (Loader) */
        #loader {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: var(--biwatis-blue);
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            z-index: 9999;
            transition: opacity 0.8s ease-out, visibility 0.8s;
        }

        .spinner {
            width: 40px; height: 40px;
            border: 3px solid rgba(255,255,255,0.1);
            border-top: 3px solid white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 15px;
        }

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

        /* Effet d'apparition douce des blocs au défilement */
        .card, .hero-card {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.8s ease-out;
        }

        .card.visible, .hero-card.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- PERSONNALISATION DE LA BARRE DE DÉFILEMENT --- */

        /* Pour Chrome, Safari et Edge */
        ::-webkit-scrollbar {
            width: 4px; /* Largeur ultra-fine */
        }

        /* Le fond de la barre (piste) */
        ::-webkit-scrollbar-track {
            background: transparent; 
        }

        /* La partie mobile (curseur) */
        ::-webkit-scrollbar-thumb {
            background: rgba(46, 74, 95, 0.1); /* Couleur du bleu Biwa mais très transparent */
            border-radius: 10px;
            transition: background 0.3s;
        }

        /* Le curseur devient un peu plus visible au survol */
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(46, 74, 95, 0.3);
        }

        /* Pour Firefox */
        * {
            scrollbar-width: thin;
            scrollbar-color: rgba(46, 74, 95, 0.1) transparent;
        }

        /* OPTION : Si tu veux la cacher COMPLÈTEMENT (on pourra toujours scroller) */
         
        body {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;     /* Firefox */
        }
        body::-webkit-scrollbar {
            display: none;             /* Chrome, Safari, Opera */
        }
        
        /* --- RESPONSIVE MOBILE --- */
        @media (max-width: 992px) {
            .container { padding: 0 15px; margin-top: 10px; }
            
            .dashboard-grid { grid-template-columns: 1fr; gap: 15px; }

            /* Header Mobile en 2 niveaux */
            .live-header { 
                padding: 12px 15px; 
                flex-direction: column; 
                height: auto;
            }

            .center-stats { 
                position: static; 
                transform: none; 
                display: flex; 
                width: 100%;
                justify-content: space-between; 
                margin-top: 10px;
                padding-top: 10px;
                border-top: 1px solid var(--border);
            }

            .header-stat-box { gap: 8px; }
            .stat-value { font-size: 15px; }
            .stat-label { font-size: 10px !important; }

            /* Ajustement de la vague de fréquence pour Mobile */
            .freq-wave { 
                display: flex !important; /* On force l'affichage */
                height: 10px; 
                gap: 1.5px;
            }
            .freq-bar { width: 1.5px; }

            /* Hero Card Mobile */
            .hero-main { flex-direction: row; justify-content: space-between; }
            .hero-value { font-size: 22px; }
            
            /* Footer Mobile */
            .floating-footer { 
                width: 90%; 
                padding: 12px 15px; 
                gap: 10px;
            }
            .floating-footer button { padding: 8px 15px; font-size: 11px; }
            .desktop-only { display: none; }
        }

        @media (max-width: 992px) {
            /* ... (tes autres styles mobile) ... */

            /* On s'assure que le bloc principal reste côte à côte */
            .hero-main { 
                flex-direction: row !important; 
                justify-content: space-between; 
                align-items: center;
            }

            /* On force la ligne du bas à rester sur une seule ligne */
            .hero-sub { 
                flex-direction: row !important; 
                justify-content: space-between !important; 
                gap: 0; 
            }

            /* On réduit un peu la taille des polices pour que ça ne déborde pas */
            .hero-value { font-size: 23px; }
            .sub-val { font-size: 12px; }
            .sub-label { font-size: 9px; }

            /* On aligne le deuxième bloc à droite pour garder la structure PC */
            .hero-sub div:last-child { 
                text-align: right !important; 
            }
        }

        @media (max-width: 992px) {
            .desktop-only { display: none; }
        }

        @media (max-width: 480px) {
            .hero-sub { flex-direction: column; gap: 10px; }
            .hero-sub div:last-child { text-align: left !important; }
            
            .pred-main-val { font-size: 22px; }
            
            /* On réduit la taille des textes pour éviter les chevauchements */
            .stat-value { font-size: 14px; }
        }

        .ai-toast {
            position: fixed;
            bottom: -100px; /* Part du bas pour être plus moderne */
            left: 50%;
            transform: translateX(-50%);
            background: white;
            color: var(--biwatis-blue);
            padding: 12px 20px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* Ombre douce */
            border: 1px solid var(--border);
            z-index: 5000;
            width: auto;
            max-width: 90%; /* S'adapte au mobile */
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .ai-toast.show {
            bottom: 100px; /* Se place juste au-dessus du footer flottant */
        }

        /* Ajustement spécifique pour mobile */
        @media (max-width: 992px) {
            .ai-toast.show {
                bottom: 85px; /* Évite de chevaucher le bouton d'audit sur mobile */
            }
            .ai-toast b { font-size: 10px; }
            .ai-toast div { font-size: 11px; }
        }