/* =========================================================
   FUTURIST GAMES — CARROUSEL PREMIUM
   Version optimisée Divi / WordPress
   Fond transparent + pleine largeur + flèches repositionnées
========================================================= */

:root {
  --fg-carousel-blue: #19bdf2;
  --fg-carousel-blue-dark: #1787df;
  --fg-carousel-purple: #7552ff;
  --fg-carousel-white: #ffffff;
  --fg-carousel-radius: 25px;
  --fg-carousel-duration: 620ms;
}

/* =========================================================
   RESET LOCAL
========================================================= */

#fgPremiumCarousel,
#fgPremiumCarousel *,
#fgPremiumCarousel *::before,
#fgPremiumCarousel *::after {
  box-sizing: border-box;
}

#fgPremiumCarousel button,
#fgPremiumCarousel a {
  -webkit-tap-highlight-color: transparent;
}

#fgPremiumCarousel button {
  font: inherit;
}

/* =========================================================
   CONTENEUR PRINCIPAL TRANSPARENT
========================================================= */

#fgPremiumCarousel {
  position: relative;
  isolation: isolate;

  display: block;

  width: 100vw !important;
  max-width: none !important;

  margin-top: 0;
  margin-bottom: 0;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  padding: 24px 0 26px;

  overflow: hidden;

  color: var(--fg-carousel-white);

  font-family:
    Inter,
    Montserrat,
    Arial,
    Helvetica,
    sans-serif;

  background: transparent !important;
}

/* Supprime les anciens halos et grilles */

#fgPremiumCarousel::before,
#fgPremiumCarousel::after {
  display: none !important;
  content: none !important;
}

/* =========================================================
   STAGE
========================================================= */

#fgPremiumCarousel .fg-stage {
  position: relative;
  z-index: 1;

  display: block;

  width: 100% !important;
  max-width: none !important;
  height: 620px;

  margin: 0;

  overflow: hidden;

  user-select: none;
  -webkit-user-select: none;

  touch-action: pan-y;
}

#fgPremiumCarousel .fg-track {
  position: absolute;
  inset: 0;
  z-index: 1;

  display: block;

  width: 100% !important;
  max-width: none !important;
  height: 100%;

  overflow: visible;

  perspective: 1700px;
  transform-style: preserve-3d;

  touch-action: pan-y;
}

/* =========================================================
   CARTES
========================================================= */

#fgPremiumCarousel .fg-slide {
  position: absolute;
  top: 50%;
  left: 50%;

  display: block;

  width: 380px;
  height: 530px;

  margin: 0;
  padding: 0;

  overflow: hidden;

  border: 1px solid rgba(170, 197, 255, 0.18);
  border-radius: var(--fg-carousel-radius);

  color: #ffffff;
  text-decoration: none;

  cursor: pointer;

  background: #080b12;

  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.68),
    inset 0 1px rgba(255, 255, 255, 0.04);

  transform:
    translate(-50%, -50%)
    translate3d(0, 0, 0);

  transform-origin: center center;

  transition:
    transform var(--fg-carousel-duration)
      cubic-bezier(0.2, 0.75, 0.2, 1),
    opacity var(--fg-carousel-duration) ease,
    filter var(--fg-carousel-duration) ease,
    border-color 300ms ease,
    box-shadow 300ms ease;

  will-change:
    transform,
    opacity,
    filter;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#fgPremiumCarousel .fg-slide::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 2;

  border-radius: inherit;

  pointer-events: none;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.11),
      transparent 18%,
      transparent 74%,
      rgba(0, 164, 255, 0.06)
    );

  opacity: 0.5;
}

#fgPremiumCarousel .fg-slide::after {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 2;

  border-radius: inherit;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      transparent 42%,
      rgba(0, 0, 0, 0.04) 54%,
      rgba(0, 0, 0, 0.48) 75%,
      rgba(0, 0, 0, 0.92) 100%
    );
}

/* =========================================================
   IMAGES
========================================================= */

#fgPremiumCarousel .fg-slide img {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;
  max-width: none;

  border: 0;

  object-fit: cover;
  object-position: center;

  pointer-events: none;

  transform: scale(1.003);

  transition:
    transform 850ms cubic-bezier(0.2, 0.75, 0.2, 1),
    filter 350ms ease;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#fgPremiumCarousel
  .fg-slide[data-pos="0"]:hover
  img {
  transform: scale(1.035);
}

