/*  ------------- POLICES DE CARACTERES --------------------------------------------------------------------- */
@font-face {
    font-family: 'abel';
    src: url('abel-webfont.eot');
    src: url('abel-webfont.eot?#iefix') format('embedded-opentype'),
         url('abel-webfont.woff2') format('woff2'),
         url('abel-webfont.woff') format('woff'),
         url('abel-webfont.ttf') format('truetype'),
         url('abel-webfont.svg#abel') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'amiga';
    src: url('amiga-webfont.eot');
    src: url('amiga-webfont.eot?#iefix') format('embedded-opentype'),
         url('amiga-webfont.woff2') format('woff2'),
         url('amiga-webfont.woff') format('woff'),
         url('amiga-webfont.ttf') format('truetype'),
         url('amiga-webfont.svg#amiga') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'bgk';
    src: url('toto-webfont.eot');
    src: url('toto-webfont.eot?#iefix') format('embedded-opentype'),
         url('toto-webfont.woff2') format('woff2'),
         url('toto-webfont.woff') format('woff'),
         url('toto-webfont.ttf') format('truetype'),
         url('toto-webfont.svg#bgk') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*  ------------- FIN POLICES DE CARACTERES ------------------------------------------------------------------ */

/*  ------------- REGLES GENERALES ------------- --------------------------------------------------------------*/
html, body
{
    height:100%;
    margin:0;
    padding:0;
	background: #DDDDDD;
	font-family: bgk;
}
img{
	margin:0;
	padding:0;
}
	
a {color: #068; text-decoration: none; }
a:hover {color: #0DF; text-decoration: none;}

h1{
	font-family: abel;
	font-size:20px;
	color:#00CCEE;
}

/* ------------- TOP ------------------------------------------------------------------------------------------*/
header
{
	width: 100%;
    top: 0;
    height: 150px;
	position: fixed;
	background: radial-gradient(ellipse at center bottom, white, #DDDDDD);
	box-shadow: 0 5px 25px rgba(0,0,0,0.25), 0 0 75px rgba(0,0,0,0.1) inset;
	text-align: center;
	box-shadow: 2px 3px 45px #CCCCCC;
	z-index : 10;
	pointer-events: none;
}

#banniere { /*  Image Micro Facile et Logo au dessus du menu mais en pas clickable  */
	position: relative;
	z-index:25;
	pointer-events: none;
}

/* ------------- MENU -----------------------------------------------------------------------------------------*/


#nav {
	margin: 0;
	text-align: center; 
	min-width:950px;
	position: relative;
	top: -58px;
	background:radial-gradient(ellipse at center, white, #DDDDDD);
	height:55px; 
	box-shadow: 0 -7px 16px #DDDDDD;
	z-index:9;
	pointer-events: auto;
}

#nav li {
	display: inline;
	list-style: none; /* nécessaire pour IE7 */
}

#nav a {
	text-align: center; 
	display:inline-block;
	padding-top:15px;
	text-decoration: none;
	font-size: 1.5em ;
	text-shadow: 0px 0px 5px #00B6F5;
	color: #004B5E;
	width:150px;
	height:40px;
	-webkit-transition:all .1s ease;
	-moz-transition:all .1s ease;
    -o-transition:all .1s ease;
    transition:all .1s ease;
}

#nav a:hover {
	border-bottom : solid 3px #00AADD;;
}

#un{
	position: relative;
	left: -160px;
}

#deux {
	position: relative;
	left: -135px;
}

#trois {
	position: relative;
	left: 75px;
}

#quatre{
	position: relative;
	left: 110px;
}

