:root {
            --bg-primary: #020617;
            --bg-secondary: #0f172a;
            --text-primary: #ffffff;
            --text-secondary: #94a3b8;
            --border-color: rgba(255, 255, 255, 0.1);
            --glass-bg: rgba(15, 23, 42, 0.85);
            --glob-red: #e11d48;
            --glob-nav: #ffffff;
        }

        .light-mode {
            --bg-primary: #f8fafc;
            --bg-secondary: #fffcfc;
            --text-primary: #0f172a;
            --text-secondary: #475569;
            --border-color: rgba(0, 0, 0, 0.1);
            --glass-bg: rgba(255, 255, 255, 0.85);
        }

        body {
            background-color: var(--bg-primary);
            color: var(--text-primary);
            overflow-x: hidden;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .light-mode .text-white { color: var(--text-primary) !important; }
        
        .light-mode .hover\:bg-glob-red:hover,
        .light-mode .bg-glob-red,
        .light-mode .group:hover .group-hover\:text-white {
            color: #ffffff !important;
        }

        /* --- KORIKSYON CRITICAL POU LIGHT MODE --- */
        /* Klas sa a fòse tèks la rete BLAN sou imaj nwa, menm nan light mode */
        .light-mode .text-overlay-white,
        .light-mode .text-overlay-white * { 
            color: #ffffff !important; 
        }

        /* --- SPECIFIC FIX FOR STREAMING MODAL IN LIGHT MODE --- */
        .light-mode #streamingModal h3.text-white {
            color: #020617 !important; /* Tit Nwa Fonse */
        }
        .light-mode #streamingModal p.text-gray-400 {
            color: #334155 !important; /* Deskripsyon Gri Fonse */
        }
        .light-mode #streamingModal a span.text-gray-400 {
            color: #475569 !important; /* Non Apps yo Gri Fonse */
        }
        .light-mode #streamingModal a:hover span {
            color: #000000 !important; /* Non Apps yo vin Nwa sou Hover */
        }
        /* ---------------------------------------------------- */

        /* KORIKSYON: Chanje 'article' an 'a' paske HTML la itilize baliz <a> pou kat yo */
        .light-mode #Actus a:hover h3 {
            color: var(--glob-red) !important;
            transition: color 0.3s ease;
        }
        .light-mode #Actus a:hover .news-text {
            color: var(--text-secondary) !important;
        }

        .light-mode #subNavbar a:hover {
            background-color: rgba(225, 29, 72, 0.1) !important;
            color: var(--glob-red) !important;
            border-color: var(--glob-red) !important;
        }
        
        .light-mode .btn-submit { 
            color: var(--glob-red) !important; 
            border-color: var(--glob-red) !important; 
        }
        .light-mode .btn-submit:hover { 
            background-color: var(--glob-red) !important; 
            color: #ffffff !important; 
        }

        .light-mode #floatingMenuBtn {
            background-color: rgba(255, 255, 255, 0.2) !important;
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
            color: var(--glob-red) !important;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        .light-mode #floatingMenuBtn:hover {
            background-color: var(--glob-red) !important;
            color: white !important;
            border-color: var(--glob-red) !important;
        }
        
        .light-mode .album-badge {
            color: var(--glob-red) !important;
            background-color: rgba(255, 255, 255, 0.95) !important;
            border-color: var(--glob-red) !important;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .light-mode .text-gray-400 { color: var(--text-secondary) !important; }
        .light-mode .text-gray-300 { color: var(--text-secondary) !important; }
        .light-mode .text-gray-500 { color: #64748b !important; }
        
        .light-mode .bg-glob-dark { background-color: var(--bg-primary) !important; }
        .light-mode .bg-glob-card { background-color: var(--bg-secondary) !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
        .light-mode .bg-gray-800 { background-color: #f1f5f9 !important; }
        
        .light-mode .border-white\/10, 
        .light-mode .border-white\/5,
        .light-mode .border-white\/20 { 
            border-color: var(--border-color) !important; 
        }

        .light-mode .bg-white\/5 { background-color: rgba(0,0,0,0.05) !important; }
        .light-mode .bg-white\/10 { background-color: rgba(0,0,0,0.1) !important; }

        .light-mode img[src*="Blanc"] {
            filter: invert(1) brightness(0);
        }

        .light-mode #Sorties .bg-clip-text {
            --tw-gradient-to: #1e293b !important;
        }
        .light-mode #PlaylistsOfficielles .bg-clip-text {
             --tw-gradient-from: #0f172a !important;
             --tw-gradient-to: #64748b !important;
        }

        .light-mode #trending-playlists .playlist-card {
            box-shadow: none !important;
            border-color: rgba(0,0,0,0.1) !important;
        }

        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: var(--bg-primary);
        }
        ::-webkit-scrollbar-thumb {
            background: #334155;
            border-radius: 4px;
        }
        .light-mode ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: var(--glob-red);
        }

        .menu-scroll::-webkit-scrollbar {
            width: 4px;
        }
        .menu-scroll::-webkit-scrollbar-track {
            background: transparent;
        }
        .menu-scroll::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.2);
            border-radius: 10px;
        }
        .light-mode .menu-scroll::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,0.2);
        }

        .glass {
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(253, 4, 58, 0.2);
        }

        .glass-nav {
            background: var(--glass-bg); 
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--border-color);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
        }
        .light-mode .glass-nav {
             background: rgba(255, 255, 255, 0.7);
        }

        .chart-btn {
            transition: all 0.3s ease;
            background: rgba(30, 41, 59, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        .light-mode .chart-btn {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .chart-btn:hover {
            transform: translateY(-5px);
            background: rgba(225, 29, 72, 0.1);
            border-color: var(--glob-red);
            box-shadow: 0 10px 20px -10px rgba(225, 212, 29, 0.3);
        }

        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .hide-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .playlist-card {
            position: relative;
            overflow: hidden;
            border-radius: 1.5rem;
            transition: all 0.5s ease;
        }

        .playlist-card img {
            transition: transform 0.7s ease;
        }

        .playlist-card:hover img {
            transform: scale(1.1);
        }

        .playlist-overlay {
            background: linear-gradient(to top, rgba(2, 6, 23, 0.95), rgba(2, 6, 23, 0.4), transparent);
        }
        .light-mode .playlist-overlay {
            background: linear-gradient(to top, rgba(2, 6, 23, 0.8), rgba(2, 6, 23, 0.2), transparent);
        }
        .light-mode .playlist-card .text-white { color: #ffffff !important; }
        .light-mode .playlist-card .text-gray-300 { color: #d1d5db !important; }
        .light-mode .playlist-card .border-white\/10 { border-color: rgba(255,255,255,0.1) !important; }

        .btn-primary {
            background-color: var(--glob-red);
            color: white;
            transition: all 0.3s ease;
        }
        .light-mode .btn-primary { color: white !important; }

        .btn-primary:hover {
            background-color: #be123c;
            box-shadow: 0 0 20px rgba(225, 29, 72, 0.4);
            transform: translateY(-2px);
        }

        .btn-submit {
            background: transparent;
            border: 2px solid var(--glob-red);
            color: white;
            padding: 0.5rem 1.25rem;
            border-radius: 9999px;
            font-size: 0.7rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            transition: all 0.3s ease;
        }

        .btn-submit:hover {
            background: var(--glob-red);
            box-shadow: 0 0 15px rgba(225, 29, 72, 0.4);
        }

        .ad-container {
            background: rgba(255, 255, 255, 0.02);
            border: 1px dashed rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #475569;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin: 2rem 0;
            overflow: hidden;
            position: relative;
        }
        .light-mode .ad-container {
            background: rgba(0,0,0,0.05);
            border-color: rgba(0,0,0,0.2);
            color: #64748b;
        }
        
        .ad-label {
            position: absolute;
            top: 5px;
            right: 5px;
            font-size: 0.6rem;
            color: #475569;
            border: 1px solid #475569;
            padding: 1px 4px;
            border-radius: 4px;
        }

        .footer-social-link {
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.03);
            width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        .light-mode .footer-social-link {
             background: rgba(0,0,0,0.05);
             border-color: rgba(0,0,0,0.1);
             color: var(--text-primary);
        }

        .footer-social-link:hover {
            background: var(--glob-red);
            color: white !important;
            transform: translateY(-5px);
            border-color: var(--glob-red);
        }

        .light-mode footer#mainFooter {
            background-color: #0f172a !important;
        }
        .light-mode footer#mainFooter .text-white { color: white !important; }
        .light-mode footer#mainFooter .text-gray-500 { color: #94a3b8 !important; }
        .light-mode footer#mainFooter .text-gray-400 { color: #cbd5e1 !important; }
        .light-mode footer#mainFooter .footer-social-link { color: white !important; background: rgba(255,255,255,0.1); }

        .platform-badge {
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.05);
            padding: 10px 20px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 10px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .platform-badge:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: var(--glob-red);
            transform: translateY(-3px);
        }

        @keyframes heartBurst {
            0% { transform: scale(1); }
            50% { transform: scale(1.35); }
            100% { transform: scale(1); }
        }
        .heart-popped {
            animation: heartBurst 0.3s ease-in-out;
        }

        .animate-spin-slow {
            animation: spin 8s linear infinite;
        }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        @keyframes rainbow {
            0% { color: #e11d48; }
            33% { color: #3b82f6; }
            66% { color: #22c55e; }
            100% { color: #e11d48; }
        }
        .animate-color-change {
            animation: rainbow 3s linear infinite;
        }

        @keyframes zoomIn {
            0% { opacity: 0; transform: scale(0.5); }
            100% { opacity: 1; transform: scale(1); }
        }
        .zoom-in-anim {
            animation: zoomIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }

        /* --- FIX POU STICKY AD NAN LIGHT MODE --- */
        .light-mode #stickyFooterAd .ad-glass {
            background-color: rgba(255, 255, 255, 0.95) !important;
            border-color: rgba(0, 0, 0, 0.1) !important;
            box-shadow: 0 -10px 30px rgba(0,0,0,0.1);
        }
        .light-mode #stickyFooterAd .ad-placeholder {
            background-color: rgba(0, 0, 0, 0.05) !important;
            border-color: rgba(0, 0, 0, 0.1) !important;
        }
        .light-mode #stickyFooterAd .ad-icon {
            color: rgba(0, 0, 0, 0.2) !important;
        }
        /* Koulè tèks Publicité ak liy yo nan Light Mode */
        .light-mode #stickyFooterAd .text-gray-400 {
            color: #64748b !important;
        }
        .light-mode #stickyFooterAd .bg-gray-400 {
            background-color: #cbd5e1 !important;
        }
        /* ---------------------------------------- */

        .theme-toggle {
            cursor: pointer;
            padding: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            color: white;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
        }
        .light-mode .theme-toggle {
            background: rgba(0,0,0,0.05);
            border-color: rgba(0,0,0,0.1);
            color: #0f172a;
        }
        .theme-toggle:hover {
            background: var(--glob-red);
            border-color: var(--glob-red);
            color: white;
        }
        
        .light-mode #globalMenu {
            background: rgba(255, 255, 255, 0.95);
            border-color: rgba(0,0,0,0.1);
        }
        .light-mode .dynamic-scroll-item {
            color: #0f172a;
        }
        .light-mode .dynamic-scroll-item:hover {
            color: white !important;
        }
        
        .light-mode #submitModal > div > div, 
        .light-mode #aboutModal > div > div,
        .light-mode #streamingModal > div > div,
        .light-mode #reglementModal > div > div {
             background-color: #ffffff;
             border-color: rgba(0,0,0,0.1);
        }
        .light-mode #submitModal input,
        .light-mode #submitModal .bg-white\/5 {
            background-color: #f8fafc !important;
            color: #0f172a;
            border-color: #e2e8f0;
        }

        .light-mode #submitModal input:checked + div {
            background-color: rgba(225, 29, 72, 0.1) !important;
            color: var(--glob-red) !important;
            border-color: var(--glob-red) !important;
        }

        #themeMenu {
            transform-origin: top right;
            transition: all 0.2s ease-out;
        }
        .light-mode #themeMenu {
            background: rgba(255, 255, 255, 0.9);
            border-color: rgba(0,0,0,0.1);
            color: #0f172a;
        }
        .theme-option {
            width: 100%;
            text-align: left;
            padding: 10px 16px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.2s;
            color: #94a3b8;
        }
        .light-mode .theme-option {
            color: #64748b;
        }
        .theme-option:hover {
            background: rgba(255,255,255,0.05);
            color: white;
        }
        .light-mode .theme-option:hover {
            background: rgba(0,0,0,0.05);
            color: #0f172a;
        }
        .theme-option.active {
            color: var(--glob-red);
            background: rgba(225, 29, 72, 0.1);
        }

        .nav-btn {
            width: 40px;
            height: 40px;
            border-radius: 9999px;
            background-color: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .light-mode .nav-btn {
            background-color: rgba(0, 0, 0, 0.05);
            border-color: rgba(0, 0, 0, 0.1);
            color: #0f172a;
        }
        .nav-btn:hover {
            background-color: var(--glob-red);
            border-color: var(--glob-red);
            color: white !important;
            transform: scale(1.05);
        }
        .nav-btn:active {
            transform: scale(0.95);
        }