/**
 * @file
 * The header components.
 *
 * It includes styles for the header itself and their
 * component as the logotype or the main menu.
 */

/**
 * Global header rules
 */

/**
 * Header
 */
.site-header__inner{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: flex-start;
	position: relative;
	/* z-index:3; */
}
.site-logo img{
	width:192px;
	height:174px;
	vertical-align: middle;
}
@media screen and (max-width: 1500px) {
	.site-header{
		margin: 0;
	}
}
@media screen and (max-width: 1024px) {
	.header{
		overflow: hidden;
	}
	.region-header{
		width:100%;
		text-align: center;
		padding:0em 0em 1em 0;
	}
	.block-system-branding-block{
		margin: 0 auto;
		display: block;
	}
	.site-logo img{
		width:140px;
		height:127px;
		vertical-align: middle;
		float: left;
	}
}
@media screen and (max-width: 900px) {
	.header{
		display: block;
	}
	.site-header{
		display: block;
	}
	.region-header{
		margin: 0 auto;
		width: 100%;
		padding-bottom: 0;
	}
	.block-system-branding-block{
		margin: 0 auto;
		display: block;
		padding: 0;
	}
	/* .image-header{
		display: none;
	} */

	.site-logo img{
		float: none;
	}
}


/*---------------------------------------------------------------------------------------------*/
/**
 * Menu principal
 */

.site-logo,
.menu-secondaire {
 	display: inline-block;
 	vertical-align: top;
 }

 @media screen and (max-width: 1024px) {
	 .site-logo, .menu-secondaire {display : block;}
 }

 @media screen and (max-width: 900px) {
	.site-logo, .menu-secondaire {display: inline-block;}
}

div#block-ccthore-branding {
  position: absolute;
  z-index: 20;
  left: 20px;
  top: 20px;
}

@media screen and (min-width: 1000px) {
  div#block-ccthore-branding {
    position: absolute;
    z-index: 20;
    left: 10%;
    top: 20px;
  }
}

@media screen and (min-width: 1600px) {
  div#block-ccthore-branding {
    position: absolute;
    z-index: 20;
    left: 15%;
    top: 20px;
  }
}

.site-header-wrapper{
	position: relative;
	margin-top:-223px;
}
.site-primary-menu {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  justify-content: center;
}
.menu-principal{
	list-style-type: none;
	padding: 0;
	position: absolute;
  bottom: 0;
	left: 0;
	right: 0;
	width:100%;
	margin: auto;
	background-color: #075146;
}
.menu-principal .menu--level-0{
	margin:0;
	padding:0;
	display: flex;
	flex-direction: row;
	align-items: stretch;
}
.menu-principal .menu__item--level-0{
	position: relative;
	display: flex;
	align-items: center;
}
.menu-principal .menu__link{
  display: block;
  text-decoration: none;
	color:white;
}
.menu-principal li .menu__link.is-active{
	color:white;
}
.menu-principal .menu__item--level-0:after{
	content:'';
	width:1px;
	height:100%;
	background-color:#fff;
	position: absolute;
	right:0px;
	top:50%;
	transform:translateY(-50%);
}
.menu-principal .menu__item--level-0:before{
  content:'';
  display: block;
  position:absolute;
  width:100%;
  height:2px;
  bottom:-2px;
  left:0;
  z-index:5;
  display: none;
}





