/* Accueil : sections Pourquoi, Jeux, Avis, FAQ + appel final, Nous trouver.
   Mobile d'abord, desktop à partir de 992px (même point de rupture que le reste du site). */

:root {
  --home-yellow: #FDCD00;
  --home-yellow-hover: #ffdc3d;
  --home-ink: #00082F;
  --home-muted: #c9cbe6;
  --home-soft: #a9acd0;
  --home-card: rgba(255, 255, 255, 0.05);
  --home-line: rgba(255, 255, 255, 0.14);
  --home-glow: rgba(124, 58, 237, 0.3);
}

/* ---------- Éléments communs ---------- */

.why, .games-v2, .reviews-v2, .faq-v2, .cta-v2, .find-us {
  position: relative;
  z-index: 1;
  color: #fff;
  font-family: var(--font-main);
}
/* Les carrousels débordent jusqu'au bord de l'écran : on coupe ce qui dépasse pour éviter un défilement horizontal de la page */
.games-v2, .reviews-v2 { overflow-x: clip; }

.home-eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--home-yellow);
}

.home-title.title {
  margin: 0;
  font-size: 30px;
  line-height: 1.12;
  text-transform: uppercase;
}

.home-lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--home-muted);
}

.home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 30px;
  border: 0;
  border-radius: 6px 6px 20px 6px;
  background: var(--home-yellow);
  color: var(--home-ink);
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, transform .2s;
}
.home-btn span { font-size: 1.15em; }
.home-btn:hover { background: var(--home-yellow-hover); color: var(--home-ink); transform: translateY(-1px); }
.home-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.home-btn--small { min-height: 46px; padding: 0 18px; font-size: 14px; letter-spacing: 1.5px; border-radius: 4px 4px 14px 4px; }
.home-btn--large { min-height: 64px; font-size: 17px; }
.home-btn--ghost { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.45); border-radius: 6px; font-size: 14px; letter-spacing: 1.5px; min-height: 52px; }
.home-btn--ghost:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

.home-link {
  color: var(--home-yellow);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
.home-link:hover { color: var(--home-yellow-hover); text-decoration: underline; text-underline-offset: 3px; }

.home-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1.5px solid var(--home-yellow);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s;
}
.home-chip span { color: var(--home-yellow); }
.home-chip:hover { background: rgba(253, 205, 0, 0.1); color: #fff; }

.home-stars { margin: 0; color: var(--home-yellow); letter-spacing: 2px; }
.home-stars__off { color: rgba(255, 255, 255, 0.3); }

/* ---------- Pourquoi Pixel Rush ---------- */

.why {
  padding: 56px 0;
  background: radial-gradient(ellipse 90% 30% at 30% 22%, rgba(124, 58, 237, 0.35), transparent 70%);
}
.why .container { display: flex; flex-direction: column; gap: 28px; }
.why__head { display: flex; flex-direction: column; gap: 14px; max-width: 1000px; }

.why__body { display: flex; flex-direction: column; gap: 20px; }
.why__photo-frame {
  position: relative;
  aspect-ratio: 7 / 4;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.why__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.why__photo.is-active { opacity: 1; }

.why__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--home-line);
}
.why__tab {
  min-height: 48px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--home-muted);
  font-family: var(--font-title);
  font-size: 15px;
  text-transform: uppercase;
  cursor: pointer;
}
.why__tab[aria-selected="true"] { background: var(--home-yellow); color: var(--home-ink); }
.why__tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.why__card {
  display: none;
  margin-top: 14px;
  padding: 24px 22px;
  border-radius: 14px;
  background: var(--home-card);
  border: 1px solid var(--home-line);
  flex-direction: column;
  gap: 20px;
}
.why__card.is-active { display: flex; }
.why__card-title { display: none; margin: 0; font-family: var(--font-title); font-weight: 400; font-size: 22px; text-transform: uppercase; color: var(--home-yellow); }
.why__point { display: flex; flex-direction: column; gap: 4px; }
.why__point-title { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2; }
.why__point-text { margin: 0; font-size: 15px; line-height: 1.45; color: var(--home-soft); }

.why__footer { display: flex; flex-direction: column; gap: 22px; }
/* sur mobile, le bouton flottant « Réservez maintenant » suit déjà l'internaute */
.why__footer > .home-btn { display: none; }
.why__occasions { display: flex; flex-direction: column; gap: 12px; }
.why__occasion-label { margin: 0; font-size: 15px; font-weight: 700; color: var(--home-muted); }
.why__chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Nos jeux ---------- */

