/* Set-up des fonts */
@font-face {
  font-family: "Mayonice";
  src: url("../fonts/Mayonice.ttf") format("truetype");
}

@font-face {
  font-family: "DreamOrphans";
  src: url("../fonts/Dream Orphans.otf") format("opentype");
}

h1,
.name {
  font-family: "Mayonice", sans-serif;
}

h2,
.subtitle {
  font-family: "DreamOrphans", sans-serif;
  text-transform: uppercase;
}

/* BG des sections */
#first-section {
  height: 100vh;
  background-image: url("../images/hypnose-ericksonienne-marineAir.jpg");
  background-size: cover;
  background-position: center;
}

#third-section {
  height: 100vh;
  background-image: url("../images/hypnose-ericksonienne-ouverture.jpg");
  background-size: cover;
  background-position: center;
}

#form-contact {
  height: 100vh;
  background-image: url("../images/hypnose-ericksonienne-formulaire.jpg");
  background-size: cover;
  background-position: center;
}

/* ------ HAMBURGER ------- */
#hamburgerMenu {
  cursor: pointer;
  z-index: 100;
}

#hamburgerMenu li {
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Animation croix */
#hamburgerMenu.active #cross1 {
  transform: rotate(-45deg) translate(-0.8rem, 0);
}

#hamburgerMenu.active li:nth-child(2) {
  opacity: 0;
}

#hamburgerMenu.active #cross2 {
  transform: rotate(45deg) translate(-0.9rem, -0.1rem);
}

/* ----- SIDEBAR ----- */
#sideBar {
  position: fixed;
  inset: 0 0 0 auto;
  transform: translateX(100%);
  transition: transform 0.4s ease;
  z-index: 50;
}

#sideBar.active {
  transform: translateX(0);
}

/* Animations */
@keyframes crossHamburger1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-45deg);
  }
}

@keyframes crossHamburger2 {
  from {
    transform: rotate(0deg) translate(0, 0);
  }
  to {
    transform: rotate(45deg) translate(-15px, -15px);
  }
}

@keyframes disapear {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideMenu {
  from {
    transform: translate(100%, -50%);
  }
  to {
    transform: translate(0%, -50%);
  }
}