/* Styles généraux */
@font-face {
  font-family: "Executive-55Regular";
  src: url("Executive-55Regular.otf");
}

@font-face {
  font-family: "Executive-56Italic";
  font-style: italic;
  src: url("Executive-56Italic.otf");
}

@font-face {
  font-family: "Executive-65Medium";
  src: url("Executive-65Medium.otf");
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow-x: hidden; /* Empêche les barres de défilement horizontales */
}

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 3fr 0.5fr; /* Ajustez la hauteur de la dernière ligne */
  grid-column-gap: 15px;
  grid-row-gap: 0px;
  height: 100%;
  min-height: 80vh; /* Ajustez cette valeur selon vos besoins */
  margin: 2%;
  flex-wrap: wrap; /* Permettre le passage à la ligne des éléments flexbox si nécessaire */
}

.left-text {
  flex: 1;
}

.right-text {
  flex: 1;
  text-align: right;
}

.center-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

.gallery {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Effet de zoom arrière sur les images */
.image-container {
  display: inline-block;
  text-align: center;
  overflow: hidden; /* Masque toute partie de l'image qui dépasse du conteneur */
}

.image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* S'assure que l'image est contenue dans son conteneur */
  cursor: pointer;
  display: block; /* Pour éviter les marges automatiques des images */
  transition: transform 0.3s ease-in-out; /* Transition pour le zoom arrière */
}

.image:hover {
  transform: scale(0.98); /* Réduit l'image à 98% de sa taille originale */
}

.caption {
  margin-top: 10px;
  font-family: "Executive-55Regular", sans-serif;
  color: #00050F;
  font-size: 1vw;
  text-align: center; /* Centrer le texte de la légende */
  width: 100%; /* Assure que la légende prend toute la largeur de l'image */
}

.div1 {
  grid-area: 1 / 1 / 2 / 4;
  display: flex;
  justify-content: space-between;
  height: 10%;
}

.div2 {
  grid-area: 2 / 1 / 3 / 2;
  overflow: auto; /* Assurez-vous que le contenu débordant soit visible */
}

.div3 {
  grid-area: 2 / 2 / 3 / 3;
  overflow: auto;
  margin-top: 2%;
}

.div4 {
  grid-area: 2 / 3 / 3 / 4;
  overflow: auto;
}

.div5 {
  grid-area: 3 / 1 / 4 / 2;
  overflow: auto;
  width: 48%; /* Ajustez la largeur si nécessaire */
  display: inline-block;
  vertical-align: top;
}

.div6 {
  grid-area: 3 / 2 / 4 / 3;
  overflow: auto;
}

.div7 {
  grid-area: 3 / 3 / 4 / 4;
  overflow: auto;
  width: 48%; /* Ajustez la largeur si nécessaire */
  display: inline-block;
  vertical-align: top;
  text-align: right;
}

h1 {
  font-family: "Executive-65Medium", sans-serif;
  color: #00050F;
  text-decoration: none;
  font-size: 3vw;
}

h2 {
  font-family: "Executive-65Medium", sans-serif;
  color: #00050F;
  text-decoration: none;
  font-size: 1.5vw;
}

h3 {
  font-family: "Executive-55Regular", sans-serif;
  color: #00050F;
  font-size: 1.3vw;
}

p {
  font-family: "Executive-55Regular", sans-serif;
  color: #00050F;
  font-size: 1.1vw;
}

h4 {
  font-family: "Executive-55Regular", sans-serif;
  color: #00050F;
  font-size: 1vw;
}

a {
  color: #66696F;
  text-decoration: none;
}

p a:hover {
  color: #000000;
  text-decoration: underline;
}

/* Media Queries for Responsive Design */

/* For tablets and mobile devices */
@media (max-width: 768px) {
  body, html {
    overflow-y: auto; /* Permettre le défilement vertical sur les appareils mobiles */
  }

  .parent {
    display: flex;
    flex-direction: column;
    margin: 5%;
    height: auto;
  }

  .div1, .div2, .div3, .div4, .div5, .div6, .div7 {
    width: 100%;
    margin-bottom: 15px;
  }

  .div1 {
    height: auto;
    align-items: center;
    flex-direction: column;
  }

  .center-text {
    position: static;
    transform: none;
  }

  .left-text, .right-text {
    text-align: center;
  }

  h1, h2, h3, p, h4 {
    font-size: larger; /* Adjust font sizes for better readability on smaller screens */
  }

  .gallery {
    margin-top: 20px;
  }

  .caption {
    font-size: 1em;
  }

  .div2 {
    order: 1;
  }

  .div3 {
    order: 2;
  }

  .div6 {
    order: 3;
  }

  .div4 {
    order: 4;
  }

  .div5, .div7 {
    width: 48%;
    display: inline-block;
    vertical-align: top;
  }

  .div5 {
    order: 5;
  }

  .div7 {
    order: 6;
    text-align: right;
  }
}

/* For mobile devices */
@media (max-width: 480px) {
  .parent {
    margin: 10%;
  }

  h1 {
    font-size: 6vw;
  }

  h2 {
    font-size: 4vw;
  }

  h3 {
    font-size: 3vw;
  }

  p {
    font-size: 2.5vw;
  }

  h4 {
    font-size: 2vw;
  }

  .div2 {
    order: 1;
  }

  .div3 {
    order: 2;
  }

  .div6 {
    order: 3;
  }

  .div4 {
    order: 4;
  }

  .div5, .div7 {
    width: 100%;
    display: inline-block;
    vertical-align: top;
  }

  .div5 {
    order: 5;
  }

  .div7 {
    order: 6;
    text-align: right;
  }
}