@charset "utf-8";

/* Mise en forme du header*/

header{
	margin: 0px auto;
	padding: 0px;
	width: 100%;
	height: 100px;	
}

.entete{
	position: fixed;
	width: 100%;
	text-align: center;
	font-style: normal;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 20px;
	background-color: #FFFFFF;
	z-index: 10000;
}

h1{
	display: none;
}

.baniere{
	padding-top: 5px;
}

body {
	font-family: Verdana, Calibri, "sans-serif";
    background-color:#FFFFFF;
	margin: 0px;
	padding: 0px;
	width: 100%;
}

.principal{
	width: 100%;
	background-color: #636262;
	position: fixed;
	z-index: 9999;
}

.menu-principal{
	margin: 0px;
	padding: 0px;
}

.menu-p, .menu-pmini, .sbm{
	list-style-type: none; /* pour supprimer les puces de la liste */
	float: left; /* pour placer la liste de manière horizontale */
}

nav a{
	display: inline-block; /* pour pouvoir travailler plus facilement par la suite sur ces liens */
	text-decoration: none; /* pour supprimer le soulignement des liens */
	padding: 20px 30px;
	color: #FFF;
	font-size: 15px;
}

.table{
	display: table; /* pour rendre la hauteur au menu */
	margin: 0 auto; /*pour centrer le menu */
}

.menu-p:hover{
	border-bottom: 5px solid #636262;
	background-color: #ACAAAA
}

.menu-pmini:hover{
	border-bottom: 5px solid #636262;
	background-color: #ACAAAA
}

.menu-p:hover a{
	padding: 20px 30px 15px 30px;
} /* pour éviter que le texte bouge de 5 pixels à cause des 5px dans le border-top de chaque "bouton" */

.menu-pmini:hover a{
	padding: 20px 30px 15px 30px;
} /* pour éviter que le texte bouge de 5 pixels à cause des 5px dans le border-top de chaque "bouton" */

.table-gal{
	height: 408px;
	width: 250px;
	background-color: #636262;
	margin-top: 10px;
} /* mise en forme du menu galerie*/

.galerie{
	position: fixed;
	z-index: 1000;
}

.gal{
	margin: 0px;
	padding: 0px;
	margin-top: 100px;
}

.menu-gal{
	text-align: left;
	text-decoration: none;
	list-style-type: none;
}

.menu-gal:hover{
	background-color: #ACAAAA
}

.anim{
	margin-left: -400px;
	transition-duration: 0.2s;
}

.anim_open{
	margin-left: 0px;
	transition-duration: 0.2s;
} /*transition javascript*/

footer{
	height: 170px;
	width: 100%;
	background-color: #969696;
	position: relative;
	top: 100px;
	z-index: 1;
}

.foot{
	display: block;
	width: 100%;
	font-size: 12px;
	position:absolute;
	bottom: 0px;
	text-align: center
}

.fcon{
	margin: 0px;
	padding: 0px;
}

.fcontact{
	display: table;
	margin: 0 auto;
}

.contact{
	list-style-type: none;
	float: left;
}

footer a{
	display: inline-block;
	text-decoration: none;
	padding: 10px 70px;
	color: black;
	font-size: 15px;
}

footer a:hover{
	color: white;
}

.maj{
	font-size: 12px;
	position: absolute;
	width: 98%;
	text-align: right;
	top: 20px;
}

/* Mise en forme du contenu de page */

.espacehaut{
	height: 58px;
}

.menusecondaire{
	position: fixed;
	width: 100%;
	z-index: 9000;
	background-color: #D3D3D3;
}

.menu2{
	margin: -5px 0px 0px 0px;
	padding: 0px;
}

.menusec{
	display: table; /* pour rendre la hauteur au menu */
	margin: 0 auto; /*pour centrer le menu */
}

.sbm a{
	display: inline-block;
	text-decoration: none;
	color: black;
	font-size: 15px;
	font-weight: bold;
}

#mara2:hover{
	background-color: #787878;
	color: #FFFFFF;
}

