/* games-slider.css — Golden Play France */

/* overflow:hidden est essentiel ici : le JS Swiper est importé sans sa
   feuille de style officielle (celle-ci fournit normalement .swiper{overflow:
   hidden}), donc une fois Swiper initialisé — et les cartes déplacées via
   transform plutôt que via le défilement natif — rien d'autre ne les
   contient dans les limites du slider. Sans cette règle, les cartes
   débordent visuellement de la page (bug constaté sur un appareil réel où
   Swiper se charge correctement, contrairement à cet environnement de test
   qui n'a pas accès au CDN et ne passe donc jamais par ce chemin de code). */
.games-slider { position: relative; padding-bottom: 0.25rem; overflow: hidden; }

/* Repli CSS : disposition horizontale même avant l'initialisation de Swiper.js. */
.games-slider .swiper-wrapper {
  display: flex;
}
/* L'espacement (gap) entre cartes n'est appliqué qu'en mode repli. Une fois
   Swiper actif, il gère lui-même l'espacement via margin-right en style
   inline sur chaque slide (option spaceBetween) : garder notre gap:1rem
   actif en permanence l'aurait cumulé avec cette marge, faussant encore la
   largeur totale que Swiper croit devoir parcourir. */
.games-slider:not(.swiper-initialized) .swiper-wrapper {
  gap: 1rem;
}

/* Le défilement natif (overflow-x) n'est actif QUE tant que Swiper.js n'a pas
   pris le relais : Swiper fait défiler via transform (translate3d), pas via
   overflow. Si les deux mécanismes restent actifs en même temps, leurs
   décalages s'additionnent : les cartes se figent à mi-course et un espace
   vide apparaît (bug constaté). Une fois initialisé, Swiper ajoute la classe
   "swiper-initialized" sur .games-slider — le repli overflow-x est alors
   désactivé et Swiper contrôle seul le défilement (tactile + flèches). */
.games-slider:not(.swiper-initialized) .swiper-wrapper {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /* Défilement horizontal conservé, mais barre de défilement native masquée
     (les flèches permettent déjà la navigation ; le glisser tactile/trackpad
     reste possible). */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.games-slider:not(.swiper-initialized) .swiper-wrapper::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
}

/* Largeur fixe de 150px : uniquement en mode repli (avant/à défaut de Swiper).
   Une fois Swiper initialisé, il calcule et applique lui-même la largeur de
   chaque slide en style inline selon slidesPerView (2.3 à 480 → 7 à 1440).
   Si notre flex-basis:150px restait actif en permanence, il entrerait en
   conflit avec cette largeur inline (flex-basis prime sur width pour un
   enfant flex) : Swiper déplacerait le wrapper en croyant une largeur de
   slide différente de celle réellement affichée, et l'écart s'accumule à
   chaque clic jusqu'à empêcher d'atteindre les dernières cartes (bug
   constaté : impossible de dérouler jusqu'à la fin de la liste). */
.games-slider:not(.swiper-initialized) .games-slider__slide {
  width: 150px;
  flex: 0 0 150px;
}
.games-slider__slide {
  height: auto;
  scroll-snap-align: start;
}

.games-slider__card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  height: 100%;
}

.games-slider__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: calc(var(--radius-card) - 0.6rem);
}

.games-slider__name {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.games-slider__play {
  padding: 0.55rem 0.5rem;
  font-size: 0.8125rem;
}

/* Flèches ancrées aux bords gauche/droite du slider, centrées verticalement
   sur la rangée de cartes (recouvrement en overlay, hors du flux normal). */
.games-slider__nav {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
  padding-inline: 0.35rem;
  pointer-events: none;
}

.games-slider__arrow {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), opacity var(--transition);
  box-shadow: var(--shadow-card);
  pointer-events: auto;
  flex-shrink: 0;
}
.games-slider__arrow:hover { background: var(--color-neutral-btn); }
.games-slider__arrow svg { width: 1.25rem; height: 1.25rem; }
.games-slider__arrow.swiper-button-disabled { opacity: 0.35; pointer-events: none; }