.menu-principal .menu__item--level-0:last-child:after{
	display: none;
}
.menu-principal .menu__item--level-0 .menu__link{
	padding: 0rem 1.25rem;
	position:relative;
	font-weight: 600;
}
.menu-principal .menu__item--level-0 > .menu__link{
	text-transform: uppercase;
}
.menu-principal .menu__item--level-0:nth-child(3):before{
	/* background-color:#f3a230; */
	height:3px;
}
.menu-principal .menu__item--level-0:nth-child(3) .menu--level-1{
	/* background-color:#f3a230; */
}
.menu-principal .menu__item--level-0:nth-child(4):before{
	/* background-color:#8b7d72; */
	height:3px;
}
.menu-principal .menu__item--level-0:nth-child(4) .menu--level-1{
	/* background-color:#8b7d72; */
}
.menu-principal .menu__item--level-0:nth-child(5):before{
	/* background-color:#F9564F; */
	height:3px;
}
.menu-principal .menu__item--level-0:nth-child(5) .menu--level-1{
	/* background-color:#F9564F; */
}
.menu-principal .menu__item--level-0:nth-child(6):before{
	/* background-color:#015670; */
	height:3px;
}
.menu-principal .menu__item--level-0:nth-child(6) .menu--level-1{
	/* background-color:#015670; */
}
.menu-principal .menu__item--level-0:nth-child(7):before{
	/* background-color:#7B1E7A; */
	height:3px;
}
.menu-principal .menu__item--level-0:nth-child(7) .menu--level-1{
	/* background-color:#7B1E7A; */
}
.menu-principal .menu__item--level-0:nth-child(8):before{
	/* background-color:#404040; */
	height:3px;
}
.menu-principal .menu__item--level-0:nth-child(8) .menu--level-1{
	/* background-color:#404040; */
}
.menu-principal .menu__item--level-0:first-child .menu__link{
	text-indent: -999em;
	overflow: hidden;
	width: 70px;
	height: 30px;
}
.menu-principal .menu__item--level-0:first-child{
  display: none;
}
@media screen and (min-width:900px) {
	.menu-principal .menu__item--level-0:hover:before{
	  display: block;
	}
  .menu-principal .menu__item--level-0:first-child{
    background-image: url("../images/icon-home.svg");
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: center;
    display: inherit;
  }
}
@media screen and (max-width: 1500px) {
	.menu-principal .menu--level-0{
		margin:0;
		padding:0;
		font-size: 1rem;
	}
}
@media screen and (max-width: 1300px) {
	.menu-principal .menu--level-0{
		font-size: 0.85rem;
	}
}
@media screen and (max-width: 1100px){
	.menu-principal .menu--level-0{
		font-size: 0.75rem;
	}
	.menu-principal .menu--level-0 .menu__item--level-0:after{
		height:100%;
	}
	.menu-principal .menu__item--level-0 .menu__link{
		padding: 0.25rem 1rem;
	}
}
@media screen and (max-width: 1024px) {
	.menu-principal .menu--level-0{
		font-size: 0.8rem;
	}
	.menu-principal .menu__item--level-0 .menu__link {
		padding: 0.25rem 0.8rem;
	}
}
@media screen and (max-width:900px){
	.region-highlighted{
		margin-top:0;
	}
	.menu-principal{
    position: absolute;
    display: none;
    top: 10rem;
    z-index: 5;
    bottom: unset;
	}
	.menu-principal.is-active{
		display: block;
	}
	.menu-principal .menu--level-0,
	.menu-principal .menu__item--level-0{
		flex-direction: column;
	}
	.menu-principal .menu__item--level-0{
		/* border-bottom:1px solid #fff; */
	}
	.menu-principal .menu__item--level-0:after{
		display: none;
	}
	.menu-principal .menu__item--level-0 .menu__link{
		padding: 1.25rem 2rem;
		width: 100%;
    font-size: 15px;
	}

  .menu-principal .menu__item--level-1 .menu__link{
		padding: .25rem 2rem;
		width: 100%;
    font-size: 15px;
  }

	.menu-principal .menu__item--level-0:first-child .menu__link{
		height:50px;
	}
  .menu--main .menu__item--level-0.menu__item--expanded > .menu__link::after,
  .menu--main .menu__item--level-1.menu__item--expanded > .menu__link::after,
  .menu--main .menu__item--level-0.menu__item--expanded.is-active > .menu__link::after,
  .menu--main .menu__item--level-1.menu__item--expanded.is-active > .menu__link::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../images/chevron-right.svg);
    position: absolute;
    top: 50%;
    right: 5%;
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }

  .menu--main .menu__item--level-0.menu__item--expanded.is-active > .menu__link::after, .menu--main .menu__item--level-1.menu__item--expanded.is-active > .menu__link::after {
    transform: translate(-50%,-50%) rotate(90deg);
  }
}


  @media screen and (min-width: 900px) {
    .menu-principal .menu__item--level-1 .menu__link {
      padding: 1rem;
    }
  }












/**
  Refonte 2023 - Submenu 2 elements
*/


  .menu-principal .menu--level-0 li:nth-child(1) .menu--level-1 {
    display: block;
    width: fit-content;
  }

  .menu-principal .menu--level-0 li:nth-child(2) .menu__item--level-1 ul li a.menu__link {
    padding: 0.5rem 2rem;
    background: unset;
    border-top: unset;
  }
  .menu-principal .menu--level-0 li:nth-child(2) .menu__item--level-1 span.submenu-wrapper.menu__link {
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
    padding: 1rem 0;
    border-bottom: 1px solid #fff;
    width: 80%;
    margin: 0 2rem;
  }
  .menu-principal .menu--level-0 li:nth-child(2) .menu--level-1 ul.menu.menu--level-1{
    display: flex;
    flex-direction: column;
    top: unset;
    min-width: unset;
    padding: unset;
    padding-top: 0.8rem;
    gap: unset;
  }

  .menu-principal .menu__item--level-1.menu__item--expanded > .menu__link::after {
    display: none;
  }


