/* ==========================================================================
   SCT PROD — LOGO MARQUEE
   ========================================================================== */


/* ==========================================================================
   VIEWPORT / FENÊTRE
   ========================================================================== */

.logo-marquee {
    --logo-marquee-edge-fade: 8%;

    position: relative;

    width: 100%;
    max-width: none;

    overflow: hidden;

    /*
     * Fondu progressif aux extrémités.
     */
    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            #000 var(--logo-marquee-edge-fade),
            #000 calc(100% - var(--logo-marquee-edge-fade)),
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            #000 var(--logo-marquee-edge-fade),
            #000 calc(100% - var(--logo-marquee-edge-fade)),
            transparent 100%
        );
}


/* ==========================================================================
   LIGNE DIVI
   ========================================================================== */

.logo-marquee-row {
    width: 66vw !important;
    max-width: 66vw !important;

    margin-left: auto !important;
    margin-right: auto !important;

    overflow: hidden;
}

@media (max-width: 980px) {

    .logo-marquee-row {
        width: 90vw !important;
        max-width: 90vw !important;
    }

}


@media (max-width: 767px) {

    .logo-marquee-row {
        width: 100% !important;
        max-width: 100% !important;
    }

}


/* ==========================================================================
   TRACK
   ========================================================================== */

.logo-marquee__track {
    /*
     * Les variables vivent directement ici.
     *
     * Les items étant des enfants directs du track,
     * ils héritent automatiquement de ces valeurs.
     */
    --logo-marquee-gap: clamp(3rem, 5vw, 5rem);
    --logo-marquee-item-width: 10rem;
    --logo-marquee-item-height: 4rem;

    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: flex-start !important;

    gap: var(--logo-marquee-gap) !important;

    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    transform: translate3d(0, 0, 0);

    will-change: transform;
}


/* ==========================================================================
   ITEMS
   ========================================================================== */

.logo-marquee__track
> .logo-marquee__item {
    /*
     * Chaque logo possède maintenant une cellule
     * de largeur strictement contrôlée.
     */
    flex:
        0
        0
        var(--logo-marquee-item-width) !important;

    width:
        var(--logo-marquee-item-width) !important;

    min-width:
        var(--logo-marquee-item-width) !important;

    max-width:
        var(--logo-marquee-item-width) !important;

    height:
        var(--logo-marquee-item-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    opacity: 0.78;

    transition:
        opacity 300ms ease;
}


/* ==========================================================================
   WRAPPER IMAGE DIVI
   ========================================================================== */

.logo-marquee__item
.et_pb_image_wrap {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
}


/* ==========================================================================
   IMAGE
   ========================================================================== */

.logo-marquee__item img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain;

    object-position: center;

    margin: 0 auto;
}


/* ==========================================================================
   HOVER
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {

    .logo-marquee__item:hover {
        opacity: 1;
    }

}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 980px) {

    .logo-marquee {
        --logo-marquee-edge-fade: 8%;
    }


    .logo-marquee__track {
        --logo-marquee-gap: 3.5rem;
        --logo-marquee-item-width: 8rem;
        --logo-marquee-item-height: 3.5rem;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 767px) {

    .logo-marquee {
        --logo-marquee-edge-fade: 10%;
    }


    .logo-marquee__track {
        --logo-marquee-gap: 2.5rem;
        --logo-marquee-item-width: 7rem;
        --logo-marquee-item-height: 3rem;
    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .logo-marquee__track,
    .logo-marquee__item {
        transition: none !important;
    }

}

/* ==========================================================================
   ANIMATION INFINIE
   ========================================================================== */

@keyframes sct-logo-marquee-scroll {

    from {
        transform:
            translate3d(0, 0, 0);
    }

    to {
        transform:
            translate3d(
                calc(
                    var(--logo-marquee-distance) * -1
                ),
                0,
                0
            );
    }

}


.logo-marquee__track.is-marquee-ready {
    animation:
        sct-logo-marquee-scroll
        var(--logo-marquee-duration)
        linear
        infinite;
}


/* ==========================================================================
   COPIES TECHNIQUES
   ========================================================================== */

.logo-marquee__clone {
    pointer-events: none;
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .logo-marquee__track.is-marquee-ready {
        animation: none !important;
        transform: none !important;
    }


    .logo-marquee__clone {
        display: none !important;
    }

}