/* css_projet.css */

  body {
    height: 100%;
    margin-top: -1%;
    margin-left: -1%;
    margin-right: -1%;
    margin-bottom: -1%;
    background-color: #4E2C4F;
    color: #f0f0f0;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  
  header {
    background-color: #F3B5B5;
    padding: 1rem;
    color: #000000;
  } 

  footer{
    text-align: center;
  }

  /*texte*/
  a {
    color: inherit;
    text-decoration: none;
  }

  .date {
    font-size: 60%;
    text-align: left;
    align-self: flex-start;
  }

  .botnav {
    font-size: larger;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 6%;
    margin-bottom: 6%;
  }


  /*image*/

  .botnav img {
    width: 6%;
    height: 6%;
    margin-right: 2%;

  }

 /* menue */

.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #b4b4b4;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #000000;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #757575;
}

.container_kda {
  display: inline-block;
  cursor: pointer;
}

.no-click {
  color: #757575 !important;
  /* Ajout du filtre SVG */
  filter: url(#motion-blur);

  /* Animation supplémentaire */
  animation: blurMotion 2s infinite ease-in-out;
}

@keyframes blurMotion {
  0%, 100% {
    text-shadow: 0 0 5px #fff, 0 0 10px rgba(255, 255, 255, 0.5);
  }
  50% {
    text-shadow: 5px 0 15px rgba(255, 255, 255, 0.5);
  }
}


.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

button.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #b4b4b4;
  color: #000000;
  padding: 5px 10px;
  border: none;
  position: fixed;
  top: 1%;
  left: 1%;
  z-index: 1000;
  display: flex; 
  align-items: center; 
}

button.openbtn .container_kda.open-icon {
    margin-left: 10px; 
    position: relative; 
    top: auto;
    left: auto;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

@keyframes tipsy {
  0% {
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateX(-50%) translateY(-50%) rotate(360deg);
  }
}



/* CV */

#gallery-CV {
  width: 100vw;
}


#gallery-CV header,
#gallery-CV footer {
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-group-container {
  height: 500vh;
  position: relative;
}

.img-group-container > div {
  position: sticky;
  top: 0;
  overflow: hidden;
  height: 100vh;
}

.img-group {
  display: flex;
}

