/* Styles generaux à appliquer dans tous les cas.*/
body	{
		background:#eee;
		margin : 0px;
		line-height: 1.75;
		font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
		text-align:justify;
		}

a	{
	color:#1E90FF;
	}

p 	{
	margin: 1.75em 0;
	font-weight: 300;
	letter-spacing: 0.025em;
	word-spacing: 0.025em;
	}

p.mention	{
			font-size : 12px;
			color:#666;
			text-align: center;
			margin-top: 0px;
			}

h1, h2 	{
		margin: 1em 0 0.5em;
		letter-spacing: 0.125em;
		word-spacing: 0.125em;
		text-transform: uppercase;
		text-align: left;
		}
h1	{
	font-size: 1.3em;
	}

h2 	{
	font-weight: normal;
	}

h3	{
	color: #706b64;
	font-size : 16px;
	}

ul 	{
	list-style:none;
	margin-left:0px;
	padding-left:0px;
	}

ul li 	{
		margin-left:0px;
		padding-left:0px;
		}

/* Menu de Navigation */
nav {
	display: flex;
	margin : 0px auto 0px auto;
	}

nav ul	{
		width : 1024px;
		list-style-type: none;
		display: flex;
		margin : 0px auto;
		padding: 0;	
		}

nav li	{
		flex: 1;
		background:#1E90FF;
		}

nav a	{
		display: flex;
		color:#fff;
		text-transform: uppercase;
		text-decoration:none;
		margin : 0px auto;
		justify-content: center;
		align-items : center;
		padding: 5px 0px;
		}

nav  a:hover{
			background:#1E69FF;
			margin : 0px auto;
			padding: 5px 0px;
			}

li.active	{
			background:#1E69FF;
			}

/* Pour les ecrans superieurs à 1024 px on applique les regles suivantes */

/* Header */
header	{
		width:100%;
		background:#bbb;
		border-bottom: 1px solid black;
		margin : 0px auto;
		padding-top : 5px;
		}

#logo	{
		margin : auto;
		text-align : center;
		}

/* Footer*/
footer	{
		width:100%;
		margin : 0px auto;
		}

/* Contenu*/
section.bloc_page	{
					display: flex;
					color: #364452;
					background-color: white;
					width: 1024px;
					margin: 0px auto;
					}

article	{
		flex: 2;
		padding: 20px 0px;
		margin-left : 50px;
		margin-right : 50px;
		}

aside	{
		flex: 1;
		margin: 60px 10px ;
		}	

/* Les Tableaux*/
table	{
		background: #FEFEFE;
		border: 1px solid black;
		border-collapse: collapse; /*fusion des bordures*/
		}

caption	{
		background: #6bb6ff;
		border: 1px solid black;
		border-bottom: none;
		padding: 9px;
		font-size: 120%;
		font-weight: bold;
		color: black;
		}

th	{
	background: #d2e9ff;
	}

td, th	{
		border: 1px solid black;
		padding: 9px 27px;
		text-align: left;
		font-size : 11px;
		}

/* Formulaire de recherche*/
.form-recherche {
				width: 240px;
				padding-bottom : 60px;
				}

.form-recherche #recherche 	{
							width: 170px;
							height: 11px;
							padding: 10px 5px;
							float: left;    
							font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
							font-size : 13px;
							border: 1px solid #ccc;
							box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
							border-radius: 3px; 	
							}
.form-recherche #recherche:focus 	{
									outline: 0; 
									border-color: #aaa;
									box-shadow: 0 1px 1px #bbb inset;  
									}
.form-recherche #submit {
						float: right;    
						border: 1px solid #1E69FF;
						height: 33px;
						width: 40px;
						color: #fafafa;   
						background-color: #1E90FF;
						border-radius: 5px; 	
						}

.form-recherche #submit:hover,
.form-recherche #submit:focus 	{       
								background-color: #1E69FF;
								}   

#form-contact label { 
					margin:4px 0;
					color:#1E90FF;
					display:block;
					text-align : center;
					}

input 	{ 
		display:block;
		width:70%;
		color:#000;
		border:1px solid #5f5f5f;
		padding:10px;
		margin : 0px auto 15px auto;
		}

textarea 	{ 
			display:block;
			width:70%;
			color:#000;
			border:1px solid #5f5f5f;
			padding:10px;
			margin : 0px auto 15px auto;;
			}

.bouton-envoyer {
				cursor:pointer;
				background-color:#1E90FF;
				border:1px solid #1E69FF;
				color:#ffffff;
				font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
				font-size : 13px;
				width:25%;
				font-weight:bold;
				margin : 10px auto;
				}

.bouton-envoyer:hover 	{
						background-color: #1E69FF;
						}
	
/* Regles appliquees aux ecrans inferieurs à 1024px */
@media all and (max-width: 1024px)
{
	body 	{
			width: auto;
			margin: 0;
			padding: 0;
			}
	
	/* fixer une largeur maximale de 100% aux elements potentiellement problematiques */
	img,
	table,
	tr,
	td,
	textarea,
	input,
	embed,
	video,
	nav	{
		max-width: 100%;
		margin: 0;
		padding: 0;
		}
    
	/* conserver le ratio des images */
	img {
		height: auto;
		}

	nav	{
		width: 100%;
		}
	
	nav ul	{
			display:flex;
			flex-direction: column;
			}

	section.bloc_page 	{
						background-color: white;
						width: 100%;
						margin : 0px;
						padding : 10px 0px 25px 0px;
						display : block;
						padding : 0;
						} 
	
	article, 
	aside	{
			display : block;
			width : 100%;
			margin : 0px;
			padding : 0;
			}

	aside	{
			text-align : center;
			}
	
	form	{
			width : 100%;
			}

	h1	{
		font-size: 1em;
		text-transform: none;
		}

	p 	{
		font-size: 13px;
		margin : 0px;
		}

	.form-recherche	{
					width: 210px;
					margin : auto;
					}

	.form-recherche#recherche	{
								width: 150px;
								}
	
	input, textarea {
					margin : auto;
					padding-top : 5px;
					padding-bottom : 5px;
					}
}

/* Pour les ecrans inferieurs à 320px, on n'affiche pas les tableaux*/
@media all and (max-width: 320px)
{
	table	{
			display : none;
			}
}