@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&family=Poppins:wght@300&family=Roboto+Slab:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300&family=Dancing+Script&family=EB+Garamond&family=Lato:wght@300&family=Nunito&display=swap');

*{
    margin: 0 ;
    padding:0 ;
    text-decoration: none !important;
    list-style: none;
    color: black;
    
}

header{
     
     height:80px;
     width: 100vw;
     background-color: white;
     display: flex;
     flex-direction: row;
     justify-content: center;
     z-index: 5;
     box-shadow: 0 0 7px rgba(18, 18, 18, 0.5) ;
     position: fixed;
     top: 0;
     left: 0;
     

}

.navbar{
    
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    

}

.navbar .divLogo  {
 
      height: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      
      
}

.navbar .logo {

     height: 50px;

}

.name{

    color: rgb(2, 147, 214); 
    font-size: 30px;
    font-weight: bold;
    font-family: serif;
    padding: 0 !important;
    margin: 0 !important;
}

span{

    color: rgb(255, 136, 0);
    font-family: serif;
    font-family: "Dancing Script";
}

.navbar .nav-links {

    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    
    

}

.navbar .nav-links ul {

    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    padding: 0 !important;
    margin: 0 !important;

}


.navbar .nav-links ul li{


    margin: 0 12px;



}

.navbar .nav-links ul li a {
    
    
    font-size: 18px;
    color: black;
    font-family: 'EB Garamond', serif;
  
    
}

.navbar .nav-links ul li a:hover {
    
    color: rgb(238, 157, 6);
    
}


.navbar .imgMenu {

     position: fixed;
     top: 30px;
     right: 35px;
     width: 30px;
     height: 25px;
     display: none;     
     padding: 5px;
     background-color: white;
     


}







/* Version phone */

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

    .navbar{
        width: 100%;
    }

    
   .name{

        font-size:25px;
   }
    
    /* .navbar .logo { */
/* 
       position: absolute;
       left: 30px;


    } */

    .navbar .imgMenu { 

        display: block;
        z-index: 10;
    }


   .navbar .nav-links {

        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(206, 214, 218, 0.212);
        backdrop-filter: blur(7px);
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: -100vh; /* nous cachons la presence de nav-links jusqu'à l'écoute de l'événement click de la classe imgMenu*/
        transition: all 0.5s ease-in-out ;
        z-index: 10;

    }

    .navbar .nav-links.responsive{

        margin-top: 0; /* la nav links apparait une fois que margin devient 0 quand il y a la presence de la classe .nav-links.responsive grâce au script  javascript */
    }

    .navbar .nav-links ul {


        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .navbar .nav-links ul li {

        margin: 18px 0;
        font-size: 1.5em;
    }


}