/* ----------------------------------CONFIG---------------------------------- */
:root {
    /* Layout */
    --topbar-height              : 80px;
    --logo-height                : 50px;
    --slide-menu-width           : 300px;
    /* renseigner une valeur ici pour centrer le slide-menu, sinon laisser "unset" */
    --menu-left-and-right-width  : unset;
    --menu-left-and-right-width  : 300px;
    /* Colors */
    --topbar-background          : var(--color-2);
    --submenu-background         : var(--light);
    --menu-item-color            : white;
    --menu-item-hover-color      : white;
    --menu-item-hover-background : transparent;
    --menu-item-active-color     : white;
    --menu-item-active-background: transparent;
    --burger-color               : white;
}
/*------------------------------------ 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);
    box-shadow      : var(--shadow-1);
}
#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--------------------------------- */
#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;
}
#slide-menu ul > li {
    position: relative;
}
#slide-menu > ul > li > a {
    font-family    : var(--title-font);
    padding        : 0.25rem 10px;
    transition     : all ease 0.2s;
    height         : var(--topbar-height);
    display        : -webkit-box;
    display        : -ms-flexbox;
    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : var(--menu-item-color);
    white-space    : nowrap;
    text-transform : uppercase;
    position       : relative;
    border-bottom  : solid 4px transparent;
    font-weight    : 300;
}
#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);
    border-bottom   : solid 4px var(--color-1);
}
#slide-menu ul > li.active > a {
    color           : var(--menu-item-active-color);
    background-color: var(--menu-item-active-background);
    border-bottom   : solid 4px var(--color-1);
}
/* ---------------------------------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.pro {
    background    : var(--color-2-alt);
    color         : white;
    font-weight   : 300;
    text-transform: uppercase;
}
#main-menu .call-to-action.pro:hover {
    background: var(--color-2);
    color     : white;
}
#main-menu .call-to-action {
    display    : flex;
    align-items: center;
    height     : 100%;
    padding    : 1rem 2rem;
    transition : 0.2s ease;
}
#main-menu .call-to-action.number {
    font-size     : 16px;
    white-space   : nowrap;
    background    : var(--color-1);
    color         : white;
    font-weight   : 300;
    text-transform: uppercase;
}
#main-menu .call-to-action.number:hover {
    background: var(--color-1-alt);
    color     : white;
}
/* ---------------------------------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;
}
/* -----------------------------------BURGER----------------------------------- */
#burger {
    display: none;
    cursor : pointer;
}
/* ----------------------------------BREACKPOINT--Point de rupture vers menu burger----- */
@media(max-width:1299px) {
    /* ---------------------------SM--SLIDE-MENU------------------------------- */
    #main-menu .call-to-action.pro {
        font-size     : 16px;
        white-space   : nowrap;
        background    : var(--color-2-alt);
        color         : white;
        font-weight   : 300;
        text-transform: uppercase;
    }
    #main-menu .call-to-action.pro:hover {
        background: var(--color-2);
        color     : white;
    }
    #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: var(--color-2-alt);
        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); */
        position  : relative;
        transition: 0.2s ease;
    }
    #slide-menu ul > li.active > a::after {
        content   : '';
        position  : absolute;
        top       : 50%;
        left      : 0;
        height    : 57%;
        width     : 4px;
        background: var(--color-1);
        transform : translateY(-50%);
    }
    #slide-menu ul > li:hover > a::after {
        content   : '';
        position  : absolute;
        top       : 50%;
        left      : 0;
        height    : 57%;
        width     : 4px;
        background: var(--color-1);
        transform : translateY(-50%);
    }
    #slide-menu ul > li {
        width: 100%;
    }
    .sub-menu > ul {
        background-color: var(--topbar-background);
        color           : var(--menu-item-color);
    }
    .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%; */
    }
    #main-menu .menu-right .icon-menu {
        margin: 0 auto;
    }
}
/* Point de rupture menu-right */
@media(max-width:630px) {
    #main-menu .menu-right {
        display: none;
    }
    #slide-menu .low-menu {
        display       : flex;
        flex-direction: column;
        padding-top   : 2rem;
        width         : 100%;
    }
    #main-menu .call-to-action.pro {
        background: var(--color-2);
        color     : white;
    }
    #main-menu .call-to-action.pro:hover {
        background: var(--color-2-alt);
        color     : white;
    }
}
/* Point de rupture logo / logo-square */
@media(max-width:768px) {
    #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------------------------------------ */