*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Roboto", sans-serif;
  background: white;
}

/* supprime liens bleus teléphone pour Mobile */
a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

/* - - NAVIGATION - - Debut - - */
/* - Suppression elements nav - debut */
#recherche {
  display: none;
}

#partenaires {
  display: none;
}

#hamburger {
  display: none;
}

#hamburger01 {
  display: none;
}

#hamburger02 {
  display: none;
}

#navi-mobile {
  display: none;
}

.fleche-visites-gauche,
.fleche-stages-gauche,
.fleche-photos-gauche,
.fleche-videos-gauche,
.fleche-cristaux-gauche,
.fleche-contact-gauche {
  display: none;
}

.logo {
  position: relative;
  top: 23px;
}

.logo.voir {
  display: block;
}

.logo .img {
  padding: 2px 4px;
  opacity: 0.83;
}

.logo .img:hover {
  opacity: 1;
}

.logo-02 {
  display: none;
}

/* - Superposition logo-01 et logo-02 - fin */
/* - Menus nav - debut */
#navi-ecran {
  position: relative;
  width: 100%;
  padding-bottom: 25px;
  background-color: hsl(0, 0%, 100%);
  z-index: 100;
  display: block;
}

#nav-accueil {
  margin: auto;
  padding: 0 0 0 5px;
  width: 986px;
  height: 44px;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activite .theme01,
.activite .theme02,
.activite .theme03,
.activite .theme04,
.activite .theme05,
.activite .theme06 {
  text-decoration: none;
  padding: 14px 12px;
  cursor: pointer;
}

.activite .theme01 a,
.activite .theme02 a,
.activite .theme03 a,
.activite .theme04 a,
.activite .theme05 a,
.activite .theme06 a {
  text-decoration: none;
  color: hsl(0, 0%, 20%);
  font: normal 400 14px / 1 "Roboto";
}

.activite .theme01 a:hover,
.activite .theme02 a:hover,
.activite .theme03 a:hover,
.activite .theme04 a:hover,
.activite .theme05 a:hover,
.activite .theme06 a:hover {
  text-decoration: none;
  color: hsl(0, 0%, 0%);
  font: normal 400 14px / 1 "Roboto";
}

.activite .theme07 {
  padding: 14px 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
  opacity: 0.8;
}

.activite .theme07:hover {
  opacity: 1;
}

.activite .theme08 {
  padding: 13px 12px 10px 17px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0.8;
}

.activite .theme08:hover {
  opacity: 1;
}

.sous-theme01,
.sous-theme02,
.sous-theme03,
.sous-theme04,
.sous-theme05,
.sous-theme06,
.sous-theme07,
.sous-theme08 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  background: hsl(0, 0%, 100%);
  display: none;
  z-index: -10;
}

.sous-theme01.visible,
.sous-theme02.visible,
.sous-theme03.visible,
.sous-theme04.visible,
.sous-theme05.visible,
.sous-theme06.visible,
.sous-theme07.visible,
.sous-theme08.visible {
  display: block;
}

.sous-theme-bloc01 {
  margin: 0 auto;
  width: 986px;
  animation: largeur 0.6s ease-in-out;
}

.sous-theme-bloc02 {
  margin: 0 auto;
  width: 986px;
  animation: largeur 0.6s ease-in-out;
}

@keyframes largeur {
  0% {
    opacity: 0;
    transform: scaleY(0.9);
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

.sous-theme-list {
  padding-right: 30px;
}

.sous-theme-espace01 {
  padding: 110px 0 70px 12px;
  width: 790px;
  display: flex;
  justify-content: space-between;
}

.sous-theme-espace02 {
  padding: 110px 0 70px 12px;
  width: 882px;
  display: flex;
  justify-content: space-between;
}

.sous-theme-espace03 {
  padding: 110px 0 70px 12px;
  width: 920px;
  display: flex;
  justify-content: space-between;
}

.sous-theme-espace04 {
  padding: 110px 0 70px 12px;
  width: 810px;
  display: flex;
  justify-content: space-between;
}

.sous-theme-espace05 {
  padding: 110px 0 70px 12px;
  width: 810px;
  display: flex;
  justify-content: space-between;
}

.sous-theme-espace06 {
  padding: 110px 0 70px 12px;
  width: 974px;
  display: flex;
  justify-content: flex-start;
}

.sous-theme-espace07 {
  padding: 110px 0 70px 12px;
  width: 810px;
  display: flex;
  justify-content: space-between;
}

.sous-theme-espace08 {
  padding: 110px 0 70px 12px;
  width: 810px;
  display: flex;
  justify-content: space-between;
}

.sous-theme-espace01 .sous-theme-list .gras,
.sous-theme-espace02 .sous-theme-list .gras,
.sous-theme-espace03 .sous-theme-list .gras,
.sous-theme-espace04 .sous-theme-list .gras,
.sous-theme-espace05 .sous-theme-list .gras,
.sous-theme-espace06 .sous-theme-list .gras {
  padding: 8px 0;
}

.sous-theme-espace01 .sous-theme-list .maigre,
.sous-theme-espace02 .sous-theme-list .maigre,
.sous-theme-espace03 .sous-theme-list .maigre,
.sous-theme-espace04 .sous-theme-list .maigre,
.sous-theme-espace05 .sous-theme-list .maigre {
  padding: 6px 0;
}

.sous-theme-espace01 .sous-theme-list h4,
.sous-theme-espace02 .sous-theme-list h4,
.sous-theme-espace03 .sous-theme-list h4,
.sous-theme-espace04 .sous-theme-list h4,
.sous-theme-espace05 .sous-theme-list h4,
.sous-theme-espace06 .sous-theme-list h4,
.sous-theme-espace07 .sous-theme-list h4,
.sous-theme-espace08 .sous-theme-list h4 {
  padding-bottom: 20px;
  font: normal 300 16px / 1.1 "Roboto";
  color: hsl(0, 0%, 50%);
}

.sous-theme-espace01 .sous-theme-list .decalage,
.sous-theme-espace02 .sous-theme-list .decalage,
.sous-theme-espace03 .sous-theme-list .decalage,
.sous-theme-espace04 .sous-theme-list .decalage,
.sous-theme-espace05 .sous-theme-list .decalage {
  padding-bottom: 27px;
}

.sous-theme-espace01 .sous-theme-list .sous-theme-gras,
.sous-theme-espace02 .sous-theme-list .sous-theme-gras,
.sous-theme-espace03 .sous-theme-list .sous-theme-gras,
.sous-theme-espace04 .sous-theme-list .sous-theme-gras,
.sous-theme-espace05 .sous-theme-list .sous-theme-gras {
  padding: 8px 10px 7px 0;
  text-decoration: none;
  color: hsl(0, 0%, 0%);
  font: normal 450 28px / 1.1 "Roboto";
}

.sous-theme-espace01 .sous-theme-list .sous-theme-petit,
.sous-theme-espace02 .sous-theme-list .sous-theme-petit,
.sous-theme-espace03 .sous-theme-list .sous-theme-petit,
.sous-theme-espace04 .sous-theme-list .sous-theme-petit,
.sous-theme-espace05 .sous-theme-list .sous-theme-petit {
  padding: 6px 10px 5px 0;
  text-decoration: none;
  color: hsl(0, 0%, 0%);
  font: normal 400 18px / 1.1 "Roboto";
}

.sous-theme-espace01 .sous-theme-list .sous-theme-gras,
.sous-theme-espace02 .sous-theme-list .sous-theme-gras,
.sous-theme-espace03 .sous-theme-list .sous-theme-gras,
.sous-theme-espace04 .sous-theme-list .sous-theme-gras,
.sous-theme-espace05 .sous-theme-list .sous-theme-gras {
  padding: 8px 10px 0 0;
  text-decoration: none;
  color: hsl(0, 0%, 0%);
  font: normal 400 25px / 1.1 "Roboto";
}

.sous-theme-espace06 .sous-theme-list .sous-theme-normal {
  padding: 8px 10px 0 0;
  text-decoration: none;
  color: hsl(0, 0%, 0%);
  font: normal 400 26px / 1.1 "Roboto";
}

.sous-theme-espace08 .sous-theme-list .normal {
  display: flex;
  align-items: center;
}

.sous-theme-espace08 .sous-theme-list .image {
  height: 18px;
}

.sous-theme-espace08 .sous-theme-list .sous-theme-juste {
  padding: 8px 15px 8px 13px;
  color: hsl(0, 0%, 0%);
  font: normal 400 22px / 1.1 "Roboto";
  cursor: pointer;
}

#recherche,
#navbar,
#navbar-visites,
#navbar-stages,
#navbar-photos,
#navbar-videos,
#navbar-cristaux,
#navbar-contact {
  display: none;
}

/* - Menu nav rechercher - debut */
.sous-theme-list-rechercher {
  width: 100%;
}

.noir-rechercher-texte {
  margin: 0 auto;
  top: 0;
  width: 100%;
  height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.noir-rechercher-texte input {
  margin: 0 auto;
  outline: none;
  border: none;
  width: 100%;
  height: 40px;
  color: hsl(0, 0%, 20%);
  font: normal 400 27px / 1.1 "Roboto";
  background: none;
}

.noir-rechercher-texte input::placeholder {
  color: hsl(0, 0%, 35%);
}

.icone-rond-rechercher {
  width: 35px;
  height: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
}

.icone-rond-rechercher .ig1 {
  height: 22px;
  opacity: 0.4;
  transition: 0.3s;
}

.icone-rond-rechercher .ig1:hover {
  opacity: 0.8;
  transition: 0.3s;
}

.icone-croix-rechercher {
  position: relative;
  width: 20px;
  height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: hsl(0, 0%, 40%);
  transition: 0.3s;
  cursor: pointer;
}

.icone-croix-rechercher:hover {
  background: hsl(0, 0%, 0%);
  transition: 0.3s;
}

.icone-croix-rechercher .ig2 {
  height: 9px;
  position: absolute;
}

.menu-rechercher {
  width: 100%;
}

.menu-rechercher-bloc {
  margin-top: 0;
}

.menu-rechercher-titre {
  padding: 0 0 8px 0;
  font: normal 300 16px / 1.1 "Roboto";
  color: hsl(0, 0%, 50%);
}

.menu-rechercher-texte {
  width: 100%;
}

.menu-rechercher-texte a {
  text-decoration: none;
}

.menu-rechercher-texte a span {
  padding: 0 10px 0 10px;
  opacity: 0.5;
}

.menu-rechercher-texte a:hover span {
  opacity: 1;
}

.menu-rechercher-texte p {
  margin: 5px 0 5px -10px;
  padding: 6px 0 6px 0;
  font: normal 400 16px / 1 "Roboto";
  color: hsl(0, 0%, 15%);
  text-decoration: none;
}

.menu-rechercher-texte p:hover {
  background-color: hsl(0, 0%, 96%);
  color: hsl(0, 0%, 0%);
  border-radius: 5px;
}

#deroule-liste-texte {
  width: 100%;
  text-decoration: none;
}

#deroule-liste {
  padding: 10px 0 25px 0;
  text-decoration: none;
}

