@charset "utf-8";
/* ---- Bureau ---- */
body{
	margin:0;
}
#container{
	position:relative;
	margin:0;
	width:100%;
	/*height:900px;*/
	}
#header{
	position:fixed;
	top:0px;
	z-index:1;
	width:100%;
	height:130px;
	background-image:url(../picsv3/bg_header.jpg);
	background-repeat:no-repeat;
	}
#bande{
	position:fixed;
	width:100%;
	height:40px;
	top:130px;
	z-index:1;
	/*background-color:#34123c;*/
	background-color:#000;
	}
#main{
	position:fixed;
	width:100%;
	height:755px;
	overflow:auto;
	top:170px;
	background-color:#000;
	}
#logo{
	position:absolute;
	left:60px;
	top:10px;
	width:230px;
	/*border:solid 1px red;*/
	}
.josefin-30-white{
	font-family: 'Josefin Sans', Arial, sans-serif;
	font-size: 30px;
	color: #fff;
	}
.josefin-20-white{
	font-family: 'Josefin Sans', Arial, sans-serif;
	font-size: 22px;
	color: #fff;
	}

.menu2{
	display:none;
}
#menu{
	position:absolute;
	top:30px;
	/*left:350px;*/
	right:150px;
	width:auto;
	text-align:left;
	z-index:10;
	/*border:solid 1px green;*/
	}
#menu ul{
	width:auto;
	padding-left:0;
	border-bottom:solid 1px black;
	border-top:solid 1px black;
	/*border:solid 1px blue;*/
}
#menu li{
	display:inline-block;
	height:25px;
	width:auto;
	padding:10px;
	line-height:25px;
	/*border:solid 1px black;*/
	}
#menu a{
	font-family: 'Stardos Stencil', cursive;
	font-size: 16px;
	color: #000;
	text-decoration: none;
	border-bottom: none;
	border-top: none;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#menu a:hover{
	font-family: 'Stardos Stencil', cursive;
	font-size:14px;
	color:#be1504;
	text-decoration:none;
	border-bottom:solid 1px #be1504;
	border-top:solid 1px #be1504;
}
#menu img{
	vertical-align:central;
}
.li1{
	background-color: rgba(246, 139, 44, 0.6);
	margin-right: 10px;
	-webkit-transition: background-color 1s ease-out;
	-moz-transition: background-color 1s ease-out;
	-ms-transition: background-color 1s ease-out;
	-o-transition: background-color 1s ease-out;
	transition: background-color 1s ease-out;
	}
.li1:hover{
	margin-right: 10px;
	background-color: rgba(246, 139, 44, 1);
	}
.li2{
	background-color: rgba(253, 210, 46, 0.6);
	margin-right:10px;
	-webkit-transition: background-color 1s ease-out;
	-moz-transition: background-color 1s ease-out;
	-ms-transition: background-color 1s ease-out;
	-o-transition: background-color 1s ease-out;
	transition: background-color 1s ease-out;
	}
.li2:hover{
	background-color: rgba(253, 210, 46, 1);
	margin-right:10px;
	}
.li3{
	background-color: rgba(94, 187, 70, 0.6);
	margin-right:10px;
	-webkit-transition: background-color 1s ease-out;
	-moz-transition: background-color 1s ease-out;
	-ms-transition: background-color 1s ease-out;
	-o-transition: background-color 1s ease-out;
	transition: background-color 1s ease-out;
	}
.li3:hover{
	background-color: rgba(94, 187, 70, 1);
	margin-right:10px;
	}
.li4{
	background-color: rgba(94, 197, 192, 0.6);
	margin-right:10px;
	-webkit-transition: background-color 1s ease-out;
	-moz-transition: background-color 1s ease-out;
	-ms-transition: background-color 1s ease-out;
	-o-transition: background-color 1s ease-out;
	transition: background-color 1s ease-out;
	}
.li4:hover{
	background-color: rgba(94, 197, 192, 1);
	margin-right:10px;
	}