/* =========================================================
   CONTENU DES CARTES
========================================================= */

#fgPremiumCarousel .fg-card-content {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;

  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;

  padding: 110px 22px 24px;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(2, 4, 10, 0.08) 14%,
      rgba(2, 4, 10, 0.72) 50%,
      rgba(2, 4, 10, 0.98) 100%
    );

  transition:
    opacity 320ms ease,
    transform 320ms ease;
}

#fgPremiumCarousel .fg-card-title {
  display: block;

  width: 100%;

  margin: 0 0 9px;
  padding: 0;

  color: var(--fg-carousel-blue);

  font-size: 27px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-align: center;
  text-transform: uppercase;

  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.95),
    0 0 17px rgba(0, 183, 255, 0.32);
}

#fgPremiumCarousel .fg-card-description {
  display: block;

  max-width: 325px;

  margin: 0 auto 17px;
  padding: 0;

  color: rgba(255, 255, 255, 0.94);

  font-size: 15px;
  font-weight: 500;
  line-height: 1.42;
  text-align: center;

  text-shadow:
    0 2px 7px rgba(0, 0, 0, 0.95);
}

/* =========================================================
   BOUTON DES CARTES
========================================================= */

#fgPremiumCarousel .fg-card-button {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 56px;

  margin: 0;
  padding: 12px 18px;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 999px;

  color: #ffffff;

  font-size: 14px;
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: 0.018em;
  text-align: center;
  text-transform: uppercase;

  text-shadow:
    0 1px 7px rgba(0, 0, 0, 0.28);

  background:
    linear-gradient(
      135deg,
      #18bde9 0%,
      #1c8cde 52%,
      #6656f5 100%
    );

  box-shadow:
    0 14px 34px rgba(0, 159, 229, 0.36),
    inset 0 1px rgba(255, 255, 255, 0.28),
    inset 0 -1px rgba(0, 0, 0, 0.18);

  transition:
    transform 240ms ease,
    filter 240ms ease,
    box-shadow 240ms ease;
}

#fgPremiumCarousel .fg-card-button::before {
  content: "";

  position: absolute;
  top: -55%;
  left: -85%;

  width: 58%;
  height: 210%;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
    );

  transform: rotate(20deg);

  transition: left 620ms ease;
}

#fgPremiumCarousel
  .fg-slide[data-pos="0"]:hover
  .fg-card-button {
  transform: translateY(-3px);

  filter: brightness(1.08);

  box-shadow:
    0 18px 42px rgba(0, 159, 229, 0.49),
    0 0 25px rgba(95, 77, 255, 0.25),
    inset 0 1px rgba(255, 255, 255, 0.3);
}

#fgPremiumCarousel
  .fg-slide[data-pos="0"]:hover
  .fg-card-button::before {
  left: 130%;
}

/* =========================================================
   POSITION DES CARTES
========================================================= */

#fgPremiumCarousel .fg-slide[data-pos="0"] {
  z-index: 10;

  opacity: 1;

  filter:
    brightness(1)
    saturate(1);

  border-color: rgba(139, 184, 255, 0.3);

  box-shadow:
    0 38px 108px rgba(0, 0, 0, 0.76),
    0 0 47px rgba(0, 132, 255, 0.14),
    inset 0 1px rgba(255, 255, 255, 0.05);

  transform:
    translate(-50%, -50%)
    translate3d(0, 0, 100px)
    scale(1);
}

#fgPremiumCarousel .fg-slide[data-pos="-1"] {
  z-index: 8;

  opacity: 0.82;

  filter:
    brightness(0.74)
    saturate(0.8);

  transform:
    translate(-50%, -50%)
    translate3d(-285px, 16px, -120px)
    rotateY(7deg)
    scale(0.91);
}

#fgPremiumCarousel .fg-slide[data-pos="1"] {
  z-index: 8;

  opacity: 0.82;

  filter:
    brightness(0.74)
    saturate(0.8);

  transform:
    translate(-50%, -50%)
    translate3d(285px, 16px, -120px)
    rotateY(-7deg)
    scale(0.91);
}

