/**
 * Required Variables
 */

#masthead {
  background:var(--white);
  position:fixed;
  width: 100%;
  text-align: center;
   -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s ;
  z-index:100;
}

#masthead.hidden {transform: translateY(calc(-1 * var(--header-height)));}
.site-content {padding-top: var(--content-padding-top);}

.flexwrap {display: flex;justify-content: space-between; align-items: center;}

.HeaderTop {width:100%;}
.HeaderBottom {width:100%;}

.site-branding {display:flex;align-items: center;column-gap: 3rem;}

.site-logo {position: relative;}
.site-logo svg {width: 13rem;height: 2.4rem;display:block;fill:var(--dark);}
.burger-top .site-logo svg {fill: var(--darklight);width: 13rem;height: 2.4rem;}

.header-group {display:flex;align-items: center;}
.header-group .direct-links {display:flex;align-items:center;justify-content:space-between;padding-right: 1rem;
 border-left: 1px solid var(--dark);padding-left: 1rem;height: 2rem;}



 .has-picto-home svg {height: 1.2rem;width: 1.2rem;fill: var(--white);position: relative;
  top: 0.125rem;vertical-align: top;display: inline;margin-right: 0.5rem;
-moz-transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}

.mobile-menu .has-picto-home svg {height: 1.5rem;width: 1.5rem;fill:var(--dark);
  top: 2px;}
.mobile-menu .has-picto-home:hover svg {height: 1.5rem;width: 1.5rem;fill:var(--darklight);
  top: 2px;}

.primary-menu-container .has-picto-home {padding-left:0 !important;border-right:1px solid var(--dark)}
.primary-menu-container .active-svg, .primary-menu-container .has-picto-home:hover svg {fill:var(--jaune);} 
.primary-menu-container ul {list-style:none;margin:0;padding:0}

.primary-menu-container .menu-wrapper li {
  display: inline-block;
  padding: 0.5rem 1.4rem;
  position: relative;
  line-height: 1.5;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.burger-menu-container .menu-wrapper li {
  display: block;
  padding: 0.625rem 0;
  position: relative;
  font-size: 1.8rem;
	text-align: left;
  line-height: 1.5;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;

}

.burger-menu-container .menu-wrapper li .sub-menu li {font-size: 1rem;}
.burger-menu-container .menu-wrapper li .sub-menu li:last-of-type {border-bottom:0}

.social-burger {display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  column-gap: 0.6rem;}
.burger-bottom {margin-top:1rem}

.primary-menu-container .menu-wrapper li a {font-family: 'Inter', sans-serif;font-size:0.9rem;font-weight:500;color:var(--gray); text-transform:uppercase;-moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}

.primary-menu-container .menu-wrapper li:hover > a,
.primary-menu-container .menu-wrapper a:focus,
.primary-menu-container .menu-wrapper .current-menu-item > a,
.primary-menu-container .menu-wrapper .sub-menu li.current-menu-item a,
.primary-menu-container .menu-wrapper .current-menu-ancestor > a,
.primary-menu-container .menu-wrapper .current_page_item > a,
.primary-menu-container .menu-wrapper .current_page_ancestor > a {
	color: var(--dark);}

.primary-menu-container .sub-menu {opacity: 0;
	visibility: hidden;
	position: absolute;
	left: 0;
	width: 12.5rem;
	background: var(--white);
	border: 0.063rem #f1f1f1 solid;
	box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.15);
	transition: 0.5s;
	transform: translateY(3.125rem);
	z-index: 0;
text-align:left;}
.primary-menu-container .menu-item-has-children:hover .sub-menu {opacity: 1;visibility: visible;transform: translateY(0);z-index: 1;}
.primary-menu-container .sub-menu li {display:block;padding:0.625rem 1.25rem;border-bottom:0.063rem solid #ddd}
.primary-menu-container .sub-menu li:last-of-type {border-bottom:0}
.primary-menu-container .menu-wrapper .sub-menu li a {color: var(--dark);}
.primary-menu-container .menu-wrapper .sub-menu li a:hover {color: var(--bleu);}


/*Burger*/
.burger-top {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;}

.mobile-menu {  background:transparent;
width:85%;
 height:auto;
 margin: auto;
 display: flex;
 flex-direction: column;
 flex-wrap: wrap;
 justify-content: space-around;
 padding-top:7rem;
 overflow:hidden;}


.burger-menu-container ul {width:100%}

.mobile-menu li a {color:var(--white);font-family: "neue-haas-grotesk-display",sans-serif;font-weight:700;-moz-transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out }
.mobile-menu li a:hover {text-decoration:underline}
.mobile-menu li .sub-menu {margin-top:0.625rem;margin-left: 1rem;}


html.menu-opened {overflow: hidden;scrollbar-gutter: stable;}
html.menu-closed { overflow: visible;}

.menu-background {
  background:var(--bleu);
  position: fixed;
    top: 0;
    width: 100%; /* 20% sur desktop */
    height: 100vh;
    -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s ;
    left: 0;
    display:flex; /* Caché après l'animation */
	flex-wrap:wrap;
	z-index:-1;
	
}
.menu-background.menu-open svg.burger-menu-deco {
	position: absolute;
    bottom: 0;
    right: 0;
    width: 70VW;
	height: 50VH;
/*transform: translateX(0%);*/
 -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s ;
transition-delay:.1s}
.menu-background.menu-closed svg.burger-menu-deco {
	position: absolute;
    bottom: 0;
    right: 0;
    width: 70VW;
	height: 50VH;
	/*transform: translateX(100%);*/}

/* État fermé : hors écran */
.menu-background.menu-closed {-webkit-transform: translateY(110%); transform: translateY(110%);}

/* État ouvert : visible */
.menu-background.menu-open {-webkit-transform: translateY(0);transform: translateY(0);}

.switcher {margin-left: 2rem;}
.switcher li {list-style:none;text-transform:uppercase}
.switcher li.current-lang {display:none}
.switcher li a {color:var(--dark); font-weight:600;text-decoration:underline; -moz-transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.switcher li a:hover {color:var(--dark)}


/*burger menu icon*/

.menuicon {width:1.5rem;height:1.5rem;padding-left:0.375rem; color:var(--dark);cursor:pointer; -webkit-transition: all 0s ease;
	-o-transition: all 0s ease;
	transition: all 0s ease;}
.mobile-menu .menuicon {margin-left:0.625rem}
 .mobile-menu .menuicon {color:var(--dark);float: right;}
.menuicon svg {display:inline-block; vertical-align:middle; height:1.5rem; width:auto;-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;fill:var(--darklight);
	-webkit-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);transform: rotate(-90deg);}
.open.menuicon svg {-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}


/* Icon  */

#nav-icon3, .nav-close {
  width: 24px;
  height: 18px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
	z-index: 0;
}
.burger-top .nav-close span {background: var(--dark);}
 #nav-icon3 span, .nav-close span {
  display: block;
  position: absolute;
  height:2px;
  width: 100%;
  background: var(--dark);
  border-radius:0.625rem;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}


