@charset "UTF-8";
/* CSS Document */

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}


.home {
  margin: none;
  padding: none;
  overflow: auto; 
}

/* fonts */
/* fonts */

@font-face {
  font-family:blacknormal;
  src: url(fonts/neue-haas-grotesk/NeueHaasDisplayBlack.ttf);}
  @font-face {
    font-family:blackitalic;
  src: url(fonts/neue-haas-grotesk/NeueHaasDisplayBlackItalic.ttf);}
  @font-face {
    font-family:boldnormal;
  src: url(fonts/neue-haas-grotesk/NeueHaasDisplayBold.ttf);}
  @font-face {
    font-family:bolditalic;
  src: url(fonts/neue-haas-grotesk/NeueHaasDisplayBoldItalic.ttf);}
  @font-face {
    font-family:lightnormal;
  src: url(fonts/neue-haas-grotesk/NeueHaasDisplayLight.ttf);}
  @font-face {
    font-family:lightitalic;
  src: url(fonts/neue-haas-grotesk/NeueHaasDisplayLightItalic.ttf);}
  @font-face {
    font-family:mediumnormal;
  src: url(fonts/neue-haas-grotesk/NeueHaasDisplayMedium.ttf);}
  @font-face {
    font-family:mediumitalic;
  src: url(fonts/neue-haas-grotesk/NeueHaasDisplayMediumItalic.ttf);}
  @font-face {
  font-family:romannormal;
  src: url(fonts/neue-haas-grotesk/NeueHaasDisplayRoman.ttf);}
  @font-face {
    font-family:romanitalic;
  src: url(fonts/neue-haas-grotesk/NeueHaasDisplayRomanItalic.ttf);}
 
/* html+scrollbar */
/* html+scrollbar */

html {  
 text-decoration: none;
}

::-webkit-scrollbar {
  display: none;
}

@supports (scrollbar-width: none) {
  /* Firefox */
  * {
    scrollbar-width: none; /* Masque la barre de défilement */
    -ms-overflow-style: none; /* Masque pour Internet Explorer 10+ */
  }
}

/* videoindex */
/* videoindex */

.video-background {
  position: fixed; /* Fixe la vidéo en arrière-plan */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* Met la vidéo en dessous du texte */
  overflow: hidden; /* Cache les débordements */
  cursor: url('plus/click.png'), pointer;
}

.video-player {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Assure que la vidéo couvre tout l'écran */
}

/* menu */
/* menu */

.menu {
  text-align: left; /* Assure que tout contenu enfant est aligné à gauche */
  margin: 0; /* Supprime toute marge autour du menu */
  padding: 0; /* Supprime tout espacement intérieur */
  top: 1.5rem;
  left: 1rem;
  font-size: 1rem; /* Taille du texte */
  font-family: 'blacknormal', sans-serif;

  color:  rgb(0, 0, 0);
  box-decoration-break: clone; /* Permet de séparer le fond sur plusieurs lignes */
  -webkit-box-decoration-break: clone; /* Compatibilité avec WebKit */
  width: fit-content; /* Ajuste la largeur en fonction du contenu */
  position: fixed;
  z-index: 1000;
}

.menu ul {
  display: flex; /* Aligne les <li> horizontalement */
  list-style: none; /* Supprime les puces */
  margin: 0; /* Supprime la marge par défaut */
  padding: 0; /* Supprime les espacements internes */
}

.menu li {
  position: relative;
  display: inline-block; /* Les <li> restent sur la même ligne */
  text-align: left; /* Aligne le texte dans chaque <li> à gauche */
  
  margin-right: 1rem; /* Espacement horizontal entre les éléments */
  cursor: url('plus/index.png'), pointer !important;}

.menu li:last-child {
  margin-right: 0; /* Supprime la marge à droite du dernier élément */
}

.menu li a {
  text-decoration: none; /* Supprime le soulignement */
  color: inherit; /* Utilise la couleur héritée de la classe parent */
  display: inline-block; /* Le lien est un bloc cliquable */
  /*mix-blend-mode: difference;*/
  cursor: url('plus/index.png'), pointer !important;
}

