/* CSS */

					* { box-sizing: border-box; }
					*, *:before, *:after { box-sizing: border-box; }
					
	/* ---------------------------------------------------- */

	/* Format de la page web */

			body {	max-width: 1024px;
					min-width: 320px;
					margin:10px auto; /*marge exterieur*/
					padding: 5%;
					width:90%; /*Largeur de La zone contenant les DIVs*/
					background-color:#e1dfce; /*Couleur du fond*/
					font-size:100%					
					}

			#corps { background-color:#f0f0f0; 
					border : #9c7c58 ridge 1px; 
					padding:50px; 
					font-size:1.1em; 
					border-radius: 20px; 
					}

		/* viewport le plus grand étant celui de l'Iphone4 avec ses 980px */
				
			* { box-sizing: border-box; }
				
	/* ---------------------------------------------------- */	

/* ------------------Mise en Forme de mon Menu---------------------------------- */	

	#menu{ 
	width: 99%; 
	height:100%; 
	background-color:transparent; 
	margin:0 0 0 0px;
	text-align:center;
}

ul {
	list-style: none;
}

a {
	text-decoration: none;
	color: #472701;
}

li {
	padding: 1%; 
	margin:0.5%;
	display: inline-block;
	font-size: 20px;
	border : #9c7c58 ridge 1px;
	background-color: #CBBCA8;	
}

/* ---------------------Mise en forme de mon texte------------------------------- */		
	h1 {
	text-align : center;
	text-shadow : 5px 5px 5px #6f6f6f;
	color : black;
	}

	h2{
	color: black;
	text-shadow : 5px 5px 5px #6f6f6f;
	   
	font-family: "Comic Sans MS", Arial, "Arial Black", "Times New Roman", Times, serif;
	}

	.centre_h2 { text-align:center; }
    
	h3, h4{
	color: black;
	text-align: justify;
	text-shadow : 5px 5px 5px #6f6f6f;   
	font-family: "Comic Sans MS", Arial, "Arial Black", "Times New Roman", Times, serif;
	}
	p{ padding-left: 40px; }

	hr{ width:100%; }
	
/* ---------------------------------------------------- */	



/* ------------------Mon En-tete de page---------------------------------- */	
/* L'en-tête */

	#en_tete{
	width: 980px;
	height: 120px;
	background-image: url("frame/bnr2.png");
	background-repeat: no-repeat;
	margin-bottom: 10px;
	margin-left: 10px;  
	}
/* ---------------------------------------------------- */
	/* Acceuil */
		.acceuil2 {background-color: transparent; width: 50px; height: 50px; margin: 0 0 0 0; position: fixed; bottom:75%;  left:12% }
		.maison2 { position: fixed; display:flex; flex-direction:column; width: 250px; height: 10px; border-color: #808080 ; border-style: solid; border-width: 0; background-color: transparent; margin: 1% 0% 0% 0%; z-index: 4; }
		.triangle2 { position: relative;	width: 0; height: 0; border-color: transparent transparent #9c7c58 transparent; border-style: solid; border-width: 23px; background-color: transparent; margin: -45px 0 0 0; z-index: 4; }
		.rectangle2 { position: relative; width: 44px; height: 35px; border-color: black; border-style: solid; border-width: 1px; background-color: #cbbca8; margin: 0 0 0 0; z-index: 3; }
		.porte2 { position: relative; width: 10px; height: 20px; border-color: black; border-style: solid; border-width: 1px; background-color: #3c3c3c; margin: -22px 0 0 25px; z-index: 4; }
		.fenetre2 { position: relative; width: 10px; height: 10px; border-color: black; border-style: solid; border-width: 1px; background-color: #3c3c3c; margin: -30px 0 0 5px; z-index: 4; }
		.cheminee2 { position: relative; width: 10px; height: 20px; border-color: blue grey yellow red; border-style: solid; border-width: 0; background-color: #cbbca8; margin: -35px 0 0 33px; z-index: 2; }

/* ---------------------------------------------------- */
	/* Acceuil */
		.acceuil {background-color: transparent; width: 50px; height: 50px; margin: 0 0 0 0; position: fixed;  left:12% }
		.maison { position: fixed; display:flex; flex-direction:column; width: 250px; height: 10px; border-color: #808080 ; border-style: solid; border-width: 0; background-color: transparent; margin: 1% 0% 0% 0%; z-index: 4; }
		.triangle { position: relative;	width: 0; height: 0; border-color: transparent transparent #9c7c58 transparent; border-style: solid; border-width: 23px; background-color: transparent; margin: -45px 0 0 0; z-index: 4; }
		.rectangle { position: relative; width: 44px; height: 35px; border-color: black; border-style: solid; border-width: 1px; background-color: #cbbca8; margin: 0 0 0 0; z-index: 3; }
		.porte { position: relative; width: 10px; height: 20px; border-color: black; border-style: solid; border-width: 1px; background-color: #3c3c3c; margin: -22px 0 0 25px; z-index: 4; }
		.fenetre { position: relative; width: 10px; height: 10px; border-color: black; border-style: solid; border-width: 1px; background-color: #3c3c3c; margin: -30px 0 0 5px; z-index: 4; }
		.cheminee { position: relative; width: 10px; height: 20px; border-color: blue grey yellow red; border-style: solid; border-width: 0; background-color: #cbbca8; margin: -35px 0 0 33px; z-index: 2; }

/* ---------------------------------------------------- */
	
	/* Fleche retour haut de page */
				/* Fleche retour haut de page */
			.retour {background-color:transparent; width:60px; height:100px; display:flex; flex-direction:column; margin: 0 0 0 0; position: fixed; bottom:35%; left: 12%;}
			.corpfleche {width:30px; height:40px; background-color:#9c7c58; margin:0 0 0 0.90em;}
			.flechehaut {width:0; height:0;  background-color:transparent; border-color:transparent transparent #9c7c58 transparent; border-style:solid; border-width:30px;}

/* ---------------------------------------------------- */