/*:root {*/
/*    --logo-count: 10; !* Nombre de logos RÉELS (sans la duplication) *!*/
/*    --visible-logos: 4; !* Nombre de logos visibles en même temps *!*/
/*    --animation-speed: calc(3s * var(--logo-count));*/
/*}*/

.logo-slider {
    width: 960px;
    margin: 25px auto auto;
    overflow: hidden; /* Cache les logos qui dépassent */
    padding: 50px 0;
    padding-bottom: 100px;
    position: relative;

    &::before,
    &::after {
        content: "";
        position: absolute;
        top: 0;
        width: 100px;
        height: 100%;
        z-index: 2;
    }
    &::before { left: 0; background: linear-gradient(to right, #F2E3D5, transparent); }
    &::after { right: 0; background: linear-gradient(to left, #F2E3D5, transparent); }

    & .logo-track {
        display: flex;
        /* On calcule la largeur totale : (Nombre réel * 2 / Nombre visible) * 100% */
        width: calc((var(--logo-count) * 2) / var(--visible-logos) * 100%);

        /* On adapte la vitesse : plus il y a de logos, plus l'anim doit être longue pour garder la même allure */
        animation: scroll calc(var(--logo-count) * 4s) linear infinite;
    }

    & .logo {
        /* Chaque logo occupe exactement sa place par rapport au nombre total dans la track */
        width: calc(100% / (var(--logo-count) * 2));
        display: flex;
        justify-content: center;
        padding: 0 15px;
    }

    & .logo img {
        max-width: 100%;
        height: 100px;
        object-fit: contain;
    }

    & .logo > div {

        & h4 {

            margin: 0;
            text-align: center;
            color: #012E40;

        }

    }

    & .partner-link {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        cursor: pointer;

        & img {
            transition: 250ms;
        }
    }

    & .partner-link:hover img {
        transform: scale(1.1);
        opacity: 0.8;
    }

    & .logo-track:hover {
        animation-play-state: paused;
    }
}

/* L'ANIMATION */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* On recule de la moitié (5 logos sur 10) */
    }
}