/* ------------------------------------ Eléments principaux de la page ------------------------ */

	html {
	background-color: #333333;
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}
body {
    min-height: 100%;
	width: 980px;
	margin: 0 auto;
	padding: 0 70px;
	position: relative;
	z-index: 1;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: white;
	border-top: none;
	border-bottom: none;
	box-shadow: 0 0 4px rgba(255,255,255,.3);
	-webkit-box-shadow: 0 0 4px rgba(255,255,255,.3);
	-moz-box-shadow: 0 0 4px rgba(255,255,255,.3);
	
	font-family: 'Swis721 Lt BT', 'Trebuchet MS',Helvetica, Arial, Verdana, sans-serif;
	color: #333333;
	font-size: 12px;
}
body::before{
	content: '.';
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

section {
	width: 100%;
	min-height: 575px;
}
.inlineBlock{
	display : inline-block;
	vertical-align: top;
}

.lienNormal{
	color: #993366;
	text-decoration: underline;
	font-weight: bold;
	font-size: 1.2em;
}
.lienNormal:hover{
	color: #CC3399;
	text-decoration: underline;
}

.lienNormal:active{
	color: #993366;
}

.lienNormal:visited{
}

.tooltipVert{
	color: green;
	display: none;
}
/*------------------------------------------ Header ------------------------------------------*/
header{
	width: 980px;
	height: 80px;
	margin: 18px auto;
	position: relative;
	padding: 0;
	
	border-bottom: 2px #666666 solid;
	box-shadow: 0px 1px 0px rgba(70,130,180,0.3);
	-webkit-box-shadow: 0px 1px 0px rgba(70,130,180,0.3);
	-moz-box-shadow: 0px 1px 0px rgba(70,130,180,0.3);
}

header div{
	display: inline-block;
	vertical-align: middle;
}

.header-titres{
	width: 200px;
	margin-right: 0px;
	margin-left: 15px;
}
header h1{
	width: 100%;
	min-width: 200px;
	margin-left: 0px;
	margin: 0px;
	font-weight: normal;
	text-transform: none;
	text-align: left;
	vertical-align: baseline;
	
}

header h1 a{
	text-decoration: none;
}

.mot1{
	color: DarkBlue;
	text-shadow: -1px 1px 1px rgba(70,130,180,0.6);
	letter-spacing: 1px;
	font-size: 2em;	
	margin-left: 4px;
}


.soustitre{
	color: DimGray;
	text-shadow: -1px 1px 1px rgba(70,130,180,0.6);
	letter-spacing: 1px;
	margin-left: 30px;
	font-size: 1.2em;	
}

.impressum p, .impressum address{
	padding-left: 20px;
	padding-right: 20px;
}

.impressum h2{

	padding-left: 20px;
	font-size: 1.4em;
}

.impressum aside{
	display: none;
}

/* ___________________________Formulaire connexion __________________________________________*/

.connexion{	
	width: 310px;
 	float: right; 
	padding: 0px;
	margin: 0px;
	margin-top: 2px;
}

.deconnexion{
	float : right;
	margin-top: 49px;
	margin-right: 10px;
}

.deconnexion a{
	color: #993366;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.6em;
}

.deconnexion a:hover{
	color: #CC3399;
	text-decoration: underline;
}

.deconnexion a:active{
	color: #993366;
}

.deconnexion a:visited{

}	



#loginConnexion, #passwordConnexion{
	height: 25px;
	font-size: 15px;
	color: #777777;
	border: 1px rgb(204,204,102) inset;
	border-radius: 2px;	
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	box-shadow: 1px 1px 1px #AAAAAA inset;
	-moz-box-shadow: 1px 1px 1px #AAAAAA inset;
	-webkit-box-shadow: 1px 1px 1px #AAAAAA inset;
	padding-left: 5px;
	
}

#loginConnexion:focus, #passwordConnexion:focus {
	border: 1px rgb(204,51,153) solid;
	-moz-box-shadow: 0 0 4px white;
	-webkit-box-shadow: 0 0 4px white;
	box-shadow: 0 0 4px white;
	
}

