/* ----------------------------------CONFIG---------------------------------- */
:root {
/* Layout */
--top-menu-height: 55px;
--bottom-menu-height: 55px;
--menu-height-sm: 80px;
--logo-height: 70px;
--slide-menu-width: 300px;
--slide-menu-padding-y: 16px;
--menu-right-height: 40px;
/* renseigner une valeur ici pour centrer le slide-menu, sinon laisser "unset" */
--menu-left-and-right-width: unset;
--menu-left-and-right-width: 296px;
/* Colors */
--topbar-background: #fff;
--submenu-background: #fff;
--menu-item-color: black;
--menu-item-hover-color: var(--color-1);
--menu-item-hover-background: none;
--menu-item-active-color: var(--color-1);
--menu-item-active-background: none;
--burger-color: var(--color-1);
}
/*------------------------------------ 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---------------------------------- */
:root {
--topbar-height: calc(var(--top-menu-height) + var(--bottom-menu-height));
}

#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 2rem;
}

#main-menu .logo-square {
display: none;
}

#main-menu .mask-menu {
display: none;
background-color: #c1424ced;
}

#main-menu .menu-left {
display: flex;
height: 100%;
align-items: center;
width: 600px;
}

#main-menu .menu-right {
display: flex;
justify-content: flex-end;
align-items: center;
padding: var(--slide-menu-padding-y) 0;
height: var(--topbar-height);
width: 300px;
}
/* ---------------------------------SLIDE-MENU--------------------------------- */

#slide-menu {
display: flex;
flex-direction: column;
align-items: flex-end;
flex-grow: 0;
flex-shrink: 0;
padding: var(--slide-menu-padding-y) 0;
}

#slide-menu > ul {
display: flex;
flex-direction: row;
align-items: center;
height: 55px;
}

#slide-menu ul > li {
position: relative;
height: 100%;
align-items: center;
display: flex;
}

#slide-menu > ul > li > a {
padding: 0.6rem 1rem;
-webkit-transition: all ease 0.3s;
transition: all ease 0.3s;
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;
border-radius: 10px;
font-size: 16px;
font-family: var(--title-font);
}

#slide-menu > ul.top > li > a {
height: calc(var(--top-menu-height) - var(--slide-menu-padding-y));
font-size: 16px;
}

#slide-menu > ul.bottom > li > a {
height: calc(var(--bottom-menu-height) - var(--slide-menu-padding-y));
}

#slide-menu > ul.top {
height: 65px;
}

#slide-menu > ul.bottom {
height: 45px;
}

#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);
font-size: 17px;
}
/* ---------------------------------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;
}

#main-menu .icon-menu > li > a i:hover {
color: var(--color-3);
}
/* ---------------------------------PHONE-LINK--------------------------------- */

#main-menu .call-to-action {
display: flex;
align-items: center;
height: var(--menu-right-height);
}

#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.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;
}

#main-menu .nav-tabs .nav-link {
height: 100%;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border: none;
color: var(--dark);
font-size: 17px;
font-weight: 500;
font-family: var(--title-font);
}

#main-menu .nav-tabs .nav-link.active {
background: var(--light);
}

#main-menu .nav-tabs .nav-link.active i {
transform: rotate(180deg);
}

#main-menu ul.nav-tabs {
border: none;
}

#main-menu .tab-content .tab-pane .bloc-img {
width: 40%;
}

#main-menu .tab-content .tab-pane .bloc-texte {
width: 60%;
padding: 2.5rem;
}

#main-menu .tab-pane.active.show {
width: 100vw;
position: absolute;
height: calc(100vh - var(--topbar-height));
left: -50px;
top: var(--topbar-height);
background: var(--bg-light);
border-radius: 0 0 40px 40px;
margin: 0 50px;
overflow: hidden;
}
/* ----------------------------------BREACKPOINT--Point de rupture vers menu burger----- */
@media(max-width:1399px) {
:root {
--topbar-height: var(--menu-height-sm);
}

#slide-menu > ul.bottom,
#slide-menu > ul.top,
#slide-menu ul > li {
height: auto;
}
/* ---------------------------SM--SLIDE-MENU------------------------------- */
#slide-menu {
position: fixed;
top: var(--topbar-height);
left: calc((var(--slide-menu-width) * -1) - 50px);
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
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: 100%;
}

#slide-menu .phone-link {
border: none;
width: 100%;
margin: 0;
display: flex;
}

#slide-menu .phone-link {
background: var(--bg-light);
margin-top: 0.75rem;
padding-left: 32px;
}

#slide-menu > ul > li > a.phone-link:hover {
background-color: var(--color-1);
}

#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;
margin: 0.5rem 0;
}
/* ---------------------------------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 {
flex-direction: row;
margin-left: auto;
width: auto;
/* width          : 100%; */
justify-content: space-around;
}

#main-menu .menu-left {
width: auto;
}

#main-menu .menu-right .icon-menu {
margin: 0 auto;
}
}
/* Point de rupture menu-right */
@media(max-width:767px) {
#main-menu .menu-right {
display: none;
}

#slide-menu .low-menu {
display: flex;
flex-direction: column;
padding: 1rem 2rem;
width: 100%;
order: 6;
}
}
/* 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------------------------------------ */