.img-container-title {
  display: flex;
  width: 70vw;
  height: 100vh;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.img-container {
  display: flex;
  width: 70vw;
  height: 100vh;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.img-container-text {
  display: flex;
  width: 30vw;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 150%;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.5s ease;
  max-height: 0;
}

#gallery-CV header h2 {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -3px;
  line-height: 1.2;
  text-align: center;
  margin: 0;
}

.img-container-title h3 {
  margin: 0;
  font-size: 50px;
  font-weight: 700;
  letter-spacing: -3px;
  line-height: 1.2;
  position: relative;
  bottom: 30px;
  display: inline-block;
}

.img-container h3 {
  margin: 0;
  font-size: 50px;
  font-weight: 700;
  letter-spacing: -3px;
  line-height: 1.2;
  position: relative;
  bottom: 30px;
  display: inline-block;

  /* Ajout du filtre SVG */
  filter: url(#motion-blur);

  /* Animation supplémentaire */
  animation: blurMotion 2s infinite ease-in-out;

}

@keyframes blurMotion {
  0%, 100% {
    text-shadow: 0 0 5px #FDC9C9, 0 0 10px rgba(253,201,201,0.5);
  }
  50% {
    text-shadow: 5px 0 15px rgba(253,201,201,0.5);
  }
}

.img-container-title img {
  width: 300px;
  height: 400px;
}

.progress {
  position: fixed;
  left: 0;
  right: 0;
  height: 5px;
  background: #000000;
  bottom: 50px;
  transform: scaleX(0);
}

.parcours-wrapper {
  display: flex;
  align-items: center; /* Aligne verticalement le titre et le texte */
  gap: 20px;           /* Crée un espace entre le titre et le texte */
}

.parcours-trigger {
  cursor: pointer;
  margin: 0; /* Alignement vertical */
}

.parcours-wrapper:hover .img-container-text {
  opacity: 1;
  max-height: 700px;
}

.job-entry {
  margin-bottom: 1em; /* Ajoute de l'espace entre chaque expérience */
}
.job-entry:last-child {
  margin-bottom: 0;
}
.job-entry .date {
  font-size: 0.9em;
  opacity: 0.8;
  margin-top: 4px;
  text-align: left;
}

/* flip card */

.flip-card {
  background-color: transparent;
  width: 252px;
  height: 252px;
  margin-left: auto;
  margin-right: auto;
}

.flip-card-inner {
  position: relative;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  width: 252px;
  height: 252px;
}

.flip-card-front {
  color: black;
}

.flip-card-back {
  background-color:  white;
  color:black;
  transform: rotateY(180deg);
}

.flip-card-back h1 {
  margin-top: -1%;
}

/*               Index               */

/*Name index*/
.main-heading {
  text-align: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%); 
  z-index: 999;
  color: #f0f0f0;
  font-family: 'Arial', sans-serif;
  width: 30em;
  max-width: 800px;
}

/*Button index*/
.switch {
  width: 80px;
  height: 200px;
  background-color: #fff3;
  display: flex;
  align-items: flex-start; /* Place la balle en haut par défaut */
  border-radius: 50px;
  padding: 10px;
  cursor: pointer;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
  position: absolute; /* Positionné indépendamment du flux */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centrer exactement */
  z-index: 1000; /* Au-dessus de tout le reste */
  overflow: hidden; /* Empêche à l'oeil de dépasser de switch*/
  perspective: 1200px; /*perspective pour un contexte 3D global pour l'oeil */
}

.ball {
  width: 80px;
  height: 80px;
  background-color: #f5f5f5;
  border-radius: 40px;
  will-change: transform;
  transform: translateY(0px); /* Position initiale de la balle (en haut) */
}


/*Oeil*/
@keyframes move-eye-skew {
  0% { transform: translateX(0px) translateY(0px) skewX(0deg) skewY(0deg) scale(1); }
  20% { transform: translateX(-15px) translateY(7px) skewX(15deg) skewY(-10deg) scale(0.95); }
  25%, 44% { transform: none; }
  50%, 60% { transform: translateX(15px) translateY(-10px) skewX(5deg) skewY(2deg) scaleX(0.95); }
  66%, 100% { transform: none; }
}
  
.iris {
  width: 40%;
  height: 40%;
  margin: 30%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
  position: absolute;
  transform: translateZ(2px);
}
.oeil {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin: 0;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 50% 40%, #fcfcfc, #efeff1 66%, #9b5050 100%);
  will-change: transform; /* Indique au navigateur que cette propriété sera animée */
  transform-style: preserve-3d;/* Garde les enfants (iris, shadow) dans le même espace 3D */
}
.iris:before {
  content: "";
  display: block;
  position: absolute;
  width: 37.5%;
  height: 37.5%;
  border-radius: 50%;
  top: 31.25%;
  left: 31.25%;
  background: black;
  transform: translateZ(2px);
}
.iris:after {
  content: "";
  display: block;
  position: absolute;
  width: 31.25%;
  height: 31.25%;
  border-radius: 50%;
  top: 18.75%;
  left: 18.75%;
  background: rgba(255, 255, 255, 0.2);
  transform: translateZ(2px);
}

/*Boulle lien*/
.circle {
  display: block;
  background: black;
  border-radius: 50%;
  background: radial-gradient(circle at 100px 100px, #FDC9C9, #000000);
  background-repeat: no-repeat; /* Empêche l'image de se répéter */
  background-position: center; /* Centre l'image dans le cercle */
  background-size: 100%; /* Ajuste la taille de l'imag.*/
}

.circle-link {
  display: block; /* Important pour que le lien prenne les dimensions et la position */
  position: absolute; /* Les liens sont maintenant positionnés */
  text-decoration: none; /* Enlève le soulignement des liens */
  border-radius: 70%;
}

#circle-CV {
  height: 150px;
  width: 150px;
  background-image: url('./img/cv.webp');
}
#link-CV {
  top: 10%;
  left: 10%;
}

