/* style Noto Sans */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400&family=Oswald:wght@300&display=swap');

body {
    padding:  0 2%;
    margin: 0;
    font-family: 'Noto Sans', sans-serif;


}

nav {

   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   background-color: white;
   position: sticky;
   top: 0;




}
nav .profile {

    display: flex;
    align-items: center;


}
/* pour afficher l'image du profile*/
nav .profile img {
    width: 40px;
    height: 40px;
    border-radius: 50%;

}

/* marge et taille du nom et l'image profile */
nav .profile h1 {

    margin-left: 10px;

    font-size: 15px;
}

/*  */

nav ul {

    display: flex;
    list-style-type: none; /*  enlever les petits points  */


}

/* préparation de */

nav ul li {

        margin-left: 20px;
        cursor: pointer;
        border-bottom: 1px solid #fff 
        
}

/* pointeur de la souris dans navbar */

nav ul li:hover {

    border-bottom-color: #000;

}

/* section page-content */
    .page-content {
        margin: 4%;
}

    .page-content header {

    margin-top: 5%; /* pour séparer la barre de navigation de notre header  */
    max-width: 80%;
    }

    .page-content header h1 {

        margin: 0;
        text-transform: uppercase;
        font-family: 'Oswald' , sans-serif;
        font-size: 6vw;
    }

    .page-content header p {
        line-height: 30px;
        color: #818181 ;
    }

/* bouton du header */

 .page-content header button {
    /* inherit = prendre la couleur du parent s*/
    background-color: inherit;
    border:  none;
    outline: none;
    padding: 0;
    font-size: 15px;
    font-weight: bold;
    padding-bottom: 5px;
    border-bottom: 1px solid #CCC;
    cursor: pointer;
 }
 .page-content header button:hover {

    color: #CCC;
    border-bottom-color: #0000;

    
 }

 .page-content .presentation-image  {

    margin-top: 5%;
 }

 .page-content .presentation-image img {

    max-width: 100%;
    height: auto;
    /* transition: filter 0.5s;  */  /* effet */

 }

 .page-content .presentation-image img:hover {

    filter: brightness(50%);
 }

/* projets */

 .page-content .projets-section {

    margin-top: 6%;
 }
  .projet img {

    /* height: 50%;
    width: 50%; */
    max-width: 100%;
    max-height: 100%;
 }

 .page-content .projets-section  h1 {

    font-size: 'Oswald', 'sans-serif';
    text-transform: uppercase;  /*  text en majuscule */
    font-size: 3vw;

    
 }


/* div de nos projets */
.page-content .projets-section .projets {

    display: flex;
    flex-wrap: wrap;
}

.page-content .projets-section .projets .projet {

    max-width: 195px;
    margin-right: 20px;
}


.page-content .projets-section .projets .projet h4 {

    margin: 0;

}

.page-content .projets-section .projets .projet .description {

    font-size: 13px;

}

.page-content .projets-section .projets .projet .dates {

    font-size: 13px;
    color: rgb(145, 145, 145);

}

/* C V */

.CV-section {

    margin-top: 6%;
}

 .CV-section h1 {
    
    font-size: 'Oswald', 'sans-serif';
    text-transform: uppercase;  /*  text en majuscule */
    font-size: 3vw;
 }
 
 .CV-section .profil {

    display: flex;
    flex-direction: column;



   
 }
 
 .CV-section .profil .code-postal-ville {

    list-style-type: none; /*  enlever les petits points  */ 

 }
.CV-section .formations {

    color: #000;
    margin-top: 6%;
}

.CV-section .formations p {

    margin-top: 3%;
}

.CV-section .formations .dates-form {
    color: #818181;
 
}

 /* experiences */

 .CV-section .experiences h4 {

    text-transform: uppercase;
    margin-top: 6%;
    


 }

 .CV-section .experiences .nom-type {

   /* font-size: large; */
   font-size: 1vw;
   margin-top: 3%;
    



 }


 /* competence professionnelle */

 .CV-section .competences {
    display: flex;
    flex-direction: column;
    margin-top: 6%;
    
 }

 .CV-section .competences .competences-diverses img {
       
    width: 20px;
    height: 20px;
    border-radius: 50%;
 }
.CV-section .competences h4 {

    text-transform: uppercase;
    margin-top: 6%;
 }


 .CV-section .competences .competences-diverses {

    align-content: space-between;
 }


/* Footer */
footer {

    margin-top: 5%;
    display: flex;
    flex-wrap: wrap; /*   les éléments reste sur la ligne */
    justify-content: space-around;
    background-color: #000;
    color: white;
    padding: 10px;
    
}


footer .colonne a {
    text-decoration: none; /* empêcher la barre sous le lien */

}

footer .colonne p  {

    font-size: 12px;
    color: #ccc;  /* couleur gris  */
    cursor: pointer;

}


footer .colonne p:hover {
    color: #fff;

}

footer .barrer {

    text-decoration: line-through;
}





/* adapter la page web au format mobile */

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

    nav {
        justify-content: center;

    }
    nav ul {
        display: none;
    }
    .page-content header {
        margin-top: 10%;
        max-width: 100%;

    }
/* modifié la taille */
.page-content .projets-section {

    margin-top: 15%;
}

.page-content .projets-section h1 {

    font-size: 1.5em;
}

/*  */

.page-content .projets-section .projets .projet {

    margin-right: 0;   /*  enlevé la marge */
    margin-bottom: 20px;
    max-width: 100%;

}

/* footer */

footer {

    justify-content: flex-start;

}

footer .colonne {
    width: 80%;
}

    
}