@charset "UTF-8";

/*
Bleu (base) = #3E96D5
Bleu clair = #ECF5FB
Bleu foncé = #215072
Textes = #4B4B4B
*/

/*******************************************************************************

	Base

*******************************************************************************/

html  {
	background-color: #FFF;
	font-size: 100%;
	width: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
* {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

/*******************************************************************************

	Conteneurs

*******************************************************************************/


#top {
	background-color: #FFF;
	display: block;
	margin: 0px;
	padding: 0px;
	width: 100%;
	position: fixed;
	top: 0px;
	z-index: 90;
}
#top.affix {
	position: fixed;
	top: 0px;
	z-index: 90;
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
	box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
}

.top1200 {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: stretch;
	width: 1200px;
	height: 150px;
	margin-right: auto;
	margin-left: auto;
	padding: 0px;
}
.affix .top1200 {
	height: 70px;
}
/* espace sous le menu */
.espace-affix {
	display: block;
	margin: 0px;
	padding: 0px;
	background-color: #FFFFFF;
	clear: both;
	height: 150px;
	width: 100%;
}

.avant {
	display: block;
	background-color: #FFFFFF;
	width: 100%;
	margin: 0px;
	padding: 0px;
	clear: both;
}
.main {
	display: block;
	background-color: #FFFFFF;
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	padding: 0px;
	clear: both;
}
.picto {
	display: block;
	width: 100%;
	background-color: #e2e2e2;
	background-image: url(../images/background-gris.jpg);
	background-repeat: repeat-y;
	background-position: center center;
	margin: 0px;
	padding-top: 50px;
	padding-right: 0px;
	padding-bottom: 35px;
	padding-left: 0px;
	clear: both;
}
.suite {
	display: block;
	background-color: #FFFFFF;
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 60px;
	padding-left: 0px;
	clear: both;
}
.news {
	display: block;
	width: 100%;
	background-color: var(--couleur-base);
	margin: 0px;
	clear: both;
	padding: 0px;
	background-image: url(../images/background-bulles.png);
	background-repeat: no-repeat;
	background-position: center top;
}
.copyright {
	display: block;
	background-color: #FFFFFF;
	width: 100%;
	margin: 0px;
	padding-top: 30px;
	padding-right: 0px;
	padding-bottom: 30px;
	padding-left: 0px;
}

/*******************************************************************************

	RESPONSIVE

*******************************************************************************/

@media screen and (max-width: 1275px) {
.avant {
	width: 100%;
	padding-right: 0%;
	padding-left: 0%;
}
.top1200,
.main,
.picto,
.suite,
.news {
	width: 100%;
	padding-right: 3%;
	padding-left: 3%;
}
}

@media screen and (max-width: 800px) {
.suite {
	padding-bottom: 40px;
}
}