
nav { width:60%; font-family: Arial, Verdana, sans-serif;  left: 0%; font-size:1.3em; position:relative; z-index:9; }  /* position:fixed */
nav h1 { margin:0; padding:0; font: 4em "vintage"; color:forestgreen; float:left; text-shadow: 3px 3px 5px palegreen; transform: translate(0, -50%);  }
nav h1 img { height:100px; position:relative; top:20px; }
nav .slogan { font: 1.5em "typewriter", monospace; color:forestgreen; position:absolute; top:65px; left:20px; text-shadow: 1px 1px 5px palegreen; }

#menu { z-index:8; padding-left:0; max-height:100px; text-align:left; }
#menu li { margin:0; padding:0; float:left; position:relative; list-style:none; }
/*- main level link -*/
#menu a {  display:block; color:palegreen; text-shadow:0 1px 1px rgba(0,0,0,.7); text-decoration:none; padding:10px; margin:0px; border-radius:1vh; text-align:left; }
/* #menu a:hover { color:honeydew; background-color:forestgreen; }
- main level link hover -*/
#menu .current a, #menu li:hover > a { color:honeydew; font-weight: bold; cursor: url('../images/souris_chanvre.png') 10 10, pointer; }
#menu .current a { background-color:forestgreen; }
#menu li:hover > ul li a { font-size: .9em; cursor: url('../images/souris_chanvre.png') 10 10, pointer; text-align:left; }
/*- sub levels link hover -*/
#menu ul li:hover a, #menu li:hover li a { background: none; border: none; color: darkgreen; text-shadow:none; cursor: url('../images/souris_chanvre.png') 10 10, pointer; }
#menu ul a:hover { background:forestgreen !important; color:honeydew !important; font-size:15px; border-radius:0px; text-shadow:0 1px 1px rgba(0,0,0,.1); cursor: url('../images/souris_chanvre.png') 10 10, pointer; }
/*- dropdown -*/
#menu li:hover > ul { display:block; cursor: url('../images/souris_chanvre.png') 10 10, pointer; }
/*- level 2 list -*/
#menu ul { display:none; margin:0px; padding:0; min-width:220px; position:absolute; top:35px; left:0; background:honeydew; border:solid 1px #b4b4b4;
	border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0, .3); z-index:900; }
#menu ul a { padding:8px 10px; font-weight:normal; white-space:nowrap; }
#menu ul li { float:none; margin:0px; padding:0; z-index:1000; }
/*- level 3+ list -*/
#menu ul ul { min-width:220px; left: 181px; top: -3px; }
/*- rounded corners of first and last link -*/
#menu ul li:first-child > a { border-radius: 9px 9px 0px 0px; }
#menu ul li:last-child > a { border-radius: 0px 0px 9px 9px; }
/*- clearfix -*/
#menu:after { content: "."; display:block; clear:both; visibility:hidden; line-height:0; height:0px; }
#menu { display: inline-block; }
html[xmlns] #menu { display: block; }
* html #menu { height: 1%; }

nav .menuLink:hover { background-color:forestgreen; }

#mobilemenu { overflow: hidden; color:palegreen; text-align:left; position: relative; display:none; }
#mobilemenu #mobileLinks { background-color:darkslategray; width:90%; margin-top:-2vh; float:left; display:none; position:fixed; z-index:9;
												left:5%; max-height:75vh; overflow:auto;}
#mobilemenu #mobileLinks div { padding-left:10vw; display:none; }
#mobilemenu a { color:palegreen; padding: 14px 16px; text-decoration: none; font-size: 17px; display: block; }
#mobilemenu #mobileLinks a { border-bottom: 1px #999 solid; }


#boutiqueLiens { font-family: Arial, Verdana, sans-serif; top:1vh; right:15%; font-size:1.2em; position:absolute; z-index:9; } /* pos -> fixed  display:grid; grid-template-columns: repeat(2, 1fr); */
#boutiqueLiens a { color:palegreen; text-decoration:none; }
#boutiqueLiens a:hover { color:honeydew; text-decoration:none; cursor: url('../images/souris_chanvre.png') 10 10, pointer; }
#boutiqueLiens a svg { position:relative; top:5px; }
#boutiqueLiens .icon-cart span { display: flex; width: 30px; height: 30px; background-color: white; opacity:0.8; justify-content: center; align-items: center;
                color: darkgreen; border-radius: 50%; position: absolute; top: 50%; right: -5px; }

@media screen and (max-width: 1080px) {
    nav { top:0; left:0; }
    #boutiqueLiens { right:7%; }
}

@media screen and (max-width: 992px) {
    #menu { display:none; }
    #mobilemenu { display:block; }
}

@media screen and (max-width: 768px) {
    nav {  left:7%; }
}
