/* ---- Animation pour le bandeau des clients (MARQUEE) ---- */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Décalage de 50% (la moitié de la largeur totale, car la liste est dupliquée) */
        transform: translateX(-50%);
    }
}

.marquee-track {
    /* Animation: 'scroll' 30 secondes, linéaire, en boucle infinie */
    animation: scroll 30s linear infinite;
    /* La largeur totale est de 200% (liste + sa copie) */
    width: 200%;
    /* Important pour que les éléments restent alignés */
    will-change: transform;
}

/* ---- Style des liens "Services" (inspiré de la vidéo) ---- */

.service-link {
    /* Position relative pour le pseudo-élément */
    position: relative;
    padding-left: 2.5rem; /* Espace pour le cercle */
    display: inline-block;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    transition: all 0.3s ease;
}

/* Le cercle */
.service-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;  /* 24px */
    height: 1.5rem; /* 24px */
    border: 2px solid #6b7280; /* gray-500 */
    border-radius: 9999px; /* full */
    transition: all 0.3s ease;
}

/* Effet au survol (hover) */
.service-link:hover {
    color: #00A9FF; /* brandBlue */
}

.service-link:hover::before {
    /* Le cercle se remplit et se déplace */
    background-color: #00A9FF;
    border-color: #00A9FF;
    transform: translateY(-50%) scale(0.8);
}


/* ==== MISE À JOUR : Effet de flou (VOTRE STYLE) ==== */

/* Cette classe est ajoutée à la <nav> par le JavaScript lors du scroll */
.nav-scrolled {
    /* Vos styles exacts : */
    background: #0000001c;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}