.games-v2 {
  padding: 56px 0 48px;
  background: radial-gradient(ellipse 90% 40% at 60% 50%, var(--home-glow), transparent 70%);
  scroll-margin-top: 120px;
}
.games-v2 .container { display: flex; flex-direction: column; gap: 28px; }
.games-v2__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.games-v2__head > div:first-child { display: flex; flex-direction: column; gap: 12px; }
.games-v2__arrows { display: none; gap: 12px; flex-shrink: 0; }
.games-v2__arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s, opacity .2s;
}
.games-v2__arrow svg { width: 22px; height: 22px; }
.games-v2__arrow:hover:not(:disabled) { border-color: var(--home-yellow); }
.games-v2__arrow:disabled { opacity: .35; cursor: default; }

.games-v2__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* le carrousel déborde à droite jusqu'au bord de l'écran */
  margin-right: calc(-1 * (100vw - 100%) / 2);
  padding-right: calc((100vw - 100%) / 2);
  padding-bottom: 4px;
}
.games-v2__track::-webkit-scrollbar { display: none; }

.games-v2__card {
  flex: 0 0 270px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-snap-align: start;
}
.games-v2__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: #0b0d3a;
  overflow: hidden;
}
.games-v2__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.games-v2__info { display: flex; gap: 12px; align-items: center; }
.games-v2__logo { width: 44px; height: 44px; flex-shrink: 0; object-fit: contain; }
.games-v2__name { margin: 0; font-size: 19px; font-weight: 800; }
.games-v2__more {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--home-yellow);
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.games-v2__more:hover { text-decoration: underline; text-underline-offset: 3px; }

