:root {
    --menu-slide-background: #fff;
    --menu-slide-color: #000;
    --menu-slide-ico-color: #000;
}


.menu-slide-datas {
    display: none;
}

body[ms-statut="open"] {
    overflow: hidden;
}

body .menu-slide-back {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100dvh;
    opacity: 0;
    z-index: -1;
    display: none;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

body[ms-statut="open"] .menu-slide-back {
    display: block;
    opacity: 1;
    z-index: 5;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    background: rgba(0,0,0,.8);
    filter: contrast(0.5);
}


body .menu-slide {
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    /* max-width: 500px; */
    background: transparent;
    height: 100%;
    /*z-index: -3;*/
    opacity: 0;
    transform: translateX(250px);
    transition: all ease 2s;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    /* border-top: 1px solid #eee; */
}

body .menu-slide-content {
    height: calc( 100dvh - var(--header-height) );
    overflow: auto;
    position: relative;
}




body[ms-statut="open"] .menu-slide {
    display: block;
    width: 100%;
    /*z-index: 999;*/
    opacity: 1;
    top: 0;
    bottom: 0;
    /* background: var(--color0); */
    background: var(--menu-slide-background);
    right: 0;
    transform: translateX(0);
    /* color: var(--color1); */
    color: var(--menu-slide-color);
    transition: all ease 2s;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    max-width: 850px;
}

/*
body [ms-content] {
    display: none;
}

body [ms-content][ms-statut="open"] {
    display: block;
}
*/

/*
body .menu-slide-button-mobile {
    display: none;
}
*/

body[breakpoint="desktop"] .menu-slide-button-mobile > a[ms-breakpoint="mobile"], body[breakpoint="desktop"] .menu-slide-actions > a[ms-breakpoint="mobile"] {
    display: none;
}



body[breakpoint="desktop"] .menu-slide-bar [ms-content="ms-menu"], body[breakpoint="desktop"] .menu-slide-bar [ms-content="ms-menu"] ul {
    display: flex;
    flex-direction: row;
}

body[breakpoint="desktop"] .menu-slide-bar [ms-content="ms-menu"] ul li {
    list-style: none;
}





.menu-slide-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
}

.menu-slide-button-mobile, .menu-slide-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.menu-slide-button-mobile a, .menu-slide-actions a {
    display: flex;
    height: 50px;
    width: 50px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: .5rem;
}

.menu-slide-button-mobile a > svg, .menu-slide-actions a > svg {
    fill: var(--menu-slide-ico-color);
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: all ease .5s;
}

.menu-slide-button-mobile a.active > svg, .menu-slide-actions a.active > svg {
    opacity: .7;
    transition: all ease .5s;
}