@charset "UTF-8";
/* CSS Document */

html, body{
	width: 100%;
	overflow-x: hidden;
}

body, form, input, textarea{
	font-family: 'Roboto', Verdana, Arial, sans-serif;
	font-size:14px;
	font-weight: 300;
	color:#000000;
}

body {
	background-color:#FFFFFF;
	background-image: url('../images/pattern.png');

}

.cookies{
	background-color: #333;
	color:#fff;
	z-index: 1000;
	position: relative;
	/*position: fixed;*/
	/*top: 0;*/
	/*left: 0;*/
	width: 94%;
	padding: 1% 4% 1% 2%;
}

.cookies .croix{
	position: absolute;
	right: 2%;
	top: 30%;
	cursor: pointer;
}

.centrage {
	width:95%;
	max-width: 950px;
	margin:auto;
}
.centrage2 {
	width:90%;
	margin:auto;
}

.centerText{text-align: center;}

.hide{
	display: none !important;
}

nav a {
	text-decoration:none;
	display:block;
}

.clear {
	width: 0;
	height: 0;
	clear:both;
}

.clearAfter:after{
	content:'';
	display: table;
	clear: both;
}

/*Couleur des liens de base*/

a {
	outline: 0 none;
	text-decoration: none;
	color:#0062a1;
	-webkit-transition: color 0.2s, border 0.2s, background-color 0.2s, box-shadow 0.2s;
	-moz-transition: color 0.2s, border 0.2s, background-color 0.2s, box-shadow 0.2s;
	-ms-transition: color 0.2s, border 0.2s, background-color 0.2s, box-shadow 0.2s;
	-o-transition: color 0.2s, border 0.2s, background-color 0.2s, box-shadow 0.2s;
	transition: color 0.2s, border 0.2s, background-color 0.2s, box-shadow 0.2s;
}
	a:hover {
		color: #061f33;
	}

/* On définit ici les titres et textes*/

h1 {
	font-size: 30px;
	font-weight: 100;
}

h2 {
	font-size: 24px;
	font-weight: 100;
}

h3 {
	font-size:16px;
	font-weight: 100;
}

h4 {
	font-size: 16px;
	font-weight: 300;
}

p {
	text-align:justify;
	margin-top:10px;
	margin-bottom:10px;
	line-height: 30px;
	font-size:16px;
}

strong{font-weight: 400;}

mark{
	color: #fff;
	background-color: #0062a1;
	padding: 0 3px;
	font-weight: 400;
	font-style: italic;
}

/* On définit ici les couleurs du site*/