li a:link, li a:visited {
  color: inherit;
  /*mix-blend-mode: difference;*/
  text-decoration: none;
}

/*presentation*/
/*presentation*/

#presentation {
  font-size: 0.6rem; /* Taille du texte */
  font-family: 'mediumnormal', sans-serif; 
  position: fixed; /* Fixe l'élément à la fenêtre */
  top: 4rem;
  left: 1rem;
  width: 90vw;  
  max-width: 23rem;
}

#presentation p  {
  display: inline; /* Garder le texte inline */
  font-family: 'mediumnormal', sans-serif;
  color: rgb(170, 170, 170); /* Couleur du texte */
  box-decoration-break: clone; /* Permet de séparer le fond sur plusieurs lignes */
  -webkit-box-decoration-break: clone; /* Compatibilité avec WebKit */
}

#presentation ul {
  font-size: .6rem; /* Taille du texte */
  font-family: 'blacknormal', sans-serif;  
  display: inline; /* Afficher la liste en ligne */
  padding: 0; /* Supprimer le padding par défaut */
}

#presentation li {
  font-size: .8rem; /* Taille du texte */
  font-family: 'blacknormal', sans-serif;  
  display: inline; /* Les éléments de la liste se mettront en ligne */
  list-style: none;
}

#presentation p a {
  text-decoration: none; /* Enlever le soulignement des liens */
  color: inherit; /* Hérite de la couleur du texte */
  font-family: 'blacknormal', sans-serif;  
  cursor: url('plus/contact.png'),pointer !important;
  color: rgb(0, 0, 0);
}

/*slider*/
/*slider*/

#horizontal-scroll-grid {
  display: flex; /* Utilisation de flexbox pour que les sections s'affichent horizontalement */
  overflow-x: auto; /* Permet le défilement horizontal */
  gap: 1rem; /* Espacement entre les sections */
  padding-left: 1rem; 
  padding-right: 1rem; 

  height: 37vh; /* Hauteur du conteneur */
  scroll-snap-type: x mandatory; /* Pour s'arrêter sur chaque image si souhaité */
  margin-top: /*34vh*/ 18rem;
  scrollbar-width: none; /* Firefox : Masque la barre de défilement */
}

#horizontal-scroll-grid::-webkit-scrollbar {
  display: none; /* Masquer la barre de défilement (Chrome/Safari) */
}

/*section*/
/*section*/

.project {
  height: 100%;
  display: inline-block;
  flex-direction: column;
  text-align: right;
  justify-content: flex-start;
  box-sizing: border-box;
  line-height: .7em;
}

.media {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.media img,
.media video {
  width: auto;
  height: auto;
  max-height: 90%;
  object-fit: contain;
  display: block;
  cursor: url('plus/click.png'), pointer;
}

.project a {
  height: 100%;
  text-decoration: none;
  color: inherit;
  cursor: url('plus/click.png'), pointer;
}

.project p {
  font-size: 0.55rem;
  font-family: 'blacknormal', sans-serif;
  display: inline;

}

.project p span {
  font-size: 0.55rem;
  font-family: 'mediumnormal', sans-serif;
  display: inline;
}

/*script*/
/*script*/

#footer {
  position: fixed;
  bottom: 1rem;
  left: 1rem;

  display: flex; /* Utilisation de flexbox pour aligner les éléments */
  flex-direction: row-reverse; /* Inverse l'ordre pour avoir #time à droite */
  justify-content: space-between; /* Assure une distribution équidistante */
  
  color: rgb(170, 170, 170);
  box-decoration-break: clone; /* Permet de séparer le fond sur plusieurs lignes */
  -webkit-box-decoration-break: clone; /* Compatibilité avec WebKit */

  text-decoration: none;
color:inherit;
}
/*
#footer a{
  text-decoration: none;
  color: rgb(130, 130, 130);
  padding-right:0.2rem;
  gap: 0.1vw;
}*/


