/* ----------------------------------CONFIG---------------------------------- */
:root {
    /* Layout */
    --topbar-height              : 80px;
    --logo-height                : 50px;
    --slide-menu-width           : unset;
    /* renseigner une valeur ici pour centrer le slide-menu, sinon laisser "unset" */
    --menu-left-and-right-width  : unset;
    --menu-left-and-right-width  : unset;
    /* Colors */
    --topbar-background          : transparent;
    --submenu-background         : var(--light);
    --menu-item-color            : var(--dark);
    --menu-item-hover-color      : var(--dark);
    --menu-item-hover-background :  transparent;
    --menu-item-active-color     : var(--dark);
    --menu-item-active-background: transparent;
    --kebab-color               : var(--dark);
    
}
/*------------------------------------ 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---------------------------------- */
/* -----------------------------------kebab----------------------------------- */
/* #kebab {
    display: none;
    cursor : pointer;
} */


#kebab.active {
    transform: rotate(90deg);
}

.div-kebab{
    margin-right                      : 1rem;
    width:38px;
    height:38px;
    color:var(--dark);
    background:white;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content: center;
    padding:0.5rem;
    cursor                     : pointer;
    box-shadow: var(--shadow-2);
}
.div-kebab #kebab{
    width:100%;
    height:100%;
    transition                 : transform 400ms;
    
}
#main-menu {
    z-index         : 100;
    position        : fixed;
    top: 0;
    right: 0;
    width: calc(50px + 1rem);
    padding         : 0;
    height          : var(--topbar-height);
    display         : flex;
    justify-content : end;
    align-items     : center;
    background-color: var(--topbar-background);
   
}
#slide-menu {
    position        : fixed;
    top             : var(--topbar-height);
    right           : -1000px;
    background-color: transparent;
    transition      : right 0.2s ease;
    box-shadow: var(--shadow-2);
}
#slide-menu ul:not(.icon-menu) {
    width    : 100%;
}
#slide-menu ul > li {
    position: relative;
    display:flex;
    justify-content:center;
}
#slide-menu ul.icon-menu {
    flex-direction: row;
    margin-left   : 0;
    height        : var(--topbar-height);
}
#main-menu.menu-open #slide-menu {
    right            : 10px;
}
#slide-menu ul{
    flex-direction: row;
    border-radius: 5px;
    /* flex-wrap: wrap; */

}
@media screen and (max-width: 715px) {
    #slide-menu ul{
        flex-direction: column;
    }
}
#slide-menu ul > li > a {
    /* position: absolute;
    bottom: 10px; */
    font-size:14px;
}
#slide-menu ul > li > img {
    width:294px;
    height:200px;
}
#slide-menu ul > li {
    width: 100%;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

#main-menu.menu-open .mask-menu {
    top     : var(--topbar-height);
    left    : 0;
    display : block;
    position: fixed;
    width   : 100vw;
    height  : calc(100vh - var(--topbar-height));
}

#main-menu .logo img,
#main-menu .logo-square img {
    height : var(--logo-height);
    padding: 0 1rem;
}
#main-menu .logo-square {
    display: none;
}
#main-menu .mask-menu {
    display         : none;
    /* background-color: rgba(0, 0, 0, 0.8); */
}
#main-menu .menu-left {
    display    : flex;
    height     : 100%;
    align-items: center;
    width      : var(--menu-left-and-right-width);
}
#main-menu .menu-right {
    display        : flex;
    justify-content: flex-end;
    height         : 100%;
    align-items    : center;
    width          : var(--menu-left-and-right-width);
}
/* ---------------------------------SLIDE-MENU--------------------------------- */



/* ---------------------------------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;
}
/* ---------------------------------Call to action--------------------------------- */
#main-menu .call-to-action {
    display    : flex;
    align-items: center;
}
#main-menu .call-to-action .number {
    font-size  : 16px;
    white-space: nowrap;
}
/* ---------------------------------SUB-MENU------------------------------------*/
.sub-menu > ul {
    visibility      : hidden;
    position        : absolute;
    background-color: var(--topbar-background);
    min-width       : 100%;
    z-index         : 200;
}
.sub-menu > ul > li > ul {
    left: 100%;
    top : 0;
}
#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,
.sub-menu > ul > li:hover > a {
    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 > a:hover~ul,
li.sub-menu:hover > ul {
    visibility: visible;
}
#slide-menu .low-menu,
#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;
}



/* ----------------------------------BREACKPOINT--Point de rupture vers menu kebab----- */