/* ------------- BAS ----------------------------------------------------------------------------------*/
footer
{
	background: radial-gradient(ellipse at center top, white, #DDDDDD);
	text-align: center;
	width: 100%;
    position: fixed; 
    bottom: 0;
    height: 150px;
	box-shadow: -2px -3px 45px #CCCCCC;
}
/* SEPARATION CONTENU FOOTER*/
#barre2 {
	height: 10px;
	width:100%;
	background: linear-gradient(#002344,#006F94);
	position: relative;
}
#menubas {
	margin:auto;	
	position: relative;
	height: 60px;
	background-color: #fff;
	min-width:950px;
	background:radial-gradient(ellipse at center, white, #DDDDDD);
	box-shadow: 0 7px 16px #DDDDDD;
}
#menubas img{
	position:relative;

}
#menu2 {
	margin: auto;
	padding: 10px 15px 5px 15px;
	text-align: center; 
	min-width:950px;
	position: relative;
	height:55px; 
	right: 25px;
	font-family:abel;
}

#menu2 li {
	display: inline;
	list-style: none; /* nécessaire pour IE7 */
}

#menu2 a {	
	text-align: center; 
	display:inline-block;
	text-decoration:none;
	color:#006F94;
	font-size: 16px;
	margin-left:15px;
}
#menu2 a:visited{
	color:#006F94;
}
#menu2 a:hover{
	transform: scale(1.2);
}
#menu2 img{
	vertical-align:middle;
	width: 35px;
	height: 35px;
	margin-right:10px;
}
#copyright{
	min-width:950px;
}
/*--------------- CONTENU ------------*/

#main { 
    position:relative;
	color: #000;
	height:100%;
    width:100%; 
	background:radial-gradient(ellipse at center, white, #CCCCCC);
    padding:150px 0 150px 0; /* Header height and footer height */
    margin:0 auto 0 auto; /* Center content */
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

#contenu {
    height: 100%;
	margin:auto;
	padding:0px;
	text-align:center;
    overflow:auto;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
	z-index:-2;
}

/*--------------- acceuil.php ----------------------------------------------------------------------------------- ------------*/
#lesnews {
	min-width:950px;
	top:-100px;
}
#imgabout,#frais{
	margin: -15px 0px -15px 0px;
}
.plusdinfos{
	position:absolute;
	bottom:10px;
	right:10px;
	width:150px;
	font-family:abel;
	padding: 5px 10px 5px 10px;
	background: linear-gradient(#EEEEEE,#FFFFFF);
	border-radius: 1% 1% 1% 1% / 1% 1% 1% 1%;
	box-shadow: 0 1px 3px rgba(0,0,0,0.25), 0 0 10px rgba(0,0,0,0.15) inset,0 0px 20px rgba(200,200,200,0.4);		
	z-index:500;
}
.plusdinfos:hover{
	box-shadow: 0 0px 7px #00B6F5;	
	color:#00B6F5;
}
.box {
	position: relative;
	margin:0px auto 25px auto;
	width: 900px;
	min-height: 250px;
	background-color: #fff;
	box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 50px rgba(0,0,0,0.15) inset,0 0px 10px rgba(200,200,200,0.4);
	border-radius: 2% 2% 2% 2% / 10% 10% 10% 10%;
}

#about {
	margin: 0px auto 0px auto;
	height: 180px;
	position: relative;
	width: 900px;
	background-color: #fff;
	box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 50px rgba(0,0,0,0.15) inset,0 0px 10px rgba(200,200,200,0.4);
	border-radius: 2% 2% 2% 2% / 10% 10% 10% 10%;
}
#about p{
	font-family:abel;
	color:#057;
	text-align : justify;
	padding: 15px 25px;
	width: 70%;
	
}
.box p{
	position:relative;
	font-family:abel;
	color:#057;
	text-align : justify;
	padding: 0px 15px 50px 0px;
	width: 70%;
	left:240px;

}

.box h1{
	padding-top:20px;
	padding-left:285px;
	text-align:left;
}
#imgabout2{
	position:absolute;
	right : 10px;
	top: 0px;
	height: 180px;
	
}
.imgfrais{
	position:absolute;
	left : 10px;
	top: 10px;
	pointer-events: none;
}
.imgfrais2{
	position:absolute;
	left : 35px;
	top: 35px;
	max-width:175px;
	max-height:175px;
}
.statut{
	position:absolute;
	right : -55px;
	top: -25px;
	pointer-events: none;
}
#footimg{
	position: relative;
	bottom:15px;
}