#loginConnexion{
	width: 300px;
	margin-bottom: 6px;
}

#passwordConnexion{
	width: 150px;
	margin-right: 5px;
}

#divCheckbox{
	color: #666666;
}

#divCheckbox input{
	position: relative;
	top: 1px;
	right: 2px;
}

#divCheckbox a{
	color: #666666;
	margin-left: 6px;
	text-decoration: none;
}

#divCheckbox a:hover{
	color: #CC3399;
	text-decoration: underline;
}

#divCheckbox a:active{
	color: #993366;
}

#divCheckbox a:visited{

}	

#divCheckbox label{
	margin-right: 6px;
}

#divBouton input{
	height: 30px;
}

.tooltip, .tooltipVisible{
	margin: 0px;
	margin-left: 2px;
	color: #FF66CC;
	font-weight: normal;
	text-shadow: 0 0 1px #DD44AA;
	font-size: 14px;	
}
.tooltipPetit, .tooltipVisible{
	margin: 0px;
	margin-left: 2px;
	color: #FF66CC;
	font-weight: normal;
	text-shadow: 0 0 1px #DD44AA;
	font-size: 10px;
	max-width: 200px; 
	display: block;
}
.invisible{
	display: none;
}

.bloc{
	display: block;
}

/* -----------------------------CONTENU----------------------------------------*/
h1 {
	font-size: 2em;
    font-weight: normal;
    text-transform: uppercase;
	color: #660033;	
	text-shadow: -1px 1px #993366;
	text-align: center;
}
h2 {
	font-size: 1.2em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	font-weight: bold;
	color: DarkBlue;
	text-shadow: -1px 1px rgb(70,130,180);	
	text-shadow: -1px 1px
	rgba(70,130,180,0.6);
}
h3 {
	text-align: justify;
	font-size: 1em;
	font-style: italic;
	color: #666633;
	font-weight: normal;
}