#circle-PF {
  height: 130px;
  width: 130px;
  background-image: url('./img/IIM.png');
}
#link-PF {
  top: 20%;
  left: 65%;
}

#circle-MB {
  height: 170px;
  width: 170px;
  background-image: url('./img/MB.png');
}
#link-MB {
  top: 68%;
  left: 30%;
}

.video {
  margin-left: 5%;
}

/*Portfolio scroll*/
.example {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.scroll-section {
  box-sizing: border-box;
  width: 100vh;
  height: 100vh;
  display: flex;
  overflow: hidden;
  padding: 50px;
  justify-content: center;
  align-items: center;
}

.content-area {
  display: flex; 
  justify-content: space-around; 
  align-items: center; 
  height: 80vh;
  width: 100%; 
  box-sizing: border-box; 
  padding: 0 5%; 
  margin-top: -50px; 
}


/* Conteneur principal pour "Level design", "PLAY", "Game Concept" et le cube */
.content-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80vh;
  width: 100%;
  box-sizing: border-box;
  padding: 0 5%;
  margin-top: -50px;
}

/* Styles généraux pour les éléments PDF et PLAY (texte et image) */
.pdf-item,
.play-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
}

/* Texte "Level design" et "Game Concept" */
.pdf-item p {
  font-size: 20px;
  margin-bottom: 10px;
  margin-top: 0;
}

/* Images PDF*/
.pdf-item img {
  width: 100px;
  height: auto;
  object-fit: contain;
}

/* Texte "PLAY" */
.play-item p {
  font-size: 30px;
  margin-bottom: 15px;
  margin-top: 0;
}

/* Image PLAY*/
.play-item img {
  width: 600px;
  height: auto;
  object-fit: contain;
  margin-right: 0;
}

/* Styles pour les liens (a) */
.pdf-item a,
.play-item a {
  text-decoration: none;
  display: block;
}

/* Styles pour la section générale */
.scroll-section {
  position: relative;
  width: 100%;
}


/* NOUVELLES RÈGLES POUR DÉPLACER LES PDF VERS LE HAUT et pour le cube/play */

.pdf-item {
  align-self: flex-start;
  margin-top: 50px;
}


/* Nouveau conteneur pour le cube et le bouton PLAY */
.center-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; 
  height: 100%; 
  width: 30%;
}

/* Cube */
#three-container {
  width: 300px;
  height: 200px; 
  background-color: #000000;
  margin-top: 5%;
  margin-left: 0;
  margin-bottom: 30%;
}

.scroll-section:nth-child(2) {
  background: rgb(253, 201, 201);
}

.scroll-section:nth-child(3) {
  background: rgb(142, 142, 142);
}

.scroll-section:nth-child(4) {
  background: rgb(0, 0, 0);
}

.scroll-section pre {
  font-size: 50px;
  color: #ff0088;
  display: block;
  transform: translateX(-100px);
  opacity: 0;
}

.scroll-section:nth-child(2) pre {
  color: #dd00ee;
}

.scroll-section:nth-child(3) pre {
  color: #9911ff;
}

.scroll-section:nth-child(4) pre {
  color: #0d63f8;
  margin-left: 8%;
}



/* Styles spécifiques pour l'iframe de Sketchfab */
.sketchfab-embed-wrapper {
  width: 90%; 
  height: 70%; 
  margin: auto;
}
.sketchfab-embed-wrapper iframe {
  width: 100%;
  height: 100%;
  display: block; /* Supprime l'espace sous l'iframe */
}
.credits {
  font-weight: bold; 
  color: #000000;
}

