* { box-sizing: border-box; padding: 0; margin: 0; }
html, body { width: 100%; height: 100%; }
body 
{ 
    font-family: 'Sedgwick Ave Display', 'Josefin Sans', Verdana, sans-serif; font-size: 6px;
    background-attachment: fixed; background-repeat: no-repeat; background-size: 100% 100%;
}
main { position:absolute; width: 90%; height: 90%; left: 1%; top:1%; }

#titre { font-size: 40px; font-family: Marcellus, Frijole; margin-bottom: 45px; cursor: pointer; letter-spacing: 5px; width: 100%; text-align: center; }
#laNav { min-width: 380px; margin: 0 auto; }
#laNav > ul{ /*RAZ compteur */ counter-reset:li; }

#laNav ul li{ font-size: 19px; position: relative; min-width: 50px; display: inline-block;
			  list-style-type: none; border-radius: 8px; letter-spacing: 4px; 
			  background-position: 0% 100%, 100% 0%, 0% 0%, 100% 100%; background-size: 80% 80%;
			  box-shadow: 0 0 7px;
				/*filter: blur(0px);*/
			}

#laNav ul li.separateur { display: inline-block; padding: 1px 1px 1px 1px; margin-bottom: -10px; color: #ffffff; z-index: 10; } 
/**
Ajout d'un élément devant tous les li, excepté ceux avec la class .separateur
Cet élément contiendra le 'numéro' du li et sera affiché dans un petit cercle noir
*/

#laNav ul li:not(.separateur):before 
	{ color:#cdd1cd; background:rgba(0,0,0,1); box-shadow: 1px 1px 5px #000; text-align:center; font-size: 12px; 
	  font-family: Verdana, sans-serif;
	  position:absolute; left: -4px; top:-4px; min-width: 1px;
	  border-radius: 50%; border-top:2px solid #fff; border-right:2px solid #999; border-bottom:2px solid #999; border-left:2px solid #FFF;
	  padding:5px;
	}      

#laNav a, 
#laNav a:link, 
#laNav a:visited
{
    display: inline-block;

    background-color: rgba(255,255,255,1); box-shadow: inset #000 -1px -1px -1px;

    border: 1px #FFF solid; border-bottom-right-radius: 4px;

    font-family: 'Josefin Sans', Verdana, sans-serif; text-align: center; text-decoration: none;
    font-size: 14px; letter-spacing: 1px;

    padding: 4px; padding-left: 4px; margin: 4px;
    /* pour le survol de la souris sur les boutons.*/
    transition: all .2s ease;
}

#laNav a:hover { box-shadow: inset #000 1px 1px 5px; color: #000 !important; }
		 .deco { position: relative; opacity: 0.5; filter: blur(5px); top:-37px; width: 60px; height: 95px; }
	.deco.vide { background: transparent !important; box-shadow: 0 0 10px rgba(0,0,0,0) !important; }
