/* * BODY * */

.html-black {
  background-color: black;
}

.html-white {
  background-color: white;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}






/* * FONTS * */


/* Outfit */

.outfit {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.outfit-bold {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.outfit-extra-bold {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}


/* Averia Libre */

.averia-libre-light {
  font-family: "Averia Libre", system-ui;
  font-weight: 300;
  font-style: normal;
}

.averia-libre-regular {
  font-family: "Averia Libre", system-ui;
  font-weight: 400;
  font-style: normal;
}

.averia-libre-bold {
  font-family: "Averia Libre", system-ui;
  font-weight: 700;
  font-style: normal;
}

.averia-libre-light-italic {
  font-family: "Averia Libre", system-ui;
  font-weight: 300;
  font-style: italic;
}

.averia-libre-regular-italic {
  font-family: "Averia Libre", system-ui;
  font-weight: 400;
  font-style: italic;
}

.averia-libre-bold-italic {
  font-family: "Averia Libre", system-ui;
  font-weight: 700;
  font-style: italic;
}







/* * NAVIGATION * */

.fillBlack {
  fill: black;
}

.fillWhite {
  fill: white;
}

.navLeft {
  position: absolute;
  max-width: 6vw;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  z-index: 10;
}

.navLeft:hover .fillBlack {
  fill: white;
}

.navLeft:hover .fillWhite {
  fill: black;
}

.navRight {
  max-width: 6vw;
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  z-index: 10;
}

.navRight:hover .fillBlack {
  fill: white;
}

.navRight:hover .fillWhite {
  fill: black;
}








/* * MENU * */


/* Hamburger */

.hamburger {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: flex-end;
  margin-bottom: -1vw;
  z-index: 10;
}

.tranches {
  width: .5vw;
  margin: 0vw 0.25vw 0vw 0.25vw;
  z-index: 10;
}

.out {
  height: 1.25vw;
}

.mid {
  height: 2vw;
}

.hamburger:hover .out {
  height: 2vw;
}

.hamburger:hover .mid {
  height: 1.25vw;
}

.black {
  background-color: white;
}

.white {
  background-color: black;
}

.hamburger-highlight {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: flex-end;
  margin-bottom: -70px;
  z-index: 9;
}

.hamburger:hover .hamburger-highlight {
  height: 100;
  width: 100;
}


/* Menu */

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 11;
  top: 0;
  left: 0;
  background-color: white;
  overflow-y: hidden;
  transition: 0.5s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.overlay-content {
  width: 35vmax;
  text-align: right;
  font-size: 4vmax;
  line-height: 15vh;
  margin-right: 15vw;
}

.overlay a {
  padding-right: 20px;
  text-decoration: none;
  color: black;
  display: block;
  transition: 0.3s;
}

.overlay a:hover {
  color: #999;
  fill:  #999;
}

.overlay .closebtn {
  position: absolute;
  top: 3vh;
  right: 2.5vw;
  font-size: 4.5vmax;
}

.overlay .infobtn {
  position: absolute;
  bottom: 4.5vh;
  right: 2.5vw;
  width: 3.5vmax;
}

#info {
  width: 80%;
  height: 100%;
  margin-left: 20%;
  position: absolute;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  display: none;
}

.info {
  width: 65%;
  height: 65%;
  z-index: 12;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: all;
  line-height: 5vh;
  background-color: white;
}

.info h1 {
  margin-bottom: 3vw;
  font-size: 2.8vmax;
}

.info p {
  font-size: 2vmax;
}

@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}


/* Titre */

.tableDesMatieres {
  margin-left: 8vw;
  height: 100vh;
}







/* * ACCUEIL * */

.accueil-image {
  margin-left: auto;
  margin-right: 10%;
  max-width: 40%;
  margin-top: 8vh;
  margin-bottom: 12vh;
  max-height: 80vh;
  object-fit: contain;
}

.accueil-text {
  position: absolute;
  bottom: 50px;
  padding-left: 100px;
}

#accueil-titre {
  color: white;
  font-weight: 800;
  font-size: 8vw;
  margin-bottom: -10%;
}

#accueil-nom {
  color: white;
  font-size: 3vw;
  margin-left: 2vw;
}







/* * PRESENTATION * */

.presentationContainer {
  width: 88vw;
  height: 71vh;
  max-width: 260vh;
  max-height: 60vw;
  padding: 6vh 0;
  margin: 0 auto 1% auto;
  display: flex;
  overflow: visible;
}

