body {
  background-color: #000;
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  height: 100vh;
}

.photo {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: auto;
  z-index: -1; /* Mettre l'image de fond à l'arrière-plan */
}

.text {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 2rem;
  text-align: center;
}

.custom-font {
  font-family: "Arial", sans-serif; /* Police de caractère pour le texte "ABCDEFG" */
}

.visible-text {
  position: absolute;
  top: -65%; /* Placer le texte dans le premier quart en haut */
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap; /* Empêcher le texte de passer à la ligne */
  
  font-family: "bad russian", serif; /* Nouvelle police de caractère pour .visible */
  font-size: 40px; /* Nouvelle taille de police pour .visible-text */
}

.top-text {
  margin: 0; /* Supprimer les marges par défaut */
  font-family: "bad russian", serif; /* Nouvelle police de caractère pour .top-text */
  font-size: 40px; /* Nouvelle taille de police pour .top-text */
  white-space: nowrap; /* Empêcher le texte de passer à la ligne */
}

.hidden-text {
  position: absolute;
  top: 0%;
  left: 0%;
  clip-path: polygon(0 0, 0 0, 0 0, 0 0); /* Texte caché avec clip-path */
  font-family: "Arial", sans-serif; /* Police de caractère pour le texte caché */
  font-size: 1rem; /* Taille de caractère pour le texte caché */
}

.text1 {
  margin: 0; /* Supprimer les marges par défaut */
  font-family: "Rockwell", serif; /* Police de caractère pour le premier bloc de texte */
  font-size: 20px; /* Nouvelle taille de police */
}

.home-btn {
  position: absolute;
  top: 10px; /* Ajuster en fonction de la distance par rapport au haut de la page */
  left: 10px; /* Positionner le bouton à 10px du bord droit de la page */
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
  padding: 0.5rem 1.5rem;
  border: 2px solid #fff;
  border-radius: 3px;
  z-index: 1; /* Mettre les boutons au premier plan */
}

.home-btn:hover {
  background-color: #fff;
  color: #000;
}

.btn {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  width: 50%;
  z-index: 1; /* Mettre les boutons au premier plan */
}

.btn a {
  text-decoration: none;
  color: #fff;
  font-size: 1.2rem;
  padding: 0.5rem 1.5rem;
  border: 2px solid #fff;
  border-radius: 3px;
}

.btn a:hover {
  background-color: #fff;
  color: #000;
}

.gallery {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}

.gallery-item {
  width: calc(33.33% - 20px);
  margin: 10px;
}

.gallery-item img {
  width: 100%;
  height: auto;
}

/* Media Query pour les écrans étroits */
@media screen and (max-width: 768px) {
  .gallery-item {
    width: calc(50% - 20px);
  }
}

/* Media Query pour les écrans très étroits, comme les téléphones */
@media screen and (max-width: 480px) {
  .gallery-item {
    width: 100%;
  }
}

/* Ajoutez cette règle CSS pour les écrans étroits */
@media screen and (max-width: 768px) {
  .btn {
    flex-direction: column; /* Les éléments s'empilent verticalement */
    align-items: center; /* Centre les éléments horizontalement */
    width: auto; /* Réinitialise la largeur */
    bottom: 1rem; /* Ajuste la position verticale */
  }

  .btn a {
    margin-bottom: 0.5rem; /* Ajoute un espacement entre les boutons empilés */
  }
}

/* Ajoutez cette règle CSS pour les écrans étroits */
@media screen and (max-width: 768px) {
  .text {
    text-align: center; /* Centre le texte sur les écrans étroits */
    top: 50%; /* Ajuste la position verticale */
    transform: translate(-50%, -50%);
  }

  .text p {
    display: inline; /* Affiche les paragraphes sur la même ligne */
    margin: 0 0.5rem; /* Ajoute un espacement entre les éléments */
  }
}

@media screen and (max-width: 768px) {
  .btn {
    flex-direction: column; /* Les éléments s'empilent verticalement */
    align-items: center; /* Centre les éléments horizontalement */
    width: auto; /* Réinitialise la largeur */
    bottom: 1rem; /* Ajuste la position verticale */
  }

  .btn a {
    margin-bottom: 0.5rem; /* Ajoute un espacement entre les boutons empilés */
  }
}