/*=================================
    Gestion du menu de navigation
=================================*/

.navbar-chiffre {
    font-family: var(--navbar-chiffre-font-family);
}

/* Navbar */
.navbar {  
  display:flex;
  align-items:center; 
  justify-content:space-between;   
  padding:10px 30px;
  font-size:1.1rem;
  background:var(--navbar-background-color);
  color:var(--navbar-color);
  font-family: var(--navbar-text-font-family);
}
.navbar__links { 
  display:flex;
  list-style:none;
}
.navbar__link { 
  padding:0px;
  list-style:none;
}
.navbar__link > a { 
  color:var(--navbar-color);
  text-decoration:none;
}
.burger {
  display:none;
}

/*  Small device 
@media screen and (max-width:767.98px) {*/
@media screen and (max-width:967.98px) {
    .navbar__links {
        overflow:hidden;
        display:flex;
        flex-direction:column;
        width:0;
        /*width:100%;*/
        height:calc(100vh - 65px);
        position:absolute;
        top:65px;
        right:0;
        background:var(--navbar-background-color); 
        transform: translateX(110%);
        transition: all .5s ease-in-out;
    }

    .show-nav .navbar__links {  
        width:100vw;    
        transform: translateX(0);
    } 
    .navbar__link {    
        transform: translateX(101%);
        transition: all .5s ease-in-out;
    }
        
    .show-nav .navbar__link  {        
        transform: translateX(0);    
    }
    
    .navbar__link > a {
        display:block;
        padding:1rem;
        font-size:1.6rem;
        color:var(--navbar-color);  
        transition: all .4s ease-in-out;
    }
    .navbar__link > a:hover {
        padding-left:2rem;
        letter-spacing:5px;
    }

    /* Toggle menu */
    .burger {
        display:block;
        position:relative;
        padding:0;
        width:45px;
        height:45px;
        border:none;
        background:transparent;
        cursor:pointer;
    }
    /* Dessiner la barre du milieu du burger */
    .bar {
        display:block;    
        width:45px;
        height:4px;  
        border-radius:3px;
        background: var(--navbar-burger-color);
        transition: all .5s ease-in-out; 

    }

    /* ------------------------------------------------------------
    Dessiner la bare du dessus et dessous du burger (afet / before) */
    .bar::before, .bar::after {
        /* Propriétés commune au before et affter */
        content:"";
        width:45px;
        height:4px;
        position:absolute; 
        left:0;
        background: var(--navbar-burger-color);
        border-radius:3px;    
        transition: all .5s ease-in-out;
    }
    .bar::before {
        /* Propriétés commune au before qui complete celle décrit précédemment */
        transform:translateY(-12px)
    }
    .bar::after {
        transform:translateY(12px)
    }

    /* ------------------------------------------------------------
    /* Animation lorsque on clic sur le burger */
    .show-nav .bar {
        /* La bare du milieu du burger disparait lorsque on clic sur le burger */
        width:0;
        background:transparent;
    }
    .show-nav .bar::before {
        transform:rotate(45deg);
        background: var(--navbar-burger-close-color) !important;
    }
    .show-nav .bar::after {
        transform:rotate(-45deg);
        background: var(--navbar-burger-close-color) !important;
    }

    /* Bonus - Animations */
    .show-nav .first {      
        transition: all 1s ease-out;
    } 
    .show-nav .second {      
        transition: all 1.05s ease-out;
    } 
    .show-nav .third {      
        transition: all 1.1s ease-out;
    } 
    .show-nav .four {      
        transition: all 1.15s ease-out;
    } 
    .show-nav .fifth {      
        transition: all 1.2s ease-out;
    }
    .show-nav .sixth {      
        transition: all 1.25s ease-out;
    }
    .show-nav .seventh {      
        transition: all 1.3s ease-out;
    }
    .show-nav .eighth {      
        transition: all 1.35s ease-out;
    }

}


/*  Grand ecran plus de 768 pixels 
@media screen and (min-width:768px) {*/
@media screen and (min-width:968px) {
    /* Gestion du soulignement */
    .navbar__link > a::after {
        display:block;
        content:""; /* pouvoir prendre en compte les after et befor */
        width:0;
        height:2px;
        background:var(--navbar-underline-color); /* couleur du souligné */
        transition:width .4s;
    }
    /* Gestion du soulignement au survole l'élément va s'agrandir à 100% */
    .navbar__link:hover > a::after {
        width:100%;
    }
}