/* CSS Document */
/*#ffd051;jaune #0000ca; bleue*/
html {
    
    background-color: #FFF;
}
body{background-color: #FFF;
width:100%;height:100%;overflow: auto !important; margin:0;color: #fff;}

 h1{
margin-top:0;
margin-left:3%;
width: 100%;
color:#FFF;
font-size:1.1em;
text-align:center;
  }
 h2{margin-left:2%;}
 .texte{color:#ffd051;}
#wrap {
margin-top: 0;
}
h3{color:9e1111;}
.jaune{color:#ffd051;}

 #nav {width:40%;
	
	top: 0; margin-left: 25%; right: 0;
	padding: 0.9em 0;
	
	text-align: center;
	background: transparent;
}
#nav li {
	display: inline;
	margin:0;
	padding-left:1em;
}
#nav a {
	display: inline-block;
	font-size:0.8em;
	color: #000;
	/* on applique une petite lueur */
	text-shadow: 0 0 5px #fff;
	/* on prévoit une petite transition (lueur) */
	transition: all 1s;
}
.menu_btn {
    background: #003ff7 url(image/menu_bg.png) center center no-repeat;
    display:block;
    height:60px;
    width:60px;
    top:25px;
   }
 #menu {
    height:60%;
    position:fixed;
    background-color:#000;
    top:0;
    bottom:0;
   
    width:240px;
   left:-240px;
    z-index:9999;
}
 #menu ul {
    padding:0;
    margin:0;
    list-style:none;
    color:white;
}
 #menu ul li {
    height:47px;
    padding-left:30px;
    line-height:47px;
    border-bottom:1px solid #FFF;
}
 #menu ul li.active {
    background:#0000ca; 
}
 #menu ul li:hover {
    background:#0000ca;     
}
 #menu ul li a {
    color:white;
    text-decoration:none;
 display:block;
 font-size:0.8em;
}
#menu ul li a:hover {
 color:#ffd051;
}
ul li a#blanc:visited{
 color:#97CBFD;
}
#menu ul li ul { position:absolute;left:100px;
 display:none;
 }
 #menu ul li:hover ul {
 display:block; 
 margin:0;
 padding:5px 0 0 0;
}
#menu li:hover ul li { 
display:block;  
width:100%;
 float:none;
 padding:5px 0 6px 5px;
  text-align:left;
  background-color:#58585D;
 border-right:1px solid #28030A;
 border-left:1px solid #28030A;
  border-bottom:1px solid #28030A;
 }
 #menu li:hover ul li a{
  color:#FFF;
 }
  #menu li:hover ul li :hover {
 color:#ffd051;
}
 .close {
	width: 100%;
	height: 100%;
	top: 0;
	left: 240px;
	position: absolute;
	display: block;
	z-index: 9999;
}


#slide1 { background-color:#FFF; color:#000;margin-top:10px;}/*galerie*/
#slide2 { background:#000 url(image/mucemb.jpg) center 0 no-repeat fixed; height: 130%;margin-top:10px;z-index:-1;/*accueil*/
-webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */z-index:-1;
}

#slide2 p{margin-left:2%;}
#slide2 a{color:FFF;}
span.bulle {
   position: relative;
   cursor: pointer;
   color:#000;
   }
span.bulle span {
   display: none;
   }
span.bulle:hover span {
   left: 0px;
   top:-8px;
   padding-left:2px;
   width: 90%;height:auto;
   display: block;
   position: absolute;
   border: 1px black solid;
   background-color:#FFF;
   opacity: 0.8;
   z-index:10;
   }
#IE8 span.bulle:hover span {
   left: 0px;
   top:-22px;
   padding-left:2px;
   width: 100%;height:auto;
   display: block;
   position: absolute;
   border: 1px black solid;
   background-color:#FFF;
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
   }
   #galerie{
   margin-left:18%;  margin-right:18%;width:60%;
   margin-top:80px;
   }
 #galerie img{
 border:2px solid #000;
}
 #galerie ul{
margin:0;
}
 #galerie ul li{
 list-style-type:none;
 display:inline-block;
padding-left:10px;
margin-bottom:10px;
 }
  #galerie1{
   margin-left:12%;  margin-right:20%;color:#000;
   margin-top:80px;
   }
 #galerie1 img{
 border:2px solid #000;
}
 #galerie1 ul{
margin:0;
}
 #galerie1 ul li{
 list-style-type:none;
 padding-left:10px;
 }

 #photo3{
background:url(image/fond.png);
width: 60%;  
padding:1em;
margin-top:80px;
margin-left:15%;
color:#707070;
  }
  #photo3 a{color:#FFF;}
  #photo4 a{color:#FFF;}
   #photo3 a:hover {
 color:#ffd051;
}
 #photo4  a:hover {
 color:#ffd051;
}
#photo5{
background:url(image/fond.png);
width: 60%;  
padding:1em;
margin-top:80px;
margin-left:15%;
color:#707070;
}
#photo5 a{color:#FFF;}
#photo5 a:hover{color:#ffd051;}

  .photo3{
margin-top:50px;margin-left:35%;
color:#000;
font-size:1.1em;
}
 .marge{
	margin-left:1em;
	}

	#espace{height:80px; width:100%}
	/*-----------------------contact*/
