.presentation{
  width: var(--width-content);
  justify-content: center;
}

.presentation article {
  display: flex;
  justify-content: left;
  align-items: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 2dvh 6dvh;
}

.presentation section{
  width: auto;
  margin-right: 0;
}

header h2{
  margin-bottom: clamp(20px, 10dvh, 100px) !important;
}

.imagesLavedan {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 1dvh 0 3.5dvh 0;
  position: relative;
}

.france {
  width: clamp(40px, 6vw, 60px);
}

.vallees {
  width: 100%;
  height: clamp(500px, 80dvh, 1200px);
}

/* Style pour le conteneur de la carte */
.map-container {
  display: block;
  position: relative;
  font-size: 0; /* Élimine l'espace blanc potentiel sous l'image */
  line-height: 0;
  margin: 0;
  padding: 0;
}

/* Style pour la carte cliquable */
.lavedan {
  width: clamp(200px, 50vw, 500px);
  cursor: pointer;
  display: block;
  margin: 0;
  padding: 0;
}

/* Suppression complète de l'effet hover */
/* .lavedan:hover {
  transform: scale(1.02);
} */

/* Carte agrandie avec scale(1.4) */
.lavedan.zoomed {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.4);
  z-index: 100;
  max-width: 90vw;
  max-height: 90vh;
}

/* Le fond sombre quand on agrandit l'image */
.overlay-background {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 99;
  cursor: zoom-out;
}

.overlay-background.active {
  display: block;
}

/* Style pour les noms en gascon */
.faq__question i {
  font-size: 0.8em;
  margin-left: 15px;
  opacity: 0.85;
}

/* Amélioration des styles pour les noms en gascon dans la liste des vallées */
.faq__text b {
  font-size: 1em;
}

.faq__text i {
  font-size: 0.85em;
  opacity: 0.85;
  margin-left: 8px;
}

@media (max-width: 1050px) {

  .presentation h3 {
    width: var(--width-content);
  }

  .presentation article{
    gap: 0 6dvh;
  }

  .lavedan {
    width: clamp(200px, 85vw, 400px);
  }

  .faq{
    padding : clamp(50px, 8vw, 100px) clamp(20px, 4vw, 50px);
  }

  .faq__text {
    margin-top: 5dvh;
  }

  .faq__heading {
    margin-bottom: 4dvh;
  }

  .faq__question {
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  details[open] .faq__question {
    white-space: wrap;
    overflow: visible;
    text-overflow: clip;
  }
}

@media (max-width: 500px) {
  .imagesLavedan {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
}