header {
  top: 0;
  width: 100%;
  z-index: 99;
  position: sticky;
  transition: background-color 0.3s ease;
}

main {
  position: relative;
  width: 100%;
  top: 0;
}

#current-year {
  font-weight: 400 !important;
  font-size: 0.8rem;
}

/* Container flex des tabs */
.custom-nav-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #e5e7eb;
  background-color: transparent;
}

.tab-btn {
  background: none;
  border: none;
  font-size: 1rem;
  font-weight: 500;
  color: #444;
  position: relative;
  padding: 0.5rem 0;
  transition: color 0.3s;
  padding-left: 20px;
  padding-right: 20px;
}

.tab-btn img {
  width: 24px;
  height: 24px;
  margin-right: 0.5rem;
  vertical-align: middle;
  filter: grayscale(1) opacity(0.7);
  transition: filter 0.3s;
}

.tab-btn::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 0%;
  height: 3px;
  background: transparent;
  transition: width 0.3s, background 0.3s;
}

.tab-btn:hover img,
.tab-btn.active img {
  filter: none;
}

/* Tab 1: voyage - vert turquoise */
#project-tab.tab-btn:hover,
#project-tab.tab-btn.active {
  color: var(--vertturquoise);
}
#project-tab.tab-btn:hover::after,
#project-tab.tab-btn.active::after {
  width: 100%;
  background: var(--vertturquoise);
}

/* Tab 2: vol - orange */
#flight-tab.tab-btn:hover,
#flight-tab.tab-btn.active {
  color: var(--orangeocre);
}
#flight-tab.tab-btn:hover::after,
#flight-tab.tab-btn.active::after {
  width: 100%;
  background: var(--orangeocre);
}

@media (max-width: 600px) {
  .custom-nav-tabs {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
}

/******************************NOTIFICATION DEVIS*********************************/
.notification-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  /* Espacement par rapport au texte ou icône utilisateur */
  font-size: 1.2rem;
  color: #555 !important;
  /* Couleur de l'icône */
  text-decoration: none !important;
  transition: color 0.3s ease;
  right: -150px;
  top: 10px;
  vertical-align: -0.125em !important;
}

.notification-bell:hover {
  animation: vibrate 0.3s ease-in-out infinite;
  color: #000;
  /* Couleur au survol */
}

/* Animation de vibration */
@keyframes vibrate {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-2px);
  }

  50% {
    transform: translateX(2px);
  }

  75% {
    transform: translateX(-2px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes popIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  80% {
    transform: scale(1.2);
    opacity: 1;
  }

  100% {
    transform: scale(1);
  }
}

.notification-count {
  position: absolute;
  top: -5px;
  right: -10px;
  background-color: #dc3545;
  color: white;
  font-size: 0.8rem;
  font-weight: bold;
  border-radius: 50%;
  padding: 2px 6px;
  text-align: center;
  min-width: 20px;
  min-height: 20px;
  line-height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-primary);
  /* Applique l'animation */
  animation: popIn 0.3s ease-out;
}

.notification-count-list {
  position: absolute;
  background-color: #dc3545;
  color: white;
  font-size: 0.8rem;
  font-weight: bold;
  border-radius: 50%;
  padding: 2px 6px;
  text-align: center;
  min-width: 20px;
  min-height: 20px;
  line-height: 16px;
  font-family: var(--font-primary);
  margin-left: 10px;
  /* Applique l'animation */
  animation: popIn 0.3s ease-out;
}

/******************************** HEADER CSS *******************************/
.bg_heroes {
  position: absolute;
  width: 100%;
  height: 550px;
  z-index: 90;
  top: 100px;
}

#carouselExampleSlidesOnly .carousel-item {
  /* height: 900px; */
  height: 73dvh;
  /* Hauteur fixe pour le conteneur des items */
  overflow: hidden;
  /* Cache les débordements dus à l'effet parallaxe */
  position: relative;
}

.parallax-item {
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}

.carousel-item .filtre_photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(2, 64, 83, 0.6), rgba(2, 64, 83, 0.6));
  pointer-events: none;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* padding: 3rem 2rem 2rem; */
  width: 100%;
  position: relative;
}

.hero img {
  width: 84px;
  margin-bottom: 30px;
}

