html {
	height: 100%;
	width: 100%;
	font-size: 30px;
	font-size: 1vw;
	
}
body {
	margin: 0;
	padding: 0;
	
	height: 100%;
	font-size: 1vw;
	
}

#bandeau{
	  width: 100%;
    height: 19%;
	border: 1px solid black;
	background-image: url(images/fond/cervin_2.jpg);
	background-repeat:no-repeat;
	background-position: 50% 31%;
	background-size:cover;
}
#image img {
	
	float: left;
	width: 19%;
	height: auto;
	font-size: 1vw;
	margin-top: 1%;
	
}

#titre p {
	font-size: 270%;
	margin-left: 34%;
	opacity: 50%;
	
	margin-bottom: 5%;
	

}


#login  {
	
	float: right;
	border: 1px solid black;
	border-radius: 20%;
	width: 10%;
	margin-right: 3%; 
	text-align: center;
	height: 20%;
		box-shadow: 8px 8px 12px #aaa;
	
}

#login:hover  {
	
	float: right;
	border: 1px solid black;
	border-radius: 20%;
	width: 10%;
	margin-right: 3%; 
	text-align: center;
	height: 20%;
		box-shadow: 8px 8px 12px #aaa;
		color: red;
	
}



















#bandeau table{
	
	width: 100%;
	height: 100%;
	border: 1px solid black;
	
}

#bandeau td{
	width:30%;
	height: 100%;
	border: 1px solid black;
	
}


#entete {
	
	border: 1px solid black;
	
}


#contenu {
	
	background-image: url(images/fond/fond.jpg);
	background-size :cover;
	background-position: 10% 10%;
	border: 1px solid black;
	width: 100%;
	height: 60%;
}




/* Menu

/* Style par défaut de nos paragraphes
(= état initial). */
#menu
{
    /* Seules la couleur du texte et les dimensions
    de nos paragraphes auront une transition. */
    transition-property: color, width, height;
   
    /* La transition durera trois secondes. */
    transition-duration: 1s;

    /* On stylise un peu plus nos paragraphes. */
	font-size: 150%;
   width: 13%;
   height: 70%;
    color: #fff;
    background-color: #a5a5a5;
    border: 2px solid #000;
    float: left;
    text-align: center;
	margin-top: 5%;
	margin-left: 2%;
	margin-right: %;
	
}


#menu  a{
	
	font-size: 90%;
	overflow: hidden;
	
	margin-top: 2%;
	color: #E6E6E6;
	text-decoration: none;
	opacity: 0.5%;
	    /* Seules la couleur du texte et les dimensions
    de nos paragraphes auront une transition. */
    transition-property: color, width, height, opacity;
    
    /* La transition durera trois secondes. */
    transition-duration: 1s;

	text-align: left;
	
}



/* Style lors du passage de la souris
(= état final). */
#menu:hover
{
   width: 13%;
   height: 70%;
   color: #000;
}
#menu  a:hover
{
	font-size: 95%;
   width: 13%;
   height: 4%;
   color: #000;
}

#menu  li span
{
	margin-top: 3%;

		text-align: left;
        /* N'oublions pas les transitions ! */
        transition-property: top;
        transition-duration: 1s;
		
}


#menu  ul
{		margin-top: 3%;
	/* On supprime les puces, on précise une largeur
        et on centre la liste par rapport à la page. */
        list-style: none;
		width: 55%;
		
		text-align: left;
		  
		
}

#menu  li
{	margin-top: 10%;
list-style: none;
        /* On met en forme le texte. */
	text-align: center;
	font-weight: bold;
 
     /* On n'affiche pas ce qui dépasse de nos éléments ! */
	overflow: hidden;	
}

 /* contenu */


 
 
 
 
 
 
 
 
 
 
 #haut {
	 margin:auto;
	 width: 110%;
	 height: 20%;
	
	 margin-top: 1%;
	
	 
	 
 }
 
 
  
 #haut p {
	 float: left;
	font-size: 170%;
	width: 55%;
	 margin-top: 1%;

	 padding-left: %;
	 margin-left: 6%;
 }
 

 

 
 
 #bas {
	 margin: auto;
	 width: 60%;
	 height: 80%;
	
	
	 
 }
 
#bas p{
	font-size: 160%;
	margin-left: 2%;

	
}
#bas a {
	float: right;
	font-size: 160%;
	padding: 4% 4% 4% 4%;
	border: 1px solid black;
	 margin-right: 40%;
	border-radius: 6%;
	box-shadow: 8px 8px 12px #aaa;
	margin-top: 1%;
	text-decoration: none;
	color: black;
	
	
}
#bas a:hover {
	
	color: red;
	border-color: red;
	
	
}
 

 









#pieddepage{
					width: 100%;
					height: 20%;
					background-color: #303030;
					font-size: 1vw;
					color: #ffffff;
					border: 4px solid black;
				}
				
#pieddepage h2{
					font-family: helvetica,sans-serif;
					font-size: 110%;
					margin-left: 9%;
					margin-top: 0%;
					line-height: 140%;
}