#deroule-liste-texte p {
  margin: 5px 0 5px -10px;
  padding: 6px 0 6px 0;
  font: normal 400 16px / 1 "Roboto";
  color: hsl(0, 0%, 15%);
}

#deroule-liste-texte p:hover {
  background-color: hsl(0, 0%, 96%);
  color: hsl(0, 0%, 0%);
  border-radius: 5px;
}

#deroule-liste-texte p span {
  padding: 0 10px 0 10px;
  opacity: 0.5;
}

#deroule-liste-texte p:hover span {
  opacity: 1;
}

/* - Menu nav rechercher - fin */
/* - - NAVIGATION - - Fin - - */

/* - - - - MAIN - - - - Début - - - - */
#main {
  position: relative;
  z-index: 50;
}

/* - - - - MAIN - - - - Fin - - - - */

/* - - HEADER - - Debut */
.fond-ecran-navigation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: hsla(0, 0%, 0%, 0.4);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  z-index: 80;
  display: none;
}

.fond-ecran-navigation.visible {
  display: block;
}

.sous-menu-mobile1 {
  display: none;
}

#header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 62px;
  width: 100%;
  background: hsla(0, 0%, 100%, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-bottom: 1px solid #c9c9c9;
  z-index: 60;
}

#header .header-sousmenu {
  margin: 0 auto;
  width: 986px;
  height: 62px;
  padding: 0 12px 0 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 70;
}

#header .header-menu {
  width: 470px;
  height: 62px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#direction {
  display: none;
}

#header .header-sousmenu .menu-titre {
  padding-left: 2px;
  display: flex;
  justify-content: flex-start;
  display: block;
}

#header .header-sousmenu .menu-demi-journee {
  text-decoration: none;
  font: normal 500 22px / 1 "Roboto";
  color: black;
  display: block;
}

#header .header-sousmenu .menu-demi-journee-mobile {
  text-decoration: none;
  font: normal 500 19px / 1 "Roboto";
  color: black;
  display: none;
}

#header .header-sousmenu .header-menu .ab4 {
  text-decoration: none;
  padding: 24px 0 22px 0;
  font: normal 400 14px / 1 "Roboto";
  color: hsl(0, 0%, 0%);
  border-bottom: 1px solid hsl(0, 0%, 0%);
  cursor: default;
}

#header .header-sousmenu .header-menu .ab1,
.ab2,
.ab3 {
  padding: 24px 0 22px 0;
  text-decoration: none;
  font: normal 400 14px / 1 "Roboto";
  color: hsl(0, 0%, 35%);
  border-bottom: 1px solid hsla(0, 0%, 100%, 0);
}

#header .header-sousmenu .header-menu .ab1:hover,
.ab2:hover,
.ab3:hover {
  color: hsl(0, 0%, 10%);
}

.header-menu .lien-reserv-jour .btn-reserv1 {
  text-decoration: none;
  padding: 7px 10px 7px 10px;
  cursor: pointer;
  font: normal 400 14px / 1 "Roboto", sans-serif;
  border-radius: 22px;
  color: hsl(0, 0%, 0%);
  border: none;
  outline: none;
  background-color: #ffb46a;
}

.header-menu .lien-reserv-jour .btn-reserv1:hover {
  background-color: #ffba76;
}

/* - - HEADER - - Fin - - */

/* - - - - LOADER PAGE - - - - Début - - - - */
.loader-page {
  position: fixed;
  margin: 0 auto;
  top: 240px;
  text-align: center;
  width: 100%;
  z-index: 500;
}

.loader-animation {
  margin: 0 auto;
  width: 70px;
  height: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.loader-animation > div {
  width: 20px;
  height: 20px;
  background: #ffb46a;
  border-radius: 50%;
  animation: troisPointsBoules 0.5s infinite ease-in-out alternate;
}

.loader-animation .boule1 {
  animation-delay: -0.3s;
}

.loader-animation .boule2 {
  animation-delay: -0.15s;
}

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

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

.loader-page.hidden {
  animation: eteindre 1s forwards;
}

@keyframes eteindre {
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* - - - - LOADER PAGE - - - - Fin - - - - */
/* - - SECTION 1 - TITRE - - Début - - */
#chambres-stages1 {
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

#chambres-stages1 h1 {
  width: 100%;
  padding: 40px 0 60px 0;
  text-align: center;
  font: normal 500 55px / 1 "Roboto";
  color: hsl(189, 75%, 20%);
  cursor: default;
}

/* - Modal - Début - */
body.arret {
  overflow-y: hidden;
}

.modal-container2 {
  position: fixed;
}

.modal-container2.acte {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  transition: visibility 0.3s;
  visibility: visible;
  z-index: 1000;
}

.modal-container2 .overlay2 {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.modal-container2.acte .overlay2 {
  height: 130%;
  background: hsla(0, 0%, 60%, 0.4);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  transition: opacity 0.3s ease-out;
  opacity: 1;
}

.modal-container2 .modal2 {
  position: absolute;
  top: 460px;
  left: 50%;
  width: 640px;
  height: 690px;
  transform: translate(-50%, calc(-50% - 40px));
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  border-radius: 15px;
  background: hsl(0, 0%, 10%);
  opacity: 0;
}

.modal-container2.acte .modal2 {
  transform: translate(-50%, -50%);
  transition: opacity 0.3s 0.2s ease-out, transform 0.3s 0.2s ease-out;
  opacity: 1;
}

.close-modal2 {
  width: 100%;
  margin-top: 30px;
  text-align: right;
  border: none;
  background: hsl(0, 0%, 10%);
}

.close-modal2 img {
  padding-right: 40px;
  cursor: pointer;
  opacity: 0.9;
}

.close-modal2 img:hover {
  opacity: 1;
}

.contenu2 {
  margin: 0 auto;
  padding-bottom: 50px;
  width: 525px;
  text-align: center;
}

.modal2 h2 {
  margin-top: 10px;
  font: normal 400 35px / 1 "Roboto";
  color: hsl(0, 0%, 95%);
}

.modal2 h3 {
  font: normal 500 55px / 1 "Roboto";
  color: hsl(0, 100%, 65%);
}

.modal2 .tarif {
  padding-top: 20px;
  font: normal 400 24px / 1 "Roboto";
  color: hsl(0, 0%, 85%);
}

.modal2 .heure {
  padding-top: 20px;
  padding-bottom: 45px;
  font: normal 400 21px / 1 "Roboto";
  color: hsl(0, 0%, 85%);
  border-bottom: 1px solid hsl(0, 0%, 95%);
}

.modal2 .inscrire {
  padding-top: 40px;
  font: normal 400 21px / 1.4 "Roboto";
  color: hsl(0, 0%, 85%);
}

.modal-reserv-jour {
  margin-top: 25px;
}

.modal-reserv-jour .mode-reserv {
  height: 45px;
  line-height: 45px;
  text-align: center;
}

.modal-reserv-jour .mod-reserv1 {
  text-decoration: none;
  padding: 11px 27px 11px 27px;
  cursor: pointer;
  font: normal 400 16px / 1 "Roboto", sans-serif;
  border-radius: 22px;
  color: hsl(0, 0%, 95%);
  outline: none;
  background-color: hsl(0, 0%, 10%);
  border: 1px solid hsl(0, 0%, 95%);
}

.modal-reserv-jour .mod-reserv1:hover {
  color: hsl(0, 0%, 10%);
  background-color: hsl(0, 0%, 100%);
  border: 1px solid hsl(0, 0%, 10%);
}

.modal2 .telephone2 {
  margin-top: 30px;
  font: normal 400 17px / 1 "Roboto", sans-serif;
  color: hsl(0, 0%, 85%);
}

/* - Modal - fin - */
/* - Modal espace membres - début - */
body.arret {
  overflow-y: hidden;
}

.modal-partenaires,
.modal-visiteurs,
.modal-stagiaires,
.modal-explorations,
.modal-vidos {
  position: fixed;
}

.modal-partenaires.acte,
.modal-visiteurs.acte,
.modal-stagiaires.acte,
.modal-explorations.acte,
.modal-vidos.acte {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  transition: visibility 0.3s;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  visibility: visible;
  z-index: 1000;
}

.modal-partenaires .overlay10,
.modal-visiteurs .overlay11,
.modal-stagiaires .overlay12,
.modal-explorations .overlay13,
.modal-vidos .overlay14 {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s 0.2s ease-out;
  background: hsla(0, 0%, 0%, 0.4);
  opacity: 0;
}

.modal-partenaires.acte .overlay10,
.modal-visiteurs.acte .overlay11,
.modal-stagiaires.acte .overlay12,
.modal-explorations.acte .overlay13,
.modal-vidos.acte .overlay14 {
  height: 130%;
  transition: opacity 0.3s ease-out;
  opacity: 1;
}

.modal-partenaires .modal10,
.modal-visiteurs .modal11,
.modal-stagiaires .modal12,
.modal-explorations .modal13,
.modal-vidos .modal14 {
  position: absolute;
  top: 340px;
  left: 50%;
  width: 640px;
  height: 410px;
  transform: translate(-50%, calc(-50% - 40px));
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  border-radius: 15px;
  background: radial-gradient(
    ellipse at bottom right,
    hsl(0, 0%, 90%) 50%,
    hsl(0, 0%, 98%) 90%
  );
  opacity: 0;
}

.modal-partenaires.acte .modal10,
.modal-visiteurs.acte .modal11,
.modal-stagiaires.acte .modal12,
.modal-explorations.acte .modal13,
.modal-vidos.acte .modal14 {
  margin: 0 auto;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s 0.2s ease-out, transform 0.3s 0.2s ease-out;
  opacity: 1;
}

.close-modal10,
.close-modal11,
.close-modal12,
.close-modal13,
.close-modal14 {
  margin: 0 auto;
  width: 100%;
  margin-top: 40px;
  text-align: right;
  border: none;
  background: none;
}

.close-modal10 img,
.close-modal11 img,
.close-modal12 img,
.close-modal13 img,
.close-modal14 img {
  padding-right: 40px;
  cursor: pointer;
  opacity: 0.7;
}

.close-modal10 img:hover,
.close-modal11 img:hover,
.close-modal12 img:hover,
.close-modal13 img:hover,
.close-modal14 img:hover {
  opacity: 1;
}

.contenu10,
.contenu11,
.contenu12,
.contenu13,
.contenu14 {
  margin: 0 auto;
  padding-bottom: 50px;
  width: 560px;
  text-align: center;
}

.modal10 .titres h2,
.modal11 .titres h2,
.modal12 .titres h2,
.modal13 .titres h2,
.modal14 .titres h2 {
  padding: 0 0 30px 0;
  font: normal 350 43px / 1.1 "Roboto";
  color: hsl(0, 0%, 30%);
  border-bottom: 1px solid hsl(0, 0%, 75%);
}

.modal10 .membres10,
.modal11 .membres11,
.modal12 .membres12,
.modal13 .membres13,
.modal14 .membres14 {
  padding-top: 25px;
  font: normal 400 20px / 1.3 "Roboto";
  color: hsl(0, 0%, 45%);
}

.modal10 #dialogDesc00 a,
.modal11 #dialogDesc11 a,
.modal12 #dialogDesc22 a,
.modal13 #dialogDesc23 a,
.modal14 #dialogDesc24 a {
  text-decoration: none;
}

.modal10 #dialogDesc00 .membres-part {
  margin: 0 auto;
  margin-top: 30px;
  padding: 17px 40px;
  line-height: 17px;
  outline: none;
  border: none;
  border-radius: 40px;
  background-color: hsl(23, 99%, 40%);
  font: normal 400 18px / 1 "Roboto";
  color: hsl(0, 0%, 100%);
  transition: 0.4s;
  cursor: pointer;
}

