/* FIN PODOM */

/********************************/
/***** MASTHEAD ***/
/********************************/
.site-header{
	height:189px;
	background:#fff;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	transition: 0.65s height;
	z-index:99;

	.admin-bar &{
		top:32px;
	}

	.site-branding{
		width:100px;
		transform: translate(0px,35px);
		transition: 0.35s;
		transform-origin: center left;
		>a{
			display:block;

			svg{
				vertical-align: top;
			}
		}
	}

	&.Masthead--sticky{
		height:80px;
		.site-header-width{
			//transform:translate(0px,0px);
		}
		.site-branding{
			transform: scale(0.83) translate(0px,-13px);
		}
		@media screen and (min-width: 1024px) {
			#site-navigation{
				transform: translate(0px,24px);
			}
		}
	}
}


.site-header-container{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
}


.menu-toggle{
	display:none;
}
@media screen and (min-width: 1024px) {
	#site-navigation{
		transform: translate(0px,75px);
		transition:0.35s;
	}
}
/***********************************************************************************/
/****************** MENU PRINCIPALE *************/
/***********************************************************************************/

.nav-menu{
	margin:0px;
	padding:0px;
	list-style: none;

	display:flex;
	> li{
		margin-left: 0.5em;
		&:first-child{
			margin-left:0px;
		}
		> a{
			@include font-size(1);
			color:$color__tchatbooster_bleuf;
			padding:0.5em 0.4em;
			font-weight:700;
			transition: 0.35s color;
			@media screen and (min-width: 1200px) {
				@include font-size(1.125);
				padding:0.5em 0.7em;
			}
			&:hover{
				color:$color__tchatbooster_orange;
			}
		}

		&.active_menu{
			a{
				color:$color__tchatbooster_orange;
			}
		}
	}
}







/* 
	/////////////////////////// 
	GESTION UNIQUEMENT DU MENU
	//////////////////////////
*/



/* DESIGN DU BOUTON POUR MOBILE */
.menu-toggle {
	padding: 0px;
	width: 40px;
	height: 40px;
	border: 0px;
	outline: 0px;
	background:none;

	&:active, &:focus,&:hover{
		background:none;
	}
}
.menu-toggle .txt {
	font-size: 0;
	visibility: hidden;
}
.menu-toggle .menu {
	position: absolute;
	left: 5px;
	top: 16px;
	z-index: 100;
	width: 30px;
	height: 15px;
	transition: .2s ease-in-out;
	cursor: pointer;
}

.menu-toggle .hamburger:after, .menu-toggle .hamburger:before {
	transition: .2s ease-in-out;
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background: #000;
}

.menu-toggle .hamburger {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 24px;
	height: 3px;
	background: #000;
	display: block;
	transform-origin: center;
	transition: .2s ease-in-out;


	.toggled &{
		background: #fff;

		&:before, &:after{
			background: #fff;
		}
	}

}


.menu-toggle .hamburger:before {
	top: -9px;
}
.menu-toggle .hamburger:after {
	bottom: -9px;
}

.toggled .hamburger {
	width:26px;
	background:#fff;
	&:before, &:after{
		width:26px;
		background:#fff;
	}
}

.toggled .hamburger {
	transform: rotate(45deg);
}
.toggled .hamburger:after {
	transform: rotate(90deg);
	bottom: 0;
}
.toggled .hamburger:before {
	transform: rotate(90deg);
	top: 0;
}

/* FIN DESGIN POUR BOUTON MOBILE */	

.menu-toggle{
	display: none;
}




/* Format labtop */
@media screen and (max-width: 1023px) {
		
	.site-header{
		// transition:background 0.4s;
		height:120px;

		.admin-bar &{
			top:46px;
		}

		&-container{

		}
		.site-branding{
			 width:200px;
			 transform: translate(0, 0px);
		}

		&.Masthead--sticky{
			height:60px;

			.site-branding{
				   transform: scale(.62) translate(0, -40px);
			}
		}
	}

	/* MENU MOBILE ! */
	.menu-toggle{
		position: fixed;
		top:0px;
		right: 7px;
		display: block;
		z-index:2;
		transition:top 0.35s;

		top:44px;

		.admin-bar &{
			top:90px;
		}
	
		.Masthead--sticky &,.toggled &{
			top:12px;
			.admin-bar &{
				top:58px;
			}
		}

	}

	#site-navigation{
		 .container_menu{
			position: fixed;
		    left: 0;
		    top:0px;
		    width:100%;
		    z-index:-1;
		    bottom: -92px;
		    overflow: hidden;
		 	z-index: 1;
		 	height:0px;
	    	transition: height 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;

	    	background:$color__tchatbooster_bleuf;

	    	ul{
	    		transform: translate3d(0, -100vh, 0);
				-webkit-transition: -webkit-transform 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
				transition: -webkit-transform 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
				transition: transform 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
				transition: transform 0.9s cubic-bezier(0.165, 0.84, 0.44, 1),-webkit-transform 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);

				flex-direction:column;
				text-align:center;
				height:100%;
				padding:50px 0px;
				margin:0px;

				li{
					margin:auto 0px;
					
					&:after{
						display:none;
					}

					a{
						@include font-size(1.25);
						color:#fff;
						letter-spacing:0.03em;
					}
					
					&.active_menu{
						a{
							color:#212121;
						}
					}
				}
				@media screen and (max-height: 470px) {
					padding:70px 0px;
				}
    		}
    	}

    	
		&.toggled{

			 .container_menu{
				height: calc((var(--vh, 1vh) * 100));
	        	transition: height 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
				
	        	ul{
				 -webkit-transform: translateZ(0);
       			 transform: translateZ(0);
       			  padding:20% 0px 20% 0px;
       			  padding-top:25%;
       			  padding-bottom:30%;

       			 @media screen and (min-height: 700px) {
       			 	  padding:40% 0px 45% 0px;
       			 }
       			 @media screen and (max-height: 470px) {
       			 	  padding:40px 0px 60px 0px;
       			 }

       			 @media screen and (max-height: 320px) {
       			 	padding:30px 0px 30px 0px;

       			 }

       			 //   -webkit-transform: translate3d(0, 360px, 0);
       				// transform: translate3d(0, 360px, 0)
				}

        	}
			
		}
	}


	// #site-navigation.toggled ul {
	// 	display: block;
	// 	padding-bottom: 20px;
	// }
	#header #menu{
		float: none;
	}
	#menu-primary li{
		float: none;
		border-bottom:1px solid #e0e0e0;
		width: auto;
	}

	#menu-primary li:last-child{
		border-bottom: none;
	}
	
	#menu-primary li a{
		padding: 10px 20px;
		line-height: 1em;
		text-transform: none;
	}
	#menu-primary li a:hover{
		background: #f5f5f5;
	}

}