#time{
  font-size: .8rem; 
  font-family: 'mediumnormal', sans-serif;  
  padding: 0.1rem 0.2rem;
  color: rgb(170, 170, 170);

}


#uiu { 
  position: fixed; 
  left: 8.5rem; 
  bottom: .5rem; 
  padding-right:.2rem; 
}

#uiu .logo { 
  display: block; 
  width: 65px; 
  height: auto; 
}

#uiu a { 
  display: inline-block; 
  cursor: url('plus/click.png'), pointer !important;
} 







.next {
width:10rem;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: .8rem; 
  font-family: 'mediumnormal', sans-serif;
  color: white;
  mix-blend-mode: difference;
  box-decoration-break: clone; /* Permet de séparer le fond sur plusieurs lignes */
  -webkit-box-decoration-break: clone; /* Compatibilité avec WebKit */
   position: fixed;
  z-index: 1000;
  padding: 0.1rem 0.2rem;
}


.next ul {
 justify-content: center;
  display: flex;
  gap: 1.5rem; 
  list-style: none;
  margin: 0;
  padding: 0;
  cursor: url('plus/change.png'), pointer !important;
}

.next li {
  position: relative;
  display: inline-block; 
  gap: 0.8rem; 
  list-style: none;
  margin: 0;
  padding: 0;
  cursor: url('plus/change.png'), pointer !important;
}

.next li a {
  cursor: url('plus/change.png'), pointer !important;
}




/*index*//*index*//*index*//*index*//*index*//*index*//*index*//*index*//*index*/
/*index*//*index*//*index*//*index*//*index*//*index*//*index*//*index*//*index*/
/*index*//*index*//*index*//*index*//*index*//*index*//*index*//*index*//*index*/
/*index*//*index*//*index*//*index*//*index*//*index*//*index*//*index*//*index*/

/*menuindex*/
/*menuindex*/

.menuindex {
  text-align: left; /* Assure que tout contenu enfant est aligné à gauche */
  margin: 0; /* Supprime toute marge autour du menu */
  padding: 0; /* Supprime tout espacement intérieur */
  top: 1.5rem;
  left: 1rem;
  font-size: 1rem; /* Taille du texte */
  font-family: 'blacknormal', sans-serif;
  
  position: absolute;
  /* background-color: rgb(208, 208, 208); Couleur du surlignage */
  color:rgb(242, 255, 0);  /* Couleur du texte */
  box-decoration-break: clone; /* Permet de séparer le fond sur plusieurs lignes */
  -webkit-box-decoration-break: clone; /* Compatibilité avec WebKit */
  width: fit-content; /* Ajuste la largeur en fonction du contenu */
  position: fixed;
  z-index: 1000;

  text-shadow:
  -0.5px -0.5px 0 black,
  0px -0.5px 0 black,
  0.5px -0.5px 0 black,
  -0.5px 0px 0 black,
  0.5px 0px 0 black,
  -0.5px 0.5px 0 black,
  0px 0.5px 0 black,
  0.5px 0.5px 0 black;
}

.menuindex ul {
  display: flex; /* Aligne les <li> horizontalement */
  list-style: none; /* Supprime les puces */
  margin: 0; /* Supprime la marge par défaut */
  padding: 0; /* Supprime les espacements internes */
}

.menuindex li {
  position: relative;
  display: inline-block; /* Les <li> restent sur la même ligne */
  text-align: left; /* Aligne le texte dans chaque <li> à gauche */
  margin-right: 1rem; /* Espacement horizontal entre les éléments */
}

.menuindex li:last-child {
  margin-right: 0; /* Supprime la marge à droite du dernier élément */
}

.menuindex li a {
  text-decoration: none; /* Supprime le soulignement */
  color: inherit; /* Utilise la couleur héritée de la classe parent */
  display: inline-block; /* Le lien est un bloc cliquable */
  /*mix-blend-mode: difference;*/
}

