

/* Mise à zéro des marges et espacements pour compatibilité entre les navigateurs */
html * /* Dans un sélecteur, le caractère " " (espace) signifie "tous les descendants" et le caractère "*" signifie "tous les éléments", de sorte que "html *" sélectionne tous les éléments descendants de l'élément html, autrement dit... tout simplement tous les éléments de la page web */
{
margin: 0; /* pas de marges par défaut pour aucun élément (ces marges sont de toutes façons différentes en fonction des navigateurs) */
padding: 0; /* idem pour les espacements (padding) */
font-family: 'Quicksand', futura, sans-serif;
}

/* Marge de gauche par défaut de 20px */
ul,ol,dl /* Dans un sélecteur : le caractère "," veut dire "et". Donc ici, on sélectionne tous les ul et tous les ol et tous les dl de la page web */
{
margin-left: 20px; /* pas de marges... sauf pour les listes, car une liste sans marge ne peut afficher sa puce (pour ul et ol) */
}

/* Mise en forme du bas de page */
div#basDePage /* sélection du div identifié "basDePage" (dans un sélecteur, le caractère "#" signifie "identifié", autrement dit "dont l'atribut id à la valeur... (ici, c'est "basDePage")" */
{
text-align: right; /* alignement du contenu à droite */
padding-top: 20px; /* l'espacement du haut est de 20 pixels */
padding-right: 20px; /* l'espacement de droite est de 20 pixels */
}



body{
	background: url("../img/fondSite.png") fixed;
	background-size: cover;
    height: auto;
    background-position: top center; 
}

#contenant{
	width : 80%;
	margin: auto;
	overflow: hidden;
	z-index : 1 ;
}

#head {
	width: 40%;
	float: left;	
}

#head img {
	-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	pointer-events: none;
   	cursor: default;
	width: 100%;
}





#contenu {
	width: 100%;
	float: right;
	text-align: center;
	margin-top: 80%;
	font-size: 18px;
	color: #ffffff; /* #ff006c */
	position : absolute;
	bottom: 2%;
	background-color : rgba(0, 0, 0, 0.7);
	Padding : 1%;
}

#entete {
	width: 100%;
	float: right;
	text-align: center;
	margin-bottom: 115px;
	font-size: 18px;
	color: #ff006c; /* #ff006c */
	position : absolute;
	bottom: 2%;
	background-color : rgba(255, 255, 255, 0.8);
	Padding : 1%;
}


a {
	color: #ffffff; /* #ff006c */
}

a:hover {
		color: #ffffff; /* #ff006c */
}

a:focus {
		color: #ffffff; /* #ff006c */
}

a:active {
		color: #ffffff; /* #ff006c */
}

a:visited {
		color: #ffffff; /* #ff006c */
}

#MenuContenant {
	width : 100%;
	margin-left: 36%;
	overflow: hidden;
	z-index : 20 ;
	position: fixed;
}
#MenuContenant div#menu a {
	font-family: 'ellia', 'Handlee', cursive, arial, sans-serif;
	font-size : 1.2em;
	color:#fff;
    position:relative;
    float: left;
    width: 19%;
    text-align:center;
    padding-top:10px;
    padding-bottom:10px;
    margin-right:1%;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
        -webkit-transition: all .5s ease-out;
        -moz-transition: all .5s ease-out;
        -o-transition: all .5s ease-out;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(.2, #FF006C), color-stop(1, #ffa9cd));
    background: -moz-linear-gradient(center top, #FF006C 20%, #ffa9cd 100%);
    background: -o-linear-gradient(#FF006C, #ffa9cd);
}
#MenuContenant div#menu a:hover {
    padding-top:20px;
    padding-bottom:20px;
        -webkit-transition: all .5s ease-out;
        -moz-transition: all .5s ease-out;
        -o-transition: all .5s ease-out;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(.2, #ffa9cd), color-stop(1, #FF006C));
    background: -moz-linear-gradient(center top, #ffa9cd 20%, #FF006C 100%);
    background: -o-linear-gradient(#ffa9cd, #FF006C);
}

#MenuContenant div#menu a#active {
    padding-top:15px;
    padding-bottom:15px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(.2, #FF006C), color-stop(1, #ffa9cd));
    background: -moz-linear-gradient(center top, #FF006C 20%, #ffa9cd 100%);
    background: -o-linear-gradient(#FF006C, #ffa9cd);
}