.games-v2__card--soon {
  box-sizing: border-box;
  align-self: flex-start;
  padding: 26px 24px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: #2a1560;
  gap: 12px;
}
.games-v2__soon-mark { margin: 0; font-family: var(--font-title); font-size: 44px; line-height: 1; color: #c4b5fd; }
.games-v2__soon-text { margin: 0; font-size: 14px; line-height: 1.4; color: var(--home-muted); }
.games-v2__form { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.games-v2__form label { font-size: 12px; font-weight: 600; color: var(--home-muted); }
.games-v2__form input[type="email"] {
  height: 44px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 0;
  border-radius: 4px;
  font-family: var(--font-main);
  font-size: 15px;
  color: var(--home-ink);
}
.games-v2__form .home-btn { margin-top: 4px; }

.games-v2__dots { display: flex; justify-content: center; gap: 6px; }
.games-v2__dot { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.35); transition: width .2s, background-color .2s; }
.games-v2__dot.is-active { width: 22px; background: var(--home-yellow); }

.games-v2__cta { display: none; }

/* ---------- Avis ---------- */

.reviews-v2 {
  padding: 40px 0 36px;
  background: linear-gradient(180deg, transparent, #0a0b3d 50%, transparent);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.reviews-v2 .container { display: flex; flex-direction: column; gap: 22px; }
.reviews-v2__head { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.reviews-v2__summary { display: flex; align-items: center; gap: 40px; }
.reviews-v2__score { display: flex; align-items: center; gap: 14px; }
.reviews-v2__value { margin: 0; font-family: var(--font-title); font-size: 42px; line-height: 1; }
.reviews-v2__score .home-stars { font-size: 18px; }
.reviews-v2__count { margin: 2px 0 0; font-size: 14px; color: var(--home-muted); }
.reviews-v2__count strong { color: #fff; }
.reviews-v2__count a { color: var(--home-yellow); font-weight: 700; text-decoration: none; }
.reviews-v2__count a:hover { text-decoration: underline; }
.reviews-v2__title.title { display: none; margin: 0; font-size: 26px; line-height: 1.1; text-transform: uppercase; }

.reviews-v2__list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-right: calc(-1 * (100vw - 100%) / 2);
  padding-right: calc((100vw - 100%) / 2);
}
.reviews-v2__list::-webkit-scrollbar { display: none; }
.reviews-v2__card {
  flex: 0 0 240px;
  box-sizing: border-box;
  margin: 0;
  scroll-snap-align: start;
  border-radius: 12px;
  background: var(--home-card);
  border: 1px solid rgba(255, 255, 255, 0.13);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.reviews-v2__card--photo { flex-basis: 250px; border-color: rgba(253, 205, 0, 0.45); background: rgba(253, 205, 0, 0.07); }
.reviews-v2__photo { width: 100%; height: 100px; object-fit: cover; display: block; }
.reviews-v2__body { flex-grow: 1; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.reviews-v2__card--photo .reviews-v2__body { padding: 14px 16px; gap: 6px; }
.reviews-v2__stars { font-size: 14px; letter-spacing: 1px; }
.reviews-v2__quote { flex-grow: 1; margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; }
.reviews-v2__author { font-size: 13px; color: var(--home-soft); }
.reviews-v2__author strong { color: #fff; }

/* ---------- FAQ ---------- */

.faq-v2 {
  padding: 56px 0 48px;
  background: radial-gradient(ellipse 90% 30% at 30% 10%, rgba(124, 58, 237, 0.32), transparent 70%);
}
.faq-v2__inner { display: flex; flex-direction: column; gap: 16px; }
.faq-v2__intro { display: flex; flex-direction: column; gap: 16px; }
.faq-v2__lead, .faq-v2__actions { display: none; }
.faq-v2__list { display: flex; flex-direction: column; gap: 12px; }
.faq-v2__item { border-radius: 10px; background: rgba(76, 29, 149, 0.35); border: 1px solid rgba(167, 139, 250, 0.35); overflow: hidden; }
.faq-v2__question { margin: 0; }
.faq-v2__question button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.faq-v2__question button:focus-visible { outline: 2px solid var(--home-yellow); outline-offset: -2px; }
.faq-v2__toggle {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--home-yellow);
  color: var(--home-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s;
}
.faq-v2__toggle svg { width: 16px; height: 16px; }
.faq-v2__question button[aria-expanded="true"] .faq-v2__toggle { transform: rotate(180deg); }
.faq-v2__answer p { margin: 0; padding: 0 20px 16px; font-size: 15px; line-height: 1.5; color: #d4d6ef; }
.faq-v2__answer a { color: var(--home-yellow); font-weight: 700; }
.faq-v2__more-mobile { align-self: center; margin-top: 6px; }

/* ---------- Appel final ---------- */

.cta-v2 {
  padding: 52px 0 56px;
  background:
    linear-gradient(180deg, rgba(0, 8, 47, 0.6), rgba(0, 8, 47, 0.95) 60%),
    url('../img/video/main-video-poster.webp') center / cover no-repeat;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.cta-v2__inner { display: flex; flex-direction: column; gap: 18px; }
.cta-v2__main { display: flex; flex-direction: column; gap: 18px; }
.cta-v2__rating { margin: 0; font-size: 14px; font-weight: 700; color: var(--home-muted); }
.cta-v2__title.title { margin: 0; font-size: 38px; line-height: 1.05; text-transform: uppercase; }
.cta-v2__text { margin: 0; font-size: 17px; line-height: 1.45; color: #e2e3f5; }
.cta-v2__points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cta-v2__points li { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.cta-v2__points svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--home-yellow); }
.cta-v2__actions { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.cta-v2__question { margin: 0; text-align: center; font-size: 14px; color: var(--home-muted); }
.cta-v2__question a { color: var(--home-yellow); font-weight: 700; text-decoration: none; }

/* ---------- Nous trouver ---------- */

.find-us {
  padding: 52px 0 44px;
  background: radial-gradient(ellipse 90% 30% at 30% 10%, rgba(124, 58, 237, 0.28), transparent 70%);
}
.find-us__inner { display: flex; flex-direction: column; gap: 22px; }
.find-us__main { display: contents; }
.find-us__main .home-title { order: 1; }
.find-us__infos { order: 2; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.find-us__photo { order: 3; }
.find-us__hours { order: 4; display: flex; flex-direction: column; gap: 22px; }

.find-us__info { display: flex; gap: 14px; align-items: center; }
.find-us__icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--home-yellow); color: var(--home-ink); display: flex; align-items: center; justify-content: center; }
.find-us__icon svg { width: 20px; height: 20px; }
.find-us__info > div { display: flex; flex-direction: column; gap: 2px; }
.find-us__info-main { margin: 0; font-size: 15px; font-weight: 700; color: #fff; text-decoration: none; }
a.find-us__info-main:hover { color: var(--home-yellow); }
.find-us__info .home-link { font-size: 14px; }

.find-us__hours-title { margin: 0 0 4px; font-size: 14px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--home-yellow); }
.find-us__hours dl { margin: 0; }
.find-us__hours-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 15px; }
.find-us__hours-row dt { color: var(--home-muted); }
.find-us__hours-row dd { margin: 0; font-weight: 700; }
.find-us__hours-row dd.is-closed { color: #8f92b8; }

/* la vue aérienne a déjà son cadre incliné intégré à l'image */
.find-us__photo img { display: block; width: 100%; height: auto; }

/* ---------- Desktop ---------- */

@media (min-width: 992px) {
  .home-title.title { font-size: 46px; line-height: 1.08; }
  .home-lead { font-size: 20px; }

  /* Pourquoi */
  .why { padding: 80px 0; background: radial-gradient(ellipse 60% 55% at 18% 70%, rgba(124, 58, 237, 0.35), transparent 70%); }
  .why .container { gap: 44px; }
  .why .home-title.title { font-size: 56px; }
  .why .home-lead { font-size: 22px; }
  .why__body { flex-direction: row; align-items: center; gap: 64px; }
  .why__photo-frame {
    flex: 0 0 36%;
    aspect-ratio: 12 / 11;
    border-radius: 6px;
    border-width: 3px;
    border-color: rgba(255, 255, 255, 0.55);
    transform: perspective(1100px) rotateY(14deg);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  }
  .why__groups { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .why__tabs { display: none; }
  .why__card { display: flex; margin: 0; padding: 32px; border-radius: 16px; gap: 26px; }
  .why__card-title { display: block; }
  .why__point { gap: 6px; }
  .why__point-title { font-size: 23px; }
  .why__point-text { font-size: 16px; }
  .why__footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    padding: 22px 28px;
    border-radius: 16px;
    background: rgba(253, 205, 0, 0.07);
    border: 1px solid rgba(253, 205, 0, 0.3);
  }
  .why__occasions { flex-direction: row; align-items: center; gap: 18px; flex-wrap: wrap; }
  .why__occasion-label { font-size: 17px; }
  .why__footer > .home-btn { display: inline-flex; flex-shrink: 0; }

  /* Jeux */
  .games-v2 { padding: 96px 0 80px; background: radial-gradient(ellipse 50% 60% at 70% 50%, var(--home-glow), transparent 70%); }
  .games-v2 .container { gap: 40px; }
  .games-v2__arrows { display: flex; }
  .games-v2__track { gap: 24px; }
  .games-v2__card { flex-basis: 300px; }
  .games-v2__name { font-size: 20px; }
  .games-v2__dots { display: none; }
  .games-v2__cta { display: inline-flex; align-self: flex-start; }

  /* Avis */
  .reviews-v2 { padding: 52px 0; }
  .reviews-v2 .container { gap: 26px; }
  .reviews-v2__value { font-size: 52px; }
  .reviews-v2__score .home-stars { font-size: 19px; }
  .reviews-v2__count { font-size: 15px; }
  .reviews-v2__title.title { display: block; }
  .reviews-v2__list { display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); gap: 16px; overflow: visible; margin-right: 0; padding-right: 0; }
  .reviews-v2__photo { height: 110px; }
  .reviews-v2__quote { font-size: 16px; }

  /* FAQ */
  .faq-v2 { padding: 88px 0; background: radial-gradient(ellipse 45% 60% at 20% 40%, rgba(124, 58, 237, 0.32), transparent 70%); }
  .faq-v2__inner { flex-direction: row; gap: 80px; }
  .faq-v2__intro { flex: 0 0 400px; gap: 20px; }
  .faq-v2__lead { display: block; font-size: 18px; }
  .faq-v2__actions { display: flex; align-items: center; gap: 24px; margin-top: 8px; flex-wrap: wrap; }
  .faq-v2__actions .home-link { font-size: 16px; }
  .faq-v2__list { flex: 1; }
  .faq-v2__question button { padding: 20px 24px; font-size: 19px; }
  .faq-v2__answer p { padding: 0 24px 20px; font-size: 17px; }
  .faq-v2__more-mobile { display: none; }

  /* Appel final */
  .cta-v2 {
    padding: 80px 0;
    background:
      linear-gradient(90deg, rgba(0, 8, 47, 0.96) 35%, rgba(0, 8, 47, 0.55)),
      url('../img/video/main-video-poster.webp') center / cover no-repeat;
  }
  .cta-v2__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 60px; }
  .cta-v2__main { gap: 22px; max-width: 760px; }
  .cta-v2__rating { font-size: 15px; }
  .cta-v2__title.title { font-size: 64px; }
  .cta-v2__text { font-size: 21px; }
  .cta-v2__points { display: flex; flex-wrap: wrap; gap: 14px 28px; }
  .cta-v2__points li { font-size: 17px; }
  .cta-v2__actions { flex: 0 0 330px; gap: 16px; margin: 0; }

  /* Nous trouver */
  .find-us { padding: 80px 0; background: radial-gradient(ellipse 50% 60% at 25% 40%, rgba(124, 58, 237, 0.28), transparent 70%); }
  .find-us__inner { flex-direction: row; align-items: center; gap: 72px; }
  .find-us__main { display: flex; flex-direction: column; gap: 30px; flex: 0 0 560px; }
  .find-us__infos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
  .find-us__info-main { font-size: 16px; }
  .find-us__hours { flex-direction: row; gap: 40px; }
  .find-us__hours-col { flex: 1; }
  .find-us__photo { flex: 1; }
}

@media (min-width: 992px) and (max-width: 1279px) {
  .why__groups { grid-template-columns: 1fr; }
  .faq-v2__intro { flex-basis: 320px; }
  .find-us__main { flex-basis: 480px; }
}

@media (prefers-reduced-motion: reduce) {
  .games-v2__track, .why__photo { scroll-behavior: auto; transition: none; }
  .home-btn { transition: none; }
}