/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url('assets/gallerie.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  height: 100vh;
  transition: background-image 0.4s ease-in-out;
}


.hover-gauche {
  background-image: url('assets/gallerieG.png'); /* Remplace par l’image que tu veux */
}

/* Mouvement gauche-droite */
@keyframes bougerGaucheDroite {
  0%, 100% {
    transform: translateY(-50%) translateX(0);
  }
  50% {
    transform: translateY(-50%) translateX(20px);
  }
}

@keyframes bougerDroiteGauche {
  0%, 100% {
    transform: translateY(-50%) translateX(0);
  }
  50% {
    transform: translateY(-50%) translateX(-20px);
  }
}

.maingauche {
  position: absolute;
  left: 0;
  top: 50%;
  padding-left: 200px;
  animation: bougerGaucheDroite 2s ease-in-out infinite;
}

/* Images : zoom et pixel perfect */
.maingauche img {
  transform: scale(3); /* base */
  transform-origin: center center;
  image-rendering: pixelated;
  transition: transform 0.3s ease;
}

/* Zoom au survol */
.maingauche img:hover {
  transform: scale(3.4);
}


/* Loader style */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  flex-direction: column;
  gap: 20px;
}

#loader p {
  color: #fff;
  font-size: 1.5rem;
  font-family: sans-serif;
}

.spinner {
  width: 60px;
  height: 60px;
  border: 6px solid rgba(255, 255, 255, 0.2);
  border-top: 6px solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Pendant chargement, on cache le reste */
body.loading {
  overflow: hidden;
}

body.loading .maingauche {
  display: none;
}







.tableau {
  position: absolute;
  image-rendering: pixelated;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Aligne tout à gauche */
}


.tableau-1 {
  top: 30%;
  left: 40%;
  height: auto;
  transform: translateY(-50%); /* centre verticalement selon le top */
  z-index: 20;
}

.tableau-1 img {
  width: 70%;
  height: auto;
}

.tableau img {
  transition: transform 0.3s ease;
  transform-origin: center center; /* important pour zoomer au centre */
}

.tableau img:hover {
  transform: scale(1.2);
}

.tableau-2 {
  top: 30%;
  left: 60%; /* 👈 à droite du premier tableau */
  height: auto;
  transform: translateY(-50%);
  z-index: 30;
}
.tableau-2 img {
  width: 40%;
  height: auto;
}

#databending-img.zoom-plein {
  position: fixed;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%) scale(6); /* Zoom immersif */
  transition: transform 1.2s ease-in-out;
  z-index: 9999;
  pointer-events: none;
}


.cartel {
  display: inline-block;
  margin-top: 10px;
  text-align: center;
  position: relative;
    animation: cartelPulse 1.5s ease-in-out infinite;
  cursor: pointer;
   position: relative;
  z-index: 100; /* 🔼 très important */
transform: translateZ(0);  /* 💥 Crée un nouveau stacking context */
}

.cartel:hover {
  animation: none; /* Arrête la pulsation au hover pour éviter conflit */
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
  transform: scale(1.1);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.cartel-img {
  width: 100px; /* ✅ taille explicite plus maîtrisable */
  height: auto;
  transition: opacity 0.3s ease;
  display: block;
  margin: 0 auto;
}

/* Overlay qui s'affiche au hover */
.cartel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  opacity: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translate(-50%, -50%) scale(0.8);
  transition: all 0.4s ease-in-out;
  z-index: 10000; /* ⬅️ aussi ici */
  pointer-events: none;
  will-change: transform, opacity;
}

.cartel:hover::after {
  width: 450px;
  height: 300px;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
  z-index: 10000; /* ⬅️ Augmenté pour passer au-dessus de tout */
}

.cartel::after {
  background-image: var(--cartel-hover-img);
}

@keyframes cartelPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.9;
  }
}



.tableau-3 {
  top: 30%;
  left: 20%; /* ⬅️ à gauche du tableau-1 (qui est à 40%) */
  height: auto;
  transform: translateY(-50%);
  z-index: 10;
}

.tableau-3 img {
  width: 50%; /* 📏 plus large */
  height: auto;
}