/* 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/accueilBase.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;
}

body.hover-droite {
  background-image: url('assets/accueilDroite.png'); /* Nouvelle image de fond */
}

body.hover-gauche {
  background-image: url('assets/accueilGauche.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;
}

.maindroite {
  position: absolute;
  right: 0;
  top: 50%;
  padding-right: 200px;
  animation: bougerDroiteGauche 2s ease-in-out infinite;
}


.travaux {
  position: absolute;
  right: 0;
  top: 10%;
  z-index: 10000;
  pointer-events: none;
  transform: translateY(-50%) scale(0.5); /* fusion ici */
  transform-origin: center center;
  margin-right: -10%; /* ajuste si nécessaire */
}


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

/* Zoom au survol */
.maindroite img:hover,
.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,
body.loading .maindroite {
  display: none;
}