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: 80%;
	 height: 20%;
	
	 margin-top: 1%;
	
	 
	 
 }
 
 #qui{
	 float: left;
	 width: 30%;
	 height: 100%;
	 border-radius: 2%;

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

  
 #equi{
	 float: left;
	 width: 30%;
	 height: 100%;
	 border-radius: 2%;

	 
	 
 }
  
 #equi a {
	 float: left;
	font-size: 160%;
	padding: 4% 4% 4% 4%;
	border: 1px solid black;
	 margin-left: 12%;
	border-radius: 6%;
	box-shadow: 8px 8px 12px #aaa;
	margin-top: 1%;
	text-decoration: none;
	color: black;
 }
 
 #equi a:hover{
	 color: red;
	 
 }
 
 
 
  
 #prin{
	 float: right;
	 width: 28%;
	 height: 100%;
	 border-radius: 2%;
	
	 
	 
 }
  
 #prin a {
	 float: left;
	font-size: 160%;
	padding: 4% 4% 4% 4%;
	border: 1px solid black;
	 margin-left: 12%;
	border-radius: 6%;
	box-shadow: 8px 8px 12px #aaa;
	margin-top: 1%;
	text-decoration: none;
	color: black;
 }
 
 #prin a:hover{
	 color: red;
	 
 }
 
 
 
 
 
 
 
 

 
 
 
 #bas {
	 margin: auto;
	 width: 60%;
	 height: 80%;
	
	
	 
 }
 
 
 #bas h1{
	 
	 border-bottom: 1px solid black;
	 margin-top: 3%;
 }
 

 
#bas p {
	text-align: justify;
	Font-size: 130%;
	line-height: 180%;
	
	
}








#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%;
}