/* ----------------------------------CONFIG---------------------------------- */
:root {
    /* Layout */
    --topbar-height-sm           : 60px;
    --menu-width                 : 0%;
    --main-menu-link-color       : var(--dark);
    --main-width                 : calc(var(--vw) - var(--menu-width));
    --slide-menu-width           : 80%;
    --menu-items-height          : 41px;
    --container-padding-x        : 40px;
    /* Colors */
    --menu-background            : var(--light);
    --submenu-background         : var(--light);
    --menu-item-color            : var(--dark);
    --menu-item-hover-color      : var(--light);
    --menu-item-hover-background : var(--color-2);
    --menu-item-active-color     : var(--light);
    --menu-item-active-background: var(--color-1);
    --burger-color               : #fff;
}
svg.menu{
    position:fixed;
    top:0;
    right:0;
    --menu-color: var(--color-1);
    z-index: 5;
    cursor: pointer;
}
svg.name{
    position:fixed;
    top:10px;
      cursor: pointer;  
}
svg.menu:hover,svg.close:hover{
    --menu-color: var(--color-2);
}
svg.close{
    position:absolute;
    top:0;
    right:0;
    --menu-color: var(--color-1);
    z-index: 5;
    cursor: pointer;
}
/*------------------------------------ MAIN ------------------------------------*/
footer,

.container {
    padding-left : var(--container-padding-x);
    padding-right: var(--container-padding-x);
}
/*------------------------------------ MAIN ------------------------------------*/
main {
    margin-top: var(--topbar-height);
}
.modal-flash-msg {
    top        : var(--topbar-height);
    left       : 0;
    margin-left: 0;
    position   : absolute;
    width      : 100%;
}
.modal-flash-msg + .page-wrapper main {
    margin-top: calc(var(--modal-flash-height) + var(--topbar-height));
}
/* ----------------------------------MAIN-MENU---------------------------------- */
#main-menu {
    z-index         : 100;
    position        : fixed;
    top             : 0;
   right            : -101%;
    width           : 100%;
    padding         : 0;
    height          : 100%;
    display         : flex;
    flex-direction  : column;

 transition: 0.5s;
}
#main-menu .logo img {
    width  : 100%;
    padding: 1.5rem 1rem;
}
#main-menu .logo-square {
    display: none;
}
#main-menu .mask-menu {
    display         : none;
    background-color: rgba(0, 0, 0, 0.8);
}

#main-menu.menu-open {
 right:0;
}

