/* Conteneur global du champ d'étoiles */
.starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1; /* Place le champ d'étoiles en arrière-plan */
    background: #000; /* Fond noir */
    pointer-events: none; /* Permet aux interactions de passer à travers */
}

/* Étoiles fixes */
.star {
    position: absolute;
    border-radius: 50%;
    background: #fff;
    opacity: 0.8;
    animation: twinkle 2s infinite ease-in-out;
}
@keyframes twinkle {
    0%, 100% {
    opacity: 0.8;
    }
    50% {
    opacity: 0.4;
    }
}

/* Étoiles filantes */
.shooting-star {
    position: absolute;
    width: 2px;
    height: 100px; /* Longueur de la traînée /
    / Le dégradé va du bas (blanc) vers le haut (transparent) /
    / Ainsi, lorsqu’on applique rotate(angle), la traînée suit le mouvement */
    background: linear-gradient(to top, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 100%);
    opacity: 0;
    transform-origin: top center;
    animation: shoot 1.2s ease-out forwards;
}

/* Animation utilisant les variables CSS --angle, --translateX et --translateY */
    @keyframes shoot {
    0% {
    opacity: 1;
    transform: translate(0, 0) rotate(calc(var(--angle) - 90deg)) scale(1);
    }
    80% {
    opacity: 1;
    transform: translate(var(--translateX), var(--translateY)) rotate(calc(var(--angle) - 90deg)) scale(1);
    }
    100% {
    opacity: 0;
    transform: translate(calc(var(--translateX) + 100px), calc(var(--translateY) + 100px))
    rotate(calc(var(--angle) - 90deg)) scale(0.7);
    }
    }

/* Styles pour la bannière et le contenu principal */
.inner {
    position: relative;
    z-index: 1; /* Assure que le contenu est au-dessus du champ d'étoiles */
    padding: 20px;
    color: #fff; /* Texte en blanc pour contraster avec le fond */
}