@font-face {
  font-family: 'monfont';
  src: url('font/MONFONT.woff2') format('woff2'),
    url('font/MONFONT.woff') format('woff'),
    url('font/MONFONT.otf') format('opentype');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'swissintlmedium';
  src: url('font/SuisseIntl-Medium-WebTrial.woff2') format('woff2'),
    url('font/SuisseIntl-Medium-WebTrial.woff') format('woff'),
    url('font/SuisseIntlTrial-Medium.otf') format('opentype');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'swissintlregular';
  src: url('font/SuisseIntl-Regular-WebTrial.woff2') format('woff2'),
    url('font/SuisseIntl-Regular-WebTrial.woff') format('woff'),
    url('font/SuisseIntlTrial-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;



}

html
{
  scroll-behavior: smooth;
}



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.text-content :last-child {
  margin-bottom: 0 !important;
}

body {
  font-size: 18px;
  font-family: 'swissintlregular', Times New Roman, Times, serif;
  color: black;
  line-height: 1.35em;
  /*cursor: url('img/cursor.svg'), auto;*/
  cursor: url(img/cursors/cursor_nothing.svg), cell;
}

.nav-boxes p span
{
  font-family: 'monfont','swissintlregular', sans-serif;
}


#menu-button
{
  cursor: url('img/cursors/cursor_click.svg'), pointer;
}

.nav-boxes
{
  cursor: url('img/cursors/cursor_click.svg'),cell;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.generalContainer {
  display: flex;
  flex-direction: row;
  position: fixed;
  height: 100vh;
  width: 100vw;
  background-color: black;
}


header {
  text-transform: uppercase;
  position: fixed;

}

/*
header {
  z-index: auto;
}
*/

header a:link,
header a:visited,
header a:hover,
header a:active {
  color:white;
  text-decoration: none;
  cursor: url('img/cursors/cursor_click.svg'),pointer;
  
}

header .nav-top-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: fixed;
  background-color: black;
  color:white;
  /*border-bottom: solid white 1px;*/
  width: 100vw;
  z-index: 9000;
  padding: 4px 10px 3px 10px;

  
}


#finder {
  color: white;
  background-color: black;
  border-right: solid 1px white;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100vh;
  width: 300px;
  text-transform: uppercase;
  z-index: 10;

  
  margin-left: -300px;
  /* Déplace l'élément hors de l'écran à gauche */
  transition: margin-left 0.3s ease-in-out;
  /* Utilisez "margin-left" pour l'animation */


}


#finder.active {
  margin-left: 0;
  /* Déplace l'élément à sa position normale */
}

/* start nav phone ---------------- */


@media screen and (max-width: 800px) {
  .generalContainer {
    flex-direction: column;
    width: 100vw;
    height: 100vh;
  }

  header .nav-top-bar
  {
    flex-direction: row-reverse;
    padding: 7px 10px 6px 10px;
  }

  

  

  #finder {
  
    flex-direction: column;
    width: 100vw;
    height: fit-content;
    overflow-y: hidden;
    text-transform: uppercase;
    border-right: none;
    z-index: 0;
    /* Déplace l'élément hors de l'écran à haut */
    transition: margin-top 0.3s ease-in-out;
  
    /* Utilisez "margin-top" pour l'animation */
    margin-left: 0px;

    background-color: none;
  }


  #finder.active {

    margin-top: 0 !important;
    /* Déplace l'élément à sa position normale */

    
  }

/* start - pour gérer la hauteur de la nav en mobil, éclaté */
 
.container-document-flex-column
{
  display: flex;
  flex-direction: column;
}

.files.active
{
  max-height: 20vh !important;
}


.document ul
{
flex: 1;
overflow-y: scroll;
border-bottom: solid 1px white;
}

  
.files li:last-child .nav-boxes:last-child {
  border-bottom: solid 0px white;
}

  
/* end - pour gérer la hauteur de la nav en mobil, éclaté */

/*
header {
  z-index: 13;
}
*/

.contentPlaceHolder {
  margin-top: 0px !important;
  height: auto !important;
  flex: 1;
  display: flex;
  }


.contentInContentPlaceHolder{
  margin-top: 0px !important;
  height: auto!important;
  flex: 1
  }

  .slick-dots
{
  position: relative;
  top: -50px !important;
  
}
  
