@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: my_font;
	src: url('polices/titillium/titillium_regular.otf'),
		 url('polices/pt_sans/PTS55F.ttf');
}

html,body {
	width:100%;height:100%;
	margin: 0px;padding:0px;
	overflow:hidden;	/*désactiver pendant le debug*/
	font-family:my_font, Arial;
}

nav {
	max-width:10%;
	position: fixed;
	top: 30px;left: 20px;
	z-index: 999; /* grande valeur pour la garder au dessus */
}

nav h6 {
	width: 60px;padding : 10px;
	background-color:rgba(0,0,255,0.5);
	border-radius: 3px;
	color:#FFFF00;
	transition:0.4s;
}

nav h6:hover {
	background-color:rgba(255,255,0,0.5);
	color:#0000FF;
	margin-left:10px;
}

#conteneur_pages{
	position:absolute; 		/*influence dimensions de ses div internes*/
	width:100%;				/*pour servir de référence aux pages*/
	height:100%;			/*le débordement des pages est prévu*/
	overflow:visible; 		/* on maintient la valeur par défaut*/
	top:0%;left:0%;
	transition:1s;
}

#page1, #page2, #page3 {
	position: absolute;
	width: 100%;height: 100%;
	padding:0px;
}

#page1{
	background:#FCC;
	left: 0%;	
}

#page2 {
	background:#E9E484;
	left: 100%;
}

#page3 {
	background:#3CC;
	left: 200%;
}

.central{
width:70%;height:100%;
margin:auto;
background-color:#fff;
padding:1px;			/*evite certaines fusion de marges*/
}

.contenu{
margin : 30px 20px 30px 20px;
}

h1{
	font-size:22px;
	text-align:center;
	margin-top:29px;
	color:#028;
	}
	
h2{
	font-size:18px;
	margin-top:50px;
	margin-bottom:25px;
	color:#08A;
	}

p{
color:#223;
}

#ma_video{
	display:block;
	min-width:300px;width: 80%;
	margin:auto;margin-top:40px;
	}
	
#conteneur_images{
background-color:#800;
	position:relative;	
	height:344px;width:512px;
	max-width:80%;
	overflow:hidden;
	margin:auto;
	}

#image1,#image2, #image3, #image4{
	position:absolute;
	top:0px;left:0px;
	padding:0px;
	height:344px;width:512px;
	margin:auto;
	opacity:0;
	transition:1s;
	}
	
#image1{
background-image:url("images/bateau.jpg");
opacity:1;
background-size:cover;
}
#image2{
background-image:url("images/maison.jpg");
background-size:cover;
}
#image3{
background-image:url("images/oiseaux.jpg");
background-size:cover;
}
#image4{
background-image:url("images/plage.jpg");
background-size:cover;
}

#conteneur_minis{
	position:relative;
	width:280px; /* 4 * 70px par mini */
	height:50px;	
	margin:auto;
}

#mini1, #mini2, #mini3, #mini4 {
width:64px;		/* 70 px par mini avec espaces */
height:43px;
position:absolute;
top:7px;
}

#mini1{
left:3px; /* 3px+64px+3px -> 70px */
background-image:url("images/mini_bateau.jpg");
}
#mini2{
left:73px;
background-image:url("images/mini_maison.jpg");
}
#mini3{
left:143px;
background-image:url("images/mini_oiseaux.jpg");
}
#mini4{
left:213px;
background-image:url("images/mini_plage.jpg");
}