.li5{
	background-color: rgba(103, 80, 161, 0.6);
	margin-right:10px;
	-webkit-transition: background-color 1s ease-out;
	-moz-transition: background-color 1s ease-out;
	-ms-transition: background-color 1s ease-out;
	-o-transition: background-color 1s ease-out;
	transition: background-color 1s ease-out;
	}
.li5:hover{
	background-color: rgba(103, 80, 161, 1);
	margin-right:10px;
	}
.li6{
	background-color: rgba(238, 61, 151, 0.6);
	margin-right:10px;
	-webkit-transition: background-color 1s ease-out;
	-moz-transition: background-color 1s ease-out;
	-ms-transition: background-color 1s ease-out;
	-o-transition: background-color 1s ease-out;
	transition: background-color 1s ease-out;
	}
.li6:hover{
	background-color: rgba(238, 61, 151, 1);
	margin-right:10px;
	}
.iframeModal{
	width:800px;
	height:450px;
}


/* ---- Tablettes ---- */
@media only screen and (max-width:1100px){
body{
	margin:0;
}
#container{
	position:relative;
	margin:0;
	width:100%;
	/*height:1220px;*/
	/*border:solid 1px green;*/
	}
#header{
	position:fixed;
	top:0px;
	z-index:1;
	width:100%;
	height:70px;
	background-image:url(../picsv3/bg_header.jpg);
	background-repeat:no-repeat;
	}
#bande{
	position:fixed;
	width:100%;
	height:40px;
	top:70px;
	z-index:0;
	background-color:#000;
	}
#main{
	position:fixed;
	width:100%;
	/*height:880px;*/
	overflow:auto;
	top:110px;
	background-color:#000;
	}
#logo{
	position:absolute;
	left:60px;
	top:10px;
	width:120px;
	}
.josefin-30-white{
	font-family: 'Josefin Sans', Arial, sans-serif;
	font-size: 30px;
	color: #fff;
	}
.josefin-20-white{
	font-family: 'Josefin Sans', Arial, sans-serif;
	font-size: 22px;
	color: #fff;
	}

#menu{
	display:none;
}	
.menu2{
	display:block;
	position:absolute;
	top:15px;
	right:100px;
	width:auto;
	text-align:left;
	z-index:2;
	}
.nav {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1;
}
.nav a {
    display: block;
    padding:.5em;
	font-family: 'Stardos Stencil', cursive;
	font-size: 16px;
	color: #fff;
	text-decoration: none;
}
.nav a:focus,
.nav a:hover {
    background: #fff;
	color:#000;
}
.nav-item {
    float: left; /* Pour que les liens s’affichent horizontalement */
    position: relative; /* Crée un contexte de positionnement pour les sous-listes */
	background-color:#666;
}
.sub-nav {
    display: none; /* Masque la sous-liste */
    position: absolute; /* Evite que la dimension du conteneur ne change quand la sous-liste est affichée */
    right: 0; /* FIX IE7 : pour que le sous-menu s’aligne avec son conteneur */
    top: 55px; /* FIX IE7 : pour que le sous-menu s’aligne avec son conteneur, on le positionne explicitement en bas du conteneur */
    white-space: nowrap; /* Pour que le texte ne revienne pas à la ligne */
    background-color:#666; /* FIX IE7 : évite que la sous-liste ne disparaisse au moment où le curseur arrive au-dessus */
    margin-top: -25px; /* Pour que le sous-menu recouvre son parent, facilitant le passage de la souris de l’un à l’autre */
}
.sub-nav li{
	border:solid 1px white;
	padding:5px;
}
.nav-item:hover .sub-nav {
    display: block; /* Affiche cette sous-liste au survol de son conteneur */
}
	

.li1{
	background-color: rgba(246, 139, 44, 0.6);
	margin-right: 10px;
	-webkit-transition: background-color 1s ease-out;
	-moz-transition: background-color 1s ease-out;
	-ms-transition: background-color 1s ease-out;
	-o-transition: background-color 1s ease-out;
	transition: background-color 1s ease-out;
	}
