/* Votre Style */

/* largeur des conteneur*/
.container{
	margin:0 auto;
	max-width: 95%;
	width: 1280px;
}


h2{
	font-family: 'Lora', serif;
	font-weight: 400;
	font-size: 40px;
	font-size: 2.5rem;
	text-transform: uppercase;
}
	h2 strong{
		font-weight: 700;
	}



/* Header */
header{
	background: url('../img/header.jpg') no-repeat 0 0 / cover;
	border-bottom: 6px solid #fdde32;
	height: 435px;
	padding: 1px;
}
	.header-txt{

	}
		header h1{
			color: #fff;
			font-family: 'Montserrat', sans-serif;
			font-weight: 700;
			font-size: 40px;
			font-size: 2.6rem;
			font-weight: 700;
			line-height: 1.3;
			margin: 20% 0 40px 60px;
			text-transform: uppercase;
		}
		header p{
			color: #fff;
			font-size: 19px;
			font-size: 1.2rem;
			margin: 0 0 0 60px;
			text-transform: uppercase;
		}

	.header-img{
		position: relative;
	}
		header img{
			margin-left: 30px;
			position: absolute;
			top: 160px;
			width: 374px;
			z-index: 9;
		}


/* Bloc Signe de reconnaissance */
.bloc-signe{

}
	.bloc-titre-signe{
		text-align: right;
	}
		.bloc-titre-signe h2{
			margin: 40px 0;
		}
		.bloc-titre-signe img{
			width: 545px;
		}

	.bloc-txt-signe{
		font-weight: 300;
		margin-top: 150px;
	}
		.bloc-txt-signe h3{
			font-size: 1.1rem;
			font-weight: 700;
			margin: 0 0 20px;
			text-transform: uppercase;
		}
		.bloc-txt-signe p{
			margin: 0
		}


	.bloc-img-signe{

	}


/* Bloc Engagements */
.bloc-engagements{
	background: url('../img/fond-engagements.jpg') no-repeat 0 0 / cover;
	margin-top: 25px;
	padding: 60px 0 70px;
	text-align: center;
}
	.bloc-engagements h2{
		color: #fff;
		line-height: 1;
		margin: 0 0 50px;
	}
		.bloc-engagements h2 strong{
			display: block;
		}

	.bloc-engag-inte{
		background: #fff;
		display: inline-block;
		vertical-align: top;
		width: 43%;
	}
	.bloc-engag-1{
		padding: 30px 55px 30px 30px;
	}
	.bloc-engag-2{
		padding: 30px;
		margin: 60px 0 0 -50px
	}

		.bloc-engag-inte .lien-video{
				-moz-transition: opacity 0.5s linear;
				-webkit-transition: opacity 0.5s linear;
			transition: opacity 0.5s linear;
		}
		.bloc-engag-inte .lien-video:hover, .bloc-engag-inte .lien-video:focus{
			opacity: 0.7
		}
			.bloc-engag-inte img{
				
			}

		.modaal-content-container{
			text-align: center;
		}
			.modaal-content-container h3{
				font-size: 1.2rem;
				font-weight: 400;
				margin-bottom: 20px;
				text-transform: uppercase;
			}

		.bloc-engag-inte h3{
			font-weight: 300;
			margin: 15px 0 0;
		}
			.bloc-engag-inte a{
				color: #000;
				display: block;
				text-decoration: none;
			}


