/* ==========================================
   CLIENTS GRID ANIMATION 3x2
   Grille carrée avec rotation des logos via src
========================================== */

.clients-grid-container {
  background: #f8f9fa;
  padding: 80px 40px;
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0;
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid #d3d3d3;
  border-collapse: collapse;
}

.grid-cell {
  aspect-ratio: 1 / 1;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  min-height: 200px;
  border-right: 1px solid #d3d3d3;
  border-bottom: 1px solid #d3d3d3;
}

.grid-cell:nth-child(3n) {
  border-right: none;
}

.grid-cell:nth-child(n + 5) {
  border-bottom: none;
}

.grid-cell:hover {
  background: #fafafa;
}

.client-logo {
  max-width: 40%;
  max-height: 40%;
  object-fit: contain;
  width: auto;
  height: auto;
  transition: opacity 1s ease-in-out;
  opacity: 1;
}

/* ==========================================
   ANIMATIONS FADE IN/OUT
   
   Cycle 12 secondes:
   0-3s:     Logo visible (opacity: 1)
   3-4s:     Fade out (opacity: 0)
   4s:       JS change le src
   4-5s:     Fade in (opacity: 1)
   5-8s:     Logo visible
   8-9s:     Fade out
   9s:       JS change le src
   9-10s:    Fade in
   10-12s:   Logo visible + cycle repeat
========================================== */

/* Cases ODD (1, 3, 5) - changent à 4s, 16s, 28s, etc. */
.grid-cell-1 .client-logo,
.grid-cell-3 .client-logo,
.grid-cell-5 .client-logo {
  animation: logoFadeOdd 12s infinite ease-in-out;
}

/* Cases EVEN (2, 4, 6) - changent à 9s, 21s, 33s, etc. */
.grid-cell-2 .client-logo,
.grid-cell-4 .client-logo,
.grid-cell-6 .client-logo {
  animation: logoFadeEven 12s infinite ease-in-out;
}

/* ODD: Fade 0-3s, out 3-4s, in 4-5s, visible 5-12s */
@keyframes logoFadeOdd {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  25.1% {
    opacity: 0;
  }
  33.3% {
    opacity: 0;
  }
  41.6% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* EVEN: Fade 0-8s, out 8-9s, in 9-10s, visible 10-12s */
@keyframes logoFadeEven {
  0% {
    opacity: 1;
  }
  66.6% {
    opacity: 1;
  }
  66.7% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  83.3% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 1024px) {
  .clients-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 800px;
  }
}

@media (max-width: 768px) {
  .clients-grid-container {
    padding: 60px 20px;
  }

  .clients-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 100%;
  }

  .grid-cell {
    min-height: 150px;
  }
}

@media (max-width: 600px) {
  .clients-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 100%;
  }

  .clients-grid-container {
    padding: 40px 15px;
  }

  .grid-cell {
    min-height: 140px;
  }
}