li a:link, li a:visited {
  color: inherit;
  /*mix-blend-mode: difference;*/
  text-decoration: none;
}

/*presentationindex*/
/*presentationindex*/

#presentationindex {
  font-family: 'mediumnormal', sans-serif;
  position: fixed; /* Fixe l'élément à la fenêtre */
 
  width: 25vw;
  color: rgb(242, 255, 0);  
  text-shadow:
  -0.5px -0.5px 0 black,
  0px -0.5px 0 black,
  0.5px -0.5px 0 black,
  -0.5px 0px 0 black,
  0.5px 0px 0 black,
  -0.5px 0.5px 0 black,
  0px 0.5px 0 black,
  0.5px 0.5px 0 black;
  
  z-index: 10; /* Met le texte au-dessus de la vidéo */

  top: 4rem;
  left: 1rem;
  width: 90vw;  
  max-width: 23rem;

  line-height: 1;
}

#presentationindex p {
  display: inline; /* Garder le texte inline */
  font-family: 'mediumnormal', sans-serif;
}

#presentationindex ul {
  font-family: 'blacknormal', sans-serif;
  display: inline; /* Affiche la liste en ligne */
  padding: 0; /* Supprime le padding par défaut */
}

#presentationindex li {
  font-size: .8rem; /* Taille du texte */
  font-family: 'blacknormal', sans-serif;
  display: inline; /* Les éléments de la liste se mettront en ligne */
  list-style: none;
}

#presentationindex p a {
  text-decoration: none; /* Enlève le soulignement des liens */
  color: inherit; /* Hérite de la couleur du texte */
  font-family: 'blacknormal', sans-serif;
  cursor: url('plus/contact.png'),pointer !important;
}


/*responsive*//*responsive*//*responsive*//*responsive*//*responsive*//*responsive*//*responsive*//*responsive*//*responsive*/
/*responsive*//*responsive*//*responsive*//*responsive*//*responsive*//*responsive*//*responsive*//*responsive*//*responsive*/
/*responsive*//*responsive*//*responsive*//*responsive*//*responsive*//*responsive*//*responsive*//*responsive*//*responsive*/
/*responsive*//*responsive*//*responsive*//*responsive*//*responsive*//*responsive*//*responsive*//*responsive*//*responsive*/

/* vertical-scroll projets */
/* vertical-scroll projets */
@media screen and (max-width: 800px) {
  #horizontal-scroll-grid {
    flex-direction: column; /* Change la direction de flexbox pour un affichage vertical */
    overflow-x: hidden; /* Désactive le défilement horizontal */
    overflow-y: auto; /* Active le défilement vertical */
    height: auto; /* Ajuste la hauteur pour permettre le défilement vertical */
    scroll-snap-type: y mandatory; /* Pour s'arrêter sur chaque section verticalement */
    margin-top: /*34vh*/ 0rem;
    gap: 1vh; /* Espacement entre les sections */
    padding-left: 0rem; 
    padding-right: 0rem; 
  }

  .project {
    width: 100%; /* Les sections prennent toute la largeur disponible */
    height: auto; /* Ajuste la hauteur pour permettre le défilement vertical */
  }

  .media{
    width: 100%; /* Les images prennent toute la largeur disponible */
    height: auto; /* Ajuste la hauteur pour permettre le défilement vertical */
  }

  .media img,
  .media video {
    width: 100%; /* Les images prennent toute la largeur disponible */
    height: auto; /* Ajuste la hauteur pour permettre le défilement vertical */
  }

 
}

/* vertical-scroll presentation */
/* vertical-scroll presentation */

