@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{
	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: 400px;
	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: 80px;
}

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

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

.imgredim{
	height: 330px
}

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

#titre1{
	width: 400px;
	margin: 20px 120px 30px;
}

#img1, #img2{
	margin: 0px 0px 0px 26px;
}

/* 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: 350px;
	} /* mise en forme du menu galerie*/
	
	.gal{
		margin-top: 50px;
	}
	
	footer a{
		padding: 10px 40px;
	}

	/* Mise en forme du contenu de page */
	

}

@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: 350px;
	} /* mise en forme du menu galerie*/
	
	.gal{
		margin-top: 50px;
	}
	
	footer a{
		padding: 10px 40px;
	}
	
	section{
		height: 270px;
	}
	
	/* Mise en forme du contenu de page */
	
	
	.imgredim{
		height: 270px
	}
	
	.cadre1{
		width: 562px;
		margin: 0px auto;
		border: 2px solid black;
	}

	#titre1{
		width: 400px;
		margin: 20px 75px 30px;
	}
	
	#img1, #img2{
		margin: 0px 0px 0px 23px;
	}
}


@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: 350px;
	} /* mise en forme du menu galerie*/
	
	.gal{
		margin-top: 50px;
	}
	
	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;
	}
	
	.cadre1{
		width: 99%;
		margin: 0px 0px 0px 0px;
		border: 1px solid black;
	}
	
	#img1, #img2{
		margin: 0px auto;
	}
	

	#titre1{
		width: 300px;
		margin: 10px auto;
	}
}