.presentation {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.presentationVideo {
  position: absolute;
  width: 30vw;
  margin-left: 50vw;
}







/* * C.V. * */

.CVbody {
  justify-content: center;
}

.CVcontainer {
  width: 88vw;
  height: 73vh;
  max-width: 156vh;
  max-height: 41vw;
  margin: min(5%, 8.5vh) auto 0 auto;
  position: relative;
  overflow: visible;
}


/* Texte */

.CV-nom {
  height: 25%;
  margin-left: -0.3vw;
}

.CV h1 {
  font-size: min(5vw, 9vh);
  line-height: 30%;
  letter-spacing: 0.1rem;
}

.CV h2 {
  font-size: min(1.76vw, 3.15vh);
  line-height: 0;
}

.CV h3 {
  font-size: min(1.95vw, 3.5vh);
  margin-bottom: 0;
  letter-spacing: 0.05rem;
}

.CV h4 {
  font-size: min(1.4vw, 2.5vh);
  transform-origin: right top;
  line-height: 150%;
}

.CV h5 {
  font-size: min(1vw, 1.8vh);
  line-height: 0;
  margin-bottom: 0;
}

.CV p {
  font-size: min(0.82vw, 1.5vh);
  line-height: 170%;
}

.CV h6 {
  font-size: min(1.6vw, 2.8vh);
  line-height: 0;
  text-align: end;
  width: 80%;
}


/* Infos */

.CV-infos {
  width: 60%;
  height: 27%;
  transform: rotate(90deg) translate(0, -92%);
  transform-origin: left top;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


/* Compétences */

.CVcompet {
  width: 100%;
  height: 78%;
  padding: 0 0 0 1.1vw ;
  border-style: solid none none solid;
  border-width: min(0.4vw, 0.8vh);
  box-sizing: border-box;
}

.CVcompet h5 {
  margin-top: min(1.7vw, 3vh);
}



/* Columns */

.CVcolumns {
  width: 25%;
  height: 100%;
  border-style: none none solid none;
  border-width: min(0.4vw, 0.8vh);
  box-sizing: border-box;
}

.CVcolumnsTitre {
  width: 16%;
  border-style: none solid none none;
  border-width: min(0.4vw, 0.8vh);
  box-sizing: border-box;
}

.CVcolumns h5 {
  margin-top: min(2vw, 0.6vh);
}


/* Logiciels */

.CVlogoBox {
  width: 100%;
  height: 11%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}





/* * PORTFOLIO * */

.portfolioBanner {
  position: absolute;
  z-index: 0;
  left: 0;
  padding: 1.5vw 0;
  overflow: hidden;
  white-space: nowrap;
  background-color: black;
}

.portfolioBannerSalette img {
  margin: 0 -0.3vw 0 0;
  height: 3vw;
}

.portfolioBannerAutres img {
  margin: 0 -0.2vw 0 0;
  height: 3vw;
}

.topBannerSalette {
  top: 0;
  padding-top: 15vh;
  animation: bannerMoveLeft 22s linear infinite;
}

.bottomBannerSalette {
  bottom: 0;
  padding-bottom: 15vh;
  animation: bannerMoveRight 22s linear infinite;
}

.topBannerAutres {
  top: 0;
  padding-top: 15vh;
  animation: bannerMoveLeft 20s linear infinite;
}

.bottomBannerAutres {
  bottom: 0;
  padding-bottom: 15vh;
  animation: bannerMoveRight 20s linear infinite;
}

@keyframes bannerMoveRight {
  0% {
      transform: translate(0, 0);
  }
  100% {
      transform: translate(-50%, 0);
  }
}

@keyframes bannerMoveLeft {
  0% {
      transform: translate(-50%, 0);
  }
  100% {
      transform: translate(0, 0);
  }
}










/* * FIN * */

.fin {
  max-width: 100vw;
}








/* * PROJETS * */


/* Texte */

.projetsTitreWhite {
  color: white;
  font-size: min(2.6vw, 7.7vh);
}

.projetsTitreBlack {
  color: Black;
  font-size: min(2.6vw, 7.7vh);
}

.projetsDescWhite {
  color: white;
  font-size: min(1.3vw, 3.8vh);
}

.projetsDescBlack {
  color: Black;
  font-size: min(1.3vw, 3.8vh);
}

.projetsDescBold {
  font-weight: 900;
}


/* Logiciels */

.logiciels {
  height: min(3.4vw, 10vh);
}

.logicielsBlender {
  width: min(4vw, 11.8vh);
}





/* Container */

.bodyProjet {
  justify-content: center;
}

.projetContainer {
  width: 88vw;
  height: 83vh;
  max-width: 260vh;
  max-height: 60vw;
  margin: 0 auto 1% auto;
  display: flex;
  overflow: visible;


  /* ------------------------------------------------------------------- */

  /* background-color: gray; */

  /* background: rgba(128, 128, 128, 0.5); */

}

.projetContainerHorizontal {
  flex-direction: row;
}

.projetContainerVertical {
  flex-direction: column;
}









/* PROJETS SALETTE */


 /* Projet  S01 - Parkinson */

 .projetSParkVisuel {
  width: 60%;
  background-image: url(images/projetsSalette/parkinson.jpg);
  background-position: right;
  background-size: cover;
  border-style: solid;
  border-color: white;
  border-width: 0.4vw;
}

.projetSParkText {
  width: 40%;
  margin-top: -1.7vw;
  padding-left: 2vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-style: none none solid none;
  border-color: white;
  border-width: 0.4vw;
 }
 


 
 .projetSParkGallery {
  max-width: 92%;
  height: 100%;
  object-fit: contain;
  object-position: right;
 }

 .projetSParkNav {
  max-width: 12%;
  padding-left: 2vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
 }





 .ParkButtonState {
  display: none
}
 
 .ParkButton {
  width: 3vw;
  height: 3vw;
  margin: 1vw;
  background-image: url(images/projetsSalette/parkButtonEmpty.svg);
  background-repeat: no-repeat;
  cursor: pointer;
}
 
 .ParkButton:hover {
  background-image: url(images/projetsSalette/parkButtonFull.svg);
}
 
 .ParkButtonState:checked + .ParkButton {
  background-image: url(images/projetsSalette/parkButtonFull.svg);
}






 /* Projet  S02 - Fourmis */

.projetSFourmisVisuel {
  max-width: 69vw;
  max-height: 100vh;
}

.projetSFourmisText {
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
 }






 /* Projet  S03 - Parfum */

.projetSParfumVisuel {
  width: 50%;
  height: 100%;
  padding-left: 10vw;
  margin-right: 2.8vw;
  background-image: url(images/projetsSalette/parfum.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
}

.projetSParfumText {
  width: 50%;
  padding-right: 10vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
 }






 /* Projet  S04 - FFA */

.projetSFFAVisuel {
  width: 100%;
  height: 100%;
  margin-right: 1.8vw;
  background-image: url(images/projetsSalette/ffaAffiche.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.projetSFFAText {
  width: 45%;
  margin-top: -1.7vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
 }






 /* Projet  S05 - Presenta */

.projetSPresentaVisuel {
  width: 45%;
  height: 100%;
  background-image: url(images/projetsSalette/presentaPoster.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right top;
}

.projetPresentaLettres {
  height: 40%;
  background-image: url(images/projetsSalette/presentaLettres.jpg);
  background-repeat: no-repeat;
  background-size: contain;
}






 /* Projet  S06 - L'essentiel */

.projetSEssentielVisuel {
  width: 50%;
  height: 100%;
  background-image: url(images/projetsSalette/essentielLivre.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.projetSEssentielText {
  margin-bottom: -1.6vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
 }

 .projetSEssentielPictos {
  padding: 5vw;
  width: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url(images/projetsSalette/essentielPictos.jpg);
  background-origin: content-box;
 }

 .projetSEssentielLogo {
  padding: 8vw;
  width: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url(images/projetsSalette/essentielLogo.png);
  background-origin: content-box;
  background-color: #4eaeca;
 }






 /* Projet  S07 - Blade Runner */

.projetSBladeVisuel {
  width: 55%;
  height: 100%;
  padding-left: 10vw;
  margin-right: 2.8vw;
  background-image: url(images/projetsSalette/bladeRunner.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.projetSBladeText {
  width: 45%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}






 /* Projet  S08 - Café */

.projetSCafeVisuel {
  height: 80%;
  background-image: url(images/projetsSalette/cafeEmballages.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
}

.projetSCafeText {
  height: 20%;
  margin-bottom: -1.6vw;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.projetSCafe01 {
  padding-top: 5vw;
  padding-bottom: 5vw;
  width: 45%;
  margin-right: 5%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
  background-image: url(images/projetsSalette/cafe01.jpg);
  background-origin: content-box;
}

.projetSCafe02 {
  width: 45%;
  margin-left: 5%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left;
  background-image: url(images/projetsSalette/cafe02.jpg);
}






/* Projet  S09 - Potager urbain */

.projetSPotagerVisuel {
  max-width: 100%;
  max-height: 120%;
  position: absolute;
  bottom: 0;
  right: 0;
}

.projetSPotagerText {
  width: 30%;
  display: flex;
  flex-direction: column;
}






/* Projet  S10 - FIDE */

#projetSFIDE {
  background-image: url(images/projetsSalette/fideCouverture.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
}

.projetSFIDEText {
  width: 100%;
  display: flex;
  justify-content: space-between;
  z-index: 2;
}

.projetSFIDEGallery {
  background-image: url(images/projetsSalette/FIDEp1.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.FIDEButtonState {
  display: none
}
 
.FIDEButton {
  width: 3vw;
  height: 3vw;
  margin: 0 2vw;
  background-image: url(images/projetsSalette/fideButtonEmpty.svg);
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
}
 
.FIDEButton:hover {
  background-image: url(images/projetsSalette/fideButtonFull.svg);
}
 
.FIDEButtonState:checked + .FIDEButton {
  background-image: url(images/projetsSalette/fideButtonFull.svg);
}

.FIDElogo {
  width: 100%;
  height: 65%;
  background-image: url(images/projetsSalette/fideLogo.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}






/* Projet  S11 - Animation */

.projetSAnimationVisuel {
  height: 83%;
  display: flex;
  justify-content: center;
}

.projetSAnimationText {
  height: 17%;
  margin-bottom: -1.6vw;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}






/* Projet  S12 - CD */

.projetSCDVisuel {
  height: 80%;
  background-image: url(images/projetsSalette/disc.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left bottom;
}











/* PROJETS AUTRES */


 /* Projet  A01 - Exercices */

.projetA01-1 {
  width: 80%;
  max-height: 100%;
  background-image: url(images/projetsAutres/lampadaire.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left bottom;
}

.projetA01-2 {
  width: 52%;
  padding-bottom: 6%;
  background-image: url(images/projetsAutres/baleine.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  background-origin: content-box;
}

.projetA01-3 {
  width: 43%;
  background-image: url(images/projetsAutres/pandemie.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
}

.projetA01-4 {
  background-image: url(images/projetsAutres/sketch1.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.projetA01-5 {
  background-image: url(images/projetsAutres/sketch2.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;
}






 /* Projet  A02 - Famille */

.projetA02-1 {
  height: 70%;
  background-image: url(images/projetsAutres/noel.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left bottom;
}

.projetA02-2 {
  width: 45%;
  background-image: url(images/projetsAutres/spider.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.projetAalbum {
  width: 100%;
  height: 122%;
  margin-top: -4%;
  margin-left: -4%;
  background-image: url(images/projetsAutres/album.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
}

.projetAchats {
  background-image: url(images/projetsAutres/chats.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}






 /* Projet  A03 - École */

.projetAposter1 {
  width: 41%;
  background-image: url(images/projetsAutres/texas.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;
}

.projetAposter2 {
  width: 41%;
  background-image: url(images/projetsAutres/humpty.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left bottom;
}

.projetA03 {
  background-image: url(images/projetsAutres/ecole.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.projetAbal1 {
  background-image: url(images/projetsAutres/balBillet.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left top;
}

.projetAbal2 {
  width: 45%;
  background-image: url(images/projetsAutres/balPoster.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right top;
}






 /* Projet  A04 - Plans */

.projetA04 {
  justify-content: space-between;
}

.plansDesc {
  width: 24.5%;
  margin: 0;
  padding: 2% 0 2% 2%;
  z-index: 1;
  background-color: white;
}


/* Buttons */

#buttons {
  z-index: 2;
  display: flex;
  justify-content: space-between;
}

.plansButton {
  width: min(3.4vw, 8.82vh);
  height: min(1.7vw, 5vh);
  border: none;
  margin: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: min(0.1vw, 0.29vh);
  padding-left: 0;

  font-size: min(1.1vw, 3.23vh);
  letter-spacing: 0.04vw;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: "Averia Libre", system-ui;
  font-weight: 700;
  font-style: normal;
  font-kerning: normal;
  
  background-color: white;
  color: black;
  cursor: pointer;
  border: 2px solid darkgrey;
  border-radius: min(0.5vw, 1.5vh);
  box-shadow: inset 0 0 0 0 #333;
  -webkit-transition: ease-out 0.2s;
  -moz-transition: ease-out 0.2s;
  transition: ease-out 0.2s;
}

.plansButton:hover {
  background-color: #222;
  color: white;
}

.active {
  background-color: #666;
  color: white;
}
  

/* Zoom */

.zoom_outer {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}

#zoom {
  width: 100%;
  height: 100%;
  transform-origin: 0px 0px;
  transform: scale(1) translate(0px, 0px);
  cursor: grab;
  display: flex;
  justify-content: center;
}

div#zoom > img {
  width: 100%;
  height: auto;
}






 /* Projet  A05 - Building */

.projetAbuilding {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.buildingDesc {
  position: absolute;
  width: 28%;
  margin: 0;
  padding: 0 0 2% 0;
  z-index: 1;
  background-color: white;
}