section {
	overflow: hidden;
	color: rgb(102,102,102);
	margin: 0px;
	padding-left:0px;
	padding-right:1px;
	background-color: rgba(255,255,255,0.5);
	background-image: url("Images/background.jpg");
    background-repeat: no-repeat; /* Le fond ne sera pas répété */
	background-position: center bottom;
	/*background-size: cover;*/
}
h1{/*margin-left:19%;border-left: 1px solid rgb(140,140,140);*/margin-bottom: 0;/*padding-left: 5px;*/}
h2{margin-top:0 !important; font-size:1.6rem;}
div#colonne1 {
    float: left;
    width: 19%;
	overflow: hidden;
	list-style-type: none ;
	margin: 0 1% 0 0;
	padding: 0px 5px 0px 0px;
	line-height:1.0;
	border-right: 1px solid rgb(140,140,140);
	min-height: 500px;
}
div#colonne1 img {
	margin: 2% 5% 0 5%;
	width: 90%;
	height: auto;
}
div#colonne1 p {
text-align: center;
}
div#colonne1 li{
	width: 100%;
	margin-right: 2px ;
	line-height: 2em;
	border-top: 1px dashed rgb(140,140,140); /*grisclair*/
}
div#colonne1 li a{
	display: block;
	line-height: 1.8em ;
	padding: 4px 0;
	text-decoration: none ;
	font-weight: normal;
	font-size: smaller;
}
div#colonne1 ul{
	list-style-type: none;
	margin-top: 5px;
	padding-left: 2px;
}
div#colonne1 li a:hover, div#colonne1 li a:focus, div#colonne1 li a:active {
	text-decoration: underline ;
	font-weight: bold;
}
div#colonne2{
    float: left;
    width: 25%;
	text-align: center;
	min-height: 205px;
}
div#colonne3 {
    float: left;
    width: 25%;
	text-align: center;
	min-height: 205px;
}
div#colonne4 {
    float: left;
    width: 25%;
	text-align: center;
	min-height: 205px;
}
div#colonne5 {
    float: left;
    width: 25%;
	text-align: center;
	min-height: 205px;
}
.colonneImage {
    float: right;
    width: 25%;
	text-align: center;
	margin: 0 0 0 10px;
	/*min-height: 205px;*/
}
div#centre p, h2 {
	text-align: center;
	margin-top: 80px;
	}
.colonneImage img{ width:90%; }
div#colonne2 img, div#colonne3 img, div#colonne4 img, div#colonne5 img{height: auto;width:90px;vertical-align:baseline;}
.float_stop{
	clear:right;
}
div#suite{
	/*margin-left:19%;*/
	min-height: 300px;
	padding-left: 5px;
	/*background-color: rgba(255,255,255,0.5);*/
}
div#ancre1{overflow: hidden; margin-right: 10px; text-align: justify;}
.retrait {
	margin-left:20px;
}
.text-align-droite {text-align: right; font-weight: bold; font-size: 11px; }
.largeur_min {min-width:175px;}
div#colonne1 a.gras {font-weight:bold;}


/*CSS bouton affiche/masque div + formulaire*/
button {cursor: pointer; outline-style:none;}

button.bouton {
	border:none;
	padding:4px 10px 4px 10px;
	border-radius:3px;
	background: rgb(204,51,51);
	font:bold 13px Arial;
	color:#fff;
	margin-top: 1px;
	}

.bouton:hover, .bouton:focus, .bouton:active {
	border:none;
	padding:4px 10px 4px 10px;
	border-radius:3px;
	background: rgb(102,102,102);
	font:bold 13px Arial;
	color:#fff;
	}
	
/*****************************************************************************/
/********************************* FORMULAIRES ********************************/
/*****************************************************************************/
div#ancre1 label{
	min-width: 170px;
	display: inline-block;
	font-weight:bold;
	margin-right: 5px;
}

div#ancre1 label.error {
	color: red;
	font-size: 0.8em;
	font-style: italic;
	display: inline-block;
	/*margin-left: 170px;*/
	padding-left:5px;
	/*width: 400px;*/
	}
