@charset "UTF-8";
/* CSS Document */

/* XS - Smartphone V */
@media screen and (max-width: 767px) {
    
    /* Comportement des boutons */
    .btn-close {
        z-index: 9999;
        position: absolute;
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        /*opacity: 0;*/
    }
    
    .btn-close img {
        width: 40px;
        height: 40px;
    }

    .btn-close.active {
        opacity: 1;
        transition: opacity 500ms ease-in-out 0s;
        visibility: visible;
    }
    
    
    
    .btn-burger {
        padding: 0px;
        position: relative;
        float: right;
    }
    
    .btn-burger img {
        width: 40px; height: 40px;
    }
    
    #mainNav.mobile {
        position: fixed;
        z-index: 999;
        left: 0px;
        top: 0px;
        margin: 0px;
        overflow: hidden;
        background-color: #241e46;
        height: 100vh;
        opacity: 0;
        transform: translateX(-100%);
        width: 100%;
        transition: all 500ms ease-in 0s;
    }
    
    #mainNav.mobile.active {
        opacity: 1;
        transform: translateX(0);
        transition: all 500ms ease-out 0s;
   }
    
    #mainNav.mobile ul.menu {
        position: relative;
        margin-top: 50px;
        width: 100%;
    }
    
    #mainNav.mobile ul.menu > li {
        width: 100%;
        height: auto;
        position: relative;
        float: left;
    }
    
    #mainNav.mobile ul.menu li > a {
        padding: 0px;
        border-top: 1px solid rgba(255,255,255,0.5);
        color: #FFF;
        border-radius: 0px;
        width: 100%;
        display: block;
        margin: 0px;
        position: relative;
        height: 50px;
        line-height: 50px;
        padding-left: 15px;
    }
    
    #mainNav.mobile ul.menu > li.has-submenu > .btn-submenu {
        background-image: url(../image/picto_down-arrow-w.svg);
        position: absolute;
        top: 1px;
        right: 0px;
        background-color: rgba(0,0,0,0.3);
        width: 50px;
        height: 50px;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
        transition: all 500ms ease-in-out;
    }
    
    #mainNav.mobile ul.menu > li.has-submenu > .btn-submenu.active {
        transform: scaleY(-1);
        transition: all 500ms ease-in-out;
    }

    #mainNav.mobile ul.menu > li.has-submenu > ul.active {
        display: block;
        position: relative;
        width: 100%;
        height: auto;
        padding: 0px;
        margin: 0px;
    }

    #mainNav.mobile ul.menu > li.has-submenu > ul.active li {
        position: relative;
        width: 100%;
        height: 40px;
        background-color: rgba(0,0,0,0.5);
    }
    
    #mainNav.mobile ul.menu > li.has-submenu > ul.active li a {
        line-height: 40px;
        border-top: none;
        font-size: 12px;
        padding: 0px 0px 0px 30px;
        text-transform: none;
        height: 40px;
    }
    
    #mainNav.mobile ul.menu > li.has-submenu:hover > a {
        background-image: none;
    }
    
    #mainNav.mobile ul.menu > li.has-submenu:hover > ul {
        display: none;
    }
    
    #mainNav.mobile ul.menu > li.has-submenu:hover > ul.active {
        display: block;
        left: 0px;
        top: 0px;
    }
    
    nav#mainNav.mobile li#cart {
        border-left: none;
    }
    
    nav#mainNav.mobile li#cart > a {
        height: 50px;
    }
    
    nav#mainNav.mobile li#cart > a span {
        display: inline;
    }
    
    nav#mainNav.mobile li#cart a::after {
        display: none;
    }
    
    

}

/* MD - Tablettes */
@media screen and (min-width: 768px) {
    .btn-burger, .btn-close, .submenu-open-link, .subTitle { display: none !important; }
}


nav#mainNav ul.menu {
    margin: 0px 0px 0px;
    padding: 0px;
    list-style-type: none;
    position: relative;
}

nav#mainNav li {
    display: block;
    float: left;
    position: relative;
    height: 40px;
}

nav#mainNav a {
    text-transform: uppercase;
    line-height: 40px;
    display: inline-block;
    padding: 0px 20px;
    color: #241e46;
    border-radius: 20px;
    margin: 0px 5px;
}

nav#mainNav li.has-submenu > a {
    background-image: url("../image/picto_down-arrow.svg");
    background-size: 16px 10px;
    background-position: right 25px center;
    background-repeat: no-repeat;
    padding-right: 50px;
    border-radius: 20px 20px 0px 0px;
}

nav#mainNav li#cart {
    border-left: 1px solid #241e46;
}

nav#mainNav li#cart > a {
    padding-right: 0px;
    height: 40px;
}

nav#mainNav li#cart > a span {
    display: none;
}

nav#mainNav li#cart a::after {
    background-image: url("../image/picto_cart.png");
    background-size: 35px 35px;
    background-position: center center;
    background-repeat: no-repeat;
    display: inline-block;
    width: 35px; 
    height: 40px;
    content:"";
}

nav#mainNav li:hover > a,
nav#mainNav li.active:hover > a {
    background-color: #241e46;
    color: #FFF;
}

nav#mainNav li#cart:hover > a,
nav#mainNav li#cart.active:hover > a {
    background-color: transparent;
}

nav#mainNav li.has-submenu:hover > a {
    background-image: url("../image/picto_down-arrow-w.svg");
}

nav#mainNav li.active > a {
    font-weight: 700;
}

nav#mainNav ul.submenu {
    display: none;
}

nav#mainNav li:hover ul.submenu {
    display: block;
    width: 230px;
    position: absolute;
    left: 5px;
    top: 40px;
    background-color: rgba(255,255,255,0.7);
    border-radius: 0px 20px 20px 20px;
    margin: 0px;
    padding: 0px;
}

nav#mainNav li:hover ul.submenu li {
    width: 100%;
    text-align: left;
    margin: 0px;
    height: auto;
}

nav#mainNav li:hover ul.submenu li a {
    width: 100%;
    height: auto;
    line-height: normal;
    text-transform: none;
    padding: 10px 20px;
    display: block;
    border-radius: 0px;
    margin: 0px;
}

nav#mainNav li:hover ul.submenu li:first-child a { /* CORRECTION */
    border-top-right-radius: 20px; 
}

nav#mainNav li:hover ul.submenu li:last-child a {
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}