/************** ASPECTS GENERAUX **************/
body {
	max-width: 1280px;					/* largeur maximum de la page  */
	margin: 5px auto;					/* centrage */
	font-size: 1.1em;					/* taille des caractères */
	font-family: comic sans ms, sans-serif;		/* polices */
	color: #000080;						/* couleur du texte */
}
img {									/* images responsives */
	max-width: 100%;
	height: auto;
}
* {										/* style des boites */
	box-sizing: border-box;
}

/***************** HEADER *****************/
.titre-site {	
	text-align: center;									
	font-size: 3em;	
	font-weight: bold;
	font-style: italic;
}
.image-entete {
	border-radius: 8px;
}

/*************** NAVIGATION ****************/
nav {									/* bande du menu */
	background-color:#000080;			/* couleur de fond */							
	height: 2em;						/* hauteur */
	width: 100%;						/* largeur */
}
.toggle, [id^=drop] {					/* menu responsive ; invisible si écran large */
	display: none;
}
.navigation {
	line-height: 2em;					/* hauteur */
	font-weight: bold;					/* caractères gras */
}
.navigation ul { 
	margin: 0;							/* marge extérieure */
	padding: 0;							/* marge intérieure */
	list-style-type:none;				/* pas de puces dans la liste servant de menu */
}
.navigation ul li a {
	display: block;						/* largeur fixe */
	float: left;   						/* boutons en ligne */
	width: 25%;							/* largeur des boutons (100% / nb de boutons */
	background-color: #000080;   		/* couleur de fond */
	color: white;						/* couleur du texte */
	text-decoration:none;				/* pas de soulignement */
	text-align:center;					/* aligner le texte au centre de chaque bloc */
}
.navigation ul li a:hover {				/* passage de la souris */
 	background-color: #ADD8E6;			/* couleur de fond */
	color:#000080;						/* couleur du texte */
}

/********* CONTENU DE LA PAGE : Partie gauche : SECTION *********/
section {
	float: left;
	width: 70%;
}
.titre-page {
	margin: 1em auto 0 auto;			/* marges */
	font-size: 2em;						/* taille de la police */
	font-weight: bold;					/* caractères en gras */
	text-align: center;					/* titre centré */
}
article {
	padding: 3px 8px 3px 0;				/* marges intérieures d'un article */
}

/********* CONTENU DE LA PAGE : Partie droite : ASIDE **************/
aside {
	float: right;						/* section 70% marge gauche 1% aside 29% */
	width: 29%;
	margin-left: 1%;
	margin-top: 15px;
	padding: 0 8px;
	background-color: #ADD8E6;
	border: 2px solid #000080;
	border-radius: 5px;
}
.titre-lateral {						/* titre aside */
	font-size: 1.5em;
	font-weight: bold;
	font-style: italic;
	text-align: center;
	margin: 10px auto;
}

/********* PIED DE PAGE ************/
footer {
	height: 2em;
	line-height: 2em;
	background-color: #000080;
	color: white;
}
.menu-bas a {
	display: block;
	width: 200px;
	margin: 0 auto;
	color: white;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
}
.menu-bas a:hover {
	background-color: #add8e6;
	color: #000080;
}

/************* IMAGES ******************/
.image-gauche {
	float: left;
	margin: 1em;
}
.image-centre {	
	margin: 1em;
	text-align: center;
}
/* 3 images côte à côte */
.groupe3 {
	width: 90%;
	margin: 50px auto;
}
.groupe31, .groupe32, .groupe33 {
	float: left;
	width: 30%;
	margin-left: 2.5%;
}
/* 2 images côte à côte */
.groupe2 {
	width: 90%;
	margin: 50px auto;
}
.groupe21, .groupe22, .groupe23, .groupe24 {
	float: left;
	width: 40%;
	margin: 1em 0 0 6.666%;
}

/************* DIVERS *****************/
.annuler-flottement {
	clear: both;
}
.haut-page {
	margin: 1em;
	text-align: right;
}

/************ ASPECTS RESPONSIVE DU SITE *************/
@media (max-width: 799px) {
	
	/* contenu de la page */
	section, aside {
		float: none;
		width: 98%;
		margin: 0 auto;
	}
	/* images */
	.image-gauche {
		float: none;
		text-align: center;
	}
	.groupe3 {
		text-align: center;	
	}
	.groupe31, .groupe32, .groupe33 {
		float: none;
		width: 90%;
		margin: 25px auto;	
	}
	.groupe2 {
		text-align: center;
	}
	.groupe21, .groupe22, .groupe23, .groupe24 {
		float: none;
		width: 90%;
		margin: 10px auto;	
	}
	
	/* navigation/menu */
	.navigation {
		width: 100%; 					/* largeur du menu */
		font-size: 1.2em;				/* taille des caractères passe de 1em (standard) à 1.2em */
	}
	.toggle + a, .menu {				/* menu 'grand écran' invisible */
		display: none;
	}
	.toggle {							/* paramètres du menu 'toggle' */
		display: block; 
		background-color: #000080; 
		padding: 0 20px; 
		color: white; 
		line-height: 2em; 
		text-decoration: none;
	}
	.toggle:hover {
		background-color: #ADD8E6; 
		color:#000080;
		}
	.menu {
		width: 100%;
	}
	[id^=drop]:checked + ul {
		display: block;
	}
	.navigation ul li a {
		display: block; 
		width: 100%; 
		padding: 0 20px; 
		text-align: left;
	}
	
}