/* === Variables dynamiques === */
        :root {
            /* Teinte de départ (180 = Cyan/Bleu d'eau). Sera modifiée par le JS */
            --scroll-hue: 180; 
        }

        /* === Style du conteneur (Glassmorphism) === */
        #scroll-progress-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 10px; /* Légèrement plus épaisse pour accentuer l'ombre */
           /* background: rgba(25, 25, 25, 0.4);*/
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px); /* Support Safari */
            border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Ligne de séparation très subtile */
            z-index: 99999;
        }

        /* === Style de la barre animée === */
        #scroll-progress-bar {
            height: 100%;
            width: 0%;
            
            /* Dégradé utilisant la variable de teinte dynamique */
            background: linear-gradient(90deg, 
                hsl(var(--scroll-hue), 90%, 60%), 
                hsl(calc(var(--scroll-hue) + 40), 100%, 65%) /* La 2ème couleur est décalée pour faire un beau dégradé */
            );
            
            /* Double ombre portée pour un effet néon premium qui change de couleur */
            box-shadow: 
                0 0 8px hsl(var(--scroll-hue), 100%, 50%, 0.7),
                0 0 15px hsl(var(--scroll-hue), 100%, 50%, 0.4);
                
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            
            /* Transition fluide et rapide pour coller au scroll */
            transition: width 0.1s ease-out; 
        }

        /* === Styles de démonstration === */
       
        .content-dummy {
            height: 4000px;
            padding: 60px 20px;
            text-align: center;
        }