.header {
background:rgba(14, 101, 145, .6)  no-repeat -2px center;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0e6591+0,0e6591+100&0.9+0,0.6+100 */
background: -moz-linear-gradient(top,  rgba(14,101,145,1) 0%, rgba(14,101,145,0.7) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(14,101,145,1) 0%,rgba(14,101,145,0.7) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(14,101,145,1) 0%,rgba(14,101,145,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
position: fixed;
top:0; left:0; right:0;
box-shadow: 0 5px 5px -5px #333;
transition: all 0.3s;
z-index:11;
}
.header:before {
content : '';
display: block;
position: absolute;
top:0; right:0; bottom: 0; left:0;
background: url(../images/header.svg) no-repeat left center;
background-size: auto 40%;
z-index:-1;
}

/* Tiny Header : on scroll page */
.header.tiny .site-identity {
padding:.4rem;
}
.header.tiny .site-title {
font-size:1.4rem;
}
.header.tiny .subtitle {
font-size:1.2rem;
margin-top:.4rem;
/*display: inline-block;*/
}
.header.tiny .site-logo {
flex: 0 0 20%;
}
			
	.toolbar {
	background: #000;
	}
		.toolbar-inner {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		border-bottom:1px solid #88B3C7;
		}
			/* 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 #88B3C7;
					}
					.site-help li {
					border-left:1px solid #88B3C7;
					}
						/* Social */
						.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: url(../images/logo-facebook.svg) no-repeat 0 0;
						background-size:100%;
						transition: all .2s;
						opacity:0.8;	
						}
						.site-links .social a:hover span {
						opacity:1;	
						}
			
			/* 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);
						}
						.translate-de {
						order:2;
						background: url(../images/flag_de.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;
						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;
	align-items : center;
	padding:1rem 0;
	transition: all 0.3s;
	}
		.site-title {
		order:2;
		color: #8cd6ef;
		text-transform: uppercase;
		padding-left:2rem;
		font-size:2.2rem;
		transition: all 0.3s;
		}
			.site-title .title-delta {
			color: #fff;
			}
			.site-title .subtitle {
			display: block;
			margin-top:1rem;
			background: -webkit-linear-gradient(#e3f3c9, #76ceff);
  			-webkit-background-clip: text;
  			-webkit-text-fill-color: transparent;
			font-size:1.4rem;
			text-align: right;
			transition: all 0.3s;
			}
		.site-logo {
		flex: 0 0 30%;
		min-width:150px;
		transition: all 0.3s;
		}
			.site-logo a,
			.site-logo span {
			display: block;
			width: 100%;
			height:0;
			padding-top: 23.948%;
			overflow: hidden;
			background: url(../images/logo_deltasub.svg) no-repeat 0 0;
			background-size:100%;
			}
			
	/* Navigation */
	.navigation {
	background: #748698;
	background: #3E76A1;
	background: rgba(0, 0, 0, .4);
	}
		.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:#fff;
				transition: all .2s;
				font-size:1.2rem;
				text-transform: uppercase;
				}
				.navigation a:hover,
				.navigation .active a{
				background: #306B8A;
				}