p strong {
font-weight: 600;
}
h1, h2 {
text-wrap: balance;
} :root {
--bg-blue: #222839;
--bg-gradient: linear-gradient(261deg, #222839 32.44%, #3D4867 97.47%);
--layoutTransition: 1s cubic-bezier(0.77, 0, 0.175, 1);
--menuBarTransition: .5s cubic-bezier(0.84, 0.01, 0.27, 0.98);
--sidebarWidth: 110px;
}
body {
overflow-x: hidden;
}
.et-l--header {
position: sticky;
top: 0;
background: var(--bg-blue);
z-index: 10;
}
.megamenu-container {
position: fixed;
top:0;
right: 0;
width: 100%;
height: 100%;
background: var(--bg-gradient);
z-index: 10;
transition: transform var(--menuBarTransition);
transform: translate3d(-100%, 0, 0);
}
.megamenu-container.--opened {
transform: translate3d(0, 0, 0);
}
.lwp-hide-mobile-menu.et_pb_menu .et_pb_menu__menu,.lwp-hide-mobile-menu.et_pb_fullwidth_menu .et_pb_menu__menu {
display: flex!important;
}
.lwp-hide-mobile-menu .et_mobile_nav_menu {
display: none;
}
body:has(.megamenu-container.--opened) {
overflow: hidden;
}
body.--no-scroll {
overflow: hidden;
}
.menu-toggle:hover {
cursor: pointer;
}
.menu-toggle:hover .menu-bar-container {
transform: scale(1.1);
}
.menu-bar {
width: 32px;
height: 1px;
background: currentColor;
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
transition: transform var(--menuBarTransition);
}
.menu-bar-container {
position: relative;
width: 32px;
height: 16px;
margin-top: 12px;
transition: transform var(--layoutTransition);
}
.megamenu-container .et_pb_menu .et_pb_menu__menu>nav>ul {
flex-direction: column;
}
.megamenu-container .et_pb_menu .et_pb_menu__menu>nav>ul>li {
font-size: unset;
line-height: 1.3;
align-items: center;
}
.menu-item::after {
content: '―';
display: inline-block;
font-size: 42px;
color: white;
margin-left: 8px;
transform: translateX(10px);
opacity: 0;
transition: all var(--menuBarTransition);
}
.menu-item a {
opacity: 0.5;
}
.menu-item:hover a,
.menu-item.current-menu-item a {
opacity: 1;
}
.menu-item:hover::after,
.menu-item.current-menu-item::after {
transform: translateX(0);
opacity: 1;
}
body:has(.megamenu-container.--opened) .menu-bar {
transform: rotate(-45deg);
}
body .menu-bar {
transform: translateY(-4px);
}
body:has(.megamenu-container.--opened) .menu-bar:nth-child(2) {
transform: rotate(45deg);
}
body .menu-bar:nth-child(2) {
transform: translateY(4px);
}
.footer-container {
background: var(--bg-gradient);
}
@media screen and (min-width: 768px) {
.et-l--header {
background: white;		
}
.home .et-l--header {
background: transparent !important;
}
#menu-main-menu {
margin-left: 3vw;
}
.menu-item::after {
font-size: 52px;
}
.header-container::before {
content: '';
position: fixed;
background: #222839;
top: 0;
left: 0;
width: var(--sidebarWidth);
height: 100vh;
}
.megamenu-container {
position: fixed;
top:0;
width: calc(100% - var(--sidebarWidth));
transform: translate3d(calc(-100% - var(--sidebarWidth)), 0, 0);
background: var(--bg-gradient);
}	
#et-main-area {
margin-left: var(--sidebarWidth);
}
}
@keyframes rotate-quarter-before {
0% {
transform: translate3d(-50%, -50%, 0) rotate(0deg);
}
11.11% {
transform: translate3d(-50%, -50%, 0) rotate(90deg);
}
100% {
transform: translate3d(-50%, -50%, 0) rotate(90deg);
}
}
@keyframes rotate-quarter-after {
0% {
transform: translate3d(50%, 50%, 0) rotate(0deg);
}
11.11% {
transform: translate3d(50%, 50%, 0) rotate(90deg);
}
100% {
transform: translate3d(50%, 50%, 0) rotate(90deg);
}
}
.decoration-col {
position: relative;
}
.decoration-col::before,
.decoration-col::after {
content: '';
position: absolute;
width: 150px;
height: 150px;
background-image: url(//matignon-domiciliation.fr/wp-content/themes/divi-child/assets/square.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.decoration-col::before {
top: 0;
left: 0;
transform: translate3d(-50%, -50%, 0);
animation: rotate-quarter-before 5s ease-in-out infinite;
}
.decoration-col::after {
bottom: 0;
right: 0;
transform: translate3d(50%, 50%, 0);
animation: rotate-quarter-after 5s ease-in-out infinite 0.15s;
}
@media screen and (min-width: 768px) {
.decoration-col::before,
.decoration-col::after {
width: 200px;
height: 200px;
}
}
.polylang-switcher-wrapper {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
font-size: 16px;
line-height: 1;
}
.polylang-switcher-wrapper svg {
color: var(--bg-blue);
}
.polylang-switcher-wrapper li {
list-style: none;
padding: 0;
margin: 0;
font-weight: 500;
opacity: 0.3;
transition: all 0.3s ease;
}
.polylang-switcher-wrapper li.current-lang,
.polylang-switcher-wrapper li:hover  {
opacity: 1;
}
.megamenu-container .polylang-switcher-wrapper a,
.megamenu-container .polylang-switcher-wrapper svg {
color: white;
}