input {
	margin: 3px 0 3px 0;
}
input[type="submit"] {
	margin-left: 175px;
}	
#email, #mdp, #mdp1, #raison_sociale, #email2,#email3, #contact, #telephone, #robot {
    width: 240px;
	max-width:90%;
}
#emailmdp {
    width: 240px;
	max-width:90%;
}
#password {
    width: 240px;
	max-width:90%;
}

p.error {color: red;font-style: italic;font-weight: bold;}
.msgok {color: blue;}


#mdp_acces_fiches{max-width:100%;}
/*****************************************************************************/
/********************************** Formulaires  ********************************/
/*****************************************************************************/
.formulaire p{margin-left: 10px; text-decoration: underline; color: grey;}

.formulaire .table {
width: 100%;
border: 1px solid #ddd;
text-align: left;
border-spacing: 1px;
background: #fff;
clear: both;
border-radius: 5px;
}
.formulaire .table th:first-child {
border-top-left-radius: 3px;
}
.formulaire .table th:last-child {
border-top-right-radius: 3px;
}
.formulaire th {
font-weight: normal;
padding: 7px 5px;
text-align: center;
color: #fff;
background: grey;
border-bottom: 1px solid #ccc;
}
.formulaire label { font-weight: normal; }
.formulaire label.error { font-weight: bold; }
tr.txtinfos td {
text-align: center;
background-color: #f1f1f1;
padding: .75em;
}
tr.txt td {
font-weight: normal;
padding: 7px 5px;
text-align: center;
color: #fff;
background: grey;
border-bottom: 1px solid #ccc;
}
tr.row1 { background-color: #f6f6f6; }
tr.row2 { background: #fbfbfb; }
tr.subfoot td {
text-align: center;
padding: 4px;
}
.formulaire input[type="submit"] {	margin-left: 0px; }
tr.subfoot { background: #eee; }


/*****************************************************************************/
/************************** Formulaire MDP OUBLIE ? *****************************/
/*****************************************************************************/

.modalDialog{
	position: fixed;
	top: 0; right:0; bottom:0; left:0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	display: none;
	/*opacity:0;*/
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events : none;
}
.modalDialog:target{display: block;/*opacity:1;*/pointer-events:auto;}
.modalDialog > div {
	/*width: 400px;*/
	max-width: 600px;
	/*min-width: 320px;*/
	width: 85%;
	position: relative;
	margin: 3% auto;
	padding: 5px 5px 5px 5px;
	border-radius: 10px;
	background: #fff;
	background: -moz-linear-gradient(#fff,#999);
	background: -webkit-linear-gradient(#fff,#999);
	background: -o-linear-gradient(#fff,#999);
}
img.btn_close {
    float: right;
    margin: -16px -16px 0 0;
	height: 21px;
}
.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #fff; color:rgb(204,51,51);}


section a {font-weight: bold;color: rgb(204,51,51);}
section a:hover{color: rgb(102,102,102);}

@media (max-width: 767px) {
	div#colonne1{
		width:100%; /*permet de faire passer la colonne centre en dessous*/
		min-height:0px;
	}
	div#ancre1 {padding-left: 5px; padding-right: 5px; margin-right:0px;}
	div#suite, h1{margin-left:0px;border: none} /* sans marge car passe en dessous du menu*/
	div#colonne2, div#colonne3, div#colonne4, div#colonne5{min-width: 50%;border:none;}
	.colonneImage {width: 30%;}
	div#ancre1 label {display: initial;}
	.modalDialog > div {width: 80%;position: relative;margin: 10% auto;}
	label.error {
	color: red;
	font-size: 0.8em;
	font-style: italic;
	margin-left: 0px !important;
	max-width: 310px;
	}
	input[type="submit"] {
	margin-left: 0px !important;
	}
	
		/*tableau full screen smart phone*/
	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		/*padding-left: 50%; */
	}
	
	td:before { 
		/* Now like a table header */
		/*position: absolute;*/
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
}	

/*@media (min-width: 768px) and (max-width:960px) {
	div#colonne1{
		min-width : 172px;
	}
	h1{margin-left:173px;}
	div#colonne2{margin-left:173px;}
}*/