/* =========================================
   POLICE PIRATA ONE
   ========================================= */
@font-face {
  font-family: 'Pirata One';
  src: url('../Pirata_One/PirataOne-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* =========================================
   VARIABLES & RESET
   ========================================= */
:root {
  --black:   #080808;
  --white:   #f5f5f5;
  --red:     #c83333;
  --red-dim: #da4b4b;
  --grey:    #1a1a1a;

  /* Taille de la porte du carousel — sert de base à toute la section Games.
     min(20vw, 24vh) : contraint par la largeur ET la hauteur de l'écran,
     pour que la section entière (titre + portes + description) tienne dans le viewport. */
  --door-w: clamp(130px, min(20vw, 24vh), 250px);
  /* Espace sous la plaine — ancré sur --door-w pour que la plaine reste
     toujours dans le même rapport visuel avec les portes, quelle que soit
     la taille de l'écran. */
  --games-footer: clamp(40px, calc(var(--door-w) * 0.2), 190px);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background: var(--black); /* fallback derrière le canvas fixe */
}

body {
  background: transparent;  /* laisse le canvas fixe visible */
  color: var(--white);
  font-family: 'Pirata One', 'Segoe UI', system-ui, sans-serif;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* =========================================
   STARFIELD — canvas fixe pleine page
   ========================================= */
#hyperspace-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* =========================================
   NAVBAR LATÉRALE
   ========================================= */
#navbar {
  position: fixed;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.nav-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--white);
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: background 0.3s, transform 0.3s, border-color 0.3s;
}

.nav-dot::after {
  content: attr(data-label-en);
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--white);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}

.nav-dot:hover::after,
.nav-dot.active::after {
  opacity: 0.6;
}

.nav-dot.active {
  background: var(--white);
  border-color: var(--white);
  transform: scale(1);
}

.nav-dot:hover {
  border-color: var(--red);
}

body.lang-fr .nav-dot::after {
  content: attr(data-label-fr);
}

/* =========================================
   BOUTON LANGUE
   ========================================= */
#lang-toggle {
  position: fixed;
  top: 24px;
  right: 28px;
  z-index: 100;
  background: transparent;
  border: 1px solid var(--white);
  color: var(--white);
  font-family: 'Pirata One', sans-serif;
  font-size: 12px;
  letter-spacing: 0.15em;
  padding: 5px 12px;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
}

#lang-toggle:hover {
  border-color: var(--red);
  color: var(--red);
}

/* =========================================
   SECTION HERO — transparente, starfield visible
   ========================================= */
#hero {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

#hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2.5vh, 24px);
}

#logo {
  width: clamp(160px, 60vmin, 420px);
  height: clamp(160px, 60vmin, 420px);
  object-fit: contain;
}

#brand-name {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: normal;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--white);
}

#brand-subtitle {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(0.7rem, 1.2vw, 0.9rem);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.45;
  margin-top: -10px;
}

/* =========================================
   TITRES DE SECTION
   ========================================= */

.section-title {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  font-weight: normal;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 60px;
  text-align: center;
}

.section-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--red);
  margin: 14px auto 0;
}

/* =========================================
   SECTION OUR GAMES — transparente en haut,
   plaine en bas, starfield visible dans le ciel
   ========================================= */
#games {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 0;
  overflow: hidden;
  background: transparent;
}

/* Plaine : gradient transparent→noir à l'horizon (120px) pour bloquer
   le starfield exactement sous la ligne d'horizon */
#plain-bg {
  position: absolute;
  bottom: var(--games-footer);
  left: 50%;
  transform: translateX(-50%);
  width: 2800px;
  height: calc(var(--door-w) * 2);
  background: linear-gradient(to bottom, transparent clamp(60px, 10vw, 120px), var(--black) clamp(60px, 10vw, 120px));
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}

#plain-bg img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

/* Bouche le gap entre le bas de #plain-bg et le bas de la section */
#games::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--games-footer); /* = valeur de bottom sur #plain-bg */
  background: var(--black);
  z-index: 0;
}

