* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html, body {
    width: 100%;
    height: 100%;
}
body {
    font-family: 'Sedgwick Ave Display', 'Josefin Sans', Arial, sans-serif;
    background-color: #FFF;
    font-size: 8px;
    padding-left: 5px;
    background:
        radial-gradient(circle at 0% 100%, transparent 30%, rgba(255,55,55,0.1) 50%) no-repeat, 
        radial-gradient(circle at 100% 0%, transparent 20%, rgba(0,0,0,0.1) 50%) no-repeat, 
        radial-gradient(circle at 0% 0%, transparent 15%, rgba(55,255,55,0.1) 50%) no-repeat, 
        radial-gradient(circle at 100% 100%, transparent 5%, rgba(255,255,255,0.1) 50%) no-repeat,
        linear-gradient(0deg, rgba(255,255,255,0.5), rgba(0,0,0,1), rgba(0,0,0,1));
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
main {
    position:absolute;
    width: 90%;
    height: 90%;
    left: 5%;
    top:5%;
}

#titre {
    font-size: 40px;
    font-family: Marcellus, Frijole;
    margin-bottom: 45px;
    cursor: pointer;
    letter-spacing: 5px;
    width: 100%;
    text-align: center;
}
#laNav {
    min-width: 400px;
    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: radial-gradient(circle at 0% 100%, transparent 15%, rgba(255,255,255,0.5) 15%) no-repeat, 
        radial-gradient(circle at 100% 0%, transparent 15%, rgba(255,255,255,0.5) 15%) no-repeat, 
        radial-gradient(circle at 0% 0%, transparent 15%, rgba(255,255,255,0.5) 15%) no-repeat, 
        radial-gradient(circle at 100% 100%, transparent 15%, rgba(255,255,255,0.5) 15%) no-repeat;
    background-position: 0% 100%, 100% 0%, 0% 0%, 100% 100%;
    background-size: 75% 75%;
    box-shadow: 0 0 10px #fff;
    /*filter: blur(0px);*/
}

#laNav ul li.separateur {
    display: inline-block;
    padding: 5px 5px 5px 15px;
    margin-bottom: -10px;
    color: #fff;
    z-index: 10;
} 
/**
Ajout d'un élément devant tous les li, excepté ceux avec la class .seprateur
Cet élément contiendra le 'numéro' du li et sera affiché dans un petit cercle noir
*/
#laNav ul li:not(.separateur):before {
    color:#fff;
    background:rgba(0,0,0,1);
    box-shadow: 1px 1px 5px #000;

    text-align:center;
    font-size: 10px;
    letter-spacing: 1px;
    font-family: Arial, sans-serif;

    /* comptage des li : 
    affichage */
    content:counter(li);
    /* et incrément */
    counter-increment:li;

    position:absolute;
    left: -8px;
    top:-4px;
    min-width: 12px;

    /* 50% => cercle ou ovale, selon la hauteur et la largeur */
    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 5px;

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

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

    padding: 10px;
    padding-left: 15px;
    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: 80px;
    height: 95px;
}
.deco.vide {
    background: transparent !important;
    box-shadow: 0 0 10px rgba(0,0,0,0) !important;
}