#mara{
	color: #FFFFFF;
}

#kenya{
	font-style: italic;
}

/* NE PAS DEPASSER 1550px pour les cadres */

h3{
	font-size: 20px;
	font-style: italic;
}

.imgredim{
	height: 330px
}

#titre0{
	margin: 80px auto 0px;
	text-align: center
}

.cadre1{
	width: 452px;
	margin: 30px auto 0px;
	border: 2px solid black;
}

.cadre2{
	width: 1122px;
	margin: 10px auto 0px;
	border: 2px solid black;
}

.cadre3{
	width: 1352px;
	margin: 10px auto 0px;
	border: 2px solid black;	
}

#titre1{
	width: 500px;
	margin: 10px 68px 10px;
}

#titre2, #titre3, #titre4, #titre5, #titre6, #titre7, #titre8{
	width: 550px;
	margin: 10px 150px 10px;
}

#titre3{
	width: 500px;
	margin: 10px 300px 10px;
}

#img1, #img2, #img5, #img6, #img7, #img9, #img10, #img11, #img12, #img13, #img14, #img15, #img16, #img18, #img20, #img22, #img21, #img23, #img24, #img27, #img28, #img29, #img31, #img32, #img33, #img34, #img35, #img36, #img37, #img38, #img39, #img40, #img41, #img42, #img44, #img45, #img46, #img48{
	margin: 0px 0px 0px 26px;
}

#img3, #img4{
	margin: 0px 0px 0px 98px;
}

#img8{
	margin: 0px 0px 0px 138px;
}

#img17{
	margin: 0px 0px 0px 363px;
}

#img19{
	margin: 0px 0px 0px 93px;
}

#img25, #img26{
	margin: 0px 0px 0px 178px;
}

#img35, #img47{
	margin: 0px 0px 0px 248px;
}


#img30{
	margin: 0px 0px 0px 133px;
}

#img43{
	margin: 0px 0px 0px 468px;
}

/* NE PAS DEPASSER 1550px pour les cadres */

@media screen and (min-width: 1151px) and (max-width: 1400px){
	header{
		height: 60px;
	}
	
	.entete{
		font-size: 12px;
	}
	
	.imgentete{
	width: 748px
	}
	
	.principal{
		height: 40px;
	}
	
	nav a{
		padding: 10px 20px;
	}
		
	.menu-p:hover{
		border-bottom: none;
		}
	
	.menu-pmini:hover{
		border-bottom: none;
		}
	
	.menu-p:hover a{
		padding: 10px 20px 10px 20px;
	}
	
	.menu-pmini:hover a{
		padding: 10px 20px 10px 20px;
	}
	
	.table-gal{
		height: 268px;
		width: 250px;
	} /* mise en forme du menu galerie*/
	
	.gal{
		margin-top: 70px;
	}
	
	.espacehaut{
		height: 40px;
	}
	
	footer a{
		padding: 10px 40px;
	}

	/* Mise en forme du contenu de page */
	
	#titre0{
	margin: 50px auto 0px;
	}
	
	.cadre1{
		margin: 20px auto 0px;
	}
	
}

