.menu{
  /* transform-origin: bottom; */
  position: absolute;
  /* top: 0; */
  width: 100%;
  height: auto;
  background-color: var(--03-darkbrown);
  opacity: 0;
  padding: 0 28px;
  display: none;
  filter: drop-shadow(0 -1mm 6mm rgba(0, 0, 0, 0.1));
  padding-bottom: 60px;
  /* transition: 0.8s cubic-bezier(0,.45,.06,.98); */
}

.menu ul {
  padding: 0 0 0 0 ;
  /* POUR LE MENU v1
  padding: 10vh 0 0 0 ; */
}



.LI-italic {
  width: 76%;
  margin-bottom: 12px;
  padding: 16px 0 0 0;
  /* border-top: 0.5px solid black; */
  border-bottom: 0.5px solid black;
}


.LI-italic2 {
  width: 90%;
  margin: 20px 0 40px 0;
  /* padding: 16px 0 0 0; */
  border-top: 0.5px solid black;
  /* border-bottom: 0.5px solid black; */
}


.LI-plante{
  display: flex;
  height: 50px;
  text-align: left;
  text-decoration: none;
  font-size: 2.2rem;
  color: #454240;
  padding: 20px 0 ;
  justify-content: space-around;
}


.a-italic {

  font-family: "Gotham-Medium";
  opacity: 1;
  font-size: 1.3rem;
  line-height: 2.9rem;
}

.menu ul li a{
  color: black;
  opacity: 100;
  font-family: "Gotham-Medium";
  text-transform: uppercase;
}
a.closeLink{
  padding: 10px 0 26px 20px;
  font-size: 1.4rem;
  letter-spacing: 0.02rem;
  width: auto;
  text-align: center;
  font-family: "Bodoni-roman";
  color: var(--04-verydarkbrown);
  /* text-transform: uppercase; */
}

a.apropos{
  padding: 10px 20px 26px 0px;
  font-size: 1.4rem;
  letter-spacing: 0.02rem;
  width: auto;
  text-align: center;
  font-family: "Bodoni-roman";
  color: var(--04-verydarkbrown);
  /* text-transform: uppercase; */
}

.line-1{
  width: 35%;
  border-top: 0.5px solid black;
}
.menuHeader{
  display: flex;
  padding: 16px 0 0 0;
  width:100%;
  height: 64px;
  background-color:#FFF;
  align-items: center;
  justify-content: space-between;
  /* border-bottom: 0.5px solid black; */
}

.menuHeader2{
  display: flex;
  padding: 16px 0 0 0;
  width:100%;
  height: 64px;
  /* background-color:#FFF; */
  align-items: center;
  justify-content: space-between;
  flex-direction:row;
  /* border-bottom: 0.5px solid black; */
}



/*  ANIMATION ANIMATION ANIMATION ANIMATION ANIMATION ANIMATION */

.is-leaving{
  animation: moving-out 0.8s cubic-bezier(0,.45,0,1) forwards;
  transform: translateY(50vh);
  z-index: 4;
}

.is-coming {
  top: 0;
transform-origin: bottom;
animation: moving-in 0.6s forwards;
/* background-color: rgba(0,0,0,0.3); */
/* opacity: 0; */
transform: translateY(0);
/* background-color: var(--03-darkbrown); */
/* opacity: 100; */
z-index: 8;
display: flex;
text-align: center;
flex-direction: column;
align-items: center;
}

.is-fade-in{
  animation: fade-in 0.8s forwards;
  /* transform: translateY(-30px); */
  z-index: 4;
  display:block;
}
.is-fade-out{
  animation: fade-out 0.2s forwards;
  /* transform: translateY(30vh); */
  z-index: 4;
  display: none;
}


@keyframes moving-in {
  from{

    background-color: var(--03-darkbrown);
    opacity: 100;
    transform: translateY(90vh);
  }

  to{
    background-color: var(--03-darkbrown);
    opacity: 100;
    transform: translateY(0);
  }
}


@keyframes moving-out {
  from{
    background-color: var(--03-darkbrown);
    opacity: 100;
    transform: translateY(0);
    display: block;
  }

  to{
    background-color: var(--01-lightbrown);
    opacity: 0;
    transform: translateY(110vh);
    display: none;
  }
}

@keyframes fade-out {
  from{
    /* background-color: rgba(255,255,255,1); */
    opacity: 100;
    /* transform: translateY(0); */
  }

  to{
    /* background-color: rgba(0,0,0,0); */
    opacity: 0;
    /* transform: translateY(10px); */
  }
}

@keyframes fade-in {
  from{
    /* background-color: rgba(255,255,255,1); */
    opacity: 0;
    transform: translateY(10px);
  }

  to{
    /* background-color: rgba(0,0,0,0); */
    opacity: 100;
    transform: translateY(0);
  }
}