@media screen and (max-width: 800px) {
  .menu {
    position: fixed;
   
   
    width: 100vw;
    height: 7vh;

    z-index: 10;
  
    padding-top: 1.5rem;
    line-height: none;

  }
  .menu li{
    color: rgb(242, 255, 0);  
    text-shadow:
    -0.5px -0.5px 0 black,
    0px -0.5px 0 black,
    0.5px -0.5px 0 black,
    -0.5px 0px 0 black,
    0.5px 0px 0 black,
    -0.5px 0.5px 0 black,
    0px 0.5px 0 black,
    0.5px 0.5px 0 black;


  }


  #presentation {
    position: fixed;

  
    height: 7vh;

    z-index: 10;
  
    padding-top: 1.5rem;
  }

  #presentation p {
    color: rgb(242, 255, 0);  
    text-shadow:
    -0.5px -0.5px 0 black,
    0px -0.5px 0 black,
    0.5px -0.5px 0 black,
    -0.5px 0px 0 black,
    0.5px 0px 0 black,
    -0.5px 0.5px 0 black,
    0px 0.5px 0 black,
    0.5px 0.5px 0 black;

  }


  #presentation li {
    position: fixed;
    top: 4rem;
    left: 1rem;
    width: 90vw;  
    max-width: 23rem;
  }

  #presentation li a{
    color: rgb(242, 255, 0);  
    text-shadow:
    -0.5px -0.5px 0 black,
    0px -0.5px 0 black,
    0.5px -0.5px 0 black,
    -0.5px 0px 0 black,
    0.5px 0px 0 black,
    -0.5px 0.5px 0 black,
    0px 0.5px 0 black,
    0.5px 0.5px 0 black;
  }

  .menu {
    top: 0;
  }

  .project p {
    font-size: 0.7rem; /* Taille du texte */
    font-family: 'blacknormal', sans-serif;
    display: inline;
    padding: 2px 2px;
  }
  
  .project p span{
    font-size: 0.7rem; /* Taille du texte */
    font-family: 'mediumnormal', sans-serif;  


  }
  #time{
    color: rgb(242, 255, 0);  
    text-shadow:
    -0.5px -0.5px 0 black,
    0px -0.5px 0 black,
    0.5px -0.5px 0 black,
    -0.5px 0px 0 black,
    0.5px 0px 0 black,
    -0.5px 0.5px 0 black,
    0px 0.5px 0 black,
    0.5px 0.5px 0 black;
  }
}




/*projets*//*projets*//*projets*//*projets*//*projets*//*projets*//*projets*/
/*projets*//*projets*//*projets*//*projets*//*projets*//*projets*//*projets*/
/*projets*//*projets*//*projets*//*projets*//*projets*//*projets*//*projets*/
/*projets*//*projets*//*projets*//*projets*//*projets*//*projets*//*projets*/


#horizontal-scroll-grid-projets {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  height: 100vh;
  width: auto;
}

.sectionprojets {

  height: 100vh;
  position: relative;
}

.sectionprojets img,
.sectionprojets video {
  width: auto;
  height: 100vh;
  object-fit: cover;
  display: block;
}






@media screen and (max-width: 800px) {
  html, body {
    overflow: auto;
    height: auto;
  }

  #horizontal-scroll-grid-projets {
    display: block; 
    width: 100vw;
    height: auto;
    overflow: visible;
  }

  .sectionprojets {
    width: 100vw;
    height: auto;
  }

  .sectionprojets img,
  .sectionprojets video {
    width: 100vw;
    height: auto;
    object-fit: cover;
  }
}
/* menuprojets */
/* menuprojets */

.menu-projets {
  text-align: left; /* Assure que tout contenu enfant est aligné à gauche */
  margin: 0; /* Supprime toute marge autour du menu */
  padding: 0; /* Supprime tout espacement intérieur */
  top: 1.5rem;
  left: 1rem;
  font-size: 1rem; /* Taille du texte */
  font-family: 'blacknormal', sans-serif;
  box-decoration-break: clone; /* Permet de séparer le fond sur plusieurs lignes */
  -webkit-box-decoration-break: clone; /* Compatibilité avec WebKit */
  width: fit-content; /* Ajuste la largeur en fonction du contenu */
  position: fixed;
  z-index: 1000;
 
}