.li1:hover{
	margin-right: 10px;
	background-color: rgba(246, 139, 44, 1);
	}
.li2{
	background-color: rgba(253, 210, 46, 0.6);
	margin-right:10px;
	-webkit-transition: background-color 1s ease-out;
	-moz-transition: background-color 1s ease-out;
	-ms-transition: background-color 1s ease-out;
	-o-transition: background-color 1s ease-out;
	transition: background-color 1s ease-out;
	}
.li2:hover{
	background-color: rgba(253, 210, 46, 1);
	margin-right:10px;
	}
.li3{
	background-color: rgba(94, 187, 70, 0.6);
	margin-right:10px;
	-webkit-transition: background-color 1s ease-out;
	-moz-transition: background-color 1s ease-out;
	-ms-transition: background-color 1s ease-out;
	-o-transition: background-color 1s ease-out;
	transition: background-color 1s ease-out;
	}
.li3:hover{
	background-color: rgba(94, 187, 70, 1);
	margin-right:10px;
	}
.li4{
	background-color: rgba(94, 197, 192, 0.6);
	margin-right:10px;
	-webkit-transition: background-color 1s ease-out;
	-moz-transition: background-color 1s ease-out;
	-ms-transition: background-color 1s ease-out;
	-o-transition: background-color 1s ease-out;
	transition: background-color 1s ease-out;
	}
.li4:hover{
	background-color: rgba(94, 197, 192, 1);
	margin-right:10px;
	}
.li5{
	background-color: rgba(103, 80, 161, 0.6);
	margin-right:10px;
	-webkit-transition: background-color 1s ease-out;
	-moz-transition: background-color 1s ease-out;
	-ms-transition: background-color 1s ease-out;
	-o-transition: background-color 1s ease-out;
	transition: background-color 1s ease-out;
	}
.li5:hover{
	background-color: rgba(103, 80, 161, 1);
	margin-right:10px;
	}
.li6{
	background-color: rgba(238, 61, 151, 0.6);
	margin-right:10px;
	-webkit-transition: background-color 1s ease-out;
	-moz-transition: background-color 1s ease-out;
	-ms-transition: background-color 1s ease-out;
	-o-transition: background-color 1s ease-out;
	transition: background-color 1s ease-out;
	}
.li6:hover{
	background-color: rgba(238, 61, 151, 1);
	margin-right:10px;
	}
.iframeModal{
	width:800px;
	height:450px;
}
}

/* ---- Mobile ---- */
@media only screen and (max-width:480px){
body{
	margin:0;
}
#container{
	position:relative;
	margin:0;
	width:100%;
	/*height:900px;*/
	/*height:750px;*/
	/*border:solid 1px red;*/
	}
#header{
	position:fixed;
	top:0px;
	z-index:1;
	width:100%;
	height:70px;
	background-image:url(../picsv3/bg_header.jpg);
	background-repeat:no-repeat;
	}
#bande{
	position:fixed;
	width:100%;
	height:40px;
	top:70px;
	z-index:0;
	background-color:#000;
	}
#main{
	position:fixed;
	width:100%;
	/*height:620px;*/
	overflow:auto;
	top:110px;
	background-color:#000;
	/*border:solid 1px green;*/
	}
#logo{
	position:absolute;
	left:60px;
	top:10px;
	width:120px;
	}
.josefin-30-white{
	font-family: 'Josefin Sans', Arial, sans-serif;
	font-size: 30px;
	color: #fff;
	}
.josefin-20-white{
	font-family: 'Josefin Sans', Arial, sans-serif;
	font-size: 22px;
	color: #fff;
	}

#menu{
	display:none;
}	
.menu2{
	display:block;
	position:absolute;
	top:15px;
	right:100px;
	width:auto;
	text-align:left;
	z-index:2;
	}
