/*     HEADER     */
#header{
    position: relative;
    color: #F0EBDA;
    background-color: #26341F;
    padding: 5px 20px;
    z-index: 999;
    transition: all ease 0.3s;
}
/* Header Menu */
#header #menuHeader{
    font-size: 20px;
    font-weight: 400;
}
@media screen and (max-width: 750px){
    #header #menuHeader{
        flex: 0 1 auto;
    }
}
@media screen and (max-width: 600px){
    #header #menuHeader{
        font-size: 16px;
    }
}
#header #menuHeader div:hover{
    text-decoration: underline;
}
#header #menuHeader .lienCatalogue{
    background-image: url('../img/header/menu.svg');
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 27px !important;
}
@media screen and (max-width: 1150px){
    #header #menuHeader .lienContact{
        display: none;
    }
}
@media screen and (max-width: 1000px){
    #header #menuHeader .lienActu{
        display: none;
    }
}
/* Région Logo */
#header #region_logo{
    margin: 0 24px;
}
#header #region_logo img{
    max-width: inherit !important;
}
@media screen and (max-width: 750px){
    #header #region_logo img{
        max-width: 100% !important;
    }
}
/* Header Recherche */
#header #searchHeader form{
    position: absolute;
    bottom: 120px;
    left: 0;
    right: 0;
    z-index: 999;
    transition: all ease 0.3s;
}
#header #searchHeader.showSearchHeader form{
    bottom: -80px;
}
#header #searchHeader form input{
    width: 100%;
    height: 80px;
    color: #000000;
    text-align: center;
    background-color: #F0EBDA !important;
    padding: 5px !important;
    border-color: #FF0C00 !important;
    border-width: 0 0 1px 0 !important;
    border-radius: 0 !important;
}
.touchevents #header #searchHeader form input{
    -webkit-appearance: none !important;
}
#header #searchHeader form input::placeholder{
    font-size: 15px;
    color: #888888;
}
.overlaySearch{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0);
    transition: background ease 0.3s;
    z-index: 1;
    pointer-events: none;
}
.overlaySearch.showOverlay{
    background: rgba(0,0,0,0.8);
}
/* Icones */
#header #iconesHeader img{
    height: 31px;
    max-width: inherit !important;
}
@media screen and (max-width: 1000px){
    #header #iconesHeader{
        gap: 30px;
    }
}
@media screen and (max-width: 750px){
    #header #iconesHeader{
        flex: 0 1 auto;
    }
    #header .buttonDevis{
        display: none;
    }
}
@media screen and (max-width: 600px){
    #header #iconesHeader img{
        height: 26px;
    }
}
@media screen and (max-width: 450px){
    #header .iconeSearch{
        display: none;
    }
}
/*     MENU BURGER     */
#menuBurgerContent{
    position: fixed;
    width: 100%;
    max-width: 420px;
    top: 0;
    left: 0;
    color: #000;
    background-color: #FFFFFF;
    transform: translate(-500%);
    overflow-y: auto;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1) 0s;
    z-index: 1001;
}
#menuBurgerContentSub{
    position: fixed;
    width: 100%;
    max-width: 420px;
    top: 0;
    left: 0;
    color: #000;
    background-color: #FFFFFF;
    transform: translate(-100%);
    overflow-y: auto;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1) 0s;
    z-index: 1002;
}
body.openBurger{
    overflow: hidden;
}
body.openBurger #menuBurgerContent,
body.openBurgerSub #menuBurgerContentSub{
    transform: translate(0px);
}
body.openBurgerSub #menuBurgerContent{
    pointer-events: none;
}
@media screen and (max-width: 450px){
    #menuBurgerContent #searchHeaderBurger{
        display: block !important;
    }
}
#menuBurgerContent ul li,
#menuBurgerContentSub ul li{
    position: relative;
    padding: 0;
    border-bottom: 1px solid #D5D5D5;
