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

@font-face {
font-family: 'roboto';
src: url('typo/Roboto-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'roboto';
src: url('typo/Roboto-Bold.ttf') format('truetype');
font-weight:bold;
font-style: normal;
}
@font-face {
font-family: 'roboto';
src: url('typo/Roboto-Italic.ttf') format('truetype');
font-weight: normal;
font-style:italic;
}

body, html{
font-size:14px;
margin:0;
padding:0;
width:100%;
height:100%;
font-family:'roboto';
}

/* TYPO ---------------------------------- */
h1{
margin:0;
padding:0;
font-size:22px;
font-weight:bold;
color:#000000;
text-align:center;
}

h2{
margin:0;
padding:0;
font-size:20px;
color:#FFFFFF;
font-weight:bold;
margin-bottom:8px;
}

.orange{ color:#ea5b0c; }
.bleu{ color:#0da8c4; }
.vert{ color:#95c11f; }
.jaune{ color:#ffd200; }
.mauve{ color:#951b81; }

p{
margin:0;
padding:0;
}

/* --------------------------------------- */

#ConteneurG{
width:650px;
height:100%;
position:relative;
float:left;
}

#TitreMob{ display:none; }
#Entete{
width:100%;
height:280px;
background:url(img/fd-entete.jpg) no-repeat center center;
background-size:cover;
position:relative;
float:left;
z-index:1;
}
	/*.logoP{
	width:180px;
	height:90px;
	background-color:#FFFFFF;
	position:relative;
	float:left;
	top:0;
	left:0;
	margin-top:14px;
	z-index:1;
	}
		.logoP img{
		max-width:100%;
		position:absolute;
		left:50%;
		top:50%;
		transform:translate(-50%,-50%);
		}
	.decoLogo{
	width:calc(100% - 180px);
	height:16px;
	position:relative;
	float:left;
	top:88px;
	}
		.bandDecoLogo{
		width:100%;
		height:8px;
		background-color:#FFFFFF;
		position:relative;
		}
		.bandDecoLogo.fine{
		height:4px;
		margin-top:4px;
		}*/
	#Accroche{
	width:96%;
	background-color:rgba(255,255,255,0.9);
	padding:2%;
	text-align:center;
	position:absolute;
	float:left;
	bottom:30px;
	z-index:1;
	}

#Contenu{
width:100%;
height:calc(100% - 260px);
position:relative;
float:left;
margin-top:-20px;
z-index:2;
}
	.triangleSup{
	display : inline-block;
	height : 0;
	width : 0;
	border-right : 650px solid transparent;
	border-bottom : 20px solid #000000;
	position:relative;
	float:left;
	}
	.infoDefi{
	width:96%;
	height:calc(96% - 40px);
	padding:0 2%;
	background-color:#000000;
	color:#FFFFFF;
	position:relative;
	float:left;
	}
	.decoBas{
	width:100%;
	position:absolute;
	float:left;
	bottom:0;
	z-index:2;
	}
		.decoBas img{
		max-width:100%;
		}
		
.blocNum{
width:100%;
height:auto;
position:relative;
float:left;
top:50%;
transform:translateY(-50%) translateY(-60px);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}

.colIco{
width:32%;
position:relative;
float:left;
margin:0.5%;
text-align:center;
}
	.ligneNum{
	width:100px;
	height:100px;
	position:relative;
	float:left;
	left:50%;
	transform:translateX(-50%);
	}
		.ligneNum img{
		max-height:100%;
		}
	.ligneDetail{
	width:100%;
	position:relative;
	float:left;
	}

#ConteneurD{
width:calc(100% - 660px);
height:100%;
background:url(img/fd-page.jpg) no-repeat center right;
background-size:auto 100%;
position:relative;
float:left;
z-index:1;
padding-left:10px;
}	
	.bandeVerte{
	width:20px;
	height:100%;
	background-color:#95c11f;
	position:relative;
	float:right;
	right:40px;
	z-index:1;
	}
	#CadreBlocG{
	width:550px;
	background-color:#FFFFFF;
	border-left:4px solid #ea5b0c;
	border-right:4px solid #ea5b0c;
	position:relative;
	float:left;
	overflow:hidden;
	padding-bottom:4px;
	z-index:2;
	}
	#PointeCadreBlocG{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 100px 279px 0 279px;
	border-color: #ea5b0c transparent transparent transparent;
	position:relative;
	float:left;
	clear:left;
	}
	#TitreMaj{
	width:100%;
	height:auto;
	position:relative;
	float:left;
	text-align:center;
	padding-bottom:10px;
	}
		#TitreMaj img{
		max-width:100%;
		}
	#CadreForm{
	width:100%;
	height:auto;
	background-color:#FFFFFF;
	box-shadow:0 -4px 4px #CCCCCC;
	padding:8px 0 8px 0;
	position:relative;
	float:left;
	clear:left;
	z-index:2;
	}
		.titreForm{
		width:100%;
		background-color:#ea5b0c;
		color:#FFFFFF;
		text-align:center;
		position:relative;
		float:left;
		padding:2% 0;
		}
			.imgForm{
			float:left;
			max-height:100%;
			}
		.descForm{
		width:96%;
		margin:0 2% 0 2%;
		padding-top:10px;
		position:relative;
		float:left;
		border-top:1px solid #000000;
		text-align:center;
		}

.tabPrincipal{
width:100%;
max-width:400px;
position:relative;
float:left;
left:50%;
transform:translateX(-50%);
margin-top:20px;
}
.tdNom{
width:80px;
}

.chpStd{
width:90%;
font-size:14px;
font-family:'Roboto';
border:1px solid #000000;
}
.chpSub{
width:100%;
max-width:300px;
height:50px;
background-color:#ea5b0c;
color:#ffffff;
font-size:16px;
font-weight:bold;
border:0;
border-radius:8px;
line-height:50px;
text-align:center;
vertical-align:middle;
cursor:pointer;
position:relative;
float:left;
left:50%;
transform:translateX(-50%);
margin-top:20px;
margin-bottom:20px;
}

.copyr{
font-size:12px;
color:#000000;
position:absolute;
float:right;
bottom:0;
right:70px;
z-index:1;
}

#Trame{
width:100%;
height:100%;
background-color:rgba(255,255,255,0.7);
position:fixed;
z-index:10;
}
#Legal{
width:90%;
max-width:600px;
background-color:#FFFFFF;
border:1px solid #ea5b0c;
border-radius:8px;
height:auto;
padding:4px;
position:fixed;
top:50%;
left:50%;
transform:translate(-50%, -50%);
z-index:11;
}
	.closeF{
	width:80px;
	height:25px;
	background-color:#ea5b0c;
	border-radius:0 8px 0 8px;
	color:#FFFFFF;
	font-size:12px;
	text-align:center;
	line-height:25px;
	vertical-align:middle;
	position:relative;
	float:right;
	margin-top:-4px;
	margin-right:-4px;
	}
	.closeF a{
	color:#FFFFFF;
	text-decoration:none;
	}

#Message{
width:auto;
max-width:600px;
background-color:#FFFFFF;
border:1px solid #333333;
border-radius:8px;
box-shadow:0 0 8px #666666;
height:auto;
text-align:center;
padding:4px;
position:fixed;
float:left;
top:50%;
left:50%;
transform:translate(-50%, -50%);
z-index:11;
}
	#Message p{
	clear:both;
	}