/* end nav phone ---------------- */

/* start catégories  ---------------- */

.categories-mobile 
{
  display: flex !important;
  flex-direction: column;
  gap: 15px;
  text-transform: uppercase;
  font-family: swissintlregular, sans-serif;
  position: absolute;
  top: 30px;
  right : 10px;
  align-items: end;
}

.categories-mobile p
{

  padding: 7px 10px 6px 11px;
  background-color: black;
  color: white
}


.categories-desktop
{
  display: none !important;
}

.project-explaination
{
  padding: 15px 10px 20px 10px;
  width: 100% !important;

}

/* start slider mobil ---------------- */

#works .sliderContainer
  {
    height: 89% !important;
  }

  header
  {
    z-index: 9000 !important;
  }

  #finder
  {
    z-index: 3;
  }

  .cartouche
  {
    padding: 7px 10px 6px 10px !important;
  }

  #works .sliderContainer:last-child
  {
    margin-bottom: 60px;
  }

  #finder .close-button p {
    padding: 7px 10px 6px 10px !important;
  }
/* end slider mobil ---------------- */
}








header {
  z-index: 1;
}



#finder .close-button {

  display: flex;
  flex-direction: row;
  align-items: start;
  border-bottom: solid 1px white;
  width: 100%;
  justify-content: space-between;
  cursor: url('img/cursors/cursor_click.svg'),pointer;
}

#finder .close-button p {
  padding: 4px 10px 3px 10px;
  cursor: url('img/cursors/cursor_click.svg'),pointer;
}

#finder .close-button a {
  margin: 3px 10px 0px 10px;
  color: white;
  text-decoration: none;

}


#finder ul {
  margin: 0px;
  width: 100%;
}


.nav-boxes {
  padding: 10px;
  border-bottom: solid 1px white;
}



/*
.nav-boxes.active
{
  color: black;
  background-color: #E2E2E2;;
}
*/




#finder a:link, #finder a:visited,#finder a:hover, #finder a:active   {

  color: white;
  text-decoration: none;
}

#finder .files {
  
  max-height: 0px;
  transition: max-height 0.3s ease-in-out;
  flex:1;
  overflow-y: scroll;
  display: flex;
  width: 100%;
}

.files-margin-left
{
  width: 30px;
  border-bottom: solid 1px white;
  border-right: solid 1px white;
  height: auto;
}

.files ul
{
  list-style-type: none;
}





#finder .files.active {
  max-height: 1000px;
}



.contentPlaceHolder {
  /*border: 10px solid red;*/
  height: calc(100% - 27px);
  width: 100%;
  overflow: scroll;
  margin-top: 27px;
  scroll-behavior: smooth;
}