#precision{
 position: relative;
 margin:auto;
 margin-top: -20px;
 font-family:abel;
 font-size: 1.1em;
 width: 900px;
 padding: 5px;
 padding: 0px 0px 5px 0px;
 background-color: #fff;
 box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 50px rgba(0,0,0,0.15) inset,0 0px 10px rgba(200,200,200,0.4);
 border-radius: 3% 3% 3% 3% / 3% 3% 3% 3%;
}
/*-----------------------------------------------------------------produits ----------------------------------------------*/
#lescat{
	position: relative;
	width: 950px;
	margin: auto;
	left:10px
	
}
#lescat:last-child{
	padding-bottom:25px;
}
#lesprod{
	position: relative;
	width: 950px;
	min-width: 950px;
	margin: auto;
}

#lesprod:last-child{
	padding-bottom:25px;
}
#haut {
	font-family:abel;
	font-size: 1.5em; 
	text-shadow: 0px 0px 5px #00B6F5;
	color:#057;
	margin-bottom: 5px;
	margin-top:7px;
	min-width:950px;
}

.categorie {
	position: relative;
	font-family:abel;
	font-size: 1.1em;
	width: 305px;
	height: 280px;
	float:left;
	margin:5px;
	background-color: #fff;
	box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 10px rgba(0,0,0,0.15) inset,0 0px 10px rgba(200,200,200,0.4);
	border-radius: 5% 5% 5% 5% / 5% 5% 5% %;
 }
 
.categorie:hover{
	 box-shadow: 0 2px 25px rgba(0,150,200,0.5), 0 0 10px rgba(0,0,0,0.15) inset,0 0px 10px rgba(200,200,200,0.4);
}
.produit {
	position: relative;
	font-family:abel;
	font-size: 1.1em;
	width: 905px;
	min-height: 120px;
	padding: 15px;
	margin: 15px;
	background-color: #fff;
	box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 10px rgba(0,0,0,0.15) inset,0 0px 10px rgba(200,200,200,0.4);
	text-align:center;
 }
