/* =========================================================
   Logos Marquee — Carrousel défilant infini sur 2 lignes
   ========================================================= */

.logos-marquee {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
}

/* Effet de fondu progressif sur les bords (gauche + droite) */
.logos-marquee--fade-edges {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 80px,
        #000 calc(100% - 80px),
        transparent 100%
    );
            mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 80px,
        #000 calc(100% - 80px),
        transparent 100%
    );
}

/* Une "row" contient 2 tracks identiques : la 2e prend le relais de la 1re
   pour donner l'illusion d'un défilement infini parfait. */
.logos-marquee__row {
    display: flex;
    flex-wrap: nowrap;
    width: max-content; /* important : la row s'étend selon le contenu */
    --logos-marquee-gap: 60px;
}

/* Track : liste de logos qui défile en boucle */
.logos-marquee__track {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 60px;
    padding: 0;
    margin: 0;
    list-style: none;
    /* La track parcourt 100% de SA propre largeur, ce qui est exactement
       la largeur d'une "copie" des logos, d'où la boucle parfaite. */
    animation-name: logos-marquee-scroll-left;
    animation-duration: 40s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /* On compense le gap pour que la jonction entre les 2 tracks soit invisible */
    padding-right: var(--logos-marquee-gap, 60px);
}

.logos-marquee__track--right {
    animation-name: logos-marquee-scroll-right;
}

.logos-marquee__item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logos-marquee__link {
    display: inline-flex;
    align-items: center;
    transition: opacity .3s ease, transform .3s ease;
}

.logos-marquee__link:hover {
    opacity: .7;
}

.logos-marquee__logo {
    height: 60px;
    width: auto;
    max-width: none;
    object-fit: contain;
    display: block;
    transition: filter .3s ease, opacity .3s ease;
}

/* Pause au survol */
.logos-marquee--pause-on-hover:hover .logos-marquee__track {
    animation-play-state: paused;
}

/* =========================================================
   Animations
   ========================================================= */

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

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

/* Accessibilité : on respecte les préférences "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
    .logos-marquee__track {
        animation: none !important;
    }
    .logos-marquee__row {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
}