.paragrapheNormal{
	font-size: 1.2em;
	color: #555555;
}
.bouton{
	color: #FFF2FF;
	height: 35px;
	width: 140px;
	
	letter-spacing: 1px;
	
	font-size: 14px;
	line-height: 18px;
	text-shadow: 0 0 1px #FFCCFF;
	
	background-color: #993366;
	background-image: -webkit-linear-gradient(#be417f,#993366);
	background-image: -o-linear-gradient(#be417f,#993366);
	background-image: linear-gradient(#be417f,#993366);	
	
	
	
	box-shadow: 0 0 1px #555555;
	-webkit-box-shadow: 0 0 1px #555555;
	-moz-box-shadow: 0 0 1px #555555;
		
	border: 1px outset #555555;
	
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	
	cursor: pointer;	
}
.bouton:hover{
	color: #FFCCFF;
	text-shadow: 1px 1px 1px #993366;
	cursor: pointer;	
	background-image: -webkit-linear-gradient(#993366,#660033);
	background-image: -o-linear-gradient(#993366,#660033);
	background-image: linear-gradient(#993366,#660033);	
}
.bouton:active{
	color: #FFEEFF;
	text-shadow: 1px 1px 1px #993366;
	cursor: pointer;	
	background-image: -webkit-linear-gradient(#e837ad,#CC3399);
	background-image: -o-linear-gradient(#e837ad,#CC3399);
	background-image: linear-gradient(#e837ad,#CC3399);	
}

.cache{
	display: none;
}

/*----------------------FORMULAIRES --------------------------*/
/* Pour un titre avant formulaire dans un gradient-gris (cf. accueil)*/
.titreFormulaire{
	text-align: center;
	margin-bottom: 0;
	color: #FFF6FF;
	font-size: 16px;
	border-bottom: 1px #555555 inset;
	padding-bottom: 15px;
	box-shadow: 0px 1px 0px rgba(70,130,180,0.3);
	-webkit-box-shadow: 0px 1px 0px rgba(70,130,180,0.3);
	-moz-box-shadow: 0px 1px 0px rgba(70,130,180,0.3); */
}

/* L'ombre d'une partie du titre que j'entoure de span */
.titreFormulaire span{
	text-shadow: 0 0 1px #FFF6FF;
	font-size: 17px;	
}

.correct{
	font-weight: normal;
	color: #777777;
	border: 1px rgb(204,204,102) inset;
	border-radius: 2px;	
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	box-shadow: 1px 1px 1px #AAAAAA inset;
	-moz-box-shadow: 1px 1px 1px #AAAAAA inset;
	-webkit-box-shadow: 1px 1px 1px #AAAAAA inset;
}

.correct:focus{
	border: 2px rgb(204,204,102) solid;
	-moz-box-shadow: 0 0 4px white;
	-webkit-box-shadow: 0 0 4px white;
	box-shadow: 0 0 4px white;
}

.incorrect {
	color: rgb(204,51,153);
	font-weight: bold;
	border: 1px rgb(204,51,153) solid;
	border-radius: 2px;	
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	box-shadow: 1px 1px 1px #AAAAAA inset;
	-moz-box-shadow: 1px 1px 1px #AAAAAA inset;
	-webkit-box-shadow: 1px 1px 1px #AAAAAA inset;
}
.incorrect:focus {
	border: 2px rgb(204,51,153) solid;
	-moz-box-shadow: 0 0 4px white;
	-webkit-box-shadow: 0 0 4px white;
	box-shadow: 0 0 4px white;
}
/*Les inputs */
.petit-input{
	width: 35px;
	height: 12px;
	margin-top: 3px;
	margin-bottom: 3px;
	text-align: center;
	padding-top: 2px;
	padding-left: 3px;
	font-size: 10px;
}
.moyen-input{
	width: 200px;
	height: 20px;
	margin-top: 3px;
	margin-bottom: 3px;
	padding-top: 2px;
	padding-left: 4px;
	font-size: 12px;
}
.grand-input{
	width: 300px;
	height: 25px;
	margin-bottom: 5px;
	padding-left: 5px;
	font-size: 15px;
}


/*Les select */
.petit-select{
	margin-top: 3px;
	margin-bottom: 3px;
	width: 96px;
	height: 17px;
	padding-left: 3px;
	font-size: 10px;
}
.moyen-select{
	padding-top: 1px;
	width: 206px;
	height: 20px;
	margin-top: 3px;
	margin-bottom: 3px;
	padding-left: 4px;
	font-size: 12px;
}
.grand-select{
	width: 400px;
	height: 25px;
	margin-bottom: 5px;
	padding-left: 5px;
	font-size: 15px;
}
.placeholder-select{
	color: #999999;
}

/*-----------------------------------FOOTER---------------------------------------------------------------------*/

footer{
	width: 980px;
	height: 60px;
	margin: 25px auto;
	position: relative;
	padding: 0;
	
	border-top: 2px #666666 solid;
	box-shadow: 0px -1px 0px rgba(70,130,180,0.3);
	-webkit-box-shadow: 0px -1px 0px rgba(70,130,180,0.3);
	-moz-box-shadow: 0px -1px 0px rgba(70,130,180,0.3);
	
	text-align: center;
	padding-top: 20px;
}

footer a{
	color: #999999;
	text-decoration: none;
	display: inline-block;
}

footer a:hover{
	color: rgb(70,130,180);
	font-weight: bold;
}

footer a:active{
	color: #660033;
}

footer a:visited{
}

#lienPresse, #lienContact{
	width: 80px;
}

#lienCGU {
	width: 200px;
}

#lienViePrivee {
	width: 180px;
}

#lienMentionsLegales{
	width: 120px;
}

/* Les gradients */

.gradient-or {
	/* Anciens navigateurs */
	background: url("gradient-bg.png") repeat-x top;
	-o-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	/* Internet Explorer */
	*background: none;
	background: none\0/;
	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#4dcccc66, endColorstr=#7fcccc66);
	}
	@media all and (min-width: 0px) {
		.gradient-or {
			/* Opera */
			background: url("gradient-bg.svg");
			/* Navigateurs récents */
			background-image: -webkit-gradient(
				linear,
				left top, left bottom,
				from(rgba(70,130,180,0.1)),
				to(rgba(70,130,180,0.2))
			);
			background-image: -webkit-linear-gradient(
				top,
				rgba(70,130,180,0.1),
				rgba(70,130,180,0.2)
			);
			background-image: -moz-linear-gradient(
				top,
				rgba(70,130,180,0.1),
				rgba(70,130,180,0.2)
			);
			background-image: -o-linear-gradient(
				top,
				rgba(70,130,180,0.1),
				rgba(70,130,180,0.2)
			);
			background-image: linear-gradient(
				top,
				rgba(70,130,180,0.1),
				rgba(70,130,180,0.2)
			);
		}
	}
	
.gradient-gris {
	/* Anciens navigateurs */
	background: url("gradient-bg.png") repeat-x top;
	-o-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	/* Internet Explorer */
	*background: none;
	background: none\0/;
	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#b33c3c3c, endColorstr=#cc3c3c3c);
	}
	@media all and (min-width: 0px) {
		.gradient-gris{
			/* Opera */
			background: url("gradient-bg.svg");
			/* Navigateurs récents */
			background-image: -webkit-gradient(
				linear,
				left top, left bottom,
				from(rgba(60,60,60,0.7)),
				to(rgba(60,60,60,0.8))
			);
			background-image: -webkit-linear-gradient(
				top,
				rgba(60,60,60,0.7),
				rgba(60,60,60,0.8)
			);
			background-image: -moz-linear-gradient(
				top,
				rgba(60,60,60,0.7),
				rgba(60,60,60,0.8)
			);
			background-image: -o-linear-gradient(
				top,
				rgba(60,60,60,0.7),
				rgba(60,60,60,0.8)
			);
			background-image: linear-gradient(
				top,
				rgba(60,60,60,0.7),
				rgba(60,60,60,0.8)
			);
		}
	}
/* ___________________________ Les boutons radios et checkbox ____________________*/
/* CF. http://www.screenfeed.fr/blog/personnalisation-checkbox-boutons-radio-sans-image-0570/ */
/* Masquer les inputs : on masque les inputs seulement sur les navigateurs récents,
tout en conservant la navigation au clavier */

.special input[type="checkbox"]:checked,
.special input[type="checkbox"]:not(:checked),
.special input[type="radio"]:checked,
.special input[type="radio"]:not(:checked) {
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	position: absolute;
	clip: rect(0 0 0 0);
	clip: rect(0,0,0,0);
	-webkit-appearance:	none;
	-moz-appearance:	none;
	-o-appearance:		none;
	appearance:		none;
}

/* Le label : (le seul point à noter est padding-left,
 c'est dans cet espace que viendront se loger nos fake inputs*/
.special #foo:checked:before,
.special input[type="checkbox"]+label,
.special input[type="radio"]+label {
	/*float: left;*/
	padding-left: 15px;
	padding-left: 1.5rem;
/*	margin-right: 16px;
	margin-right: 1.6rem;*/
	position: relative;
	cursor: pointer;
}
/* Le fond de nos fausses inputs */
.special #foo:checked,
.special input[type="checkbox"]+label:before,
.special input[type="radio"]+label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 2px;
	/*top: 50%;
	margin-top: -9px;
	margin-top: -.9rem;*/
	width: 8px;
	width: 0.8rem;
	height: 8px;
	height: 0.8rem;
	background-color: rgba(255,255,255,.7);
	background:	-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)), to(rgba(255,255,255,.9)));
	background:	-webkit-linear-gradient(top, rgba(255,255,255,.4), rgba(255,255,255,.9));
	background:	   -moz-linear-gradient(top, rgba(255,255,255,.4), rgba(255,255,255,.9));
	background:	     -o-linear-gradient(top, rgba(255,255,255,.4), rgba(255,255,255,.9));
	background:		linear-gradient(top, rgba(255,255,255,.4), rgba(255,255,255,.9));
	-webkit-box-shadow:	inset .1rem .1rem .2rem rgba(0,0,0,.3), inset 0 0 0 .1rem rgba(0,0,0,.1);
	-moz-box-shadow:	inset .1rem .1rem .2rem rgba(0,0,0,.3), inset 0 0 0 .1rem rgba(0,0,0,.1);
	-o-box-shadow:		inset 1px 1px 2px rgba(0,0,0,.3), inset 0 0 0 1px rgba(0,0,0,.1);
	-o-box-shadow:		inset .1rem .1rem .2rem rgba(0,0,0,.3), inset 0 0 0 .1rem rgba(0,0,0,.1);
	box-shadow:		inset 1px 1px 2px rgba(0,0,0,.2), inset 0 0 0 1px rgba(0,0,0,.1);
	box-shadow:		inset .1rem .1rem .2rem rgba(0,0,0,.3), inset 0 0 0 .1rem rgba(0,0,0,.1);
	-webkit-border-radius:	.3rem;
	-moz-border-radius:	.3rem;
	-o-border-radius:	3px;
	-o-border-radius:	.3rem;
	border-radius:		3px;
	border-radius:		.3rem;
}
.special input[type="radio"]+label:before {
	-webkit-border-radius:	.8rem;
	-moz-border-radius:	.8rem;
	-o-border-radius:	8px;
	-o-border-radius:	.8rem;
	border-radius:		8px;
	border-radius:		.8rem;
}

/* Montrer le focus */
.special input[type='checkbox']:focus + label:before,
.special input[type='radio']:focus + label:before {
	-webkit-box-shadow:	inset .1rem .1rem .2rem rgba(0,0,0,.3), inset 0 0 0 .1rem rgba(0,0,0,.1), 0 0 0 .3rem rgba(0,0,0,.4);
	-moz-box-shadow:	inset .1rem .1rem .2rem rgba(0,0,0,.3), inset 0 0 0 .1rem rgba(0,0,0,.1), 0 0 0 .3rem rgba(0,0,0,.4);
	-o-box-shadow:		inset 1px 1px 2px rgba(0,0,0,.3), inset 0 0 0 1px rgba(0,0,0,.1), 0 0 0 3px rgba(0,0,0,.4);
	-o-box-shadow:		inset .1rem .1rem .2rem rgba(0,0,0,.3), inset 0 0 0 .1rem rgba(0,0,0,.1), 0 0 0 .3rem rgba(0,0,0,.4);
	box-shadow:		inset 1px 1px 2px rgba(0,0,0,.2), inset 0 0 0 1px rgba(0,0,0,.1), 0 0 0 3px rgba(0,0,0,.4);
	box-shadow:		inset .1rem .1rem .2rem rgba(0,0,0,.3), inset 0 0 0 .1rem rgba(0,0,0,.1), 0 0 0 .3rem rgba(0,0,0,.4);
}

/* Transition CSS */

.special input+label:after {
	-webkit-transition:	-webkit-transform 0.2s ease-in-out;
	-moz-transition:	   -moz-transform 0.2s ease-in-out;
	-o-transition:		     -o-transform 0.2s ease-in-out;
	transition:			transform 0.2s ease-in-out;
}

/* Boutons radio */
/* Commentaire : Cette fois c'est moins compliqué pour faire la coche 
puisqu'il s'agit d'un disque. Hauteur et largeur sont donc identiques, 
border-radius est fixé à 50% (un fallback en rem est prévu pour Safari 
qui n'aime pas trop les pourcentages, je ne sais pour quelle raison). 
Ensuite, tout est une histoire de couleur de fond et de box-shadow. 
La seule transformation que nous gardons est scale() pour conserver 
la transition. 
Cette fois, inutile de préciser un transform-origin puisque nous 
souhaitons nous positionner au centre du disque, soit "50% 50%",
 c'est à dire la valeur par défaut.*/
.special #foo:checked,
.special input[type="radio"]+label:after {
	content: '';
	position: absolute;
	left: 2.5px;
/*	left: .2rem;*/
	top: 5px;
	/*top: 50%;
	margin-top: -7px;
	margin-top: -.7rem;*/
	width: 5px;
	width: 0.5rem;
	height: 5px;
	height: 0.5rem;
	background-color: rgb(255,119,187);
	-webkit-border-radius:	.6rem;
	-webkit-border-radius:	50%;
	-moz-border-radius:	50%;
	-o-border-radius:	50%;
	border-radius:		50%;
	-webkit-box-shadow:	inset 0 .1rem .2rem rgba(255,255,255,.6), inset 0 -.1rem .1rem 0 rgba(0,0,0,.5), 0 0 .3rem #000;
	-moz-box-shadow:	inset 0 .1rem .2rem rgba(255,255,255,.6), inset 0 -.1rem .1rem 0 rgba(0,0,0,.5), 0 0 .3rem #000;
	-o-box-shadow:		inset 0 1px 2px rgba(255,255,255,.6), inset 0 -1px 1px 0 rgba(0,0,0,.5), 0 0 3px #000;
	-o-box-shadow:		inset 0 .1rem .2rem rgba(255,255,255,.6), inset 0 -.1rem .1rem 0 rgba(0,0,0,.5), 0 0 .3rem #000;
	box-shadow:		inset 0 1px 2px rgba(255,255,255,.6), inset 0 -1px 1px 0 rgba(0,0,0,.5), 0 0 3px #000;
	box-shadow:		inset 0 .1rem .2rem rgba(255,255,255,.6), inset 0 -.1rem .1rem 0 rgba(0,0,0,.5), 0 0 .3rem #000;
	-webkit-transform:	scale(0);
	-moz-transform:		scale(0);
	-o-transform:		scale(0);
	transform:		scale(0);
}
.special input[type="radio"]:checked+label:after {
	-webkit-transform:	scale(1);
	-moz-transform:		scale(1);
	-o-transform:		scale(1);
	transform:		scale(1);
}
/*
input[type="radio"]:checked+label:hover:after {
	-webkit-transform:	scale(1.3);
	-moz-transform:		scale(1.3);
	-o-transform:		scale(1.3);
	transform:		scale(1.3);
}*/

/* Check box  */

.special #foo:checked,
.special input[type="checkbox"]+label:after {
	content: 'v';
	position: absolute;
	left: 2px;
	left: .2rem;
	top: 50%;
	margin-top: -17px;
	margin-top: -1.7rem;
	width: 14px;
	width: 1.4rem;
	font-family: "Comic Sans MS", cursive;
	color: #333;
	font-size: 24px;
	font-size: 2.4rem;
	-webkit-transform:	skewX(-25deg) skewY(-40deg) scale(0);
	-moz-transform:		skewX(-25deg) skewY(-40deg) scale(0);
	-o-transform:		skewX(-25deg) skewY(-40deg) scale(0);
	transform:		skewX(-25deg) skewY(-40deg) scale(0);
	-webkit-transform-origin:	50% 100%;
	-moz-transform-origin:		50% 100%;
	-o-transform-origin:		50% 100%;
	transform-origin:		50% 100%;
}
.special input[type="checkbox"]:checked+label:after {
	-webkit-transform:	skewX(-25deg) skewY(-40deg) scale(1);
	-moz-transform:		skewX(-25deg) skewY(-40deg) scale(1);
	-o-transform:		skewX(-25deg) skewY(-40deg) scale(1);
	transform:		skewX(-25deg) skewY(-40deg) scale(1);
}
.special input[type="checkbox"]:checked+label:hover:after {
	-webkit-transform:	skewX(-25deg) skewY(-40deg) scale(1.3);
	-moz-transform:		skewX(-25deg) skewY(-40deg) scale(1.3);
	-o-transform:		skewX(-25deg) skewY(-40deg) scale(1.3);
	transform:		skewX(-25deg) skewY(-40deg) scale(1.3);
}