/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
			Code Css de mise en page propre
*/

html
{
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: #F5F5F5;
	color: #3CB371;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}


.couleur
{
	color: #3CB371;
}

a
{
	text-decoration: none;
	color: #000000;
}

a:hover
{
	color: #A9A9A9;
}

p
{
	margin: 0px;
	padding: 0px;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
			La Navigation (le menu qui s'affiche), pour certain code, je met tout sur une ligne pour facilité la compréhension (c'est plusieurs fois la meme chose) et la lisisilité du document
*/
nav
{
	position: absolute;
	width: 15%;
	height: 15%;
	left: 0%;
	top: 0%;
	border: solid;
	border-width: 0px 0px 0px 0px;
}

ul
{
	position: absolute;
	height: 100%;
	width: 100%;
	padding: 0px 0px 0px 0px;
	list-style:none;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border: solid;
	border-width: 0px 1px 0px 0px;
}


#toggle
{
	position: absolute;
	right: 0;
	width: 32.5%;
	height: 32.5%;
	opacity: 0;
	margin: 0px 0px 0px 0px;
	border: solid;
	border-width: 0px 0px 0px 1px;
	cursor: pointer;

}

#box
{
	position: absolute;
	right: 0%;
	width: 32.5%;
	height: 32.5%;
	margin: 0px 0px 0px 0px;
	border: solid;
	border-width: 0px 0px 0px 1px;
	z-index: -1;
	cursor: pointer;
}
#toggle:checked ~ #tester
{
	display: block;
	
}


#tester
{
	position: absolute;
	height: 100%;
	width: 67.5%;
	display: none;
}

#box span
{
	margin: 0 0 0 5px;
	position: absolute;
	height: 8px;
	width: 45px;
	left: 2.5%;
	background: #3CB371;
}

#span1{top: 13%;}#span2{top: 42%;}#span3{top: 71%;}

#menu h3
{
	position: absolute;
	height: 20%;
	width: 99%;
	left: 1%;
	color: #3CB371;
	margin: 0px 0px 0px 0px;
}
#lien1{position: absolute;top: 5%;border: solid;border-width: 0px 0px 1px 0px;}#lien2{position: absolute;top: 30%;border: solid;border-width: 0px 0px 1px 0px;}#lien3{position: absolute;top: 55%;border: solid;border-width: 0px 0px 1px 0px;}#lien4{position: absolute;top: 80%;border: solid;border-width: 0px 0px 1px 0px;}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
			Le titre en haut a droite
*/
.title
{
	position: absolute;
	height: 5%;
	right: 10%;
	top: 0%;
	border: solid;
	border-width: 0px 1px 0px 1px;
}

#title
{
	margin: 0 10px 0 10px;
	font-family: 'Nunito', sans-serif;
	color: #3CB371;
}


/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
			Barre de footer avec les logos en bas a droite et le texte a gauche
*/

footer
{
	position: absolute;
	height: 12.5%;
	width: 100%;
	bottom: 0%;
	left: 0%;
}

#footerDroite
{
	color: #000000;
	position: absolute;
	width: 10%;
	height: 50%;
	bottom: 0%;
	right:0%;
	border: solid;
	border-width: 1px 0px 0px 1px;
}

#footerGauche
{
	color: #000000;
	position: absolute;
	width: 10%;
	height: 50%;
	bottom: 0%;
	left:0%;
	border: solid;
	border-width: 1px 1px 0px 0px;
}

#imgHTML
{
	position: absolute;
	width: 25%;
	height: 70%;
	top: 15%;
	left: 5%;
}
#imgCSS
{
	position: absolute;
	width: 50%;
	height: 50%;
	top: 25%;
	right: 5%;
}

#lienFooter
{
	position: absolute;
	top: 30%;
	left: 5%;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
			Le contenu global de la page (ce qui va le plus changer dans la page) j'ai fait plusieurs affichage possible avec soit 4 rectangles soit 3 soit 2,
			je le met dans ce code css pour pouvoir choisir après pour chaque page individuellement
*/
.content
{
	color: #000000;
	position: absolute;
	width: 79.8%;
	height: 75%;
	top: 15%;
	left: 10.10%;
	background-color: #FFFFFF;
	z-index: 8;
	border: solid;
	border-width: 1px 1px 1px 1px;
	font-family: 'Quicksand', sans-serif;
	box-shadow: 8px 8px 12px #aaa;
}

.sectionGauche
{
	position: absolute;
	width: 50%;
	height: 100%;
	left: 0%;
	top: 0%;
	border: solid;
	border-width: 0px 0px 0px 0px;
}

.sectionDroite
{
	position: absolute;
	width: 50%;
	height: 100%;
	right: 0%;
	top: 0%;
	border: solid;
	border-width: 0px 0px 0px 1px;
}




#boite1
{
	position: absolute;
	width: 100%;
	height: 50%;
	border: solid;
	border-width: 0px 0px 0px 0px;
}
#boite2
{
	position: absolute;
	width: 100%;
	height: 50%;
	top: 50%;
	border: solid;
	border-width: 1px 0px 0px 0px;
}
#boite3
{
	position: absolute;
	width: 100%;
	height: 50%;
	border: solid;
	border-width: 0px 0px 0px 0px;
}
#boite4
{
	position: absolute;
	width: 100%;
	height: 50%;
	top: 50%;
	border: solid;
	border-width: 1px 0px 0px 0px;
}

#paragraphe1
{
	position: absolute;
	top: 20%;
	width: 98%;
	left: 2%;
}

#paragraphe2
{
	position: absolute;
	top: 20%;
	width: 95%;
	left: 2%;
}

#paragraphe3
{
	position: absolute;
	top: 20%;
	width: 98%;
	left: 2%;
}

#paragraphe4
{
	position: absolute;
	top: 20%;
	width: 95%;
	left: 2%;
}
.titleCase
{
	position: absolute;
	left: 2%;
}






.example01 img
{
	position: absolute;
	padding: 0% 0% 0% 12.5%;
	height: 86%;
	z-index: -1;
}
.transform01
{
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
figure:hover .transform01
{
	-webkit-transform: scale(3);
	transform: scale(3);
}
.example01 figure
{
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0% 0% 0% 0%;
	overflow: hidden;
}
.example01 figcaption
{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 0;
}
.example01 figure:hover figcaption
{
	opacity: 1;
}
  
.example01 p
{
	text-align: center;
	color: white;
}
.example01 h3
{
	text-align: center;
	color: white;
}