/* Empêcher le défilement horizontal */
html,
body {
    overflow-x: hidden;
    width: 100%;
}



@keyframes shine {
    100% {
        left: 125%;
    }
}

.animate-shine {
    animation: shine 0.8s italic;
}



@keyframes gradient-x {
    0% {
        bg-position: 0% 50%;
    }

    50% {
        bg-position: 100% 50%;
    }

    100% {
        bg-position: 0% 50%;
    }
}

.animate-gradient-x {
    animation: gradient-x 3s ease infinite;
}



@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        /* On déplace la bande de 50% de sa largeur (c'est-à-dire la largeur d'une liste entière) */
        transform: translateX(-50%);
    }
}

/* Définition de la classe d'animation */
.animate-scroll {
    /* Animation nommée scroll, dure 30s, vitesse constante (linear), à l'infini */
    animation: scroll 30s linear infinite;
}




@keyframes shine {
    100% {
        left: 125%;
    }
}

.animate-shine {
    animation: shine 0.7s ease-in-out;
}



/* ===== LIEN ACTIF GLOBAL ===== */
.active {
    color: #2563eb;
    /* bleu premium */
    font-weight: 600;
    position: relative;
}

/* Desktop uniquement (underline élégant) */
@media (min-width: 1024px) {
    .active::after {
        content: "";
        position: absolute;
        bottom: -6px;
        left: 0;
        width: 100%;
        height: 2px;
        background: #2563eb;
        border-radius: 10px;
    }
}

/* Mobile & tablette (style bloc premium) */
@media (max-width: 1023px) {
    .active {
        background: rgba(37, 99, 235, 0.1);
        padding: 10px 16px;
        border-radius: 12px;
        width: 100%;
        display: block;
    }
}





@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-scroll {
    animation: scroll 25s linear infinite;
}

@media (max-width: 768px) {
    .animate-scroll {
        animation-duration: 15s;
        /* Plus rapide sur mobile pour compenser la petite largeur */
    }
}







.active {
    color: #dc2626;
    position: relative;
}

.active::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #dc2626;
}