/**
 * GVA PARTNER SLIDER - CSS EXTERNE
 * 3 Styles: Minimaliste, Double Inversé, Bento Cards
 */

/* ===================================
   VARIABLES
   =================================== */
.gva-partner-slider {
   --ada-teal: #74a1a0;
   --ada-green: #76b852;
   --bg-body: #ffffff;
}

/* ===================================
   BASE SLIDER
   =================================== */
.slider-wrapper {
   width: 100%;
   overflow: hidden;
   position: relative;
   padding: 20px 0;
}

/* Effet fade sur les bords */
.slider-wrapper::before,
.slider-wrapper::after {
   content: "";
   height: 100%;
   width: 15vw;
   position: absolute;
   z-index: 2;
   top: 0;
   pointer-events: none;
}

.slider-wrapper::before {
   left: 0;
   background: linear-gradient(to right, white, transparent);
}

.slider-wrapper::after {
   right: 0;
   background: linear-gradient(to left, white, transparent);
}

.logo-track {
   display: flex;
   width: calc(250px * 16);
   align-items: center;
}

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

.logo-item img {
   max-height: 70px;
   max-width: 180px;
   object-fit: contain;
   filter: grayscale(1);
   opacity: 0.6;
   transition: all 0.4s ease;
}

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

/* ===================================
   STYLE 1: SLIDER MINIMALISTE
   =================================== */
.animate-slow {
   animation: scroll-left 35s linear infinite;
}

/* ===================================
   STYLE 2: DOUBLE INVERSÉ
   =================================== */
.animate-reverse {
   animation: scroll-right 40s linear infinite;
}

.double-slider .logo-track:first-child {
   margin-bottom: 30px;
}

/* ===================================
   STYLE 3: BENTO CARDS
   =================================== */
.bento-track .logo-item {
   padding: 15px;
   width: 280px;
}

.bento-card {
   background: #f8fafc;
   width: 100%;
   height: 120px;
   border-radius: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
   border: 1px solid transparent;
   transition: all 0.3s ease;
}

.bento-card:hover {
   background: white;
   border-color: var(--ada-green);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
   transform: translateY(-5px);
}

.bento-card img {
   max-height: 50px;
   max-width: 150px;
}

/* ===================================
   ANIMATIONS KEYFRAMES
   =================================== */
@keyframes scroll-left {
   0% {
      transform: translateX(0);
   }
   100% {
      transform: translateX(calc(-250px * 8));
   }
}

@keyframes scroll-right {
   0% {
      transform: translateX(calc(-250px * 8));
   }
   100% {
      transform: translateX(0);
   }
}

/* ===================================
   RESPONSIVE
   =================================== */
@media (max-width: 768px) {
   .logo-item {
      width: 180px;
      padding: 0 20px;
   }
   
   .logo-track {
      width: calc(180px * 16);
   }
   
   .animate-slow {
      animation-duration: 20s;
   }
   
   .animate-reverse {
      animation-duration: 25s;
   }
   
   .slider-wrapper::before,
   .slider-wrapper::after {
      width: 50px;
   }
   
   .bento-track .logo-item {
      width: 220px;
   }
   
   .bento-card {
      height: 100px;
   }
   
   @keyframes scroll-left {
      0% {
         transform: translateX(0);
      }
      100% {
         transform: translateX(calc(-180px * 8));
      }
   }
   
   @keyframes scroll-right {
      0% {
         transform: translateX(calc(-180px * 8));
      }
      100% {
         transform: translateX(0);
      }
   }
}

@media (max-width: 576px) {
   .logo-item {
      width: 150px;
      padding: 0 15px;
   }
   
   .logo-track {
      width: calc(150px * 16);
   }
   
   .logo-item img {
      max-height: 45px;
      max-width: 120px;
   }
   
   .bento-track .logo-item {
      width: 180px;
   }
   
   .bento-card {
      height: 80px;
      padding: 15px;
   }
   
   @keyframes scroll-left {
      0% {
         transform: translateX(0);
      }
      100% {
         transform: translateX(calc(-150px * 8));
      }
   }
   
   @keyframes scroll-right {
      0% {
         transform: translateX(calc(-150px * 8));
      }
      100% {
         transform: translateX(0);
      }
   }
}

/* ===================================
   PAUSE ON HOVER
   =================================== */
.slider-wrapper:hover .logo-track {
   animation-play-state: paused;
}