@font-face {
  font-family: 'Boxing-Regular';
  src: url('Typo/Boxing-Regular.woff2');
}

@font-face {
  font-family: 'Supreme-Medium';
  src: url('Typo/fonts/Supreme-Medium.woff2');
}

@font-face {
  font-family: 'Spaceal-CCRegular';
  src: url('Typo/Spaceal-CCRegular.woff');
}

@font-face {
  font-family: 'Space Mono';
  src: url('Typo/fonts/SpaceMono-Regular.ttf');
}


/*Structure*/
* {
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
}

html,body{
  min-height: 100vh;
  margin: 0;
  width: auto;
  /*cursor: url("assets/img/cursor/Hand_cursor.cur"), pointer;*/
  overflow-x : hidden;
}

body{
  font-family: 'Spaceal-CCRegular';
  letter-spacing: 0.1em;
  background-color: lightgrey;
  background: rgb(255,255,255);
  background: linear-gradient(0deg, rgba(255,255,255,0) 25%, rgba(255,181,179,0.7329306722689075) 46%, rgba(74,137,255,1) 68%, rgba(255,255,255,1) 91%);
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  padding-top: 100px;
}

/*a{
  cursor:url("assets/img/cursor/Hand_cursor.cur"), pointer;
}*/


/*Header style*/

.header {
  top: 0;
  z-index: 10;
  position: fixed;
  width: 100%;
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  background-color: white;
}

.header a {
  color: black;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.2rem;
  text-decoration: none;
  display: block;
}

.logo img{
width:10rem;
display: block;
}

.logo img:hover{
  filter: drop-shadow(0 0 0.4em #0066ff);
}

.header-nav ul{
    display: flex;
    margin:0;
    padding: 0;
    list-style: none;
}
.header-nav a{
    padding-left: 5rem;
}

.header-nav a:hover{
    /*color:#00bfff;*/
    color: rgba(255,181,179);
    /*filter: blur(1px);*/
    font-weight: bold;
    text-shadow:0 0 0.8em #0066ff;
}





/*Footer style*/


.footer{
  width: 100%;
  background: white;
  margin-top: auto;
  font-size: 1rem;
  position: fixed;
  bottom: 0;
  z-index: 1000;
}

.footer p{
  font-family: 'Space Mono';
  font-size: 0.7rem;
}

.block_footer{
  text-align: center;
}


/*SHOP*/
body .threesixty-wrapper .threesixty{
  height: 80vh;
  width: 100%;
}
.threesixty img{
  max-height: 80vh;
  margin: 0 auto;
  cursor: move;
}

img.threesixty-frame:hover{
  filter:drop-shadow(0 0 1rem #0066ff);

}




 /*stickers*/

 .price_stickers{
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   font-size: 4.5rem;
   font-weight: bold;
   width: 300px;
   height: 300px;
   background: url("assets/img/star_stickers.svg")no-repeat center center;
   background-size: contain;
   right: 20vw;
   top:10vh;
   padding-top: 2rem;
   padding-left: 2rem;
   animation: stickers_rotate 20s infinite;

 }

 @keyframes stickers_rotate {
   100% {transform: rotate(360deg);}
 }


 .price_stickers_content{
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   line-height: 0.7;
 }

 .price_stickers span{
   font-size: 1rem;
 }

img .threesixty-frame{
  position: relative;
}

 .legend{
   position: absolute;
   bottom: 0;
   width: 100%;
   left: 50%; /* Positionnement centr%C3%A9 horizontalement */
   transform: translateX(-50%); /* Correction du centrage */
   text-align: center;
   font-size: 1em;
   letter-spacing: 0.1em;
   font-family: 'Space Mono';
   z-index: 10000;
 }

 .legend a{
   text-decoration: none;
   color: black;
   z-index: 10000;
 }

 .legend a:hover, .contact:hover {
   filter: blur(1px);
   color: rgba(255,181,179);
   font-weight: bold;
   text-shadow: 0 0 0.8em #0066ff;
 }

.prix{
  padding-top: 10px;
  font-size: 1rem;
}

.button{
  background: none;
  border: none;

}
.view-all{
  font-family: "Spaceal-CCRegular";
  position: absolute;
  bottom: 5rem;
  width: 10vw;
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  left: 85vw;
  z-index: 10000;
  background-color: white;
  border: 1px solid black;
  border-radius: 30px;
  animation: pulse 3s infinite;
}

.view-all:hover{
    color:#ff77bd;
    text-shadow:0 0 0.8em rgba(255, 119, 189, 1);
}

@keyframes pulse {
  0% {transform: scale(1);}
  25% {transform: scale(1.1);}
  50% {transform: scale(1);}
  75% {transform: scale(1.1);}
  100% {transform: scale(1);}

}


 /*HOME*/


/*ABOUT*/

.about_cadre{
  width:100vw;
  min-height: 250vh;
  z-index: 1;
  background: url("assets/img/cadre_deco_web.png") no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  }

.about_content{
  margin-top: 100px;
  width: 40vw;
}

.about_content h1{
  text-align: center;
}

.about_text{
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.2em;
  padding: 0.8rem;
}

a.contact{
  font-size: 1rem;
  text-decoration: none;
  color: black;
}



/*SHOP*/


.row {
  display: -ms-flexbox; /* IE 10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE 10 */
  flex-wrap: wrap;
}

/* Create two equal columns that sits next to each other */
.column {
  -ms-flex: 40%; /* IE 10 */
  flex: 40% ;
}

.column_2 {
    position: fixed;
    flex: 10%;
    left: 5rem;
}

.column_3{
  flex: 10%;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 80%;
  background-color: white;
  border: 1px solid black;
  border-radius: 20px;
  margin-bottom: 1rem;
}


.article{
  font-size: 5rem;
  text-align: center;
}

.miniature{
  text-align: center;
  line-height: 1.5rem;
  padding-bottom: 6rem;
}

.boot-name{
  font-size: 1.5rem;
}


/*Dropdown*/

.dropbtn, .dropbtn2  {
  background-color: white;
  font-family: "Spaceal-CCRegular";
  padding: 16px;
  font-size: 16px;
  border: 1px solid black;
  border-radius: 30px;
}

.dropbtn:hover, .dropbtn:focus, .dropbtn2:hover, .dropbtn2:focus {
  color:#ff77bd;
  text-shadow:0 0 0.8em rgba(255, 119, 189, 1);
}

.dropdown, .dropdown2 {
  text-align: center;
  margin-top: 3rem;
}

.dropdown-content, .dropdown-content2 {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  text-align: center;
  margin-left: 0rem;
  border: 1px solid black;
  border-radius: 20px;
}

.dropdown-content a, .dropdown-content2 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover, .dropdown2 a:hover {color: #ff77bd;
  text-shadow:0 0 0.8em rgba(255, 119, 189, 1) ;}



.show, .show2 {display: block;}



/*Distort effect*/


section{
  transition: transform 0.25s;
  will-change: transform;
}


.container-text{
  height: 15vh;
  width: 100%;
  display: flex;
  align-items: center;
}

.txt{
  white-space: nowrap;
  font-size: 4rem;
  animation: Scroll 20s linear infinite;
}

.txt-2{
  color: white;
  -webkit-text-stroke: 1px black;
}

@keyframes Scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }

}