.bg_heroes_ideesVoyages {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/idvoyage_header.png);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg_heroes_pax_famille {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/Famille_header.jpg);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg_heroes_pax_groupe {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/Groupe_header.jpg);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg_heroes_pax_amoureux {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/Amoureux_header.jpg);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg_heroes_pax_solo {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/Solo_header.jpg);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg_heroes_theme_listing_partage {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/partage_header.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg_heroes_theme_listing_immersion {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/immersion_header.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg_heroes_theme_listing_trekking {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/randonnees_header.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg_heroes_theme_listing_farniente {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/farniente_header.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg_heroes_theme_listing_ecotourisme {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/CS02_header.jpg);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg_heroes_theme_listing_culture {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/culture_header.jpg);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg_heroes_regions_listing {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/header_nord.jpg);
  background-size: 50px;
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg_heroes_regions_listing_sud {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/header_sud.jpg);
  background-size: 50px;
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg_heroes_regions_listing_est {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/header_est.jpg);
  background-size: 50px;
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg_heroes_regions_listing_ouest {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/header_ouest.jpg);
  background-size: 50px;
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg_heroes_produit_rn7 {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/header_produit_rn7.png);
  background-size: 50px;
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg_heroes_solidaire {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/solidaire.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.bg_heroes_produit_TresorGrandSud {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/MDG04_header.jpg);
  background-size: 50px;
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg_heroes_MDG01_MoramoraRN7 {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/MDG01_header.jpg);
  background-size: 50px;
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg_heroes_MDG02_GrandTsingy {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/MDG02_header.jpg);
  background-size: 50px;
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg_heroes_MDG03_TriangleNord {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/MDG03_header.jpg);
  background-size: 50px;
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg_heroes_MDG04_GrandEst {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/MDG04_header.jpg);
  background-size: 50px;
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Header Circuits Standard */
.bg_heroes_CS01 {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/CS01_header.jpg);
  background-size: 50px;
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg_heroes_CS02 {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/CS02_header.jpg);
  background-size: 50px;
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Header Mini Séjours */
.bg_heroes_MS03_Est {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/MS03_Est_header.jpg);
  background-size: 50px;
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg_heroes_MS02_Sud {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/MS02_Sud_header.jpg);
  background-size: 50px;
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg_heroes_MS01_Nord {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/MS01_Nord_header.jpg);
  background-size: 50px;
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg_heroes_MS04_Ouest {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/MS04_Ouest_header.jpg);
  background-size: 50px;
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Header Trekking Randonnées*/
.bg_heroes_TK01_Hard {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/TK01_Hard_header.jpg);
  background-size: 50px;
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg_heroes_TK02_Soft {
  position: relative;
  width: 100%;
  height: 550px;
  background-image: linear-gradient(rgba(2, 64, 83, 0.5), rgba(2, 64, 83, 0.5)),
    url(../img/header/TK02_Soft_header.jpg);
  background-size: 50px;
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero_pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12rem 2rem 2rem;
  width: 100%;
}

.hero_pages_solidaires {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12rem 2rem 2rem;
  width: 100%;
}

.hero_pages-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem 2rem;
  width: 100%;
}

.hero_pages-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem 2rem;
  width: 100%;
  position: relative;
  top: 200px;
}

.hero_pages-hotel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 12rem 2rem 2rem;
  width: 100%;
}

.hero_pages-product {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12rem 2rem 2rem;
  width: 100%;
}

.heading_h1_hotel {
  text-align: center;
  font-size: 3rem;
  font-family: var(--font-tertiary);
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 3.5rem;
  color: var(--blanctexte);
}

.heading_h1 {
  text-align: center;
  font-size: 3.5rem;
  font-family: var(--font-tertiary);
  font-weight: 700;
  line-height: 4.5rem;
  color: var(--blanctexte);
}

.sub_title {
  font-size: 1rem;
  font-family: var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 0.3rem;
  font-weight: 400;
  color: var(--blanctexte);
  width: 100%;
  text-align: center;
  text-indent: 0!important;
}

.itinary_voyages {
  font-size: 1rem;
  font-family: var(--font-primary);
  text-transform: uppercase !important;
  font-weight: 400;
  color: var(--blanctexte);
  width: 100%;
  text-align: left;
  text-indent: 0!important;
}

.hero_pages-white {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem 2rem;
  margin-bottom: 20px;
  width: 100%;
}

.hero_pages-white p {
  font-size: 1.2rem;
  font-family: var(--font-secondary);
  color: var(--blanctexte);
  text-align: center;
  margin-top: 18px;
}

.hero_pages-resume {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem 2rem;
  width: 100%;
  margin-top: 90px;
}

.heading_h1_colored {
  text-align: center;
  font-size: 2.5rem;
  font-family: var(--font-primary);
  font-weight: 700;
  line-height: 3rem;
  color: var(--orangeocre);
}

.heading_h1_white {
  text-align: center;
  font-size: 3.5rem;
  font-family: var(--font-tertiary);
  font-weight: 700;
  line-height: 3rem;
  color: var(--blanctexte);
  line-height: 1.2;
}

.heading_resume {
  margin-bottom: 20px;
}

.heading_h1_colored2 {
  text-align: center;
  font-size: 2.5rem;
  font-family: var(--font-primary);
  font-weight: 700;
  line-height: 3rem;
  color: var(--vertturquoise);
}

.sensVoyage {
  font-family: var(--font-tertiary);
}
.sensVoyage_titre {
  color: var(--marron);
}

.ethnies_pays {
  text-indent: 0!important;
}
.sub_title_colored {
  font-size: 1rem;
  font-family: var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 0.3rem;
  font-weight: 400;
  color: var(--bleumarine);
  width: 100%;
  text-align: center;
  margin-top: 20px;
}

.sub_title_colored_resume,
.sub_title_colored_faqs {
  font-size: 1rem;
  font-family: var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 0.3rem;
  font-weight: 400;
  color: var(--bleumarine);
  width: 100%;
  text-align: center;
}

.sub_title_colored_faqs a:hover {
  font-weight: bold;
}

.sub_title_colored_spectral {
  font-size: 1.2rem;
  font-family: var(--font-secondary);
  font-weight: 400;
  color: var(--bleumarine);
  width: 100%;
  text-align: center;
  margin-top: 20px;
  line-height: 1.8rem;
}

.page_landing {
  color: var(--bleumarine);
}

.page_landing_hotel {
  color: var(--bleumarine);
  font-family: var(--font-tertiary);
  font-style: italic;
}

.page_landing_marron {
  color: var(--marron);
}

.btn_hero {
  display: grid;
  gap: 10px;
  justify-content: center;
  margin-bottom: 50px;
  position: relative;
}

.primary-button {
  border-radius: 50px;
  border: 1px solid var(--orangeocre);
  background-color: var(--orangeocre);
  color: #ffffff;
  font-size: 16px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  padding: 14px 60px;
  margin-top: 10px;
  transition: transform 80ms ease-in;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
}

.primary-button-vol {
  border-radius: 50px;
  border: 1px solid var(--orangeocre);
  background-color: var(--orangeocre);
  color: #ffffff;
  font-size: 16px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  padding: 4px 24px;
  margin-top: 10px;
  width: 240px;
  padding-top: 7px;
  transition: transform 80ms ease-in;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
}

.primary-button:hover {
  border-color: 1px solid var(--marron);
  background-color: var(--marron);
}

.primary-button-turquoise-hotel {
  border-radius: 50px;
  border: 1px solid var(--vertturquoise);
  background-color: var(--vertturquoise);
  color: #ffffff;
  font-size: 16px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  padding: 4px 16px;
  margin-top: 24px;
  width: 240px;
  padding-top: 7px;
  transition: transform 80ms ease-in;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
}

.primary-button-turquoise {
  border-radius: 50px;
  border: 1px solid var(--vertturquoise);
  background-color: var(--vertturquoise);
  color: #ffffff;
  font-size: 16px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  padding: 12px 35px;
  margin-top: 10px;
  transition: transform 80ms ease-in;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
}

.secondary-button {
  border-radius: 50px;
  border: 2px solid #ffffff;
  background-color: transparent;
  color: #ffffff;
  font-size: 16px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  padding: 12px 60px;
  margin-top: 10px;
  transition: transform 80ms ease-in;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
}

.secondary-button-2 {
  border-radius: 50px;
  border: 2px solid var(--orangeocre);
  background-color: transparent;
  color: var(--orangeocre);
  font-size: 16px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  padding: 12px 60px;
  margin-top: 10px;
  transition: transform 80ms ease-in;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
}

/************************************MENU des SECTIONS *******************************/

.share_btn {
  position: absolute;
  padding: 10px 20px;
  color: #024053;
  right: 10px;
}

.box_sub_menu {
  text-align: center;
  height: 100px;
  /* position: sticky;
  top: 0; */
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.box_sub_menu .sub_menu_groups,
.box_sub_menu .sub_menu_groups_theme,
.box_sub_menu .sub_menu_groups_header,
.box_sub_menu .sub_menu_groups_regions,
.box_sub_menu .sub_menu_groups_produit {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  /*float: left;*/
  position: absolute;
  height: 75px;
  right: 0;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--background-header);
  box-shadow: var(--neutral-shadow-01);
  z-index: 999;
  width: 100%;
  top: 0;
}

.box_sub_menu .sub_menu_container {
  gap: 20px;
  top: 25px;
  display: inline-flex;
  justify-content: center;
  position: relative;
}

.box_sub_menu .subMenu {
  display: inline-flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
  flex: 0 0 auto;
  align-items: center;
}

.box_sub_menu .subMenu a .subsection {
  position: relative;
  display: inline-flex;
  padding-bottom: 16px;
}

.box_sub_menu .subMenu a .subsection::after {
  content: "";
  position: absolute;
  left: -50px;
  bottom: -19px;
  width: 0;
  height: 2px;
  background-color: var(--orangeocre);
  transition: width 0.3s ease;
}

.box_sub_menu .subMenu a:hover .subsection::after {
  width: 130%;
}



.box_sub_menu .voyages-organises,
.box_sub_menu .voyages-resumes {
  position: relative;
  width: 190px;
  height: 30px;
  margin-right: 0px;
}

.box_sub_menu .picto-boussole,
.box_sub_menu .picto-resume {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
}

.box_sub_menu .line {
  position: relative;
  width: 1px;
  height: 30px;
  object-fit: cover;
}

.box_sub_menu .picto-maploc,
.box_sub_menu .picto-thematique,
.box_sub_menu .picto-navigation,
.box_sub_menu .picto-voir,
.box_sub_menu .picto-quand,
.box_sub_menu .picto-reco {
  position: relative;
  width: 30px;
  height: 30px;
}

.box_sub_menu .voyage-organise {
  position: absolute;
  width: 190px;
  top: 0;
  left: 44px;
  font-family: "Poppins", Helvetica;
  font-weight: 400;
  color: var(--bleumarine);
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.box_sub_menu .resume {
  position: absolute;
  width: 190px;
  top: 0;
  left: 0;
  font-family: "Poppins", Helvetica;
  font-weight: 600;
  color: var(--bleumarine);
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  top: 2px;
}

.box_sub_menu .regions,
.box_sub_menu .queVoir {
  position: relative;
  width: 114px;
  height: 30px;
  margin-top: -1px;
  font-family: "Poppins", Helvetica;
  font-weight: 600;
  color: var(--bleumarine);
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.box_sub_menu .thematiques,
.box_sub_menu .quandPartir {
  position: relative;
  width: 159px;
  height: 30px;
  margin-top: -1px;
  font-family: "Poppins", Helvetica;
  font-weight: 600;
  color: var(--bleumarine);
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  top: 2px;
}

.box_sub_menu .queVoir:hover,
.box_sub_menu .regions:hover,
.box_sub_menu .thematiques:hover,
.box_sub_menu .quandPartir:hover,
.box_sub_menu .recommandations:hover,
.box_sub_menu .resume:hover {
  font-weight: 600;
  color: var(--orangeocre);
}

.box_sub_menu .departs_garantis,
.box_sub_menu .recommandations {
  position: relative;
  width: 100px;
  height: 30px;
  margin-top: -1px;
  font-family: "Poppins", Helvetica;
  font-weight: 600;
  color: var(--bleumarine);
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  top: 2px;
}

.box_sub_menu .subsection {
  position: relative;
  width: 160px;
  height: 30px;
  font-family: var(--font-primary), Helvetica;
  font-weight: 600;
  color: var(--bleumarine);
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  top: 2px;
}

.box_sub_menu .subsection_produit {
  position: relative;
  width: 114px;
  height: 30px;
  font-family: var(--font-primary), Helvetica;
  font-weight: 600;
  color: var(--bleumarine);
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  top: 4px;
}

/* Active menu par rapport à l'intersection*/
.box_sub_menu .subMenu a.active .subsection_produit {
  color: var(--orangeocre);
  font-weight: 600;
  position: relative;
}

.box_sub_menu .subMenu a.active .subsection_produit::after {
  content: "";
  position: absolute;
  left: -14px;
  bottom: -23px;
  width: 140%;
  height: 2px;
  background-color: var(--orangeocre);
}

/* Effet au survol (hover) */
.box_sub_menu .subsection:hover,
.box_sub_menu .subsection_produit:hover {
  font-weight: 400;
  color: var(--orangeocre);
}

/* Effet lorsque le lien est actif (focus ou click) */
.box_sub_menu .subsection:active,
.box_sub_menu .subsection_produit:active {
  font-weight: 600;
  color: var(--orangeocre);
}

.box_sub_menu .subsection_produit_cta {
  position: relative;
  width: 114px;
  height: 30px;
  font-family: var(--font-primary), Helvetica;
  font-weight: 600;
  color: var(--blanctexte);
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  top: 2px;
  background-color: var(--orangeocre);
  padding: 10px 30px;
  transition: transform 0.2s;
  -webkit-transition: transform 0.2s;
  -moz-transition: transform 0.2s;
  -ms-transition: transform 0.2s;
  -o-transition: transform 0.2s;
  transition: transform 0.3s ease, border-top-right-radius 0.3s ease;
  transition: background-color 0.3s ease;
}

.box_sub_menu .subsection_produit_cta:hover {
  transform: scale(1.05);
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: var(--marron);
}

.box_sub_menu .subsection_produit_cta:active {
  transform: scale(1);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
}

.box_sub_menu .picto-subsection {
  position: relative;
  width: 30px;
  height: 30px;
}

@media screen and (min-width: 1119px) {
  .horizontal-line-xxs,
  .horizontal-line-xs,
  .horizontal-line-md {
    display: none !important;
  }
}

@media screen and (max-width: 1119px) {
  .addFavoris {
    top: 0;
  }

  .horizontal-line-xs,
  .horizontal-line-md {
    display: block !important;
  }

  .bg_heroes,
  .bg_heroes_ideesVoyages,
  .bg_heroes_produit_rn7,
  .bg_heroes_hotel_kirindy,
  .bg_heroes_pax_famille,
  .bg_heroes_regions_listing,
  .bg_heroes_theme_listing {
    height: 700px !important;
  }

  .bg_heroes {
    top: 90px;
  }

  .carousel-inner .carousel-item {
    min-height: 700px !important;
  }

  .box_sub_menu .sub_menu_groups {
    width: 98%;
    height: 415px;
    position: inherit;
  }

  .box_sub_menu .sub_menu_groups_header {
    width: 98%;
    height: 300px;
    position: inherit;
  }

  .box_sub_menu .sub_menu_groups_regions {
    width: 98%;
    height: 300px;
    position: inherit;
  }

  .box_sub_menu .sub_menu_groups_produit {
    width: 98%;
    height: 365px;
    position: inherit;
  }

  .box_sub_menu .sub_menu_groups_theme {
    width: 98%;
    height: 400px;
    position: inherit;
  }

  .box_sub_menu .sub_menu_container {
    display: flex;
    flex-direction: column;
    gap: 45px !important;
    left: 40px;
    margin-right: 40px;
  }

  .box_sub_menu .subMenu {
    text-align: left;
    width: 90%;
  }

  .vertical-line-40,
  .vertical-line-60 {
    display: none !important;
  }

  .horizontal-line-xs {
    display: block;
    position: relative;
    width: 95%;
    left: 0;
    margin: -25px;
  }

  .box_sub_menu .voyage-organise,
  .box_sub_menu .regions,
  .box_sub_menu .thematiques,
  .box_sub_menu .departs_garantis {
    text-align: left;
  }

  /*   main {
    min-height: 1500px;
  } */

  header {
    min-height: 325px;
    position: static;
  }
}

@media (min-width: 576px) {
  .btn_hero {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  /*   main {
    min-height: 1500px;
  } */

  .hero_pages-2 {
    position: relative;
    top: 30px;
  }

  .bg_heroes_ideesVoyages {
    background-position: left;
  }
}

/***********************TITRE SECTION**********************/
.section-titre {
  display: block;
  text-align: center;
  font-family: var(--font-primary);
  line-height: 1.5;
  width: 100%;
  margin: auto;
  padding: 3rem 0;
  position: relative;
  top: 0;
  color: var(--bleumarine);
  padding: 30px;
}

.sous-titre-seo {
  color: var(--bleumarine);
  text-align: center;
  font-family: var(--font-secondary);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 400;
  margin-top: 20px;
  line-height: 1.8rem;
  width: 60%;
  margin: 20px auto;
}

.titre-bold {
  font-weight: 700;
}

.sous-titre {
  color: var(--bleumarine);
  text-align: center;
  font-family: var(--font-secondary);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 400;
  margin-top: 20px;
  line-height: 1.8rem;
  text-indent: 0!important;
}

.sous-titre_white {
  color: var(--blanctexte);
  text-align: center;
  font-family: var(--font-secondary);
}

/***********************SECTION PAX**********************/
.pax {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  width: 100%;
  height: 800px;
  margin: 0 auto;
  padding: 90px 10px;
  margin-bottom: 50px;
  /*margin-top: -90px;*/
}

.pax .group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 1280px;
  height: 446px;
  top: 0;
  left: 0;
}

.pax .overlap-group {
  position: relative;
  width: 900px;
  height: 446px;
  top: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
}

.pax .background-image {
  position: absolute;
  width: 773px;
  height: 446px;
  top: 0;
  left: 0;
}

.pax .bloc-descriptif {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
  padding: 41px 30px 41px 37px;
  position: absolute;
  top: 18px;
  left: 571px;
  background-color: #024053;
  border-radius: 10px;
  box-shadow: 0px 10px 64px #00000033;
}

.pax .voyage-en-groupe {
  position: relative;
  width: 294px;
  height: 75px;
  font-family: "Poppins", Helvetica;
  font-weight: 700;
  color: var(--blanctexte);
  font-size: 24px;
  text-align: center;
  letter-spacing: 0;
  line-height: 1.5;
}

.pax .line {
  width: 150px;
  object-fit: cover;
  position: relative;
  height: 1px;
}

.pax .text-wrapper {
  position: relative;
  width: 290px;
  height: 149px;
  font-family: "Poppins", Helvetica;
  color: var(--blanctexte);
  font-size: 1rem;
  text-align: left;
  letter-spacing: 0;
}

.pax .bouton-CTA {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
}

.pax .btn-standard {
  display: flex;
  width: 272px;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 4px;
  background-color: var(--orangeocre);
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  flex: 0 0 auto;
}

.pax .picto-right-next {
  position: relative;
  width: 39.84px;
  height: 40px;
  transition: transform 0.5s ease-in-out;
}

.pax .btn-standard:hover {
  background-color: var(--marron);
}

.btn-standard:hover .picto-right-next {
  transform: rotate(360deg);
  /* Rotation complète au survol */
}

.pax .btn-texte {
  position: absolute;
  width: 168px;
  height: 37px;
  top: 10px;
  left: 42px;
  font-family: "Poppins", Helvetica;
  font-weight: 500;
  color: var(--blanctexte);
  font-size: 18px;
  letter-spacing: 0;
  line-height: normal;
}

.pax .groupe-voyage {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  top: 1px;
  left: 0;
}

.pax .img {
  width: 328px;
  margin-top: -0.5px;
  position: relative;
  height: 1px;
}

.pax .voyage-en-groupe-2 {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.pax .picto-groupe {
  position: relative;
  width: 39px;
  height: 50.17px;
}

.pax .frame-2 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 8px;
  position: relative;
  flex: 0 0 auto;
}

.pax .text-wrapper-2 {
  position: relative;
  width: 186px;
  height: 26px;
  margin-top: -1px;
  font-family: "Poppins", Helvetica;
  font-weight: 700;
  color: var(--bleumarine);
  font-size: 22px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.pax .text-wrapper-2:hover {
  color: var(--marron);
}

.pax .text-wrapper-3 {
  position: relative;
  width: 186px;
  height: 22px;
  font-family: "Poppins", Helvetica;
  font-weight: 400;
  color: var(--noir);
  font-size: 12px;
  letter-spacing: 0;
  line-height: normal;
}

.pax .picto-next {
  position: relative;
  width: 24px;
  height: 26.76px;
}

.pax .line-2 {
  width: 328px;
  object-fit: cover;
  position: relative;
  height: 1px;
}

.pax .voyage-en-groupe-3 {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  position: relative;
  flex: 0 0 auto;
}

.pax .picto-famille {
  position: relative;
  width: 48px;
  height: 45px;
}

.pax .voyage-en-groupe-4 {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  position: relative;
  flex: 0 0 auto;
}

.pax .picto-couple {
  position: relative;
  width: 35px;
  height: 50.17px;
}

.pax .voyage-en-groupe-5 {
  display: inline-flex;
  align-items: center;
  gap: 23px;
  position: relative;
  flex: 0 0 auto;
}

.pax .picto-solo {
  position: relative;
  width: 26px;
  height: 55px;
}

@media screen and (min-width: 376px) and (max-width: 768px) {
  .heading_h1 {
    text-align: center;
    font-size: 2.5rem;
    font-family: var(--font-primary)!important;
    font-weight: 700;
    line-height: 3.5rem;
    color: var(--blanctexte);
  }

  .faq-form-product {
    width: 100% !important;
    padding-left: 20px;
    padding-right: 20px;
  }

  .notification-bell {
    right: -145px;
  }

  .pax {
    margin-bottom: 570px !important;
  }

  .primary-button,
  .secondary-button-2 {
    padding: 16px 40px;
  }

  .hero_pages-2 {
    position: relative;
    top: 30px;
  }

  .bg_heroes_ideesVoyages {
    background-position: 20% 0% !important;
  }

  .sous-titre-seo {
    width: 90% !important;
  }
  .date-prompt-container {
    flex-direction: column;
    gap: 30px;
    padding-bottom: 20px !important;
    border-radius: 5px !important;
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    -ms-border-radius: 5px !important;
    -o-border-radius: 5px !important;
  }
  .date-prompt-content {
    flex-direction: column;
    gap: 20px;
    margin-top: 50px;
  }
  .texte-cta {
    line-height: 1.5;
    font-size: 1.5rem !important;
  }
  .faqs-btn {
    width: 100%;
    height: 50px;
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 375px) {
  .date-prompt-container {
    flex-direction: column;
    gap: 30px;
    padding-bottom: 20px !important;
    border-radius: 5px !important;
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    -ms-border-radius: 5px !important;
    -o-border-radius: 5px !important;
  }
  .date-prompt-content {
    flex-direction: column;
    gap: 20px;
    margin-top: 50px;
  }
  .texte-cta {
    line-height: 1.5;
    font-size: 1.3rem !important;
  }
  .faqs-btn {
    width: 100%;
    height: 50px;
    margin-bottom: 50px;
  }

  .heading_h1 {
    text-align: center;
    font-size: 2.5rem;
    font-family: var(--font-primary)!important;
    font-weight: 700;
    line-height: 3.5rem;
    color: var(--blanctexte);
  }

  .tag_cat .tag-type-depart {
    width: 100%;
  }

  .tag-type-depart .tag {
    width: 100%;
  }

  .faq-form-product {
    width: 100% !important;
    padding-left: 20px;
    padding-right: 20px;
  }

  .notification-bell {
    right: -125px;
  }

  .bg_heroes_ideesVoyages {
    background-position: 20% 0% !important;
  }

  .primary-button,
  .secondary-button-2 {
    padding: 16px 40px;
  }

  .sous-titre-seo {
    width: 90% !important;
  }

  .hero_pages {
    position: relative;
    top: 100px;
  }

  .hero_pages_solidaires {
    position: relative;
    top: 50px;
    padding: 5rem 2rem 2rem;
  }

  .hero_pages-2 {
    position: relative;
    top: 60px;
  }

  .hero_pages-3 {
    position: relative;
    top: 245px;
    padding: 0 20px;
  }

  .hero_pages-product {
    position: relative;
    top: 0;
  }

  .hero_pages-hotel {
    width: 100%;
    height: 100dvh;
  }
}

@media screen and (min-width: 376px) and (max-width: 767px) {
  .hero_pages {
    position: relative;
    top: 100px;
  }

  .hero_pages-3 {
    position: relative;
    top: 245px;
    padding: 0 20px;
  }

  .hero_pages-product {
    position: relative;
    top: 0;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .pax {
    margin-bottom: 600px !important;
    margin-top: 0;
  }

  .pax .bloc-descriptif {
    justify-content: center;
    left: 269px;
    top: 120px;
  }

  .pax .background-image {
    width: 100%;
    top: 20px;
  }

  .hero_pages-2 {
    position: relative;
    top: 30px;
  }

  .hero {
    /* top: 145px; */
  }

  .hero_pages {
    position: relative;
    top: 150px;
  }

  .hero_pages-3 {
    position: relative;
    top: 245px;
    padding: 0 20px;
  }

  .hero_pages-product {
    position: relative;
    top: 50px;
  }

  .faq-form-product {
    width: 100% !important;
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1280px) {
  .pax {
    margin-bottom: 500px;
    margin-top: 0;
  }

  .hero_pages-2 {
    position: relative;
    top: 30px;
  }

  .faq-form-product {
    width: 100% !important;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/*************************BIG CTA***********************/
.big-cta {
  margin: 50px 0;
}

.texte-cta {
  font-size: 1rem;
  font-weight: 600;
  color: var(--blanctexte);
  text-align: center;
}

.date-prompt-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bleumarine);
  padding: 15px 30px;
  border-radius: 50px;
  color: var(--blanctexte);
  font-family: var(--font-primary), sans-serif;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.date-prompt-content {
  display: flex;
  align-items: center;
}

.icon {
  width: 48px;
  height: 48px;
  margin-right: 10px;
}

.contact-button {
  background-color: var(--orangeocre);

  color: var(--blanctexte);
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 14px;
  cursor: pointer;
  font-weight: bold;
}

.contact-button:hover {
  background-color: var(--marron);
}

#regions,
#thematique,
#garantis {
  scroll-margin-top: 80px;
  /* Ajustement de la valeur selon la hauteur de navbar */
}

/****************FAQ******************/
.faq-form-product {
  width: 1120px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  left: 0;
  right: 0;
  margin-bottom: 100px;
}

.faq-full-width-bg {
  background-color: var(--blancfiligrane);
  /* couleur arrière-plan */
  width: 100%;
  padding: 60px 0;
  /* espace autour */
}

/* Breadcrumb Container */
.breadcrumb ul {
  list-style: none;
  /* Supprime les puces */
  display: flex;
  /* Aligne les éléments horizontalement */
  padding: 0;
  margin: 0;
}

/* Breadcrumb Item */
.breadcrumb ul li {
  display: flex;
  /* Pour aligner les liens et les icônes */
}

/* Espace entre les items */
.breadcrumb ul li + li {
  padding-left: 0.5rem;
  /* Espace entre les éléments */
}

/* Séparateur "/" entre les items */
.breadcrumb ul li + li::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: #6c757d;
  /* Couleur grise */
  content: "/";
  /* Ajoute le séparateur */
}

/* Lien dans le breadcrumb */
.breadcrumb ul li a {
  text-decoration: none;
  /* Supprime le soulignement */
  color: #007bff;
  /* Couleur bleue pour les liens */
  transition: color 0.3s ease;
  /* Transition douce pour le survol */
}

.breadcrumb ul li a:hover {
  color: #0056b3;
  /* Couleur plus sombre au survol */
}

/* Élément actif (non cliquable) */
.breadcrumb ul li span[aria-current="page"] {
  color: #6c757d;
  /* Couleur grise pour l'élément actif */
  font-weight: bold;
}

.picto-CTA_hotel {
  position: relative;
  width: 39.84px;
  height: 40px;
  transition: transform 0.5s ease-in-out;
  right: 0px;
}

.picto-CTA:hover,
.picto-CTA_hotel:hover {
  transform: rotate(360deg);
}

/*********************TAGS SEO************************/
.tag_cat {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  font-size: 0.825rem;
}

.tag_cat .tag-type-depart {

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 12px 20px;
  flex: 0 0 auto;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  border: 0.5px solid var(--blanctexte);
  background-color: #f4efea;
  transition: background-color 0.3s ease;
}

.tag_cat .tag-type-depart:hover {
  background-color: var(--marron);
}

.tag-type-depart .tag {
  font-family: var(--font-primary);
  color: #a77a64;
  white-space: nowrap;
  font-size: 0.9rem;
}

.tag-type-depart .tag:hover {
  color: var(--blanctexte);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .tag_cat {
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 20px;
  }

  .tag_cat .tag-type-depart {
    padding: 10px 16px;
  }

  .tag-type-depart .tag {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .tag_cat {
    justify-content: left;
  }

  .tag_cat .tag-type-depart {
    padding: 14px 18px;
  }

  .tag-type-depart .tag {
    font-size: 16px;
  }
}
@media (max-width: 376px) {
  .tag_cat {
    justify-content: left!important;
  }
  .tag_cat .tag-type-depart {
    padding: 14px 18px;
  }
}