/* ---------- Section 1-HEADER ---------- */
.hero-section-munz {
  position: relative;
  top: 0;
  width: 100vw; /* Utilisation de la largeur totale de l'écran */
  height: 45vw; /* Hauteur par défaut */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-section-munz picture,
.headerImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* L'image occupe 100% de la largeur */
  height: 100%; /* L'image occupe 100% de la hauteur */
  object-fit: cover; /* Assure que l'image couvre toute la zone sans déformation */
}

.hero-content-munz {
  display: flex; /* Utilisation de flexbox pour aligner les éléments horizontalement */
  align-items: center; /* Centre verticalement les éléments */
  justify-content: flex-start; /* Aligne les éléments à gauche */
  z-index: 10; /* S'assurer que le contenu est au-dessus de l'image */
  max-width: 90%; /* Limite la largeur totale pour éviter que le texte et le logo soient trop larges */
  padding-left: 20px; /* Espacement à gauche pour éviter que le contenu touche le bord */
  margin-bottom: 150px;
}

.hero-logo-munz {
  margin-right: 20px; /* Espace entre le logo et le texte */
  top: 50%;
}

.hero-logo-munz img {
  max-width: 200px; /* Limite la taille du logo */
  height: auto; /* Conserve les proportions du logo */
}

.hero-text-munz {
  color: var(--pink2-color); /* Couleur du texte */
  width: auto;   /* Le conteneur s'ajustera à la largeur du texte */
  max-width: 100%; 
  display: flex;  /* Permet au texte de s'ajuster à son contenu */
  flex-direction: column; /* Garde les lignes de texte empilées */
  justify-content: center;
  align-items: center;
  
}
.hero-text-munz h1 {
  font-family: var(--font-primary);
  font-size: 4.5rem;
  margin: 0;
}

.hero-text-munz h3 {
  font-family: var(--font-primary);
  font-size: 2rem;
}
/* Style pour l'animation de l'apparition du titre */
.anim-munz {
  opacity: 0; /* Commence invisible */
  transform: translateY(100px); /* Commence en bas de 50px */
  animation: slideUp 2s ease-out 1s forwards; /* Applique l'animation */
}

/* Définir l'animation "slideUp" */
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(100px); /* Commence à 50px en bas */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* Arrive à sa position d'origine */
  }
}
/* ✅ Breakpoint TABLETTE (768px - 1023px) */
@media (max-width: 1023px) {
  .hero-text-munz h1 {
    font-size: 3.5rem;
  }
}

/* ✅ Breakpoint MOBILE (≤ 767px) */
@media (max-width: 767px) {
  .hero-content-munz {
    display: flex; /* Utilisation de flexbox pour aligner les éléments horizontalement */
    align-items: center; /* Centre verticalement les éléments */
    justify-content: center; /* Aligne les éléments à gauche */
    padding-left: 0px; /* Espacement à gauche pour éviter que le contenu touche le bord */
    margin-bottom: 100px;
  }
  .hero-section-munz {
    height: 39vh; /* Hauteur plus petite sur les petits écrans */
  }
  .hero-logo-munz img {
    max-width: 160px; /* Limite la taille du logo */
  }
}
@media (max-width: 570px) {
.hero-text-munz {
  color: var(--pink2-color); /* Couleur du texte */
  width: auto;   /* Le conteneur s'ajustera à la largeur du texte */
  max-width: 40%; 
  display: flex;  /* Permet au texte de s'ajuster à son contenu */
  flex-direction: column; /* Garde les lignes de texte empilées */
  justify-content: center;
  align-items: center;
  
}
}
/* ✅ Autres breakpoints */
@media (max-width: 545px) {
  .hero-content-munz {
    margin-bottom: 0px;
  }
  .hero-section-munz {
    height: 28vh;
  }
  .hero-text-munz h1 {
    font-size: 2.4rem;
  }
  .hero-text-munz h3 {
    font-size: 1.15rem;
  }
  .hero-text-munz a {
    font-size: 0.8rem;
  }
}