/* Icon 3 & navclose */

#nav-icon3 span:nth-child(1), .nav-close span:nth-child(1) {
  top: 0;
}

#nav-icon3 span:nth-child(2), .nav-close span:nth-child(2), #nav-icon3 span:nth-child(3), .nav-close span:nth-child(3) {
  top:8px;
}

#nav-icon3 span:nth-child(4), .nav-close span:nth-child(4) {
  top:16px;
}

#nav-icon3.open span:nth-child(1), .nav-close.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2), .nav-close.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3), .nav-close.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4), .nav-close.open span:nth-child(4) {
  top: 1.125rem;
  width: 0%;
  left: 50%;
}

/* Search*/
#header-search-widget {display: table-cell;vertical-align: middle;}

.header-search svg {
	display: inline-block;
	text-decoration: inherit;
	vertical-align: middle;
 height: 1.2rem;
    width: 1.2rem;
    fill: var(--dark);
-moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;}

/*#header-search.opened:before {content: "\f406";}*/
#masthead.fixed-header .header-search:before {color:var(--white)}
.header-search {cursor: pointer;outline: none;position: relative;z-index:0;}
.header-search-wrap {background:var(--darklight);display:none;position:fixed;z-index:100;top:0;right:0;bottom:0;left:0;}
.search-container {background:transparent;width:50%;margin: auto;position: fixed;left: 0;right: 0;bottom:25%;top:25%;display:none;z-index:100}
.close-searchandfilter {display:none}
.form-container {display: flex;width: 100%;justify-content: space-between;flex-wrap: wrap; align-items: center;border-bottom: 2px solid var(--white);}
#searchform {text-decoration:none !important;text-align: center;margin: auto;}


.search-container input#s {
width:90%;
background:transparent;	
text-align: left;
margin: auto;
border:none;
color:var(--white);
outline:none;
padding: 1.25rem 0;	}

.loupe {display: inline-block;
  height: auto;
  width: 3rem;
  vertical-align: middle;}

.loupe svg {
	display: inline-block;
	vertical-align: text-bottom;
	margin: auto;
	fill:var(--white);
    height:2.5rem;
	width: 2.5rem;
-moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;}

#searchform button {width:10%;background:transparent;border:0;padding:0;cursor:pointer;text-align: right;}
.heightfix {width:50%;display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: auto;
  position: fixed;
  top: 25%;
  bottom: 25%;
  left: 0;
	right: 0;}

#header-search-widget .header-search:hover svg {fill:var(--dark)}
#header-search-widget .header-search:hover .search-label {color:var(--dark)}
#header-search-widget .header-search svg, #header-search-widget .header-search .search-label{ -moz-transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out }

.search-label {display:none}

.search-container ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 color:var(--white); /*Change the placeholder color*/
     opacity: 1; /*Change the opacity between 0 and 1*/
}
.search-container ::-moz-placeholder { /* Firefox 19+ */
 color:var(--white); /*Change the placeholder color*/
     opacity: 1; /*Change the opacity between 0 and 1*/
}
.search-container :-ms-input-placeholder { /* IE 10+ */
  color:var(--white); /*Change the placeholder color*/
     opacity: 1; /*Change the opacity between 0 and 1*/
}
.search-container :-moz-placeholder { /* Firefox 18- */
  color:var(--white); /*Change the placeholder color*/
	opacity: 1;}


#toTop {

background:var(--white);
bottom:1.25rem;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
color: var(--dark);
display: none;
padding:0.6rem;
position: fixed;
right:1.25rem;
text-decoration: none;
vertical-align: top;
z-index:1;
cursor:pointer}
#toTop svg {width: 1.1rem;
  height: auto;
  transform: rotate(-90deg);}