/* ==========================================================
   PARTNERS CAROUSEL — Visibility & Layout
   ========================================================== */

/* 1. RÈGLES DE VISIBILITÉ STRICTES */
.partners-carousel.mobile {
    display: none !important;
}

.partners-carousel.desktop {
    display: block;
}

/* 2. STYLE GÉNÉRAL */
.partners-carousel {
    grid-column: 2 / 3;
    max-width: 1070px;
    width: 100%;
    margin: 40px auto 60px;
    padding: 0 40px;
    position: relative;
    overflow: hidden;
}

.partners-carousel p {
    font-size: 16px;
    margin-bottom: 60px;
    line-height: 1.6;
    text-align: justify;
}

/* --- CONTENEUR --- */
.carousel-wrapper {
    position: relative;
    width: 100%;
    min-height: 120px;
}

.partners-carousel.desktop .carousel-track {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-slide {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    width: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    pointer-events: none;
}

.carousel-slide.active {
    opacity: 1;
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

/* LOGIQUE D'AFFICHAGE DESKTOP */
.carousel-slide img {
    height: 65px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    transition: transform 0.8s ease;
}

/* --- DOTS NAVIGATION --- */
.carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
    position: relative;
    z-index: 5;
    height: 14px;
}

.carousel-dots button {
    width: 8px;
    height: 8px;
    border-radius: 10px;
    border: none;
    background-color: #e0e0e0;
    cursor: pointer;
    padding: 0;
    transition: width 0.3s ease, background-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

.carousel-dots button.active {
    width: 32px;
    background-color: #e0e0e0;
    cursor: default;
}

.carousel-dots button.active::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: #9e9e9e;
    border-radius: 10px;
    animation: progressFill 4s linear forwards;
}

@keyframes progressFill {
    from { width: 0%; }
    to { width: 100%; }
}

/* --- DARK THEME DOTS --- */
html.dark-theme .carousel-dots button { 
    background-color: #333; 
}
html.dark-theme .carousel-dots button.active { 
    background-color: #333; 
}
html.dark-theme .carousel-dots button.active::after { 
    background-color: #fff; 
}

/* =================================================================
   RESPONSIVE MOBILE (Écrans ≤ 900px)
   ================================================================= */
@media (max-width: 900px) {
    
    .partners-carousel.desktop { 
        display: none !important; 
    }
    
    .partners-carousel.mobile { 
        display: block !important; 
        margin-bottom: 40px; 
        padding: 0 30px; 
    }

    .carousel-wrapper {
        min-height: 100px;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    .carousel-track-mobile {
        display: flex !important;
        width: 100%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .carousel-track-mobile::-webkit-scrollbar { 
        display: none; 
    }

    .partners-carousel.mobile .carousel-slide {
        position: relative !important;
        flex: 0 0 100%;
        min-width: 100%;
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 40px;
        scroll-snap-align: center;
        pointer-events: auto;
    }

    .partners-carousel.mobile .carousel-slide img {
        height: 60px !important;
        width: auto !important;
        max-width: 130px !important;
        display: block !important;
        flex-shrink: 0;
    }
}