/* Titre + carrousel au-dessus de la plaine */
#games .section-title {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
  margin-top: clamp(30px, 3vh, 80px);
}

/* Scène du carrousel */
#carousel-scene {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow: hidden;
  margin-top: 16px;
}

/* Piste — hauteur = top offset (0.14) + porte (2.4) + micro-tampon (0.01) */
#carousel-track {
  position: relative;
  height: calc(var(--door-w) * 2.3);
  overflow: visible;
}

/* Ligne de navigation : ‹ Titre du jeu › */
#carousel-nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 0px;
}

#carousel-title {
  font-size: 18px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.85;
  min-width: 160px;
  text-align: center;
}

/* Chevrons ‹ et › */
.chevron {
  background: none;
  border: none;
  color: var(--white);
  font-size: 2.4rem;
  line-height: 1;
  opacity: 0.35;
  cursor: pointer;
  padding: 0 6px;
  transition: opacity 0.25s, color 0.25s;
  user-select: none;
}

.chevron:hover {
  opacity: 1;
  color: var(--red);
}

/* Chaque carte de jeu */
.game-card {
  position: absolute;
  /* Décalage vers le bas : les portes descendent vers la plaine */
  top: calc(var(--door-w) * 0.14);
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  will-change: transform, filter;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              filter   0.55s ease;
}

/* Conteneur porte + screenshot — proportionnel à --door-w (ratio 1:2.4) */
.game-wrapper {
  position: relative;
  width: var(--door-w);
  height: calc(var(--door-w) * 2.4);
}

/* Porte (door.png) par-dessus le screenshot */
.gate-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}

/* Zone du screenshot — calée pixel-perfect sur l'ouverture de door.png.
   Coin supérieur gauche de l'ouverture : (49, 68) dans une image 250×600.
   Ouverture : 152×267px (ratio 9:16 exact) */
.game-frame {
  position: absolute;
  top:    24%;   /* 66px ≈ pixel 68  */
  left:   12%;   /* 50px ≈ pixel 49  */
  right:  13%;   /* symétrique       */
  bottom: 20%;   /* 264px → ouverture 270px, ratio 9:16 */
  overflow: hidden;
  background: var(--grey);
}

.game-screenshot {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 9:16 → remplit exactement l'ouverture 9:16 */
  display: block;
}

/* Points du carrousel */
#carousel-dots {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

/* Description du jeu actif — tout contraint par min(vw, vh) comme --door-w */
#carousel-info {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(10px, min(2vw, 2.5vh), 20px);
  margin-top: clamp(4px, 1vh, 8px);
  width: clamp(220px, min(50vw, 55vh), 360px);
  padding: clamp(8px, 1.2vh, 14px) clamp(10px, min(2vw, 2vh), 18px);
}

#game-icon {
  width: clamp(48px, min(7vw, 8vh), 96px);
  height: clamp(48px, min(7vw, 8vh), 96px);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--grey);
  border-radius: clamp(8px, min(1.5vw, 1.5vh), 18px);
}

#game-desc {
  font-family: 'Pirata One', sans-serif;
  font-size: clamp(12px, min(1.4vw, 1.8vh), 18px);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--white);
}

.cdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white);
  opacity: 0.2;
  cursor: pointer;
  transition: opacity 0.3s;
}

.cdot.active {
  opacity: 1;
}

/* Porte cliquable */
.door-link {
  display: block;
  text-decoration: none;
  transition: filter 0.3s;
}

.door-link:hover {
  filter: brightness(1.18);
}

/* Lien "Discover →" sous la description */
#discover-link {
  position: relative;
  z-index: 2;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Pirata One', sans-serif;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.45;
  text-decoration: none;
  transition: opacity 0.25s, color 0.25s;
}

#discover-link:hover {
  opacity: 1;
  color: var(--red);
}

.discover-arrow {
  transition: transform 0.25s;
}

#discover-link:hover .discover-arrow {
  transform: translateX(4px);
}

/* =========================================
   SECTION ABOUT US — fond noir opaque
   (masque le starfield)
   ========================================= */