@media (max-width: 390px) {
  .hero-logo-munz img {
    max-width: 100px; /* Limite la taille du logo */
  }
  
  .hero-text-munz h1 {
    font-size: 2.2rem;
  }
  .hero-text-munz h3 {
    font-size: 1.15rem;
  }
  .hero-text-munz a {
    font-size: 0.8rem;
  }
}

@media (max-width: 320px) {
  .hero-text-munz h1 {
    font-size: 2rem;
  }
}
/* ---------- Section 2-PRESENTATION ---------- */
.section-munz {
  padding: 7vw 10vw 15vw 10vw; /* Utilisation de vw pour l'adaptabilité */
  background-color: var(--pink2-color);
}
.margin-color-munz {
  background-color: var(--pink2-color); /* Couleur de fond pour la marge */
  height: 10vh; /* Taille de l'espace de margin */
  width: 100%; /* S'étend sur toute la largeur */
}
.custom-section-munz {
  position: relative;
  width: 100%;

  max-height: 500px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.text-container-munz {
  position: absolute;
  left: 0%;
  bottom: -50%; /* Décalage vers le bas */
  width: min(60%, 800px); /* Adapte la largeur automatiquement */
  max-width: 50%;
  height: 525px;
  background-color: rgba(255, 188, 179, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.text-container-munz h2,
.text-container-munz p {
  width: min(60%, 800px); /* Adapte la largeur automatiquement */
  text-align: left;
}
.text-container-munz h2 {
  font-size: clamp(1.1rem, 2vw, 1.875rem);
  margin-bottom: 10px;
}

.text-container-munz p {
  line-height: 1.5;
  font-family: var(--font-secondary);
  font-size: clamp(0.8rem, 2vw, 1.25rem);
}

.image-container-munz {
  width: 1000px;
  height: 362px;
}

.image-container-munz img {
  width: 100%;
  height: auto;
  object-fit: cover;
  margin-left: 5%;
}

/* Quand l'écran devient plus petit, le texte passe sous l’image */
@media screen and (max-width: 768px) {
  .text-container-munz {
    width: min(100%, 800px); /* Adapte la largeur automatiquement */
    max-width: 100%;
    height: 200px;
    bottom: -30%; /* Décalage vers le bas */
  }
  .text-container-munz p {
    width: 80%;
  }
  .section-munz {
    padding: 7vw 7vw 15vw 7vw; /* Utilisation de vw pour l'adaptabilité */
    margin-bottom: 0vh; /* Adaptation dynamique */
  }
  .margin-color-munz {
    background-color: var(--pink2-color); /* Couleur de fond pour la marge */
    height: 5vh; /* Taille de l'espace de margin */
    width: 100%; /* S'étend sur toute la largeur */
  }
}
@media screen and (max-width: 590px) {
  .text-container-munz {
    width: min(100%, 800px); /* Adapte la largeur automatiquement */
    max-width: 100%;
    height: 200px;
    bottom: -20%; /* Décalage vers le bas */
  }
  .section-munz {
    padding: 7vw 5vw 15vw 5vw; /* Utilisation de vw pour l'adaptabilité */
   
}
}
@media screen and (max-width: 460px) {
  .text-container-munz {
    width: 100%;

    height: 60%;
    bottom: -10%; /* Décalage vers le bas */
  }
  .text-container-munz h2,
  .text-container-munz p {
    width: min(90%, 800px); /* Adapte la largeur automatiquement */
    text-align: left;
  }
  .image-container-munz img {
    margin-left: 0%;
  }
  .section-munz {
    padding: 7vw 5vw 7vw 5vw; /* Utilisation de vw pour l'adaptabilité */
   
  }
}
@media screen and (max-width: 377px) {
  .text-container-munz {
    width: 100%;
    height: 70%;
    bottom: -5%; /* Décalage vers le bas */
  }
}
/* ---------- Section 3-SEPARATION ---------- */

.second-hero-section-munz-separation {
  background-image: url("/img/munz/salleVilleneuve.webp");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
}
@media screen and (max-width: 576px) {
  .second-hero-section-munz-separation {
    background-image: url("/img/munz/salleVilleneuve.webp");
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    height: 40vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
  }
}
/* ---------- Section 2-PRESENTATION REVERSE---------- */
.section-munz-reverse {
  padding: 7vw 20vw 15vw 10vw;

  background-color: var(--pink2-color);
}
.margin-color-munz-reverse {
  background-color: var(--pink2-color); /* Couleur de fond pour la marge */
  height: 10vh; /* Taille de l'espace de margin */
  width: 100%; /* S'étend sur toute la largeur */
}
/* Conteneur principal */
.custom-section-munz-reverse {
  position: relative;
  width: 100%;
  max-height: 500px;
  display: flex;
  justify-content: flex-start; /* Image à gauche */
  align-items: center;
}

/* Image à gauche */
.image-container-munz-reverse {
  width: 1000px;
  height: 362px;
}

.image-container-munz-reverse img {
  width: 100%;
  height: auto;
  object-fit: cover;
  margin-right: 5%; /* Décale l’image vers la gauche */
}

/* Texte à droite */
.text-container-munz-reverse {
  position: absolute;
  right: -20%; /* Place le texte à droite */
  bottom: -25%;
  width: min(60%, 800px);
  max-width: 50%;
  height: 435px;
  background-color: rgba(255, 188, 179, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Taille du texte */
.text-container-munz-reverse h2,
.text-container-munz-reverse p {
  width: min(70%, 800px);
  text-align: left;
}

.text-container-munz h2 {
  font-size: clamp(1.1rem, 2vw, 1.875rem);
  margin-bottom: 10px;
}

.text-container-munz-reverse p {
 
  line-height: 1.5;
  font-family: var(--font-secondary);
  font-size: clamp(0.8rem, 2vw, 1.25rem);
}

/* ---------------- RESPONSIVE ---------------- */
@media screen and (max-width: 1187px) {
  .text-container-munz-reverse p {
    width: 80%;
  }

}
/* Quand l'écran devient plus petit, le texte passe sous l’image */
@media screen and (max-width: 768px) {
  .text-container-munz-reverse {
    width: 100%;
    max-width: 100%;
    height: 200px;
    bottom: -40%; /* Décalage vers le bas */
    right: 0%; /* Place le texte à droite */
  }
  .text-container-munz-reverse h2,
  .text-container-munz-reverse p {
    width: 90%;
    text-align: left;
  }
  .section-munz-reverse {
    padding: 7vw 7vw 15vw 7vw; /* Utilisation de vw pour l'adaptabilité */
  
  }
  .margin-color-munz-reverse {
   
    height: 5vh; /* Taille de l'espace de margin */
   
  }
}
@media screen and (max-width: 590px) {
  .text-container-munz-reverse {
    width: min(100%, 800px); /* Adapte la largeur automatiquement */
    max-width: 100%;
    height: 200px;
    bottom: -20%; /* Décalage vers le bas */
  }
  .section-munz-reverse {
    padding: 7vw 5vw 15vw 5vw; /* Utilisation de vw pour l'adaptabilité */
   
  }
}
@media screen and (max-width: 460px) {
  .text-container-munz-reverse {
    width: 100%;
    height: 60%;
    bottom: -10%; /* Décalage vers le bas */
  }
  .text-container-munz-reverse h2,
  .text-container-munz-reverse p {
    width: 90%;
    text-align: left;
  }

  .image-container-munz-reverse img {
    margin-left: 0%;
  }
  .section-munz-reverse {
    padding: 15vw 5vw 7vw 5vw; /* Utilisation de vw pour l'adaptabilité */
  
  }
}
@media screen and (max-width: 377px) {
  .image-container-munz-reverse {
  
    height: 302px;
  }
  .text-container-munz-reverse {
    background-color: var(--pink-color);
    width: 100%;
    height: auto;
    padding: 30px 0px;
    bottom: -20%; /* Décalage vers le bas */
  }
  .text-container-munz-reverse h2 {
    font-size: 1.2rem;
  }
  
}

/* ---------- Section 5-CONCLUSION ---------- */
.section-munz-conclusion {
  background-color: #f5f5f5; /* Fond de la section */
  padding: 15vw 5vw 12vw 10vw; /* Utilisation de vw pour l'adaptabilité */
  margin-bottom: 10vh; /* Adaptation dynamique */
}
.custom-section-overlay-munz-conclusion {
  position: relative;
  width: 90%;
  max-height: 785px; /* Hauteur du rectangle */
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.image-container-munz-conclusion {
  width: 1000px;
  height: auto;
  position: relative;
  z-index: 1; /* S'assurer que l'image passe au-dessus du rectangle */
}

.image-container-munz-conclusion img {
  width: 100%;
  height: auto;
  object-fit: cover;
  margin-left: 20%;
}

.text-box-munz-conclusion {
  position: absolute;
  left: 0%; /* Recouvre légèrement l'image */
  width: min(80%, 800px);
  max-width: 50%;
  height: 140%;
  background-color: var(--pink-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 2; /* Passe sous l'image */
}

.text-box-munz-conclusion h2,
.text-box-munz-conclusion p {
  width: min(80%, 800px);
  text-align: left;
  color: var(--dark);
}

.text-box-munz-conclusion h2 {
  font-size: clamp(1.1rem, 2vw, 1.875rem);
}

.text-box-munz-conclusion p {
  line-height: clamp(1.2rem, 1.6vw, 2rem);
  font-size: clamp(0.8rem, 2vw, 1.25rem);
}

/* Quand l'écran devient plus petit, le texte passe sous l’image */
@media screen and (max-width: 768px) {
  .text-box-munz-conclusion {
    width: min(100%, 800px); /* Adapte la largeur automatiquement */
    max-width: 100%;
    height: 350px;
    bottom: -300px; /* Décalage vers le bas */
  }
  .section-munz-conclusion {
    background-color: #f5f5f5; /* Fond de la section */
    padding: 7vw 7vw 15vw 7vw; /* Utilisation de vw pour l'adaptabilité */
    margin-bottom: 30vh; /* Adaptation dynamique */
  }
}
@media screen and (max-width: 590px) {
  .text-box-munz-conclusion {
    width: min(100%, 800px); /* Adapte la largeur automatiquement */
    max-width: 100%;
    height: 360px;
    bottom: -330px; /* Décalage vers le bas */
  }
  .section-munz-conclusion {
    background-color: #f5f5f5; /* Fond de la section */
    padding: 7vw 5vw 15vw 5vw; /* Utilisation de vw pour l'adaptabilité */
    margin-bottom: 30vh; /* Adaptation dynamique */
  }
}
@media screen and (max-width: 460px) {
  .text-box-munz-conclusion {
    width: 100%;

    height: 60%;
    bottom: -10%; /* Décalage vers le bas */
  }
  .text-box-munz-conclusionh2,
  .text-box-munz-conclusion p {
    width: min(90%, 800px); /* Adapte la largeur automatiquement */
    text-align: left;
  }
  .image-container-munz-conclusion img {
    margin-left: 0%;
  }
  .section-munz-conclusion {
    background-color: #f5f5f5; /* Fond de la section */
    padding: 7vw 5vw 7vw 5vw; /* Utilisation de vw pour l'adaptabilité */
    margin-bottom: 10vh; /* Adaptation dynamique */
  }
}
@media screen and (max-width: 377px) {
  .text-box-munz-conclusion {
    width: 100%;
    height: 60%;
    bottom: -5%; /* Décalage vers le bas */
  }
}