.contentInContentPlaceHolder
{
  /*border: 10px solid pink;*/
  height: 100% ;
  width: 100%;
  overflow: scroll;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

.sliderContainer {
  height: 100%;
  /*width: 100%;*/
  background-color: black;
  position: relative;
  top:0;
  padding-bottom: 28px;

  scroll-snap-align:start;
  scroll-snap-stop: always;
  
}



/*
.sliderContainer2 {
  height: 100%;
  width: 100%;
  background-color: yellow;
  z-index: 1000;
}
*/

/* start slick slider ---------------- */

.slick-dots
{
  position: relative;
  top: -30px;
  
}
.slick-dots li
{
  width: 15px;
  z-index: 8999;
}

.slick-dots li button:before
{
  font-size:10px;
  color: white;
  opacity: .70;
}

.slick-dots li:hover button:before
{
  font-size:13px;
}
.slick-dots li.slick-active:hover button:before
{
  font-size:13px;
}


.slick-dots li.slick-active button:before
{
  color: white;
  opacity: 1;
  font-size:10px;
}

.sliderControl
{
  height:100%;  
  position: absolute;
  top: 0px;
  width: 50%;
  z-index: 1000;

}
.sliderControl.right
{
  right : 0px; 
  cursor: url('img/cursors/cursor_right.svg'), e-resize;
  
}
.sliderControl.left
{
  cursor: url('img/cursors/cursor_left.svg'), w-resize;
 
}



.slick-track, .slick-slider, .slick-list
{
  height: 100%;
  /*width: 100vw;*/
}
.slick-initialized .slick-slide
{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.slick-slide
{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.worksSlider
{
  position: relative;
  top:0;

}

.infosHolder
{
  position: absolute;
  z-index: 2000;
  bottom:0;
  width: 100%;
  display: flex;
  flex-direction: column;

}
.detailsButton
{
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: solid 0px white;
  font-size: 18px;
  align-self: flex-end;
  margin: 10px;
  z-index: 8998;
  cursor: url('img/cursors/cursor_click.svg'),pointer;
  background-color: black ;
  color :white;
  /*
  position: absolute;
  right: 0px;
  bottom:30px;
  */
  
}


.infosDetailsHolder
{
  
  background-color: white;
  max-height: 0px;
  transition: max-height 0.5s ease-in-out;
  overflow-y: hidden;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.infosDetailsHolder.active
{
  max-height: 40vh !important;
}

.categories-desktop
{
  padding: 15px 10px 20px 10px;
  display: flex;
  flex-direction: row;
  gap: 15%;
  width: 30%;
  text-transform: uppercase;
  font-family: swissintlregular, sans-serif;
}

.categories-mobile
{
  display: none ;
}

/*
.categories-mobile 
{
  display: flex !important;
  flex-direction: column;
  gap: 15px;
  text-transform: uppercase;
  font-family: swissintlregular, sans-serif;
  position: absolute;
  top: 30px;
  right : 10px;
  align-items: end;
}

.categories-mobile p
{
  padding: 7px 10px 5px 11px;
  background-color: #E2E2E2;
}
*/

.project-explaination
{
  padding: 15px 10px 20px 10px;
  width: 32%;
}

.cartouche
{
  padding: 4px 10px 3px 10px;
  background-color: black;
  color:white;
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
}
.worksSlider img
{
  width: 100%;
  height: auto;
  align-self: center;
}

#works--journal-photo .worksSlider
{
  background-image: url(img/01.png);
  background-repeat: no-repeat;
  background-position: center;
}

#works--gaffer-fest .worksSlider
{
  background-image: url(img/GAFFER/gaffer_v5.jpg);
  background-repeat: no-repeat;
  background-position: center;
}

#works--po-EAA .worksSlider
{
  background-image: url(img/PO/v7.jpg);
  background-repeat: no-repeat;
  background-position: center;
}

#works--zero-waste .worksSlider
{
  background-color: #39AC50 ;
 
}

.picto-animation-container {
  display: flex;
  height: 90%;
  width: 100%;
  justify-content: center;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.picto-animation {
  width: 60%;
  height: 60%;
  position: relative;
  background-image: url('img/ZERO_WASTE/refuse-b.svg');
  animation-name: frameAnimation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1);
  background-repeat: no-repeat;
  background-position: center;


}


@keyframes frameAnimation {
  0% {
    background-image: url('img/ZERO_WASTE/refuse-b.svg');
  }

  20% {
    background-image: url('img/ZERO_WASTE/reduce-b.svg');
  }

  40% {
    background-image: url('img/ZERO_WASTE/reuse-b.svg');
  }

  60% {
    background-image: url('img/ZERO_WASTE/recycle-b.svg');
  }

  80% {
    background-image: url('img/ZERO_WASTE/rot-b.svg');
  }

  100% {
    background-image: url('img/ZERO_WASTE/refuse-b.svg');
  }
}

/* end slick slider ---------------- */

/*
.onAouverLaNavDoncChange {
  width: calc(100vw - 300px) !important;
}
*/



/* start PAGE ABOUT ---------------- */


#about
{
  background-color:black;
}

#about .sliderContainer {
  background-color: rgba(0,0,0,0);
  
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;
  margin: 0px;
  padding: 0px;
}

.aboutMeText
{
  padding: 10px;
  /*border-top:solid black 1px;*/
  background-color:black;
  color: white;
  z-index: 2;
  height: auto;
  margin: auto;
}

.aboutMeText p 
{
  max-width: 500px;
  
 
}

.aboutMeText a:link, .aboutMeText a:visited, .aboutMeText a:hover, .aboutMeText a:active
{
  color:lightgrey;
}


#fun
{
  height: 100%;
  width: 100vw;
  position: fixed;
  z-index: 0;
}



/* end PAGE ABOUT ---------------- */