/*  COLOR:
    JAUNE   pale    ffffcc  rgba(255, 255, 204, 1.0)
    JAUNE   clair   f9d66c  rgba(249, 214, 108, 1.0)
    JAUNE   base    f8ba57  rgba(248, 186, 87, 1.0)
    ORANGE  claire  e6854d  rgba(230, 133, 77, 1.0)
    ORANGE          e06d29  rgba(224, 109, 41, 1.0)

    NEW
    MARRON  fade   7b594d  rgba(, , , 1.0)
    MARRON  def1    4d2111  rgba(, , , 1.0)
    MARRON  def2    3f1b0d  rgba(, , , 1.0)
*/

nav.navigation {
    width: 100%;
    margin: 0px;
    padding: 0.8em 0;
    background-color: #4d2111;
    text-align: center;
    height: 0.7em;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 2px 5px rgba(61, 4, 0, 0.6);
    
    font-size: 24px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 70;
}
nav.nav-categorie {
    width: 100%;
    margin: 0px;
    padding: 0.8em 0;
    background-color: #4d2111;
    text-align: center;
    height: 0.7em;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 2px 5px rgba(61, 4, 0, 0.6);
    
    font-size: 24px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 70;
}
nav a {
    font-weight: bold;
    color: #f9d66c;
    text-decoration: none;
    margin: 0 0.4em;
    padding: 0.2em 0.6em;
    cursor: pointer;
    letter-spacing: 1px
}
nav a:hover {
    color: #ffffcc;
}


.nav-btn.active {
    cursor: text;
    color: #fff398;
    text-shadow: 0px 0px 35px rgba(230, 111, 32, 1.0);
    letter-spacing: 2px;
    /*border-bottom: 1px inset rgba(230, 111, 32, 0.2);*/

}