.genji {
  font-size: 13px;
  font-weight: normal;
  margin-top: 10px;
  color: #4A4A4A;
  text-align: center;
}

/* Game */

html body .Game_KDA{
  margin: 0;
  padding: 0;
  height: 100%;
}
.Game_KDA {
  width: 960px; 
  height: 600px;
  margin: auto;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 25%;
  right: 0;
  transition: left 0.5s;
}
.Game_KDA iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

/* Carousel */
.carousel-container {
  width: 80vw;
  max-width: 800px;
  height: 60vh; 
  overflow: hidden;
  border-radius: 8px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 2%;
  opacity: 0;
  transform: translateY(100%); /* Caché par défaut en bas */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.carousel-slide.active {
  opacity: 1;
  transform: translateY(0); /* Position normale */
}

/* Styles pour la slide qui sort vers le haut (lors du clic 'next') */
.carousel-slide.leaving-up {
  opacity: 0;
  transform: translateY(-100%); /* Sort par le haut */
}

/* Styles pour la slide qui sort vers le bas (lors du clic 'prev') */
.carousel-slide.leaving-down {
  opacity: 0;
  transform: translateY(100%); /* Sort par le bas (utile pour le bouton précédent) */
}


/* Styles pour la slide qui arrive par le bas (lors du clic 'next') */
.carousel-slide.entering-down {
  opacity: 1;
  transform: translateY(0); /* Arrive à sa position normale */
}

/* Styles pour la slide qui arrive par le haut (lors du clic 'prev') */
.carousel-slide.entering-up {
  opacity: 1;
  transform: translateY(0); /* Arrive à sa position normale */
}

.carousel-slide img {
  width: 30%;
  height: auto;
  display: block;
  object-fit: contain; /* Pour s'assurer que l'image ne déborde pas */
}

.carousel-controls {
  position: absolute;
  top: 50%;
  width: 100%;
  left: 80%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  padding: 0 10px;
  box-sizing: border-box;
  z-index: 100; /* Pour que les boutons soient au-dessus des slides */
}

.carousel-control {
  width: 100px;
  height: 100px;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  padding: 0;;
  cursor: pointer;
}

.carousel-control img {
max-width: 50%;
max-height: 50%;
object-fit: contain;
}


/* Pour Chrome, Safari, Edge, Opera */
::-webkit-scrollbar {
  width: 0;
  background: transparent; /* Masque la barre mais garde l'espace */
}

/* Pour Firefox */
html {
  scrollbar-width: none; /* Masque la barre sans garder l'espace */
}

/*img moodboard*/

.gallery-mb {
  position: relative; /* Contexte pour le positionnement absolu des ULs */
  width: 100vw; /* Prend toute la largeur de la fenêtre */
  height: calc(100vh - 100px); /* Prend presque toute la hauteur, en laissant de l'espace pour le menu */
  overflow: hidden; /* Cache ce qui déborde */
  /* Supprime les propriétés flex qui centraient les éléments */
  display: block;
  margin-top: 50px; /* Ajoute un espace par rapport au bouton de menu fixe */
  box-sizing: border-box; /* Inclut le padding/bordure dans la taille totale de l'élément */
}

.img-mb {
  position: absolute; /* Permet un positionnement précis sur la page */
  margin: 0; /* Supprime la marge pour un contrôle total par top/left */
  perspective:700px;
  transform-style:preserve-3d;
  transform:rotateX(40deg); /* Garde la rotation initiale des cubes */
  transition:all 0.4s;
  /* La largeur et hauteur sont définies plus bas par nth-of-type */
}

.img-mb:hover {
  transform:translateZ(100px) rotateX(20deg); z-index:999;
}

.img-mb:hover li {
  filter:grayscale(0);
}

.pictur_mb {
  position:absolute; left:0; top:0;
  backface-visibility:hidden;
  width:100%; height:100%;
  transition:transform 0.3s, filter 1s;
  filter:grayscale(0.9);
}
/*
Setup individual planes final poistion(by left top) and initial position(by transform)
*/
li:first-of-type {transform:none;}
li:nth-of-type(2) {left:100%; transform-origin:left center; transform:rotateY(180deg);}
li:nth-of-type(3) {top:100%; transform-origin:center top; transform:rotateX(-180deg);}
li:nth-of-type(4) {left:-100%; transform-origin:right center; transform:rotateY(-180deg);}
li:nth-of-type(5) {top:-100%; transform-origin:center bottom; transform:rotateX(180deg);}
li:nth-of-type(6) {top:100%; left:100%; transform-origin:center top; transform:rotateX(-180deg);}
li:nth-of-type(7) {top:100%; left:-100%; transform-origin:right center; transform:rotateY(-180deg);}
li:nth-of-type(8) {top:-100%; left:-100%; transform-origin:center bottom; transform:rotateX(180deg);}
li:nth-of-type(9) {top:-100%; left:100%; transform-origin:left center; transform:rotateY(180deg);}
/*
Setup transition-delay, for mouseout state
*/
li:nth-of-type(2),li:nth-of-type(3),li:nth-of-type(4),li:nth-of-type(5) {transition-delay:0.03s;}
li:nth-of-type(6),li:nth-of-type(7),li:nth-of-type(8),li:nth-of-type(9) {transition-delay:0s;}
ul:hover :nth-of-type(2),ul:hover :nth-of-type(3),ul:hover :nth-of-type(4),ul:hover :nth-of-type(5) {transition-delay:0s}
ul:hover :nth-of-type(6),ul:hover :nth-of-type(7),ul:hover :nth-of-type(8),ul:hover :nth-of-type(9) {transition-delay:0.2s}
/*
Setup planes final state
*/
ul:hover :nth-of-type(2),ul:hover :nth-of-type(4),ul:hover :nth-of-type(7),ul:hover :nth-of-type(9) {transform:rotateY(0);}
ul:hover :nth-of-type(3), ul:hover :nth-of-type(5),ul:hover :nth-of-type(6), ul:hover :nth-of-type(8) {transform:rotateX(0);}
/*
Set background position
*/
ul li {background-size:300% 300%;}
li:nth-of-type(1) {background-position:center center;}
li:nth-of-type(2) {background-position:right center;}
li:nth-of-type(3) {background-position:center bottom;}
li:nth-of-type(4) {background-position:left center;}
li:nth-of-type(5) {background-position:center top;}
li:nth-of-type(6) {background-position:right bottom;}
li:nth-of-type(7) {background-position:left bottom;}
li:nth-of-type(8) {background-position:left top;}
li:nth-of-type(9) {background-position:right top;}
/*
Set background image source
*/
ul:nth-of-type(1) li { background-image:url(./img/ow2_logo.png);}
ul:nth-of-type(1) { width:120px; height:80px; }
ul:nth-of-type(2) li { background-image:url(./img/lego.png);}
ul:nth-of-type(2) { width:90px; height:130px; }
ul:nth-of-type(3) li { background-image:url(./img/kingdom.png);}
ul:nth-of-type(3) { width:130px; height:90px; }
ul:nth-of-type(4) li { background-image:url(./img/licorn_fond.png);}
ul:nth-of-type(4) { width:120px; height:80px; }
ul:nth-of-type(5) li { background-image:url(./img/Logo_KDA.png);}
ul:nth-of-type(5) { width:64px; height:84px; }
ul:nth-of-type(6) li { background-image:url(./img/color.png);}
ul:nth-of-type(6) { width:100px; height:66px; }
ul:nth-of-type(7) li { background-image:url(./img/carre_King.png);}
ul:nth-of-type(7) { width:120px; height:80px; }
ul:nth-of-type(8) li { background-image:url(./img/WoW.png);}
ul:nth-of-type(8) { width:120px; height:80px; }
/*
Hide debug label
*/
li { text-indent:999px; overflow:hidden; }