.modal11 #dialogDesc11 .membres-visit {
  margin: 0 auto;
  margin-top: 30px;
  padding: 17px 40px;
  line-height: 17px;
  outline: none;
  border: none;
  border-radius: 40px;
  background-color: hsl(201, 100%, 38%);
  font: normal 400 18px / 1 "Roboto";
  color: hsl(0, 0%, 100%);
  transition: 0.4s;
  cursor: pointer;
}

.modal12 #dialogDesc22 .membres-stag {
  margin: 0 auto;
  margin-top: 30px;
  padding: 17px 40px;
  line-height: 17px;
  outline: none;
  border: none;
  border-radius: 40px;
  background-color: hsl(155, 51%, 38%);
  font: normal 400 18px / 1 "Roboto";
  color: hsl(0, 0%, 100%);
  transition: 0.4s;
  cursor: pointer;
}

.modal13 #dialogDesc23 .membres-explo {
  margin: 0 auto;
  margin-top: 30px;
  padding: 17px 40px;
  line-height: 17px;
  outline: none;
  border: none;
  border-radius: 40px;
  background-color: hsl(300, 100%, 38%);
  font: normal 400 18px / 1 "Roboto";
  color: hsl(0, 0%, 100%);
  transition: 0.4s;
  cursor: pointer;
}

.modal14 #dialogDesc24 .membres-video {
  margin: 0 auto;
  margin-top: 30px;
  padding: 17px 40px;
  line-height: 17px;
  outline: none;
  border: none;
  border-radius: 40px;
  background-color: hsl(0, 100%, 38%);
  font: normal 400 18px / 1 "Roboto";
  color: hsl(0, 0%, 100%);
  transition: 0.4s;
  cursor: pointer;
}

.modal10 #dialogDesc00 .membres-part:hover {
  background-color: hsl(23, 99%, 37%);
  transform: scale(1.02);
  transition: 0.4s;
}

.modal11 #dialogDesc11 .membres-visit:hover {
  background-color: hsl(201, 100%, 35%);
  transform: scale(1.02);
  transition: 0.4s;
}

.modal12 #dialogDesc22 .membres-stag:hover {
  background-color: hsl(155, 51%, 35%);
  transform: scale(1.02);
  transition: 0.4s;
}

.modal13 #dialogDesc23 .membres-explo:hover {
  background-color: hsl(300, 100%, 35%);
  transform: scale(1.02);
  transition: 0.4s;
}

.modal14 #dialogDesc24 .membres-video:hover {
  background-color: hsl(0, 100%, 35%);
  transform: scale(1.02);
  transition: 0.4s;
}

/* - Modal espace membres - fin - */
/* - - SECTION 1 - TITRE - - Fin - - */
/* - - SECTION 2 - PH0TO MAISON - - Début - - */
#chambres-stages2 {
  margin: 0 auto;
  padding: 60px 0 60px 0;
  width: 100%;
  background-color: hsl(189, 75%, 20%);
}

#chambres-stages2 .maison-mijanes {
  margin: 0 auto;
  background-image: url(../imgs/maison-mijanes.jpg);
  width: 986px;
  height: 582px;
  border-radius: 15px;
}

/* - - SECTION 2 - PH0TO MAISON - - Fin - - */
/* - - SECTION 3 - EXPLICATION - - Début - - */
#chambres-stages3 {
  width: 100%;
  background-color: hsl(157, 33%, 91%);
}

#chambres-stages3 .chambres-texte {
  margin: 0 auto;
  padding: 70px 0 70px 0;
  width: 800px;
}

#chambres-stages3 .chambres-texte p {
  width: 100%;
  font: normal 500 25px / 1.5 "Roboto";
  color: hsl(0, 0%, 10%);
}

/* - - SECTION 3 - EXPLICATION - - Fin - - */
/* - - SECTION 4 - SITUATION - - - - Début - - */
#chambres-stages4 {
  margin: 0 auto;
  width: 100%;
  padding: 80px 0 70px 0;
  background-color: hsl(11, 22%, 97%);
}

#chambres-stages4 .carte-situation {
  width: 100%;
  text-align: center;
}

#chambres-stages4 .carte-situation img {
  margin: 0 auto;
  width: 700px;
  border-radius: 15px;
}

#chambres-stages4 .texte-situation {
  padding-top: 45px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#chambres-stages4 .texte-situation .situation1 {
  width: 700px;
  padding-bottom: 50px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: baseline;
  border-bottom: 1px solid hsl(0, 0%, 77%);
}

#chambres-stages4 .texte-situation .situation2 {
  width: 700px;
  padding-top: 50px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: baseline;
}

#chambres-stages4 .texte-situation .situation1 .distances1 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
}

#chambres-stages4 .texte-situation .situation1 .distances1 .adresse {
  font: normal 425 19px / 1.5 "Roboto";
  color: hsl(0, 0%, 30%);
}

#chambres-stages4 .texte-situation .situation2 .distances2 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
}

#chambres-stages4 .texte-situation .adress {
  font: normal 450 24px / 1.6 "Roboto";
  color: hsl(0, 0%, 25%);
}

#chambres-stages4 .texte-situation p {
  margin-left: 60px;
  font: normal 400 18px / 1.9 "Roboto";
  color: hsl(0, 0%, 30%);
}

/* - - SECTION 4 - SITUATION - - - - Fin - - */

/* - - SECTION 5 - LOCALISATION - - Début - - */
.carte-localisation {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.carte-localisation img {
  padding: 80px 0;
  width: 986px;
}

/* - - SECTION 5 - LOCALISATION - - Fin - - */

/* - - SECTION 6 - GEOLOCALISATION GPS - - Début - - */
#chambres-stages6 {
  width: 100%;
  padding: 70px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: hsl(0, 0%, 96%);
}

#chambres-stages6 .geolocal {
  font: normal 500 38px / 1 "Roboto";
  text-align: center;
  color: black;
}

#chambres-stages6 #carte-leaflet {
  margin-top: 60px;
  width: 980px;
  height: 700px;
  border: 1px solid grey;
  border-radius: 15px;
  z-index: 10;
}

#chambres-stages6 .itineraire {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  padding: 30px 60px 0 60px;
}

#chambres-stages6 .itineraire a {
  font: normal 400 18px / 1.4 "Roboto";
  color: #4a2100;
  text-decoration: none;
}

#chambres-stages6 .itineraire a:hover {
  text-decoration: underline;
}

#chambres-stages6 .itineraire .fleche-marron {
  height: 13px;
  margin-top: 0px;
  margin-left: 7px;
}

/* Personnalisation du bouton */
.leaflet-control-zoom-reset {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  cursor: pointer;
  width: 34px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Icône de réinitialisation */
.leaflet-control-zoom-reset i {
  font-size: 17px;
  color: hsl(0, 0%, 25%);
}

/* Effet hover sur le bouton */
.leaflet-control-zoom-reset:hover {
  background-color: hsl(0, 0%, 96%);
}

/* - - SECTION 6 - GEOLOCALISATION GPS - - Fin - - */

/* - - - - SECTION 7 - TEXTE GEOLOCALISATION - - Début - - */
#chambres-stages7 {
  margin: 36px 0;
  width: 100%;
}

#chambres-stages7 .texte-geolocal {
  margin: 0 auto;
  padding: 36px 40px 40px 40px;
  width: 450px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: flex-start;
  border-radius: 15px;
  background-color: hsl(0, 0%, 96%);
}

#chambres-stages7 .texte-geolocal .latitude1 {
  padding-bottom: 10px;
  font: normal 500 22px / 1 "Roboto";
  color: black;
}

#chambres-stages7 .texte-geolocal .latitude2 {
  font: normal 500 22px / 1 "Roboto";
  color: black;
}

#chambres-stages7 .texte-geolocal p {
  padding-top: 10px;
  font: normal 400 18px / 1 "Roboto";
  color: #4a4a4a;
}

#chambres-stages7 .texte-geolocal .degres {
  padding-top: 20px;
  font: normal 500 18px / 1.3 "Roboto";
  color: #4a4a4a;
}

#chambres-stages7 .texte-geolocal .systeme {
  padding-top: 20px;
  font: normal 400 13px / 1 "Roboto";
  color: hsl(0, 0%, 40%);
}

/* - - SECTION 7 - TEXTE GEOLOCALISATION - - Fin - - */

/* - - FOOTER - - - - début - - */
#footer-mobile {
  display: none;
}

footer {
  width: 100%;
  background-color: hsl(0, 0%, 96%);
}

#pied-page {
  margin: 0 auto;
  padding: 0 20px;
  width: 900px;
}

.footer-chemin {
  padding: 35px 0;
  display: flex;
  align-items: center;
}

.footer-chemin .footer-chemin-actf {
  color: hsl(0, 0%, 0%);
  font: normal 400 15px / 1 "Roboto";
  text-decoration: none;
}

.footer-chemin .footer-chemin-actf:hover {
  text-decoration: underline;
}

.footer-chemin img {
  height: 15px;
  padding: 0 13px;
}

.footer-chemin .footer-chemin-nonactf {
  color: hsl(0, 0%, 35%);
  font: normal 400 15px / 1 "Roboto";
}