/*swiper project design*/
.swiper-container {
  width: 100%;
  height: auto;
}


.swiper-slide{
  display: flex;
  justify-content: center;
  align-items: center;
}

.threesixty img{
  -webkit-filter: brightness(115%) ;
  filter: brightness(115%) ;
}



/*Accueil effect*/



/*PROJECT INFOS*/

.pure-u-1-2 {
  text-align: center;
}

.pure-u-1-1{
  text-align: center;
}

.pure-u-1-1 .title_project{
  text-align: center;
  margin: 2rem;
  font-size: 5rem;
}

.pure-u-1-2 .info{
  text-align: right;
  margin: 2rem;
  line-height: 1.4;
  font-size: 0.8rem;
}

.pure-u-1-2 .resume_project {
  text-align: left;
  margin: 2rem;
  line-height: 2rem;
  font-size: 1.1rem;
}

.icon_project {
  max-width: 100%;
  height: auto;
  padding: 2rem;
}
.icon_project_2 {
  max-width: 100%;
  height: auto;
  padding: 2rem;
}

.icon_project_3{
  max-width: 100%;
  height: auto;
  padding: 2rem;
}

.video_project{
  max-width: 70rem;
  height: auto;
  padding: 2rem;
}


.subtitle_project, .resume_project, .info, .VR_button{
  font-family: 'Space Mono';
}

.title_project{
  text-transform: uppercase;
}

/*video banner for 3d projects */

.video-banner{
  position: relative;
  width: 100%;
  min-height: 70vh;
  max-height: 100vh;
  overflow: hidden;
  margin-bottom: 2rem;
}

.big_video_project{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto; /* Laisser la hauteur se redimensionner en fonction de la largeur */
  min-height: 100%; /* Assurez-vous que la vid%C3%A9o couvre toute la hauteur du conteneur */
  transform: translate(-50%, -50%);
  object-fit: cover; /* Remplir tout le conteneur sans distorsion */
}

.poster_project{
  max-width: 40rem;
  height: auto;
  padding: 2rem;
}

/* Styles pour le flou et l'opacité */
.autoblur {
    transition: filter 0.2s ease-in-out, opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}


/*Overlay Infos with hover*/