/* Bloc Pilliers de la charte */
.bloc-piliers{
	background: #f3f3f3;
	text-align: center;
}
	.bloc-piliers .container{
		background: url('../img/fond-piliers.jpg') no-repeat top right;
		padding: 50px 0;
	}
		.bloc-piliers h2{
			background: #fff;
			display: inline-block;
			line-height: 1.1;
			margin: 0;
			padding: 40px 100px;
			position: relative;
			text-align: center;
			vertical-align: top;
			z-index: 9;
		}
			.bloc-piliers h2 strong{
				display: block;
			}

		.slide-piliers{
			margin-top: -100px;
			text-align: left;
		}
			.slide-piliers-inte{

			}
				.img-slide{

				}
					.slide-1 img{
						margin-top: 140px
					}
					.slide-2 img{
						margin-top: 60px
					}
					.slide-3 img{
						margin-top: 70px
					}
					.slide-4 img{
						margin-top: 50px
					}
					.slide-5 img{

					}


				.txt-slide{
					margin-top: 120px;
				}
					.txt-slide h3{
						border-bottom: 1px solid #000;
						font-family: 'Lora', serif;
						font-weight: 700;
						font-size: 27px;
						font-size: 1.7rem;
						margin: 0 0 20px 20px;
					}
					.txt-slide p{
						margin-left: 20px;
					}
					.txt-slide ul{
						margin: 0 0 0 -5px;
					}
						.txt-slide li{
							background: url('../img/puce-liste.png') no-repeat 0 8px / 20px auto;
							padding: 0 0 10px 27px;
						}
							.txt-slide li span{
								font-weight: 300;
							}


		/* Slider */
		.slick-loading .slick-list{
			background: #fff url('../img/ajax-loader.gif') center center no-repeat;
		}

		/* Arrows */
		.slick-prev, .slick-next{
			background-color: transparent;
			background-image: url('../img/arrows.png');
			background-repeat: no-repeat;
			background-size: 58px auto;
			border: none;
			bottom: 0;
			cursor: pointer;
			display: block;
			height: 50px;
			position: absolute;
			text-indent: -999em;
			width: 29px;
		}

		.slick-prev{
			background-position: top left;
			left: 40%;
		}
		.slick-prev:hover, .slick-prev:focus{
			background-position: bottom left;
		}

		.slick-next{
			background-position: top right;
			right: 40%;
		}
		.slick-next:hover, .slick-next:focus{
			background-position: bottom right;
		}


		/* Dots */
		.slick-dotted.slick-slider{
			margin-bottom: 30px;
		}

		.slick-dots{
			background: #fff;
			display: block;
			list-style: none;
			margin: 20px auto 0;
			padding: 20px 5px;
			text-align: center;
			width: 150px;
		}
			.slick-dots li{
				cursor: pointer;
				display: inline-block;
				height: 11px;
				margin: 0 5px;
				padding: 0;
				position: relative;
				width: 11px;
			}
				.slick-dots li button{
					background: url("../img/dots.png") no-repeat scroll top left / 22px auto;
					border: 0 none;
					color: rgba(0, 0, 0, 0);
					cursor: pointer;
					display: block;
					height: 11px;
					outline: medium none;
					padding: 0;
					width: 11px;
				}
				.slick-dots li.slick-active button, .slick-dots li button:hover, .slick-dots li button:focus{
					background-position: top right;
				}


/* Footer */
footer{
	background: url('../img/footer.jpg') no-repeat 0 0 / cover;
	position: relative;
	padding: 50px 0 70px;
}
	footer h2{
		color: #fff;
		line-height: 1;
		margin-bottom: 40px;
		text-align: center;
	}
		footer h2 strong{
			display: block;
		}


	.footer-left{

	}
		.mail-send{
			background: #fff;
			padding: 20px;
		}
		.footer-left form{
			
		}
			.footer-left textarea, .footer-left input{
				background: #fff;
				border: none;
				color: #9d9c9c;
				padding: 10px 20px;

					-moz-transition: background 0.5s linear, color 0.5s linear;
					-webkit-transition: background 0.5s linear, color 0.5s linear;
				transition: background 0.5s linear, color 0.5s linear;
			}
			.footer-left textarea:focus, .footer-left input:focus{
				background: #e5e5e5
			}
			.footer-left textarea{
				display: block;
				height: 250px;
				margin-bottom: 10px;
				resize: none;
				width: 100%;
			}
			.footer-left input[type="email"]{
				margin-right: 10px;
				width: 60%;
			}
			.footer-left input[type="submit"]{
				color: #000;
				font-weight: 700;
				text-align: center;
				text-transform: uppercase;
				width: 36%;
			}
			.footer-left input[type="submit"]:hover, .footer-left input[type="submit"]:focus{
				background: #000;
				color: #fff;
			}

	.footer-right{

	}
		.dl-charte{
			background: #fff;
			color: #000;
			display: block;
			padding: 15px 20px;
			text-align: center;
			text-decoration: none;

				-moz-transition: background 0.5s linear, color 0.5s linear;
				-webkit-transition: background 0.5s linear, color 0.5s linear;
			transition: background 0.5s linear, color 0.5s linear;
		}
		.dl-charte:hover, .dl-charte:focus{
			background: #000;
			color: #fff;
		}
			.dl-charte img{
				margin-right: 10px;
				vertical-align: middle;
				width: 20px;
			}

		.bloc-contact{
			background: #fff;
			line-height: 1.2;
			margin-top: 30px;
			padding: 30px 10px;
		}
			.bloc-contact img{
				
			}
			.bloc-contact a{
				color: #000;
				text-decoration: none;
			}
			.bloc-contact a:hover, .bloc-contact a:focus{
				text-decoration: underline;
			}


	.drapeau-fr{
		bottom: -6px;
		left: 0;
		position: absolute;
		right: 0;
		text-align: center;
	}
		.drapeau-fr img{
			width: 50px;
		}