#fgPremiumCarousel .fg-slide[data-pos="-2"] {
  z-index: 6;

  opacity: 0.44;

  filter:
    brightness(0.55)
    saturate(0.58);

  transform:
    translate(-50%, -50%)
    translate3d(-560px, 30px, -280px)
    rotateY(11deg)
    scale(0.8);
}

#fgPremiumCarousel .fg-slide[data-pos="2"] {
  z-index: 6;

  opacity: 0.44;

  filter:
    brightness(0.55)
    saturate(0.58);

  transform:
    translate(-50%, -50%)
    translate3d(560px, 30px, -280px)
    rotateY(-11deg)
    scale(0.8);
}

#fgPremiumCarousel .fg-slide[data-pos="-3"] {
  z-index: 4;

  opacity: 0.16;

  filter:
    brightness(0.38)
    saturate(0.4);

  transform:
    translate(-50%, -50%)
    translate3d(-760px, 46px, -400px)
    scale(0.69);
}

#fgPremiumCarousel .fg-slide[data-pos="3"] {
  z-index: 4;

  opacity: 0.16;

  filter:
    brightness(0.38)
    saturate(0.4);

  transform:
    translate(-50%, -50%)
    translate3d(760px, 46px, -400px)
    scale(0.69);
}

#fgPremiumCarousel
  .fg-slide[data-hidden="true"] {
  z-index: 0;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transform:
    translate(-50%, -50%)
    scale(0.6);
}

/* =========================================================
   CARTES LATÉRALES
========================================================= */

#fgPremiumCarousel
  .fg-slide:not([data-pos="0"])
  .fg-card-content {
  opacity: 0.82;
}

#fgPremiumCarousel
  .fg-slide:not([data-pos="0"])
  .fg-card-title {
  font-size: 23px;
}

#fgPremiumCarousel
  .fg-slide:not([data-pos="0"])
  .fg-card-description {
  font-size: 13px;
}

#fgPremiumCarousel
  .fg-slide:not([data-pos="0"])
  .fg-card-button {
  min-height: 49px;
  font-size: 12px;
}

/* =========================================================
   FLÈCHES
========================================================= */

#fgPremiumCarousel .fg-arrow {
  position: absolute;
  top: 50%;
  z-index: 200;

  display: grid !important;
  place-items: center;

  width: 58px;
  height: 58px;

  margin: 0;
  padding: 0;

  border: 1px solid rgba(183, 204, 255, 0.28);
  border-radius: 50%;

  color: #ffffff;

  cursor: pointer;
  pointer-events: auto !important;

  background:
    linear-gradient(
      145deg,
      rgba(18, 25, 42, 0.92),
      rgba(5, 8, 16, 0.84)
    );

  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.5),
    0 0 22px rgba(0, 157, 255, 0.12),
    inset 0 1px rgba(255, 255, 255, 0.12);

  transform: translateY(-50%);

  transition:
    transform 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease;

  appearance: none;
  -webkit-appearance: none;
}

#fgPremiumCarousel .fg-arrow:hover {
  border-color: rgba(75, 175, 255, 0.82);

  background:
    linear-gradient(
      145deg,
      rgba(29, 93, 173, 0.94),
      rgba(39, 35, 112, 0.88)
    );

  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.54),
    0 0 28px rgba(0, 157, 255, 0.28),
    inset 0 1px rgba(255, 255, 255, 0.16);

  transform:
    translateY(-50%)
    scale(1.08);
}

#fgPremiumCarousel .fg-arrow:active {
  transform:
    translateY(-50%)
    scale(0.94);
}

#fgPremiumCarousel .fg-arrow:focus-visible {
  outline: 3px solid rgba(44, 174, 255, 0.55);
  outline-offset: 5px;
}

#fgPremiumCarousel .fg-arrow svg {
  display: block;

  width: 26px;
  height: 26px;

  pointer-events: none;
}

/*
  Les flèches restent dans une zone utile de 1380 px
  même si le carrousel prend 100 % de l’écran.
*/

#fgPremiumCarousel .fg-prev {
  left: max(24px, calc(50% - 690px));
}

