/* import typography ------------------------------------ */
@font-face {
    font-family: InstrumentSerif;
    font-style: normal;
    src: url(font/InstrumentSerif-Regular.woff);
} 
@font-face {
    font-family: InstrumentSerif;
    font-style: italic;
    src: url(font/InstrumentSerif-Italic.woff);
} 

/* permet de désactiver toutes les marges mises automatiquement (toujours commencer le CSS par ça) */
body{
    margin: 0px;
    padding: 0px;
} 

/* lien cliquable, couleur -- */
a:link {
  color: rgb(0, 0, 0);
}
a:link, a:visited {
  color: rgb(0, 0, 0) ;
}

/* header titre */
.header{
    display :  flex;
    justify-content: space-between;
    background-color: white;
    position: sticky;
    top: 0px;
    padding: 5px;
    z-index: 1000;
}
.header img{
  height: 70px;
}

/* couleur texte */
h1, p, a {
  color: rgb(0, 0, 0);
  font-family: InstrumentSerif;
}


/* page about et contact */
.txt-bleu:hover{
  color: rgb(167, 201, 255);
}
.text{
  padding-top: 20px;
  padding-left: 50px;
  padding-right: 10px;
}

/* liste de projets haut de page principale */
.tableau-orga-projets{
  padding: 20px;
}
.tableau-orga-projets :hover{
  color: rgb(167, 201, 255);
  text-decoration: underline;
}

/* titre ferré à droite */
.lil-title{
    padding: 20px;
    text-align: right;
  }

/* colonnes de projets */
.projects-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.project-list{
    display: flex; 
    flex-direction: column;
    flex-grow: 1;
    margin: 20px;
    max-width: 30vw;
}
.project-list img{
    padding-bottom: 20px;
    width: 100%;
}

/* pages de projets individuels */
.project-list-project{
    display: flex; 
    flex-direction: column;
    flex-grow: 1;
    margin: 20px;
    max-width: 35vw;
}
.project-list-project img{
    padding-bottom: 20px;
    width: 100%;
}
.text-project{
    background-color: white;
    margin-top: 20px;
    margin-left:20px;
    padding-right: 20px;
}

.page-project{
  display :  flex;
  flex-direction: row;
}


@media (max-width: 1201px) {
.header{
    padding: 10px;
}
.header img{
  height: 50px;
}
.project-list{
    max-width: 44vw;
}
}

@media (max-width: 700px) {
.header{
    display: flex;
    flex-wrap: wrap;
}
.header img{
  height: 35px;
  margin-right: 300px; 
  margin-bottom: 5px; 
}
.project-list{
    max-width: 100vw;
}

/* pages de projets individuels */
.project-list-project{
    display: flex; 
    flex-direction: column;
    flex-grow: 1;
    margin: 20px;
    max-width: 100vw;
}
.project-list-project img{
    padding-bottom: 20px;
    width: 100%;
}

.page-project{
  display: flex;
  flex-direction: column-reverse;
}
}




/*
vh taille de l'ecran hauteur
vw taille de l'écran largeur
-> proportions
bonne commande !!! 
*/



/* .project-list img{
    object-fit: cover;
} 
    */ /* pour image qui se recadre en gardant les proportions*/