/* =========================================================
   SIM4ALL PARTENAIRES V3
   ========================================================= */

.s4a-partners {
    width:100%;
    position:relative;
}


/* =========================================================
   CAROUSEL
   ========================================================= */

.s4a-carousel {
    position:relative;
    width:100%;
    height:260px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;
}


.s4a-carousel-stage {
    position:relative;
    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;
}


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

.s4a-carousel-item {

    position:absolute;

    left:50%;
    top:50%;

    width:var(--s4a-logo-desktop);
    height:150px;

    transform:
        translate(-50%, -50%);

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;
    margin:0;

    border:none !important;
    outline:none !important;

    background:transparent !important;

    appearance:none;
    -webkit-appearance:none;

    cursor:pointer;

    transition:
        transform var(--s4a-duration) cubic-bezier(.22,.8,.25,1),
        opacity var(--s4a-duration) ease,
        filter var(--s4a-duration) ease;

    will-change:
        transform,
        opacity,
        filter;

    z-index:1;

    box-shadow:none !important;
}


/* Empêche Elementor / thème de mettre du rose */

.s4a-carousel-item:hover,
.s4a-carousel-item:focus,
.s4a-carousel-item:active {

    background:transparent !important;

    border:none !important;

    outline:none !important;

    box-shadow:none !important;
}


.s4a-carousel-item img {

    display:block;

    width:100%;
    height:100%;

    object-fit:contain;

    pointer-events:none;

    transition:
        transform var(--s4a-duration) cubic-bezier(.22,.8,.25,1),
        filter var(--s4a-duration) ease,
        opacity var(--s4a-duration) ease;
}


.s4a-carousel-item span {

    color:inherit;

    font-size:22px;
    font-weight:600;

    white-space:nowrap;
}


/* =========================================================
   ARROWS
   ========================================================= */

.s4a-carousel-arrow {

    position:absolute;

    top:50%;

    width:52px;
    height:52px;

    transform:translateY(-50%);

    border-radius:50%;

    border:1px solid rgba(255,255,255,.12) !important;

    background:
        var(--s4a-arrow-bg) !important;

    color:
        var(--s4a-arrow-color) !important;

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

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

    cursor:pointer;

    z-index:20;

    box-shadow:
        0 12px 35px rgba(0,0,0,.20);

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

    appearance:none;
    -webkit-appearance:none;
}


.s4a-carousel-arrow:hover,
.s4a-carousel-arrow:focus {

    background:
        var(--s4a-arrow-hover) !important;

    color:
        var(--s4a-arrow-color) !important;

    border-color:
        rgba(255,255,255,.24) !important;

    outline:none !important;

    box-shadow:
        0 15px 38px rgba(0,0,0,.30) !important;
}


.s4a-carousel-arrow:hover {

    transform:
        translateY(-50%)
        scale(1.08);
}


.s4a-carousel-arrow svg {

    width:22px;
    height:22px;

    display:block;

    fill:none;

    stroke:currentColor;

    stroke-width:1.8;

    stroke-linecap:round;
    stroke-linejoin:round;

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

    pointer-events:none;
}


.s4a-prev {
    left:5%;
}


.s4a-next {
    right:5%;
}


/* =========================================================
   ELEMENTOR CONTENT
   ========================================================= */

.s4a-partner-content {
    width:100%;
    position:relative;
}


.s4a-partner-template {

    display:none;

    width:100%;

    opacity:0;

    transform:
        translateY(15px);

}


.s4a-partner-template.is-active {

    display:block;

    animation:
        s4aContentEnter
        .55s
        cubic-bezier(.22,.8,.25,1)
        forwards;

}


