/* ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣤⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣼⡄⠀⠀⣰⠀⠀⠀⠀⢀⠀⠀⠀⢠⣶⣄⠀⠀⠀⠟⠁⠀⠀⣤⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢿⣇⠀⢀⣽⡄⠀⠀⠀⣼⡆⠀⠀⢸⡇⢻⡆⠀⠀⣶⠀⠀⢠⣿⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢠⣿⣿⡄⢸⡿⣧⠀⠀⢠⠟⡇⠀⠀⣸⣧⡼⠃⠀⢠⣿⠀⠀⣸⢿⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⣿⠃⢿⣿⡇⢻⡀⠀⣼⣀⣇⠀⠀⣿⠙⣦⠀⠀⢸⣿⠀⢀⣿⣼⣷⡆⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⣿⠀⠘⣿⠀⢸⡇⠈⡿⠉⢿⠀⠀⠿⠀⠘⣧⠀⢸⡿⠀⢸⡏⠁⠿⡄⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠈⠁⠀⠀⠀⠀⠀⠀⠈⠃⠀⢸⠆⠀⠀⠀⠀⠀⠀⠈⠃⠀⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢀⡀⢸⠀⢀⡀⠀⠀⣠⢦⣄⢀⡆⠀⠀⠀⣴⡆⠀⠀⢀⣤⣤⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢀⣹⡛⡗⠉⠀⠀⢰⡏⢸⣟⢸⣿⡄⠀⣰⢿⡇⠀⠀⡿⠐⣨⡇⠀⠀⡀⠀⡆⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠉⠀⡟⠈⠑⠀⠀⣼⣧⡞⠉⣸⠋⣇⢠⡟⢸⡇⠀⢸⣇⣴⠏⠀⠀⠀⠙⡶⢳⠒⠉⠀⠀               ⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠁⠀⠀⠀⠀⣿⣏⠀⠀⣿⠀⢹⣾⠁⠀⣿⠀⣼⣿⣷⠀⠀⠀⠐⠋⢹⠏⠑⠄⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⠙⣧⠀⠏⠀⠀⠁⠀⠀⢻⡄⣿⠈⢿⡆⠀⠀⠀⠀⠘⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠏⠀⠈⠓⠀⠀⠀⠀⠀⠀⠀⠀⠉⠀⠈⢷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
*/

body{
  background-color: #171717;
  height: 100vh; 
}

body, button, div, class, img {
    cursor: none; 
}

/* DIV VIDE POUR LE CURSEUR */
      #vide{
        height: 100%;
        width: 100%;
        display: block;
        position: fixed; 
        z-index: 1;
      }

/* SVG BACKGROUND */ 
    .svgSection {
      position: fixed;
      z-index: -1;
    }

@font-face{
  font-family: "esphimere";
  src: url("font/esphimere.otf");
}

/* CURSEUR : PERSONNALISATION */ 
    .cursor-custom {
        position: fixed;
        top: 0;
        left: 0;
        width: 15px;
        height: 15px;
        pointer-events: none;
        z-index: 10000;
        transform: translate(-50%, -50%);
        transition: transform 0.2s ease, background-color 0.2s ease;
        border-radius: 50%;
        background-color: #D7C9AE;
    }


/*BARRE VERTICALE ET HORIZONTALE*/
        #uneH{
          background-color: rgb(181, 159, 159);
          top: 10vh;
          position: fixed; 
          display: inline-block;
          width: 100vw; 
          height: 1px;
          opacity: 0.2;
        }

        #deuxH{
          background-color:rgb(181, 159, 159);
          top: 55vh;
          position: fixed;
          display: inline-block; 
          width: 500vw; 
          height: 1px;
          opacity: 0.2;
        }

        #troisH{
          background-color: rgb(181, 159, 159);
          top: 90vh;
          position: fixed;
          display: inline-block; 
          width: 500vw; 
          height: 1px;
          opacity: 0.2;
        }

        #unV{
          background-color: rgb(181, 159, 159);
          left: 3vw;
          position: fixed;
          display: inline-block; 
          width: 1px; 
          height: 500vw;
          opacity: 0.2;
        }

        #deuxV{
          background-color: rgb(181, 159, 159);
          left: 45vw;
          position: fixed;
          display: inline-block; 
          width: 1px; 
          height: 500vw;
          opacity: 0.2;
        }

        #troisV{
          background-color: rgb(181, 159, 159);
          left: 82vw;
          position: fixed;
          display: inline-block; 
          width: 1px; 
          height: 500vw;
          opacity: 0.2;
        }

       