@media (min-width: 769px) and (max-width: 1150px){
	header{
		height: 60px;
	}
	
	.entete{
		font-size: 12px;
	}
	
	.imgentete{
	width: 748px
	}
	
	.principal{
		height: 40px;
	}
	
	nav a{
		padding: 10px 20px;
	}
		
	.menu-p:hover{
		border-bottom: none;
		}
	
	.menu-pmini:hover{
		border-bottom: none;
		}
	
	.menu-p:hover a{
		padding: 10px 20px 10px 20px;
	}
	
	.menu-pmini:hover a{
		padding: 10px 20px 10px 20px;
	}
	
	.table-gal{
		height: 268px;
		width: 250px;
	} /* mise en forme du menu galerie*/
	
	.gal{
		margin-top: 70px;
	}
	
	.espacehaut{
		height: 40px;
	}
	
	footer a{
		padding: 10px 40px;
	}
	
	section{
		height: 270px;
	}
	
	/* Mise en forme du contenu de page */
	
	
	.imgredim{
		height: 270px
	}
	
	#titre0{
	margin: 50px auto 0px;
	}
	
	.cadre1{
		width: 375px;
		margin: 20px auto 0px;
		border: 2px solid black;
	}

	.cadre2{
		width: 928px;
		margin: 10px auto 0px;
		border: 2px solid black;
	}

	.cadre3{
		width: 1115px;
		margin: 10px auto 0px;
		border: 2px solid black;
	}
	
	#titre1{
		width: 500px;
		margin: 10px 28px 10px;
	}
	
	#titre2, #titre3, #titre4, #titre5, #titre6, #titre7, #titre8{
	width: 550px;
	margin: 10px 150px 10px;
	}

	#titre3{
		width: 500px;
		margin: 10px 200px 10px;
	}

	#img1, #img2, #img5, #img6, #img7, #img9, #img10, #img11, #img12, #img13, #img14, #img15, #img16, #img18, #img20, #img22, #img21, #img23, #img24, #img27, #img28, #img29, #img31, #img32, #img33, #img34, #img35, #img36, #img37, #img38, #img39, #img40, #img41, #img42, #img44, #img45, #img46, #img48{
		margin: 0px 0px 0px 23px;
	}
	
	#img3, #img4{
		margin: 0px 0px 0px 83px;
	}

	#img8{
		margin: 0px 0px 0px 118px;
	}

	#img17{
		margin: 0px 0px 0px 300px;
	}

	#img19{
		margin: 0px 0px 0px 80px;
	}

	#img25, #img26{
		margin: 0px 0px 0px 145px;
	}

	#img35, #img47{
		margin: 0px 0px 0px 208px;
	}

	#img30{
		margin: 0px 0px 0px 113px;
	}

	#img43{
		margin: 0px 0px 0px 388px;
	}
}


@media screen and (max-width: 768px){
	header{
		height: 60px;
	}
	
	.entete{
		font-size: 12px;
	}
	
	.baniere{
		display: none;
	}
	
	h1{
		display: block;
	}
	
	.principal{
		height: 40px;
	}
	
	nav a{
		padding: 10px 20px;
	}
	
	.menu-p{
		display: none;
	}
		
	.menu-pmini:hover{
		border-bottom: none;
		}
	
	.menu-pmini:hover a{
		padding: 10px 20px 10px 20px;
	}
	
	.table-gal{
		height: 268px;
		width: 250px;
	} /* mise en forme du menu galerie*/
	
	.gal{
		margin-top: 70px;
	}
	
	.espacehaut{
		height: 40px;
	}
	
	.sbm{
		margin: 0px -5px 0px -10px;
	}
	
	#kenya{
		display: none;
	}
	
	footer a{
		padding: 10px 20px;
	}
	
	.cr{
		display: none;
	}
	
	.maj{
		top: 50px;
		text-align: center;
	}
	
	/* Mise en forme du contenu de page */
	h3{
		font-size: 18px;
		font-style: italic;
		text-align: center;
	}
	
	.imgredim{
		display: block;
		height: 270px;
	}
	
	#titre0{
	margin: 50px auto 0px;
	}
	

	
	.cadre1, .cadre2, .cadre3{
		width: 99%;
		margin: 20px 0px 0px 0px;
		border: 1px solid black;
	}
	
	#img1, #img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img11, #img12, #img13, #img14, #img15, #img16, #img17, #img18, #img19, #img20, #img21, #img22, #img23, #img24, #img25, #img26, #img27, #img28, #img29, #img30, #img31, #img32, #img33, #img34, #img35, #img36, #img37, #img38, #img39, #img40, #img41, #img42, #img43, #img44, #img45, #img46, #img47, #img48{
		margin: 0px auto;
	}
	
	

	#titre1, #titre2, #titre3, #titre4, #titre5, #titre6, #titre7, #titre8{
		width: 300px;
		margin: 10px auto;
	}
}