/* page index.html avec texte concernant la reprise des cours */


section#nouveau {
	
}
section#nouveau p {
	margin: 2em 4em 0.5em 4em;
	border: 1px solid #000;
	border-radius: 16px;
	padding: 1em;
	background-color: #faf9a7;
	text-align: center;
	letter-spacing: 0.1em;
}
section#index {
	display: table;
	border-collapse: separate;
}
	
div#ecole, div#atelier {
	display: table-cell;  
	max-width: 460px;
	min-width: 320px;
	width:auto;
	height:820px; 
	background-color: #F1F1F1; 
	border: 2em solid #FFF; 
	border-left-width: 4em;
	text-align:center; 
}
div#ecole div, div#atelier div {border: 1px solid #999; height:820px; margin-left: 2px; }
div#ecole img, div#atelier img {display:block; width: 100%; height:auto;   } 

div#ecole h2, div#atelier h2 {text-align: center; margin-top: 1.5em; }
div#ecole h4, div#atelier h4 {
	margin: 2em 10%; 
	padding: 0.4em; 
	background-color: #223645; 
	color: #FFF; 
}

div#ecole ul, div#ecole p, div#atelier p {margin-bottom: 2em; }

div#ecole p strong, div#atelier p strong {
	display:inline-block; 
	padding: 0.3em; 
	margin-bottom: 0.5em; 
	background-color:#0587ae; 
	color:#FFF; 
}

ul#liste_cours {width:80%; margin: 0px auto; margin-bottom: 3em; padding-left: 30px; text-align:left; }
a.remonter {
	display:inline-block;
	float: right;
	margin: 0 1em 2em 1em;
	padding: 0.4em;
	background-color: #223645; 
	border-radius: 8px;
	text-decoration: none; 
	color:#FFF; 
}
a.email {color: #222;}
a.email:hover {color: #0587ae; }

/* Pour l'information: Reprise des cours. et ...  */

.reprise {
	display: inline-block;
	margin: 1em 10% 2em 10%; 
	padding: 1em; 
	border: 1px solid #223645;
	background-color: #FFFF99; 
	text-align: center;
	line-height: 1em;
}

/* ... et rajout d'une image en bas à droite pour combler un espace vide ! */

div#atelier img#reprise_vente {
	display: inline-block;
	width: 210px;
	margin: 0 auto;
	border: 2px solid #FFFFFF;
}


/*  ------------------------- PAGE INDEX --- POUR ECRAN MOINS DE 820 PX ---------------------------------------------- */
@media all and (max-width: 820px) {
	div#atelier, div#ecole {
		border: 0.5em solid #FFFFFF;
		border-top-width: 1em;
		border-left-width: 0.5em;
	}
}
@media all and (max-width: 760px) {
	
	section#nouveau p  {margin-bottom: 1em; }
	section#nouveau p span {display: block; }
	section#index {display: block; }
	div#atelier, div#atelier  div {height: 660px; }
	div#atelier, div#ecole {
		display: block; 
		margin: 0 auto; 
		margin-bottom: 30px;	
	}
	a.remonter {	display:inline-block;
	}
	div#atelier img#reprise_vente {display: none; }
	
}
@media all and (max-width: 600px) {
	div#ecole, div#ecole  div {height: 840px; }
}
@media all and (max-width: 400px) {
	div#ecole  div {
		height: 990px; 
	}
	section#index  h2 span {
		display: block; 
	}
	div#ecole, div#atelier {
		border: 0.1em solid #FFF; 
	}
	div#ecole h4, div#atelier h4 {
		margin: 2em 8%; 
		padding: 0.4em 0.1em; 
	}
	div#ecole h4 span {
		display: block;
	}
}