@charset 'utf-8';
 body.nav-open {
overflow: hidden;
}
.header {
position: sticky;
top: 0;
z-index: 20;
width: 100%;
padding: 2rem 0 2rem 0;
background-color: var(--color-blanc);
transition: background 300ms ease-in!important;
font-family: 'Roboto', serif;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-flow: column wrap;
align-items: flex-start;
align-content: center;
justify-content: space-around;
}
.device {
z-index: -1000;
display: block;
visibility: hidden;
width: 0;
height: 0;
pointer-events: none;
} .logo {
align-self: flex-start;
}  .header .header-right .social-icons{
gap: 10px;
}
.header .header-right .social-icons i{
font-size: 1.7rem;
}
.header .header-right .social-icons a:hover i{
color: var(--color-noir);
} .search-wrapper{
position: relative;
z-index: -1;
width: 100%;
transform: translateY(-105%);
opacity: 0;
transition: all .3s ease-in;
}
.search-open .search-wrapper{
background-color: var(--color-beige);
transform: translateY(0);
transition: all .1s ease-out;
width: 100%;
opacity: 1;
z-index: 5;
}
.headerSearchFrame {
z-index: 100;
width: auto;
margin: 0;
}
.search-open .headerSearchFrame {
z-index: 99;
transform: none;
}
.search-animate .headerSearchFrame,
.search-open .headerSearchFrame,
.search-open.search-animate .headerSearchFrame {
transition: opacity .3s ease-out;
}
body.search-open .headerSearchButton{ }
.icon-close,
body.search-open .icon-loupe{
display: none;
}
.icon-loupe,
body.search-open .icon-close{
display: block;
}
.headerSearchButton{
position: absolute;
right: 0;
z-index: 5;
display: block;
padding: 0 15px;
border: none;
text-decoration: none;
outline: none!important;
border-radius: 0;
cursor: pointer;
background: none;
transition: none!important;
}
.headerSearchField{
padding: 7px 15px;
background: none;
border: none;
}
.headerSearchFieldset{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.headerSearchFormSubmit{
padding: 0 15px;
text-transform: uppercase;
cursor: pointer;
background: none;
outline: none;
border: none;
border-radius: 0;
background-color: var(--color-bleu);
color: var(--color-blanc);
}
.headerSearchForm .headerSearchField::placeholder{
font-weight: 400;
color: var(--color-gris);
font-size: var(--font-xs);
text-transform: uppercase;
letter-spacing: 0.2rem;
}
.headerSearchForm .headerSearchField:focus{
border: none!important;
} .nav {
z-index : -1;
opacity: 0;
position: fixed;
overflow: hidden;
overflow-y: auto;
width: 100%; left: 0;
top: 3em;
padding: 0 1em;  pointer-events: none;
-webkit-overflow-scrolling: touch;
}
.nav, .wpml-ls {
color: hsla(0, 0%, 100%, 1);
}
.nav-open .nav {
transform: none;
pointer-events: auto;
opacity: 1;
z-index: 99;
}
.nav-animate .nav {
transition: all 300ms ease-in;
}
.nav-open.nav-animate .nav {
transition: all 300ms ease-out;
}
.nav-open .header{
background-color: var(--color-blanc)!important;
transition: background 300ms ease-in;
}
.nav > ul > li {
margin-bottom: 1.5rem;
} 
.nav a, .wpml-ls a {
display: inline-block; font-weight: 400;
text-align: center;
text-transform: uppercase;
text-decoration: none;
letter-spacing: .05rem;
color: var(--color-bleu);
cursor: pointer !important;
}
.nav .current-menu-ancestor > a,
.wpml-ls .wpml-ls-current-language a {
color: var(--color-bleu-alt);
} .nav .sub-menu {
overflow: hidden; max-height: 100vh;
transition: max-height 500ms ease;
}
.nav .sub-menu.collapsed {
max-height: 100vh;
transition: max-height 1.25s ease;
}
.nav .sub-menu a {
font-size: var(--font-m);
text-transform:none;
white-space: nowrap;
} .burger {
z-index: 101;
position: absolute;
right: 20px;
top: -7px;
}
.burger button {
position: relative;
display: block;
width: 3em;
height: 3rem;
margin: 0;
padding: 0;
outline: none;
border: none;
cursor: pointer;
background: none;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
pointer-events: auto;
}
.burger span {
display: block;
position: absolute;
height: 2px;
width: 50%;
top: 50%;
left: 30%;
border-radius: 1px;
background: #000;
transform: rotate(0deg);
transition: all .25s ease-in-out;
}
html:not(.no-touchevents) .burger span:not(:nth-child(3)) {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
}
.burger span:nth-child(1) {
margin-top: -7px;
}
.burger span:nth-child(4) {
margin-top: 7px;
}
.nav li.link-ext a{
position: relative;
}
.nav li.link-ext a::after{
font-family: 'sacem';
content: "\e903";
position: absolute;
right: -20px;
top: 0;
font-size: 1.5rem;
} .nav-open .burger span {
background: var(--color-noir);
width: 50%;
}
.nav-open .burger span:nth-child(1), .nav-open .burger span:nth-child(4)  {
width: 0;
margin-top: 0;
left: 50%;
transition: all .25s ease-in-out;
}
.nav-open .burger span:nth-child(2) {
transform: rotate(45deg);
transition: all .25s ease-in-out;
background: var(--color-bleu);
}
.nav-open .burger span:nth-child(3) {
transform: rotate(-45deg);
transition: all .25s ease-in-out;
background: var(--color-bleu);
}
.nav .current-post-ancestor > a,
.nav .current-category-ancestor > a,
.nav .current-menu-parent > a,
.nav .current-menu-ancestor > a,
.nav .current-menu-item > a{
color: var(--color-bleu-alt);
}
.touchevents .menu-item-has-children > a,
.touchevents .nav .sub-menu .current-menu-item a,
.touchevents .nav .sub-menu li a:hover,
.wpml-ls .wpml-ls-current-language a,
.touchevents .wpml-ls a:hover {
color: var(--color-bleu-alt);
text-shadow: -.015em 0 var(--color-bleu-alt), .015em 0 var(--color-bleu-alt);
} .wpml-ls {
z-index: 100;
position: absolute;
right: 15px;
opacity: 0;
pointer-events: none;
transform: translateX(-.5em);
transition: transform .1s ease-in, opacity .1s ease-in;
}
.nav-open .wpml-ls {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
transition: transform .3s ease-in, opacity .1s ease-in;
}
.wpml-ls ul {
flex-direction: row;
}
.wpml-ls li::before {
content: '';
display: inline-block;
width: 1px;
height: .65em;
margin-right: -.25em;
}
.wpml-ls li:first-child::before {
display: none;
} @media only screen and (min-width: 340px) and (max-width: 991px){
.header{
overflow: hidden;
transition: all .3s ease-out;
}
.logo {
position: relative;
z-index: 99;
}
.header-right{
width: 100%;
opacity: 1;
transition: all 200ms ease-in;
}
.nav-open .header-right {
opacity: 0;
transition: all 200ms ease-out;
}
.search-open .header{
overflow: visible;
}
.top-menu-items{
position: absolute;
}
.search-wrapper{
position: relative;
z-index: -1;
width: 100%;
transform: translateY(200%);
opacity: 0;
transition: all .3s ease-in;
}
.search-open .search-wrapper{
opacity: 1;
transform: translateY(70px);
transition: all .3s ease-out;
}
.top-menu-items .headerSearchButton {
right: 75px;
top: 0;
}
.top-menu-items .headerSearchButton i{
font-size: 1.2em;
color: var(--color-gris);
}
.nav{
overflow: hidden;
padding-top: 0.5em;
background-color: var(--color-blanc);
height: 100vh;
}
.nav .menu{
padding-top: 5em;
line-height: 3rem;
}
.header ul{
align-content: flex-start;
padding: 20px;
}
.nav ul.sub-menu{
flex-wrap: nowrap;
}
.nav a, .wpml-ls a {
font-weight: 400;
letter-spacing: 0;
transition: all .2s ease-in;
color: var(--color-bleu);
font-size: var(--font-l);
}
.nav > ul > li {
margin-bottom: 3rem;
}
.nav a:hover,
.nav .current-menu-ancestor > a,
.touchevents .nav .current-menu-item a,
.no-touchevents .nav > ul > li:hover a {
color: var(--color-bleu-alt);
}
.no-touchevents .nav > .sub-menu > li a {
letter-spacing: normal;
}
.nav li.menu-item-1185 a:focus{
color: var(--color-blanc);
text-shadow: -.015em 0 var(--color-bleu-alt), .015em 0 var(--color-bleu-alt);
}
} @media only screen and (max-width: 736px) {
.device {
content: 'phone-portrait';
}
.logo {
max-width: 145px;
}
} @media only screen and (min-width: 433px) {
.device {
content: 'phone-landscape';
}
.header{ }
} @media only screen and (min-width: 737px) {
.device {
content: 'tablet-portrait';
}
} @media only screen and (min-width: 801px) {
.device {
content: 'tablet-landscape';
}
}  @media only screen and (min-width: 992px) {
.device {
content: 'monitor';
}
.search-wrapper{
opacity: 0;
z-index: 5;
width: 25vw;
}
body.search-open .search-wrapper{
opacity: 1;
width: 25vw;
}
.headerSearchButton{
position: relative;
z-index: 10;
opacity: 1;
}
body.nav-open {
overflow-y: visible;
}
.topbar {
justify-content: space-between;
}
.header {
padding: 1rem 0 3rem 0;
}
.header ul {
width: 100%;
flex-direction: row;
align-items: center;
justify-content: flex-end;
margin-top: 5px;
}
.header .logo{
padding: 1.7rem 0 0 0;
}
.nav {
opacity: 1;
z-index: 99;
display: flex;
overflow: visible;
position: relative;
width: auto;
left: auto;
top: auto;
flex-grow: 1;
padding: 0;
margin: 0;
color: var(--color-noir);
background: none;
transform: none;
will-change: auto;
pointer-events: auto;
}
.nav li {
position: relative;
padding-left: 1vw;
padding-right: 1vw;
}
.nav li:last-child {
padding-right: 0;
}
.nav > ul > li {
margin-bottom: 0;
}
.nav > ul > li {
margin-bottom: 0;
}
.nav a, .wpml-ls a {
font-size: var(--font-m);
line-height: var(--lineh-m);
font-weight: 400;
transition: all .2s ease-in;
}
.wpml-ls a {
padding: 0 0 0 15px;
font-size: var(--font-s);
line-height: var(--lineh-s);
font-weight: 700;
} .nav .sub-menu li a {
padding-bottom: 7px;
color: var(--color-bleu-alt);
}
.nav ul li a.active,
.nav ul li a:hover{
opacity: 1;
color: var(--color-bleu-alt);
}
.nav .sub-menu li a{
border:none!important;
}
.nav .current-page-ancestor a,
.nav .current-menu-ancestor ul li.current-menu-item a,
.nav .current-menu-item ul li.current-menu-item a,
.wpml-ls .wpml-ls-current-language a {
color: var(--color-bleu-alt);
} .nav .sub-menu {
overflow: visible;
flex-direction: column;
align-items: flex-start;
position: absolute;
width: auto;
max-height: none;
left: 0;
padding: 2.5em 1em 1em 0;
pointer-events: none;
transition: none;
}
.nav .sub-menu.collapsed {
max-height: none;
}
.nav .sub-menu::before {
content: '';
z-index: -1;
position: absolute;
display: block;
width: 200vw;
height: 0%;
left: -100vw;
top: 1.5em;
background-color: var(--color-grisc);
pointer-events: none;
transition: all .25s ease-in;
box-shadow: 0 15px 15px -15px rgba(0,0,0,0.15) inset;
}
.nav .sub-menu li {
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(-.5em);
transition: transform .1s ease-in 0s, opacity .1s ease-in 0s;
} .nav-open .nav .sub-menu {
pointer-events: auto;
}
.nav-open .nav .sub-menu li {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateY(0);
transition: transform .2s ease-in .2s, opacity .2s ease-in .2s;
}
.nav-open .nav .sub-menu::before {
height: 90%;
transition: height .35s ease-out;
}
.burger {
display: none;
} .wpml-ls, .nav-open .wpml-ls {
z-index: auto;
position: relative;
right: auto;
opacity: 1;
pointer-events: auto;
transform: none;
transition: none;
padding: 0;
}
}
@media only screen and (min-width: 1180px) {
.nav li {
position: relative;
padding-left: 2vw;
padding-right: 2vw;
}
} @media only screen and (min-width: 1340px) {
.device {
content: 'monitor-laptop-narrow';
}
} @media only screen and (min-width: 1540px) {
.device {
content: 'monitor-large';
}
.nav li {
padding-left: 30px;
padding-right: 30px;
}
} @media only screen and (min-width: 1860px) {
.device {
content: 'monitor-wide';
}
} @media only screen and (min-width: 2440px) {
.device {
content: 'monitor-giant';
}
}