.footer-menus {
  margin-bottom: 30px;
  padding: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.footer-menus ul li {
  padding-bottom: 15px;
  font: normal 500 15px / 1 "Roboto";
  color: hsl(0, 0%, 0%);
  list-style-type: none;
}

.footer-menus a {
  font: normal 400 15px / 1 "Roboto";
  color: hsl(0, 0%, 35%);
  text-decoration: none;
}

.footer-menus a:hover {
  font: normal 400 15px / 1 "Roboto";
  color: hsl(0, 0%, 35%);
  text-decoration: underline;
}

.reseaux-sociaux {
  padding: 20px 0 15px 0;
  width: 200px;
  display: flex;
  justify-content: space-between;
}

.reseaux-sociaux img {
  width: 35px;
  transform: scale(1);
  transition: 0.4s;
}

.reseaux-sociaux img:hover {
  width: 35px;
  transform: scale(1.1);
  transition: 0.4s;
}

.footer-conditions {
  padding-bottom: 30px;
  width: 100%;
  font: normal 400 14px / 1 "Roboto";
}

.footer-conditions .droits {
  padding: 12px 0;
  color: hsl(0, 0%, 35%);
  border-top: 1px solid hsl(0, 0%, 79%);
}

.footer-conditions .barre {
  color: hsl(0, 0%, 79%);
  font: normal 400 18px / 1 "Roboto";
}

.footer-conditions a {
  color: hsl(0, 0%, 35%);
  text-decoration: none;
}

.footer-conditions a:hover {
  color: hsl(0, 0%, 35%);
  text-decoration: underline;
}

/* - - FOOTER - - - - fin - - */

/* - - RESPONSIVE - - - - Début - - */
@media screen and (max-width: 1400px) {
  /* - Modal - début - */
  .modal-container2.acte,
  .modal-partenaires.acte,
  .modal-visiteurs.acte,
  .modal-stagiaires.acte,
  .modal-explorations.acte,
  .modal-vidos.acte {
    overflow-y: scroll;
  }

  /* - Modal - fin - */
}

@media screen and (max-width: 1366px) {
  section {
    width: 100%;
  }

  /* - - SECTION 5 - LOCALISATION - - Début - - */
  .carte-localisation {
    width: 100%;
  }

  .carte-localisation img {
    width: 950px;
  }

  /* - - SECTION 5 - LOCALISATION - - Fin - - */
  /* - - - - SECTION 6 - GEOLOCALISATION GPS - - - - Début - - - - */
  #chambres-stages6 {
    width: 100%;
  }

  #chambres-stages6 #carte-leaflet {
    width: 950px;
  }

  /* - - - - SECTION 6 - GEOLOCALISATION GPS - - - - Fin - - - - */
}

@media screen and (max-width: 1024px) {
  /* - - - - SECTION 2 - PH0TO MAISON - - Début - - */
  #chambres-stages2 .maison-mijanes {
    background-image: url(../imgs/maison-mijanes-grde.jpg);
    width: 900px;
    height: 531px;
  }

  /* - - - - SECTION 2 - PH0TO MAISON - - Fin - - */
}

@media screen and (max-width: 986px) {
  section {
    width: 100%;
  }

  /* - NAV - debut - */
  #nav-accueil {
    width: 98%;
  }

  .sous-theme-bloc01 {
    margin: 0;
    width: 92%;
  }

  .sous-theme-bloc02 {
    margin: 0;
    width: 100%;
  }

  .sous-theme-espace01,
  .sous-theme-espace02,
  .sous-theme-espace03,
  .sous-theme-espace04,
  .sous-theme-espace05,
  .sous-theme-espace06,
  .sous-theme-espace08 {
    padding: 110px 38px 50px 22px;
    width: 98%;
  }

  .sous-theme-espace07 {
    padding: 110px 21px 50px 22px;
    width: 100%;
  }

  /* - NAV - fin - */
  /* - HEADER - debut - */
  #header .header-sousmenu {
    width: 100%;
    padding: 0 20px 0 22px;
  }

  /* - HEADER - fin - */
  /* - Modal Membres - début - */
  .modal-partenaires .modal10,
  .modal-visiteurs .modal11,
  .modal-stagiaires .modal12,
  .modal-explorations .modal13,
  .modal-vidos .modal14 {
    width: 600px;
  }

  .contenu10,
  .contenu11,
  .contenu12,
  .contenu13,
  .contenu14 {
    margin: 0 auto;
    padding-bottom: 50px;
    width: 520px;
    text-align: center;
  }

  /* - Modal Membres - fin - */
  /* - Modal - Début - */
  .modal-container2 .modal2 {
    width: 630px;
  }

  .modal2 h2 {
    font: normal 400 32px / 1 "Roboto";
  }

  .modal2 h3 {
    padding-top: 8px;
    font: normal 500 50px / 1 "Roboto";
  }

  /* - Modal - fin - */

  /* - - - - SECTION 2 - PH0TO MAISON - - Début - - */
  #chambres-stages2 .maison-mijanes {
    background-image: url(../imgs/maison-mijanes-grde.jpg);
    background-size: cover;
    width: 860px;
    height: 508px;
  }

  /* - - SECTION 2 - PH0TO MAISON - - Fin - - */
  /* - - SECTION 5 - LOCALISATION - - Début - - */
  .carte-localisation img {
    width: 890px;
  }

  /* - - SECTION 5 - LOCALISATION - - Fin - - */
  /* - - SECTION 6 - GEOLOCALISATION GPS - - Début - - */
  #chambres-stages6 #carte-leaflet {
    width: 870px;
  }

  #chambres-stages6 .texte-geolocal {
    width: 870px;
  }

  /* - - SECTION 6 - GEOLOCALISATION GPS  - - Début - - */
}

@media screen and (max-width: 900px) {
  section {
    width: 100%;
  }

  /* - - - - LOADER PAGE- - - - Début - - - - */
  .loader-page {
    top: 225px;
  }

  /* - - - - LOADER PAGE- - - - Fin - - - - */
  /* - - SECTION 1 - TITRE - - Début - - */
  #chambres-stages1 h1 {
    padding: 30px 0 50px 0;
  }

  /* - - SECTION 1 - TITRE - - Fin - - */
  /* - - SECTION 2 - PH0TO MAISON - - Début - - */
  #chambres-stages2 .maison-mijanes {
    background-image: url(../imgs/maison-mijanes-petit.jpg);
    width: 728px;
    height: 430px;
  }

  /* - - SECTION 2 - PH0TO MAISON - - Fin - - */
  /* - - SECTION 3 - EXPLICATION - - Début - - */
  #chambres-stages3 .chambres-texte {
    padding: 60px 0 60px 0;
    width: 85%;
  }

  /* - - SECTION 3 - EXPLICATION - - Fin - - */
  /* - - SECTION 4 - SITUATION - - - - Début - - */
  #chambres-stages4 {
    padding: 70px 0 60px 0;
  }

  /* - - SECTION 4 - SITUATION - - - - Fin - - */
  /* - - SECTION 5 - LOCALISATION - - Début - - */
  .carte-localisation img {
    padding: 60px 0;
    width: 700px;
  }

  /* - - SECTION 6 - GEOLOCALISATION GPS - - Début - - */
  #chambres-stages6 {
    padding: 60px 0;
  }

  #chambres-stages6 #carte-leaflet {
    margin-top: 45px;
    width: 700px;
  }

  /* - FOOTER - début - */
  #pied-page {
    width: 100%;
  }

  /* - - SECTION 6 - GEOLOCALISATION GPS - - Fin - - */
  /* - FOOTER - fin - */
}