#fgPremiumCarousel .fg-next {
  right: max(24px, calc(50% - 690px));
}

/* =========================================================
   POINTS
========================================================= */

#fgPremiumCarousel .fg-dots {
  position: relative;
  z-index: 210;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 30px;

  margin: 0;
  padding: 2px 20px 0;
}

#fgPremiumCarousel .fg-dot {
  display: block;

  width: 8px;
  height: 8px;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 999px;

  cursor: pointer;

  background: rgba(139, 153, 182, 0.62);

  transition:
    width 280ms ease,
    transform 280ms ease,
    background 280ms ease,
    box-shadow 280ms ease;

  appearance: none;
  -webkit-appearance: none;
}

#fgPremiumCarousel .fg-dot:hover {
  background: #a8b6cf;
  transform: scale(1.18);
}

#fgPremiumCarousel
  .fg-dot[aria-current="true"] {
  width: 34px;

  background:
    linear-gradient(
      90deg,
      #24bdf4,
      #4c72ff 55%,
      #7949ff
    );

  box-shadow:
    0 0 18px rgba(62, 136, 255, 0.68);
}

#fgPremiumCarousel .fg-dot:focus-visible {
  outline: 2px solid #39c7ff;
  outline-offset: 4px;
}

/* =========================================================
   FOCUS CARTES
========================================================= */

#fgPremiumCarousel .fg-slide:focus {
  outline: none;
}

#fgPremiumCarousel .fg-slide:focus-visible {
  outline: 3px solid rgba(45, 190, 255, 0.72);
  outline-offset: 5px;
}

/* =========================================================
   ÉCRANS INFÉRIEURS À 1400 PX
========================================================= */

@media (max-width: 1400px) {
  #fgPremiumCarousel .fg-prev {
    left: 24px;
  }

  #fgPremiumCarousel .fg-next {
    right: 24px;
  }
}

/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 1100px) {
  #fgPremiumCarousel .fg-stage {
    height: 585px;
  }

  #fgPremiumCarousel .fg-slide {
    width: 350px;
    height: 488px;
  }

  #fgPremiumCarousel .fg-slide[data-pos="-1"] {
    transform:
      translate(-50%, -50%)
      translate3d(-220px, 15px, -130px)
      rotateY(6deg)
      scale(0.88);
  }

  #fgPremiumCarousel .fg-slide[data-pos="1"] {
    transform:
      translate(-50%, -50%)
      translate3d(220px, 15px, -130px)
      rotateY(-6deg)
      scale(0.88);
  }

  #fgPremiumCarousel .fg-slide[data-pos="-2"] {
    transform:
      translate(-50%, -50%)
      translate3d(-430px, 28px, -260px)
      rotateY(9deg)
      scale(0.76);
  }

  #fgPremiumCarousel .fg-slide[data-pos="2"] {
    transform:
      translate(-50%, -50%)
      translate3d(430px, 28px, -260px)
      rotateY(-9deg)
      scale(0.76);
  }

  #fgPremiumCarousel .fg-slide[data-pos="-3"],
  #fgPremiumCarousel .fg-slide[data-pos="3"] {
    opacity: 0;
    pointer-events: none;
  }

  #fgPremiumCarousel .fg-prev {
    left: 16px;
  }

  #fgPremiumCarousel .fg-next {
    right: 16px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {
  #fgPremiumCarousel {
    padding: 12px 0 22px;
  }

  #fgPremiumCarousel .fg-stage {
    height: min(138vw, 560px);
    min-height: 485px;
  }

  #fgPremiumCarousel .fg-slide {
    width: min(80vw, 355px);
    height: auto;

    aspect-ratio: 380 / 530;

    border-radius: 22px;
  }

  #fgPremiumCarousel .fg-slide[data-pos="0"] {
    transform:
      translate(-50%, -50%)
      translate3d(0, 0, 70px)
      scale(1);
  }

  #fgPremiumCarousel .fg-slide[data-pos="-1"] {
    z-index: 5;

    opacity: 0.23;

    filter:
      brightness(0.5)
      saturate(0.58);

    transform:
      translate(-50%, -50%)
      translate3d(-110px, 10px, -160px)
      scale(0.76);
  }

  #fgPremiumCarousel .fg-slide[data-pos="1"] {
    z-index: 5;

    opacity: 0.23;

    filter:
      brightness(0.5)
      saturate(0.58);

    transform:
      translate(-50%, -50%)
      translate3d(110px, 10px, -160px)
      scale(0.76);
  }

  #fgPremiumCarousel .fg-slide[data-pos="-2"],
  #fgPremiumCarousel .fg-slide[data-pos="2"],
  #fgPremiumCarousel .fg-slide[data-pos="-3"],
  #fgPremiumCarousel .fg-slide[data-pos="3"] {
    opacity: 0;
    pointer-events: none;
  }

  #fgPremiumCarousel .fg-card-content {
    padding: 92px 17px 18px;
  }

  #fgPremiumCarousel .fg-card-title {
    margin-bottom: 7px;
    font-size: 22px;
  }

  #fgPremiumCarousel .fg-card-description {
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.36;
  }

  #fgPremiumCarousel .fg-card-button {
    min-height: 48px;
    padding: 10px 12px;
    font-size: 12px;
  }

  #fgPremiumCarousel
    .fg-slide:not([data-pos="0"])
    .fg-card-content {
    opacity: 0;
  }

  #fgPremiumCarousel .fg-arrow {
    width: 46px;
    height: 46px;
  }

  #fgPremiumCarousel .fg-arrow svg {
    width: 22px;
    height: 22px;
  }

  #fgPremiumCarousel .fg-prev {
    left: 10px;
  }

  #fgPremiumCarousel .fg-next {
    right: 10px;
  }

  #fgPremiumCarousel
    .fg-dot[aria-current="true"] {
    width: 28px;
  }
}

