/* Style général */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: linear-gradient(40deg, #d1530a, #17171a, #29354d, #d1530a);
  background-size: 400% 400%;
  animation: gradientAnimation 10s ease infinite;
  height: 120vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 20px;
}

.content {
  text-align: center;
  color: #fff;
  width: 100%;
  max-width: 700px;
}

img {
  width: 100%; /* L'image prend 100% de la largeur du conteneur */
  height: auto; /* La hauteur s'ajuste automatiquement pour garder les proportions */
  max-width: 60%; /* Limiter la largeur de l'image à 60% du conteneur */
  margin-bottom: 80px; /* Un peu d'espace sous l'image */
}

.site-title {
  font-size: 4rem; /* Taille réduite */
  font-weight: 900;
  color: #fff;
  margin-bottom: 60px; /* Espacement plus grand entre le titre et le reste */
  letter-spacing: 30px; /* Espacement des lettres plus large */
}

.site-title br {
  display: block;
}

.thin {
  font-size: 3rem;
  font-weight: 100; /* Thin weight pour PRODUCTIONS */
}

.construction-message {
  letter-spacing: 4px;
  font-weight: 100;
  font-size: 0.7rem;
  color: #ED7F10;
  margin-bottom: 10px; /* Espacement plus grand entre le message et le contact */
}

.contact-link {
  letter-spacing: 4px;
  font-weight: 100;
  font-size: 0.7rem;
  color: #ED7F10; /* Texte orange pour l'email */
  text-decoration: none;
  transition: color 0.3s ease;
  transition: color 0.3s ease, background-color 0.3s ease; /* Transition pour la couleur et le fond */
  padding: 5px 10px; /* Un peu de padding pour rendre l'effet visible */
  border-radius: 5px; /* Arrondir les bords du fond */
}

.contact-link:hover {
  color: #00ff1a; /* Changer de couleur lors du survol */
}


.contact-link:hover {
  color: #fff; /* Changer la couleur du texte en blanc */
  background-color: #ED7F10; /* Fond orange sur le survol */
}




/* Dégradé animé */
@keyframes gradientAnimation {
  0% {
    background-position: 0% 30%;
  }
  30% {
    background-position: 100% 30%;
  }
  100% {
    background-position: 0% 30%;
  }
}

/* Styles Responsives pour mobile */
@media (max-width: 600px) {

img {
    max-width: 60%; /* L'image occupe 80% de la largeur sur mobile */
  }


  .site-title {
    width: 100px; /* Réduire la taille du titre sur mobile */
  }

  .thin {
  font-size: 1.5rem;
  font-weight: 100; /* Thin weight pour PRODUCTIONS */
  }

  .construction-message {
    font-size: 0.6rem;
  }

  .contact-link {
    font-size: 0.6rem;
  }
}