#slide-menu{
    height:100%;
 
}
/* ---------------------------------SLIDE-MENU--------------------------------- */
#slide-menu > ul > li > a {
    font-family       : var(--title-font);
    padding           : 0.25rem 10px 0.25px 20px;
    -webkit-transition: all ease 0.3s;
    transition        : all ease 0.3s;
    height            : var(--menu-items-height);
    display           : flex;
    align-items       : center;
    color             : var(--menu-item-color);
    white-space       : nowrap;
    text-transform    : uppercase;
    position          : relative;
}
#slide-menu ul > li > a:hover,
#slide-menu ul > li:hover > a {
    color           : var(--menu-item-hover-color);
    background-color: var(--menu-item-hover-background);
}
#slide-menu ul > li.active > a {
    color           : var(--menu-item-active-color);
    background-color: var(--menu-item-active-background);
}
/* ---------------------------------Icon-menu---------------------------------- */
#main-menu .icon-menu {
    margin     : 0 auto;
    height     : 100%;
    display    : flex;
    align-items: stretch;
    padding    : 0 10px;
}
#main-menu .icon-menu > li > a {
    font-size  : 18px;
    padding    : 0 10px;
    color      : var(--menu-item-color);
    height     : 100%;
    display    : flex;
    align-items: center;
}
/* ---------------------------------SUB-MENU------------------------------------*/
.sub-menu {
    position: relative;
}
#slide-menu li.sub-menu > a {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
}
.sub-menu > ul {
    visibility      : hidden;
    position        : absolute;
    background-color: var(--menu-background);
    min-width       : 100%;
    z-index         : 200;
    right           : -100%;
    top             : 0;
    box-shadow      : var(--shadow-2);
}
#slide-menu ul > li > a.sub-menu-title {
    display: none;
}
.sub-menu > ul > li > a {
    font-size     : 16px;
    padding       : 0.5rem 0.75rem;
    display       : block;
    text-transform: uppercase;
    transition    : background-color ease 0.2s;
    white-space   : nowrap;
    color         : var(--menu-item-color);
    font-weight   : normal;
}
.sub-menu > ul > li > a:hover {
    color           : var(--menu-item-hover-color);
    background-color: var(--menu-item-hover-background);
}
.sub-menu > ul > li.active > a {
    color           : var(--menu-item-active-color);
    background-color: var(--menu-item-active-background);
    cursor          : default;
}
li.sub-menu:hover > ul {
    visibility: visible;
}
#slide-menu .sub-menu-page-link,
#slide-menu ul > li.sub-menu .sub-menu-return,
#slide-menu ul > li.sub-menu > a.sub-menu-title {
    display: none;
}
#slide-menu .low-menu-sm {
    display: none;
}
/* -----------------------------------BURGER----------------------------------- */
#burger {
    display: none;
    cursor : pointer;
}
/* ----------------------------------BREACKPOINT--Point de rupture vers menu burger----- */
@media(max-width:992px) {

.toggle-menu.active {
--menu-color  : var(--color-2);
}

    /* ---------------------------SM--SLIDE-MENU------------------------------- */
    footer,
    main {
        padding-left: 0;
    }
    .container {
        padding-right: var(--bs-gutter-x,.75rem);
        padding-left : var(--bs-gutter-x,.75rem);
    }
    /*------------------------------------ MAIN ------------------------------------*/
    main {
        margin-top: var(--topbar-height-sm);
    }
    #main-menu {
                height: var(--topbar-height-sm);
        flex-direction: row;
        right: 0;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        background: #7769C7;
    
    }
    #main-menu .logo img {
        width  : auto;
        height : 100%;
        padding: 5px 1rem;
    }
    #main-menu .low-menu {
        width      : auto;
        flex-grow  : 2;
        display    : flex;
        align-items: center;
    }
    #slide-menu {
        position        : fixed;
        top             : var(--topbar-height-sm);
        left            : calc((var(--slide-menu-width) * -1) - 50px);
        flex-direction  : column-reverse;
        align-items     : flex-start;
        justify-content : flex-end;
        width           : var(--slide-menu-width);
        height          : calc(100vh - var(--topbar-height-sm));
        /* padding         : 1rem 0; */
        /* background-color: #fff; */
        transition      : left 0.2s ease;
        overflow-y: scroll;
    }
    #slide-menu > ul:not(.icon-menu) {
        width    : 100%;
        flex-wrap: wrap;
    }
    #slide-menu > ul > li {
        position: unset;
    }
    #slide-menu ul.icon-menu {
        flex-direction: row;
        margin-left   : 0;
        height        : var(--topbar-height);
    }
    #main-menu.menu-open #slide-menu {
        left: 0;
    }
    #slide-menu > ul > li > a {
        height         : auto;
        padding        : 0.6rem 1rem;
        justify-content: flex-start;
        border-top     : none;
        border-bottom  : none !important;
        width          : calc(100% - 2rem);
        margin-left    : 1rem;
        position       : unset;
    }
    #slide-menu > ul > li.active > a {
        /* background-color: var(--bg-light); */
    }
    #slide-menu > ul > li {
        width: 100%;
    }
    .sub-menu > ul {
        background-color: var(--bg-light);
        color           : #000;
    }
    .sub-menu > ul > li > a:hover {
        background-color: var(--color-1);
    }
    #main-menu.menu-open .mask-menu {
        top     : var(--topbar-height-sm);
        left    : 0;
        display : block;
        position: fixed;
        width   : 100vw;
        height  : calc(100vh - var(--topbar-height-sm));
    }
    /* -------------------------------SM--SUB-MENU------------------------------*/
    #slide-menu ul > li.sub-menu > a {
        display: none;
    }
    #slide-menu .sub-menu-page-link {
        display    : block;
        font-weight: bold;
    }
    #slide-menu ul > li.sub-menu > a.sub-menu-title {
        cursor         : pointer;
        display        : flex;
        justify-content: space-between;
        align-items    : center;
    }
    li.sub-menu > ul > li > a {
        padding: 0.6rem 1rem;
    }
    li.sub-menu > a:hover~ul,
    li.sub-menu:hover ul {
        visibility: hidden;
    }
    #slide-menu ul > li.sub-menu > ul {
        position  : fixed;
        top       : var(--topbar-height);
        left      : -100%;
        width     : var(--slide-menu-width);
        height    : calc(100% - 60px);
        min-width : unset;
        padding   : 1rem;
        z-index   : 100;
        transition: all ease 0.2s;
        background: var(--submenu-background);
    }
    #slide-menu ul > li.sub-menu > ul.active {
        visibility: visible;
        left      : 0;
        top       : var(--topbar-height-sm);
    }
    #slide-menu ul > li.sub-menu .sub-menu-return {
        display: block;
        cursor : pointer;
    }
    /* ---------------------------------BURGER--------------------------------- */
    #burger {
        right                      : 1rem;
        display                    : -webkit-box;
        display                    : -ms-flexbox;
        display                    : flex;
        -webkit-box-align          : center;
        -ms-flex-align             : center;
        align-items                : center;
        -webkit-box-pack           : center;
        -ms-flex-pack              : center;
        justify-content            : center;
        height                     : 60px;
        width                      : 60px;
        /* CODE SVG */
        cursor                     : pointer;
        -webkit-tap-highlight-color: transparent;
        transition                 : transform 400ms;
        -moz-user-select           : none;
        -webkit-user-select        : none;
        -ms-user-select            : none;
        user-select                : none;
    }
    #burger.active {
        transform: rotate(45deg);
    }
    #burger .line {
        fill          : none;
        transition    : stroke-dasharray 400ms, stroke-dashoffset 400ms;
        stroke        : var(--burger-color);
        stroke-width  : 3;
        stroke-linecap: round;
    }
    #burger .top {
        stroke-dasharray: 40 121;
    }
    #burger .bottom {
        stroke-dasharray: 40 121;
    }
    #burger.active .top {
        stroke-dashoffset: -68px;
    }
    #burger.active .bottom {
        stroke-dashoffset: -68px;
    }
    #main-menu .menu-right {
        margin-left    : auto;
        /* width          : 100%; */
        justify-content: space-around;
    }
    #main-menu .menu-right .icon-menu {
        margin: 0 auto;
    }
}
/* Point de rupture low-menu */
@media(max-width:564px) {
    #main-menu .low-menu {
        display: none;
    }
    #slide-menu .low-menu-sm {
        display       : flex;
        flex-direction: column;
        /* padding-top   : 2rem; */
        width         : 100%;
    }
}
/* Point de rupture logo / logo-square */
@media(max-width:768px) {
    #main-menu .logo {
        display: none;
    }
    #main-menu .logo-square {
        display: block;
    }
    #main-menu .logo-square img {
        height: var(--topbar-height-sm);
    }
}
/* Point de rupture mobile XS */
@media(max-width:470px) {
    #slide-menu {
        left: -100%;
    }
    #slide-menu,
    #slide-menu > ul,
    #slide-menu > ul > li.sub-menu > ul {
        width: 100%;
    }
    .icon-menu {
        position       : relative;
        top            : unset;
        right          : unset;
        margin-bottom  : 0.5rem;
        width          : 100%;
        justify-content: flex-start !important;
    }
    .icon-menu li {
        width: auto !important;
    }
}
/* ------------------------------------FIN------------------------------------ */