@charset "utf-8";

/* CSS Document */


/*********************/
/* Le div a scroller */
/*********************/

/*********************************************/
/***** position : absolute; /* IMPERATIF *****/
/*********************************************/

#DIV_MOVE {
  left : 0px;
  top : 0px;
  font-size : 14px;
  font-family : comic sans MS;
  text-decoration:none;
  text-align : left;
  background-color : #b0c4de;
  height :20px;
  width  : 100%;

  z-index : 1000;
}


/*********************/
/***** Menu Haut *****/
/*********************/

nav{
	width:100%;
	background: linear-gradient(180deg, #fff, #fbbd5c);
}

.main{
	box-shadow:3px 3px 6px #666;
}

nav > ul{
	margin:0px;
	padding:0px;
}

nav li{
	list-style-type:none;
}

nav > ul > li{
	float:left;
	position:relative;
}

nav > ul::after{
	content:"";
	display:table;
	clear:both;
}

.submenu{
	display:none;
}

nav input[type=checkbox]{
	display:none;
}

nav label{
	display:none;
}

nav a{
	display:inline-block;
	text-decoration:none;
}

nav > ul > li > a{
	padding:20px 50px;
	font-size:18px;
	font-weight:bold;
	color:#666;
	text-shadow:2px 2px 4px #666;
}

nav > ul > li:hover a{
	padding:16px 50px 20px 50px;
	color:#fff;
}

nav li:hover .submenu{
	display:inline-block;
	position:absolute;
	top:100%;
	left:0px;
	padding:0px;
	z-index:1000;
}

.submenu li a{
	padding:5px 20px;
	font-size:13px;
	color:#666;
	width:140px;
	height:2px;
}

.submenu li{
	margin-bottom:5px;
}

.menu-argan:hover{
	border-top:4px solid #b16800;
	background:linear-gradient(180deg, #990d0d, #ffd39b, #990d0d);
}

.menu-cosmetique:hover{
	border-top:4px solid #1500b1;
	background:linear-gradient(180deg, #990d0d, #ffd39b, #990d0d);
}

.menu-sante:hover{
	border-top:4px solid #11b100;
	background:linear-gradient(180deg, #990d0d, #ffd39b, #990d0d);
}

.menu-nutrition:hover{
	border-top:4px solid #da0000;
	background:linear-gradient(180deg, #990d0d, #ffd39b, #990d0d);
}

.menu-contact:hover{
	border-top:4px solid #aaa;
	background:linear-gradient(180deg, #990d0d, #ffd39b, #990d0d);
}

.menu-argan .submenu{
	
}

.menu-cosmetique .submenu{
	background:linear-gradient(180deg, #990d0d, #ffd39b, #990d0d);
}

.menu-sante .submenu{
	background:linear-gradient(180deg, #990d0d, #ffd39b, #990d0d);
}

.menu-nutrition .submenu{
	background:linear-gradient(180deg, #990d0d, #ffd39b, #990d0d);
}

.menu-contact .submenu{
	
}

.submenu li:hover a{
	font-size:15px;
	color:#111;
}

nav input[type=checkbox]:checked ~ ul{
	display:block;
}

@media screen and (max-width:780px){
	.menu-mobile{
		display:block;
		color:#666;
		background-color:#3f3f53;
		text-align:center;
		padding:12px 0px;
	}
	nav ul{
		display:none;
	}
	nav ul li, nav ul li a{
		width:100%;
		text-align:center;
	}
	nav ul li a, nav ul li:hover a{
		padding:10px 0px;
	}
	nav li:hover .submenu{
		display:block;
		position:static;
	}
}