/*================================
Header
================================*/
header{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    z-index: 10;
    background-color: rgba(255,255,255,1);
    border-top: 4px solid #416db9;
}

/*================================
Header Shop Infos
================================*/
.header-bottom__infos-box{
    margin-bottom: 15px;
    padding: 0 15px;
}
.header-bottom__infos-logo-picture{max-width: 200px;}

/*===============================
Navigation Mobile
===============================*/
.header-bottom{
    height: 60px;
    -webkit-transition: all 0.3s ease-in, background 0.3s ease-in;
    transition: all 0.3s ease-in, background 0.3s ease-in;
    text-align: center;
}
.header-bottom__container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 3px 9px rgba(0,0,0,0.2);
}

.header-bottom__logo {margin-left: 15px;}
.header-bottom__logo img{max-height: 50px;}

/*================================
Header from Tablet
================================*/
.header-top{display: none;}

/*===============================
Button Menu Mobile
===============================*/
.burger-container {
    display: inline-block;
    height: 60px;
    width: 60px;
    cursor: pointer;
    transform: rotate(0deg);
    transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
#burger {
    width: 30px;
    height: 8px;
    position: relative;
    display: block;
    margin: -4px auto 0;
    top: 50%;
}
.burger-container:hover .bar{background: #000;}
.bar {
    width: 100%;
    height: 2px;
    display: block;
    position: relative;
    background: #000000;
    transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    transition-delay: 0s;
}
.topBar {transform: translateY(0px) rotate(0deg);}
.btmBar {transform: translateY(6px) rotate(0deg);}

/*===============================
Menu Mobile
===============================*/
ul.menu-mobile {
    position: relative;
    padding: 0;
    list-style: none;
    margin-bottom: 40px;
}
ul.menu-mobile a{
    color: #000000;
    text-decoration: initial;
}
li.menu-mobile-item {
    margin: 0 40px;
    padding: 20px 0;
    width: calc(100% - 120px);
    opacity: 0;
    -webkit-transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    -webkit-transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
li.menu-mobile-item:hover a{
    color: #416db9;
    cursor: pointer;
    display: block;
}
li.menu-mobile-item:nth-child(1) {
    -webkit-transition-delay: 0.49s;
    transition-delay: 0.49s;
}
li.menu-mobile-item:nth-child(2) {
    -webkit-transition-delay: 0.42s;
    transition-delay: 0.42s;
}
li.menu-mobile-item:nth-child(3) {
    -webkit-transition-delay: 0.35s;
    transition-delay: 0.35s;
}
li.menu-mobile-item:nth-child(4) {
    -webkit-transition-delay: 0.28s;
    transition-delay: 0.28s;
}
li.menu-mobile-item:nth-child(5) {
    -webkit-transition-delay: 0.21s;
    transition-delay: 0.21s;
}
li.menu-mobile-item:nth-child(6) {
    -webkit-transition-delay: 0.14s;
    transition-delay: 0.14s;
}
li.menu-mobile-item:nth-child(7) {
    -webkit-transition-delay: 0.07s;
    transition-delay: 0.07s;
}

/*================================
Menu Mobile Opened
================================*/
.header-bottom.menu-mobile-opened {
    height: 100vh;
    -webkit-transition: all 0.3s ease-in, background 0.3s ease-in;
    transition: all 0.3s ease-in, background 0.3s ease-in;
    -webkit-transition-delay: 0.25s;
    transition-delay: 0.25s;
    overflow-y: scroll;
}
.header-bottom.menu-mobile-opened .burger-container {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.header-bottom.menu-mobile-opened .bar {
    -webkit-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.header-bottom.menu-mobile-opened .topBar {
    -webkit-transform: translateY(4px) rotate(45deg);
    transform: translateY(4px) rotate(45deg);
}
.header-bottom.menu-mobile-opened .btmBar {
    -webkit-transform: translateY(3px) rotate(-45deg);
    transform: translateY(3px) rotate(-45deg);
}
.header-bottom.menu-mobile-opened .menu-mobile-item {
    -webkit-transform: scale(1) translateY(0px);
    transform: scale(1) translateY(0px);
    opacity: 1;
}
.header-bottom.menu-mobile-opened .menu-mobile-item:not(:last-child) {
    border-bottom: 2px solid #416db9;
}
.header-bottom.menu-mobile-opened .menu-mobile-item:nth-child(1) {
    -webkit-transition-delay: 0.27s;
    transition-delay: 0.27s;
}
.header-bottom.menu-mobile-opened .menu-mobile-item:nth-child(2) {
    -webkit-transition-delay: 0.34s;
    transition-delay: 0.34s;
}
.header-bottom.menu-mobile-opened .menu-mobile-item:nth-child(3) {
    -webkit-transition-delay: 0.41s;
    transition-delay: 0.41s;
}
.header-bottom.menu-mobile-opened .menu-mobile-item:nth-child(4) {
    -webkit-transition-delay: 0.48s;
    transition-delay: 0.48s;
}
.header-bottom.menu-mobile-opened .menu-mobile-item:nth-child(5) {
    -webkit-transition-delay: 0.55s;
    transition-delay: 0.55s;
}
.header-bottom.menu-mobile-opened .menu-mobile-item:nth-child(6) {
    -webkit-transition-delay: 0.62s;
    transition-delay: 0.62s;
}
.header-bottom.menu-mobile-opened .menu-mobile-item:nth-child(7) {
    -webkit-transition-delay: 0.69s;
    transition-delay: 0.69s;
}

/*================================
Breakpoint - Mobile Paysage
================================*/
@media (min-width: 565px) {
    li.menu-mobile-item{
        margin: 0 80px;
        width: calc(100% - 160px);
    }
    .header__infos{text-align: center;}
    .header__infos-logo-picture{max-width: 250px;}
}

/*================================
Breakpoint - Tablet
================================*/
@media (min-width: 768px) {
    header{
        border-top: initial;
        position: initial;
        top: 0;
    }
    .header-bottom{display: none;}
    .header-top{display: block;}
    .header-top__block-left{width: 30%;}
    .header-top__block-logo{max-width: 230px;}
    .header-top__block-right{
        display: flex;
        align-items: flex-end;
        flex-direction: column;
        padding-right: 20px;
        width: 70%;
    }
    .header-top__block-right__infos{text-align: right;}
    .header-top__block-right__infos:not(:last-child){margin-bottom: 10px;}
    .header-top__block-right__infos-courriel{display: none;}
    .header-top__container-top{
        display: flex;
        align-items: flex-end;
    }

    /*================================
    Menu
    ================================*/
    .menu{box-shadow: 0 6px 6px rgba(0,0,0,0.1);}
    .menu__list{
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        list-style-type: none;
    }
    .menu__list-item-anchor{
        color: #000;
        padding: 15px 30px 15px 30px;
        text-decoration: none;
        font-weight: 500;
        letter-spacing: 2px;
        margin: 20px 0;
        position: relative;
        transition: all 0.2s ease;
    }
    .menu__list-item-anchor > span{
        position: relative;
        z-index: 3;
        transition: color 0.3s ease;
    }
    .menu__list-item-anchor:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        display: block;
        border-radius: 30px;
        background: rgba(65,109,185, 0.5);
        width: 56px;
        height: 56px;
        transition: all 0.3s ease;
    }
    .menu__list-item-anchor:hover > span,
    .menu__list-item-anchor:active > span,
    .menu__list-item-anchor:focus > span {
        color: #ffffff;
        transition: color 0.3s ease;
    }
    .menu__list-item-anchor:hover:before,
    .menu__list-item-anchor:active:before,
    .menu__list-item-anchor:focus:before {
        width: 100%;
        background: #416db9;
    }
    .menu__list-item-anchor:hover,
    .menu__list-item-anchor:active,
    .menu__list-item-anchor:focus {
        transform: scale(1);
    }
}

/*================================
Breakpoint - Tablet (landscape)
================================*/
@media (min-width: 1024px) {
    .header-top__block-right{
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        padding: 20px 20px 20px 0;
    }
    .header-top__block-right__infos{margin-left: 40px;}
    .header-top__container-top{align-items: center;}

    .menu__list-item-anchor{
        font-size: 20px;
        margin: 10px 20px 20px;
    }
}

/*================================
Breakpoint - Desktop
================================*/
@media (min-width: 1200px) {
    .header-top__container-top{
        margin: 0 auto;
        max-width: 1300px;
    }
    .header-top__block-right__infos:not(:last-child){margin-bottom: 0;}
    .header-top__block-right__infos-courriel{display: flex;}
    .header-top__block-right__infos-courriel img{
        margin-right: 10px;
        max-width: 25px;
    }
}