/**
 * ============================================
 * CLIENT LOGOS HOVER EFFECT
 * ============================================
 * Effet de glissement de couleur entre les logos
 * Animation GSAP avec détection de direction
 */

.client-logo-item {
    cursor: pointer;
}

/* Arrière-plan de couleur (animé par GSAP) */
.client-logo-bg {
    will-change: transform, opacity;
    /* Pas de transition CSS - géré par GSAP uniquement */
}

/* Logo content */
.client-logo-content svg,
.client-logo-content img {
    transition: opacity 0.3s ease;
}

.client-logo-item:hover .client-logo-content svg,
.client-logo-item:hover .client-logo-content img {
    opacity: 1 !important;
}

/* État actif (avec couleur) */
.client-logo-item.active .client-logo-bg {
    opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .client-logo-item {
        aspect-ratio: 4/3;
    }
}