/* réglage de l'entête */

header {
    width: 100vw;
    height: 7vh;
    padding: 1% 3%;
    z-index:20;
}

nav ul
{
    width:100% ;
    height:100%;
    font-family: 'questrialregular';
    list-style-type: none;
    display: flex;
    justify-content: flex-end;
    align-items:center;
}

nav li
{
    font-family: 'questrialregular';
    margin-right: 15px;
    padding: 6px;
    display:flex;
    justify-content:center;
    align-items:center;
}

nav a
{
    font-family: 'questrialregular';
    font-size: 1.3em;
    color: var(--main-font-color);
    /*padding-bottom: 3px;*/
    text-decoration: none;
    display:flex;
    justify-content:center;
    align-items:center;
    width: 100%;
    height: 100%;
    gap: 5px;
}


#deconnexion
{
    background : #ffffff;
    font-family: 'questrialregular';
    color:var(--main-font-color);;
    font-size: 1.1em;
    font-weight: normal;
    border: 2px var(--main-page-color) solid;
    border-radius: 100px;
    padding: 0 1vw;
    height:5vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align: center;
}

#deconnexion:hover {
    background-color : var(--main-page-color);
    color:#ffffff;
}

@media screen and (max-width: 768px) {

    header {
        width: 100vw;
        height:8vh;
        display:flex;
        justify-content:flex-end;
        background-color: hsla(0, 0%, 100%, 0.9);
        padding: 2% 5%;
        position: fixed;
        top: 0;
        left:0;
        z-index:2;
        
    }

    nav
    {
        width: auto;
        text-align: left;
    }
    
    nav ul
    {
        flex-direction: row;
    }

    nav li
    {
        padding-left: 4px;
    }
    
    nav a
    {
        font-size: 1.1em;
    }
    
    nav a:hover
    {
        border-bottom: 0;
    }   

    #deconnexion
    {
        
        border-radius: 100px;
        width: 42px;
        height:42px;
        display:flex;
        justify-content:center;
        align-items:center;
        text-align: center;
    }
    
    .navigation {
        padding:0;
    }
    
    }
    
    .navigation:hover {
        
        color:#ffffff;
    }
    
    .navBlock:hover {
     
        border-bottom:2px var(--main-page-color) solid;
    }
    
    /* fin réglage de l'entête */