.pure-u-1-3, .pure-u-1-2{
    position: relative;
    transition: background 0.3s ease;
  }

  .hover-info {
    position: absolute;
    font-size: 1.1rem;
    text-align: left;
    font-family: 'Space Mono';
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: black;
    padding: 10px;
    opacity: 0;
    transition: opacity 0.3s ease; /* Animation douce */
  }

  .pure-u-1-3:hover .hover-info,  .pure-u-1-2:hover .hover-info {
    opacity: 1;
  }

  .pure-u-1-3:hover .icon_project.hover, .pure-u-1-2:hover .icon_project_2.hover{
      opacity: 0; /* Faire disparaître complètement la vidéo */
      transition: opacity 0.3s ease;
    }

  .pure-u-1-3:hover .icon_project, .pure-u-1-2:hover .icon_project_2{
      opacity: 1;
  }


/* VR button */

.VR_button{
  decoration: none;
  background:none;
  border: none;
  border-radius: 10% / 50%;
  border: 1px solid black;
  padding: 0.5em;

}

.VR_button a{
  text-decoration: none;
  color: black;
}

.VR_button:hover{
  border: 1px solid #0066ff;
}

.VR_button a:hover{
    /*color:#00bfff;*/
    color: rgba(255,181,179);
    /*filter: blur(1px);*/
    font-weight: bold;
    text-shadow:0 0 0.8em #0066ff;
}



/*HOME*/

/*banderole de texte qui voyage*/
/* Conteneur pour le texte défilant */
.messagedefilant {
    position: absolute;
    bottom: 80%; /* Ajustez selon l'emplacement souhaité */
    left: 0;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    z-index: 3; /* Texte au-dessus de la vidéo */
  }

/* Animation du texte */
.messagedefilant div {
    display: inline-block;
    animation: defilement 30s linear infinite; /* Ajuster la durée pour le défilement */
}

@keyframes defilement {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Défile sur 50% pour boucler avec les deux blocs */
    }
}

.messagedefilant span {
    font-size: 3rem;
}

/* Conteneur de la vidéo */
.video-container {
    position: fixed;
    width: 100%;
    height: auto;
    overflow: hidden; /* S'assure que les éléments ne débordent pas */
}

/* Style pour la vidéo */
.home-video {
    width: 100%;
    height: auto;
    display: block;
}


/*About*/

.eal-video {
    position: absolute; /* Assurez-vous que la vidéo soit en position absolue */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: top; /* Commence avec le cadrage en haut */

    /* Masque circulaire avec un dégradé progressif */
    -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-size: absolute;
    mask-size: absolute;

    /* Animation de déplacement et de zoom */
    animation: moveDownZoom 20s ease-in-out infinite; /* Animation en boucle */
}

/* Animation qui déplace le cadrage de haut en bas et applique un zoom */
@keyframes moveDownZoom {
    0% {
        object-position: top; /* Cadrage en haut */
        transform: scale(1); /* Pas de zoom au début */
    }
    50% {
        object-position: bottom; /* Cadrage au bas à 50% de l'animation */
        transform: scale(1); /* Zoom à mi-parcours */
    }
    100% {
        object-position: top; /* Retour en haut à la fin de l'animation */
        transform: scale(1); /* Retour au zoom initial */
    }
}

/* Conteneur de texte avec fond dégradé */
        .text-container {
            position: absolute; /* Position absolue pour superposer */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: 20rem;
            font-family: 'Space Mono';
            display: flex;
            align-items: center; /* Centre verticalement */
            justify-content: center; /* Centre horizontalement */
            border-radius: 100px; /* Coins arrondis */
            backdrop-filter: blur(5px); /* Flou d'arrière-plan */
            font-size: 2em; /* Taille du texte */
            text-align: left; /* Centrer le texte */
            z-index: 1; /* Mettre au-dessus de la vidéo */
        }

        .about_text{
          text-align: left;
          backdrop-filter: blur(30px); /* Flou d'arrière-plan */
        }



/*Custom cursor*/


.custom-cursor{
  position: absolute;
  width: 3rem;
  height: 3rem;
  background-color: none;
  border: 0.1em solid black;
  margin-top: -1.5rem;
  margin-left: -1.5rem;
  z-index: 1000000;
  opacity: 1;
  border-radius: 1.5rem;
  pointer-events: none;
  cursor: none;
}




/*preloader*/

/* Styles pour le preloader */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

#preloader img.threesixty-frame:hover{
  filter: none;
}

.infos_loader{
  font-family: 'Space Mono';
  text-align: center;
  font-size: 1em;
}


/*RESPONSIVE*/

@media only screen and (max-width: 768px) {

  /*Structure*/
  * {
    box-sizing: border-box;
  }

  html{
    scroll-behavior: smooth;
  }

    html,body {
      min-height: 100vh;
      margin: 0;
      width: auto;
      overflow-x : hidden;
      background: rgb(0,102,255);
      background: radial-gradient(circle, rgba(0,102,255,1) 0%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%);
    }

    .mobile-message p, h1{
      display: block;
      margin: 1rem;
      align-items: center;
    }

    p{
      font-family: 'Space Mono';
    }

    .threesixty img{
      width: 100%;
      height: auto;
    }

}