@media screen and (max-width: 768px) {
  /* - NAV MOBILE - debut - */
  /* - NAV Ecran suppression - debut - */
  .logo {
    display: none;
  }

  #navi-ecran {
    display: none;
  }

  .fond-ecran-navigation.visible {
    display: none;
  }

  #footer-mobile.active {
    display: none;
  }

  #hamburger.active {
    display: block;
  }

  #hamburger01.active {
    display: block;
  }

  #hamburger02.active {
    display: block;
  }

  #partenaires.active {
    display: block;
  }

  /* - NAV Ecran suppression - fin - */
  /* - NAV Ecran mobile - debut - */
  #navi-mobile {
    position: relative;
    width: 100%;
    top: 0;
    padding-bottom: 25px;
    background: hsl(0, 0%, 100%);
    z-index: 100;
    display: block;
  }

  #navi-mobile #navigation-mobile {
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style-type: none;
  }

  .logo-aguzou {
    position: relative;
    height: 44px;
  }

  .logo-02 {
    display: block;
  }

  .logo-02 {
    position: absolute;
    top: 0;
    padding: 12.5px 4px 2px 13px;
    opacity: 0.9;
  }

  .logo-02:hover {
    opacity: 1;
  }

  .logo-02.active {
    display: none;
  }

  .trois-logos {
    width: 171px;
    display: flex;
    justify-content: flex-end;
  }

  .trois-logos .activ-mobile02 {
    position: relative;
    height: 44px;
    padding: 0 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0.9;
  }

  .trois-logos .activ-mobile02:hover {
    opacity: 1;
  }

  .trois-logos .activ-mobile02 .ig1 {
    position: absolute;
    margin-top: 2px;
  }

  .trois-logos .activ-mobile03 {
    height: 44px;
    padding: 0 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0.9;
  }

  .trois-logos .activ-mobile03:hover {
    opacity: 1;
  }

  .trois-logos .activ-mobile03 .ig3 {
    position: absolute;
    margin-top: 1px;
  }

  .trois-logos #hamburger {
    height: 44px;
    padding: 0 20px 0 13px;
    display: flex;
    align-items: center;
    cursor: pointer;
    opacity: 0.9;
  }

  .trois-logos #hamburger:hover {
    opacity: 1;
  }

  /* - NAV Ecran mobile - fin - */

  /* - Animation Hamburger recherche - debut - */
  #hamburger01 #box01 {
    position: absolute;
    top: 0;
    right: 0;
    margin: 4.5px 20px 0 10px;
    width: 26px;
    height: 35px;
  }

  #hamburger01 #box01 .burger01 {
    position: relative;
    width: 26px;
    height: 35px;
    border: none;
    cursor: pointer;
  }

  #hamburger01 #box01 .burger01 .trait {
    position: absolute;
    width: 26px;
    height: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  #hamburger01 #box01 .burger01 .trait .trait1 {
    position: absolute;
    border-radius: 1px;
    width: 26px;
    height: 1.5px;
    background: black;
  }

  #hamburger01 #box01 .burger01 .trait .trait2 {
    position: absolute;
    border-radius: 1px;
    width: 26px;
    height: 1.5px;
    background: black;
  }

  #hamburger01 #box01 .burger01 .trait1 {
    top: 0px;
  }
  #hamburger01 #box01 .burger01 .trait2 {
    top: 10px;
  }

  #hamburger01 #box01 .b .trait1,
  #hamburger01 #box01 .b .trait2 {
    transform: rotate(0deg);
    transition: transform 0.1s ease-in-out, top 0.1s 0.1s ease-in-out;
  }

  #hamburger01 #box01 .b .trait1 {
    top: 5px;
    transform: rotate(45deg);
    transition: top 0.1s ease-in-out, transform 0.1s 0.1s ease-in-out;
  }

  #hamburger01 #box01 .b .trait2 {
    top: 5px;
    transform: rotate(-45deg);
    transition: top 0.1s ease-in-out, transform 0.1s 0.1s ease-in-out;
  }

  /* - Animation Hamburger recherche - fin - */

  /* - Animation Hamburger partenaires - debut - */
  #hamburger02 #box02 {
    position: absolute;
    top: 0;
    right: 0;
    margin: 4.5px 20px 0 10px;
    width: 26px;
    height: 35px;
  }

  #hamburger02 #box02 #burger02 {
    position: relative;
    width: 26px;
    height: 35px;
    border: none;
    cursor: pointer;
  }

  #hamburger02 #box02 .burger02 .trait {
    position: absolute;
    width: 26px;
    height: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  #hamburger02 #box02 .burger02 .trait .trait1 {
    position: absolute;
    border-radius: 1px;
    width: 26px;
    height: 1.5px;
    background: black;
  }

  #hamburger02 #box02 .burger02 .trait .trait2 {
    position: absolute;
    border-radius: 1px;
    width: 26px;
    height: 1.5px;
    background: black;
  }

  #hamburger02 #box02 .burger02 .trait1 {
    top: 0px;
  }
  #hamburger02 #box02 .burger02 .trait2 {
    top: 10px;
  }

  #hamburger02 #box02 .b .trait1,
  #hamburger02 #box02 .b .trait2 {
    transform: rotate(0deg);
    transition: transform 0.1s ease-in-out, top 0.1s 0.1s ease-in-out;
  }

  #hamburger02 #box02 .b .trait1 {
    top: 5px;
    transform: rotate(45deg);
    transition: top 0.1s ease-in-out, transform 0.1s 0.1s ease-in-out;
  }

  #hamburger02 #box02 .b .trait2 {
    top: 5px;
    transform: rotate(-45deg);
    transition: top 0.1s ease-in-out, transform 0.1s 0.1s ease-in-out;
  }

  /* - Animation Hamburger partenaires - fin - */

  /* - Animation Hamburger menu - debut - */
  #hamburger #box {
    width: 26px;
    height: 35px;
  }

  #hamburger #box.active {
    display: none;
  }

  #hamburger #box .burger {
    position: relative;
    width: 26px;
    height: 35px;
    border: none;
    cursor: pointer;
  }

  #hamburger #box .burger .trait {
    position: absolute;
    width: 26px;
    height: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  #hamburger #box .burger .trait .trait1 {
    position: absolute;
    border-radius: 1px;
    width: 26px;
    height: 1.5px;
    background: black;
  }

  #hamburger #box .burger .trait .trait2 {
    position: absolute;
    border-radius: 1px;
    width: 26px;
    height: 1.5px;
    background: black;
  }

  #hamburger #box .burger .trait1 {
    top: 0px;
  }
  #hamburger #box .burger .trait2 {
    top: 10px;
  }

  #hamburger #box .b .trait1,
  #hamburger #box .b .trait2 {
    transform: rotate(0deg);
    transition: transform 0.1s ease-in-out, top 0.1s 0.1s ease-in-out;
  }

  #hamburger #box .b.active .trait1 {
    top: 5px;
    transform: rotate(45deg);
    transition: top 0.1s ease-in-out, transform 0.1s 0.1s ease-in-out;
  }

  #hamburger #box .b.active .trait2 {
    top: 5px;
    transform: rotate(-45deg);
    transition: top 0.1s ease-in-out, transform 0.1s 0.1s ease-in-out;
  }

  /* - Animation Hamburger menu - fin - */

  /* - - - - Superposition Burger - debut - - - */
  #burger .trait {
    display: block;
  }

  #burger01 .trait {
    display: block;
  }

  #burger02 .trait {
    display: block;
  }

  /* - - - - Superposition Burger - fin - - - */
  #navi-mobile.active {
    position: absolute;
    width: 100%;
    min-height: 100vh;
    top: 0;
    text-align: left;
    background: hsl(0, 0%, 100%);
    display: block;
  }

  .activ-mobile02.active {
    display: none;
  }

  .activ-mobile03.active {
    display: none;
  }

  #header.active {
    transition: 0.3s;
    display: none;
  }

  #main.active {
    transition: 0.3s;
    display: none;
  }

  #footer-mobile.active {
    transition: 0.3s;
    display: none;
  }

  /* - NAV - fin - */
  /* - - Menu recherche - Mobile - debut - */
  #recherche {
    position: absolute;
    width: 100%;
    min-height: 100vh;
    top: 44px;
    background-color: hsl(0, 0%, 100%);
    text-align: left;
    opacity: 0;
  }

  #recherche.active {
    background-color: hsl(0, 0%, 100%);
    top: 44px;
    animation: expension 0.6s ease-in-out;
    opacity: 1;
    display: block;
    z-index: 100;
  }

  @keyframes expension {
    0% {
      opacity: 0;
      transform: scaleY(0.9);
    }

    100% {
      opacity: 1;
      transform: scaleY(1);
    }
  }

  #recherche .list-rechercher-mobile {
    padding: 0 18px 0 45px;
    width: 100%;
  }

  #recherche .list-rechercher-mobile .noir-rechercher-texte {
    margin: 0 auto;
    top: 0;
    width: 100%;
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #recherche .list-rechercher-mobile .noir-rechercher-texte input {
    margin: 0 auto;
    outline: none;
    border: none;
    width: 100%;
    height: 40px;
    color: hsl(0, 0%, 20%);
    font: normal 400 29px / 1.1 "Roboto";
    background: none;
  }

  #recherche .list-rechercher-mobile .noir-rechercher-texte input::placeholder {
    color: hsl(0, 0%, 35%);
  }

  .icone-rond-rechercher-mobile {
    width: 35px;
    height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
  }

  .icone-rond-rechercher-mobile .ig1 {
    height: 20px;
    opacity: 0.7;
  }

  .icone-rond-rechercher-mobile .ig1:hover {
    opacity: 1;
  }

  .menu-rechercher {
    width: 100%;
  }

  .menu-rechercher-bloc {
    margin-top: 0;
  }

  .menu-rechercher-titre {
    padding: 0 0 8px 0;
    font: normal 300 17px / 1.1 "Roboto";
    color: hsl(0, 0%, 50%);
  }

  .menu-rechercher-texte {
    width: 100%;
  }

  .menu-rechercher-texte a {
    text-decoration: none;
  }

  .menu-rechercher-texte a span {
    padding: 0 10px 0 10px;
    opacity: 0.5;
  }

  .menu-rechercher-texte a:hover span {
    opacity: 1;
  }

  .menu-rechercher-texte p {
    margin: 5px 0 5px -10px;
    padding: 6px 0 6px 0;
    font: normal 400 18px / 1.1 "Roboto";
    color: hsl(0, 0%, 15%);
    text-decoration: none;
  }

  .menu-rechercher-texte p:hover {
    background-color: hsl(0, 0%, 95%);
    color: hsl(0, 0%, 0%);
    border-radius: 5px;
  }

  #deroule-liste-texte-mobile {
    width: 100%;
    text-decoration: none;
  }

  #deroule-liste-mobile {
    padding: 10px 0 25px 0;
    text-decoration: none;
  }

  #deroule-liste-texte-mobile p {
    margin: 5px 0 5px -10px;
    padding: 6px 0 6px 0;
    font: normal 400 18px / 1.1 "Roboto";
    color: hsl(0, 0%, 15%);
  }

  #deroule-liste-texte-mobile p:hover {
    background-color: hsl(0, 0%, 95%);
    color: hsl(0, 0%, 0%);
    border-radius: 5px;
  }

  #deroule-liste-texte-mobile p span {
    padding: 0 10px 0 10px;
    opacity: 0.5;
  }

  #deroule-liste-texte-mobile p:hover span {
    opacity: 1;
  }

  /* - - Menu recherche - Mobile - fin - */

  /* - - Menu - Partenaires - Mobile - debut - */
  #partenaires {
    position: absolute;
    width: 100%;
    min-height: 100vh;
    top: 44px;
    background-color: hsl(0, 0%, 100%);
    text-align: left;
    opacity: 0;
  }

  #partenaires.active {
    background-color: hsl(0, 0%, 100%);
    top: 44px;
    animation: expension 0.6s ease-in-out;
    opacity: 1;
    display: block;
    z-index: 100;
  }

  @keyframes expension {
    0% {
      opacity: 0;
      transform: scaleY(0.9);
    }

    100% {
      opacity: 1;
      transform: scaleY(1);
    }
  }

  #partenaires .bloc-partenaires {
    padding: 0 20px 0 45px;
    margin: 0 auto;
    margin-top: 10px;
    width: 100%;
  }

  #partenaires .bloc-partenaires .normal {
    padding: 8px 0 14px 0;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  #partenaires .bloc-partenaires .normal img {
    height: 21px;
  }

  #partenaires .bloc-partenaires .normal .sous-theme-juste {
    padding: 0 0 0 13px;
    color: hsl(0, 0%, 22%);
    font: normal 400 26px / 1.1 "Roboto";
  }

  #partenaires .bloc-partenaires .normal .sous-theme-juste:hover {
    color: hsl(0, 0%, 0%);
  }

  /* - - Menu - Partenaires - Mobile - - fin - */

  /* - - Menu nav - Mobile - debut - */
  #navbar {
    position: absolute;
    width: 100%;
    min-height: 100vh;
    top: 44px;
    background-color: hsl(0, 0%, 100%);
    text-align: left;
    opacity: 0;
  }

  #navbar.active {
    background-color: hsl(0, 0%, 100%);
    top: 44px;
    animation: expension 0.6s ease-in-out;
    opacity: 1;
    display: block;
    z-index: 100;
  }

  @keyframes expension {
    0% {
      opacity: 0;
      transform: scaleY(0.9);
    }

    100% {
      opacity: 1;
      transform: scaleY(1);
    }
  }

  #navbar ul {
    margin: 0 auto;
    margin-top: 10px;
    width: 100%;
  }

  #navbar li {
    padding: 0 20px 0 45px;
    height: 56px;
    line-height: 56px;
    list-style: none;
  }

  #navbar .menu-mobile01,
  #navbar .menu-mobile02,
  #navbar .menu-mobile03,
  #navbar .menu-mobile04,
  #navbar .menu-mobile05,
  #navbar .menu-mobile06 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: hsl(0, 0%, 20%);
    font: normal 450 30px / 1.1 "Roboto";
    cursor: pointer;
  }

  #navbar .menu-mobile01:hover,
  #navbar .menu-mobile02:hover,
  #navbar .menu-mobile03:hover,
  #navbar .menu-mobile04:hover,
  #navbar .menu-mobile05:hover,
  #navbar .menu-mobile06:hover {
    color: hsl(0, 0%, 0%);
  }

  /* - - Menu nav - Mobile - - fin - */
  /* - - Menu deroule - Mobile - - debut - */
  .fleche-visites-gauche.active,
  .fleche-stages-gauche.active,
  .fleche-photos-gauche.active,
  .fleche-videos-gauche.active,
  .fleche-cristaux-gauche.active,
  .fleche-contact-gauche.active {
    position: absolute;
    top: 0;
    padding: 14px 14px 10px 17px;
    display: block;
    z-index: 100;
    cursor: pointer;
  }

  #navbar-visites,
  #navbar-stages,
  #navbar-photos,
  #navbar-videos,
  #navbar-cristaux,
  #navbar-contact {
    position: absolute;
    width: 100%;
    min-height: 100vh;
    top: 44px;
    background-color: hsl(0, 0%, 100%);
    text-align: left;
    z-index: 100;
    opacity: 0;
  }

  #navbar-visites.active,
  #navbar-stages.active,
  #navbar-photos.active,
  #navbar-videos.active,
  #navbar-cristaux.active,
  #navbar-contact.active {
    background-color: hsl(0, 0%, 100%);
    top: 44px;
    animation: etirement 0.5s ease-in-out;
    opacity: 1;
    z-index: 100;
    display: block;
  }

  @keyframes etirement {
    0% {
      opacity: 0;
      transform: scaleX(0.9);
    }

    100% {
      opacity: 1;
      transform: scaleX(1);
    }
  }

  #navbar-visites .sous-menu-visites,
  #navbar-stages .sous-menu-stages,
  #navbar-photos .sous-menu-photos,
  #navbar-videos .sous-menu-videos,
  #navbar-cristaux .sous-menu-cristaux,
  #navbar-contact .sous-menu-contact {
    margin: 0 auto;
    margin-top: 10px;
    width: 100%;
  }

  #navbar-visites .sous-menu-visites .sous-visites-list,
  #navbar-stages .sous-menu-stages .sous-stages-list,
  #navbar-photos .sous-menu-photos .sous-photos-list,
  #navbar-videos .sous-menu-videos .sous-videos-list,
  #navbar-cristaux .sous-menu-cristaux .sous-cristaux-list,
  #navbar-contact .sous-menu-contact .sous-contact-list {
    margin: 0 0 30px 0;
    padding: 0 20px 0 45px;
  }

  #navbar-visites .sous-menu-visites .sous-visites-list .gras,
  #navbar-stages .sous-menu-stages .sous-stages-list .gras,
  #navbar-photos .sous-menu-photos .sous-photos-list .gras,
  #navbar-videos .sous-menu-videos .sous-videos-list .gras,
  #navbar-cristaux .sous-menu-cristaux .sous-cristaux-list .gras,
  #navbar-contact .sous-menu-contact .sous-contact-list .gras {
    padding: 8px 0;
  }

  #navbar-visites .sous-menu-visites .sous-visites-list .sous-theme-gras,
  #navbar-stages .sous-menu-stages .sous-stages-list .sous-theme-gras,
  #navbar-photos .sous-menu-photos .sous-photos-list .sous-theme-gras,
  #navbar-videos .sous-menu-videos .sous-videos-list .sous-theme-gras,
  #navbar-cristaux .sous-menu-cristaux .sous-cristaux-list .sous-theme-gras,
  #navbar-contact .sous-menu-contact .sous-contact-list .sous-theme-gras {
    padding: 8px 10px 8px 0;
    text-decoration: none;
    color: hsl(0, 0%, 20%);
    font: normal 400 30px / 1.1 "Roboto";
  }

  #navbar-visites .sous-menu-visites .sous-visites-list .sous-theme-gras:hover,
  #navbar-stages .sous-menu-stages .sous-stages-list .sous-theme-gras:hover,
  #navbar-photos .sous-menu-photos .sous-photos-list .sous-theme-gras:hover,
  #navbar-videos .sous-menu-videos .sous-videos-list .sous-theme-gras:hover,
  #navbar-cristaux
    .sous-menu-cristaux
    .sous-cristaux-list
    .sous-theme-gras:hover,
  #navbar-contact .sous-menu-contact .sous-contact-list .sous-theme-gras:hover {
    color: hsl(0, 0%, 0%);
  }

  #navbar-visites .sous-menu-visites .sous-visites-list .maigre,
  #navbar-stages .sous-menu-stages .sous-stages-list .maigre,
  #navbar-photos .sous-menu-photos .sous-photos-list .maigre,
  #navbar-videos .sous-menu-videos .sous-videos-list .maigre,
  #navbar-cristaux .sous-menu-cristaux .sous-cristaux-list .maigre,
  #navbar-contact .sous-menu-contact .sous-contact-list .maigre {
    padding: 8px 0;
  }

  #navbar-visites .sous-menu-visites .sous-visites-list .sous-theme-petit,
  #navbar-stages .sous-menu-stages .sous-stages-list .sous-theme-petit,
  #navbar-photos .sous-menu-photos .sous-photos-list .sous-theme-petit,
  #navbar-videos .sous-menu-videos .sous-videos-list .sous-theme-petit,
  #navbar-cristaux .sous-menu-cristaux .sous-cristaux-list .sous-theme-petit,
  #navbar-contact .sous-menu-contact .sous-contact-list .sous-theme-petit {
    padding: 6px 10px 11px 0;
    text-decoration: none;
    color: hsl(0, 0%, 0%);
    font: normal 400 18px / 1.1 "Roboto";
  }

  #navbar-visites .sous-menu-visites .sous-visites-list h4,
  #navbar-stages .sous-menu-stages .sous-stages-list h4,
  #navbar-photos .sous-menu-photos .sous-photos-list h4,
  #navbar-videos .sous-menu-videos .sous-videos-list h4,
  #navbar-cristaux .sous-menu-cristaux .sous-cristaux-list h4,
  #navbar-contact .sous-menu-contact .sous-contact-list h4 {
    font: normal 300 17px / 1.1 "Roboto";
    color: hsl(0, 0%, 50%);
  }

  #navbar-visites .sous-menu-visites .sous-visites-list .decalage,
  #navbar-stages .sous-menu-stages .sous-stages-list .decalage,
  #navbar-photos .sous-menu-photos .sous-photos-list .decalage,
  #navbar-videos .sous-menu-videos .sous-videos-list .decalage,
  #navbar-cristaux .sous-menu-cristaux .sous-cristaux-list .decalage,
  #navbar-contact .sous-menu-contact .sous-contact-list .decalage {
    padding: 25px 0 20px 0;
  }

  /* - - Menu deroule - Mobile - - fin - */
  /* - NAV MOBILE - fin - */

  /* - - - - LOADER PAGE - - - - Début - - - - */
  .loader-page {
    top: 210px;
  }

  /* - - - - LOADER PAGE - - - - Fin - - - - */

  /* - - Header - Mobile - - debut - */
  #header {
    width: 100%;
    height: 62px;
    background-color: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
  }

  #header .header-menu .ab1,
  .ab2,
  .ab3,
  .ab4 {
    display: none;
  }

  #header .header-sousmenu {
    width: 100%;
    height: 62px;
    padding: 0 19px 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: hsla(0, 0%, 100%, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid #c9c9c9;
  }

  #header .header-sousmenu .menu-demi-journee {
    font: normal 500 19px / 1 "Roboto";
    display: block;
  }

  #header .header-sousmenu.active {
    background-color: rgb(255, 255, 255);
    border-bottom: 1px solid rgb(255, 255, 255);
  }

  #header .header-sousmenu .header-menu {
    width: 0;
    justify-content: flex-end;
  }

  .header-menu .lien-reserv-jour .btn-reserv1 {
    padding: 9px 10px 9px 10px;
    font: normal 400 15px / 1 "Roboto", sans-serif;
  }

  #direction {
    margin: 0 25px;
    width: 28px;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  #direction .boite {
    padding-bottom: 5%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: top 300ms 80ms ease, transform 300ms ease;
  }

  #direction .boite.active {
    transform: translateY(-14%);
    transition: top 300ms 80ms ease, transform 300ms ease;
  }

  #direction .boite span .trace1 {
    transform: rotate(38deg) translateX(0.35px) translateY(0.35px);
    transform-origin: right;
    transition: top 300ms 80ms ease, transform 300ms ease;
  }

  #direction .boite span .trace2 {
    transform: rotate(-38deg) translateX(-0.35px) translateY(0.35px);
    transform-origin: left;
    transition: top 300ms 80ms ease, transform 300ms ease;
  }

  #direction .boite.active span .trace1 {
    transform-origin: right;
    transform: rotate(-38deg) translateX(0) translateY(0.35px);
    transition: bottom 300ms ease, transform 300ms ease;
  }

  #direction .boite.active span .trace2 {
    transform-origin: left;
    transform: rotate(38deg) translateX(0) translateY(0.35px);
    transition: bottom 300ms ease, transform 300ms ease;
  }

  /* Sous-menu descendre - mobile - début */
  .sous-menu-mobile1 .cd {
    margin: 30px 0 0 0;
  }

  .sous-menu-mobile1 ul li {
    padding: 15px 0;
    list-style-type: none;
  }

  .sous-menu-mobile1 .cd a {
    text-decoration: none;
    font: normal 400 16px / 1 "Roboto";
    color: black;
  }

  .sous-menu-mobile1 .cd .cd4 {
    padding: 0 0 0 18px;
    height: 14px;
    margin: 0 18px 30px 18px;
    display: flex;
    align-items: center;
    font: normal 400 16px / 1 "Roboto";
    color: hsl(0, 0%, 0%);
    border-left: 1px solid hsl(0, 0%, 0%);
    cursor: default;
  }

  .sous-menu-mobile1 .cd .cd1,
  .sous-menu-mobile1 .cd .cd2,
  .sous-menu-mobile1 .cd .cd3 {
    padding: 0 0 0 18px;
    height: 14px;
    margin: 0 18px 30px 18px;
    display: flex;
    align-items: center;
    font: normal 400 16px / 1 "Roboto";
    color: hsl(0, 0%, 35%);
  }

  .sous-menu-mobile1 .cd .cd1:hover,
  .sous-menu-mobile1 .cd .cd2:hover,
  .sous-menu-mobile1 .cd .cd2:hover {
    color: hsl(0, 0%, 10%);
  }

  .sous-menu-mobile1 {
    position: absolute;
    padding: 20px 0 10px 0;
    margin: 0 auto;
    width: 100%;
    top: 0;
    display: flex;
    flex-direction: column;
    background-color: rgb(255, 255, 255);
    display: none;
    z-index: -10;
    border-bottom: 1px solid #c9c9c9;
    animation: descendre 0.7s ease-in-out forwards;
  }

  @keyframes descendre {
    0% {
      opacity: 0;
      visibility: hidden;
      transform: translateY(52px);
      transform: scaleY(0.2);
      transform-origin: top;
    }

    98% {
      opacity: 0.9;
      visibility: visible;
    }

    100% {
      opacity: 1;
      visibility: visible;
      transform: translateY(32px);
    }
  }

  .sous-menu-mobile1.active {
    display: block;
  }

  #fond-sousmenu-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: hsla(0, 0%, 0%, 0.4);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 10;
    display: none;
    animation: fondu 0.4s ease-in-out forwards;
  }

  @keyframes fondu {
    0% {
      opacity: 0;
      visibility: hidden;
      transform: translateY(0px);
    }

    100% {
      opacity: 1;
      visibility: visible;
      transform: translateY(0px);
    }
  }

  #fond-sousmenu-mobile.active {
    display: block;
  }

  /* Sous-menu descendre - mobile - fin */
  /* - - Header - Mobile- - fin - */
  section {
    width: 100%;
  }

  /* - - SECTION 1 - TITRE - - Début - - */
  #chambres-stages1 h1 {
    padding: 20px 0 40px 0;
  }

  /* - - SECTION 1 - TITRE - - Fin - - */
  /* - - SECTION 2 - PH0TO MAISON - - Début - - */
  #chambres-stages2 {
    margin: 0 auto;
    padding: 50px 0 50px 0;
  }

  /* - - SECTION 2 - PH0TO MAISON - - Fin - - */
  /* - - SECTION 3 - EXPLICATION - - Début - - */
  #chambres-stages3 {
    width: 100%;
  }

  #chambres-stages3 .chambres-texte {
    padding: 50px 0 50px 0;
  }

  #chambres-stages3 .chambres-texte p {
    font: normal 500 23px / 1.5 "Roboto";
  }

  /* - - SECTION 3 - EXPLICATION - - Fin - - */
  /* - - SECTION 4 - SITUATION - - - - Début - - */
  #chambres-stages4 {
    width: 100%;
    padding: 70px 0 60px 0;
  }

  #chambres-stages4 .carte-situation img {
    border-radius: 10px;
  }

  #chambres-stages4 .texte-situation {
    padding-top: 50px;
  }

  #chambres-stages4 .texte-situation .situation1 {
    padding-bottom: 40px;
  }

  #chambres-stages4 .texte-situation .situation2 {
    padding-top: 40px;
  }

  #chambres-stages4 .texte-situation .situation1 .distances1 .adresse {
    font: normal 425 21px / 1.5 "Roboto";
  }

  #chambres-stages4 .texte-situation .adress {
    font: normal 450 25px / 1.6 "Roboto";
  }

  #chambres-stages4 .texte-situation p {
    font: normal 400 20px / 1.9 "Roboto";
  }

  /* - - SECTION 4 - SITUATION - - - - Fin - - */
  /* - - SECTION 5 - LOCALISATION - - Début - - */
  .carte-localisation img {
    padding: 60px 0;
    /* width: 100%; */
  }

  /* - - SECTION 5 - LOCALISATION - - Fin - - */
  /* - - SECTION 6 - GEOLOCALISATION GPS - - Début - - */
  #chambres-stages6 {
    width: 100%;
    padding: 50px 0;
  }

  #chambres-stages6 .geolocal {
    /* margin-top: 50px; */
    font: normal 500 35px / 1 "Roboto";
  }

  #chambres-stages6 #carte-leaflet {
    margin-top: 35px;
    width: 90%;
    height: 550px;
    border-radius: 10px;
  }

  #chambres-stages6 .itineraire a {
    font: normal 400 20px / 1.4 "Roboto";
  }

  /* - - SECTION 6 - GEOLOCALISATION GPS - - Fin - - */
  /* Footer mobile - début */
  footer {
    display: none;
  }

  #footer-mobile {
    margin: 0 auto;
    width: 100%;
    display: block;
    background-color: hsl(0, 0%, 96%);
  }

  #footer-mobile #boite {
    padding: 0 15px 0 15px;
  }

  .footer-mobile-chemin img {
    height: 15px;
    padding: 0 13px;
  }

  .footer-mobile-chemin p {
    padding: 5px 0;
  }

  #footer-mobile .footer-mobile-chemin {
    margin: 0 15px;
    padding: 35px 0 30px 0;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    font: normal 400 15px / 1 "Roboto";
    color: hsl(0, 0%, 0%);
    align-items: center;
  }

  #footer-mobile .footer-mobile-chemin {
    font: normal 400 15px / 1 "Roboto";
    color: hsl(0, 0%, 0%);
  }

  #footer-mobile .footer-mobile-chemin .accueil {
    font: normal 400 15px / 1 "Roboto";
    color: hsl(0, 0%, 0%);
    text-decoration: none;
  }

  #footer-mobile .footer-mobile-chemin .accueil:hover {
    text-decoration: underline;
  }

  #footer-mobile .footer-mobile-chemin .footer-chemin-actif {
    font: normal 400 15px / 1 "Roboto";
    color: hsl(0, 0%, 0%);
    text-decoration: none;
  }

  #footer-mobile .footer-mobile-chemin .footer-chemin-actif:hover {
    text-decoration: underline;
  }

  #boite .boite-liste .tete {
    padding: 12px 0;
    border-top: 1px solid hsl(0, 0%, 79%);
    display: flex;
    justify-content: space-between;
    cursor: pointer;
  }

  #boite .boite-liste .tete p {
    font: normal 400 15.5px / 1 "Roboto";
    color: hsl(0, 0%, 0%);
  }

  #boite .boite-liste .tete img {
    margin-right: 10px;
  }

  #men1,
  #men2,
  #men3,
  #men4,
  #men5 {
    margin: 10px 0 13px 10px;
    padding: 0;
  }

  .men {
    display: none;
    animation: rouler 0.4s ease-in-out forwards;
  }

  @keyframes rouler {
    0% {
      opacity: 0;
      visibility: hidden;
      transform: translateY(-45px);
    }

    98% {
      opacity: 1;
      visibility: visible;
    }

    100% {
      opacity: 1;
      visibility: visible;
      transform: translateY(0%);
    }
  }

  .men a p {
    padding-bottom: 15px;
    color: hsl(0, 0%, 35%);
    font: normal 400 15px / 1 "Roboto";
  }

  .men a {
    margin: 0;
    text-decoration: none;
  }

  .men a:hover {
    text-decoration: underline;
    color: hsl(0, 0%, 35%);
  }

  .afficheMen {
    display: block;
  }

  .croix {
    transition: top 200ms ease, transform 200ms ease;
  }

  .active .croix {
    transform: rotate(45deg);
    transition: top 200ms ease, transform 200ms ease;
  }

  .sociaux-mobile {
    padding: 50px 0 10px 0;
    width: 220px;
    display: flex;
    justify-content: space-between;
  }

  .sociaux-mobile img {
    width: 40px;
  }

  .footer-mobile-conditions {
    margin-top: 35px;
    padding-bottom: 30px;
    font: normal 400 14.5px / 1.5 "Roboto";
  }

  .footer-mobile-conditions .droits-mobile {
    padding: 12px 0;
    border-top: 1px solid hsl(0, 0%, 79%);
  }

  .footer-mobile-conditions .droits-mobile .droits-mobile-texte {
    display: inline-block;
    color: hsl(0, 0%, 35%);
  }

  .conditions-mobile span {
    display: inline-block;
  }

  .footer-mobile-conditions .conditions-mobile .barre {
    color: hsl(0, 0%, 79%);
    font: normal 400 16px / 1 "Roboto";
  }

  .footer-mobile-conditions .conditions-mobile a span {
    color: hsl(0, 0%, 35%);
  }

  .footer-mobile-conditions .conditions-mobile span {
    color: hsl(0, 0%, 35%);
    text-decoration: none;
  }

  .footer-mobile-conditions .conditions-mobile span:hover {
    text-decoration: underline;
    color: hsl(0, 0%, 35%);
  }

  /* Footer mobile - fin */
}

