/**
 * Styles pour le carousel de sponsors personnalisé
 * Avec largeurs variables selon le type de sponsor
 * Design basé sur maquette Figma 1440px
 */

/* Variables */
:root {
  --sponsor-border-color: #BB2332;
  --sponsor-border-width: 1px;
  --sponsor-gap: 24px;
  
  /* Largeurs basées sur le design Figma 1440px */
  --sponsor-width-petit: 190px;
  --sponsor-width-moyen: 285px;
  --sponsor-width-grand: 380px;
  
  /* Hauteur uniforme pour tous */
  --sponsor-height: 190px;
  
  /* Couleur de fond */
  --sponsor-bg: #F5F5F5;
}

/* Container principal */
.sponsors-carousel-section {
  width: 100%;
  padding: 40px 0; /* Augmenté pour donner plus d'espace aux images */
  overflow: hidden; /* Pour contenir le débordement du carousel */
}

.sponsors-carousel-wrapper {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 12px 0; /* Moitié de l'écart souhaité (24px/2) */
}

/* Rangée du bas avec margin négatif */
.sponsors-carousel-wrapper[data-liste="inferieur"] {
  margin-top: -40px;
}

/* Sur mobile, ajuster l'espacement */
@media (max-width: 768px) {
  .sponsors-carousel-wrapper[data-liste="inferieur"] {
    margin-top: -20px;
  }
}

.sponsors-carousel-container {
  width: 100%;
  overflow: hidden; /* Remettre à hidden pour le bon fonctionnement du scroll */
  padding: 0;
}

/* Track qui contient les sponsors */
.sponsors-carousel-track {
  display: flex;
  gap: var(--sponsor-gap);
  overflow-x: auto;
  overflow-y: hidden; /* Changé pour éviter les conflits */
  scroll-behavior: auto; /* Géré par JS pour un scroll fluide */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  padding: 20px 0; /* Espace pour les ombres */
  /* Force GPU acceleration sur iOS */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Empêche le scroll élastique sur iOS */
  -webkit-scroll-snap-type: none;
  scroll-snap-type: none;
  /* Transition pour les animations transform sur iOS */
  will-change: transform;
  /* Pas de transition par défaut pour éviter les conflits avec l'animation JS */
  transition: none;
}

.sponsors-carousel-track::-webkit-scrollbar {
  display: none;
}

/* La direction est gérée en JavaScript */

/* Items du carousel avec largeurs variables */
.sponsor-item {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

/* Largeurs selon le type - FALLBACK petit si pas de taxonomie */
.sponsor-item {
  width: var(--sponsor-width-petit);
}

.sponsor-item.sponsor-petit {
  width: var(--sponsor-width-petit);
}

.sponsor-item.sponsor-moyen {
  width: var(--sponsor-width-moyen);
}

.sponsor-item.sponsor-grand {
  width: var(--sponsor-width-grand);
}

/* Card du sponsor avec les styles Figma */
.sponsor-card {
  background: #FFFFFF;
  border-radius: 32px;
  height: var(--sponsor-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* Ombre plus subtile comme dans Figma */
  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden; /* Remettre à hidden pour un meilleur contrôle */
}

/* Bordure rouge UNIQUEMENT pour les grands sponsors */
.sponsor-grand .sponsor-card {
  border: var(--sponsor-border-width) solid var(--sponsor-border-color);
}

/* Hover effects subtils */
.sponsor-item:hover .sponsor-card {
  transform: translateY(-2px);
  box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.12);
}

/* Logo du sponsor */
.sponsor-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  padding: 10px; /* Petit padding pour que l'image ne touche pas les bords */
}

/* Placeholder si pas d'image */
.sponsor-placeholder {
  text-align: center;
  color: #999;
  font-size: 14px;
  padding: 20px;
}

/* Lien */
.sponsor-card a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

/* Boutons de navigation */
.sponsors-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: none; /* Masqué temporairement */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  opacity: 0.8;
}

.sponsors-nav:hover {
  opacity: 1;
  background: #f5f5f5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.sponsors-nav-prev {
  left: 20px;
}

.sponsors-nav-next {
  right: 20px;
}

.sponsors-nav svg {
  width: 20px;
  height: 20px;
  color: #666;
}

/* Responsive - proportions maintenues */
@media (max-width: 1200px) {
  :root {
    --sponsor-width-petit: 160px;
    --sponsor-width-moyen: 240px;
    --sponsor-width-grand: 320px;
    --sponsor-height: 160px;
  }
}

@media (max-width: 1024px) {
  :root {
    --sponsor-width-petit: 140px;
    --sponsor-width-moyen: 210px;
    --sponsor-width-grand: 280px;
    --sponsor-height: 140px;
    --sponsor-gap: 20px;
  }
}

@media (max-width: 768px) {
  :root {
    --sponsor-width-petit: 120px;
    --sponsor-width-moyen: 180px;
    --sponsor-width-grand: 240px;
    --sponsor-height: 120px;
    --sponsor-gap: 16px;
  }
  
  .sponsor-card {
    padding: 20px;
  }
  
  .sponsors-nav {
    width: 36px;
    height: 36px;
  }
  
  .sponsors-nav-prev {
    left: 10px;
  }
  
  .sponsors-nav-next {
    right: 10px;
  }
}

@media (max-width: 480px) {
  :root {
    --sponsor-width-petit: 100px;
    --sponsor-width-moyen: 150px;
    --sponsor-width-grand: 200px;
    --sponsor-height: 100px;
    --sponsor-gap: 12px;
  }
  
  .sponsor-card {
    padding: 15px;
  }
}

/* Désactiver la sélection de texte pendant le drag */
.sponsors-carousel-track.dragging {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Styles spécifiques pour iOS Safari */
@supports (-webkit-touch-callout: none) {
  .sponsors-carousel-track {
    /* Forcer l'accélération matérielle */
    will-change: transform;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    /* Désactiver le scroll overflow sur iOS quand on utilise transform */
    overflow-x: visible !important;
    /* Assurer une animation fluide */
    -webkit-perspective: 1000;
    perspective: 1000;
  }
  
  .sponsors-carousel-container {
    /* Empêcher iOS de bloquer le scroll */
    -webkit-overflow-scrolling: touch;
    overflow: hidden !important;
  }
  
  /* Forcer la hauteur sur iOS */
  .sponsors-carousel-wrapper {
    min-height: calc(var(--sponsor-height) + 40px);
  }
  
  /* Optimisation des performances pour iOS */
  .sponsor-item {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}