@media screen and (min-width:900px) {
  .menu-principal .menu--level-0 li:nth-child(2):hover .menu--level-1{
    display: flex;
    width: fit-content;
    top: 62px;
    width:unset;
    min-width: 680px;
    padding: 2.5rem 3.75rem;
    gap: 2rem;
  }
  .menu-principal .menu--level-0 li:nth-child(2) .menu--level-1 .menu__item--level-1{
    width: 50%;
  }

  .menu-principal .menu--level-0 li:nth-child(2) .menu__item--level-1 ul li a.menu__link {
    padding: 0.5rem 0;
    background: unset;
    border-top: unset;
  }
  .menu-principal .menu--level-0 li:nth-child(2) .menu__item--level-1 ul li a.menu__link:hover {
    color: #cddd6c;
  }

  .menu-principal .menu--level-0 li:nth-child(2) .menu__item--level-1 span.submenu-wrapper.menu__link {
    padding: 1rem 0;
    border-bottom: 3px solid #fff;
    margin: unset;
  }
  .menu-principal .menu--level-0 li:nth-child(2) .menu--level-1 ul.menu.menu--level-1{
    display: flex;
    flex-direction: column;
    top: unset;
    min-width: unset;
    padding: unset;
    padding-top: 0.8rem;
    gap: unset;
  }
}






/*----------------------------------------------------------------------*/
/*Sous menu du menu principal*/
.menu-principal .menu--level-1 {
	display: none;
	position: absolute;
	left: 0;
	top:calc(100% + 2px);
	z-index: 5;
	background-color: #247575;
	padding: 2.5rem 2.75rem;
	margin: 0;
	width:300px;
}
.menu-principal .menu__item--level-1{
	display: block;
	/* border-bottom: 1px solid #fff; */
	position: relative;
}
.menu-principal .menu__item--level-1:last-child{
	border-bottom: none;
}
.menu-principal .menu__item--level-1 .menu__link{
	padding: 0.6rem 0;
	display: block;
	font-weight: 200;
}

.menu-principal .menu__item--level-1 ul {
	position: relative;
    max-width: 100%;
    padding: 0;
}

.menu-principal .menu__item--level-1 ul li a.menu__link {
	border-top: 1px solid white;
    padding-left: 3em;
    background: rgba(255, 255, 255, 0.1);
}


@media screen and (min-width:900px) {
	.menu-principal .menu__item--level-0:hover .menu--level-1 {
		display: block;
    margin-top: -2px;
	}
}

@media screen and (max-width:900px){
	.menu-principal .menu--level-1 {
		position: static;
		width:100%;
		padding:0;
	}
	.menu-principal .menu__item--level-1{
		padding:0.5rem 2rem;
		background-color: #247575;
	}
	.menu-principal .submenu-active{
		display: block;
	}
}


/*----------------------------------------------------------------------*/
/**
 * Bouton recherche
 */
.search-button, .bloc-recherche .form-actions input{
	background-color: #19544d;
	border: none;
	text-align: center;
  text-decoration: none;
  display: inline-block;
  height:51.2px;
  width:51.2px;
  background-image:url('../images/icon-search.svg');
  background-size:19px;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  text-indent:-999em;
}

.search-button {
	background-color: unset;
  overflow: unset;
  text-indent:unset;
  background-image:unset;
  text-align: unset;
}
.search-button:hover{
	cursor: pointer;
}
.search-button.is-active{
	background-image:url('../images/icon-close.svg');
  background-position: 0rem 4.4rem;
}
@media screen and (min-width: 900px) {
  .search-button.is-active{
    background-image:url('../images/icon-close.svg');
    background-position: 1.7rem;
  }
}

@media screen and (max-width: 1500px) {
	.search-button, .bloc-recherche .form-actions input{
		height:48.55px;
  	width:48.55px;
	}
}
@media screen and (max-width: 1350px) {
	.search-button, .bloc-recherche .form-actions input{
		height:46.4px;
  	width:46.4px;
	}
}
@media screen and (max-width:900px) {
	.search-button {
		display: none;
	}
  .search-button.active{
    display: inline-block;
    position: absolute;
    z-index: 999;
    width: 100%;
    top: 36.5rem;
    border-top: 1px solid #fff;
	}
  .search-button{
    background-position: left 2rem;
    padding: 2rem
  }
}
/**
 * Zone recherche
 */
