/* ----------------------------------CONFIG---------------------------------- */
:root {
    /* Layout */
    --topbar-height              : 80px;
    --logo-height                : 132px;
    --slide-menu-width           : 300px;
    /* La valeur de --menu-left-and-right-width est obligatoire pour centrer le logo au centre */
    --menu-left-and-right-width  : 153px;
    /* Colors */
    --topbar-background          : white;
    --submenu-background         : var(--light);
    --menu-item-color            : var(--dark);
    --menu-item-hover-color      : var(--color-1);
    --menu-item-hover-background : var(--color-2);
    --menu-item-active-color     : var(--dark);
    --menu-item-active-background: var(--color-1);
    --burger-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---------------------------------- */
#main-menu {
    z-index         : 100;
    position        : fixed;
    top             : 0;
    left            : 0;
    width           : 100%;
    padding         : 0;
    height          : var(--topbar-height);
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    background-color: var(--topbar-background);
    filter:drop-shadow(0 2px 10px rgb(0 0 0 / 14%)) drop-shadow(0 2px 5px rgb(0 0 0 / 0.32));
}
#main-menu .logo-square img {
    height : var(--logo-height);
    padding: 0 2rem;
}
#main-menu .logo img {
    height    : var(--logo-height);
    margin-top: 4rem;
}
#main-menu .logo-square,
#main-menu > .logo {
    display: none;
}
#main-menu .mask-menu {
    display         : none;
    background-color: rgb(54 37 88 / 81%);
}
#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--------------------------------- */
body {
    --slide-menu-sides-width: calc((var(--vw) / 2) - var(--logo-width) - var(--menu-left-and-right-width));
}
#slide-menu {
    display       : flex;
    flex-direction: row;
    align-items   : center;
    flex-grow     : 0;
    flex-shrink   : 0;
}
#slide-menu > ul {
    display       : flex;
    flex-direction: row;
    align-items   : center;
    position      : relative;
    flex-grow     : 0;
    flex-shrink   : 0;
    width         : var(--slide-menu-sides-width);
    /* width         : calc((100% - var(--logo-width) / 2)); */
}
#slide-menu > ul.left {
    justify-content: flex-end;
}
#slide-menu > ul > li {
    position: relative;
}
#slide-menu > ul > li > a {
    font-family       : var(--title-font);
    padding           : 0.25rem 10px;
    -webkit-transition: all ease 0.3s;
    transition        : all ease 0.3s;
    height            : var(--topbar-height);
    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;
    color             : var(--menu-item-color);
    white-space       : nowrap;
    text-transform    : uppercase;
    position          : relative;
    border-bottom     : 4px solid white;
}
#slide-menu > ul > li > a:hover {
    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); */
    border-bottom: 4px solid var(--color-1);
}
/* ---------------------------------Icon-menu---------------------------------- */
#main-menu .icon-menu {
    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------------------------------------*/
/* #slide-menu > ul > li.sub-menu > a {
    display: none;
} */
.sub-menu > ul {
    visibility      : hidden;
    position        : absolute;
    background-color: var(--topbar-background);
    min-width       : 100%;
    z-index         : 200;
}
.sub-menu > ul li {
    position: relative;
}
.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 .low-menu .content-left,
#slide-menu .low-menu .content-right,
#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;
}
/* -----------------------------------BURGER----------------------------------- */
#burger {
    display: none;
    cursor : pointer;
}
/* ----------------------------------BREACKPOINT--Point de rupture vers menu burger----- */
@media(max-width:767px) {
    /* ---------------------------SM--SLIDE-MENU------------------------------- */
    #main-menu > .logo {
        display: block;
    }
    #slide-menu .center-logo {
        display: none;
    }
    #slide-menu {
        position        : fixed;
        top             : var(--topbar-height);
        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));
        padding         : 1rem 0;
        background-color: #fff;
        transition      : left 0.2s ease;
    }
    #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;
    }
    #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);
        left    : 0;
        display : block;
        position: fixed;
        width   : 100vw;
        height  : calc(100vh - var(--topbar-height));
    }
    /* -------------------------------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;
    }
    #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 menu-right */
@media(max-width:700px) {
    #main-menu .menu-right {
        display: none;
    }
    #slide-menu .low-menu {
        display       : flex;
        flex-direction: column;
        padding-top   : 2rem;
        width         : 100%;
    }
    #slide-menu .low-menu .content-right {
        display: block;
    }
}
/* Point de rupture menu-left */
@media(max-width:564px) {
    #main-menu .menu-left {
        display: none;
    }
    #slide-menu .low-menu {
        display       : flex;
        flex-direction: column;
        padding-top   : 2rem;
        width         : 100%;
    }
    #slide-menu .low-menu .content-left {
        display: block;
    }
}
/* Point de rupture logo / logo-square */
@media(max-width:300px) {
    #main-menu .logo {
        display: none;
    }
    #main-menu .logo-square {
        display: block;
    }
}
/* 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------------------------------------ */