/*
Theme Name: TOPPIX PRODUCTION
Theme URI: https://toppixproduction.com
Author: Senior Full-Stack Team
Description: Thème institutionnel Pixel-Perfect converti depuis React. Engineering, Logistics & AV.
Version: 1.0.4
Text Domain: toppix
*/

body { font-family: 'Inter', sans-serif; }
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #0a192f; border-radius: 10px; }
.rtl { direction: rtl; }

/* GALLERY SWIPER */
.toppix-gallery-swiper {
    height: 220px;
}
.toppix-gallery-slide {
    width: 100% !important;
    height: 220px !important;
}
.toppix-gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (min-width: 768px) {
    .toppix-gallery-swiper {
        height: 420px;
    }
    .toppix-gallery-slide {
        height: 420px !important;
    }
}

/* VIDEO RESPONSIVE WRAPPER */
.toppix-video-wrap {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    height: 56.25vw; /* true 16:9 on mobile */
    max-height: 240px;
}
.toppix-video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}
@media (min-width: 768px) {
    .toppix-video-wrap {
        width: 100%;
        left: auto;
        transform: none;
        height: 0;
        max-height: none;
        padding-bottom: 56.25%;
    }
}

/* LOGO SLIDER ANIMATION */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 5)); }
}

.logo-slider {
    display: flex;
    width: calc(250px * 10);
    animation: scroll 40s linear infinite;
}

.logo-slider:hover {
    animation-play-state: paused;
}

.logo-item {
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
}

.logo-item img {
    max-height: 40px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.5;
    transition: all 0.4s ease;
}

.logo-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}