@media screen and (max-width: 767px) {
  /* - - SECTION 2 - PH0TO MAISON - - Début - - */
  #chambres-stages2 .maison-mijanes {
    background-image: url(../imgs/maison-mijanes-mini.jpg);
    width: 520px;
    height: 307px;
  }

  /* - - SECTION 2 - PH0TO MAISON - - Fin - - */
  /* - - SECTION 4 - SITUATION - - - - Début - - */
  #chambres-stages4 {
    width: 100%;
  }

  #chambres-stages4 .carte-situation {
    width: 100%;
  }

  #chambres-stages4 .carte-situation img {
    width: 90%;
  }

  #chambres-stages4 .texte-situation {
    padding-top: 30px;
    margin: 0 auto;
    width: 90%;
  }

  #chambres-stages4 .texte-situation .situation1 {
    /* margin: 0 auto; */
    width: 100%;
    padding-top: 20px;
    padding-bottom: 0;
    flex-direction: column;
    border-bottom: none;
  }

  #chambres-stages4 .texte-situation .situation2 {
    /* margin: 0 auto; */
    width: 100%;
    padding-top: 40px;
    flex-direction: column;
  }

  #chambres-stages4 .texte-situation .situation1 .distances1 {
    padding-top: 20px;
  }

  #chambres-stages4 .texte-situation .situation1 .distances1 .adresse {
    font: normal 425 20px / 1.6 "Roboto";
  }

  #chambres-stages4 .texte-situation .situation2 .distances2 {
    padding-top: 20px;
    flex-direction: column;
  }

  #chambres-stages4 .texte-situation .adress {
    padding-bottom: 12px;
    width: 100%;
    font: normal 450 24px / 1.6 "Roboto";
    border-bottom: 1px solid hsl(0, 0%, 77%);
  }

  #chambres-stages4 .texte-situation p {
    margin-left: 0;
    padding-bottom: 10px;
    font: normal 400 20px / 1.5 "Roboto";
  }

  /* - - SECTION 4 - SITUATION - - - - Fin - - */
  /* - - SECTION 5 - LOCALISATION - - Début - - */
  #chambres-stages5 .carte-localisation img {
    width: 96%;
  }

  /* - - SECTION 5 - LOCALISATION - - Fin - - */
}

