/* Style général */
body {
	padding: 0;
	background-color: gray;
	font: .8em Verdana, Arial, Helvetica, sans-serif;
}
body, h1, h2, p {
	margin: 0;
}
div#conteneur {
	width: 940px;
	margin: 20px auto 0 auto;
	padding: 10px;
	background-color: white;
	border-radius: 10px;
}

/* Entête */
header#haut {
	margin: 0 0 10px 0;
	padding: 5px;
	background-color: lightblue;
	border-radius: 10px;
}
header#haut h1, header#haut h2 {
	color: white;
}

/* Barre de navigation */
nav#navigation {
	margin: 0 0 10px 0;
	padding: 5px;
	background-color: silver;
	border-radius: 10px;
}
nav#navigation p {
	color: white;
}
nav#navigation a {
	text-decoration: none;
	color: white;
}

/* Conteneur principal */
section#contenu {
	float: left;
	/*width: 720px;*/
	width: 99%;
	padding: 5px;
}
article {
	margin: O O 20px 0;
	border-top: 1px dotted #333;
}

/* Colonne latérale */
aside#sidebar {
	float: right;
	width: 190px;
	margin: 0 0 0 10px;
	padding: 5px;
	border-radius: 5px;
	background-color: #E8E8E8;
}
aside#sidebar p {
	text-align: center;
}

/* Pied de page */
footer#piedDePage {
	padding: 5px;
	border-radius: 5px;
	/*background-color: #E8E8E8;*/
	background-color: lightblue;
	clear: both;
}
footer#piedDePage p {
	text-align: center;
	font-size: .75em;
}

@media screen and (max-width: 768px) {
	body {
		background-color: #fff;
	}
	div#conteneur {
		width: 97%;
		margin: 0;
	}
	header#haut {
		background-color: lightblue;
		color: #fff
	}
	section#contenu {
		float: none;
		width: auto;
	}
	article {
		margin: O O 20px 0;
		border-top: 1px dotted #333;
	}
	aside#sidebar {
		float: none;
		width: auto;
		margin: 0 0 10px 0;
	}
	aside#sidebar img {
		display: none;
	}
	article h1 {
		font-size: 1.5em;
	}
}