body {
  font-family: "Comfortaa", sans-serif;
  text-align: center;
  background-color: #cce8f7;
  color: #000000;
  position: relative;
  margin-bottom: 17%; /*Fais monter les photos plus hautes*/
}

header {
  width: 100%;
  display: flex;
  position: fixed;
  justify-content: center;
  align-items: center;
}

/*h1 {
  font-size: 9px;
}

/*Dans la zone Info, mets la balise h2 & h3 sur la même ligne, concernant les étoiles*/
h2,
h3 {
  display: inline;
  margin-right: 10px; /* Espace entre les deux titres, ajustez selon vos besoins */
}

/* Réglage du Logo en Haut de Page */
.container-logo {
  display: flex;
  position: fixed;
  justify-content: center;
  /*margin-top: 10px;*/
}

.container-logo img {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  /*z-index: 1000;*/
  margin-top: 10%;
  max-width: 85%;
}

/* Réglage de la Montgolfière */
.Montgolfière1 {
  position: fixed;
  max-width: 8%;
  transform: rotate(10deg);
  top: 60%;
  left: 74%;
  z-index: -1;
}

/* Dicton écrit en Blanc avec une légère diagonale*/
.dicton-diag {
  position: fixed;
  /*transform: translateY(-50%);*/
  text-align: center;
  z-index: 1;
  max-width: 100%;
  left: 2%;
  top: 55%;
}

.line {
  white-space: nowrap; /* Force le texte à rester sur une seule ligne */
  transform: rotate(-10deg);
  margin: 5px 0; /* Espacement entre les lignes */
  color: #ffffff;
  font-weight: bold;
  font-family: "Indie Flower", sans-serif;
  font-size: 13px;
}

.left {
  text-align: left; /* Aligner le texte à gauche */
}

.right {
  text-align: right; /* Aligner le texte à droite */
}

/* Réglage de la photo Lac Annecy en Bas de Page */
.image-lac {
  position: fixed;
  transform: translateX(-50%);
  z-index: 2; /* Valeur de z-index pour image-lac */
  max-width: 100%;
  bottom: -4%;
  left: 50%;
}

/* Réglage de la photo Lac Annecy avec les Alpes en Bas de Page */
.image-lac-montagne {
  position: fixed;
  transform: translateX(-50%);
  z-index: 1; /* Valeur de z-index pour .fixed-image2 */
  max-width: 100%;
  bottom: -3%;
  left: 50%;
}

/* Container pour les Photos de Pâtisserie */
.container {
  position: relative;
  margin-top: 15%;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  z-index: 1;
  top: 300px; /*afficher les photos +/- en haut ou bas de l'écran*/
  margin-bottom: 700px; /*Pouvoir monter les photos plus en haut de l'écran*/
}

/* Réglage des Photos de Pâtisserie */
.photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  position: relative;
  transform: translateY(-20px);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
  z-index: 1;
  max-width: 80%; /*A VERIFIER*/
  margin: 30px; /*Espacement entre les photos*/
  transform: translateZ(0); /*fluidité des transitions*/
}

/* Image */
.photo img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.5s ease-in-out;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px 0;
}

/* Élargissement de la photo à la mouseover */
.photo:hover {
  transform: scale(1.1);
}

.photo a:hover img {
  transform: scale(1.1);
}

/* Infos sur chaque Photo de Pâtisserie */
.photo-info {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  display: none;
  border-radius: 20px;
  font-size: 6.5px; /* Ajustez la taille de la police selon vos besoins */
  /*font-size: 7.3px;*/ /*A l'origine*/
  height: 80%; /*Taille du conteneur infos des images*/
}

/* Affichage des infos sur la photo à la mouseover */
.photo:hover .photo-info {
  display: block;
  top: 50%;
  transform: translateY(-50%);
}

/* Changement photo curseur */
.photo .hover-image {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  transform: scale(1.1);
  transform: translateZ(0); /*fluidité des transitions*/
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3); /* Ajoute une ombre au survol */
}

.photo:hover .hover-image {
  opacity: 1;
}

/* Masquer la deuxième image lorsque le curseur n'est pas sur la photo */
.photo:not(:hover) .hover-image {
  opacity: 0;
}