/* =========================================================
   PETITS MOBILES
========================================================= */

@media (max-width: 420px) {
  #fgPremiumCarousel .fg-stage {
    height: 130vw;
    min-height: 465px;
    max-height: 530px;
  }

  #fgPremiumCarousel .fg-slide {
    width: 82vw;
    max-width: 335px;
  }

  #fgPremiumCarousel .fg-card-content {
    padding:
      82px
      15px
      15px;
  }

  #fgPremiumCarousel .fg-card-title {
    font-size: 20px;
  }

  #fgPremiumCarousel .fg-card-description {
    font-size: 12px;
  }

  #fgPremiumCarousel .fg-card-button {
    min-height: 46px;
    font-size: 11px;
  }

  #fgPremiumCarousel .fg-arrow {
    width: 42px;
    height: 42px;
  }

  #fgPremiumCarousel .fg-prev {
    left: 7px;
  }

  #fgPremiumCarousel .fg-next {
    right: 7px;
  }
}

/* =========================================================
   MOBILE PAYSAGE
========================================================= */

@media
  (max-height: 560px)
  and (orientation: landscape) {
  #fgPremiumCarousel {
    padding-top: 8px;
    padding-bottom: 12px;
  }

  #fgPremiumCarousel .fg-stage {
    height: 450px;
    min-height: 450px;
  }

  #fgPremiumCarousel .fg-slide {
    width: 285px;
    height: 397px;
  }

  #fgPremiumCarousel .fg-card-content {
    padding:
      72px
      14px
      14px;
  }

  #fgPremiumCarousel .fg-card-title {
    font-size: 19px;
  }

  #fgPremiumCarousel .fg-card-description {
    margin-bottom: 10px;
    font-size: 11px;
  }

  #fgPremiumCarousel .fg-card-button {
    min-height: 43px;
    font-size: 10px;
  }

  #fgPremiumCarousel .fg-prev {
    left: 10px;
  }

  #fgPremiumCarousel .fg-next {
    right: 10px;
  }
}

/* =========================================================
   ANIMATIONS RÉDUITES
========================================================= */

@media (prefers-reduced-motion: reduce) {
  #fgPremiumCarousel .fg-slide,
  #fgPremiumCarousel .fg-slide img,
  #fgPremiumCarousel .fg-card-content,
  #fgPremiumCarousel .fg-card-button,
  #fgPremiumCarousel .fg-card-button::before,
  #fgPremiumCarousel .fg-arrow,
  #fgPremiumCarousel .fg-dot {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}