@media screen and (max-width: 650px) {
  /* - Modal - Début - */
  .modal-container2 .overlay2 {
    background: hsl(0, 0%, 93%);
  }

  .modal-container2.acte .overlay2 {
    height: 100%;
    transition: opacity 0.3s ease-out;
    opacity: 1;
  }

  .modal-container2 .modal2 {
    top: 385px;
    margin: 0 auto;
    width: 100%;
    height: 770px;
    border-radius: 0;
  }

  .contenu2 {
    width: 85%;
  }

  .modal2 h2 {
    font: normal 400 27px / 1 "Roboto";
  }

  .modal2 h3 {
    padding-top: 0;
    font: normal 500 45px / 1 "Roboto";
  }

  .modal2 .heure {
    padding-top: 10px;
  }

  .modal2 .telephone {
    margin-top: 25px;
  }

  /* - Modal - fin - */
  /* - Modal - Membres Début - */
  .modal-partenaires .overlay10,
  .modal-visiteurs .overlay11,
  .modal-stagiaires .overlay12,
  .modal-explorations .overlay13,
  .modal-vidos .overlay14 {
    background: hsl(0, 0%, 93%);
  }

  .modal-partenaires.acte .overlay10,
  .modal-visiteurs.acte .overlay11,
  .modal-stagiaires.acte .overlay12,
  .modal-explorations.acte .overlay13,
  .modal-vidos.acte .overlay14 {
    height: 100%;
    transition: opacity 0.3s ease-out;
    opacity: 1;
  }

  .modal-partenaires .modal10,
  .modal-visiteurs .modal11,
  .modal-stagiaires .modal12,
  .modal-explorations .modal13,
  .modal-vidos .modal14 {
    top: 200px;
    margin: 0 auto;
    width: 100%;
    height: 410px;
    background: hsl(0, 0%, 93%);
    border-radius: 0;
  }

  .contenu10,
  .contenu11,
  .contenu12,
  .contenu13,
  .contenu14 {
    width: 85%;
  }

  .modal10 .titres h2,
  .modal11 .titres h2,
  .modal12 .titres h2,
  .modal13 .titres h2,
  .modal14 .titres h2 {
    padding: 30px 0 30px 0;
  }

  /* - Modal - membres fin - */
}

