@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
        
:root {
    --bg-color: #05070a;
    --electric-blue: #19e6ee;
    --deep-blue: #0fc5cd;
}

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

/* Fond étoilé amélioré */
#star-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background: radial-gradient(circle at center, #0a0d12 0%, #05070a 100%);
}

.star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    opacity: 0;
    animation: twinkle var(--duration) infinite ease-in-out;
}

.star-far {
    width: 1px;
    height: 1px;
    box-shadow: 0 0 1px #fff;
}

.star-mid {
    width: 2px;
    height: 2px;
    box-shadow: 0 0 3px #fff;
}

.star-near {
    width: 3px;
    height: 3px;
    box-shadow: 0 0 5px #fff;
    background: #e0f2fe;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

@keyframes drift {
    from { transform: translateY(0); }
    to { transform: translateY(-100px); }
}

.nebula {
    position: fixed;
    border-radius: 50%;
    filter: blur(120px);
    z-index: -1;
    opacity: 0.15;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* Petits nuages bleus animés - DESACTIVES */
.cloud { display: none !important; }
.cloud-disabled-old {
    position: fixed;
    background: radial-gradient(ellipse at center, rgba(25, 230, 238, 0.3), rgba(15, 197, 205, 0.1), transparent);
    border-radius: 50%;
    filter: blur(20px);
    z-index: -1;
    pointer-events: none;
    opacity: 0.6;
}

.cloud-1 {
    width: 200px;
    height: 80px;
    top: 20%;
    left: -200px;
    animation: float-cloud 30s infinite linear;
}

.cloud-2 {
    width: 250px;
    height: 100px;
    top: 60%;
    left: -250px;
    animation: float-cloud 40s infinite linear;
    animation-delay: 10s;
}

.cloud-3 {
    width: 180px;
    height: 70px;
    top: 35%;
    left: -180px;
    animation: float-cloud 35s infinite linear;
    animation-delay: 20s;
}

@keyframes float-cloud {
    0% { transform: translateX(0); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { transform: translateX(calc(100vw + 300px)); opacity: 0; }
}
        /* Style précis des cartes produits */
        .product-card {
            background-color: rgba(18, 22, 32, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 1.5rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(12px);
            position: relative;
            overflow: hidden;
        }

        .product-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.05),
                transparent
            );
            transition: 0.5s;
            z-index: 1;
        }

        .product-card:hover::before {
            left: 100%;
        }

        .product-card img {
            filter: grayscale(100%);
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .product-card:hover img {
            filter: grayscale(0%);
            transform: scale(1.05);
        }

        .product-img-box {
            background-color: rgba(10, 12, 16, 0.5);
            border-radius: 1rem 1rem 0 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2.5rem;
            position: relative;
            overflow: hidden;
        }

        .btn-buy {
            background: linear-gradient(90deg, var(--electric-blue), var(--deep-blue));
            box-shadow: 0 4px 15px rgba(15, 197, 205, 0.3);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .btn-buy::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .btn-buy:hover::after {
            opacity: 1;
            animation: pulse-glow 2s infinite;
        }

        @keyframes pulse-glow {
            0% { transform: scale(0.95); opacity: 0.2; }
            50% { transform: scale(1.1); opacity: 0.5; }
            100% { transform: scale(0.95); opacity: 0.2; }
        }

        .btn-buy:hover {
            filter: brightness(1.2);
            box-shadow: 0 4px 20px rgba(25, 230, 238, 0.5);
            transform: scale(1.05);
        }

        /* Animation Marquee pour les Vouches */
        @keyframes scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        .vouch-container {
            display: flex;
            gap: 1.5rem;
            animation: scroll 40s linear infinite;
            width: max-content;
            overflow: hidden;
        }

        .vouch-card {
            width: 400px;
            background: rgba(18, 22, 32, 0.8);
            border: 1px solid rgba(25, 230, 238, 0.15);
            backdrop-filter: blur(12px);
            flex-shrink: 0;
            transition: all 0.3s ease;
        }

        .electric-glow {
            text-shadow: 0 0 15px rgba(25, 230, 238, 0.8);
        }

        /* Animations d'entrée pour les cartes de status */
        @keyframes fadeInScale {
            0% { transform: scale(0.9); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }

        .status-card-anim {
            animation: fadeInScale 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
            opacity: 0;
        }

        /* Animations de particules explosives stylisées */
        @keyframes explode-particle-1 {
            0% { transform: translate(0, 0) scale(1); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translate(-120px, -120px) scale(0.3); opacity: 0; }
        }

        @keyframes explode-particle-2 {
            0% { transform: translate(0, 0) scale(1); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translate(0px, -150px) scale(0.2); opacity: 0; }
        }

        @keyframes explode-particle-3 {
            0% { transform: translate(0, 0) scale(1); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translate(120px, -120px) scale(0.3); opacity: 0; }
        }

        @keyframes explode-particle-4 {
            0% { transform: translate(0, 0) scale(1); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translate(150px, 0px) scale(0.2); opacity: 0; }
        }

        @keyframes explode-particle-5 {
            0% { transform: translate(0, 0) scale(1); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translate(120px, 120px) scale(0.3); opacity: 0; }
        }

        @keyframes explode-particle-6 {
            0% { transform: translate(0, 0) scale(1); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translate(0px, 150px) scale(0.2); opacity: 0; }
        }

        @keyframes explode-particle-7 {
            0% { transform: translate(0, 0) scale(1); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translate(-120px, 120px) scale(0.3); opacity: 0; }
        }

        @keyframes explode-particle-8 {
            0% { transform: translate(0, 0) scale(1); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translate(-150px, 0px) scale(0.2); opacity: 0; }
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #080a0f;
        }
        ::-webkit-scrollbar-thumb {
            background: var(--deep-blue);
            border-radius: 10px;
        }