@import url(http://fonts.googleapis.com/css?family=Pompiere);
/* Importation de police Google Font Pompiere */
/* -----------------
fond de la page : #FBFAFF
fond du header : #141E1F
fond de la navigation : rgba(34, 26, 23, 0.7)
texte : #0A1819 1rem
titre : #701F2E  2.5rem 900
liens : #FBFAFF 2.2rem 300
content : max-width:980px 
--------------------*/




/* ----------- GENERAL -------------- */


html{
  font-family: "Pompiere",sans-serif;
  background: url(../images/fond.jpg) no-repeat center fixed; 
  /*
  La propriété CSS background-size avec la valeur cover permet de couvrir des surfaces tout en conservant le ratio de l’image de fond. (Cover spécifie que l'image d'arrière-plan doit être mise à l'échelle pour être aussi petite que possible tout en assurant que les deux dimensions soient supérieures ou égales aux dimensions de la surface de positionnement).
  */
  background-size: cover; 
  text-align:center;
}

/* ----------- HEADER -------------- */

header{
	background: rgba(34, 26, 23, 0.1);
	height:300px;
}



/* ----------- NAVIGATION -------------- */



nav ul{

/* propriété permettant de définir de la transparence à la couleur de fond d’un container */
background: rgba(34, 26, 23, 0.7);
font-size: 1.5em;
font-weight: normal;
height: 50px;
line-height:50px;
padding: 0;
width: 100%;


}

nav ul li {
display:inline-block;
list-style: none;
}

nav ul li a {
color: #FBFAFF;
/* display: block;
height: 50px; */
padding: 3px 50px 0 20px;
text-decoration: none;
/* La propriété text-shadow permet de créer des ombres sur un texte, les 4 valeurs correspondent (dans l’ordre) au décalage de l’ombre vers la droite, décalage de l’ombre vers le bas, à la valeur du flou de l’ombre, à la couleur de l’ombre */
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);

}

/* --- CONTENT --- */

main{
	text-align: justify;
	max-width:980px;
	margin:auto;
	font-family:"Myriad Pro", sans-serif;
	/* font-weight:500; */
	background-color:rgba(255, 255, 255, 0.8);
	padding:1rem;
	border:thin solid #701F2E;
	border-top-style:none;
}

main h1 {
	font-family: "Pompiere",sans-serif;
	font-size: 3rem;
	font-weight:100;
	padding-bottom:0.5em;
}

main h2 {
	font-family: "Pompiere",sans-serif;
	font-size: 2rem;
	font-weight:100;
    text-align:center;
}

main p {
	padding:0.5rem;
	line-height:1.2rem;
	/* Pour éviter le décalage éventuel causé par la lettrine */
}

main p:first-letter{
	font-family: "Pompiere",sans-serif;
	font-size: 2.5rem;
	font-weight:900;
	color:#701F2E;
}

main a{
	color:#701F2E;
	font-size:1.2em;
	font-weight:700;
	text-decoration:none;
}

/* ---- TABLEAU ---- */


main table {
 padding:0px;
 width:900px;
 margin:auto;
 border:1px solid #701F2E;
}
main table img {
	box-shadow: 0px 0px 25px gray;
}

main td{
	border:1px solid #701F2E;
	width:300px;
	text-align:center;
}


/* ---- FORMULAIRE ---- */

main form{
 padding:0px;
 width:900px;
 margin:auto;
 margin-bottom:2em;
}



main label{
	/* Pour aligner les éléments de formulaire*/
	width:150px; 
	display:inline-block;
	/*Pour dimensionner les labels */
	margin-top:0.5rem;
}

main legend {
font-size:2.5em;
font-family: "Pompiere",sans-serif;
font-weight:100;
color:#701F2E;
padding-bottom:0.5rem;
}

main fieldset {
 border:1px solid #701F2E;
 border-radius:10px;
 padding:1rem;
 margin:1rem;
}

input{
	
	width:450px;
	height:1.1rem;
}

input:required {
  background: #fff url(../images/asterisk.png) 98% center no-repeat;
  
/*   background-image:url(images/asterisk.png);
  background-position:right 2% center ;
  background-repeat:no-repeat; */
}

/*Lorsque mon curseur est dans l'input et que celui-ci est valide */
input:focus:valid {
 border-color: #56c93f;
  box-shadow: 0 0 5px #56c93f;
}
/*Lorsque mon curseur est dans l'input et que celui-ci est invalide (en fonction du type de l'input) */
input:focus:invalid {
  border-color: #FF0000;
  background-image: none;
  box-shadow: 0 0 5px #d45252;
}

input[type=submit]
 {
 
border-radius: 17px;
border: 1px solid #FFFFFF;
box-shadow: 3px 3px 6px #444444;
font-size: 1em;
color:white;
background-color:rgba(34, 26, 23, 0.7);
width:10em;
height:3em;
 }

input[type=submit]:hover
{
	box-shadow: 5px 5px 5px #888;
}

/* ---- FORMULAIRE ---- */

iframe {
	margin-top:3%;
	
}


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

footer {
	margin-top:1%;
	text-align: center;	
}

footer p {
	font-size:2.7rem;
	font-weight: 600;
}

footer address {
	font-size:1.7rem;
	font-style:normal;
	text-align:center;
}

footer p#copyright a{
	padding-top:0.5em;
	font-size:0.5em;
	color:#701F2E;
	font-style :normal;
	text-decoration:none;
}