@media screen and (max-width: 520px) {
  /* - - - - LOADER PAGE- - - - Début - - - - */
  .loader-page {
    top: 200px;
  }

  /* - - - - LOADER PAGE- - - - Fin - - - - */
  /* - - SECTION 1 - TITRE - - Début - - */
  #chambres-stages1 h1 {
    padding: 15px 0 30px 0;
    width: 100%;
    font: normal 500 45px / 1.2 "Roboto";
  }

  /* - Modal - Début - */
  .modal2 h2 {
    font: normal 400 27px / 1 "Roboto";
  }

  .close-modal2 img {
    height: 26px;
  }

  .modal2 h3 {
    padding-top: 15px;
    font: normal 550 37px / 1.1 "Roboto";
  }

  .modal2 .tarif {
    font: normal 400 23px / 1 "Roboto";
  }

  .modal2 .heure {
    font: normal 400 21px / 1.4 "Roboto";
  }

  .modal2 .inscrire {
    padding-top: 30px;
    font: normal 400 20px / 1.4 "Roboto";
  }

  /* - Modal - fin - */
  /* - Modal membres - Début - */
  .close-modal10,
  .close-modal11,
  .close-modal12,
  .close-modal13,
  .close-modal14 {
    width: 100%;
  }

  .close-modal10 img,
  .close-modal11 img,
  .close-modal12 img,
  .close-modal13 img,
  .close-modal14 img {
    height: 26px;
    padding-right: 5%;
  }

  .contenu10,
  .contenu11,
  .contenu12,
  .contenu13,
  .contenu14 {
    width: 90%;
  }

  .modal10 .titres h2,
  .modal11 .titres h2,
  .modal12 .titres h2,
  .modal13 .titres h2,
  .modal14 .titres h2 {
    font: normal 350 36px / 1.1 "Roboto";
  }

  .modal10 .membres-part,
  .modal11 .membres-visit,
  .modal12 .membres-stag,
  .modal13 .membres-explo,
  .modal14 .membres-video {
    padding-top: 30px;
    font: normal 400 21px / 1.3 "Roboto";
  }

  /* - Modal - membres fin - */
  /* - - SECTION 1 - TITRE - - Fin - - */
  /* - - SECTION 2 - PH0TO MAISON - - Début - - */
  #chambres-stages2 {
    padding: 40px 0 40px 0;
  }

  #chambres-stages2 .maison-mijanes {
    background-image: url(../imgs/maison-mijanes-puce.jpg);
    width: 460px;
    height: 272px;
    border-radius: 8px;
  }

  /* - - SECTION 2 - PH0TO MAISON - - Fin - - */
  /* - - SECTION 3 - EXPLICATION - - Début - - */
  #chambres-stages3 {
    width: 100%;
  }

  #chambres-stages3 .chambres-texte {
    padding: 40px 0 40px 0;
    width: 90%;
  }

  /* - - SECTION 3 - EXPLICATION - - Fin - - */
  /* - - SECTION 4 - SITUATION - - - - Début - - */
  #chambres-stages4 {
    padding: 60px 0 40px 0;
  }

  #chambres-stages4 .texte-situation {
    padding-top: 20px;
  }

  /* - - SECTION 4 - SITUATION - - - - FIN - - */
  /* - - SECTION 5 - LOCALISATION - - Début - - */
  .carte-localisation img {
    padding: 40px 0;
  }

  /* - - SECTION 5 - LOCALISATION - - Fin - - */
  /* - - SECTION 6 - GEOLOCALISATION GPS - - Début - - */
  #chambres-stages6 {
    padding: 40px 0;
  }

  #chambres-stages6 .itineraire {
    padding: 30px 0 0 0;
  }

  /* - - SECTION 6 - GEOLOCALISATION GPS - - Fin - - */
  /* - - - - SECTION 7 - TEXTE GEOLOCALISATION - - Début - - */
  #chambres-stages7 .texte-geolocal {
    border-radius: 10px;
  }

  /* - - - - SECTION 7 - TEXTE GEOLOCALISATION - - Fin - - */
}

@media screen and (max-width: 460px) {
  /* - - - - LOADER PAGE- - - - Début - - - - */
  .loader-page {
    top: 190px;
  }

  /* - - - - LOADER PAGE- - - - Fin - - - - */
  /* - - SECTION 1 - TITRE - - Début - - */
  #chambres-stages1 h1 {
    padding: 10px 0 20px 0;
    font: normal 500 45px / 1.2 "Roboto";
  }

  /* - - SECTION 1 - TITRE - - Fin - - */
  /* - - SECTION 2 - PH0TO MAISON - - Début - - */
  #chambres-stages2 {
    padding: 15px 0 15px 0;
  }

  #chambres-stages2 .maison-mijanes {
    background-image: url(../imgs/maison-mijanes-puce.jpg);
    width: 360px;
    height: 213px;
  }

  /* - - SECTION 2 - PH0TO MAISON - - Fin - - */
  /* - - SECTION 3 - EXPLICATION - - Début - - */
  #chambres-stages3 .chambres-texte {
    padding: 30px 0 30px 0;
    width: 90%;
  }

  #chambres-stages3 .chambres-texte p {
    font: normal 500 22px / 1.4 "Roboto";
  }

  /* - - SECTION 3 - EXPLICATION - - Fin - - */
  /* - - SECTION 4 - SITUATION - - - - Début - - */
  #chambres-stages4 {
    padding: 50px 0 40px 0;
  }

  #chambres-stages4 .texte-situation {
    padding-top: 0px;
  }

  #chambres-stages4 .texte-situation .situation1 {
    padding-top: 30px;
  }

  #chambres-stages4 .texte-situation .situation2 {
    padding-top: 30px;
  }

  #chambres-stages4 .texte-situation .situation1 .distances1 .adresse {
    font: normal 425 20px / 1.3 "Roboto";
  }

  #chambres-stages4 .texte-situation .adress {
    padding-bottom: 12px;
    width: 100%;
    font: normal 450 24px / 1.3 "Roboto";
  }

  #chambres-stages4 .texte-situation p {
    padding-bottom: 8px;
    font: normal 400 20px / 1.3 "Roboto";
  }

  /* - - SECTION 4 - SITUATION - - - - Fin - - */
  /* - - SECTION 5 - LOCALISATION - - Début - - */
  .carte-localisation img {
    display: none;
  }

  /* - - SECTION 5 - LOCALISATION - - Fin - - */
  /* - - SECTION 6 - GEOLOCALISATION GPS - - Début - - */
  #chambres-stages6 {
    margin-top: 24px;
    padding: 40px 0;
  }

  #chambres-stages6 .reinitial .reini {
    font: normal 400 15px / 1 "Roboto";
  }

  #chambres-stages6 .itineraire {
    width: 90%;
  }

  #chambres-stages6 .itineraire a {
    font: normal 400 16px / 1.4 "Roboto";
  }

  #chambres-stages6 .itineraire .fleche-marron {
    height: 11px;
    margin-top: 0px;
    margin-left: 5px;
  }

  /* - - SECTION 6 - GEOLOCALISATION GPS - - Fin - - */
  /* - - - - SECTION 7 - TEXTE GEOLOCALISATION - - Début - - */
  #chambres-stages7 {
    margin: 24px 0;
  }

  #chambres-stages7 .texte-geolocal {
    width: 87%;
    border-radius: 10px;
  }

  /* - - - - SECTION 7 - TEXTE GEOLOCALISATION - - Fin - - */
}

@media screen and (max-width: 389px) {
  /* - NAV Ecran mobile - debut - */
  .logo-02 {
    padding: 12.5px 4px 2px 8px;
  }

  .trois-logos {
    width: 120px;
    display: flex;
    justify-content: flex-end;
  }

  .trois-logos .activ-mobile02 {
    padding: 0 16px;
  }

  .trois-logos .activ-mobile03 {
    padding: 0 16px;
  }

  #hamburger01 #box01 {
    margin: 4.5px 13px 0 10px;
  }

  #hamburger02 #box02 {
    margin: 4.5px 13px 0 10px;
  }

  .trois-logos #hamburger {
    padding: 0 13px 0 8px;
  }

  /* - NAV Ecran mobile - fin - */
  /* - - Menu recherche - Mobile - debut - */
  #recherche .list-rechercher-mobile {
    padding: 0 18px 0 25px;
  }

  /* - - Menu recherche - Mobile - fin - */
  /* - - Menu - Partenaires - Mobile - debut - */
  #partenaires .bloc-partenaires {
    padding: 0 20px 0 25px;
  }

  /* - - Menu - Partenaires - Mobile - fin - */
  /* - - Menu nav - Mobile - debut - */
  #navbar li {
    padding: 0 20px 0 25px;
  }

  #navbar-visites .sous-menu-visites .sous-visites-list,
  #navbar-stages .sous-menu-stages .sous-stages-list,
  #navbar-photos .sous-menu-photos .sous-photos-list,
  #navbar-videos .sous-menu-videos .sous-videos-list,
  #navbar-cristaux .sous-menu-cristaux .sous-cristaux-list,
  #navbar-contact .sous-menu-contact .sous-contact-list {
    padding: 0 20px 0 25px;
  }

  /* - - Menu nav - Mobile - fin - */
  /* - - Header - Mobile - debut - */
  #header .header-sousmenu {
    padding: 0 13px 0 15px;
  }

  #header .header-sousmenu .menu-demi-journee {
    display: none;
  }

    #header .header-sousmenu .menu-demi-journee-mobile {
    display: block;
  }

  /* - - Header - Mobile - fin- */

  /* - Modal - Début - */
  .close-modal2 img {
    height: 25px;
  }

  .modal2 h2 {
    font: normal 400 24px / 1 "Roboto";
  }

  .modal2 h3 {
    padding-top: 20px;
    font: normal 500 29px / 1 "Roboto";
  }

  .modal2 .tarif {
    padding-top: 15px;
    font: normal 400 22px / 1 "Roboto";
  }

  .modal2 .heure {
    padding-top: 20px;
    padding-bottom: 30px;
    font: normal 400 21px / 1 "Roboto";
  }

  .modal2 .inscrire {
    padding-top: 28px;
    font: normal 400 20px / 1.4 "Roboto";
  }

  /* - Modal - fin - */
  /* - Modal membres - Début - */
  .close-modal10 img,
  .close-modal11 img,
  .close-modal12 img,
  .close-modal13 img,
  .close-modal14 img {
    height: 25px;
  }

  .modal10 .titres h2,
  .modal11 .titres h2,
  .modal12 .titres h2,
  .modal13 .titres h2,
  .modal14 .titres h2 {
    padding-top: 20px;
    font: normal 350 29px / 1.1 "Roboto";
  }

  .modal10 .membres-part,
  .modal11 .membres-visit,
  .modal12 .membres-stag,
  .modal13 .membres-explo,
  .modal14 .membres-video {
    font: normal 400 20px / 1.3 "Roboto";
  }

  /* - Modal membres - Fin - */
}

@media screen and (max-width: 320px) {
  /* - - SECTION 2 - PH0TO MAISON - - Début - - */
  #chambres-stages2 {
    padding: 0;
  }

  #chambres-stages2 .maison-mijanes {
    background-image: url(../imgs/maison-mijanes-puce.jpg);
    width: 320px;
    height: 189px;
    border-radius: 0;
  }

  /* - - SECTION 2 - PH0TO MAISON - - Fin - - */
}

/* - - - - RESPONSIVE - - - - Fin - - - - */