.menu-projets ul {
  display: flex; /* Aligne les <li> horizontalement */
  list-style: none; /* Supprime les puces */
  margin: 0; /* Supprime la marge par défaut */
  padding: 0; /* Supprime les espacements internes */
}

.menu-projets li {
  position: relative;
  display: inline-block; /* Les <li> restent sur la même ligne */
  text-align: left; /* Aligne le texte dans chaque <li> à gauche */
  color: rgb(242, 255, 0);  
  text-shadow:
  -0.5px -0.5px 0 black,
  0px -0.5px 0 black,
  0.5px -0.5px 0 black,
  -0.5px 0px 0 black,
  0.5px 0px 0 black,
  -0.5px 0.5px 0 black,
  0px 0.5px 0 black,
  0.5px 0.5px 0 black;
    margin-right: 1rem; /* Espacement horizontal entre les éléments */
  cursor: url('plus/home.png'), pointer !important;
}

.menu-projets li:last-child {
  margin-right: 0; /* Supprime la marge à droite du dernier élément */
}

.menu-projets li a {
  text-decoration: none; /* Supprime le soulignement */
  color: inherit; /* Utilise la couleur héritée de la classe parent */
  display: inline-block; /* Le lien est un bloc cliquable */
  cursor: url('plus/home.png'), pointer !important;}

li a:link, li a:visited {
  color: inherit;
  /*mix-blend-mode: difference;*/
  text-decoration: none;
}

/*legendes-projets*/
/*legendes-projets*/

#legendes-projets {
  font-size: 0.8rem; /* Taille du texte */
  font-family: 'mediumnormal', sans-serif; 
  position: fixed; /* Fixe l'élément à la fenêtre */
  top: 4rem;
  left: 1rem;
  width: 90vw;  
  max-width: 23rem;
  z-index: 10;
}

#legendes-projets p  {
  display: inline; /* Garder le texte inline */
  font-family: 'mediumnormal', sans-serif;
 
  color: rgb(242, 255, 0);  
  text-shadow:
  -0.5px -0.5px 0 black,
  0px -0.5px 0 black,
  0.5px -0.5px 0 black,
  -0.5px 0px 0 black,
  0.5px 0px 0 black,
  -0.5px 0.5px 0 black,
  0px 0.5px 0 black,
  0.5px 0.5px 0 black;

  box-decoration-break: clone; /* Permet de séparer le fond sur plusieurs lignes */
  -webkit-box-decoration-break: clone; /* Compatibilité avec WebKit */
}


/*mentionslegales*//*mentionslegales*//*mentionslegales*//*mentionslegales*/
/*mentionslegales*//*mentionslegales*//*mentionslegales*//*mentionslegales*/


#mentionslegales {
  font-size: 0.6rem; /* Taille du texte */
  font-family: 'mediumnormal', sans-serif; 
  position: fixed;
  top: 4rem;
  left: 1rem;
  right: 1rem;
}

#mentionslegales h1  {
  display: inline; /* Garder le texte inline */
  font-size: 0.8rem; /* Taille du texte */

  font-family: 'mediumnormal', sans-serif;
 
  background-color: rgb(236, 236, 236); /* Couleur du surlignage */
  color: rgb(130, 130, 130); /* Couleur du texte */
  padding: 0.2rem 0.2rem;
  box-decoration-break: clone; /* Permet de séparer le fond sur plusieurs lignes */
  -webkit-box-decoration-break: clone; /* Compatibilité avec WebKit */
}

#mentionslegales p  {
  display: inline; /* Garder le texte inline */
  font-family: 'mediumnormal', sans-serif;
 
  background-color: rgb(236, 236, 236); /* Couleur du surlignage */
  color: rgb(130, 130, 130); /* Couleur du texte */
  padding: 0.2rem 0.2rem;
  box-decoration-break: clone; /* Permet de séparer le fond sur plusieurs lignes */
  -webkit-box-decoration-break: clone; /* Compatibilité avec WebKit */
}