.bloc-recherche{
  position: absolute;
  right: 0;
  top: -100%;
  left: 0;
  z-index: -1;
  /* transition: all 0.5s; */
      z-index: 9;
      width: 70%;
}
.bloc-recherche.is-active{
  top: 100%;
  /* transition:all 0.5s; */
}
.bloc-recherche .form-item{
	padding:0;
	margin:0;
}
.bloc-recherche .form-search{
	width: calc(100% - 2em);
	border:0;
	padding:16.4px 1em;
	background-color:#0C9373;
	color:#fff;
}
.bloc-recherche .form-actions{
	position: absolute;
	right:0;
	top:0;
}
@media screen and (max-width: 1500px) {
	.bloc-recherche .form-search{
		padding: 15.75px 1em;
	}
	.bloc-recherche .form-actions{
		right:-48.55px;
	}
}
@media screen and (max-width: 1350px) {
	.bloc-recherche .form-search{
		padding: 13.7px 1em;
	}
	.bloc-recherche .form-actions{
		right:-46.4px;
	}
}
@media screen and (max-width:900px) {
	.bloc-recherche{
    /* top: 36rem;

    z-index: 9999;
    padding-left: 4rem; */
	}
  .bloc-recherche.is-active{
    top: 41rem;
    z-index: 9999;
    /* padding-left: 4rem; */
  }
}
/**
 * Page recherche
 */
.search-result__title{
	margin:1em 0 0;
}
.search-result__title a{
	text-decoration: none;
	color:#0C9373;
}
.search-results p{
	margin:0;
}


/**
 * Icone home
 */
.home-button{
	background-color: black;
	border: none;
	text-align: center;
  text-decoration: none;
  display: inline-block;
  padding: 0.85rem 1.25rem;
}

/*---------------------------------------------------------------------------------------------*/
/**
 * Site Main Nav RESPONSIVE
 */
.menu-toggle{
  line-height:0;
  margin: 1rem auto;
  display: block;
  text-align: center;
  position: absolute;
  z-index: 20;
  right: 20px;
  top: 4rem;
}
.menu-toggle__button{
  height: 20px;
  width:30px;
  padding: 0;
  line-height:0;
  text-indent: -999em;
  background-color: transparent;
  border: none;
  text-align: center;
  position: relative;
}
@media screen and (min-width: 901px) {
  .menu-toggle__button{
  	display:none;
  }
}
/*
=== Button bar  animation ===
*/
.menu-toggle__bar{
  position: absolute;
  width: 30px;
  height: 4px;
  background-color: #fff;
  top: 50%;
  display: block;
  -webkit-transition: all ease .25s;
  -o-transition: all ease .25s;
  transition: all ease .25s;
  border-radius: 150px;
}
.menu-toggle__bar:first-child {
  top: 0%;
}
.menu-toggle__bar:last-child {
  top: 100%;
}
.is-active .menu-toggle__bar {
  opacity: 0; /* The central bar is not visible if button is active */
}
.is-active .menu-toggle__bar:first-child,
.is-active .menu-toggle__bar:last-child {
  /* If the button is active, the burger icon is turning into a cross icon */
  top: 45%;
  opacity: 1;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.is-active .menu-toggle__bar:last-child {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


/**
 * Refonte 2023 - bouton recherche menu principal
 */

.menu__search {
	border: none;
  text-decoration: none;
  display: inline-block;
  text-align: left;
  position: relative;
  margin-left: 4rem;
  padding-bottom: 6rem!important;
}
.menu__search::before {
  position: absolute;
  content: "";
  height: 63px;
  width: 79px;
  background-image:url('../images/icon-search.svg');
  background-size:19px;
  background-position: center;
  background-repeat: no-repeat;
  top: 0rem;
  left: 0rem;
  margin-left: -2rem;
}


@media screen and (min-width: 900px) {
  .menu__search {
    background-color: #F36D2D;
    text-align: center;
    overflow: hidden;
    text-indent:-999em;
    height: 63px;
    width: 79px;
    background-image:url('../images/icon-search.svg');
    background-size:19px;
    background-position: center;
    background-repeat: no-repeat;
    padding-bottom: unset!important;
    margin: 0;
  }
  .menu__search::before {
    content: unset;
  }
}