#formcontact .remarque { display:none; }
#photo4{
background:url(image/fond.png);
width: 100% auto;
margin-left:12%;
margin-top:80px;
margin-right:18%;
margin-bottom:2%;
  }
#photo4 table{
width: 90%;
max-width:700px;
	height:auto;
	margin-top:15px;
	margin-bottom:15px;
	background-color:#FFFFFF;
	border:2px solid #0000ca;
	}
#photo4 td{
text-align:left;
margin-left:20%;
color:#000;
	}
#photo4 table img{
margin-left:75%;
margin-top:10px;
	}
#photo4  input{
margin-left:25%;
width:40%;
	font-size:0.8em;
	border-bottom:1px solid #C9C4B4;
	border-left:none;
	border-right:none;
	border-top:none;
	}
 #photo4 input.submit{
	color:#1C44E6;
	height:18px;
	width:80px;
	font-size:0.7em;
	text-align:center;
	margin-left:25%;
	}
	#photo4 textarea{
	border-bottom:1px solid #C9C4B4;
	border-left:1px solid #C9C4B4;
	border-right:none;
	border-top:none;
	margin-left:25%;
	width:60%;
	height:150px;
	}
#pied{
    margin-left:35%;
	margin-right:auto;
    margin-top:15px;
	color:#000;
	font-size:0.9em;
	}
	#pied a{
	color:#000;
}
#pied #img{margin-left:25%;}
	#fb{
	font-size:0.8em;
	margin-left:35%;
	color:#000;
	margin-bottom:20px;
	}
	#fb a{
	color:#000;
	}

@media screen and (min-width:800px)and (max-width:1200px) {
	* {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
#galerie{
margin-left:auto;width:90%;

}	

.menu_btn {
height:32px;
    width:32px;
    left:0;
}
#pied{
	font-size:0.8em;clear:both;
	}
#photo3{margin-top:80px;}	

#photo4 table img{
	margin-left:60%;
	}
#photo4{
margin-left:15%;
padding:2%;
  }
#photo4 table{
width: 90%;
	height:auto;}
	}

@media screen and (max-width:800px){
	* {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
#nav {position:static;
		width:70%;
	padding-left: 0;
text-align: left;
margin-left:0;
}
#nav li{
padding-left:0.5em;	
}
#nav a {
font-size:0.9em;
	margin: 0 ;
}
#nav img{
	width:20%;
}
#menu{	height:30%;
}
	#menu ul li{
		margin-top:15px;
		height:32px;
		line-height:20px;
	}
	#menu ul li a{
	font-size:0.8em;
	}
h3{
font-size:0.8em;	
}
h3 img{width:30%;}
#photo3,#photo5 {width:100%;margin-top:15px;margin-left:0;}
.photo3{font-size:0.9em;margin-left:2%;}
#slide2{margin:0;}
#slide2  p {
	width: 80%;
	text-align: justify;
	margin-top:-20px;
	font-size:0.8em;
}
#slide2 img{width:60%; height:auto;}

#galerie{
	margin-left:8%;margin-right:1%;padding:0;width:90%;
	margin-top:50px;
	}
	#galerie ul{
	margin-left:0;padding:0;
	
	}

span.bulle:hover span {
	font-size:0.8em;
}
.menu_btn {
height:50px;
    width:50px;
    left:0;
}
#photo4{margin:0;}
#photo4 table{
	font-size:0.9em;
	margin-left:auto;
	}
#photo4 table img{
	
	width:30%;
	height:auto;
	}
	#photo4 input{
	margin-left:2%;
	}
 #photo4 input.submit{
	font-size:0.9em;
	}
	
#photo4 textarea{
	margin-left:2%;
	
	}
	#photo4 p a{
	border:none;
} 

	#photo4 td{
	text-align:left;
	margin-left:10px;
	}
	#pied{
	font-size:0.75em;margin-left:15%;
	}
	#pied img{width:15%;height:auto;}
	#fb{margin-left:5%;font-size:0.6em;}
	#fb img{
		font-size:0.5em;
		width:5%;
		height:auto;
	}
	

/* gestion des mots longs */
div,textarea,table,td,code
 {
        -webkit-hyphens: auto; /* césure propre */
        -moz-hyphens: auto;
        hyphens: auto;
        word-wrap: break-word; /* passage à la ligne forcé */
    }
}
@media screen and (max-width: 800px) and (max-width:1200px) and (orientation: landscape) {
#slide2 img{width:60%; height:auto; margin-bottom:40px; clear:both;}	
}