/* ------- menu-burger visible à partir de 1024px -------- */

.menu-button {
  width: 32px;
  cursor: pointer;
  z-index: 33;
  display: block;
  height: calc(12px + 8px);
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.menu-button__wrapper {
    display: none;
    justify-content: end;
    z-index: 33;
    width: 3rem;
    height: 3rem;
}
.menu-button__bar {
  background-color: var(--orange);;
  height: 4px;
  width: 32px;
  display: block;
  position: absolute;
  transition: all 0.4s ease;
}
.menu-button__bar:nth-of-type(2) {
  top: 8px;
}
.menu-button__bar:nth-of-type(3) {
  top: 16px;
}
.menu-button.active .menu-button__bar {
  transform: translateY(8px) rotate(45deg);
}
.menu-button.active .menu-button__bar:nth-of-type(2) {
  transform: translateX(2rem);
  opacity: 0;
  visibility: hidden;
}
.menu-button.active .menu-button__bar:nth-of-type(3) {
  transform: translateY(-8px) rotate(-45deg);
}



.menu-overlay {
    transition: all 0.8s ease;
    position:absolute;
    z-index: 22;
    left:-100%;
    width:100%;
    background-color: var(--white);
}

.menu-overlay.open {
    transition: all 0.8s ease;
    left:0;
}

.menu-mobile-container{
    position:relative;
    z-index:2;
}

.chevron2 {
  width: 15px;
  height: 12px;
  transition:all 0.2s;
  cursor: pointer;
}

.chevron1 {
  width: 15px;
  height: 12px;
  transition:all 0.2s;
  cursor: pointer;
}


.chevron--flip{
    rotate:180deg;
    transition:all 0.2s;
}

@media screen and (max-width:1280px){
    nav a{
        font-size:1rem;
        padding: 0 15px;
    }

    .menu-logo img{
        max-width:280px;
    }
}


@media all and (max-width : 1024px) {

.upper-header {
    height: auto;
    padding: 15px 80px;
  & p {
    font-size: 0.8rem;
  }
  & button {
    padding: 7px 20px;
    font-size:0.8rem;
  }
}

.upper-header-address{
    width: 40%;
}

.bottom-header{
    height:60px;
}

.menu-logo img{
    max-width:250px;
}

.menu{
        display:none;
    }
    
.menu-button__wrapper{
        display:flex;
        justify-content: end;
    }

.menu-mobile{
    display: flex;
    flex-direction: column;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 30px;
    padding: 20px 80px 20px 80px;
    & a{
        line-height:40px;
        padding: 0;
        &:hover{
            color: var(--orange);
        }
        &:focus{
            color:var(--orange);
            font-family:'ProximaNovaSemiBold';
        }

    }
}

.toggle {
    display: flex;
    color: var(--black);
    font-family:'ProximaNovaSemiBold';
    font-size: 1.4rem;
    line-height: 40px;
    text-decoration: none;
    border: none;
    width:20%;
    justify-content: end;
    align-items: center;
}

.dropdown-list{
    display:flex;
    flex-wrap:wrap;
    width:100%;
}

.dropdown-toggle{
    width:80%;
}

header input{display:none;}

    .toggle:hover { 
        color: var(--orange); 
    }

    [id^=drop]:checked + ul { 
        display: block; 
        padding: 0 0 0 30px;
        opacity: 1;
        & a{
        line-height: 2rem;
        }
    }

    nav a:hover,
    nav ul ul ul a { 
        font-family:'ProximaNovaRegular';
        font-size:0.9rem;
        color:var(--black);
    }

    nav ul ul {
        float: none;
        position: static;
        opacity:0;

    }

    nav ul li:hover > ul{
        display:none;

    }

    nav ul li{
        background:none;
    }

}



@media screen and (max-width:768px){
    .upper-header{
        padding: 10px 50px;
        & button{
            padding: 7px 15px;
        }
    }

    .upper-header-address{
        display:none;
    }

    .bottom-header{
        padding: 0 50px;
    }

    .menu-mobile{
        padding: 20px 50px;
    }
}

@media screen and (max-width:480px){
    .upper-header{
        padding: 10px 30px;
        & button{
            padding:7px 10px;
            font-size:0.7rem;
        }
    }

    .menu-logo img{
        max-width:200px;
    }

    .bottom-header{
        padding:0 30px;
        height:50px;
    }

    .menu-mobile{
        padding:10px 30px;
        & a{
            font-size:0.9rem;
        }
    }
}