/* bouton instagram et youtube */
      #insta, #yt {
        display: inline-block;
        width: 40px; 
        height: 40px;
        position: fixed;
        cursor: pointer;
        z-index: 9998;
        transition: transform 0.3s ease; 
      }

      #insta {
        right: 7vw;
        top: 3vh;
      }
      #insta img {
        width: 100%;
        height: auto;
        display: block;
      }

      #insta img:hover{
        transform: scale(1.2);
      }

      #yt {
        right: 3vw; 
        top: 3vh; 
      }

      #yt img{
        width: 100%;
        height: auto;
        display: block; 
      }

      #yt img:hover {
        transform: scale(1.2);
      }



/*ENTETE*/
      .entete {
        display: flex;
        width: 100%; 
        height: 10vh; 
        position: fixed;
        top: 5vh;
      }

      #theme{
        font-family: "esphimere";
        font-size: 0.6rem;
        display: inline-block;
        margin-left: 14vw;
        top: 1vh;
        letter-spacing: 0.3rem;
        font-weight: bold;
        white-space: nowrap;
        color: #D7C9AE;
        z-index: 999; 
      }



/* MARIA LOGO */ 
      #maria img{
        width: 300px;
        display: inline-block; 
        position: fixed; 
        left: 12vw; 
        top: 16vh; 
        cursor: pointer; 
        z-index: 9999; 
        transition: transform 0.3s ease; 
      }

      #maria img:hover {
        transform: scale(1.2); 
      }


/* MENU ET BoUTON IMAGE */
.menu {
  position: fixed;
  top: 50vh;          
  left: 15vw;          
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 999; 
}

.menu div img {
  width: 230px;
  display: block;
  cursor: pointer;
}



/* IMAGES DE PRÉSENTATION  */
    .imagePresentation {
      position: fixed;
      pointer-events: none;
      z-index: 1;            
      overflow: hidden;
    }

/* CONTENEUR ET VIDEO */
      #conteneur {
        position: absolute;
        height: 100%;
        overflow: hidden;
      }

/*  DÉTAIL DES ÉLEMENTS IN CONTENEUR  */
      #conteneur img {
        position: absolute;
        top: 0;
        right: 0;               
        width: auto;
        height: 100%;       
        object-fit: contain;   
        object-position: right center; 
        transition: opacity 0.25s ease;
        display: block;
      }

      #conteneur video {
        position: absolute;
        top: 0;
        left: 0;               
        width: 100%;
        height: 100%;       
        object-fit: cover;   
        transition: opacity 0.25s ease;
        display: block;
      }

#conteneur img {
  z-index: 1;
  opacity: 1;
}

#conteneur video {
  z-index: 2;
  opacity: 0;            
}








@media (max-width: 640px) {
      body{
        background-color: #171717;
        height: 90vh; 
      }

      .cursor-custom{
        display: none;
        visibility: hidden; 
      }

/* BOUTON YT ET INSTA */
      #insta, #yt {
        display: inline-block;
        width: 50px; 
        height: 50px;
        position: fixed;
        cursor: none;
        z-index: 9998;
      }

      #insta {
        left: 10vw;
        top: 5vh;
      }
      #insta img {
        width: 100%;
        height: auto;
        display: block;
      }

      #yt {
        right: 10vw; 
        top: 5vh; 
      }

      #yt img{
        width: 100%;
        height: auto;
        display: block; 
      }

/* ENTETE */ 
      .entete {
        display: block;
        width: 100%; 
        height: 20vh; 
        position: fixed;
        bottom: 10vh; 
      }

      #theme{
        visibility: hidden;
        display: none; 
      }

/* LOGO MARIA */ 
      #maria {
        width: 65%;
        height: 100px; 
        display: inline-block;
        position: fixed;
        transform: translateX(-50%);
        bottom: 20%; 
        left: 50%; 
        z-index: 99999;
      }

      #maria img{
        top: 0; 
        left: 0; 
        width: 100%;
        height: auto; 
        display: block; 
      }

/* MENU */
      .menu {
        position: fixed;
        top: 15%;
        left: 50%; 
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        gap: 5px;
        z-index: 999;
        width: 50%;
      }

      .menu div img {
        width: 100%;
        display: block;
        height: auto;
      }

      #videographie img{
        display: none;
      }

/* IMAGE DE BACKGROUND */
    .imagePresentation {
      position: fixed;
      pointer-events: none;
      z-index: 1;            
      overflow: hidden;
    }

      #conteneur {
        position: absolute;
        width: 170vw;
        height: 100vh;
        overflow: hidden;
      }

      #conteneur img {
        position: absolute;
        top: 0;
        left: -75px;               
        width: auto;
        height: 100%;       
        object-fit: contain;   
        object-position: right center;
        display: block;
      }

      #conteneur video {
        display: none;
      }


/* PARTIE VIDEOGRAPHIE NON VISIBLE SUR TÉLÉPHONE */ 
      #videographie img {
        display: none; 
        visibility: hidden;
      }
    }