@keyframes s4aContentEnter {

    from {

        opacity:0;

        transform:
            translateY(18px);

    }

    to {

        opacity:1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1024px) {

    .s4a-carousel {
        height:230px;
    }


    .s4a-carousel-item {
        width:
            var(--s4a-logo-tablet);

        height:130px;
    }


    .s4a-carousel-arrow {
        width:48px;
        height:48px;
    }


    .s4a-prev {
        left:20px;
    }


    .s4a-next {
        right:20px;
    }

}


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

@media(max-width:767px) {

    .s4a-carousel {
        height:190px;
    }


    .s4a-carousel-item {

        width:
            var(--s4a-logo-mobile);

        height:100px;

    }


    .s4a-carousel-arrow {

        width:42px;
        height:42px;

    }


    .s4a-carousel-arrow svg {

        width:18px;
        height:18px;

    }


    .s4a-prev {
        left:8px;
    }


    .s4a-next {
        right:8px;
    }

}

/* =========================================================
   V3.1 — PREMIUM CAROUSEL OVERRIDES
   ========================================================= */
.s4a-carousel{
    height:var(--s4a-carousel-height-desktop,250px) !important;
    touch-action:pan-y;
    user-select:none;
    -webkit-user-select:none;
    isolation:isolate;
}
.s4a-carousel-stage{perspective:1100px}

.s4a-carousel-item,
.s4a-carousel-item:hover,
.s4a-carousel-item:focus,
.s4a-carousel-item:active{
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    text-decoration:none !important;
    color:inherit !important;
    border-radius:0 !important;
}
.s4a-carousel-item.is-active img{transition:transform .28s cubic-bezier(.2,.75,.2,1)}
.s4a-carousel-item.is-active:hover img{transform:scale(1.035)}

.s4a-carousel-arrow,
.s4a-carousel-arrow:hover,
.s4a-carousel-arrow:focus,
.s4a-carousel-arrow:active{
    top:50% !important;
    width:var(--s4a-arrow-size-desktop,46px) !important;
    height:var(--s4a-arrow-size-desktop,46px) !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    display:grid !important;
    place-items:center !important;
    line-height:0 !important;
    font-size:0 !important;
    border-radius:var(--s4a-arrow-radius,50%) !important;
    border:1px solid rgba(127,127,127,.22) !important;
    background:var(--s4a-arrow-bg,#151515) !important;
    color:var(--s4a-arrow-color,#fff) !important;
    box-shadow:0 10px 30px rgba(0,0,0,.14) !important;
    text-decoration:none !important;
}
.s4a-carousel-arrow svg{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:20px !important;
    height:20px !important;
    transform:translate(-50%,-50%) !important;
    margin:0 !important;
    padding:0 !important;
}
.s4a-prev{
    left:calc(50% - var(--s4a-arrow-gap-desktop,165px)) !important;
    right:auto !important;
    transform:translate(-50%,-50%) !important;
}
.s4a-next{
    left:calc(50% + var(--s4a-arrow-gap-desktop,165px)) !important;
    right:auto !important;
    transform:translate(-50%,-50%) !important;
}
.s4a-carousel-arrow:hover{
    background:var(--s4a-arrow-hover,#2b2b2b) !important;
    transform:translate(-50%,-50%) scale(1.08) !important;
}
.s4a-carousel-arrow:focus-visible{
    outline:2px solid currentColor !important;
    outline-offset:4px !important;
}
.s4a-carousel.is-single .s4a-carousel-arrow{display:none !important}

@media(max-width:1024px){
    .s4a-carousel{height:var(--s4a-carousel-height-tablet,220px) !important}
    .s4a-carousel-arrow{
        width:var(--s4a-arrow-size-tablet,44px) !important;
        height:var(--s4a-arrow-size-tablet,44px) !important;
    }
    .s4a-prev{left:calc(50% - var(--s4a-arrow-gap-tablet,135px)) !important}
    .s4a-next{left:calc(50% + var(--s4a-arrow-gap-tablet,135px)) !important}
}
@media(max-width:767px){
    .s4a-carousel{height:var(--s4a-carousel-height-mobile,175px) !important}
    .s4a-carousel-arrow{
        width:var(--s4a-arrow-size-mobile,40px) !important;
        height:var(--s4a-arrow-size-mobile,40px) !important;
    }
    .s4a-prev{left:calc(50% - var(--s4a-arrow-gap-mobile,105px)) !important}
    .s4a-next{left:calc(50% + var(--s4a-arrow-gap-mobile,105px)) !important}
}
@media(prefers-reduced-motion:reduce){
    .s4a-carousel-item,.s4a-carousel-arrow{transition:none !important}
}


/* =========================================================
   V3.2 — SIMPLE, RELIABLE CAROUSEL
   ========================================================= */
.s4a-carousel-item{
    width:var(--s4a-logo-desktop) !important;
    height:min(160px, calc(var(--s4a-carousel-height-desktop,250px) - 48px)) !important;
    max-width:none !important;
}
.s4a-carousel-item img{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
}
/* In "Toujours afficher", arrows remain visible even with one partner. */
.s4a-carousel.is-single .s4a-carousel-arrow{display:grid !important;}
/* Arrow position follows the active logo width automatically. Gap setting is now the extra air around logo. */
.s4a-prev{
    left:calc(50% - (var(--s4a-logo-desktop) / 2) - (var(--s4a-arrow-size-desktop,46px) / 2) - 22px) !important;
}
.s4a-next{
    left:calc(50% + (var(--s4a-logo-desktop) / 2) + (var(--s4a-arrow-size-desktop,46px) / 2) + 22px) !important;
}
@media(max-width:1024px){
    .s4a-carousel-item{width:var(--s4a-logo-tablet) !important;height:min(140px, calc(var(--s4a-carousel-height-tablet,220px) - 40px)) !important;}
    .s4a-prev{left:calc(50% - (var(--s4a-logo-tablet) / 2) - (var(--s4a-arrow-size-tablet,44px) / 2) - 16px) !important;}
    .s4a-next{left:calc(50% + (var(--s4a-logo-tablet) / 2) + (var(--s4a-arrow-size-tablet,44px) / 2) + 16px) !important;}
}
@media(max-width:767px){
    .s4a-carousel-item{width:var(--s4a-logo-mobile) !important;height:min(110px, calc(var(--s4a-carousel-height-mobile,175px) - 34px)) !important;}
    .s4a-prev{left:calc(50% - (var(--s4a-logo-mobile) / 2) - (var(--s4a-arrow-size-mobile,40px) / 2) - 10px) !important;}
    .s4a-next{left:calc(50% + (var(--s4a-logo-mobile) / 2) + (var(--s4a-arrow-size-mobile,40px) / 2) + 10px) !important;}
}

/* =========================================================
   V3.4 — FLECHES : REGLAGE REEL DEPUIS LE CENTRE
   ========================================================= */

/*
 * Ces règles sont volontairement placées EN DERNIER.
 * Elles remplacent les anciennes positions fixes de V3.2.
 * La valeur saisie dans WordPress représente la distance
 * entre le centre du carrousel et le centre de chaque flèche.
 */
.s4a-carousel .s4a-prev {
    left: calc(50% - var(--s4a-arrow-gap-desktop, 165px)) !important;
    right: auto !important;
}

.s4a-carousel .s4a-next {
    left: calc(50% + var(--s4a-arrow-gap-desktop, 165px)) !important;
    right: auto !important;
}

@media (max-width: 1024px) {
    .s4a-carousel .s4a-prev {
        left: calc(50% - var(--s4a-arrow-gap-tablet, 135px)) !important;
        right: auto !important;
    }

    .s4a-carousel .s4a-next {
        left: calc(50% + var(--s4a-arrow-gap-tablet, 135px)) !important;
        right: auto !important;
    }
}

@media (max-width: 767px) {
    .s4a-carousel .s4a-prev {
        left: calc(50% - var(--s4a-arrow-gap-mobile, 105px)) !important;
        right: auto !important;
    }

    .s4a-carousel .s4a-next {
        left: calc(50% + var(--s4a-arrow-gap-mobile, 105px)) !important;
        right: auto !important;
    }
}