/*    transition: all ease 0.3s;*/
}
@media screen and (max-width: 1150px){
    #menuBurgerContent li.lienContact{
        display: block !important;
    }
}
@media screen and (max-width: 750px){
    #menuBurgerContent li.lienDevis{
        display: block !important;
    }
}
#menuBurgerContent li.lienContact{
    color: #F0EBDA;
    background-color: #26341F;
    background-repeat: no-repeat;
    background-size: 23px 23px;
    background-position: 20px center;
    background-image: url('data:image/svg+xml,<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.95 4.63333H20.05C20.5747 4.63333 21 5.05864 21 5.58333V18.25C21 18.7746 20.5747 19.2 20.05 19.2H2.95C2.42535 19.2 2 18.7747 2 18.25V5.58333C2 5.05868 2.42531 4.63333 2.95 4.63333ZM2.63335 18.25C2.63335 18.4249 2.7751 18.5667 2.95 18.5667H20.05C20.2249 18.5667 20.3667 18.4249 20.3667 18.25V5.58333C20.3667 5.40843 20.2249 5.26668 20.05 5.26668H2.95C2.7751 5.26668 2.63335 5.40843 2.63335 5.58333V18.25Z" fill="%23F0EBDA"/><path d="M3.55582 5.90116C3.6395 5.89385 3.72267 5.92008 3.78698 5.97411L11.0925 12.1111C11.3281 12.3091 11.672 12.3091 11.9076 12.1111L19.2131 5.97408C19.2997 5.90134 19.4186 5.88034 19.525 5.91901C19.6313 5.95767 19.7089 6.05015 19.7286 6.16159C19.7482 6.27303 19.707 6.38647 19.6203 6.45921L12.3148 12.5959C11.844 12.9923 11.1561 12.9923 10.6852 12.5959L3.37977 6.45924C3.31543 6.40525 3.2752 6.32791 3.26789 6.24423C3.26058 6.16055 3.28682 6.07739 3.34085 6.01308C3.3948 5.94869 3.47214 5.90847 3.55582 5.90116Z" fill="%23F0EBDA"/><path d="M14.9095 12.5523C15.0216 12.5273 15.1384 12.565 15.2148 12.6507L19.6482 17.4007C19.7284 17.4828 19.7579 17.602 19.7251 17.7121C19.6924 17.8222 19.6026 17.9059 19.4906 17.9309C19.3785 17.956 19.2617 17.9183 19.1852 17.8326L14.7519 13.0826C14.6716 13.0004 14.6422 12.8812 14.6749 12.7712C14.7076 12.6611 14.7974 12.5774 14.9095 12.5523Z" fill="%23F0EBDA"/><path d="M7.78518 12.6507C7.86159 12.565 7.97845 12.5273 8.09055 12.5523C8.20266 12.5774 8.29239 12.6611 8.32512 12.7712C8.35785 12.8813 8.32839 13.0004 8.24816 13.0826L3.81481 17.8326C3.69458 17.9557 3.49804 17.9603 3.37221 17.8429C3.24637 17.7255 3.23732 17.5291 3.35183 17.4007L7.78518 12.6507Z" fill="%23F0EBDA"/></svg>');
}
#menuBurgerContent li.lienDevis{
    color: #26341F;
    background-color: #CCC199;
    background-repeat: no-repeat;
    background-size: 17px 17px;
    background-position: 23px center;
    background-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 17 17' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.497 0h-6.497v2.010h1v-1.010h5v4h4v8h-4.017v1h5.017v-9.818l-4.503-4.182zM13 1.832l2.335 2.168h-2.335v-2.168zM0 3v14h11v-9.818l-4.503-4.182h-6.497zM7 4.832l2.335 2.168h-2.335v-2.168zM1 16v-12h5v4h4v8h-9z' fill='%2326341F'/%3E%3C/svg%3E");
}
#menuBurgerContent li.lienContact a,
#menuBurgerContent li.lienDevis a{
    padding: 7px 51px;
}
#menuBurgerContent ul li a,
#menuBurgerContentSub ul li a{
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 7px 20px;
}
#menuBurgerContentSub ul li.font-semibold a{
    font-weight: 500;
}
#menuBurgerContent ul li:not(.hidden):hover,
#menuBurgerContentSub ul li:not(.hidden):hover{
    color: #000000;
    background-color: #F0EBDA;
}
#menuBurgerContent ul li.hasSubMenu:after{
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 30px;
    content: "";
    background-size: auto 12px;
    background-repeat: no-repeat;
    background-image: url('../img/menuBurger/subMenu.svg');
    background-position: center center;
}
#menuBurgerContent ul li.hasSubMenu:hover:after{
/*    filter: invert(1);
    webkit-filter: invert(1);*/
}
#menuBurgerContent ul li .categ-icon,
#menuBurgerContentSub ul li .categ-icon{
    height: 23px;
    width: 23px;
    margin-right: 8px;
    object-fit: contain;
    object-position: center;
    transition: all ease 0.3s;
}
#menuBurgerContent .closeMenuBurger,
#menuBurgerContentSub .closeMenuBurger{
    background-size: auto 12px;
    background-repeat: no-repeat;
    background-image: url('../img/menuBurger/closeMenu.svg');
    background-position: right center;
    padding-right: 20px;
}
#menuBurgerContentSub .backMenuBurger{
    background-size: auto 12px;
    background-repeat: no-repeat;
    background-image: url('../img/menuBurger/backMenu.svg');
    background-position: left center;
    padding-left: 20px;
}