/* ===== APP LAYOUT: locked viewport, dual-scroll columns ===== */
        html { overflow: hidden; height: 100% }
        body {
            overflow: hidden;
            height: 100%;
            --card-bg: #12141a;
            --secondary: #1a1d24;
            --accent-dark: #7a8da6;
            --warning: #f59e0b;
        }
        .float-header { position: relative !important; top: auto !important; left: auto !important; transform: none !important; margin: 18px auto 40px !important; flex-shrink: 0 }
        main { height: 100vh; overflow: hidden }
        .glow-orb { display: none }

        /* ===== PREMIUM ANIMATIONS ===== */
        @keyframes sectionIn {
            from { opacity: 0; transform: translateY(18px) scale(0.98); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes shimmerSweep {
            0% { background-position: 200% 0; }
            100% { background-position: -50% 0; }
        }
        @keyframes glowPulse {
            0%, 100% { opacity: 0.5; transform: scale(1); }
            50% { opacity: 0.8; transform: scale(1.08); }
        }
        @keyframes accentSlide {
            from { width: 0; opacity: 0; }
            to { width: 60px; opacity: 1; }
        }

        /* Hero Section */
        .hero {
            padding: 2rem 2rem;
            text-align: center;
            max-width: 1400px;
            margin: 0 auto;
            animation: fadeInUp 0.8s ease-out 0.2s both;
            position: relative;
            --mouse-intensity: 0;
            --mouse-x: 0;
            --mouse-y: 0;
        }

        /* Animations douces avec mouvements recentrés */
        @keyframes floatAstral1 {
            0% {
                transform: translate(0, 0) scale(1);
                opacity: 0.4;
            }

            15% {
                transform: translate(-120px, 40px) scale(1.1);
                opacity: 0.7;
            }

            30% {
                transform: translate(-85px, -60px) scale(0.9);
                opacity: 0.5;
            }

            45% {
                transform: translate(100px, 25px) scale(1.15);
                opacity: 0.8;
            }

            60% {
                transform: translate(75px, -80px) scale(0.85);
                opacity: 0.5;
            }

            75% {
                transform: translate(-140px, 55px) scale(1.1);
                opacity: 0.7;
            }

            90% {
                transform: translate(60px, -45px) scale(0.95);
                opacity: 0.6;
            }

            100% {
                transform: translate(0, 0) scale(1);
                opacity: 0.4;
            }
        }

        @keyframes floatAstral2 {
            0% {
                transform: translate(0, 0) scale(1);
                opacity: 0.5;
            }

            12% {
                transform: translate(130px, -55px) scale(0.9);
                opacity: 0.8;
            }

            28% {
                transform: translate(95px, 70px) scale(1.2);
                opacity: 0.6;
            }

            42% {
                transform: translate(-110px, 30px) scale(0.85);
                opacity: 0.7;
            }

            58% {
                transform: translate(-75px, -90px) scale(1.1);
                opacity: 0.5;
            }

            72% {
                transform: translate(145px, 45px) scale(0.9);
                opacity: 0.8;
            }

            88% {
                transform: translate(-90px, -65px) scale(1.05);
                opacity: 0.6;
            }

            100% {
                transform: translate(0, 0) scale(1);
                opacity: 0.5;
            }
        }

        @keyframes floatAstral3 {
            0% {
                transform: translate(0, 0) scale(1);
                opacity: 0.6;
            }

            18% {
                transform: translate(-155px, -48px) scale(1.1);
                opacity: 0.5;
            }

            35% {
                transform: translate(115px, 85px) scale(0.85);
                opacity: 0.8;
            }

            50% {
                transform: translate(88px, -75px) scale(1.15);
                opacity: 0.7;
            }

            65% {
                transform: translate(-125px, 62px) scale(0.9);
                opacity: 0.5;
            }

            80% {
                transform: translate(135px, -38px) scale(1.05);
                opacity: 0.7;
            }

            95% {
                transform: translate(-68px, 95px) scale(0.95);
                opacity: 0.6;
            }

            100% {
                transform: translate(0, 0) scale(1);
                opacity: 0.6;
            }
        }

        @keyframes floatAstral4 {
            0% {
                transform: translate(0, 0) scale(1);
                opacity: 0.5;
            }

            20% {
                transform: translate(150px, 58px) scale(0.85);
                opacity: 0.7;
            }

            38% {
                transform: translate(-105px, -82px) scale(1.2);
                opacity: 0.6;
            }

            54% {
                transform: translate(125px, -50px) scale(0.9);
                opacity: 0.8;
            }

            68% {
                transform: translate(-160px, 73px) scale(1.1);
                opacity: 0.5;
            }

            82% {
                transform: translate(78px, 88px) scale(0.85);
                opacity: 0.7;
            }

            96% {
                transform: translate(-95px, -60px) scale(1.0);
                opacity: 0.6;
            }

            100% {
                transform: translate(0, 0) scale(1);
                opacity: 0.5;
            }
        }

        @keyframes fadeInUp {
            from {
                transform: translateY(30px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .hero h1 {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 1rem;
            line-height: 1.3;
            letter-spacing: -1px;
            position: relative;
            transition: filter 0.3s ease;
        }

        /* Ambiance spatiale discrète et atmosphérique */
        .hero h1::before,
        .hero h1::after {
            content: '';
            position: absolute;
            width: 1px;
            height: 1px;
            background: rgba(170, 185, 210, calc(0.3 + var(--mouse-intensity) * 0.4));
            border-radius: 50%;
            pointer-events: none;
            filter: blur(calc(0.8px + var(--mouse-intensity) * 2px));
            transition: filter 0.3s ease, background 0.3s ease, transform 0.3s ease;
        }

        .hero h1::before {
            top: 30%;
            left: -20%;
            animation: floatAstral1 38s ease-in-out infinite;
            animation-delay: -8s;
            /* Décalage pour désynchroniser */
            transform: translate(calc(var(--mouse-x) * 35px),
                    calc(var(--mouse-y) * 25px));
            box-shadow:
                175px 80px calc(15px + var(--mouse-intensity) * 10px) calc(8px + var(--mouse-intensity) * 6px) rgba(150, 165, 195, calc(0.08 + var(--mouse-intensity) * 0.15)),
                175px 80px calc(8px + var(--mouse-intensity) * 8px) calc(4px + var(--mouse-intensity) * 4px) rgba(150, 165, 195, calc(0.12 + var(--mouse-intensity) * 0.2)),
                175px 80px 0 0.5px rgba(170, 185, 210, calc(0.3 + var(--mouse-intensity) * 0.4)),
                -165px 95px calc(12px + var(--mouse-intensity) * 8px) calc(6px + var(--mouse-intensity) * 5px) rgba(160, 175, 200, calc(0.06 + var(--mouse-intensity) * 0.12)),
                -165px 95px calc(6px + var(--mouse-intensity) * 6px) calc(3px + var(--mouse-intensity) * 3px) rgba(160, 175, 200, calc(0.1 + var(--mouse-intensity) * 0.18)),
                -165px 95px 0 0.8px rgba(165, 180, 205, calc(0.25 + var(--mouse-intensity) * 0.4)),
                225px -30px calc(8px + var(--mouse-intensity) * 6px) calc(4px + var(--mouse-intensity) * 4px) rgba(145, 160, 190, calc(0.05 + var(--mouse-intensity) * 0.1)),
                225px -30px 0 0.5px rgba(150, 165, 195, calc(0.2 + var(--mouse-intensity) * 0.3)),
                -150px -75px calc(14px + var(--mouse-intensity) * 10px) calc(7px + var(--mouse-intensity) * 6px) rgba(175, 190, 215, calc(0.07 + var(--mouse-intensity) * 0.13)),
                -150px -75px calc(7px + var(--mouse-intensity) * 7px) calc(3px + var(--mouse-intensity) * 4px) rgba(175, 190, 215, calc(0.11 + var(--mouse-intensity) * 0.2)),
                -150px -75px 0 0.6px rgba(180, 195, 220, calc(0.28 + var(--mouse-intensity) * 0.4)),
                215px 125px calc(10px + var(--mouse-intensity) * 8px) calc(5px + var(--mouse-intensity) * 4px) rgba(155, 170, 200, calc(0.04 + var(--mouse-intensity) * 0.08)),
                215px 125px 0 0.4px rgba(160, 175, 200, calc(0.18 + var(--mouse-intensity) * 0.3)),
                -190px 35px calc(16px + var(--mouse-intensity) * 12px) calc(8px + var(--mouse-intensity) * 7px) rgba(170, 185, 210, calc(0.09 + var(--mouse-intensity) * 0.16)),
                -190px 35px calc(8px + var(--mouse-intensity) * 8px) calc(4px + var(--mouse-intensity) * 5px) rgba(170, 185, 210, calc(0.13 + var(--mouse-intensity) * 0.22)),
                -190px 35px 0 0.7px rgba(175, 190, 215, calc(0.32 + var(--mouse-intensity) * 0.45)),
                140px 140px calc(6px + var(--mouse-intensity) * 5px) calc(3px + var(--mouse-intensity) * 3px) rgba(150, 165, 195, calc(0.04 + var(--mouse-intensity) * 0.08)),
                140px 140px 0 0.3px rgba(155, 170, 200, calc(0.15 + var(--mouse-intensity) * 0.25)),
                -95px 150px calc(11px + var(--mouse-intensity) * 9px) calc(5px + var(--mouse-intensity) * 5px) rgba(165, 180, 205, calc(0.06 + var(--mouse-intensity) * 0.12)),
                -95px 150px calc(5px + var(--mouse-intensity) * 5px) calc(2px + var(--mouse-intensity) * 3px) rgba(165, 180, 205, calc(0.09 + var(--mouse-intensity) * 0.16)),
                -95px 150px 0 0.5px rgba(170, 185, 210, calc(0.22 + var(--mouse-intensity) * 0.35)),
                260px 55px calc(13px + var(--mouse-intensity) * 10px) calc(6px + var(--mouse-intensity) * 6px) rgba(180, 195, 220, calc(0.07 + var(--mouse-intensity) * 0.14)),
                260px 55px calc(6px + var(--mouse-intensity) * 6px) calc(3px + var(--mouse-intensity) * 4px) rgba(180, 195, 220, calc(0.11 + var(--mouse-intensity) * 0.2)),
                260px 55px 0 0.6px rgba(185, 200, 225, calc(0.28 + var(--mouse-intensity) * 0.4)),
                -230px 110px calc(9px + var(--mouse-intensity) * 7px) calc(4px + var(--mouse-intensity) * 4px) rgba(155, 170, 200, calc(0.05 + var(--mouse-intensity) * 0.1)),
                -230px 110px 0 0.4px rgba(160, 175, 200, calc(0.19 + var(--mouse-intensity) * 0.3));
        }

        .hero h1::after {
            bottom: 30%;
            right: -20%;
            animation: floatAstral2 45s ease-in-out infinite;
            animation-delay: -15s;
            /* Décalage pour désynchroniser */
            transform: translate(calc(var(--mouse-x) * -25px),
                    calc(var(--mouse-y) * 35px));
            box-shadow:
                -185px 85px calc(18px + var(--mouse-intensity) * 12px) calc(9px + var(--mouse-intensity) * 8px) rgba(180, 195, 220, calc(0.1 + var(--mouse-intensity) * 0.18)),
                -185px 85px calc(9px + var(--mouse-intensity) * 9px) calc(5px + var(--mouse-intensity) * 6px) rgba(180, 195, 220, calc(0.15 + var(--mouse-intensity) * 0.25)),
                -185px 85px 0 0.8px rgba(185, 200, 225, calc(0.35 + var(--mouse-intensity) * 0.5)),
                220px -110px calc(10px + var(--mouse-intensity) * 8px) calc(5px + var(--mouse-intensity) * 5px) rgba(155, 170, 200, calc(0.05 + var(--mouse-intensity) * 0.1)),
                220px -110px 0 0.5px rgba(160, 175, 200, calc(0.22 + var(--mouse-intensity) * 0.35)),
                -200px 130px calc(13px + var(--mouse-intensity) * 10px) calc(6px + var(--mouse-intensity) * 6px) rgba(165, 180, 205, calc(0.07 + var(--mouse-intensity) * 0.14)),
                -200px 130px calc(6px + var(--mouse-intensity) * 7px) calc(3px + var(--mouse-intensity) * 4px) rgba(165, 180, 205, calc(0.11 + var(--mouse-intensity) * 0.2)),
                -200px 130px 0 0.6px rgba(170, 185, 210, calc(0.27 + var(--mouse-intensity) * 0.4)),
                165px 42px calc(7px + var(--mouse-intensity) * 6px) calc(3px + var(--mouse-intensity) * 4px) rgba(145, 160, 190, calc(0.04 + var(--mouse-intensity) * 0.08)),
                165px 42px 0 0.4px rgba(150, 165, 195, calc(0.17 + var(--mouse-intensity) * 0.28)),
                -125px 88px calc(14px + var(--mouse-intensity) * 11px) calc(7px + var(--mouse-intensity) * 7px) rgba(175, 190, 215, calc(0.08 + var(--mouse-intensity) * 0.15)),
                -125px 88px calc(7px + var(--mouse-intensity) * 8px) calc(4px + var(--mouse-intensity) * 5px) rgba(175, 190, 215, calc(0.12 + var(--mouse-intensity) * 0.22)),
                -125px 88px 0 0.7px rgba(180, 195, 220, calc(0.3 + var(--mouse-intensity) * 0.45)),
                135px -125px calc(9px + var(--mouse-intensity) * 7px) calc(4px + var(--mouse-intensity) * 4px) rgba(160, 175, 200, calc(0.05 + var(--mouse-intensity) * 0.1)),
                135px -125px 0 0.4px rgba(165, 180, 205, calc(0.19 + var(--mouse-intensity) * 0.3)),
                -92px -58px calc(11px + var(--mouse-intensity) * 9px) calc(5px + var(--mouse-intensity) * 5px) rgba(170, 185, 210, calc(0.06 + var(--mouse-intensity) * 0.12)),
                -92px -58px calc(5px + var(--mouse-intensity) * 6px) calc(3px + var(--mouse-intensity) * 4px) rgba(170, 185, 210, calc(0.1 + var(--mouse-intensity) * 0.18)),
                -92px -58px 0 0.5px rgba(175, 190, 215, calc(0.24 + var(--mouse-intensity) * 0.38)),
                200px 72px calc(8px + var(--mouse-intensity) * 6px) calc(4px + var(--mouse-intensity) * 4px) rgba(150, 165, 195, calc(0.04 + var(--mouse-intensity) * 0.08)),
                200px 72px 0 0.3px rgba(155, 170, 200, calc(0.16 + var(--mouse-intensity) * 0.26)),
                -160px 28px calc(12px + var(--mouse-intensity) * 10px) calc(6px + var(--mouse-intensity) * 6px) rgba(180, 195, 220, calc(0.07 + var(--mouse-intensity) * 0.14)),
                -160px 28px calc(6px + var(--mouse-intensity) * 7px) calc(3px + var(--mouse-intensity) * 4px) rgba(180, 195, 220, calc(0.11 + var(--mouse-intensity) * 0.2)),
                -160px 28px 0 0.6px rgba(185, 200, 225, calc(0.27 + var(--mouse-intensity) * 0.4));
        }

        .hero .gradient-text {
            background: linear-gradient(135deg, var(--accent), var(--warning));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero p {
            font-size: 1.12rem;
            color: var(--text-muted);
            max-width: 600px;
            margin: 0 auto 1.5rem;
            line-height: 2.5;
            position: relative;
            transition: filter 0.3s ease;
        }

        /* Particules supplémentaires sur le paragraphe */
        .hero p::before,
        .hero p::after {
            content: '';
            position: absolute;
            width: 1px;
            height: 1px;
            background: rgba(170, 185, 210, 0.3);
            border-radius: 50%;
            pointer-events: none;
            filter: blur(0.8px);
        }

        .hero p::before {
            top: -100%;
            left: -25%;
            animation: floatAstral3 42s ease-in-out infinite;
            animation-delay: -22s;
            /* Grand décalage */
            transform: translate(calc(var(--mouse-x) * -20px),
                    calc(var(--mouse-y) * 40px));
            box-shadow:
                195px 65px 16px 8px rgba(155, 170, 200, 0.09),
                195px 65px 8px 4px rgba(155, 170, 200, 0.13),
                195px 65px 0 0.6px rgba(160, 175, 200, 0.31),
                -175px 100px 12px 6px rgba(170, 185, 210, 0.07),
                -175px 100px 6px 3px rgba(170, 185, 210, 0.11),
                -175px 100px 0 0.7px rgba(175, 190, 215, 0.27),
                145px -85px 9px 4px rgba(145, 160, 190, 0.05),
                145px -85px 0 0.4px rgba(150, 165, 195, 0.19),
                -200px 72px 14px 7px rgba(180, 195, 220, 0.08),
                -200px 72px 7px 4px rgba(180, 195, 220, 0.12),
                -200px 72px 0 0.8px rgba(185, 200, 225, 0.33),
                210px 118px 10px 5px rgba(160, 175, 200, 0.06),
                210px 118px 0 0.5px rgba(165, 180, 205, 0.21),
                -130px -100px 11px 5px rgba(150, 165, 195, 0.06),
                -130px -100px 5px 3px rgba(150, 165, 195, 0.1),
                -130px -100px 0 0.5px rgba(155, 170, 200, 0.23),
                240px -60px 13px 6px rgba(165, 180, 205, 0.07),
                240px -60px 6px 3px rgba(165, 180, 205, 0.11),
                240px -60px 0 0.6px rgba(170, 185, 210, 0.26);
        }

        .hero p::after {
            bottom: -100%;
            right: -25%;
            animation: floatAstral4 50s ease-in-out infinite;
            animation-delay: -35s;
            /* Décalage important */
            transform: translate(calc(var(--mouse-x) * 28px),
                    calc(var(--mouse-y) * -32px));
            box-shadow:
                -190px 82px 15px 8px rgba(165, 180, 205, 0.09),
                -190px 82px 8px 4px rgba(165, 180, 205, 0.14),
                -190px 82px 0 0.7px rgba(170, 185, 210, 0.32),
                205px -95px 11px 5px rgba(150, 165, 195, 0.06),
                205px -95px 0 0.5px rgba(155, 170, 200, 0.23),
                -155px 125px 13px 6px rgba(180, 195, 220, 0.07),
                -155px 125px 6px 3px rgba(180, 195, 220, 0.11),
                -155px 125px 0 0.6px rgba(185, 200, 225, 0.29),
                175px 108px 10px 5px rgba(160, 175, 200, 0.05),
                175px 108px 0 0.4px rgba(165, 180, 205, 0.2),
                -220px -68px 12px 6px rgba(155, 170, 200, 0.06),
                -220px -68px 6px 3px rgba(155, 170, 200, 0.1),
                -220px -68px 0 0.5px rgba(160, 175, 200, 0.24),
                230px 140px 14px 7px rgba(170, 185, 210, 0.08),
                230px 140px 7px 4px rgba(170, 185, 210, 0.12),
                230px 140px 0 0.7px rgba(175, 190, 215, 0.3),
                -260px 95px 9px 4px rgba(145, 160, 190, 0.05),
                -260px 95px 0 0.4px rgba(150, 165, 195, 0.18);
        }

        .promo-banner {
            background: linear-gradient(135deg, rgba(160, 175, 200, 0.15), rgba(192, 205, 221, 0.1));
            border: 1px solid var(--accent);
            border-radius: 10px;
            padding: 1rem;
            margin: 0rem auto;
            max-width: 1000px;
            animation: fadeInUp 0.8s ease-out 0.4s both;
        }

        .promo-banner h3 {
            color: var(--accent);
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            font-weight: 600;
        }

        .promo-banner p {
            max-width: 200%;
        }


        .suggestion-btn {
            display: inline-block;
            background: var(--accent);
            color: white;
            padding: 0.4rem 0.7rem;
            border-radius: 5px;
            border: none;
            font-family: 'IBM Plex Mono', monospace;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            font-size: 0.95rem;
        }

        .suggestion-btn:hover {
            background: var(--accent-dark);
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(160, 175, 200, 0.4);
        }

        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            z-index: 10000;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
        }

        .modal-overlay.active {
            display: flex;
        }

        .modal-content {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 2rem;
            max-width: 600px;
            width: 90%;
            position: relative;
            animation: slideInUp 0.3s ease-out;
        }

        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .modal-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .modal-close:hover {
            color: var(--text);
            transform: rotate(90deg);
        }

        .modal-content h3 {
            color: var(--accent);
            margin-bottom: 1rem;
            font-size: 1.5rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--text);
            font-weight: 500;
        }

        .form-group textarea {
            width: 100%;
            min-height: 150px;
            padding: 1rem;
            background: var(--secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            font-family: 'IBM Plex Mono', monospace;
            font-size: 0.95rem;
            resize: vertical;
            transition: all 0.3s ease;
        }

        .form-group textarea:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(160, 175, 200, 0.1);
        }

        .form-actions {
            display: flex;
            gap: 1rem;
            justify-content: flex-end;
        }

        .btn-submit {
            background: var(--accent);
            color: white;
            padding: 0.8rem 1.5rem;
            border: none;
            border-radius: 8px;
            font-family: 'IBM Plex Mono', monospace;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-submit:hover {
            background: var(--accent-dark);
            transform: translateY(-2px);
        }

        .btn-cancel {
            background: var(--secondary);
            color: var(--text);
            padding: 0.8rem 1.5rem;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-family: 'IBM Plex Mono', monospace;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-cancel:hover {
            background: var(--border);
        }

        .success-message {
            background: rgba(0, 255, 136, 0.2);
            border: 1px solid #22c55e;
            color: #22c55e;
            padding: 1rem;
            border-radius: 8px;
            text-align: center;
            margin-bottom: 1rem;
            display: none;
        }

        .success-message.active {
            display: block;
        }


        .filters-section {
            background: rgba(18, 18, 25, 0.85);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(160, 175, 200, 0.15);
            border-radius: 16px;
            padding: 2rem;
            margin: 0rem auto;
            max-width: 1400px;
            animation: fadeInUp 0.8s ease-out 0.6s both;
            position: relative;
            z-index: 1;
            box-shadow:
                0 0 30px rgba(160, 175, 200, 0.12),
                0 0 60px rgba(160, 175, 200, 0.06),
                0 8px 32px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.02);
        }

        .filters-section::before {
            content: '';
            position: absolute;
            inset: -30px;
            border-radius: 16px;
            background: radial-gradient(ellipse 100% 50% at 50% 0%,
                    rgba(160, 175, 200, 0.09),
                    transparent 70%),
                radial-gradient(ellipse 80% 40% at 20% 50%,
                    rgba(160, 175, 200, 0.06),
                    transparent 60%),
                radial-gradient(ellipse 80% 40% at 80% 50%,
                    rgba(192, 205, 221, 0.06),
                    transparent 60%);
            z-index: -1;
            filter: blur(25px);
            opacity: 0.6;
            pointer-events: none;
        }

        .filters-section::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 16px;
            background:
                radial-gradient(circle at 50% 0%, rgba(160, 175, 200, 0.08), transparent 40%),
                radial-gradient(circle at 0% 50%, rgba(160, 175, 200, 0.05), transparent 40%),
                radial-gradient(circle at 100% 50%, rgba(192, 205, 221, 0.05), transparent 40%);
            pointer-events: none;
        }

        .filters-title {
            font-size: 1.4rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .filters-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
        }

        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
        }

        .filter-controls-row {
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
            flex-direction: row !important;
        }

        .filter-controls-row>div {
            justify-content: flex-end;
        }

        .filter-group label {
            font-weight: 600;
            color: var(--text-muted);
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        select,
        input[type="text"] {
            background: linear-gradient(135deg, rgba(30, 30, 42, 0.9), rgba(25, 25, 35, 0.9));
            backdrop-filter: blur(10px);
            border: 1px solid rgba(160, 175, 200, 0.25);
            border-radius: 10px;
            padding: 0.7rem 1rem;
            color: #e0e4ea;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 0.85rem;
            transition: all 0.3s ease;
            cursor: text;
            max-width: 280px;
            box-shadow:
                0 2px 8px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }

        select {
            cursor: pointer;
        }

        select:hover,
        input[type="text"]:hover {
            border-color: rgba(160, 175, 200, 0.4);
            background: linear-gradient(135deg, rgba(35, 35, 48, 0.95), rgba(30, 30, 42, 0.95));
            box-shadow:
                0 2px 12px rgba(160, 175, 200, 0.15),
                0 0 20px rgba(160, 175, 200, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        select:focus,
        input[type="text"]:focus {
            outline: none;
            border-color: rgba(160, 175, 200, 0.6);
            background: linear-gradient(135deg, rgba(35, 35, 48, 0.98), rgba(30, 30, 42, 0.98));
            box-shadow:
                0 0 0 3px rgba(160, 175, 200, 0.2),
                0 4px 16px rgba(160, 175, 200, 0.25),
                0 0 30px rgba(160, 175, 200, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        input[type="text"]::placeholder {
            color: rgba(160, 175, 200, 0.4);
        }


        input[type="radio"],
        input[type="checkbox"] {
            appearance: none;
            width: 18px;
            height: 18px;
            border: 2px solid rgba(160, 175, 200, 0.3);
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(25, 25, 35, 0.8), rgba(20, 20, 30, 0.8));
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            flex-shrink: 0;
            box-shadow:
                0 2px 8px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }

        input[type="radio"]:hover,
        input[type="checkbox"]:hover {
            border-color: rgba(160, 175, 200, 0.6);
            background: linear-gradient(135deg, rgba(30, 30, 42, 0.9), rgba(25, 25, 35, 0.9));
            box-shadow:
                0 2px 12px rgba(160, 175, 200, 0.2),
                0 0 20px rgba(160, 175, 200, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        input[type="radio"]:checked,
        input[type="checkbox"]:checked {
            background: linear-gradient(135deg, rgba(160, 175, 200, 0.9), rgba(192, 205, 221, 0.9));
            border-color: rgba(160, 175, 200, 0.8);
            box-shadow:
                0 0 20px rgba(160, 175, 200, 0.4),
                0 0 30px rgba(160, 175, 200, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }

        input[type="radio"]:checked::after,
        input[type="checkbox"]:checked::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            background: #fff;
            border-radius: 50%;
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
        }

        /* Custom dropdown avec logos */
        .custom-select-wrapper {
            position: relative;
            width: 100%;
            max-width: 280px;
            z-index: 1;
        }

        .custom-select-wrapper.active {
            z-index: 10020;
        }

        .custom-select-trigger {
            background: linear-gradient(135deg, rgba(35, 35, 50, 0.95), rgba(28, 28, 40, 0.95));
            backdrop-filter: blur(10px);
            border: 1px solid rgba(160, 175, 200, 0.35);
            border-radius: 10px;
            padding: 0.7rem 1rem;
            color: #e0e4ea;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 0.85rem;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s ease;
            box-shadow:
                0 2px 12px rgba(160, 175, 200, 0.15),
                0 0 25px rgba(160, 175, 200, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
            position: relative;
        }

        .custom-select-trigger::before {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: 10px;
            background: linear-gradient(135deg,
                    rgba(160, 175, 200, 0.2),
                    rgba(160, 175, 200, 0.15),
                    rgba(192, 205, 221, 0.18));
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .custom-select-trigger:hover {
            border-color: rgba(160, 175, 200, 0.55);
            background: linear-gradient(135deg, rgba(45, 45, 62, 0.98), rgba(38, 38, 52, 0.98));
            box-shadow:
                0 4px 16px rgba(160, 175, 200, 0.25),
                0 0 30px rgba(160, 175, 200, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
        }

        .custom-select-trigger:hover::before {
            opacity: 1;
        }

        .custom-select-trigger img {
            width: 20px;
            height: 20px;
            object-fit: contain;
        }

        .custom-select-arrow {
            margin-left: auto;
            font-size: 0.7rem;
            color: rgba(160, 175, 200, 0.8);
            transition: transform 0.3s ease;
        }

        .custom-select-wrapper.active .custom-select-arrow {
            transform: rotate(180deg);
        }

        .custom-select-options {
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            right: 0;
            background: linear-gradient(135deg, rgba(20, 20, 30, 0.98), rgba(15, 15, 22, 0.98));
            backdrop-filter: blur(15px);
            border: 1px solid rgba(160, 175, 200, 0.25);
            border-radius: 12px;
            z-index: 10030;
            max-height: 600px;
            overflow-y: auto;
            overflow-x: hidden;
            display: none;
            box-shadow:
                0 8px 32px rgba(0, 0, 0, 0.6),
                0 0 40px rgba(160, 175, 200, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
            animation: slideDown 0.3s ease;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-8px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .custom-select-options.active {
            display: block;
        }

        .custom-select-option {
            padding: 0.7rem 1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            justify-content: space-between;
            transition: all 0.2s ease;
            font-size: 0.85rem;
            color: #c0cddd;
            border-bottom: 1px solid rgba(160, 175, 200, 0.08);
        }

        .custom-select-option:last-child {
            border-bottom: none;
        }

        .custom-select-option:hover {
            background: linear-gradient(135deg, rgba(160, 175, 200, 0.2), rgba(192, 205, 221, 0.15));
            color: #fff;
        }

        .custom-select-option img {
            width: 20px;
            height: 20px;
            object-fit: contain;
            filter: none;
        }

        .custom-select-option input[type="checkbox"] {
            margin: 0;
            cursor: pointer;
            pointer-events: none;
            accent-color: rgba(160, 175, 200, 0.8);
            width: 16px;
            height: 16px;
        }

        .height-select {
            background: linear-gradient(135deg, rgba(30, 30, 42, 0.9), rgba(25, 25, 35, 0.9));
            backdrop-filter: blur(10px);
            border: 1px solid rgba(160, 175, 200, 0.35);
            border-radius: 10px;
            padding: 0.6rem 2rem 0.6rem 0.9rem;
            color: #e0e4ea;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 0.85rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow:
                0 2px 12px rgba(160, 175, 200, 0.15),
                0 0 25px rgba(160, 175, 200, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a78bfa' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.7rem center;
            background-size: 10px;
            min-width: 90px;
        }

        .height-select:hover {
            border-color: rgba(160, 175, 200, 0.55);
            background: linear-gradient(135deg, rgba(35, 35, 48, 0.95), rgba(30, 30, 42, 0.95));
            box-shadow:
                0 4px 16px rgba(160, 175, 200, 0.25),
                0 0 30px rgba(160, 175, 200, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
        }

        .height-select:focus {
            outline: none;
            border-color: rgba(160, 175, 200, 0.6);
            box-shadow:
                0 0 0 3px rgba(160, 175, 200, 0.2),
                0 4px 16px rgba(160, 175, 200, 0.3),
                0 0 35px rgba(160, 175, 200, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
        }

        .height-select option {
            background: rgba(20, 20, 30, 0.98);
            color: #e0e4ea;
            padding: 0.5rem;
        }

        .reset-filters {
            background: linear-gradient(135deg, rgba(160, 175, 200, 0.2), rgba(192, 205, 221, 0.15));
            backdrop-filter: blur(10px);
            border: 1px solid rgba(160, 175, 200, 0.3);
            border-radius: 12px;
            padding: 0.7rem 1.8rem;
            color: #e0e4ea;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            align-self: flex-end;
            margin-top: 0;
            white-space: nowrap;
            box-shadow:
                0 4px 16px rgba(160, 175, 200, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            position: relative;
            overflow: hidden;
            text-align: center;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .reset-filters::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 12px;
            background: linear-gradient(135deg,
                    rgba(160, 175, 200, 0.4),
                    rgba(160, 175, 200, 0.2),
                    rgba(192, 205, 221, 0.3));
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .reset-filters:hover {
            transform: translateY(-2px);
            background: linear-gradient(135deg, rgba(160, 175, 200, 0.3), rgba(192, 205, 221, 0.25));
            border-color: rgba(160, 175, 200, 0.5);
            box-shadow:
                0 8px 32px rgba(160, 175, 200, 0.4),
                0 0 20px rgba(160, 175, 200, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
            color: #fff;
        }

        .reset-filters:hover::before {
            opacity: 1;
        }

        .reset-filters:active {
            transform: translateY(0);
        }

        .filters-bottom-controls {
            position: absolute;
            bottom: 2rem;
            right: 2rem;
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

        /* Table Section */
        .table-container {
            max-width: 2000px;
            margin: 0.5rem auto;
            padding: 0 2rem;
            animation: fadeInUp 0.8s ease-out 0.8s both;
            position: relative;
            z-index: 0;
        }

        /* Boutons de navigation horizontale */
        .scroll-buttons {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1rem;
            gap: 1rem;
        }

        .scroll-btn {
            background: linear-gradient(135deg, rgba(25, 25, 35, 0.9), rgba(20, 20, 30, 0.9));
            backdrop-filter: blur(15px);
            border: 1px solid rgba(160, 175, 200, 0.3);
            color: #e0e4ea;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            line-height: 1;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow:
                0 2px 10px rgba(160, 175, 200, 0.15),
                0 0 15px rgba(160, 175, 200, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            font-family: Arial, sans-serif;
            padding: 0 0 2px 0;
            position: relative;
            overflow: hidden;
        }

        .scroll-btn::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 50%;
            background: linear-gradient(135deg,
                    rgba(160, 175, 200, 0.3),
                    rgba(160, 175, 200, 0.2),
                    rgba(192, 205, 221, 0.25));
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .scroll-btn:hover {
            background: linear-gradient(135deg, rgba(160, 175, 200, 0.35), rgba(192, 205, 221, 0.3));
            border-color: rgba(160, 175, 200, 0.6);
            color: #fff;
            transform: scale(1.15);
            box-shadow:
                0 4px 18px rgba(160, 175, 200, 0.3),
                0 0 25px rgba(160, 175, 200, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }

        .scroll-btn:hover::before {
            opacity: 1;
        }

        .scroll-btn:active {
            transform: scale(1.05);
        }

        .table-wrapper {
            background: linear-gradient(135deg, rgba(18, 18, 25, 0.95), rgba(12, 12, 18, 0.95));
            backdrop-filter: blur(12px);
            border: 1px solid rgba(160, 175, 200, 0.15);
            border-radius: 16px;
            overflow-x: auto;
            overflow-y: auto;
            max-height: 80vh;
            scroll-behavior: smooth;
            position: relative;
            box-shadow:
                0 0 20px rgba(160, 175, 200, 0.08),
                0 0 40px rgba(160, 175, 200, 0.04),
                0 8px 32px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.02);
        }

        .table-wrapper::before {
            content: '';
            position: absolute;
            inset: -40px;
            border-radius: 16px;
            background: radial-gradient(ellipse 100% 100% at 50% 50%,
                    rgba(160, 175, 200, 0.06),
                    rgba(160, 175, 200, 0.03) 40%,
                    transparent 70%);
            z-index: -1;
            filter: blur(20px);
            opacity: 0.4;
            pointer-events: none;
        }


        .table-wrapper::-webkit-scrollbar {
            height: 12px;
            -webkit-appearance: none;
            display: block;
        }

        .table-wrapper::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            margin: 0 10px;
        }

        .table-wrapper::-webkit-scrollbar-thumb {
            background: rgba(160, 175, 200, 0.8);
            border-radius: 10px;
            min-width: 50px;
            display: block !important;
            visibility: visible !important;
        }

        .table-wrapper::-webkit-scrollbar-thumb:hover {
            background: rgb(122, 141, 166);
        }


        .table-wrapper {
            scrollbar-width: auto;
            scrollbar-color: rgba(160, 175, 200, 0.8) rgba(255, 255, 255, 0.1);
        }


        .table-wrapper::-webkit-scrollbar-thumb {
            background: var(--accent) !important;
        }

        table {
            width: 100%;
            min-width: 1200px;
            border-collapse: separate;
            border-spacing: 0;
        }

        thead {
            background: rgba(25, 25, 35, 0.98);
            backdrop-filter: blur(10px);
            position: sticky;
            top: 0;
            z-index: 5;
            box-shadow:
                0 1px 0 0 rgba(160, 175, 200, 0.15),
                0 4px 12px rgba(160, 175, 200, 0.2),
                0 8px 24px rgba(0, 0, 0, 0.4);
        }

        th {
            padding: 0.75rem 0.6rem;
            text-align: left;
            font-weight: 600;
            color: var(--text);
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 0.5px;
            position: sticky;
            top: 0;
            background: rgba(25, 25, 35, 0.98);
            backdrop-filter: blur(10px);
            z-index: 5;
            cursor: pointer;
            user-select: none;
            transition: all 0.3s ease;
            white-space: nowrap;
            border-bottom: 1px solid rgba(160, 175, 200, 0.1);
            border-left: none;
            border-right: none;
            border-top: none;
        }


        th.centered-header {
            text-align: center;
        }

        th.last-column {
            width: 100%;
        }

        td:last-child {
            width: 100%;
        }

        th:has(.column-info-bubble:hover) {
            z-index: 10;
        }

        th:hover {
            background: rgba(35, 35, 50, 0.98);
        }

        th.sortable::after {
            content: none;
        }

        .sort-arrow {
            opacity: 0.5;
            margin-left: 0.3rem;
            font-size: 0.9rem;
        }

        th.sorted-asc .sort-arrow {
            content: '↑';
            opacity: 1;
            color: var(--accent);
        }

        th.sorted-desc .sort-arrow {
            content: '↓';
            opacity: 1;
            color: var(--accent);
        }


        .th-content {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        /* Bulle info dans les en-têtes */
        .column-info-bubble {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            background: linear-gradient(135deg, rgba(160, 175, 200, 0.25), rgba(192, 205, 221, 0.2));
            backdrop-filter: blur(8px);
            border: 1px solid rgba(160, 175, 200, 0.4);
            border-radius: 50%;
            font-size: 0.7rem;
            font-weight: 700;
            color: #c0cddd;
            cursor: help;
            position: relative;
            z-index: 50;
            transition: all 0.2s ease;
            flex-shrink: 0;
            box-shadow:
                0 2px 8px rgba(160, 175, 200, 0.25),
                0 0 15px rgba(160, 175, 200, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
        }

        .column-info-bubble:hover {
            background: linear-gradient(135deg, rgba(160, 175, 200, 0.5), rgba(192, 205, 221, 0.45));
            border-color: rgba(160, 175, 200, 0.7);
            color: #fff;
            box-shadow:
                0 4px 16px rgba(160, 175, 200, 0.45),
                0 0 25px rgba(160, 175, 200, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
        }

        /* Popup d'info colonne */
        .column-info-popup {
            position: absolute;
            left: calc(100% + 12px);
            top: 0;
            transform: translateY(0);
            background: linear-gradient(135deg, rgba(25, 25, 38, 0.98), rgba(20, 20, 32, 0.98));
            backdrop-filter: blur(15px);
            color: #e0e4ea;
            padding: 0.85rem 1.1rem;
            border-radius: 10px;
            font-size: 0.8rem;
            white-space: normal;
            max-width: 280px;
            min-width: 200px;
            z-index: 51;
            border: 1px solid rgba(160, 175, 200, 0.4);
            box-shadow:
                0 8px 24px rgba(0, 0, 0, 0.5),
                0 0 40px rgba(160, 175, 200, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s ease-out, visibility 0.2s ease-out, transform 0.2s ease-out;
            font-weight: 400;
            text-transform: none;
            letter-spacing: normal;
            line-height: 1.6;
        }


        .column-info-popup.left {
            left: auto;
            right: calc(100% + 12px);
        }

        .column-info-popup::before {
            content: '';
            position: absolute;
            right: 100%;
            top: 12px;
            transform: translateY(0);
            border: 6px solid transparent;
            border-right-color: rgba(160, 175, 200, 0.4);
        }


        .column-info-popup.left::before {
            right: auto;
            left: 100%;
            border-right-color: transparent;
            border-left-color: rgba(160, 175, 200, 0.4);
        }

        .column-info-bubble:hover .column-info-popup {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) translateX(4px);
        }

        .column-info-bubble:hover .column-info-popup.left {
            transform: translateY(0) translateX(-4px);
        }

        td {
            padding: 0.7rem 0.6rem;
            border-bottom: 1px solid rgba(160, 175, 200, 0.08);
            color: var(--text-muted);
            transition: all 0.3s ease;
        }


        td:first-child {
            min-width: 260px;
            max-width: 320px;
            text-align: center;
        }

        tbody tr {
            transition: all 0.3s ease;
            background: rgba(35, 35, 45, 0.8);
            box-shadow: inset 0 -1px 0 rgba(160, 175, 200, 0.08);
        }

        tbody tr:nth-child(even) {
            background: rgba(28, 28, 38, 0.7);
        }

        tbody tr:hover {
            background: linear-gradient(90deg, rgba(160, 175, 200, 0.15), rgba(160, 175, 200, 0.1));
            box-shadow:
                inset 0 -1px 0 rgba(160, 175, 200, 0.15),
                0 0 20px rgba(160, 175, 200, 0.1);
            transform: translateX(2px);
        }

        tbody tr:hover {
            background: rgba(160, 175, 200, 0.08);
        }

        .drawdown-cell {
            text-align: center;
        }

        .drawdown-type {
            font-weight: 700;
            color: var(--text);
            display: inline;
        }

        .drawdown-amount {
            font-weight: 400;
            color: var(--text-muted);
            display: inline;
            margin-left: 0.3rem;
        }

        .target-cell {
            text-align: center;
        }

        .days-cell {
            text-align: center;
        }

        .payout-cell {
            text-align: center;
        }

        .rating-cell {
            text-align: center;
            padding: 0.5rem;
        }

        .rating-circle {
            width: 48px;
            height: 48px;
            margin: 0 auto;
            position: relative;
            display: inline-block;
        }

        .rating-circle svg {
            transform: rotate(-90deg);
        }

        .rating-number {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--text);
        }

        .product-name {
            font-weight: 700;
            color: #3b82f6 !important;
            font-size: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
        }

        .product-name a {
            color: #3b82f6 !important;
            text-decoration: none;
        }

        .product-name a:hover {
            color: #60a5fa !important;
        }


        .faq-icon-wrapper {
            position: relative;
            display: inline-block;
            margin-left: 0.4rem;
            cursor: pointer;
            text-decoration: none;
        }

        .faq-icon-wrapper:hover {
            z-index: 8;
        }

        .faq-icon-wrapper img {
            width: 24px;
            height: 24px;
            vertical-align: middle;
            transition: transform 0.2s ease, filter 0.3s ease;
            filter: none;
        }

        .faq-icon-wrapper:hover img {
            transform: scale(1.15);
            filter: brightness(1.2);
        }

        .faq-icon-wrapper:hover .platform-tooltip {
            opacity: 1;
            visibility: visible;
            transform: translateY(-50%) translateX(4px);
        }

        .propfirm-logo {
            width: 32px;
            height: 32px;
            object-fit: contain;
            flex-shrink: 0;
        }

        .product-link {
            color: var(--accent);
            text-decoration: underline;
            transition: all 0.3s ease;
            white-space: nowrap;
        }

        .product-link:hover {
            color: var(--warning);
            text-decoration: underline;
        }

        .price {
            font-weight: 800;
            font-size: 1.2rem;
            color: var(--green);
            font-family: 'IBM Plex Mono', monospace;
            text-shadow:
                0 0 5px rgba(34, 197, 94, 0.2),
                0 0 10px rgba(34, 197, 94, 0.1);
            letter-spacing: 0.5px;
        }


        .price-wrapper {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            position: relative;
            z-index: 2;
        }

        .info-bubble {
            width: 20px;
            height: 20px;
            background: linear-gradient(135deg, rgba(160, 175, 200, 0.3), rgba(192, 205, 221, 0.25));
            backdrop-filter: blur(10px);
            border: 1px solid rgba(160, 175, 200, 0.5);
            position: relative;
            z-index: 2;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 700;
            color: #c0cddd;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow:
                0 2px 12px rgba(160, 175, 200, 0.35),
                0 0 20px rgba(160, 175, 200, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }

        .info-bubble:hover {
            background: linear-gradient(135deg, rgba(160, 175, 200, 0.6), rgba(192, 205, 221, 0.5));
            border-color: rgba(160, 175, 200, 0.8);
            color: #fff;
            transform: scale(1.2);
            box-shadow:
                0 5px 20px rgba(160, 175, 200, 0.6),
                0 0 30px rgba(160, 175, 200, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }


        .info-bubble-price {
            width: 20px;
            height: 20px;
            background: linear-gradient(135deg, rgba(34, 197, 94, 0.5), rgba(22, 163, 74, 0.4));
            backdrop-filter: blur(10px);
            border: 1.5px solid rgba(34, 197, 94, 0.6);
            position: relative;
            z-index: 2;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 700;
            color: #fff;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow:
                0 3px 12px rgba(34, 197, 94, 0.35),
                0 0 15px rgba(34, 197, 94, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }

        .info-bubble-price:hover {
            background: linear-gradient(135deg, rgba(34, 197, 94, 0.7), rgba(22, 163, 74, 0.6));
            border-color: rgba(34, 197, 94, 0.9);
            color: #fff;
            transform: scale(1.2);
            box-shadow:
                0 5px 20px rgba(34, 197, 94, 0.6),
                0 0 30px rgba(34, 197, 94, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }


        .promo-popup {
            position: absolute;
            left: calc(100% + 12px);
            top: 50%;
            transform: translateY(-50%);
            background: linear-gradient(135deg, rgba(25, 25, 38, 0.98), rgba(20, 20, 32, 0.98));
            backdrop-filter: blur(15px);
            color: #e0e4ea;
            padding: 0.7rem 0.9rem;
            border-radius: 10px;
            font-size: 0.75rem;
            white-space: nowrap;
            z-index: 3;
            border: 1px solid rgba(160, 175, 200, 0.4);
            box-shadow:
                0 8px 24px rgba(0, 0, 0, 0.5),
                0 0 40px rgba(160, 175, 200, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s ease-out, visibility 0.2s ease-out, transform 0.2s ease-out;
            min-width: auto;
        }

        .promo-popup::before {
            content: '';
            position: absolute;
            right: 100%;
            top: 50%;
            transform: translateY(-50%);
            border: 6px solid transparent;
            border-right-color: rgba(160, 175, 200, 0.4);
        }

        .info-bubble:hover .promo-popup,
        .info-bubble-price:hover .promo-popup {
            opacity: 1;
            visibility: visible;
            transform: translateY(-50%) translateX(4px);
        }


        .payout-popup {
            left: auto;
            right: calc(100% + 12px);
        }

        .payout-popup::before {
            right: auto;
            left: 100%;
            border-right-color: transparent;
            border-left-color: rgba(160, 175, 200, 0.4);
        }

        .info-bubble:hover .payout-popup {
            transform: translateY(-50%) translateX(-4px);
        }

        .promo-popup-content {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }

        .promo-popup-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .promo-popup-label {
            color: rgba(160, 175, 200, 0.9);
            font-weight: 600;
            font-size: 0.7rem;
        }

        .promo-popup-value {
            color: #c0cddd;
            font-weight: 500;
            font-size: 0.7rem;
        }


        .country-year {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            justify-content: center;
        }

        .country-flag {
            display: inline-flex;
            align-items: center;
            width: 24px;
            height: 18px;
        }

        .country-flag .fi {
            font-size: 1.5em;
            line-height: 1;
        }

        .year {
            color: var(--text-muted);
            font-size: 0.9rem;
            font-weight: 500;
        }

        .badge {
            display: inline-block;
            padding: 0.3rem 0.8rem;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-align: center;
            white-space: nowrap;
        }

        .badge-success {
            background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(22, 163, 74, 0.14));
            color: #4ade80;
            border: 1px solid rgba(34, 197, 94, 0.35);
            box-shadow:
                0 0 8px rgba(34, 197, 94, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
            position: relative;
            text-shadow:
                0 0 6px rgba(110, 231, 183, 0.25),
                1px 1px 2px rgba(34, 197, 94, 0.2);
            font-weight: 700;
            letter-spacing: 1px;
        }

        .badge-warning {
            background: rgba(192, 132, 252, 0.15);
            color: var(--warning);
            border: 1px solid var(--warning);
        }

        .badge-info {
            background: rgba(100, 116, 139, 0.15);
            color: var(--text-muted);
            border: 1px solid var(--border);
        }

        .badge-paid {
            background: rgba(239, 68, 68, 0.15);
            color: #ef4444;
            border: 1px solid #ef4444;
        }

        .badge-test {
            background: rgba(234, 179, 8, 0.15);
            color: #f59e0b;
            border: 1px solid #f59e0b;
            display: inline-block;
            padding: 0.3rem 0.8rem;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-align: center;
            white-space: nowrap;
            position: relative;
            cursor: help;
        }

        .badge-paid {
            position: relative;
            cursor: help;
        }

        .badge-tooltip {
            position: absolute;
            right: calc(100% + 12px);
            top: 50%;
            transform: translateY(-50%);
            background: linear-gradient(135deg, rgba(25, 25, 38, 0.98), rgba(20, 20, 32, 0.98));
            backdrop-filter: blur(15px);
            color: #e0e4ea;
            padding: 0.6rem 0.9rem;
            border-radius: 10px;
            font-size: 0.75rem;
            white-space: nowrap;
            z-index: 3;
            border: 1px solid rgba(160, 175, 200, 0.4);
            box-shadow:
                0 8px 24px rgba(0, 0, 0, 0.5),
                0 0 40px rgba(160, 175, 200, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
            text-transform: none;
            letter-spacing: normal;
        }

        .badge-tooltip::after {
            content: '';
            position: absolute;
            left: 100%;
            top: 50%;
            transform: translateY(-50%);
            border: 6px solid transparent;
            border-left-color: rgba(160, 175, 200, 0.4);
        }

        .badge-paid:hover .badge-tooltip,
        .badge-test:hover .badge-tooltip {
            opacity: 1;
            visibility: visible;
        }

        .badge-danger {
            background: rgba(232, 121, 249, 0.15);
            color: var(--danger);
            border: 1px solid var(--danger);
        }


        .platform-logos-container {
            display: flex;
            gap: 0.3rem;
            justify-content: center;
            align-items: center;
        }

        .platform-logo-wrapper {
            position: relative;
            display: inline-block;
            width: 30px;
            height: 30px;
            margin: 0 auto;
        }


        .platform-logo-wrapper.free-icon {
            vertical-align: middle;
            margin: 0;
            width: 20px;
            height: 20px;
        }


        td:has(.platform-logo-wrapper:only-child) {
            text-align: center;
        }

        .platform-logo {
            width: 30px;
            height: 30px;
            object-fit: contain;
            display: block;
            cursor: pointer;
        }


        .platform-logo.free-icon-img {
            width: 18px;
            height: 18px;
        }


        .platform-tooltip {
            position: absolute;
            left: calc(100% + 12px);
            top: 50%;
            transform: translateY(-50%);
            background: linear-gradient(135deg, rgba(25, 25, 38, 0.98), rgba(20, 20, 32, 0.98));
            backdrop-filter: blur(15px);
            color: #e0e4ea;
            padding: 0.6rem 1.1rem;
            border-radius: 10px;
            font-size: 0.85rem;
            font-weight: 500;
            white-space: nowrap;
            z-index: 4;
            border: 1px solid rgba(160, 175, 200, 0.4);
            box-shadow:
                0 8px 24px rgba(0, 0, 0, 0.5),
                0 0 40px rgba(160, 175, 200, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s ease-out, visibility 0.2s ease-out, transform 0.2s ease-out;
        }


        .platform-tooltip::before {
            content: '';
            position: absolute;
            right: 100%;
            top: 50%;
            transform: translateY(-50%);
            border: 6px solid transparent;
            border-right-color: rgba(160, 175, 200, 0.4);
        }


        .platform-logo-wrapper:hover {
            z-index: 9;
        }

        .platform-logo-wrapper:hover .platform-tooltip {
            opacity: 1;
            visibility: visible;
            transform: translateY(-50%) translateX(4px);
        }

        .promo-code {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.08));
            padding: 0.2rem 0.5rem;
            border-radius: 6px;
            font-family: 'IBM Plex Mono', monospace;
            font-weight: 700;
            font-size: 0.85em;
            color: #4ade80;
            border: 1px solid rgba(34, 197, 94, 0.4);
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
            position: relative;
            box-shadow:
                0 2px 8px rgba(34, 197, 94, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
            letter-spacing: 0.5px;
        }

        @property --angle {
            syntax: '<angle>';
            initial-value: 0deg;
            inherits: false;
        }

        @keyframes borderRotate {
            0% {
                --angle: 0deg;
            }

            100% {
                --angle: 360deg;
            }
        }

        .promo-code:hover {
            background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(34, 197, 94, 0.15));
            border-color: rgba(34, 197, 94, 0.7);
            color: #6ee7b7;
            transform: translateY(-1px);
            box-shadow:
                0 4px 16px rgba(34, 197, 94, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        .promo-code:active {
            transform: translateY(0);
        }

        .no-results {
            text-align: center;
            padding: 3rem;
            color: var(--text-muted);
            font-size: 1.2rem;
        }

        /* Responsive */
        @media (max-width: 1200px) {
            .filters-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .filters-bottom-controls {
                position: relative;
                bottom: auto;
                right: auto;
                margin-top: 2rem;
                flex-direction: column;
                align-items: stretch;
                gap: 1rem;
            }

            .reset-filters {
                width: 100%;
            }
        }

        @media (max-width: 950px) {
            .hero {
                padding: 2rem 1rem;
            }

            .hero h1 {
                font-size: 1.8rem;
                line-height: 1.2;
            }

            .hero p {
                font-size: 0.95rem;
            }

            .promo-banner {
                padding: 1rem;
                margin: 1rem auto;
            }

            .promo-banner h3 {
                font-size: 1rem;
            }

            .filters-section {
                padding: 0.8rem 1rem;
            }

            .filters-grid {
                grid-template-columns: 1fr;
                gap: 0.6rem;
                justify-items: center;
            }

            .filter-group {
                gap: 0.2rem;
                width: 100%;
                max-width: 320px;
            }

            .filter-group label {
                font-size: 0.8rem;
            }

            .filter-group>div {
                margin-top: 0.2rem !important;
            }

            .filter-group select,
            .filter-group input {
                font-size: 0.85rem;
                padding: 0.5rem;
            }

            .custom-select-trigger {
                padding: 0.5rem;
                font-size: 0.85rem;
            }

            .reset-btn {
                padding: 0.6rem 1rem;
                font-size: 0.9rem;
            }

            .reset-filters {
                position: static !important;
                margin-top: 1rem;
                width: 100%;
            }

            .badge,
            .badge-test {
                font-size: 0.7rem;
                padding: 0.25rem 0.6rem;
            }

            .comparison-section {
                padding: 1.5rem 1rem;
            }

            table {
                font-size: 0.8rem;
                min-width: 1200px;
            }

            th,
            td {
                padding: 0.6rem 0.4rem;
                white-space: nowrap;
            }

            th {
                font-size: 0.75rem;
            }

            .product-name {
                font-size: 0.85rem;
            }

            .promo-code {
                padding: 0.3rem 0.5rem;
                font-size: 0.8rem;
                gap: 0.2rem;
            }

            .table-wrapper {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            .badge {
                padding: 0.2rem 0.4rem;
                font-size: 0.7rem;
            }

            /* Footer mobile */
            footer {
                padding: 1.5rem 1rem;
                font-size: 0.85rem;
            }
        }

        @media (max-width: 480px) {
            .hero h1 {
                font-size: 1.5rem;
            }

            table {
                font-size: 0.75rem;
                min-width: 1200px;
            }

            th,
            td {
                padding: 0.5rem 0.3rem;
            }

            .product-name {
                font-size: 0.8rem;
            }

            .promo-code {
                font-size: 0.75rem;
            }
        }


        .loading {
            display: none;
            text-align: center;
            padding: 2rem;
        }

        .loading.active {
            display: block;
        }

        .spinner {
            border: 3px solid var(--border);
            border-top: 3px solid var(--accent);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }

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

            100% {
                transform: rotate(360deg);
            }
        }

        /* ===== SIDEBAR HEADER — premium propfirm branding ===== */
        .sb-header {
            padding: 20px 22px 16px;
            border-bottom: 1px solid rgba(160,175,200,0.1);
            flex-shrink: 0;
            position: relative;
            z-index: 1;
            background: linear-gradient(180deg, rgba(14,16,20,0.6) 0%, transparent 100%);
        }
        .sb-back {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--text-muted);
            text-decoration: none;
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 2px;
            text-transform: uppercase;
            transition: all 0.25s ease;
            margin-bottom: 16px;
            padding: 6px 12px;
            border-radius: 6px;
            border: 1px solid transparent;
        }
        .sb-back:hover {
            color: var(--accent);
            background: rgba(160,175,200,0.06);
            border-color: rgba(160,175,200,0.12);
        }
        .sb-back svg { flex-shrink: 0; transition: transform 0.25s cubic-bezier(0.22,1,0.36,1) }
        .sb-back:hover svg { transform: translateX(-4px) }
        .sb-brand {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .sb-logo-link {
            flex-shrink: 0;
            line-height: 0;
            transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
        }
        .sb-logo-link:hover {
            filter: brightness(1.15);
            transform: scale(1.05);
        }
        .sb-logo {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            object-fit: contain;
            padding: 6px;
            background: rgba(20,20,30,0.6);
            border: 1px solid rgba(160,175,200,0.15);
            box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.04) inset;
        }
        .sb-brand-name {
            font-size: 1.35rem;
            font-weight: 700;
            color: #fff;
            letter-spacing: -0.3px;
            margin: 0;
            line-height: 1.2;
            text-shadow: none;
        }
        .sb-tp {
            display: flex;
            align-items: center;
            gap: 6px;
            text-decoration: none;
            margin-top: 5px;
            transition: all 0.25s ease;
            padding: 3px 0;
        }
        .sb-tp:hover {
            filter: brightness(1.1);
        }
        .sb-tp-score {
            font-size: 0.95rem;
            font-weight: 700;
            color: #22c55e;
            font-family: 'IBM Plex Mono', monospace;
            text-shadow: none;
        }
        .sb-tp-stars { font-size: 0.8rem; color: #22c55e; letter-spacing: 1px }
        .sb-tp-stars .half { background:linear-gradient(90deg,#22c55e 50%,rgba(160,175,200,0.3) 50%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text }
        .sb-tp-stars .empty { color: rgba(160,175,200,0.35) }
        .sb-tp-count { font-size: 0.8rem; color: var(--text-muted) }

        /* Content toolbar — now hidden, links moved to sidebar */
        .content-toolbar { display: none }

        /* ===== SIDEBAR EXTERNAL LINKS ===== */
        .sb-links {
            display: flex;
            gap: 8px;
            margin-top: 16px;
            flex-wrap: wrap;
        }
        .sb-ext-link {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 0.8rem;
            font-weight: 500;
            color: var(--text-muted);
            text-decoration: none;
            padding: 8px 16px;
            border-radius: 9px;
            border: 1px solid rgba(160,175,200,0.1);
            background: rgba(0,0,0,0.25);
            transition: all 0.25s cubic-bezier(0.22,1,0.36,1);
            position: relative;
            overflow: hidden;
        }
        .sb-ext-link::before {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: 8px;
            background: linear-gradient(135deg, rgba(160,175,200,0.2), rgba(160,175,200,0.1), rgba(192,205,221,0.15));
            z-index: -1;
            opacity: 0;
            transition: opacity 0.25s ease;
        }
        .sb-ext-link:hover {
            color: var(--text);
            border-color: rgba(160,175,200,0.3);
            background: rgba(160,175,200,0.08);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 0 12px rgba(160,175,200,0.08);
        }
        .sb-ext-link:hover::before { opacity: 1 }
        .sb-ext-link svg { opacity: 0.5; transition: opacity 0.2s }
        .sb-ext-link:hover svg { opacity: 1 }
        .sb-promo { font-size: 0.82rem; margin-top: 2px; }

        /* Focus states for a11y */
        .sb-ext-link:focus-visible,
        .sb-back:focus-visible,
        .nav-item:focus-visible,
        .nav-subitem:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
            border-radius: 8px;
        }

        /* Legacy back-link — hidden */
        .back-link { display: none }

        .back-link:hover {
            color: var(--text);
            background: rgba(160, 175, 200, 0.2);
            border-color: rgba(160, 175, 200, 0.4);
        }

        .back-link svg {
            position: absolute;
            left: 0.8rem;
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            transition: transform 0.2s ease;
        }

        .back-link:hover svg {
            transform: translateX(-3px);
        }

        /* Layout avec sidebar verticale — app-like, fullscreen */
        .page-layout {
            display: flex;
            height: 100%;
            overflow: hidden;
        }

        /* Sidebar navigation — premium full-height panel */
        .sidebar-nav {
            width: 300px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            background: var(--panel-bg);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border-right: 1px solid rgba(160,175,200,0.12);
            box-shadow: inset 0 0 30px rgba(160,175,200,0.05),
                        4px 0 30px rgba(0,0,0,0.5);
            z-index: 1;
            position: relative;
            overflow: hidden;
            transition: box-shadow 0.4s ease;
        }
        .sidebar-nav:hover {
            box-shadow: inset 0 0 30px rgba(160,175,200,0.08),
                        4px 0 40px rgba(0,0,0,0.6);
        }
        /* Sidebar pseudo-elements — clean */
        .sidebar-nav::after { display: none }
        /* Vertical progress track on sidebar right edge */
        .sidebar-nav::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 3px;
            height: var(--scroll-progress, 0%);
            background: linear-gradient(180deg, rgba(96,165,250,0.6) 0%, rgba(96,165,250,0.25) 50%, rgba(148,163,184,0.15) 100%);
            z-index: 10;
            transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
            border-radius: 4px;
            opacity: 1;
        }

        .sidebar-nav-content {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 16px 16px 30px;
            background: transparent;
            border: none;
            border-radius: 0;
            box-shadow: none;
            position: relative;
            z-index: 1;
            counter-reset: nav-counter;
        }

        /* ===== NAV ITEMS — numbered, color-aware ===== */
        .nav-item, .nav-group { counter-increment: nav-counter }

        .nav-item {
            display: flex;
            align-items: flex-start;
            gap: 0.65rem;
            padding: 0.7rem 0.85rem;
            color: var(--text-muted);
            text-decoration: none !important;
            font-size: 0.88rem;
            font-weight: 500;
            border-radius: 10px;
            transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
            position: relative;
            margin-bottom: 2px;
        }

        .nav-item::after {
            display: none !important;
        }

        /* Section number badge */
        .nav-dot {
            width: 24px;
            height: 24px;
            border-radius: 8px;
            background: rgba(160, 175, 200, 0.06);
            border: 1px solid rgba(160, 175, 200, 0.1);
            flex-shrink: 0;
            margin-top: 1px;
            transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.6rem;
            font-weight: 700;
            color: var(--text-muted);
            font-family: 'IBM Plex Mono', monospace;
        }
        .nav-dot::before {
            content: counter(nav-counter, decimal-leading-zero);
        }

        /* Nav section SVG icons */
        .nav-item > span:last-child,
        .nav-parent > span:nth-child(2) {
            display: flex;
            align-items: flex-start;
            gap: 5px;
        }

        .nav-icon {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
            opacity: 0.45;
            transition: opacity 0.3s ease, color 0.3s ease;
            display: block;
            margin-top: 2px;
        }
        .nav-item:hover .nav-icon,
        .nav-parent:hover .nav-icon {
            opacity: 0.7;
        }
        .nav-item.active .nav-icon {
            opacity: 1;
            color: var(--group-accent, #60a5fa);
        }
        .nav-group.active .nav-icon {
            opacity: 1;
            color: var(--group-accent, #60a5fa);
        }

        .nav-item:hover {
            color: #e0e4ea;
            background: rgba(160, 175, 200, 0.06);
        }

        .nav-item:hover .nav-dot {
            background: rgba(160, 175, 200, 0.12);
            border-color: rgba(160, 175, 200, 0.25);
            color: #e0e4ea;
        }

        .nav-item.active {
            color: #ffffff;
            background: rgba(160, 175, 200, 0.08);
            font-weight: 600;
        }

        .nav-item.active .nav-dot {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
            box-shadow: 0 0 12px rgba(160, 175, 200, 0.3);
        }

        /* ===== NAV GROUPS (collapsible) — section-accent aware ===== */
        .nav-group {
            margin-bottom: 2px;
            --group-accent: var(--text-muted);
        }
        /* Map each group to its section accent */
        .nav-group[data-section="comptes"] { --group-accent: #f59e0b }
        .nav-group[data-section="regles"] { --group-accent: #22c55e }
        .nav-group[data-section="styles-trading"] { --group-accent: #a78bfa }
        .nav-group[data-section="plateforme"] { --group-accent: #06b6d4 }
        .nav-group[data-section="commissions"] { --group-accent: #fb923c }
        .nav-group[data-section="funded"] { --group-accent: #3b82f6 }
        .nav-group[data-section="verdict"] { --group-accent: #4ade80 }
        .nav-group[data-section="bon-a-savoir"] { --group-accent: #f472b6 }
        /* Simple nav-items too */
        .nav-item[data-section="presentation"] { --group-accent: #60a5fa }
        .nav-item[data-section="faq"] { --group-accent: #c0cddd }

        .nav-parent {
            display: flex;
            align-items: flex-start;
            gap: 0.65rem;
            padding: 0.7rem 0.85rem;
            color: var(--text-muted);
            font-size: 0.88rem;
            font-weight: 500;
            border-radius: 10px;
            transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
            position: relative;
            cursor: pointer;
            user-select: none;
        }

        .nav-parent:hover {
            color: #e0e4ea;
            background: rgba(160, 175, 200, 0.06);
        }

        .nav-parent:hover .nav-dot {
            background: rgba(160, 175, 200, 0.12);
            border-color: rgba(160, 175, 200, 0.25);
            color: #e0e4ea;
        }

        .nav-group.active > .nav-parent {
            color: #ffffff;
            background: color-mix(in srgb, var(--group-accent) 8%, transparent);
            font-weight: 600;
            border-radius: 10px;
        }

        .nav-group.active > .nav-parent .nav-dot {
            background: var(--group-accent);
            border-color: var(--group-accent);
            color: #fff;
            box-shadow: 0 0 12px color-mix(in srgb, var(--group-accent) 40%, transparent);
        }

        /* Active nav-item uses its own accent */
        .nav-item.active {
            background: color-mix(in srgb, var(--group-accent) 8%, transparent);
        }
        .nav-item.active .nav-dot {
            background: var(--group-accent);
            border-color: var(--group-accent);
            box-shadow: 0 0 12px color-mix(in srgb, var(--group-accent) 40%, transparent);
        }

        /* Chevron */
        .nav-chevron {
            margin-left: auto;
            display: flex;
            align-items: center;
            opacity: 0.3;
            transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
            margin-top: 4px;
        }

        .nav-parent:hover .nav-chevron {
            opacity: 0.6;
        }

        .nav-group.open .nav-chevron {
            transform: rotate(90deg);
            opacity: 0.8;
        }
        .nav-group.active .nav-chevron {
            color: var(--group-accent);
            opacity: 0.9;
        }

        /* ===== SUBMENU — vertical line connector ===== */
        .nav-submenu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.45s cubic-bezier(0.0, 0, 0.2, 1);
            position: relative;
            margin-left: 28px;
            margin-top: 4px;
            padding-left: 14px;
            border-left: 1.5px solid rgba(160, 175, 200, 0.08);
        }
        .nav-group.open .nav-submenu {
            border-left-color: color-mix(in srgb, var(--group-accent) 20%, transparent);
        }

        .nav-group.open .nav-submenu {
            max-height: 280px;
            transition: max-height 0.45s cubic-bezier(0.0, 0.0, 0.2, 1);
        }

        .nav-subitem {
            display: block;
            padding: 0.35rem 0.75rem;
            color: var(--text-muted);
            text-decoration: none;
            font-size: 0.78rem;
            font-weight: 400;
            border-radius: 6px;
            position: relative;
            transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
            margin-bottom: 1px;
        }

        /* Horizontal connector dash from vertical line */
        .nav-subitem::before {
            content: '';
            position: absolute;
            left: -14px;
            top: 50%;
            width: 8px;
            height: 1.5px;
            background: rgba(160, 175, 200, 0.12);
            transition: all 0.25s ease;
        }

        .nav-subitem:hover {
            color: #e0e4ea;
            padding-left: 0.9rem;
        }

        .nav-subitem:hover::before {
            background: var(--group-accent);
            width: 10px;
        }

        .nav-subitem.active {
            color: #fff;
            font-weight: 600;
            background: color-mix(in srgb, var(--group-accent) 12%, transparent);
            padding-left: 0.9rem;
        }

        .nav-subitem.active::before {
            background: var(--group-accent);
            width: 12px;
            height: 2px;
            box-shadow: 0 0 8px color-mix(in srgb, var(--group-accent) 60%, transparent);
        }

        /* ===== SIDEBAR SCROLLBAR — hidden to prevent flash on submenu toggle ===== */
        .sidebar-nav-content {
            scrollbar-width: none;
        }
        .sidebar-nav-content::-webkit-scrollbar { display: none }

        /* Sliding highlight — disabled */
        .nav-highlight { display: none; }

        /* ===== READING PROGRESS BAR (bottom of sidebar) ===== */
        .sb-progress-tracker {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px 12px;
            border-top: 1px solid rgba(160,175,200,0.06);
            flex-shrink: 0;
        }

        .sb-progress-bar-wrap {
            flex: 1;
            height: 3px;
            background: rgba(160,175,200,0.08);
            border-radius: 3px;
            overflow: hidden;
        }

        .sb-progress-bar-fill {
            height: 100%;
            width: 0%;
            border-radius: 3px;
            background: #60a5fa;
            transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
            position: relative;
        }

        .sb-progress-bar-fill::after {
            content: '';
            position: absolute;
            right: 0;
            top: -2px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #60a5fa;
            box-shadow: 0 0 8px rgba(96,165,250,0.5);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .sb-progress-bar-fill.has-progress::after {
            opacity: 1;
        }

        .sb-progress-label {
            font-size: 0.68rem;
            font-weight: 600;
            font-family: 'IBM Plex Mono', monospace;
            color: var(--text-muted);
            white-space: nowrap;
            letter-spacing: 0.5px;
            min-width: 38px;
            text-align: right;
            transition: color 0.3s ease;
        }

        .sb-progress-label .progress-count {
            color: var(--text-muted);
            font-weight: 700;
        }

        /* ===== ENHANCED ACTIVE STATES — Glassmorphism (Test 4) ===== */
        .nav-item.active,
        .nav-group.active > .nav-parent {
            position: relative;
            z-index: 2;
        }

        /* Active dot pulse animation */
        @keyframes dotPulse {
            0%, 100% { box-shadow: 0 0 12px color-mix(in srgb, var(--group-accent) 40%, transparent); }
            50% { box-shadow: 0 0 20px color-mix(in srgb, var(--group-accent) 60%, transparent), 0 0 4px color-mix(in srgb, var(--group-accent) 30%, transparent); }
        }

        .nav-item.active .nav-dot,
        .nav-group.active > .nav-parent .nav-dot {
            animation: dotPulse 2.5s ease-in-out infinite;
        }

        /* Subitem active — enhanced connector glow */
        .nav-subitem.active::before {
            transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        }

        @keyframes connectorGlow {
            0%, 100% { box-shadow: 0 0 8px color-mix(in srgb, var(--group-accent) 60%, transparent); }
            50% { box-shadow: 0 0 14px color-mix(in srgb, var(--group-accent) 80%, transparent); }
        }

        .nav-subitem.active::before {
            animation: connectorGlow 2s ease-in-out infinite;
        }

        /* ===== SECTION COLOR PILLS (Test 9 inspiration) ===== */
        .nav-section-badge {
            display: inline-flex;
            align-items: center;
            padding: 2px 7px;
            border-radius: 6px;
            font-size: 0.58rem;
            font-weight: 700;
            font-family: 'IBM Plex Mono', monospace;
            letter-spacing: 0.5px;
            background: color-mix(in srgb, var(--group-accent) 10%, transparent);
            color: var(--group-accent);
            opacity: 0;
            transform: translateX(4px);
            transition: opacity 0.25s ease, transform 0.25s ease;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .nav-item > .nav-section-badge {
            margin-left: auto;
        }

        .nav-item:hover .nav-section-badge,
        .nav-parent:hover .nav-section-badge,
        .nav-item.active .nav-section-badge,
        .nav-group.active .nav-section-badge {
            opacity: 1;
            transform: translateX(0);
        }

        /* ===== HOVER PREVIEW TOOLTIP (Test 14 inspiration) ===== */
        .nav-preview {
            position: absolute;
            left: calc(100% + 12px);
            top: 50%;
            transform: translateY(-50%) translateX(-4px);
            background: rgba(18, 20, 28, 0.95);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(160,175,200,0.12);
            border-radius: 10px;
            padding: 10px 14px;
            min-width: 180px;
            max-width: 220px;
            pointer-events: none;
            opacity: 0;
            z-index: 200;
            transition: opacity 0.2s ease, transform 0.2s ease;
            box-shadow: 0 8px 32px rgba(0,0,0,0.4);
        }

        .nav-item:hover .nav-preview,
        .nav-parent:hover .nav-preview {
            opacity: 1;
            transform: translateY(-50%) translateX(0);
        }

        .nav-preview-title {
            font-size: 0.72rem;
            font-weight: 600;
            color: #fff;
            margin-bottom: 4px;
        }

        .nav-preview-desc {
            font-size: 0.65rem;
            color: var(--text-muted);
            line-height: 1.4;
            margin-bottom: 6px;
        }

        .nav-preview-pills {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
        }

        .nav-preview-pill {
            font-size: 0.55rem;
            font-weight: 600;
            font-family: 'IBM Plex Mono', monospace;
            padding: 2px 6px;
            border-radius: 4px;
            background: rgba(160,175,200,0.08);
            color: var(--group-accent, #60a5fa);
            border: 1px solid rgba(160,175,200,0.06);
        }

        /* Hide preview on mobile / small sidebars */
        @media (max-width: 1100px) {
            .nav-preview { display: none; }
        }

        /* ===== STAGGERED ENTRANCE ANIMATION ===== */
        @keyframes navItemSlideIn {
            from { opacity: 0; transform: translateX(-8px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .sidebar-nav-content > .nav-item,
        .sidebar-nav-content > .nav-group {
            animation: navItemSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards;
        }

        .sidebar-nav-content > :nth-child(1) { animation-delay: 0.05s; }
        .sidebar-nav-content > :nth-child(2) { animation-delay: 0.08s; }
        .sidebar-nav-content > :nth-child(3) { animation-delay: 0.11s; }
        .sidebar-nav-content > :nth-child(4) { animation-delay: 0.14s; }
        .sidebar-nav-content > :nth-child(5) { animation-delay: 0.17s; }
        .sidebar-nav-content > :nth-child(6) { animation-delay: 0.20s; }
        .sidebar-nav-content > :nth-child(7) { animation-delay: 0.23s; }
        .sidebar-nav-content > :nth-child(8) { animation-delay: 0.26s; }
        .sidebar-nav-content > :nth-child(9) { animation-delay: 0.29s; }
        .sidebar-nav-content > :nth-child(10) { animation-delay: 0.32s; }

        /* Sommaire horizontal supprimé */
        .table-of-contents {
            display: none;
        }

        .toc-container {
            display: none;
        }

        .toc-link {
            display: none;
        }


        .main-content {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;
        }

        /* Hero-article removed — replaced by sb-header + content-toolbar */
        .hero-article { display: none }

        /* Scrollable content area — premium, more aeration */
        .content-scroll {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 0 48px 60px;
            -webkit-overflow-scrolling: touch;
            position: relative;
            scrollbar-gutter: stable;
            scroll-behavior: smooth;
        }
        .content-scroll::-webkit-scrollbar { width: 5px; height: 5px }
        .content-scroll::-webkit-scrollbar-track { background: transparent }
        .content-scroll::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px }

        .guide-footer {
            text-align: center;
            padding: 48px 20px 32px;
            color: var(--text-muted);
            font-size: 0.75rem;
            border-top: 1px solid rgba(160,175,200,0.08);
            margin-top: 48px;
            letter-spacing: 0.3px;
            position: relative;
        }
        .guide-footer::before {
            content: '';
            position: absolute;
            top: -1px;
            left: 20%;
            right: 20%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(160,175,200,0.15), transparent);
        }
        .guide-footer p { margin: 0.4rem 0 }

        .hero-content {
            background: transparent;
            border: none;
            border-radius: 0;
            padding: 72px 28px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            box-shadow: none;
        }

        .hero-logo-link {
            flex-shrink: 0;
            line-height: 0;
            transition: filter 0.2s ease, transform 0.2s ease;
        }

        .hero-logo-link:hover {
            filter: brightness(1.15);
            transform: scale(1.05);
        }

        .hero-logo {
            width: 72px;
            height: 72px;
            border-radius: 14px;
            object-fit: contain;
            filter: none;
        }

        .hero-center {
            flex: 1;
        }

        .hero-title-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3rem;
        }

        .hero-article h1 {
            font-size: 2.7rem;
            font-weight: 700;
            letter-spacing: -0.5px;
            margin: 0;
            white-space: nowrap;
            flex-shrink: 0;
            background: linear-gradient(135deg, #c0cddd, #e0e4ea);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-title-link {
            text-decoration: none;
            color: inherit;
            -webkit-text-fill-color: inherit;
            background: inherit;
            -webkit-background-clip: inherit;
            background-clip: inherit;
            text-shadow: 0 0 0px transparent;
            transition: text-shadow 0.4s ease, -webkit-text-fill-color 0.4s ease;
        }

        .hero-title-link:hover {
            -webkit-text-fill-color: #a0afc8;
            text-shadow:
                0 0 7px rgba(160, 175, 200, 0.6),
                0 0 20px rgba(160, 175, 200, 0.4),
                0 0 40px rgba(160, 175, 200, 0.2);
        }

        .hero-external-links {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.8rem;
            flex: 1;
        }

        .hero-ext-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 0.95rem;
            font-weight: 500;
            color: rgba(160, 175, 200, 0.8);
            text-decoration: none;
            padding: 8px 20px;
            border-radius: 8px;
            border: 1px solid rgba(160, 175, 200, 0.2);
            background: rgba(160, 175, 200, 0.08);
            transition: all 0.3s ease;
        }

        .hero-ext-link:hover {
            color: #c0cddd;
            border-color: rgba(160, 175, 200, 0.45);
            background: rgba(160, 175, 200, 0.15);
            box-shadow: 0 0 12px rgba(160, 175, 200, 0.2);
        }

        .hero-ext-link svg {
            opacity: 0.7;
            transition: opacity 0.3s ease;
        }

        .hero-ext-link:hover svg {
            opacity: 1;
        }

        .hero-ext-link.highlight,
        .toolbar-link.highlight,
        .sb-ext-link.highlight {
            animation: heroLinkFlash 0.5s ease-in-out 4;
            box-shadow: 0 0 16px rgba(160, 175, 200, 0.5), 0 0 6px rgba(160, 175, 200, 0.3);
            border-color: rgba(160, 175, 200, 0.6);
            background: rgba(160, 175, 200, 0.25);
            color: #c0cddd;
        }

        @keyframes heroLinkFlash {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.3;
            }
        }

        /* E-E-A-T : meta article (date + méthodo) */
        .article-meta {
            display: flex;
            align-items: center;
            gap: 1.2rem;
            flex-wrap: wrap;
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.45);
            padding: 0.6rem 0 0.2rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            margin-bottom: 1.5rem;
        }

        .article-meta span {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .article-meta svg {
            opacity: 0.5;
            flex-shrink: 0;
        }

        .article-meta a {
            color: rgba(160, 175, 200, 0.6);
            text-decoration: none;
            transition: color 0.2s;
        }

        .article-meta a:hover {
            color: #a0afc8;
        }

        /* Widget Trustpilot */
        .trustpilot-widget {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.1rem;
            flex-shrink: 0;
        }

        .trustpilot-link {
            text-decoration: none;
            filter: drop-shadow(0 0 0px transparent);
            transition: filter 0.4s ease, transform 0.4s ease;
        }

        .trustpilot-link:hover {
            opacity: 1;
            transform: scale(1.05);
            filter: brightness(1.15);
        }

        .trustpilot-header {
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--text-muted);
        }

        .trustpilot-score {
            display: flex;
            align-items: baseline;
            gap: 0.15rem;
        }

        .score-number {
            font-size: 1.2rem;
            font-weight: 700;
            color: #22c55e;
        }

        .score-max {
            font-size: 0.85rem;
            color: var(--text-muted);
        }

        .trustpilot-stars {
            display: flex;
            gap: 0.15rem;
        }

        .trustpilot-star {
            color: #22c55e;
            font-size: 0.8rem;
        }

        .trustpilot-star.half {
            background: linear-gradient(90deg, #22c55e 50%, rgba(255, 255, 255, 0.15) 50%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .trustpilot-star.empty {
            color: rgba(255, 255, 255, 0.15);
        }

        .trustpilot-reviews {
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        .trustpilot-reviews strong {
            color: var(--text);
        }

        /* ===== NOISE TEXTURE OVERLAY ===== */
        .content-scroll::before {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 9998;
            opacity: 0.025;
            mix-blend-mode: overlay;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            background-size: 128px 128px;
        }
        /* ===== AMBIENT GLOW ORBS in content area (disabled — caused visible gradient cutoff) ===== */

        /* ===== REDUCED MOTION ===== */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* ===== NEW KEYFRAMES for radical redesign ===== */
        @keyframes gradientShift {
            0% { background-position: 0% 50% }
            50% { background-position: 100% 50% }
            100% { background-position: 0% 50% }
        }
        @keyframes borderGlow {
            0%, 100% { opacity: 0.3 }
            50% { opacity: 0.8 }
        }
        @keyframes numberFloat {
            0%, 100% { transform: translateY(0) rotate(-12deg) }
            50% { transform: translateY(-8px) rotate(-12deg) }
        }
        @keyframes revealLine {
            from { width: 0 }
            to { width: 100% }
        }

        /* ===== CSS COUNTER for section numbering ===== */
        .content-scroll { counter-reset: section-counter }
        .section { counter-increment: section-counter }

        /* ===== SECTION CARDS — radical visual variety ===== */
        .section {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 2.2rem 2.5rem 2rem;
            margin-bottom: 28px;
            scroll-margin-top: 32px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
            animation: sectionIn 0.6s cubic-bezier(0.16,1,0.3,1) both;
            box-shadow: 0 4px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.03);
        }
        /* Decorative section number watermark */
        .section::before {
            content: counter(section-counter, decimal-leading-zero);
            position: absolute;
            top: -10px;
            right: 24px;
            font-size: 6rem;
            font-weight: 800;
            color: rgba(160,175,200,0.03);
            font-family: 'IBM Plex Mono', monospace;
            z-index: 0;
            pointer-events: none;
            line-height: 1;
            animation: numberFloat 8s ease-in-out infinite;
            animation-delay: calc(var(--i, 0) * -1.5s);
        }
        .section:hover {
            border-color: color-mix(in srgb, var(--section-accent, var(--accent)) 30%, transparent);
            transform: translateY(-3px);
            box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 0 40px color-mix(in srgb, var(--section-accent, var(--accent)) 8%, transparent);
        }
        /* Colored top gradient border on sections */
        .section::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--section-accent, var(--accent)), color-mix(in srgb, var(--section-accent, var(--accent)) 30%, transparent));
            z-index: 2;
            opacity: 0.6;
            transition: opacity 0.4s ease;
        }
        .section:hover::after { opacity: 1 }

        /* ===== Section-specific accent colors ===== */
        #presentation { --section-accent: #60a5fa; --i: 0 }
        #comptes { --section-accent: #f59e0b; --i: 1 }
        #regles { --section-accent: #22c55e; --i: 2 }
        #styles-trading { --section-accent: #a78bfa; --i: 3 }
        #plateforme { --section-accent: #06b6d4; --i: 4 }
        #commissions { --section-accent: #fb923c; --i: 5 }
        #funded { --section-accent: #3b82f6; --i: 6 }
        #verdict { --section-accent: #4ade80; --i: 7 }
        #bon-a-savoir { --section-accent: #f472b6; --i: 8 }
        #faq { --section-accent: #c0cddd; --i: 9 }

        /* ===== HERO-STYLE SECTIONS — no card, dramatic open layout ===== */
        /* Presentation — same style as all other sections */

        /* Verdict section — same base as others */

        /* FAQ section — same treatment as others */

        /* All sections share the same background treatment */

        /* Staggered entrance */
        .section:nth-child(1) { animation-delay: 0s }
        .section:nth-child(2) { animation-delay: 0.08s }
        .section:nth-child(3) { animation-delay: 0.16s }
        .section:nth-child(4) { animation-delay: 0.24s }
        .section:nth-child(5) { animation-delay: 0.32s }
        .section:nth-child(6) { animation-delay: 0.40s }
        .section:nth-child(7) { animation-delay: 0.48s }
        .section:nth-child(8) { animation-delay: 0.56s }
        .section:nth-child(9) { animation-delay: 0.64s }
        .section:nth-child(10) { animation-delay: 0.72s }

        /* ===== GRADIENT DIVIDERS between sections ===== */
        .section + .section {
            margin-top: 6px;
        }
        /* Decorative separator dot between sections */
        .section + .section::before {
            content: counter(section-counter, decimal-leading-zero);
            /* keep the counter but also add a dot separator via the section gap */
        }

        /* ===== ALTERNATING section widths for visual rhythm ===== */
        .section:nth-child(odd) {
            margin-left: 0;
            margin-right: 0;
        }
        .section:nth-child(even) {
            margin-left: 8px;
            margin-right: 8px;
            border-radius: 22px;
        }
        /* Unified subtle radial glow per section accent */
        .section {
            background-image: radial-gradient(ellipse at 10% 90%, color-mix(in srgb, var(--section-accent) 5%, transparent) 0%, transparent 55%);
        }

        /* ===== H2 — dramatic section headers ===== */
        .section h2 {
            font-size: 1.85rem;
            font-weight: 800;
            color: #ffffff;
            letter-spacing: -0.8px;
            margin-bottom: 1.4rem;
            padding-bottom: 1rem;
            border-bottom: none;
            position: relative;
            z-index: 1;
            line-height: 1.25;
        }
        /* Gradient accent underline for h2 */
        .section h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 120px;
            height: 3px;
            background: linear-gradient(90deg, var(--section-accent, var(--accent)), transparent);
            border-radius: 2px;
            animation: accentSlide 0.8s cubic-bezier(0.16,1,0.3,1) both;
        }
        /* Section label pill above h2 — via h2::before */
        .section h2::before {
            content: '';
            display: block;
            width: fit-content;
            font-size: 0.55rem;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--section-accent, var(--accent));
            margin-bottom: 0.7rem;
            padding: 4px 12px;
            background: color-mix(in srgb, var(--section-accent, var(--accent)) 8%, transparent);
            border: 1px solid color-mix(in srgb, var(--section-accent, var(--accent)) 15%, transparent);
            border-radius: 999px;
        }
        /* Section-specific label pills */
        #presentation h2::before { content: 'Vue d\'ensemble' }
        #comptes h2::before { content: 'Évaluations' }
        #regles h2::before { content: 'Règles' }
        #styles-trading h2::before { content: 'Styles de trading' }
        #plateforme h2::before { content: 'Plateformes' }
        #commissions h2::before { content: 'Instruments' }
        #funded h2::before { content: 'Compte financé' }
        #verdict h2::before { content: 'Notre verdict' }
        #bon-a-savoir h2::before { content: 'Bon à savoir' }
        #faq h2::before { content: 'FAQ' }

        /* Presentation h2 — hero style */
        #presentation h2 {
            font-size: 2.2rem;
            letter-spacing: -1.2px;
            line-height: 1.15;
            color: #fff;
            text-shadow: none;
        }
        #presentation h2::after { width: 0; display: none }

        /* Verdict h2 — special dramatic treatment */
        #verdict h2 {
            font-size: 1.9rem;
            color: #fff;
            text-shadow: none;
        }

        /* ===== H3 — subsection headers with dramatic left accent ===== */
        .section h3 {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--text);
            margin: 2.4rem 0 1.2rem;
            position: relative;
            padding-left: 1.1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid rgba(160,175,200,0.06);
            scroll-margin-top: 24px;
        }
        .section h3::before {
            content: '';
            position: absolute;
            left: 0;
            top: 4px;
            bottom: 8px;
            width: 4px;
            background: linear-gradient(180deg, var(--section-accent, var(--accent)), color-mix(in srgb, var(--section-accent, var(--accent)) 20%, transparent));
            border-radius: 2px;
            box-shadow: 0 0 12px color-mix(in srgb, var(--section-accent, var(--accent)) 40%, transparent);
        }
        /* First h3 in section: less top margin */
        .section h2 + h3,
        .section h2 + p + h3 { margin-top: 1.6rem }
        /* Subtle top-dotted separator for non-first h3 */
        .section h3 ~ h3 {
            margin-top: 2.2rem;
            padding-top: 1.2rem;
            border-top: 1px dashed rgba(160,175,200,0.08);
        }

        /* Account-type h3 badges — more dramatic */
        .section h3[data-account-type]::after {
            content: attr(data-account-type);
            display: inline-block;
            margin-left: 12px;
            font-size: 0.6rem;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            padding: 4px 12px;
            border-radius: 999px;
            vertical-align: middle;
            background: color-mix(in srgb, var(--section-accent, var(--accent)) 10%, transparent);
            color: var(--section-accent, var(--accent));
            border: 1px solid color-mix(in srgb, var(--section-accent, var(--accent)) 20%, transparent);
            box-shadow: 0 0 12px color-mix(in srgb, var(--section-accent, var(--accent)) 10%, transparent);
        }

        .section p {
            color: var(--text-dim, #8a92a0);
            line-height: 2.1;
            margin-bottom: 1.85rem;
            position: relative;
            z-index: 1;
            font-size: 0.98rem;
        }
        /* First paragraph after h2 — larger, more prominent lead-in */
        .section h2 + p {
            font-size: 1.02rem;
            color: var(--text-muted);
            padding-left: 1rem;
            border-left: 2px solid color-mix(in srgb, var(--section-accent, var(--accent)) 20%, transparent);
        }

        .section ul,
        .section ol {
            list-style: none;
            padding: 0;
            margin-left: 0;
            margin-bottom: 1.9rem;
            color: var(--text-dim, #8a92a0);
        }

        .section li {
            position: relative;
            padding-left: 1.8rem;
            margin-bottom: 1rem;
            line-height: 2.05;
        }

        .section ul li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.65rem;
            width: 6px;
            height: 6px;
            background: var(--section-accent, var(--accent));
            border-radius: 50%;
            box-shadow: 0 0 10px color-mix(in srgb, var(--section-accent, var(--accent)) 50%, transparent);
        }
        /* Even sections use dash-style bullets for variety */
        .section:nth-child(even) ul li::before {
            width: 12px;
            height: 2px;
            border-radius: 1px;
            top: 0.85rem;
        }

        .section li strong {
            color: var(--text);
        }

        /* ===== DATA GRID — compact inline stat bar (like index.html counters) ===== */
        .data-grid {
            display: flex;
            margin: 1.5rem 0 1.8rem;
            background: var(--surface);
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid var(--border);
            box-shadow: 0 2px 12px rgba(0,0,0,0.15);
        }

        .data-card {
            flex: 1;
            background: transparent;
            border: none;
            border-radius: 0;
            padding: 0.8rem 0.5rem;
            text-align: center;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            border-right: 1px solid var(--border);
        }
        .data-card:last-child { border-right: none }

        .data-card:hover {
            background: rgba(160,175,200,0.04);
        }

        .data-label {
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--text-muted);
            margin-bottom: 0.15rem;
            font-weight: 600;
        }

        .data-value {
            font-size: 1.02rem;
            font-weight: 700;
            color: #ffffff;
            font-family: 'IBM Plex Mono', monospace;
            letter-spacing: -0.3px;
        }
        /* Shrink inline images in data-value to not blow up card height */
        .data-value img {
            height: 14px;
            width: auto;
            vertical-align: middle;
        }

        .data-value.highlight {
            color: #22c55e;
        }

        .data-sublabel {
            font-size: 0.72rem;
            color: var(--text-muted);
            margin-top: 0.15rem;
            opacity: 0.7;
        }

        .data-table {
            width: 100%;
            min-width: 0 !important;
            table-layout: fixed;
            border-collapse: separate;
            border-spacing: 0;
            margin: 1.7rem auto;
            font-size: 0.82rem;
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 6px 24px rgba(0,0,0,0.25);
            border: 1px solid rgba(160,175,200,0.1);
        }

        .data-table thead {
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(10px);
        }

        .data-table thead th {
            padding: 0.75rem 0.55rem;
            text-align: center;
            vertical-align: middle;
            font-weight: 700;
            color: var(--section-accent, var(--accent));
            text-transform: uppercase;
            font-size: 0.6rem;
            letter-spacing: 2.5px;
            border: none;
            white-space: nowrap;
            border-bottom: 2px solid color-mix(in srgb, var(--section-accent, var(--accent)) 20%, transparent);
        }

        .data-table tbody tr {
            transition: all 0.25s cubic-bezier(0.22,1,0.36,1);
        }

        .data-table tbody tr:nth-child(odd) {
            background: rgba(18,20,26,0.6);
        }

        .data-table tbody tr:nth-child(even) {
            background: rgba(14,16,20,0.8);
        }

        .data-table tbody tr:hover {
            background: color-mix(in srgb, var(--section-accent, var(--accent)) 6%, transparent);
            box-shadow: inset 4px 0 0 var(--section-accent, var(--accent));
        }
        .data-table tbody tr:hover td {
            color: #e0e4ea;
        }

        .data-table tbody td {
            padding: 0.6rem 0.55rem;
            border-bottom: 1px solid rgba(160, 175, 200, 0.04);
            color: var(--text-dim, #8a92a0);
            text-align: center;
            vertical-align: middle;
            height: auto;
            transition: all 0.25s ease;
        }

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

        .data-table tbody tr:hover td {
            color: var(--text);
        }

        .data-table tbody td:first-child {
            font-weight: 700;
            color: var(--text);
            font-size: 1.02rem;
            white-space: nowrap;
        }

        /* Drawdown (col 4) - tableaux eval uniquement */
        #comptes .data-table tbody td:nth-child(4) {
            font-weight: 600;
            color: var(--text);
        }

        /* Objectif (col 5) - tableaux eval uniquement */
        #comptes .data-table tbody td:nth-child(5) {
            font-weight: 600;
            color: var(--text);
        }

        /* Constance (col 2) + Contrats (col 3) + Activation (col 6) - no wrap */
        .data-table tbody td:nth-child(2),
        .data-table tbody td:nth-child(3),
        .data-table tbody td:nth-child(6) {
            white-space: nowrap;
        }

        /* Activation (col 6) - texte promo */
        .data-table tbody td:nth-child(6) small {
            font-size: 0.95em;
        }

        /* Prix (dernière col) - vert IBM Plex Mono comme index.html */
        #comptes .data-table tbody td:last-child {
            font-weight: 800;
            font-size: 1.18rem;
            color: #22c55e;
            font-family: 'IBM Plex Mono', monospace;
            letter-spacing: 0.5px;
        }

        .section p a:not(.keyword-link):not(.propfirm-ref) {
            color: var(--section-accent, var(--accent-light, #c0cddd));
            text-decoration: underline;
            text-decoration-color: color-mix(in srgb, var(--section-accent, var(--accent)) 40%, transparent);
            text-underline-offset: 2px;
            transition: all 0.25s ease;
        }
        .section p a:not(.keyword-link):not(.propfirm-ref):hover {
            color: #fff;
            text-decoration-color: var(--section-accent, var(--accent));
        }
        .section p a strong { color: inherit }

        .keyword-link {
            color: var(--section-accent, var(--accent-light, #c0cddd));
            font-weight: 600;
            text-decoration: none;
            border-bottom: 1px dashed color-mix(in srgb, var(--section-accent, var(--accent)) 30%, transparent);
            transition: all 0.25s ease;
            padding-bottom: 1px;
        }

        span.keyword-link.propfirm-ref {
            cursor: pointer;
            white-space: nowrap;
        }
        span.keyword-link.propfirm-ref img,
        .section h2 > img,
        .section h3 > img,
        .data-value img,
        .keyword-link img {
            display: inline !important;
        }

        .keyword-link:hover {
            color: #fff;
            border-bottom-color: var(--section-accent, var(--accent));
            border-bottom-style: solid;
        }

        .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin: 0.8rem 0;
        }

        .tag {
            background: rgba(0,0,0,0.3);
            border: 1px solid rgba(160, 175, 200, 0.12);
            border-radius: 999px;
            padding: 0.3rem 0.9rem;
            font-size: 0.72rem;
            color: var(--text-dim, #8a92a0);
            font-weight: 500;
            transition: all 0.25s ease;
            letter-spacing: 0.3px;
        }

        .tag:hover {
            background: rgba(160, 175, 200, 0.08);
            border-color: rgba(160, 175, 200, 0.25);
            color: var(--accent);
        }

        /* ===== INFO BOXES — dramatic glass with left accent ===== */
        .info-box {
            border-radius: 12px;
            padding: 0.85rem 1.2rem 0.85rem 1.4rem;
            font-size: 0.94rem;
            line-height: 1.65;
            margin: 1.5rem 0;
            position: relative;
            backdrop-filter: blur(8px);
            transition: all 0.3s ease;
        }
        .info-box:hover {
            transform: translateX(4px);
        }
        /* Left color bar on info boxes */
        .info-box::before {
            content: '';
            position: absolute;
            top: 12px;
            bottom: 12px;
            left: 0;
            width: 3px;
            border-radius: 0 3px 3px 0;
        }

        .info-box.success {
            background: rgba(34, 197, 94, 0.05);
            border: 1px solid rgba(34, 197, 94, 0.15);
            color: #4ade80;
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        }
        .info-box.success::before { background: #22c55e }

        .info-box.success strong {
            color: #22c55e;
        }

        .info-box.warning {
            background: rgba(251, 191, 36, 0.05);
            border: 1px solid rgba(251, 191, 36, 0.15);
            color: #fde68a;
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        }
        .info-box.warning::before { background: #fbbf24 }

        .info-box.warning strong {
            color: #fbbf24;
        }

        .info-box.magenta {
            background: rgba(160, 175, 200, 0.05);
            border: 1px solid rgba(160, 175, 200, 0.15);
            color: var(--accent-light, #c0cddd);
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        }
        .info-box.magenta::before { background: var(--accent) }

        .info-box.magenta strong {
            color: var(--accent);
        }

        /* Info-box icons as decorative accent */
        .info-box.warning::after {
            content: '⚠';
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 2.5rem;
            opacity: 0.06;
            pointer-events: none;
        }
        .info-box.success::after {
            content: '✓';
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 2.5rem;
            opacity: 0.06;
            pointer-events: none;
            color: #22c55e;
        }
        .info-box.magenta::after {
            content: 'ℹ';
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 2.5rem;
            opacity: 0.06;
            pointer-events: none;
            color: var(--accent);
        }

        /* ===== PROS/CONS — dramatic split cards ===== */
        .pros-cons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin: 1.5rem 0 1.8rem;
            background: transparent;
            border-radius: 0;
            overflow: visible;
            box-shadow: none;
        }

        .pros,
        .cons {
            background: var(--surface);
            border-radius: 14px;
            padding: 1rem 1.1rem;
            border: 1px solid var(--border);
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        .pros:hover, .cons:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 32px rgba(0,0,0,0.2);
        }

        .pros::before,
        .cons::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
        }

        .pros {
            border-color: rgba(34,197,94,0.15);
            background: linear-gradient(160deg, var(--surface) 0%, rgba(34,197,94,0.03) 100%);
        }
        .pros::before {
            background: linear-gradient(180deg, #22c55e, transparent);
            width: 3px;
            height: auto;
            top: 0; bottom: 0; left: 0; right: auto;
        }
        .pros:hover {
            border-color: rgba(34,197,94,0.3);
        }

        .cons {
            border-color: rgba(239,68,68,0.15);
            background: linear-gradient(160deg, var(--surface) 0%, rgba(239,68,68,0.03) 100%);
        }
        .cons::before {
            background: linear-gradient(180deg, #ef4444, transparent);
            width: 3px;
            height: auto;
            top: 0; bottom: 0; left: 0; right: auto;
        }
        .cons:hover {
            border-color: rgba(239,68,68,0.3);
        }

        .pros h4,
        .cons h4 {
            font-size: 0.78rem;
            font-weight: 700;
            margin-bottom: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .pros h4::before { content: '✓'; font-size: 0.9rem }
        .cons h4::before { content: '✕'; font-size: 0.85rem }

        .pros h4 {
            color: #22c55e;
        }

        .cons h4 {
            color: #ef4444;
        }

        .pros ul,
        .cons ul {
            list-style: none;
            margin-left: 0;
        }

        .pros li,
        .cons li {
            position: relative;
            padding-left: 1.4rem;
            padding-top: 0.15rem;
            padding-bottom: 0.15rem;
        }

        .pros li::before,
        .cons li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.65rem;
            width: 6px;
            height: 6px;
            border-radius: 50%;
        }

        .pros li::before {
            background: #22c55e;
            box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
        }

        .cons li::before {
            background: #ef4444 !important;
            box-shadow: 0 0 8px rgba(239, 68, 68, 0.5) !important;
        }

        /* ===== STAT-LIST — dramatic key-value pairs ===== */
        .stat-list {
            display: flex;
            flex-direction: column;
            gap: 1px;
            margin: 1.5rem 0;
            background: var(--border);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
            border: 1px solid rgba(160,175,200,0.06);
        }
        .stat-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.55rem 1.1rem;
            background: var(--surface-light, #1a1d24);
            transition: all 0.25s ease;
        }
        .stat-row:hover {
            background: rgba(160,175,200,0.06);
            padding-left: 1.6rem;
        }
        /* Alternating stat rows for visual rhythm */
        .stat-row:nth-child(odd) {
            border-left: 2px solid transparent;
        }
        .stat-row:nth-child(odd):hover {
            border-left-color: var(--section-accent, var(--accent));
        }
        .stat-label {
            font-size: 0.88rem;
            color: var(--text-dim, #8a92a0);
            font-weight: 500;
        }
        .stat-val {
            font-size: 0.88rem;
            font-weight: 700;
            color: var(--text);
            font-family: 'IBM Plex Mono', monospace;
        }
        .stat-val.green { color: #22c55e }
        .stat-val.red { color: #ef4444 }
        .stat-val.orange { color: #f59e0b }
        .stat-val.accent { color: var(--accent) }

        /* ===== VISUAL CALLOUT — dramatic pull-out key stats ===== */
        .callout {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            padding: 0.65rem 1rem;
            margin: 1.5rem 0;
            background: linear-gradient(135deg, color-mix(in srgb, var(--section-accent, var(--accent)) 6%, transparent), transparent);
            border: 1px solid color-mix(in srgb, var(--section-accent, var(--accent)) 12%, transparent);
            border-radius: 16px;
            border-left: 4px solid var(--section-accent, var(--accent));
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        .callout:hover {
            transform: translateX(4px);
            border-left-color: var(--section-accent, var(--accent));
            box-shadow: 0 8px 24px rgba(0,0,0,0.15), -4px 0 20px color-mix(in srgb, var(--section-accent, var(--accent)) 10%, transparent);
        }
        .callout-icon {
            font-size: 1.2rem;
            flex-shrink: 0;
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: color-mix(in srgb, var(--section-accent, var(--accent)) 8%, transparent);
            border-radius: 10px;
            border: 1px solid color-mix(in srgb, var(--section-accent, var(--accent)) 12%, transparent);
        }
        .callout-content { flex: 1 }
        .callout-title {
            font-size: 0.68rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--text-muted);
            margin-bottom: 2px;
            font-weight: 600;
        }
        .callout-value {
            font-size: 1.06rem;
            font-weight: 700;
            color: #fff;
            font-family: 'IBM Plex Mono', monospace;
        }
        /* Callout shimmer sweep */
        .callout::after {
            content: '';
            position: absolute;
            top: 0; left: -100%; bottom: 0;
            width: 60%;
            background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--section-accent, var(--accent)) 4%, transparent), transparent);
            transform: skewX(-15deg);
            animation: shimmerSweep 6s ease-in-out infinite;
            pointer-events: none;
        }

        /* ===== SECTION DIVIDER — gradient separator ===== */
        .section + .section::before {
            /* Already has accent bar, just increase visibility gap */
        }

        /* ===== QUICK-REF TAGS — dramatic trading styles recap ===== */
        .quick-ref {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 1.3rem 0 1.7rem;
        }
        .quick-ref-tag {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 5px 12px;
            border-radius: 999px;
            font-size: 0.75rem;
            font-weight: 600;
            border: 1px solid rgba(160,175,200,0.1);
            background: rgba(0,0,0,0.25);
            transition: all 0.3s ease;
            cursor: default;
        }
        .quick-ref-tag:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }
        .quick-ref-tag.allowed {
            color: #4ade80;
            border-color: rgba(34,197,94,0.2);
        }
        .quick-ref-tag.allowed::before {
            content: '✓';
            color: #22c55e;
            font-size: 0.7rem;
        }
        .quick-ref-tag.forbidden {
            color: #fca5a5;
            border-color: rgba(239,68,68,0.2);
        }
        .quick-ref-tag.forbidden::before {
            content: '✕';
            color: #ef4444;
            font-size: 0.7rem;
        }
        .quick-ref-tag.partial {
            color: #fde68a;
            border-color: rgba(251,191,36,0.2);
        }
        .quick-ref-tag.partial::before {
            content: '~';
            color: #fbbf24;
            font-size: 0.9rem;
            font-weight: 700;
        }

        /* ===== RATING GRID — dramatic verdict score cards ===== */
        .rating-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin: 1.5rem 0 1.8rem;
        }
        .rating-card {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            padding: 0.7rem 0.9rem;
            background: var(--surface);
            border-radius: 16px;
            border: 1px solid var(--border);
            transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
            position: relative;
            overflow: hidden;
        }
        /* Subtle glow on top */
        .rating-card::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent 10%, var(--accent) 50%, transparent 90%);
            opacity: 0.3;
        }
        .rating-card:hover {
            border-color: rgba(160,175,200,0.2);
            background: rgba(160,175,200,0.05);
            transform: translateY(-3px);
            box-shadow: 0 12px 32px rgba(0,0,0,0.25), 0 0 20px rgba(160,175,200,0.06);
        }
        .rating-card-highlight {
            border-color: rgba(34,197,94,0.25);
            background: rgba(34,197,94,0.04);
        }
        .rating-card-highlight::after {
            background: linear-gradient(90deg, transparent 10%, #22c55e 50%, transparent 90%);
        }
        .rating-card-highlight:hover {
            border-color: rgba(34,197,94,0.3);
            box-shadow: 0 8px 24px rgba(34,197,94,0.1);
        }
        .rating-circle-wrap {
            position: relative;
            flex-shrink: 0;
            width: 68px;
            height: 68px;
        }
        .rating-score {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text);
            font-family: 'IBM Plex Mono', monospace;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1px;
        }
        .rating-score span {
            font-size: 0.65rem;
            color: var(--text-muted);
            font-weight: 400;
        }
        .rating-name {
            font-weight: 600;
            color: var(--text);
            margin-bottom: 0.3rem;
            font-size: 0.92rem;
        }
        .rating-desc {
            margin: 0 !important;
            font-size: 0.82rem !important;
            color: var(--text-muted) !important;
            line-height: 1.5 !important;
            max-width: none !important;
        }
        /* Stagger rating cards entrance */
        .rating-card:nth-child(1) { animation: sectionIn 0.5s ease both 0.05s }
        .rating-card:nth-child(2) { animation: sectionIn 0.5s ease both 0.12s }
        .rating-card:nth-child(3) { animation: sectionIn 0.5s ease both 0.19s }
        .rating-card:nth-child(4) { animation: sectionIn 0.5s ease both 0.26s }
        .rating-card:nth-child(5) { animation: sectionIn 0.5s ease both 0.33s }
        .rating-card:nth-child(6) { animation: sectionIn 0.5s ease both 0.40s }

        /* ===== VISUAL ACCENTS — inline highlights in text ===== */
        .section strong {
            color: var(--text);
            position: relative;
        }
        /* Key value highlights in data tables — add shimmer on first col */
        .data-table tbody td:first-child {
            position: relative;
        }
        .data-table tbody td:first-child::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 2px;
            background: color-mix(in srgb, var(--section-accent, var(--accent)) 20%, transparent);
            border-radius: 1px;
            opacity: 0;
            transition: all 0.3s ease;
        }
        .data-table tbody tr:hover td:first-child::after {
            opacity: 1;
            width: 40px;
        }

        /* Section-specific overrides removed — unified background */

        /* FAQ items — alternating border accent */
        #faq .faq-item:nth-child(odd) {
            border-color: rgba(251,146,60,0.12);
        }
        #faq .faq-item:nth-child(even) {
            border-color: rgba(192,205,221,0.12);
        }

        /* ===== SCROLL-DRIVEN visual accents ===== */
        /* Ambient decorative line at edges of content */
        .content-scroll {
            border-left: 1px solid rgba(160,175,200,0.04);
        }

        @media (max-width: 1200px) {
            .page-wrapper {
                flex-direction: column;
            }

            .sidebar {
                position: relative;
                width: 100%;
                top: 0;
            }

            .pros-cons {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .hero-content {
                flex-direction: column;
                text-align: center;
                padding: 1.5rem;
                gap: 1rem;
            }

            .hero-logo {
                width: 56px;
                height: 56px;
            }

            .hero-article h1 {
                font-size: 1.5rem;
            }
        }

        /* ===== ACCOUNT TABS SYSTEM ===== */
        .account-tabs {
            display: flex;
            gap: 6px;
            margin: 1.5rem 0 0.5rem;
            padding: 4px;
            background: rgba(15,23,42,0.6);
            border-radius: 14px;
            border: 1px solid rgba(160,175,200,0.08);
            position: relative;
            overflow: hidden;
        }
        .account-tabs::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(160,175,200,0.03) 0%, transparent 50%);
            pointer-events: none;
            border-radius: 14px;
        }
        .tab-btn {
            flex: 1;
            padding: 11px 16px;
            border: none;
            background: transparent;
            color: var(--text-muted);
            font-family: inherit;
            font-size: 0.95rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            cursor: pointer;
            border-radius: 10px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            z-index: 1;
            white-space: nowrap;
        }
        .tab-btn:hover {
            color: var(--text-primary);
            background: rgba(160,175,200,0.06);
        }
        .tab-btn.active {
            color: #fff;
            background: var(--accent);
            box-shadow: 0 2px 12px rgba(160,175,200,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
        }
        .tab-btn .tab-label {
            display: block;
        }
        .tab-btn .tab-sub {
            display: block;
            font-size: 0.72rem;
            font-weight: 400;
            opacity: 0.6;
            margin-top: 1px;
            letter-spacing: 0;
        }
        .tab-btn.active .tab-sub {
            opacity: 0.85;
        }

        /* Tab panels */
        .tab-panel {
            display: none;
            animation: tabFadeIn 0.35s ease-out;
        }
        .tab-panel.active {
            display: block;
        }
        @keyframes tabFadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Responsive */
        @media (max-width: 600px) {
            .account-tabs {
                gap: 3px;
                padding: 3px;
            }
            .tab-btn {
                padding: 7px 8px;
                font-size: 0.72rem;
            }
            .tab-btn .tab-sub {
                display: none;
            }
        }

        /* ===== DASHBOARD VISUAL COMPONENTS ===== */

        /* --- Rules Overview Dashboard --- */
        .rules-overview {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 10px;
            margin: 1.2rem 0 1.8rem;
        }
        .rule-indicator {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 14px;
            background: rgba(15, 23, 42, 0.5);
            border: 1px solid var(--border);
            border-radius: 10px;
            transition: all 0.25s ease;
        }
        .rule-indicator:hover {
            border-color: rgba(160, 175, 200, 0.2);
            background: rgba(15, 23, 42, 0.7);
        }
        .rule-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            flex-shrink: 0;
            box-shadow: 0 0 6px currentColor;
        }
        .rule-dot.green { background: #22c55e; color: #22c55e; }
        .rule-dot.yellow { background: #f59e0b; color: #f59e0b; }
        .rule-dot.red { background: #ef4444; color: #ef4444; }
        .rule-indicator-text {
            display: flex;
            flex-direction: column;
            gap: 1px;
            min-width: 0;
        }
        .rule-indicator-label {
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .rule-indicator-value {
            font-size: 0.68rem;
            color: var(--text-muted);
            letter-spacing: 0.02em;
        }

        /* --- Platform Cards --- */
        .platform-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin: 1rem 0 1.5rem;
        }
        .platform-card {
            padding: 16px;
            background: rgba(15, 23, 42, 0.5);
            border: 1px solid var(--border);
            border-radius: 12px;
            transition: all 0.25s ease;
        }
        .platform-card:hover {
            border-color: rgba(160, 175, 200, 0.2);
            transform: translateY(-1px);
        }
        .platform-card-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 0;
        }
        .platform-card-header img {
            width: 28px;
            height: 28px;
            border-radius: 6px;
        }
        .platform-card-name {
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--text-primary);
        }
        .platform-card-badge {
            display: inline-block;
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            padding: 2px 8px;
            border-radius: 4px;
            margin-left: auto;
        }
        .platform-card-badge.free {
            background: rgba(34, 197, 94, 0.12);
            color: #4ade80;
            border: 1px solid rgba(34, 197, 94, 0.2);
        }
        .platform-card-badge.feed {
            background: rgba(96, 165, 250, 0.12);
            color: #60a5fa;
            border: 1px solid rgba(96, 165, 250, 0.2);
        }
        .platform-card-desc {
            font-size: 0.8rem;
            color: var(--text-muted);
            line-height: 1.5;
        }
        .platform-card-features {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 8px;
        }
        .platform-feature-tag {
            font-size: 0.68rem;
            padding: 3px 8px;
            border-radius: 5px;
            background: rgba(160, 175, 200, 0.06);
            border: 1px solid rgba(160, 175, 200, 0.1);
            color: var(--text-muted);
        }

        /* --- Payout Flow Diagram --- */
        .payout-flow {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            margin: 1.5rem 0;
            padding: 20px 12px;
            background: rgba(15, 23, 42, 0.4);
            border: 1px solid var(--border);
            border-radius: 14px;
            overflow-x: auto;
        }
        .flow-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            min-width: 90px;
            text-align: center;
        }
        .flow-step-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border);
            background: var(--surface);
            transition: all 0.25s ease;
        }
        .flow-step-icon svg {
            width: 20px;
            height: 20px;
            stroke: var(--accent);
        }
        .flow-step:hover .flow-step-icon {
            border-color: var(--accent);
            box-shadow: 0 0 12px rgba(160, 175, 200, 0.15);
        }
        .flow-step-label {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        .flow-step-sub {
            font-size: 0.65rem;
            color: var(--text-muted);
        }
        .flow-arrow {
            display: flex;
            align-items: center;
            padding: 0 6px;
            color: var(--text-muted);
            opacity: 0.4;
        }
        .flow-arrow svg {
            width: 20px;
            height: 20px;
        }

        /* --- KPI Stats Bar (Présentation) --- */
        .kpi-bar {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin: 1.2rem 0 0.5rem;
        }
        .kpi-item {
            text-align: center;
            padding: 14px 8px;
            background: rgba(15, 23, 42, 0.5);
            border: 1px solid var(--border);
            border-radius: 10px;
            transition: all 0.25s ease;
        }
        .kpi-item:hover {
            border-color: rgba(160, 175, 200, 0.2);
        }
        .kpi-number {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--text-primary);
            line-height: 1.1;
            font-variant-numeric: tabular-nums;
        }
        .kpi-number.accent { color: var(--accent); }
        .kpi-number.green { color: #4ade80; }
        .kpi-label {
            font-size: 0.68rem;
            color: var(--text-muted);
            margin-top: 4px;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-weight: 600;
        }

        /* --- Mini Comparison Strip (4 types at a glance) --- */
        .type-strip {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            margin: 1.2rem 0;
        }
        .type-strip-card {
            padding: 12px 10px;
            background: rgba(15, 23, 42, 0.5);
            border: 1px solid var(--border);
            border-radius: 10px;
            text-align: center;
            transition: all 0.25s ease;
            cursor: pointer;
            text-decoration: none;
        }
        .type-strip-card:hover {
            border-color: rgba(160, 175, 200, 0.25);
            transform: translateY(-2px);
        }
        .type-strip-card.highlight {
            border-color: rgba(34, 197, 94, 0.3);
            background: rgba(34, 197, 94, 0.04);
        }
        .type-strip-name {
            font-size: 0.82rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 4px;
        }
        .type-strip-price {
            font-size: 0.72rem;
            color: var(--text-muted);
            font-variant-numeric: tabular-nums;
        }
        .type-strip-score {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            margin-top: 6px;
            font-size: 0.75rem;
            font-weight: 700;
        }
        .type-strip-score.s10 { color: #4ade80; }
        .type-strip-score.s9 { color: #86efac; }
        .type-strip-score.s8 { color: #fbbf24; }
        .type-strip-score.s7 { color: var(--text-muted); }

        /* --- Visual Styles Grid (replacing quick-ref) --- */
        .styles-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin: 1rem 0;
        }
        .style-cell {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 12px;
            background: rgba(15, 23, 42, 0.5);
            border: 1px solid var(--border);
            border-radius: 8px;
            transition: all 0.2s ease;
        }
        .style-cell:hover {
            border-color: rgba(160, 175, 200, 0.2);
        }
        .style-cell-icon {
            width: 22px;
            height: 22px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .style-cell-icon.allowed { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
        .style-cell-icon.partial { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
        .style-cell-icon.forbidden { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
        .style-cell-icon svg { width: 13px; height: 13px; }
        .style-cell-text {
            font-size: 0.78rem;
            font-weight: 500;
            color: var(--text-primary);
        }
        .style-cell-status {
            margin-left: auto;
            font-size: 0.65rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .style-cell-status.allowed { color: #4ade80; }
        .style-cell-status.partial { color: #fbbf24; }
        .style-cell-status.forbidden { color: #f87171; }

        /* --- Responsive for new components --- */
        @media (max-width: 768px) {
            .rules-overview { grid-template-columns: repeat(2, 1fr); }
            .platform-grid { grid-template-columns: 1fr; }
            .kpi-bar { grid-template-columns: repeat(2, 1fr); }
            .type-strip { grid-template-columns: repeat(2, 1fr); }
            .styles-grid { grid-template-columns: repeat(2, 1fr); }
            .payout-flow { flex-wrap: wrap; gap: 8px; }
            .flow-arrow { display: none; }
        }
        @media (max-width: 480px) {
            .rules-overview { grid-template-columns: 1fr; }
            .styles-grid { grid-template-columns: 1fr; }
            .kpi-bar { grid-template-columns: repeat(2, 1fr); }
            .type-strip { grid-template-columns: repeat(2, 1fr); }
            .payout-flow { justify-content: space-around; }
            .flow-step { min-width: 70px; }
            .price-bars { gap: 10px; }
            .price-bar-row { flex-direction: column; gap: 6px; }
            .price-bar-label { min-width: unset; }
            .price-bar-prices { min-width: unset; font-size: 0.72rem; }
            .coherence-bars { gap: 10px; }
            .coherence-bar-row { flex-direction: column; gap: 4px; }
            .coherence-label { min-width: unset; }
            .comm-bar-wrap { display: none; }
        }

        /* ===== SCROLL-REVEAL ANIMATIONS ===== */
        @keyframes revealUp {
            from { opacity: 0; transform: translateY(28px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .reveal {
            opacity: 0;
            transform: translateY(28px);
        }

        .reveal.visible {
            animation: revealUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }

        /* Stagger children inside reveal containers */
        .reveal-stagger.visible > * {
            animation: revealUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        .reveal-stagger.visible > :nth-child(1) { animation-delay: 0s; }
        .reveal-stagger.visible > :nth-child(2) { animation-delay: 0.07s; }
        .reveal-stagger.visible > :nth-child(3) { animation-delay: 0.14s; }
        .reveal-stagger.visible > :nth-child(4) { animation-delay: 0.21s; }
        .reveal-stagger.visible > :nth-child(5) { animation-delay: 0.28s; }
        .reveal-stagger.visible > :nth-child(6) { animation-delay: 0.35s; }
        .reveal-stagger.visible > :nth-child(7) { animation-delay: 0.42s; }
        .reveal-stagger.visible > :nth-child(8) { animation-delay: 0.49s; }

        .reveal-stagger > * {
            opacity: 0;
            transform: translateY(28px);
        }

        /* ===== PRICE COMPARISON BAR CHART ===== */
        .price-bars {
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin: 20px 0 28px;
        }

        .price-bar-row {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .price-bar-label {
            min-width: 100px;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 0.72rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .price-bar-track {
            flex: 1;
            height: 28px;
            background: rgba(160,175,200,0.06);
            border-radius: 6px;
            overflow: hidden;
            position: relative;
        }

        .price-bar-fill {
            height: 100%;
            border-radius: 6px;
            position: absolute;
            top: 0;
            left: 0;
            width: 0%;
            transition: left 1s cubic-bezier(0.22, 1, 0.36, 1),
                        width 1s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .price-bar-fill.type-standard { background: linear-gradient(90deg, rgba(96,165,250,0.3), rgba(96,165,250,0.55)); border: 1px solid rgba(96,165,250,0.3); }
        .price-bar-fill.type-express  { background: linear-gradient(90deg, rgba(167,139,250,0.3), rgba(167,139,250,0.55)); }

        .price-bar-prices {
            min-width: 100px;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 0.78rem;
            font-weight: 600;
            color: #e0e4ea;
            text-align: right;
            white-space: nowrap;
        }

        .price-bar-prices .best-tag {
            display: inline-block;
            font-size: 0.6rem;
            font-weight: 700;
            color: #34d399;
            background: rgba(52,211,153,0.12);
            border: 1px solid rgba(52,211,153,0.25);
            padding: 1px 6px;
            border-radius: 4px;
            margin-left: 6px;
            vertical-align: middle;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        /* ===== COHERENCE VISUAL BARS ===== */
        .coherence-bars {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin: 20px 0 28px;
        }

        .coherence-bar-row {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .coherence-label {
            min-width: 100px;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 0.72rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .coherence-track {
            flex: 1;
            height: 10px;
            background: rgba(160,175,200,0.06);
            border-radius: 6px;
            overflow: hidden;
            position: relative;
        }

        .coherence-fill {
            height: 100%;
            border-radius: 6px;
            width: 0%;
            transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
            position: relative;
        }

        .coherence-fill::after {
            content: '';
            position: absolute;
            right: 0;
            top: -2px;
            width: 6px;
            height: 14px;
            border-radius: 3px;
            background: inherit;
            filter: brightness(1.5);
            opacity: 0;
            transition: opacity 0.4s ease 0.8s;
        }

        .visible .coherence-fill::after {
            opacity: 1;
        }

        .coherence-fill.c-100 { background: linear-gradient(90deg, #22c55e, #4ade80); }
        .coherence-fill.c-50  { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
        .coherence-fill.c-40  { background: linear-gradient(90deg, #60a5fa, #93c5fd); }
        .coherence-fill.c-25  { background: linear-gradient(90deg, #a78bfa, #c4b5fd); }

        .coherence-value {
            width: 110px;
            flex-shrink: 0;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 0.82rem;
            font-weight: 700;
            text-align: right;
            white-space: nowrap;
        }

        .coherence-value.c-50  { color: #fbbf24; }
        .coherence-value.c-40  { color: #93c5fd; }
        .coherence-value.c-25  { color: #c4b5fd; }

        .coherence-sub {
            font-size: 0.68rem;
            font-weight: 400;
            color: var(--text-muted);
            margin-left: 4px;
        }

        /* ===== COMMISSION RELATIVE BARS (inside data-cards) ===== */
        .comm-bar-wrap {
            width: 100%;
            height: 3px;
            background: rgba(160,175,200,0.06);
            border-radius: 3px;
            overflow: hidden;
            margin-top: 8px;
        }

        .comm-bar-fill {
            height: 100%;
            border-radius: 3px;
            background: linear-gradient(90deg, var(--section-accent, #60a5fa), color-mix(in srgb, var(--section-accent, #60a5fa) 50%, white));
            width: 0%;
            transition: width 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
        }

        /* ===== DRAWDOWN VISUAL COMPARISON ===== */
        .drawdown-visual {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 12px;
            margin: 20px 0 28px;
        }

        .dd-card {
            background: rgba(160,175,200,0.04);
            border: 1px solid rgba(160,175,200,0.08);
            border-radius: 10px;
            padding: 16px 14px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .dd-card:hover {
            border-color: rgba(160,175,200,0.16);
            background: rgba(160,175,200,0.06);
        }

        .dd-size {
            font-family: 'IBM Plex Mono', monospace;
            font-size: 0.72rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 10px;
        }

        .dd-bar-stack {
            height: 120px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            gap: 2px;
            margin-bottom: 8px;
        }

        .dd-seg {
            border-radius: 4px;
            transition: height 0.8s cubic-bezier(0.22, 1, 0.36, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 0.62rem;
            font-weight: 600;
            color: rgba(255,255,255,0.8);
            min-height: 0;
            overflow: hidden;
        }

        .dd-seg.seg-drawdown {
            background: linear-gradient(180deg, rgba(239,68,68,0.4), rgba(239,68,68,0.2));
            border: 1px solid rgba(239,68,68,0.3);
        }

        .dd-seg.seg-target {
            background: linear-gradient(180deg, rgba(52,211,153,0.35), rgba(52,211,153,0.15));
            border: 1px solid rgba(52,211,153,0.3);
        }

        .dd-seg.seg-dll {
            background: linear-gradient(180deg, rgba(251,146,60,0.4), rgba(251,146,60,0.2));
            border: 1px solid rgba(251,146,60,0.3);
        }

        .dd-legend {
            display: flex;
            gap: 14px;
            justify-content: center;
            margin-top: 12px;
        }

        .dd-legend-item {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 0.68rem;
            color: var(--text-muted);
        }

        .dd-ratio {
            font-family: 'IBM Plex Mono', monospace;
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.3px;
            margin-top: 6px;
            padding: 3px 8px;
            border-radius: 4px;
            display: inline-block;
        }

        .dd-ratio.easy {
            color: #4ade80;
            background: rgba(52,211,153,0.08);
        }

        .dd-ratio.medium {
            color: #fbbf24;
            background: rgba(251,191,36,0.08);
        }

        .dd-ratio.hard {
            color: #f87171;
            background: rgba(248,113,113,0.08);
        }

        .dd-legend-dot {
            width: 8px;
            height: 8px;
            border-radius: 3px;
        }

        .dd-legend-dot.dot-dd { background: rgba(239,68,68,0.5); }
        .dd-legend-dot.dot-tgt { background: rgba(52,211,153,0.45); }
        .dd-legend-dot.dot-dll { background: rgba(251,146,60,0.5); }

        @media (max-width: 768px) {
            .section { padding: 1.5rem 1.25rem 1.4rem !important; }
            .drawdown-visual {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 12px;
                margin: 16px 0 20px;
                width: 100%;
            }
            .dd-card { padding: 14px 10px; }
            .dd-bar-stack { height: 100px; }
            .dd-seg { font-size: 0.68rem; }
            .dd-size { font-size: 0.78rem; margin-bottom: 8px; }
            .dd-ratio { font-size: 0.7rem; padding: 3px 8px; }
            .dd-legend { gap: 10px; }
            .dd-legend-item { font-size: 0.65rem; }
        }

        @media (prefers-reduced-motion: reduce) {
            .reveal, .reveal-stagger > * {
                opacity: 1;
                transform: none;
                animation: none !important;
            }
            .price-bar-fill, .coherence-fill, .comm-bar-fill, .dd-seg {
                transition: none !important;
            }
        }

/* ===== FAQ SECTION ===== */
                    .faq-item {
                        margin-bottom: 12px;
                        background: var(--surface, #12141a);
                        border: 1px solid var(--border, #1e2230);
                        border-radius: 12px;
                        overflow: hidden;
                        transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
                    }

                    .faq-item:hover {
                        border-color: rgba(251,146,60,0.2);
                        box-shadow: 0 4px 20px rgba(0,0,0,0.2);
                        transform: translateY(-1px);
                    }

                    details[open].faq-item {
                        border-color: rgba(251,146,60,0.25);
                        box-shadow: inset 3px 0 0 #fb923c, 0 6px 24px rgba(0,0,0,0.2);
                        background: rgba(18,20,26,0.95);
                    }

                    .faq-summary h3 { font-size: inherit; font-weight: inherit; margin: 0; line-height: inherit }

                    .faq-summary {
                        padding: 1.2rem 1.4rem;
                        font-weight: 600;
                        font-size: 0.9rem;
                        color: var(--text, #e0e4ea);
                        cursor: pointer;
                        list-style: none;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        transition: color 0.2s;
                    }

                    .faq-item:hover .faq-summary { color: #fff }

                    .faq-summary::-webkit-details-marker {
                        display: none;
                    }

                    .faq-summary::after {
                        content: '+';
                        color: #fb923c;
                        font-size: 1.2rem;
                        font-weight: 300;
                        width: 28px;
                        height: 28px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 8px;
                        background: rgba(251,146,60,0.08);
                        border: 1px solid rgba(251,146,60,0.12);
                        transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
                        flex-shrink: 0;
                        margin-left: 12px;
                    }

                    .faq-item:hover .faq-summary::after {
                        background: rgba(251,146,60,0.12);
                        border-color: rgba(251,146,60,0.25);
                    }

                    details[open] .faq-summary::after {
                        content: '\2212';
                        transform: rotate(180deg);
                        background: rgba(251,146,60,0.15);
                        border-color: rgba(251,146,60,0.3);
                    }

                    .faq-content {
                        padding: 0 1.4rem 1.4rem;
                        color: var(--text-dim, #8a92a0);
                        line-height: 1.8;
                        font-size: 0.88rem;
                        border-top: 1px solid rgba(160,175,200,0.06);
                        margin-top: 0;
                        padding-top: 1.1rem;
                    }

/* ===================== MOBILE — GUIDE PAGES ===================== */
@media(max-width:900px){
  /* 1. Fix scroll — release html, body, main from viewport lock */
  html{overflow:auto!important;height:auto!important}
  body{overflow:auto!important;height:auto!important}
  main{height:auto!important;overflow:visible!important}
  .page-layout{overflow:visible!important;height:auto!important}
  .main-content{width:100%!important;min-width:0!important;overflow:visible!important;height:auto!important}
  .content-scroll{overflow:visible!important;height:auto!important;padding:12px 20px 40px!important}
  /* Reset float-header — static at top, scrolls with content (not sticky/fixed) */
  .float-header{
    display:flex!important;
    position:relative!important;top:auto!important;left:auto!important;
    transform:none!important;
    margin:12px auto 20px!important;z-index:100!important;
    flex-shrink:0!important;
    width:fit-content!important;
  }

  /* 2. Sidebar — floating panel from left (like index filters) */
  .sidebar-nav{
    position:fixed!important;left:-320px!important;top:0!important;
    height:100vh!important;height:100dvh!important;
    width:300px!important;z-index:9990!important;
    transition:left 0.35s cubic-bezier(0.22,1,0.36,1)!important;
    overflow-y:auto!important;overflow-x:hidden!important;
  }
  .sidebar-nav.open{left:0!important}

  /* 3. Floating "Sommaire" button — centered bottom pill (like index Filtres) */
  .guide-mob-toggle{
    display:flex!important;position:fixed;bottom:24px;left:50%;
    transform:translateX(-50%);z-index:9991;
    height:44px;padding:0 20px;gap:8px;
    border-radius:22px;
    background:var(--accent,#6366f1);
    border:none;
    align-items:center;justify-content:center;
    color:#fff;cursor:pointer;font-size:13px;font-weight:600;
    box-shadow:0 2px 10px rgba(99,102,241,0.25);
    transition:opacity 0.3s ease,transform 0.3s cubic-bezier(0.16,1,0.3,1);
  }
  .guide-mob-toggle svg{width:18px;height:18px}
  .guide-mob-toggle.mob-open{opacity:0;pointer-events:none}

  /* 4. Half-circle close button (glued to sidebar right edge) */
  .guide-mob-close{
    display:flex;position:fixed;
    left:-60px;top:50%;transform:translateY(-50%);
    z-index:9992;width:24px;height:48px;
    border-radius:0 24px 24px 0;
    background:var(--accent,#6366f1);
    border:1px solid rgba(255,255,255,0.08);border-left:none;
    align-items:center;justify-content:center;
    color:#fff;cursor:pointer;
    box-shadow:4px 0 12px rgba(0,0,0,0.3);
    pointer-events:none;
    transition:left 0.35s cubic-bezier(0.22,1,0.36,1);
  }
  .guide-mob-close svg{width:16px;height:16px}
  .guide-mob-close.mob-open{left:300px;pointer-events:auto}

  /* 5. Overlay backdrop */
  .guide-mob-overlay{
    display:none;position:fixed;inset:0;
    background:rgba(0,0,0,0.55);z-index:9989;
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  }
  .guide-mob-overlay.open{display:block}

  /* 6. Hide header when sommaire open */
  .sidebar-nav.open ~ .main-content .float-header,
  body.sommaire-open .float-header{opacity:0!important;pointer-events:none!important}
}
@media(min-width:901px){
  .guide-mob-toggle{display:none!important}
  .guide-mob-overlay{display:none!important}
  .guide-mob-close{display:none!important}
}
@media(max-width:768px){
  .content-scroll{padding:0 16px 30px!important}
  .hero-article h1{font-size:1.4rem!important;white-space:normal!important}
  .nav-item{font-size:0.82rem!important;padding:0.55rem 0.75rem!important}

  /* Account tabs — 2x2 grid on mobile */
  .account-tabs{display:grid!important;grid-template-columns:1fr 1fr;gap:4px!important;overflow:visible!important;padding:4px!important}
  .tab-btn{flex-shrink:0!important;text-align:center!important;white-space:normal!important;font-size:0.78rem!important;padding:10px 6px!important;line-height:1.2!important;word-break:break-word;min-height:38px}
  /* 5-tab grid: last orphan tab spans full width centered */
  .account-tabs .tab-btn:last-child:nth-child(odd){grid-column:1/-1;max-width:60%;justify-self:center}

  /* ── Data tables — mobile "fiche produit" cards ── */
  .table-wrapper{background:none!important;border:none!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;overflow:visible!important;max-height:none!important}
  .table-wrapper::before{display:none!important}
  .data-table{display:block!important;overflow:visible!important;border:none!important;box-shadow:none!important;border-radius:0!important;background:none!important}
  .data-table colgroup{display:none}
  .data-table thead{display:none!important}
  .data-table tbody{display:flex;flex-direction:column;gap:28px}

  /* Each row = a card */
  .data-table tbody tr,
  .data-table tbody tr:nth-child(odd),
  .data-table tbody tr:nth-child(even){
    display:flex!important;flex-direction:column;
    background:var(--card-bg,rgba(18,18,26,0.9))!important;
    border-radius:16px;overflow:hidden;
    border:1px solid rgba(160,175,200,0.14);
    box-shadow:0 2px 12px rgba(0,0,0,0.2);
    width:100%!important;
  }

  /* Each cell = key-value row */
  .data-table tbody td{
    display:flex!important;flex-direction:row;align-items:center;
    justify-content:space-between;
    padding:12px 16px!important;
    border-bottom:1px solid rgba(160,175,200,0.1);
    white-space:normal!important;gap:12px;
    font-size:0.9rem;font-weight:500;color:var(--text,#e0e4ea);
    text-align:right;
    width:100%!important;box-sizing:border-box;
  }
  .data-table tbody td:last-child{border-bottom:none}

  /* Label (from data-label attr) on the left */
  .data-table tbody td::before{
    content:attr(data-label);
    flex-shrink:0;
    font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;
    color:#8b8fa3;
    min-width:80px;
  }

  /* Wrapper for complex cell content (activation, etc.) */
  .data-table tbody td .td-value{
    display:inline;text-align:right;
  }

  /* ─ First cell = account size header ─ */
  .data-table tbody td:first-child{
    background:linear-gradient(135deg,rgba(139,92,246,0.22),rgba(99,102,241,0.1))!important;
    font-weight:800;font-size:1.15rem;letter-spacing:0.02em;
    padding:14px 16px!important;
    justify-content:center;text-align:center;
    border-bottom:none;
    color:#fff;
    max-width:none!important;min-width:0!important;
  }
  .data-table tbody td:first-child::before{display:none}

  /* ─ Last cell = prix (only in #comptes evaluation tables) ─ */
  #comptes .data-table tbody td:last-child{
    background:rgba(34,197,94,0.08);
    padding:14px 16px!important;
    font-size:1.25rem;font-weight:800;color:#22c55e;
    font-family:'IBM Plex Mono',monospace;
    border-top:1px solid rgba(34,197,94,0.15);
  }
  #comptes .data-table tbody td:last-child::before{
    color:#22c55e;font-weight:700;
  }

  /* ─ Activation cell — clean promo layout ─ */
  .data-table tbody td .act-free{
    font-weight:700;color:#22c55e;font-size:0.88rem;white-space:nowrap;
  }
  .data-table tbody td small{
    font-size:0.75rem;opacity:0.6;line-height:1.35;
  }
  .data-table tbody td .promo-code{
    font-size:0.75rem;padding:3px 8px;vertical-align:middle;
  }
  /* Activation with promo */
  #comptes .data-table tbody td:nth-last-child(2){
    border-top:1px solid rgba(160,175,200,0.08);
  }

  /* ─ Non-pricing tables (scaling, payout caps) — compact style ─ */
  #funded .data-table tbody td{
    font-size:0.82rem;padding:9px 14px!important;
  }
  #funded .data-table tbody td small{
    display:block;font-size:0.68rem;opacity:0.55;margin-top:1px;
  }

  /* Price bars — grid layout for mobile (flex track collapses to 0) */
  .price-bars{gap:16px!important}
  .price-bar-row{
    display:grid!important;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    gap:4px 8px!important;
    align-items:center;
  }
  .price-bar-label{grid-column:1;grid-row:1;min-width:0!important;font-size:0.68rem!important}
  .price-bar-prices{grid-column:2;grid-row:1;min-width:0!important;font-size:0.72rem!important;text-align:right}
  .price-bar-track{grid-column:1/-1;grid-row:2;height:20px!important;width:100%!important}

  /* Coherence bars — grid layout for mobile */
  .coherence-bars{gap:14px!important}
  .coherence-bar-row{
    display:grid!important;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    gap:4px 8px!important;
    align-items:center;
  }
  .coherence-label{grid-column:1;grid-row:1;min-width:0!important;font-size:0.68rem!important}
  .coherence-value{grid-column:2;grid-row:1;width:auto!important;font-size:0.78rem!important;text-align:right}
  .coherence-track{grid-column:1/-1;grid-row:2;width:100%!important;height:10px!important}

  /* Data grids — 2x2 on mobile */
  .data-grid{flex-wrap:wrap!important}
  .data-card{flex:1 1 45%!important;min-width:0}

  /* Rating grid — single column */
  .rating-grid{grid-template-columns:1fr!important}

  /* Section numbers — smaller on mobile */
  .section::before{font-size:3.5rem!important;right:12px!important;top:-6px!important}
}
@media(max-width:480px){
  .content-scroll{padding:0 10px 24px!important}
  .account-tabs{gap:2px!important;padding:3px!important;grid-template-columns:1fr 1fr!important}
  .tab-btn{padding:7px 4px!important;font-size:0.68rem!important;white-space:normal!important}
  .tab-btn .tab-sub{display:none!important}
  .rules-overview{grid-template-columns:1fr 1fr!important}
  .hero-content{padding:72px 12px 16px!important}

  /* Data grids — stack on small mobile */
  .data-card{flex:1 1 100%!important}

  /* Price bars — even more compact */
  .price-bar-track{height:18px!important}
  .price-bar-prices{font-size:0.68rem!important}
  .price-bar-prices .best-tag{font-size:0.5rem!important;padding:1px 4px!important}
}

/* ============================================
   LIGHT THEME — SLATE ÉLÉGANT (guides)
   ============================================ */
[data-theme="light"] body {
  --card-bg: #dde2ec;
  --secondary: #d3d9e4;
  --accent-dark: #3d4f6a;
  --warning: #b45309;
}

/* Hero glow orbs — tone down */
[data-theme="light"] .hero h1::before,
[data-theme="light"] .hero h1::after,
[data-theme="light"] .hero p::before,
[data-theme="light"] .hero p::after { opacity: 0.06 !important; }

/* Hero text */
[data-theme="light"] .hero p { color: var(--text-dim) }
[data-theme="light"] .hero .gradient-text {
  background: linear-gradient(135deg, var(--accent), #b45309);
  -webkit-background-clip: text; background-clip: text;
}

/* Sidebar */
[data-theme="light"] .sidebar-nav {
  background: var(--bg-elevated);
  border-right-color: var(--border);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.03), 4px 0 20px rgba(0,0,0,0.08);
}
[data-theme="light"] .sb-header {
  background: linear-gradient(180deg, rgba(205,211,222,0.6) 0%, transparent 100%);
  border-bottom-color: var(--border);
}
[data-theme="light"] .sb-logo {
  background: rgba(205,211,222,0.6);
  border-color: var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04) inset;
}
[data-theme="light"] .sidebar-nav:hover {
  box-shadow: inset 0 0 20px rgba(0,0,0,0.05), 4px 0 30px rgba(0,0,0,0.12);
}
[data-theme="light"] .nav-parent:hover { color: var(--text); background: rgba(0,0,0,0.05) }
[data-theme="light"] .nav-parent:hover .nav-dot { background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.15); color: var(--text) }
[data-theme="light"] .nav-group.active > .nav-parent { color: var(--text) }
[data-theme="light"] .nav-group.active > .nav-parent .nav-dot { color: #fff }
[data-theme="light"] .nav-subitem { color: var(--text-muted) }
[data-theme="light"] .nav-subitem:hover { color: var(--text); background: rgba(0,0,0,0.04) }
[data-theme="light"] .nav-subitem.active { color: var(--text) }

/* Sections */
[data-theme="light"] .section {
  background: #f0f2f6;
  border: 1px solid rgba(148,163,184,0.2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
[data-theme="light"] .section::before {
  color: rgba(15,23,42,0.06);
}
[data-theme="light"] .section h2 { color: var(--text) }
[data-theme="light"] .section h3 { color: var(--text-secondary) }
[data-theme="light"] .section p,
[data-theme="light"] .section li { color: var(--text-dim) }

/* Table wrappers */
[data-theme="light"] .table-wrapper {
  background: #fcfcfd !important;
  border: 1px solid rgba(148,163,184,0.25);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(15,23,42,0.05), 0 1px 2px rgba(15,23,42,0.04);
}
[data-theme="light"] .table-wrapper::before { opacity: 0 !important }
[data-theme="light"] thead {
  background: #1e293b !important;
  box-shadow: none;
}
[data-theme="light"] th {
  background: #1e293b !important;
  color: rgba(255,255,255,0.85) !important;
  border-bottom: none !important;
  font-weight: 600;
}
[data-theme="light"] th:hover {
  background: #273449 !important;
}
[data-theme="light"] td {
  color: #0f172a !important;
  border-color: rgba(148,163,184,0.15) !important;
}
[data-theme="light"] #comptes .data-table tbody td:last-child {
  color: #16a34a !important;
}
[data-theme="light"] tbody tr:hover td {
  background: rgba(99,102,241,0.04) !important;
}
[data-theme="light"] tbody tr:nth-child(even) td {
  background: rgba(148,163,184,0.06);
}
[data-theme="light"] tbody tr:nth-child(even):hover td {
  background: rgba(99,102,241,0.06) !important;
}
[data-theme="light"] .table-wrapper::-webkit-scrollbar-track { background: rgba(148,163,184,0.08) }
[data-theme="light"] .table-wrapper::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.3) !important }
[data-theme="light"] .table-wrapper::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,0.5) !important }
[data-theme="light"] .column-info-popup {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Info boxes — saturated accents */
[data-theme="light"] .info-box.success {
  background: rgba(21,128,61,0.12);
  border: 1px solid rgba(21,128,61,0.35);
  color: #166534;
}
[data-theme="light"] .info-box.success strong { color: #15803d }
[data-theme="light"] .info-box.success::before { background: #16a34a }
[data-theme="light"] .info-box.warning {
  background: rgba(180,83,9,0.12);
  border: 1px solid rgba(180,83,9,0.35);
  color: #7c2d12;
}
[data-theme="light"] .info-box.warning strong { color: #9a3412 }
[data-theme="light"] .info-box.warning::before { background: #d97706 }
[data-theme="light"] .info-box.magenta {
  background: rgba(30,41,59,0.08);
  border: 1px solid rgba(30,41,59,0.2);
  color: var(--text-dim);
}
[data-theme="light"] .info-box.magenta strong { color: var(--text) }
[data-theme="light"] .info-box.magenta::before { background: #475569 }

/* Rules cards / overview */
[data-theme="light"] .rules-card,
[data-theme="light"] .rules-overview-item {
  background: #ffffff !important;
  border: 1px solid rgba(148,163,184,0.2) !important;
  color: #1e293b;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
[data-theme="light"] .rules-card .rules-label,
[data-theme="light"] .rules-overview-item .rule-label { color: #64748b }
[data-theme="light"] .rules-card .rules-value,
[data-theme="light"] .rules-overview-item .rule-value { color: #0f172a }

/* Tabs */
[data-theme="light"] .account-tabs {
  background: #e8ebf0 !important;
  border: 1px solid rgba(148,163,184,0.25);
}
[data-theme="light"] .tab-btn { color: #475569 }
[data-theme="light"] .tab-btn:hover { color: #1e293b }
[data-theme="light"] .tab-btn.active {
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Price bars / coherence bars — opaque fills */
[data-theme="light"] .price-bar,
[data-theme="light"] .coherence-bar {
  background: #e8ebf0 !important;
}
[data-theme="light"] .price-bar-fill,
[data-theme="light"] .coherence-fill {
  filter: saturate(1.4) brightness(0.95);
}

/* Flow diagrams */
[data-theme="light"] .payout-flow {
  background: #e8ebf0 !important;
  border: 1px solid rgba(148,163,184,0.3) !important;
}
[data-theme="light"] .flow-step {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
[data-theme="light"] .flow-step-icon {
  background: #ffffff !important;
  border: 1px solid rgba(148,163,184,0.3) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
[data-theme="light"] .flow-step-label { color: #0f172a }
[data-theme="light"] .flow-step-sub { color: #64748b }
[data-theme="light"] .flow-arrow { color: #94a3b8 }
[data-theme="light"] .flow-card {
  background: #ffffff !important;
  border: 1px solid rgba(148,163,184,0.25) !important;
  color: #1e293b;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Verdict cards */
[data-theme="light"] .verdict-card {
  background: #ffffff !important;
  border: 1px solid rgba(148,163,184,0.25) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Promo section */
[data-theme="light"] .promo-highlight {
  background: #ffffff !important;
  border: 1px solid rgba(148,163,184,0.25) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* FAQ items */
[data-theme="light"] .faq-item {
  border: 1px solid rgba(100,116,139,0.35) !important;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15,23,42,0.06);
}
[data-theme="light"] .faq-item summary { color: #0f172a }
[data-theme="light"] .faq-item[open] { background: #f8f9fb; border-color: rgba(100,116,139,0.45) !important }
[data-theme="light"] .faq-item p { color: #334155 }

/* Footer */
[data-theme="light"] .guide-footer,
[data-theme="light"] .footer-guide {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-dim);
}

/* Modal */
[data-theme="light"] .modal-content {
  background: var(--bg-elevated) !important;
  border-color: var(--border);
}

/* All hardcoded whites/light-grays → dark text */
[data-theme="light"] .nav-parent:hover,
[data-theme="light"] .keyword-link { color: var(--text) }
[data-theme="light"] .section p a:not(.keyword-link):not(.propfirm-ref) { color: var(--text); text-decoration-color: rgba(0,0,0,0.25) }
[data-theme="light"] .section p a:not(.keyword-link):not(.propfirm-ref):hover { color: #0f172a; text-decoration-color: rgba(0,0,0,0.5) }

/* Badge colors — vivid */
[data-theme="light"] .badge-green { color: #059669 !important; border-color: rgba(5,150,105,0.3) !important }
[data-theme="light"] .badge-warning { color: #b45309 !important; border-color: rgba(180,83,9,0.3) !important }
[data-theme="light"] .badge-danger { color: #dc2626 !important; border-color: rgba(220,38,38,0.3) !important }
[data-theme="light"] .badge-info { background: rgba(30,41,59,0.1) !important; color: #334155 !important }

/* Scrollbar inside content-scroll */
[data-theme="light"] .content-scroll::-webkit-scrollbar-track { background: var(--bg) }
[data-theme="light"] .content-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15) }
[data-theme="light"] .content-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25) }

/* Mobile sidebar overlay */
[data-theme="light"] .guide-mob-overlay { background: rgba(0,0,0,0.3) !important }

/* Hero header links */
[data-theme="light"] .hero-header a { color: var(--text-dim) }
[data-theme="light"] .hero-header a:hover { color: var(--text) }

/* ── Modal / suggestion buttons (white on accent bg — keep white) ── */
/* .suggestion-btn (L436) and .btn-submit (L557) use color:white on var(--accent) bg — OK to keep */

/* ── Form inputs ── */
[data-theme="light"] input[type="text"] { color: var(--text) !important; background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="light"] .custom-select-trigger { color: var(--text) !important; background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="light"] .custom-select-option { color: var(--text-dim) }
[data-theme="light"] .custom-select-option:hover { color: var(--text) }
[data-theme="light"] .height-select { color: var(--text) !important; background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="light"] .height-select option { color: var(--text); background: var(--bg-elevated) }
[data-theme="light"] .reset-filters { color: var(--text-secondary) }
[data-theme="light"] .reset-filters:hover { color: var(--text) }

/* ── Scroll buttons ── */
[data-theme="light"] .scroll-btn { color: var(--text-secondary) }
[data-theme="light"] .scroll-btn:hover { color: var(--text) }

/* ── Info bubbles ── */
[data-theme="light"] .column-info-bubble { color: var(--text-dim) }
[data-theme="light"] .column-info-bubble:hover { color: var(--text) }
[data-theme="light"] .column-info-popup { color: var(--text-dim); background: var(--bg-elevated) !important; border-color: var(--border) !important; }
[data-theme="light"] .info-bubble { color: var(--text-dim) }
[data-theme="light"] .info-bubble:hover { color: var(--text) }
[data-theme="light"] .info-bubble-price { color: var(--text) }
[data-theme="light"] .info-bubble-price:hover { color: var(--text) }
[data-theme="light"] .promo-popup { color: var(--text-dim); background: var(--bg-elevated) !important; border-color: var(--border) !important; }
[data-theme="light"] .promo-popup-label { color: var(--text-muted) }
[data-theme="light"] .promo-popup-value { color: var(--text-dim) }

/* ── Badge tooltip / platform tooltip ── */
[data-theme="light"] .badge-tooltip { color: var(--text-dim); background: var(--bg-elevated) !important; border-color: var(--border) !important; }
[data-theme="light"] .platform-tooltip { color: var(--text-dim); background: var(--bg-elevated) !important; border-color: var(--border) !important; }

/* ── Badge success ── */
[data-theme="light"] .badge-success { color: #059669 !important }

/* ── Promo code ── */
[data-theme="light"] .promo-code { color: #059669 }
[data-theme="light"] .promo-code:hover { color: #047857 }

/* ── Drawdown visual — opaque vivid colors ── */
[data-theme="light"] .dd-card {
  background: #ffffff;
  border: 1px solid rgba(148,163,184,0.2);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
[data-theme="light"] .dd-card:hover {
  border-color: rgba(148,163,184,0.35);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
[data-theme="light"] .dd-size { color: #0f172a }
[data-theme="light"] .dd-seg { color: #0f172a }
[data-theme="light"] .dd-seg.seg-drawdown {
  background: linear-gradient(180deg, #fca5a5, #fecaca) !important;
  border: 1px solid #f87171;
}
[data-theme="light"] .dd-seg.seg-target {
  background: linear-gradient(180deg, #6ee7b7, #a7f3d0) !important;
  border: 1px solid #34d399;
}
[data-theme="light"] .dd-seg.seg-dll {
  background: linear-gradient(180deg, #fdba74, #fed7aa) !important;
  border: 1px solid #fb923c;
}
[data-theme="light"] .dd-ratio.easy { color: #059669; background: rgba(5,150,105,0.12) }
[data-theme="light"] .dd-ratio.medium { color: #d97706; background: rgba(217,119,6,0.12) }
[data-theme="light"] .dd-ratio.hard { color: #dc2626; background: rgba(220,38,38,0.12) }
[data-theme="light"] .dd-legend-dot.dot-dd { background: #f87171 }
[data-theme="light"] .dd-legend-dot.dot-tgt { background: #34d399 }
[data-theme="light"] .dd-legend-dot.dot-dll { background: #fb923c }

/* ── Sidebar brand name ── */
[data-theme="light"] .sb-brand-name { color: var(--text) }

/* ── Nav items ── */
[data-theme="light"] .nav-item:hover { color: var(--text) }
[data-theme="light"] .nav-item:hover .nav-dot { color: var(--text) }
[data-theme="light"] .nav-item.active { color: var(--text) }
[data-theme="light"] .nav-item.active .nav-dot { color: #fff }

/* ── Nav subitem hover ── */
[data-theme="light"] .nav-subitem:hover { color: var(--text) }

/* ── Nav preview ── */
[data-theme="light"] .nav-preview-title { color: var(--text) }

/* ── Hero ext links ── */
[data-theme="light"] .hero-ext-link:hover { color: var(--text) }
[data-theme="light"] .hero-ext-link.highlight,
[data-theme="light"] .toolbar-link.highlight,
[data-theme="light"] .sb-ext-link.highlight { color: var(--text) }

/* ── Article meta ── */
[data-theme="light"] .article-meta { color: var(--text-muted); border-bottom-color: var(--border) }

/* ── Trustpilot ── */
[data-theme="light"] .trustpilot-star.half {
  background: linear-gradient(90deg, #22c55e 50%, rgba(0,0,0,0.12) 50%);
  -webkit-background-clip: text; background-clip: text;
}
[data-theme="light"] .trustpilot-star.empty { color: rgba(0,0,0,0.15) }

/* ── Section h2 specifics (presentation, verdict) ── */
[data-theme="light"] #presentation h2 { color: var(--text) }
[data-theme="light"] #verdict h2 { color: var(--text) }

/* ── Data cards ── */
[data-theme="light"] .data-value { color: var(--text) }
[data-theme="light"] .callout-value { color: var(--text) }

/* ── Data table hover ── */
[data-theme="light"] .data-table tbody tr:hover td { color: var(--text) }

/* ── Data table mobile cards — light theme ── */
@media(max-width:768px){
  [data-theme="light"] .data-table tbody tr,
  [data-theme="light"] .data-table tbody tr:nth-child(odd),
  [data-theme="light"] .data-table tbody tr:nth-child(even){background:#ffffff!important;border-color:rgba(100,116,139,0.22);box-shadow:0 2px 8px rgba(0,0,0,0.07),0 6px 24px rgba(0,0,0,0.05)}
  [data-theme="light"] .data-table tbody td{border-bottom-color:rgba(148,163,184,0.16);color:#1e293b}
  [data-theme="light"] .data-table tbody td::before{color:#64748b}
  [data-theme="light"] .data-table tbody td:first-child{background:linear-gradient(135deg,rgba(99,102,241,0.22),rgba(139,92,246,0.14))!important;color:#312e81}
  [data-theme="light"] #comptes .data-table tbody td:last-child{background:rgba(34,197,94,0.07);border-top-color:rgba(34,197,94,0.18);color:#15803d}
  [data-theme="light"] .data-table tbody td .act-free{color:#15803d}
  [data-theme="light"] #comptes .data-table tbody td:last-child::before{color:#15803d}
  [data-theme="light"] .data-table tbody td small{opacity:0.7}
}

/* ── Price bar prices ── */
[data-theme="light"] .price-bar-prices { color: var(--text-secondary) }

/* ── Keyword link hover ── */
[data-theme="light"] .keyword-link:hover { color: var(--text) }

/* ── Quick-ref tags ── */
[data-theme="light"] .quick-ref-tag.allowed { color: #15803d }
[data-theme="light"] .quick-ref-tag.partial { color: #92400e }

/* ── KPI / type strip / style cell ── */
[data-theme="light"] .kpi-number.green { color: #15803d }
[data-theme="light"] .type-strip-score.s10 { color: #15803d }
[data-theme="light"] .style-cell {
  background: #e2e6ed !important;
  border-color: rgba(71,85,105,0.3) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.06);
}
[data-theme="light"] .style-cell-status.allowed { color: #15803d }
[data-theme="light"] .style-cell-text { color: #0f172a }

/* ── Platform card badges ── */
[data-theme="light"] .platform-card {
  background: #e2e6ed !important;
  border-color: rgba(71,85,105,0.3) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.06);
}
[data-theme="light"] .platform-card-badge.free { color: #15803d }
[data-theme="light"] .platform-card-badge.feed { color: #2563eb }

/* ── Drawdown segments ── */
[data-theme="light"] .dd-seg { color: rgba(0,0,0,0.7) }
[data-theme="light"] .dd-ratio.easy { color: #15803d }

/* ── FAQ hover ── */
[data-theme="light"] .faq-item:hover .faq-summary { color: var(--text) }

/* ── Product name link hover ── */
[data-theme="light"] .product-name a:hover { color: #2563eb !important }