.bleu{color:#0062a1;}
.beige{color:#9e925f;}
.vert{color: #aca400;}
.marron{color: #4b4a31;}
.orange{color: #f6a800;}
.marine{color: #061f33;}
.gris{color: #9ca4ba;}

.bgBleu{background-color: #0062a1;}
.bgBeige{background-color: #9e925f;}
.bgVert{background-color: #aca400;}
.bgMarron{background-color: #4b4a31;}
.bgOrange{background-color: #f6a800;}
.bgMarine{background-color: #061f33;}
.bgGris{background-color: #9ca4ba;}

/*Couleurs supplémentaires*/

.rouge{color: #f62900;}

/* On définit ici les colonnes du site*/

.col50{
	float: left;
	width: 48%;
	margin-left: 4%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.col33 {
	float: left;
	width: 26%;
}

.col66 {
	float: left;
	width: 70%;
}

.colGauche {
	clear: both;
	margin-left: 0;
}

.table-row{
	display: table;
	width: 100%;
}
.table-cell{
	display: table-cell;
	vertical-align: middle;
}

/* On définit ici les flottants */

.floatL {float: left;}
.floatR {float: right;}

.imgleft {
	float:left;
	padding:0 10px 10px 0;
	margin-right:20px;
	margin-bottom:20px;
}

.imgright {
	float:right;
	padding:10px;
	margin-left:10px;
	margin-bottom:10px;
}

.imgleft + p, .imgright + p {
	margin-top:0px;
}


/*Style des images contenant un outil de zoom (mettre l'img dans un a.fancy et rajouter un span avant ou après, dans le a)*/

.fancy {
	display: inline-block;
	position: relative;
	width: 100%;
	text-align: center;
}
.fancy span {
	display: block;
	position: absolute;
	width: 50px;
	height: 50px;
	top: 50%;
	left: 50%;
	margin: -26px 0 0 -25px;
	background-position: center top;
	background-repeat: no-repeat;
	background-image: url('../images/zoom.png');
	opacity:0;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	-ms-transition: opacity 0.3s;
	-o-transition: opacity 0.3s;
	transition: opacity 0.3s;
	/*IE Fix*/
	display: none\9;
}
	.fancy:hover span {
		background-position: center bottom;
		opacity: 1;
		/*IE Fix*/
		display: block\9;
	}

/* On définit ici les ombres appliquées aux box */
.boxshadow {
	-webkit-box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.1);
}


/* On définit ici les ombres appliquées aux textes */
.textshadow {
	text-shadow: 1px 1px 1px #000000;
	filter: dropshadow(color=#000000, offx=1, offy=1);
}


/* On définit ici les arrondis appliqués aux box */
.borderradius {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

/* On définit ici le style du bouton général et les spécifiques */
.btn {
	display:inline-block;
	padding: 12px 15px;
	color: #fff;
	font-weight: 300;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	background-color: #061f33; /*Couleur marine par défaut*/
	margin-bottom: 10px;
	vertical-align: middle;
	cursor: pointer;
	-webkit-appearance:none;
	-webkit-transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
	-moz-transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
	-ms-transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
	-o-transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
	transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.btn-full{
	width: 100%;
	text-align: center;
}

.btn-bleu{background-color: #0062a1;}
.btn-beige{background-color: #9e925f;}
.btn-vert{background-color: #aca400;}
.btn-marron{background-color: #4b4a31;}
.btn-orange{background-color: #f6a800;}
.btn-gris{background-color: #9ca4ba;}

.btn-picto { 	/*Bouton avec un picto Font-Awesome seul, sans texte*/
	font-size: 16px;
	height: 16px;
	padding: 11px 0;
	width: 38px;
	text-align: center;
}

.btn-jumbo{
	height: 100px;
	line-height: 100px;
	padding: 0 50px;
	text-align: center;
	font-size: 24px;
	font-weight: 100;
	vertical-align: middle;
	/*max-width: 400px;*/
}

.btn-cloud{
	padding: 11px 0;
	height: 16px;
	width: 38px;
	background-image: url('../images/mini-cloud.png');
	background-repeat: no-repeat;
	background-position: center center;
}

.btn-cloud-cms{
	padding: 11px 0;
	height: auto;
	width: auto;
	padding-left: 48px;
	padding-right: 15px;
	background-image: url('../images/mini-cloud.png');
	background-repeat: no-repeat;
	background-position: 15px center;
}

.btn-cloud-cms span{
	font-size: 80%;
}

.btn-download{
	position: relative;
	padding: 15px 20px 15px 60px;
	margin-right: 10px;
	font-weight: 400;
}
.btn-download span{
	display: block;
	margin-top: 2px;
	font-size: 11px;
}

@-webkit-keyframes cloud-down {
	0%   { margin-top: -9px; }
	50% { margin-top: -16px;}
	100% { margin-top: -9px; }
}
@-moz-keyframes cloud-down {
	0%   { margin-top: -9px; }
	50% { margin-top: -16px;}
	100% { margin-top: -9px; }
}
@-o-keyframes cloud-down {
	0%   { margin-top: -9px; }
	50% { margin-top: -16px;}
	100% { margin-top: -9px; }
}
@keyframes cloud-down {
	0%   { margin-top: -9px; }
	50% { margin-top: -16px;}
	100% { margin-top: -9px; }
}
.btn-download i{
	display: block;
	width: 27px;
	height: 24px;
	position: absolute;
	left: 17px;
	top: 50%;
	margin-top: -12px;
	background-image: url('../images/download.png');
	background-repeat: no-repeat;
	background-position: left center;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	-ms-transition: -ms-transform 0.3s;
	-o-transition: -o-transform 0.3s;
	transition: transform 0.3s;

	-webkit-animation: cloud-down 2s infinite; /* Safari 4+ */
	-moz-animation: cloud-down 2s infinite; /* Fx 5+ */
	-o-animation: cloud-down 2s infinite; /* Opera 12+ */
	animation: cloud-down 2s infinite; /* IE 10+ */
}


	.btn:hover{
		background-color: #9ca4ba; /*Hover gris par défaut*/
		color: #fff;
	}
	.btn-gris:hover{background-color: #061f33;}
	.btn-download:hover i{
		-webkit-transform: scale(0.8);
		   -moz-transform: scale(0.8);
		    -ms-transform: scale(0.8);
		     -o-transform: scale(0.8);
		        transform: scale(0.8);
	}


/* On définit ici le style des formulaires */

form {
	width: 100%;
	margin-bottom: 0;
}

form p {
	position: relative;
	margin-bottom: 15px;
	padding-left: 170px;
	text-align: left;
}

.newsletter p{
	padding-left: 0px;
}

.newsletter a{
	color: #999;
}

form.conseilON p{padding-right: 35px;}

form p.paragraphe {
	padding-left: 0;
	margin-bottom: 20px;
}

p label,
p span.label{
	display: block;
	position: absolute;
	left: 0;
	width: 170px;
	padding-top: 10px;
	font-weight: 300;
}
p .choix label{
	display: inline-block;
	position: static;
	left: auto;
	width: auto;
	padding-top: 0;
}

p .choix{
	display: block;
	position: relative;
	padding-top: 8px;
}

form p.labelTop{
	padding: 0;
}
form p.labelTop label{
	position: relative;
	top: auto;
	left: auto;
	padding-top: auto;
	width: auto;
	margin-bottom: 5px;
}

input[type=text],
input[type=email],
input[type=date],
input[type=password],
input[type=number],
input[type=phone],
input[type=file],
input[type=number],
select,
textarea {
	display: inline-block;
	background-color: #f9f9f9;
	border: 1px solid #ccc;
	padding: 10px 15px 10px 15px;
	width: 100%;
	outline: 0 none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

input[type=password]{font-family: Helvetica, Arial, sans-serif;}

select {width: 100%;}

input[type=text]:focus,
input[type=email]:focus,
input[type=date]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=phone]:focus,
input[type=file]:focus,
input[type=number]:focus,
select:focus,
textarea:focus {
	border: 1px solid #aca400;
}

input[type=checkbox],
input[type=radio]{
	margin-top: 10px;
}

input[type=checkbox].css-checkbox,
input[type=radio].css-checkbox{
	position: absolute;
	overflow: hidden;
	clip: rect(0 0 0 0);
	height:1px;
	width:1px;
	margin:-1px;
	padding:0;
	border:0;
}
input[type=checkbox].css-checkbox + label.css-label,
input[type=radio].css-checkbox + label.css-label{
	position: relative;
	padding-left:20px;
	display:inline-block;
	font-size:15px;
	vertical-align:middle;
	cursor:pointer;
}
input[type=checkbox].css-checkbox + label.css-label:before,
input[type=radio].css-checkbox + label.css-label:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	width: 15px;
	height:15px;
	line-height:15px;
	background-repeat:no-repeat;
	background-position: 0 0;
}
input[type=checkbox].css-checkbox + label.css-label:before{ background-image:url('../images/checkbox.png');}
input[type=radio].css-checkbox + label.css-label:before{ background-image:url('../images/radio.png');}
input[type=checkbox].css-checkbox:checked + label.css-label:before,
input[type=radio].css-checkbox:checked + label.css-label:before{background-position: 0 -15px;}


.tranche{
	position: relative;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-left: 170px;
}
.tranche:after{
	content:'';
	display: table;
	clear: both;
}

.tranche .label{
	position: absolute;
	left: 0;
	width: 170px;
	display: block;
	padding-top: 12px;
	font-weight: 300;
}
.tranche p{
	float: left;
	width: 45%;
	margin: 0 0 0 10%;
	padding: 0 0 0 50px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.tranche .label + p{margin-left: 0;}

.tranche p label{width: 50px;}

textarea {
	padding: 15px 15px;
	min-height: 200px;
	-webkit-resize: vertical;
	-moz-resize: vertical;
	resize: vertical;
}

input::-moz-placeholder,
textarea::-moz-placeholder{
	font-style: italic;
	color: #777;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
	font-style: italic;
	color: #777;
}

input[type=submit] {
	cursor: pointer;
	float: right;
	border: none;
	padding: 9px 15px 10px 15px;
	-webkit-appearance:none;
	border-radius: 0;
}
form.conseilON input[type=submit]{margin-right: 35px;}
input[type=submit].btn{margin-bottom: 0;}

button[type=submit]{
	cursor: pointer;
	float: right;
	border: none;
	padding: 9px 15px 10px 15px;
	-webkit-appearance:none;
	border-radius: 0;
}

.blocCaptcha:after{
	content:'';
	display: table;
	clear: both;
}

.blocCaptcha span{
	float: left;
}
.blocCaptcha .btn{
	float: left;
	display: block;
	margin-bottom: 0;
	padding: 15px 0;
	text-align: center;
	width: 46px;
	height: 16px;
	font-size: 16px;
}

.captcha img{
	width: 120px;
	border : #ccc solid 1px;
	padding: 10px 10px 10px 10px;
	background-color: #fff;
}

.conseil{
	position: absolute;
	top: 8px;
	right: 0;
	background-image: url('../images/aide.png');
	background-repeat: no-repeat;
	background-position: top left;
	display: block;
	height: 21px;
	width: 21px;
}

.conseil:hover{
	background-position: bottom left;
}

.aide{
	font-size: 12px;
	color: #999;
}

/*Zone de chargement formulaire CMS*/

.chargement{
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #0062a1;
	background-color: rgba(0, 98, 161, 0.9);
	text-align: center;
	z-index: 1000;
}

.chargement img{
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-25px;
	margin-left:-25px;
}


/*Style des erreurs et des confirmations*/

.confirmForm{
	padding: 20px 20px 10px 20px;
	background-color: #fff;
	-webkit-box-shadow:  1px 1px 0 0 rgba(0, 0, 0, 0.1);
	-moz-box-shadow:  1px 1px 0 0 rgba(0, 0, 0, 0.1);
	box-shadow:  1px 1px 0 0 rgba(0, 0, 0, 0.1);
}

.confirm{
	margin-top: 30px;
	margin-left: 20px;
	padding: 40px 0 40px 190px;
	background-image: url('../images/big-tick.png');
	background-position: left top;
	background-repeat: no-repeat;
}

.confirm h3{
	font-size: 36px;
	color: #aca400;
}
.confirm p{
	color: #9ca4ba;
}


.erreur, .succes, .warning{ /*attention erreur est un <p>*/
	padding: 0;
	margin: 0;
	margin-bottom: 15px;
}

.succes span{
	background-image: url('../images/mini-tick.png');
	background-position: 15px center;
	background-repeat: no-repeat;
	background-color:#aca400;
	padding: 10px 15px 10px 45px;
	color:#fff;
	display: block;
}

.erreur span{
	background-image: url('../images/mini-exclamation.png');
	background-position: 15px center;
	background-repeat: no-repeat;
	background-color:#f6a800;
	padding: 10px 15px 10px 45px;
	color:#fff;
	display: block;
}

.warning span{
	background-color:#f6a800;
	padding: 10px 15px 10px 15px;
	color:#fff;
	display: block;
}

.erreurchamp {
	background-color:#f6a800!important;
	color:#fff;
}

.int{
	display: inline-block;
	color: #f62900;
	font-style: italic;
	font-size: 12px;
}


/* On définit ici le style des tableaux */

table{
	width: 100%;
	overflow-x: hidden;
	margin-bottom: 30px;
	/*border: #ccc solid 1px;*/
}

th,
td{
	word-wrap: break-word;
	padding: 10px;
	-webkit-transition: background-color 0.2s;
	-moz-transition: background-color 0.2s;
	-ms-transition: background-color 0.2s;
	-o-transition: background-color 0.2s;
	transition: background-color 0.2s;
}

th{
	text-align: left;
	font-weight: 400;
	padding: 14px 10px;
	border-bottom: #ccc solid 1px;
	background-color: #9ca4ba;
	color: #fff;
	/*border-right: #061f33 solid 1px;
	border-left: #061f33 solid 1px;*/
}

td{
	border-bottom: #ccc solid 1px;
}

tr:hover td{
	background-color: #cdd1dc;
}


/* On définit ici le style du fil d'ariane*/

.ariane {
	display: block;
	list-style: none;
	margin: 0 0 50px 0;
	padding: 0px 5% 0 5%;
	background-color: #9ca4ba;
	text-align: left;
}
.ariane > li {
	display: inline-block;
	margin: 0 0 10px 0;
	padding: 0;
	height: 20px;
}
.ariane > li > a {
	display: inline-block;
	padding: 3px 20px 3px 15px;
	height: 14px;
	color: #fff;
	font-size: 14px;
	background: url('../images/fleche-ariane.png') right center no-repeat; /*Mettre le separateur voulu*/
	-webkit-transition: padding 0.2s;
	-moz-transition: padding 0.2s;
	-ms-transition: padding 0.2s;
	-o-transition: padding 0.2s;
	transition: padding 0.2s;
}
.ariane > li:first-child > a{
	padding-left: 0;
}
.ariane > li > a:hover {
	padding-right: 25px;
}
.ariane > .active {
	color: #061F33;
	padding: 3px 10px 3px 10px;
	height: 14px;
}


/* On définit ici le style des puces d'étape*/

.etapes{
	margin-top: -20px;
	margin-bottom: 10px;
}

.etapes li{
	display: inline-block;
	position: relative;
	margin-left: 20px;
	margin-bottom: 10px;
	color: #9ca4ba;
}

.etapes li i{
	display: inline-block;
	position: relative;
	top: 2px;
	width: 40px;
	padding: 10px 0;
	font-size: 20px;
	text-align: center;
	font-style: normal;
	font-weight: 100;
	color: #fff;
	background-color: #9ca4ba;
	margin-right: 15px;
}

.etapes li.active{color: #aca400;}
.etapes li.active i{background-color: #aca400;}

.etapes li.passed a{color: #0062a1;}
.etapes li.passed a i{background-color: #0062a1;}
	.etapes li.passed a:hover{color: #061f33;}
	.etapes li.passed a:hover i{background-color: #061f33;}


/* On définit ici le style des paginations */


#pagination{margin-top: 20px;}
#pagination li {
	display: inline-block;
}
#pagination li a {
	display: inline-block;
	font-family: 'Roboto Condensed', Verdana, Arial, sans-serif;
	min-width: 20px;
	padding: 5px 3px 5px 3px;
	margin-left: 1px;
	border-bottom: #9ca4ba solid 3px;
	text-transform: uppercase;
	text-align: center;
	font-size: 16px;
	font-weight: 300;
	color: #9ca4ba;
	cursor: pointer;
	-webkit-transition: color 0.3s, border 0.3s;
	-moz-transition: color 0.3s, border 0.3s;
	-ms-transition: color 0.3s, border 0.3s;
	-o-transition: color 0.3s, border 0.3s;
	transition: color 0.3s, border 0.3s;
}
#pagination li.arrow a {/*padding: 6px 0 10px 0;*/}

	#pagination li a.current,
	#pagination li a.active,
	#pagination li a:hover {
		color: #0062a1;
		border-bottom: #0062a1 solid 3px;
	}



/*QR codes*/      /*Prendre soin de bien importer les images associées pour que ces styles fonctionnent*/

.qrcode {
	width: 100%;
	height: 150px;
	margin: 0 0 20px 0;
	margin-top: 20px;
	*display: none;
}
.qrcode canvas {
	height: 130px;
	float: left;
	border: 10px solid #fff;
	-webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
	box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
}
.qrcode .titre {display: none;}
.qrcode .QRinfo {float: left;}
.qrcode .tag {
	display: inline-block;
	height: 14px;
	font-size: 14px;
	padding: 10px 20px 10px 40px;
	margin: 10px 0 0 20px;
	background: url("../images/tag.png") left center no-repeat;
	color: #fff;
}
.qrcode .illus {
	display: block;
	width: 155px;
	height: 80px;
	background: url("../img/QRcode-illus.png") center no-repeat;
	margin: 20px 0 0 40px;
}
.bloc_qrcode:first-child{
	float:left;
}


/* On définit ici le style du message pour internet explorer */
.antiie{
	background-color:#fff;
	width:950px;
	margin:auto;
}

.navigie{
	float:left;
	width:219px;
	height:66px;
	background-image:url('../img/navig.jpg');
	background-repeat:no-repeat;
}

.messageie{
	float:left;
	padding-top:15px;
	width:500px;
}


.affichageportrait{
	display:none;
}