.nav {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1;
}
.nav a {
    display: block;
    padding:.5em;
	font-family: 'Stardos Stencil', cursive;
	font-size: 16px;
	color: #fff;
	text-decoration: none;
}
.nav a:focus,
.nav a:hover {
    background: #fff;
	color:#000;
}
.nav-item {
    float: left; /* Pour que les liens s’affichent horizontalement */
    position: relative; /* Crée un contexte de positionnement pour les sous-listes */
	background-color:#666;
}
.sub-nav {
    display: none; /* Masque la sous-liste */
    position: absolute; /* Evite que la dimension du conteneur ne change quand la sous-liste est affichée */
    right: 0; /* FIX IE7 : pour que le sous-menu s’aligne avec son conteneur */
    top: 55px; /* FIX IE7 : pour que le sous-menu s’aligne avec son conteneur, on le positionne explicitement en bas du conteneur */
    white-space: nowrap; /* Pour que le texte ne revienne pas à la ligne */
    background-color:#666; /* FIX IE7 : évite que la sous-liste ne disparaisse au moment où le curseur arrive au-dessus */
    margin-top: -25px; /* Pour que le sous-menu recouvre son parent, facilitant le passage de la souris de l’un à l’autre */
}
.sub-nav li{
	border:solid 1px white;
	padding:5px;
}
.nav-item:hover .sub-nav {
    display: block; /* Affiche cette sous-liste au survol de son conteneur */
}
	

.li1{
	background-color: rgba(246, 139, 44, 0.6);
	margin-right: 10px;
	-webkit-transition: background-color 1s ease-out;
	-moz-transition: background-color 1s ease-out;
	-ms-transition: background-color 1s ease-out;
	-o-transition: background-color 1s ease-out;
	transition: background-color 1s ease-out;
	}
.li1:hover{
	margin-right: 10px;
	background-color: rgba(246, 139, 44, 1);
	}
.li2{
	background-color: rgba(253, 210, 46, 0.6);
	margin-right:10px;
	-webkit-transition: background-color 1s ease-out;
	-moz-transition: background-color 1s ease-out;
	-ms-transition: background-color 1s ease-out;
	-o-transition: background-color 1s ease-out;
	transition: background-color 1s ease-out;
	}
.li2:hover{
	background-color: rgba(253, 210, 46, 1);
	margin-right:10px;
	}
.li3{
	background-color: rgba(94, 187, 70, 0.6);
	margin-right:10px;
	-webkit-transition: background-color 1s ease-out;
	-moz-transition: background-color 1s ease-out;
	-ms-transition: background-color 1s ease-out;
	-o-transition: background-color 1s ease-out;
	transition: background-color 1s ease-out;
	}
.li3:hover{
	background-color: rgba(94, 187, 70, 1);
	margin-right:10px;
	}
.li4{
	background-color: rgba(94, 197, 192, 0.6);
	margin-right:10px;
	-webkit-transition: background-color 1s ease-out;
	-moz-transition: background-color 1s ease-out;
	-ms-transition: background-color 1s ease-out;
	-o-transition: background-color 1s ease-out;
	transition: background-color 1s ease-out;
	}
.li4:hover{
	background-color: rgba(94, 197, 192, 1);
	margin-right:10px;
	}
.li5{
	background-color: rgba(103, 80, 161, 0.6);
	margin-right:10px;
	-webkit-transition: background-color 1s ease-out;
	-moz-transition: background-color 1s ease-out;
	-ms-transition: background-color 1s ease-out;
	-o-transition: background-color 1s ease-out;
	transition: background-color 1s ease-out;
	}
.li5:hover{
	background-color: rgba(103, 80, 161, 1);
	margin-right:10px;
	}
.li6{
	background-color: rgba(238, 61, 151, 0.6);
	margin-right:10px;
	-webkit-transition: background-color 1s ease-out;
	-moz-transition: background-color 1s ease-out;
	-ms-transition: background-color 1s ease-out;
	-o-transition: background-color 1s ease-out;
	transition: background-color 1s ease-out;
	}
.li6:hover{
	background-color: rgba(238, 61, 151, 1);
	margin-right:10px;
	}
.iframeModal{
	width:300px;
	height:150px;
}
}