/* ==========================================================================
   BANDEAU DES MARQUES PARTENAIRES [ma_marques]
   ========================================================================== */

/* --- LE CONTENEUR GLOBAL --- */
.ma-marques-section { 
    max-width: 1300px !important; 
    margin: 60px auto !important; 
    padding: 0 20px !important; 
    box-sizing: border-box !important; 
    overflow: hidden; 
}

/* --- EN-TÊTE ET TITRE --- */
.ma-marques-header { 
    text-align: left; 
    margin-bottom: 30px; 
    border-left: 5px solid #F16725; 
    padding-left: 15px; 
}

.ma-marques-title { 
    font-family: 'Oswald', sans-serif !important; 
    font-size: 2.5rem !important; 
    font-weight: 900 !important; 
    text-transform: uppercase !important; 
    color: #111 !important; 
    margin: 0 !important; 
    display: flex !important; 
    align-items: center !important; 
}

.ma-marques-title .ma-hl-orange { 
    background-color: #F16725; 
    color: #fff !important; 
    padding: 0 15px; 
    margin-left: 10px; 
    display: inline-block !important; 
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); 
}

/* --- LE CARROUSEL INFINI --- */
.ma-marques-slider { 
    height: 100px; 
    margin: auto; 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); 
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); 
}

.ma-marques-track { 
    display: flex; 
    align-items: center; 
    width: max-content; 
    animation: defilement_marques 40s linear infinite; 
}

.ma-marques-slider:hover .ma-marques-track { 
    animation-play-state: paused; 
}

@keyframes defilement_marques { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(-50%); } 
}

/* --- GESTION DES ESPACEMENTS (Logos carrés et rectangles) --- */
.ma-marque-slide { 
    height: 100px; 
    padding: 0 35px; /* Crée l'espace fixe entre chaque logo */
    display: flex; 
    justify-content: center; 
    align-items: center; 
    box-sizing: border-box; 
}

.ma-marque-slide img { 
    height: 65px; 
    width: auto; /* Laisse l'image prendre sa largeur naturelle */
    object-fit: contain; 
    filter: grayscale(100%) opacity(40%); 
    transition: all 0.4s ease; 
}

.ma-marque-slide:hover img { 
    filter: grayscale(0%) opacity(100%); 
    transform: scale(1.1); 
}