/* ==========================================================================
   ÉTOILES ANIMÉES - "NUIT MAGIQUE"
   L'Enfant Déguisé - Fond étoilé pour toute la page
   ========================================================================== */

/* --------------------------------------------------------------------------
   CONTENEUR PRINCIPAL DES ÉTOILES
   À ajouter sur le body ou un wrapper de page
   -------------------------------------------------------------------------- */

.stars-background {
    position: relative;
}

.stars-background::before,
.stars-background::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Les étoiles ne bloquent pas les clics */
    z-index: 0;
}

/* --------------------------------------------------------------------------
   COUCHE 1 : PETITES ÉTOILES (nombreuses, scintillement rapide)
   -------------------------------------------------------------------------- */

.stars-background::before {
    background-image: 
        /* Étoiles blanches brillantes */
        radial-gradient(2px 2px at 20px 30px, #ffffff, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, #ffffff, transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1px 1px at 160px 120px, #ffffff, transparent),
        radial-gradient(2px 2px at 200px 50px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 250px 160px, #ffffff, transparent),
        radial-gradient(2px 2px at 280px 90px, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1px 1px at 320px 200px, #ffffff, transparent),
        radial-gradient(2px 2px at 350px 140px, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(1px 1px at 400px 60px, #ffffff, transparent),
        radial-gradient(2px 2px at 450px 180px, rgba(255, 255, 255, 0.9), transparent),
        /* Étoiles dorées (accent magique) */
        radial-gradient(2px 2px at 100px 100px, #f4d03f, transparent),
        radial-gradient(2px 2px at 300px 150px, rgba(244, 208, 63, 0.8), transparent),
        radial-gradient(2px 2px at 480px 220px, #f4d03f, transparent);
    background-size: 500px 300px;
    background-repeat: repeat;
    animation: twinkle 4s ease-in-out infinite;
    opacity: 0.6;
}

/* --------------------------------------------------------------------------
   COUCHE 2 : ÉTOILES MOYENNES (moins nombreuses, scintillement lent)
   -------------------------------------------------------------------------- */

.stars-background::after {
    background-image: 
        radial-gradient(3px 3px at 50px 100px, #ffffff, transparent),
        radial-gradient(3px 3px at 150px 50px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 250px 180px, #ffffff, transparent),
        radial-gradient(3px 3px at 350px 80px, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(2px 2px at 450px 130px, #ffffff, transparent),
        radial-gradient(3px 3px at 80px 200px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 180px 250px, #ffffff, transparent),
        radial-gradient(3px 3px at 380px 220px, rgba(255, 255, 255, 0.9), transparent),
        /* Étoiles dorées plus grandes */
        radial-gradient(3px 3px at 220px 120px, #f4d03f, transparent),
        radial-gradient(3px 3px at 420px 60px, rgba(244, 208, 63, 0.9), transparent);
    background-size: 550px 350px;
    background-repeat: repeat;
    animation: twinkle 6s ease-in-out infinite reverse;
    opacity: 0.5;
}

/* --------------------------------------------------------------------------
   ANIMATION DE SCINTILLEMENT
   -------------------------------------------------------------------------- */

@keyframes twinkle {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

/* --------------------------------------------------------------------------
   ÉTOILES SUPPLÉMENTAIRES (optionnel - pour plus de densité)
   Ajouter la classe .stars-dense sur le body pour activer
   -------------------------------------------------------------------------- */

.stars-dense .stars-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.stars-dense .stars-layer--small {
    background-image: 
        radial-gradient(1px 1px at 10px 20px, #fff, transparent),
        radial-gradient(1px 1px at 60px 90px, #fff, transparent),
        radial-gradient(1px 1px at 110px 45px, #fff, transparent),
        radial-gradient(1px 1px at 175px 130px, #fff, transparent),
        radial-gradient(1px 1px at 225px 75px, #fff, transparent),
        radial-gradient(1px 1px at 290px 160px, #fff, transparent),
        radial-gradient(1px 1px at 340px 35px, #fff, transparent),
        radial-gradient(1px 1px at 395px 110px, #fff, transparent),
        radial-gradient(1px 1px at 440px 190px, #fff, transparent),
        radial-gradient(1px 1px at 490px 55px, #fff, transparent);
    background-size: 500px 250px;
    animation: twinkle-fast 3s ease-in-out infinite;
    opacity: 0.4;
}

@keyframes twinkle-fast {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* --------------------------------------------------------------------------
   ÉTOILE FILANTE (effet bonus)
   Ajouter <div class="shooting-star"></div> dans le HTML pour activer
   -------------------------------------------------------------------------- */

.shooting-star {
    position: fixed;
    top: 10%;
    left: -100px;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, #f4d03f, transparent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: shoot 8s ease-in-out infinite;
    animation-delay: 5s;
}

.shooting-star::before {
    content: '';
    position: absolute;
    right: 0;
    top: -2px;
    width: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 10px 2px #f4d03f;
}

@keyframes shoot {
    0% {
        transform: translateX(0) translateY(0) rotate(-35deg);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    15% {
        transform: translateX(calc(100vw + 200px)) translateY(300px) rotate(-35deg);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

/* --------------------------------------------------------------------------
   AJUSTEMENTS POUR LES SECTIONS AVEC FOND
   S'assurer que les étoiles restent visibles
   -------------------------------------------------------------------------- */

/* Les sections principales doivent avoir un z-index supérieur au fond étoilé */
.site-header,
.site-footer,
main,
.hero-slider,
.category-nav,
.bestsellers,
.gallery-stars,
.content-block {
    position: relative;
    z-index: 1;
}

/* Pour les sections où tu veux que les étoiles soient visibles à travers */
.section-transparent-stars {
    background-color: transparent !important;
}

/* Overlay sombre semi-transparent pour garder les étoiles visibles */
.section-with-stars {
    background-color: rgba(30, 16, 38, 0.85); /* Nuit magique semi-transparent */
}