/*-- Responsive --*/
@media screen and (max-width: 1024px), (max-device-width: 1024px){ /* Tablettes */
	/* Header */
	header{
		height: 350px
	}
		header h1{
			margin: 18% 0 30px 20px
		}
			header h1 br{
				display: none;
			}

		header p{
			margin-left: 20px
		}

		header img{
			margin-left: 0;
			top: 20px;
			/*width: 98%;*/
			width: 400px;
		}


	/* Bloc Signe de reconnaissance */
	.bloc-titre-signe h2{
		line-height: 1;
		margin: 30px 0;
	}


	/* Bloc Engagements */
	.bloc-engag-inte{
		width: 50%
	}
	video{
		height: auto;
		width: 100%;
	}


	/* Bloc Pilliers de la charte */
	.slick-prev{
		left: 30%;
	}
	.slick-next{
		right: 30%;
	}
	


	/* Footer */
	.footer-left input[type="submit"]{
		width: 35%
	}



} /* Fin Tablettes : 768*1024 */


@media screen and (max-width: 767px), (max-device-width: 767px){ /* Mini-tablettes */
	/* Header */
	header{
		height: 300px;
	}

	/* Bloc Signe de reconnaissance */
	.bloc-titre-signe{
		text-align: center;
	}
		.bloc-img-signe{
			display: none;
		}

	/* Bloc Engagements */
	.bloc-engag-inte{
		width: 54%
	}


	/* Bloc Pilliers de la charte */
	.txt-slide{
		margin-top: 20px
	}

	/* Footer */
	.footer-right{
		margin-top: 30px;
	}
		.bloc-contact{
			font-size: 1.2rem
		}

} /* Fin Mini-tablettes : 600*768 */


@media screen and (max-width: 599px), (max-device-width: 599px){ /* Mobiles */
	/* Header */
	header{
		height: auto;
	}
		.header-txt{
			padding: 0 10px 0 0;
			width: 80%;
		}
			header h1{
				font-size: 2rem;
				line-height: 1;
				margin: 10px 0 20px;
			}
			header p{
				margin-left: 0;
			}

		.header-img{
			padding: 0;
			width: 20%
		}
			header img{
				position: relative;
				top: 60px;
				width: 100%;
			}


	/* Bloc Signe de reconnaissance */
	.bloc-titre-signe, .bloc-txt-signe{
		float: none;
		width: 100%;
	}
		.bloc-titre-signe h2{
			font-size: 2rem
		}

	.bloc-txt-signe{
		margin-top: 20px;
	}
	

	/* Bloc Engagements */
	.bloc-engagements h2{
		font-size: 2rem;
		margin-bottom: 30px;
	}
	.bloc-engag-inte{
		padding: 20px;
		width: 95%;
	}
	.bloc-engag-2{
		box-shadow: none;
		margin: 20px 0 0;
		padding: 30px;
	}
	

	/* Bloc Pilliers de la charte */
	.bloc-piliers h2{
		padding: 30px 20px;
	}
	.slick-prev{
		left: 10%;
	}
	.slick-next{
		right: 10%;
	}


	/* Footer */
	footer h2{
		font-size: 2rem
	}
	.bloc-contact{
		font-size: 1.1rem;
	}

} /* Fin Mobiles : 320*599 */