.scrollToTop { 
    background: #e1b82d; 
    color: white; 
    position: fixed; 
    z-index: 4000; 
    bottom: 143px; 
    right: 20px; 
    border-radius: 2px; 
    padding: 9px 10px; 
    cursor: pointer; 
    display: block; 
    font-size: 18px; 
}
.scrollToDown { 
    background: #e1b82d; 
    color: white; 
    position: fixed; 
    z-index: 4000; 
    bottom: 100px; 
    right: 20px; 
    border-radius: 2px; 
    padding: 9px 10px; 
    cursor: pointer; 
    display: block; 
    font-size: 18px; 
}
#avatarheader { 
    cursor: pointer; 
    float: right; 
    position: relative; 
    border-radius: 50%; 
    right: -10px; 
    bottom: 11px; 
}
#avatarheader:hover { 
    opacity:0.6; 
}
.haut { 
    background: rgb(36,36,36); 
    width: 100%; 
    float: right; 
    box-shadow: 0px 1px 1px 1px rgb(0,0,0,0.3); 
    position: fixed; 
    height: 70px; 
    z-index: 1000; 
    text-align: left; 
}
.headerlist { 
    width: 100%; 
    text-align: left; 
    border-bottom: 2px solid #2ECC71; 
    background: #FFF none repeat scroll 0% 0%; 
    font-size: 15px; 
}
.headerlist ul { 
    display: inline; 
    text-align: right; 
    color: #2ECC71; 
    position: relative; 
    text-decoration: none; 
}
.headerlist ul li { 
    display: inline-block; 
    padding: 14px 13px; 
}
#menu-deroulant, #menu-deroulant ul { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
}
#menu-deroulant { 
    text-align: center; 
}
#menu-deroulant li { 
    display: inline-block; 
    position: relative; 
}
#menu-deroulant ul li { 
    display: inherit; 
    width: 100%; 
}
#menu-deroulant a { 
    text-decoration: none; 
    display: block; 
    color:#000; 
}
#menu-deroulant ul { 
    position: absolute; 
    left: -999em; 
    top: 100%; 
    min-width: 100%; 
    z-index: 1000; 
    white-space: nowrap; 
    text-align: left; 
}
#menu-deroulant li:hover ul { 
    left: 0; 
}
#menu-deroulant li:hover ul li a { 
    background-color:#242424; 
    padding: 13px; 
    width:100%; 
}
#menu-deroulant li a{ 
    color: rgb(230, 230, 230); 
    padding: 25px 14px; 
    transition: background-color 200ms, color 200ms; 
    font-size: 14px; 
}
#menu-deroulant li:hover { 
    background: rgb(18,18,18); 
    color: rgb(123,123,123); 
    border-bottom: 2px solid #e1b82d; 
}
#menu-deroulant li:hover ul li:hover { 
    color: #e1b82d; 
    border:none; 
}
#menu-deroulant li:hover ul li:hover a { 
    background: rgb(18,18,18); 
}
#menu-deroulant { 
    float: right; 
    vertical-align: middle; 
    position: relative; 
    right: 35px; 
    letter-spacing: 0.4px; 
}
@media (max-width: 768px) { 
    .haut { 
        text-align:center; 
    } 
    .scrollToDown, .scrollToTop { 
        bottom: 14553px; 
    } 
}
@media (max-width: 1280px) { 
    .scrollToDown, .scrollToTop { 
        bottom: 14553px; 
    } 
}
> >
/* ======================== Desktop Header ======================== */
.desktop-header { 
    display: block !important; 
    background: rgb(36,36,36); 
    height: 70px; 
    line-height: 70px; 
    padding: 0 20px; 
}
/* Hide mobile header by default */
.mobile-header { 
    display: none !important; 
}
/* ======================== Mobile Header (≤768px) ======================== */
@media (max-width: 768px) {
    .mobile-header { 
        display: flex !important; 
        justify-content: space-between; 
        align-items: center; 
        background: rgb(36,36,36); 
        padding: 5px 20px; 
        height: 70px; 
        position: relative; 
        z-index: 1000; 
        box-sizing: border-box; 
    }
    .desktop-header { 
        display: none !important; 
    }
    .mobile-header .mobile-logo, .mobile-header .mobile-logo:hover { 
        color: #e1b82d !important; 
        font-size: 27px; 
        font-weight: bold; 
        font-family: "Arial", sans-serif; 
        text-decoration: none; 
        line-height: 1; 
    }
    .mobile-menu-toggle { 
        font-size: 28px; 
        color: #eee; 
        cursor: pointer; 
        transition: color 0.2s ease; 
        padding: 10px 15px; 
    }
    .mobile-menu-toggle:hover { 
        color: #e1b82d; 
    }
    .mobile-header.active .mobile-menu-toggle { 
        color: #e1b82d; 
    }
    .mobile-header .mobile-menu { 
        display: none; 
        position: absolute; 
        top: 70px; 
        left: 0; 
        width: 100%; 
        z-index: 999; 
        max-height: 0; 
        overflow: hidden; 
        list-style: none; 
        padding: 0; 
        margin: 0; 
        transition: max-height 0.4s ease-out; 
        background: rgb(36,36,36); 
        text-align: center; 
    }
    .mobile-header.active .mobile-menu { 
        display: block; 
        max-height: 1000px; 
        transition: max-height 0.5s ease-in; 
    }
    .mobile-menu li { 
        padding: 8px 15px; 
        border-bottom: 1px solid rgb(50,50,50); 
        position: relative; 
    }
    .mobile-menu li ul { 
        max-height: 0; 
        overflow: hidden; 
        transition: max-height 0.4s ease-in-out; 
        padding-left: 0; 
        margin: 0; 
        background: rgb(46,46,46); 
        text-align: center; 
    }
    .mobile-menu li ul li { 
        padding: 6px 10px; 
        border-bottom: 1px solid rgb(50,50,50); 
    }
    .mobile-menu li a { 
        color: #eee; 
        text-decoration: none; 
        display: block; 
        font-size: 14px; 
        font-family: "Arial", sans-serif; 
        font-weight: normal; 
        letter-spacing: 0.4px; 
        padding: 12px 20px; 
        transition: color 0.2s ease, background 0.2s ease; 
        text-align: center; 
    }
    .mobile-menu li a:hover { 
        color: #e1b82d; 
        background: rgb(50,50,50); 
    }
    .mobile-menu li > a .arrow { 
        display: inline-block; 
        margin-left: 5px; 
        transition: transform 0.3s ease, color 0.2s ease; 
    }
    .mobile-menu li.active > a .arrow { 
        transform: rotate(90deg); 
    }
    .mobile-menu li > a:hover .arrow { 
        color: #e1b82d; 
    }
}