.produit h1{
	margin:0;
} 
.produit p {
	color: #fff;
	background: radial-gradient(ellipse at center top,#004C7F,black);
	text-align:justify;
	max-width: 800px;
	margin-left: 35px;
	padding: 15px;
	border-radius: 1% 1% 1% 1% / 1% 1% 1% 1%;
}
.produit a {
	color: #0AD;
}
.produit a:hover {
	color: #0DF;
}
.service {
	position: relative;
	font-family:abel;
	font-size: 1.0em;
	width: 930px;
	min-height: 230px;
	padding: 0px;
	margin: 15px;
	background-color: #fff;
	box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 10px rgba(0,0,0,0.15) inset,0 0px 10px rgba(200,200,200,0.4);
	text-align:left;
 }

.descript {
	color: #fff;
	background: radial-gradient(ellipse at center top,#004C7F,black);
	font-family:abel;
	text-align:justify;
	min-height:230px;
	max-width: 645px;
	margin-left: 265px;
	padding: 15px;
	padding-top:5px;
	border-radius: 1% 1% 1% 1% / 1% 1% 1% 1%;
}
.tarif {
	position:absolute;
	width: 600px;
	margin-left: 290px;
	bottom:10px;
	text-align:center;
	background:radial-gradient(ellipse at center top,#EEEEEE,white);
	height:25px;
	border-radius: 1% 1% 1% 1% / 1% 1% 1% 1%;
	padding:4px;
	box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 10px rgba(0,0,0,0.5) inset,0 0px 10px rgba(200,200,200,0.9);
	text-shadow: 0px 0px 3px #00B6F5;
	color: #004B5E;
	font-size:1.1em;
}
.tarifprod {
	position:relative;
	width: 773px;
	max-width: 773px;
	margin: auto;
	text-align:center;
	background:radial-gradient(ellipse at center top,#EEEEEE,white);
	height:25px;
	border-radius: 1% 1% 1% 1% / 1% 1% 1% 1%;
	bottom:0px;
	padding:4px;
	box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 10px rgba(0,0,0,0.3) inset,0 0px 10px rgba(200,200,200,0.9);
	text-shadow: 0px 0px 3px #00B6F5;
	color: #004B5E;
	font-size:1.1em;
}

.produit h1{
	font-size: 1.1em;
	margin:0px;
	padding:0px;
	top:0px;
} 
.service a {
	color: #0AD;
}
.service a:hover {
	color: #0DF;
}
.service img {
	position:absolute;
	margin:auto;
	left:0px;
}
#toto{
	position:relative;
	margin: auto;
	font-family:abel;
	font-size: 1.1em;
	width: 850px;
	height:50px;
	clear:both;
	margin-bottom: 25px;
}
/*---------------------------------------------- CONTACT ---------------------------------*/
#divcontact{
	position: relative;
	width: 900px;
	min-width: 900px;
	margin: auto;
	height: 450px;
}
#divmap {
	position: relative;
	font-family:abel;
	margin:0px auto 25px 0px;
	width: 375px;
	height: 450px;
	padding: 15px;
	background-color: #fff;
	box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 50px rgba(0,0,0,0.15) inset,0 0px 10px rgba(200,200,200,0.4);
	border-radius: 3% 3% 3% 3% / 3% 3% 3% 3%;
	top: 5px;
	float:left;
}
#map {
	width: 375px;
	height: 355px;
	border-radius: 3% 3% 3% 3% / 3% 3% 3% 3%;
	box-shadow: 0 1px 15px rgba(0,0,0,0.25),0 0px 10px rgba(200,200,200,0.4);
	}
#divform {
	position: relative;
	font-family:abel;
	margin:0px 0px 0px auto;
	width: 450px;
	height: 450px;
	padding: 15px;
	background-color: #fff;
	box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 50px rgba(0,0,0,0.15) inset,0 0px 10px rgba(200,200,200,0.4);
	border-radius: 3% 3% 3% 3% / 3% 3% 3% 3%;
	top: 5px;
}
#divcontact h1{
	text-align:right;
	padding-right:50px;
	font-family:amiga;
	font-size: 0.8em;
}


label {
	display: block;
	width: 100px;
	float: left;
	text-align:right;
}
input{
	width:250px;	
}
input[type=submit]{
	width: 100px;
	position: relative;
	left: 75px;
}
textarea {
	resize: none;
	width:250px;
}
#divinfos {
	position: relative;
	font-family:abel;
	margin:0px 0px 10px auto;
	width: 880px;
	height: 135px;
	padding: 5px 5px 5px 15px;
	text-align: left;
	background-color: #fff;
	box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 50px rgba(0,0,0,0.15) inset,0 0px 10px rgba(200,200,200,0.4);
	border-radius: 1% 1% 1% 1% / 9% 9% 9% 9%;
	clear:both;
}

#illustr {
	position:absolute;
	top:1px;
	left: 400px;	
} 
#illustr2 {
	position:absolute;
	top:1px;
	right:30px;	
} 
.boxreponse{
	text-align:center;
	position: relative;
	margin:auto;
	width: 900px;
	min-height: 150px;
	background-color: #fff;
	box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 50px rgba(0,0,0,0.15) inset,0 0px 10px rgba(200,200,200,0.4);
	padding-bottom:40px;
	font-family:abel;
}
/*-----------------------EFFET LIGHTBOX -------------------*/
.lightbox {
	/** Default lightbox to hidden */
	display: none;
	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
}

.lightbox img {
	/** Pad the lightbox image */
	max-width: 90%;
	max-height: 80%;
	margin-top: 160px;
}

.lightbox:target {
	/** Remove default browser outline */
	outline: none;

	/** Unhide lightbox **/
	display: block;
}