.header {
position: relative;
transition: all 0.3s;
z-index:11;
padding-top: 36px;
background: #fff;
}
.header-banner {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
background: url(../images/banner-header.jpg) no-repeat 50% calc(100% - 40px);
background-size: 100%;
z-index: -1;	
}
	

.header.tiny .navigation {
position: fixed;
top:36px; left:0; right:0;	
}

/* Avion */
/*#banner-avion {
}
#banner-avion::before {
content: '';
display: block;
width: 100%;
position: absolute;
top:0; right:0;	bottom:0; left:0;
background: url(../images/banner.png) no-repeat 100% 0;
background-size: auto 100%;
z-index:1;
}	*/		
	.toolbar {
	background: #000;
	position: fixed;
	top:0; left:0; right:0;	
	}
		.toolbar-inner {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		border-bottom:1px solid #888888;
		}
			/* Links toolbar - commons */
			.site-links,
			.site-tools {
			font-size:0;
			list-style-type: none;
			display: flex; /* Ajout à cause des liens réseaux sociaux */
			}
			.site-links {
			order:0;
			}
				.site-links li,
				.site-tools li,
				#site-lang {
				display: inline-block;
				font-size:1rem;
				}
					.site-links a,
					.site-help a,
					#site-lang button {
					display: block;
					padding:0.5rem;
					color:#F9FFF9;
					font-size:1.2rem;
					text-transform: uppercase;
					text-decoration: none;
					transition: all .2s;
					}
					.site-links a:hover,
					.site-help a:hover,
					#site-lang button:hover {
					color:#fff;
					background: #265E76;
					}
					.site-links li {
					border-right:1px solid #888888;
					}
					.site-help li {
					border-left:1px solid #888888;
					}
						/* Tous les liens "" */
						.site-links .social a {
						padding:0.4rem 0.5rem;	
						}
						.site-links .social a span {
							display: block;
							width: 1.4rem;
							height: 0;
							padding-top: 100%;
							overflow: hidden;
							background-size: 100%;
							background-repeat: no-repeat;
							background-position: 0 0 ;
							transition: all .2s;
							opacity: .8;
						}
						.site-links .social a:hover span {
						opacity:1;	
						}
			
						/* Socialfacebook */
						.site-links .social-facebook a span {
							background-image: url(../images/logo-facebook.svg);
						}
						/* Socialinsta */
						.site-links .social-instagram a span {
							background-image: url(../images/logo-instagram.svg);
						}
						/* Socialyoutube */
						.site-links .social-youtube a span {
							background-image: url(../images/logo-youtube.svg);
						}						
			
			/* Tools : help + lang */
			.site-tools {
			order:1;
			display: flex;
			text-align: right;
			}
				#site-lang {
				position: relative;
				}
					/* Button dropdown flags */
					#site-lang button {
					display: inline-block;
					cursor: pointer;
					text-align: center;
					background: transparent;
					border: 0 none transparent;
					line-height:1;
					position: relative;
					padding-right:1.2rem;
					}
						#site-lang button:after {
						content:'';
						display: inline-block;
						width: 0;
						height: 0;
						position: absolute;
						top:50%; right:.2rem;
						margin:-.2rem 0 0 0 ;
						border-style: solid;
						border-width: .4rem .4rem 0 .4rem;
						border-color: #F9FFF9 transparent transparent transparent;
						}
						#site-lang button:focus {
						background: #265E76;
						}
						#site-lang button:focus ~ #site-flags {
						display: block;
						max-height: 100px;
						}
					
					/* Flags */
					#site-flags {
					background: rgba(249, 255, 249, .8);
					max-height:0;
					overflow: hidden;
					transition: .4s;
					position: absolute;
					top: 100%; left:0; right:0;
					/*border:1px solid #88B3C7;
					box-sizing: border-box;*/
					}
						#site-flags a {
						box-sizing: content-box;
						display: block;
						width:1.6rem;
						height:0;
						padding:1.1rem 0 0 0;
						overflow: hidden;
						margin:.2rem auto;
						/* border:1px solid #88B3C7; */
						background-size:100% auto;
						background-repeat: no-repeat;
						background-position: 0 0;
						}
						#site-flags a:hover {
						border:1px solid #F9FFF9;
						}
						.translate-en {
						order:1;
						background: url(../images/flag_en.svg);
						}
						.translate-fr {
						order:0;
						background: url(../images/flag_fr.svg);
						}

			
			/* Responive menu buttons */
			.responsive-buttons {
			order:3;
			flex:1 0 auto;
			align-items: center;
			display: flex;
			justify-content: flex-end;
			text-align: right;
			}
				.responsive-buttons a {
				
				}
					#responsive-menu-button, #responsive-help-button {
    				display: inline-block; 
					height:0;
					padding-top:30px;
					width:30px;
					overflow: hidden;
					margin: 0 0.5rem 0 0;
					position: relative;
					vertical-align:middle;
					}
						#responsive-menu-button span, #responsive-help-button span {
						display: block;
						position: absolute;
						top:0; right:0; bottom:0; left:0;
						width: 100%;
						height:0;
						padding-top:100%;
						overflow: hidden;
						/* Couleur du bouton menu en responsive */
						/*background: #88B3C7;*/ 
						transition: all 0.3s;
						}
						#responsive-menu-button span, #responsive-help-button span {
						z-index: 999998;
						}
						#responsive-menu-button:before , #responsive-help-button:before{
						z-index: 999999;
						}
						#responsive-menu-button:hover span, #responsive-help-button:hover span{
						background-color: #919bcc;
						background-color: #8cd6ef;
						}
					
					/* Menu Button */
					#responsive-menu-button:before,
					#responsive-menu-button span:before,  
					#responsive-menu-button span:after {
					content : '';
					display: block;
					width: 70%;
					height:10%;
					background: white;
					position: absolute;
					left:15%;
					transition: all .3s;
					}
					#responsive-menu-button:before {
					top:15%; 
					}
					#responsive-menu-button span:before {
					top:45%; 
					}
					#responsive-menu-button span:after {
					bottom:15%; 
					}
					#responsive-menu-button.menu-opened:before {
					transform: rotate(45deg);
					top: 45%;
					}
					#responsive-menu-button.menu-opened span:after {
					transform: rotate(-45deg);
					top: 45%;
					}
					#responsive-menu-button.menu-opened span:before {
					width:0; height:0; opacity:0; 
					}
					/* Help Button */
					#responsive-help-button:before,
					#responsive-help-button span:before {
					display: block;
					content : '';
					} 
					#responsive-help-button:before, #responsive-help-button span:before {
					width: 70%;
					height:10%;
					background: white;
					position: absolute;
					left:15%;
					opacity:0;
					transition: all .3s;
					}
					#responsive-help-button:before {
					top:15%;
					}
					#responsive-help-button span:before {
					bottom:15%;
					}
					#responsive-help-button span:after {
					content : '?';
					display: block;
					position: absolute;
					top: 50%; left:0; bottom: 0; right:0;
					font-size:26px;
					margin-top:-13px;
					margin-top:-9px;
					text-align: center;
					font-weight: bold;
					color: #fff;
					}
					#responsive-help-button.menu-opened:before {
					opacity:1;
					transform: rotate(45deg);
					top: 45%;
					}
					#responsive-help-button.menu-opened span:before {
					opacity:1;
					transform: rotate(-45deg);
					top: 45%;
					}
					#responsive-help-button.menu-opened span:after {
					opacity:0;
					}
	
	/* Identity : logo + title */
	.site-identity {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	transition: all 0.3s;
	box-sizing: border-box;
	padding: 1% 0 1rem 0;
	}
		.site-title {			
		flex: 1 1 100%;
		order:2;
		color: #959595;
		text-transform: uppercase;
		font-size:2rem;
		line-height:2rem;
		transition: all 0.3s;
		width: auto;
		display: inline-block;
		box-sizing: border-box;
		padding: 0 0 1rem;
		font-weight: bold;
		/*text-shadow:0px 0px 2px rgba(0, 0, 0, 0.3);*/
		}
			.site-title .title-detail {
			color: #959595;
			display: inline-block;
			font-size:3.0rem;
			transition: all 0.3s;
			}
			.site-title .subtitle {
			display: block;
			display: inline-block;
			margin:1rem 0 0 0;
			font-size:2.6rem;
			color: #81afd6;
			transition: all 0.3s;
			}
		.site-logo {
		flex: 0 0 180px;
		min-width:80px;
		max-width:220px;
		transition: all 0.3s;
		}
			.site-logo a,
			.site-logo span {
			display: block;
			width: 100%;
			height:0;
			padding-top: 83.334%;
			/*padding-top: 45%;*/
			overflow: hidden;
			background: url(../images/logo_francevfr.svg) no-repeat 0 0;
			background-size:100%;
			}
		.site-identity img:not(.site-logo img) {
		flex: 1 1 auto;
		order:3;
		min-height: 150px;
		display: block;	
		}
			
	/* Navigation */
	.navigation {
	transition: all 0.3s;
	background: #f7f7f7;
	background: #f0f2f6;
	border-bottom: 2px solid #fff;
	/*box-shadow: 0 5px 5px -5px #333;
	box-shadow: rgb(218, 218, 229) 5px 5px -5px 1px;*/
	box-shadow: 0 5px 5px -5px rgb(218, 218, 229);
	}
		.navigation ul {
		font-size:0;
		text-align: center;
		list-style-type: none;
		}
			.navigation li {
			font-size: 1rem;
			display: inline-block;
			}
				.navigation a {
				display : block;
				padding:0.5rem 1rem;
				text-decoration: none;
				color:#7c7c7c;
				transition: all .2s;
				font-size:1.2rem;
				text-transform: uppercase;
				}
				.navigation a:hover,
				.navigation .active a{
				background: #fff;
				color:#81afd6;
				}