/* ========================================
   BANDEAU DÉFILANT (marquee)
   ======================================== */
.marquee-section {
    background-color: var(--color-background-cream);
    padding: var(--space-lg) 0;
    overflow: hidden;
}

/* Conteneur qui masque le débordement horizontal */
.marquee {
    overflow: hidden;
    white-space: nowrap;
}

/* La piste contient 2 copies identiques ; on la translate de -50%
   (= une copie) pour une boucle parfaitement continue. */
.marquee-track {
    display: inline-flex;
    width: max-content;
    animation: marquee-scroll 45s linear infinite;
    will-change: transform;
}

.marquee-text {
    color: var(--color-primary-darker);
    white-space: nowrap;
    padding-right: 0.6em; /* espace entre deux répétitions */
}

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Accessibilité : on coupe l'animation si l'utilisateur préfère moins de mouvement */
@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
    }
}

/* Responsive : 100px est trop grand sur mobile */
@media (max-width: 768px) {
    .marquee-text {
        font-size: 48px;
    }
}