#about {
  position: relative;
  z-index: 1;
  background: var(--black);
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200px clamp(60px, 12vw, 220px) 140px;
  text-align: center;
}

#about .section-title {
  margin-bottom: 0;
}

.glow-text {
  text-shadow:
    0 0 8px  rgba(245, 245, 245, 0.8),
    0 0 24px rgba(245, 245, 245, 0.4),
    0 0 50px rgba(245, 245, 245, 0.15);
  will-change: transform;
  transform: translateZ(0);
}

#about-sun {
  width: clamp(60px, 8vw, 100px);
  margin-top: clamp(32px, 10vh, 60px);
  margin-bottom: clamp(32px, 10vh, 60px);
  filter:
    drop-shadow(0 0 8px  rgba(245, 245, 245, 0.8))
    drop-shadow(0 0 24px rgba(245, 245, 245, 0.4))
    drop-shadow(0 0 50px rgba(245, 245, 245, 0.15));
  will-change: transform;
  transform: translateZ(0);
}

.about-text {
  font-size: clamp(0.95rem, 2vw, 1.5rem);
  line-height: 2;
  color: var(--white);
  max-width: 680px;
  margin-top: clamp(32px, 5vh, 60px);
  /*margin-bottom: 50px;*/
}

/* =========================================
   SECTION CONTACT — fond noir opaque
   ========================================= */
#contact {
  position: relative;
  z-index: 1;
  background: var(--black);
  min-height: 40vh;
  opacity : 0.5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px 200px; /* padding-bottom remplace le margin-top du sun-wrapper */
}

#contact-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  opacity : 0.5;
  border: 1px solid rgba(245, 245, 245, 0.4);
  color: var(--white);
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}

.contact-btn:hover {
  border-color: var(--white);
  background: rgba(245, 245, 245, 0.08);
}

.contact-btn.copied {
  border-color: #52c88a;
  color: #52c88a;
}

#btn-mail-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#copy-toast {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #52c88a;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

#copy-toast.visible {
  opacity: 1;
}

/* =========================================
   SOLEIL DE PARTICULES — fond noir opaque
   ========================================= */
#sun-wrapper {
  position: relative;
  z-index: 1;
  background: var(--black);
  width: 100%;
  height: 48vw;
  max-height: 680px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: 0;
  flex-shrink: 0;
}

#sun-canvas {
  width: 100vw;
  height: 100vw;
  flex-shrink: 0;
}

/* =========================================
   RESPONSIVE — tablettes (≤ 900px)
   ========================================= */
@media (max-width: 900px) {
  :root {
    --door-w: clamp(140px, 26vw, 200px);
  }

  #carousel-info {
    width: clamp(240px, 70vw, 360px);
  }
}

/* =========================================
   RESPONSIVE — mobiles (≤ 520px)
   ========================================= */
@media (max-width: 520px) {
  :root {
    --door-w: clamp(120px, 52vw, 160px);
    --games-footer: 40px;
  }

  /* Navbar latérale → masquée, remplacée par la navigation tactile seule */
  #navbar {
    display: none;
  }

  /* Bouton langue plus discret */
  #lang-toggle {
    top: 14px;
    right: 16px;
    font-size: 11px;
    padding: 4px 10px;
  }

  /* Hero : moins d'espace vertical entre les éléments */
  #hero-content {
    gap: clamp(8px, 2vh, 16px);
  }

  /* Info-bulle du jeu : pleine largeur */
  #carousel-info {
    width: 90vw;
    gap: 12px;
    padding: 10px 14px;
  }

  #game-desc {
    font-size: 14px;
  }

  #game-icon {
    width: 52px;
    height: 52px;
    border-radius: 10px;
  }

  /* Titre de section : moins de marge basse */
  .section-title {
    margin-bottom: 40px;
  }

  /* About : padding réduit */
  #about {
    padding: 60px clamp(24px, 6vw, 60px);
  }

  /* Contact : padding réduit */
  #contact {
    padding: 60px 20px 140px;
  }
}