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

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

    .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: absolute;
        z-index: 999;
        left: 0px;
        top: 130px;
        margin: 0px;
        overflow: hidden;
    }


    #mainNav.mobile > ul.menu {
        width: 100%;
        height: auto;
        background-color: rgba(255,255,255,0.95);
        z-index: 9999;
        top: 0px;
        left: 0px;
        margin: 0px;
        padding: 0px;
        display: none;
        border-top: 1px solid #999;
    }
    
    nav#mainNav li:hover ul.submenu {
        border-top: 2px solid #999;
    }

    #mainNav.mobile.active > ul {
        display: block;
        opacity: 1;
        border-top: 2px solid #999;
        border-bottom: 2px solid #999;
   }

    #mainNav.mobile li,
    #mainNav.mobile ul.submenu li.submenu-item {
        position: static;
        width: 100%;
        height: auto;
        padding: 0px;
        text-align: left;
        font-size: 18px;
        border-bottom: 1px solid #999;
        display: flex;
    }
    
    #mainNav.mobile ul.submenu li.submenu-item {
        background-color: #EFEFEF;
    }
    
    #mainNav.mobile ul.submenu li.submenu-item.subTitle {
        background-color: #FFF;
        font-weight: 700;
        background-image: url("../image/left-arrow.svg");
        background-repeat: no-repeat;
        background-position: 15px center;
        background-size: 10px 15px;
    }
    
    #mainNav.mobile li a,
    #mainNav.mobile ul.submenu li.submenu-item a {
        width: calc(100% - 50px);
        padding-left: 40px;
        text-transform: uppercase;
        line-height: 50px;
        display: inline-block;
        padding: 0px 10px 0px 40px;
    } 
    
    #mainNav.mobile li:hover > a,
    nav#mainNav.mobile li.active > a {
        color: #c0042c;
        background-color: transparent;
    }
    
    .submenu-open-link {
        float: right;
        padding: 12px 14px;
        cursor: pointer;
        background-color: transparent;
        border: none;
    }
    
    nav#mainNav.mobile li.active > a {
        color: #c0042c; font-weight: 900;
    }
    
    nav#mainNav ul.submenu,
    nav#mainNav li:hover ul.submenu {
        width: 100%;
    }
    
    #mainNav.mobile ul {
        left: 0px;
        border-top: 2px solid #999;
        border-bottom: 2px solid #999;
    }
    
    nav#mainNav ul.submenu,
    nav#mainNav li:hover ul.submenu{
        display: block;
        left: 100%;
        top: -2px;
        position: absolute;
    }
    
    nav#mainNav ul.submenu.subActive {
        display: block;
        width: 100%;
        position: absolute;
        left: 100%;
        top: -2px;
    }
    
    nav#mainNav.mobile ul.menu {
        transform: translateX(0%);
        transition: all 500ms ease-in-out 0s;
    }
    
    nav#mainNav.mobile.subActive ul.menu {
        transform: translateX(-100%);
        transition: all 500ms ease-in-out 0s;
   }
   
}

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