@font-face{
	font-family: Outfit-Regular;
	src: url("Outfit-Regular.otf") format("truetype");
}

@font-face{
  font-family: Outfit-Medium;
  src: url("Outfit-Medium.otf") format("truetype");
}

@font-face{
  font-family: Outfit-Light;
  src: url("Outfit-Light.otf") format("truetype");
}

body{
  margin: 0;
}

.logo{
  width: 4vw;
  margin-top: -1vw;
}

.header{
  position : sticky;
  top: 0;
  z-index: 10;
  font-family: Outfit-Regular;
  height:4vw;
  font-size: 1.5vw;
  display : flex;
  justify-content: space-between;
  background-color: white;
 } 

 .juliette-madeira{
  margin-left:2vw;
  display:flex;
  align-items: center;
 } 

 a{
  text-decoration: none;
  color: black;
  display:flex;
  gap:0.5vw;
   }

hr{
  display: block;
  border-color : black;
  position: sticky;
  top: 4vw;
  z-index: 3;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: auto;
  margin-inline-end: auto;
  border-width: 1.5px;
  }

.tab-bar{
  display: flex;
  gap: 2vw;
  align-items: center;
  margin-right:2vw;
}

.lien{
  font-family: Outfit-Regular;
  text-decoration: none;
  color:black;
  }

.lien:hover{
  font-family: Outfit-SemiBold;
  text-decoration: none;
  color:black;
  }

.bg-projet-rouge{
  display: flex;
  align-items: column;
  margin-left:0vw;
  background-color:#FC7955;
  }

  .bg-projet-bleu{
  display: flex;
  align-items: column;
  margin-left:0vw;
  background-color:#72A8EA;
  }

  .bg-projet-vert{
  display: flex;
  align-items: column;
  margin-left:0vw;
  background-color:#86CA83; 
  }

.bg-img-projet{
  background-color:white;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:3vw;
  margin-left:1vw;
  width:70vw;
  border-style: solid;
  border-top-style: none;
  border-bottom-style: none;
  border-color :black;
  border-width: 3px;
  padding-top:3vw;
  padding-bottom:3vw;
  }

.img-projet{
  display: flex;
  align-items:  center;
  flex-direction: column;
  width:70vw;
  }

  .legende{
  font-family: Outfit-Light;
  font-size:1vw;
  margin-bottom: 0;
  }

  .img-projet-vertical{
  display: flex;
  align-items:  center;
  flex-direction: column;
  width:30vw;
  }


img{
  width:65vw;
  }

.explications{
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left:73.5vw;
  padding-top: 2.5vw;
   z-index:1;
  }

  .titre{
  margin:0;
  font-family: Outfit-Medium;
  font-size:2vw;
 }

 .collab{
  margin-top: 1.5vw;
  font-family: Outfit-Regular;
  font-size:1vw;
  width:25vw;
  }

  .paragraphe{
  font-family: Outfit-Regular;
  font-size:1vw;
  width:25vw;
  }

  .date{
  font-family: Outfit-Medium;
  font-size:1.5vw;
  display:flex;
  flex-direction: row;
  justify-content: space-around;
  gap: 0.75vw;
  margin-top: 9vw;
  margin-bottom: 0;
  }

  .picto{
  width : 1.5vw;
  display:flex;
  }

.domaine{
  margin:0;
  font-family: Outfit-Light;
  font-size:1vw;
  display:flex;
  }

  .footer{
  height : 2vw;
  font-family: Outfit-Regular;
  font-size:1vw;
  display:flex;
  align-items: center;
  justify-content: center;
  gap: 5vw;
  }

  .bloc-cv{
    width:60vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .sujets-predilection{
    font-family:Outfit-Regular;
    font-size: 1vw;
  }

  b{
    font-family:Outfit-Medium;
    font-size: 1vw;
  }

  .date-cv{
    font-family:Outfit-Medium;
    font-size: 1.5vw;
    margin:0;
    margin-top:1.5vw;
  }

  .ligne-cv{
    width:60vw;
    border-width:1.5px;
    margin-top:1vw;
    margin-bottom:1vw;
  }

.description-cv{
    font-family:Outfit-Regular;
    font-size: 1vw;
    margin:0;
  }

.bloc-contact{
  width: 29vw;
  margin-top:4vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  }

.photo{
  display: flex;
  width:20vw;
  position: sticky;
  top:8.25vw;
  margin-bottom: 0;
  border-style: solid;
  border-width: 3px;
  }

.ligne-image-contact{
  width:20.2vw;
  position: sticky;
  top:28.5vw;
  border-width: 1.5px;
  border-style: solid;
  }

  .cta-cv{
  font-family: Outfit-Regular;
  font-size : 1.5vw;
  display: flex;
  border-color: black;
  border:solid;
  border-width:3px;
  padding:0.5vw;
  padding-left:1vw;
  padding-right:9vw;
  padding-left:9vw;
  position:sticky;
  top:29vw;
}

.cta-cv:hover{
  background-color: #86CA83;
}
  
.texte-image{
  font-family:Outfit-Regular;
  font-size: 1vw;
  width:20vw;
  display: flex;
  justify-content: center;
  margin-top:0.5;
}

.contact-a-propos{
  font-family: Outfit-Medium;
  font-size : 1vw;
  width:21vw;
  display:flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 0.75vw;
  position : sticky;
  top: 41vw;
  z-index:1;
}