*{
    margin : 0;
    padding : 0;
}
@font-face {
  font-family: 'Ailerons'; /* Nom de la police */
  src: url(portfoliosite/Ressources/Ailerons.woff) format('woff');
  font-weight: lighter;
  font-style: normal;
}
.main{
  min-height : 100vh;
  width:100%;
  background-position: center;
  background-size:cover;
  position:absolute;
  top:0px;
  overflow: hidden;
}
.background{
min-height : 110vh;
width:110%;
background-image: url(images/espace.jpg);
background-position: center;

position : fixed;
background-size: cover;
filter: brightness(100%);
}
.animation {
  opacity: 0; /* L'élément est initialement invisible */
  animation-name: fadeIn; /* Nom de l'animation */
  animation-duration: 2s; /* Durée de l'animation (1 seconde dans cet exemple) */
  animation-delay: 1s; /* Délai avant le début de l'animation (0.5 seconde dans cet exemple) */
  animation-fill-mode: forwards; /* Garde la fin de l'animation visible */
}
@keyframes fadeIn {
  from {
      opacity: 0; /* Opacité initiale à 0 */
  }
  to {
      opacity: 1; /* Opacité finale à 1 */
  }
}
.sun {
    position: absolute;
    top: 50%; /* Positionne le haut du cercle au milieu de la page */
    transform: translateY(-50%); 
    left:-17vh;
    min-height: 35vh;
    min-width: 35vh;
    
    border: 2px solid #ffffaa;
    border-radius: 50%;
    box-sizing: border-box; 

    display: flex;
    justify-content: center; /* Centre le contenu horizontalement */
    align-items: center; /* Centre le contenu verticalement */
    
  } 
  .sun2 {
    
    min-height: 20vh;
    min-width: 20vh;
    
    border: 1px solid #ffffff;
    border-radius: 50%;
    box-sizing: border-box; 
    
  } 
  .texte1{
    color:white
    
  }
.plan1{
  position: absolute;
  top: 50%; /* Positionne le haut du cercle au milieu de la page */
  transform: translateY(-50%); 
  left:15%;
  min-height: 8vh;
  min-width: 8vh;
    
  border: 1px solid #ffffff;
  border-radius: 50%;
  box-sizing: border-box; 

  display: flex;
  justify-content: center; /* Centre le contenu horizontalement */
  align-items: center; /* Centre le contenu verticalement */
    
  transition: transform 2s ease-in-out, width 2s ease-in-out, height 2s ease-in-out;

}

.trigger{
  position : absolute;
  top:50%;
  left:50%;
  height : 3vh;
  width : 3vh;
  border: 2px solid gray;
  transition:all 0.2s;
  cursor:pointer;
  transform:translate(-50%,-50%) rotate(45deg) scale(0.6);
}
.losange{
  position : absolute; 
  height : 1vh;
  width : 1vh;
  background-color:white;
  transition:all 1s;
  transform:translate(100%,100%)
}
.trigger::before{
  content: "";
  height: 150%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0px);
  transition: all 0.4s;
  width: 150%;
  border: 2px solid red;
  opacity:0;
  box-shadow: 0 0 5px 2px #f00;
}

.trigger:hover .losange{
  transform:translate(100%,100%) rotate(270deg);
}
.trigger:hover{
  border : 2px solid red;
  transform:scale(0.7) rotate(45deg) translate(-100%,0%);
}
.trigger:hover::before{
  opacity:0.2;
}


.a{
  position:absolute;
}
.caché{
  position:absolute;
  height: 15vh;
  width: 10vw;
  opacity: 0; /* Initialement, l'élément est invisible */
  visibility: visible;
  transition: opacity 0.5s; 
  color:white;
  bottom:0px;
  left:50%;
  transform: translateX(-50%); 
  top: 100%;
  right:0px;
  text-align: center;

  border: 0px solid #b3b3b38b;
  border-radius:12px;

  font-family: 'Ailerons';
  font-size: 1.2vw;
  overflow: hidden;
}


.trigger:hover + .caché + .sat{
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s; 
  
}
.trigger:not(:hover) + .caché + .sat {
  opacity: 0;
  visibility: visible;
  transition: opacity 0.5s; 
  transition-delay: 1s;
}
.trigger:hover + .caché{
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s; 
  
}
.trigger:not(:hover) + .caché {
  opacity: 0;
  visibility: visible;
  transition: opacity 0.5s; 
  transition-delay: 1s;
}
.Titre{
  height:100%;
  width:50%;
  position:absolute;
  color:white;
  font-family: "Ailerons";
  font-size  : 2.2vw;
  padding-left:3.5vw;
}
.header{
  position:absolute;
  width:100%;
  height:3vw;
  background-color: #aaaaaa20;
  backdrop-filter:blur(5px);
  opacity: 0; /* L'élément est initialement invisible */
  animation-name: fadeIn; /* Nom de l'animation */
  animation-duration: 2s; /* Durée de l'animation (1 seconde dans cet exemple) */
  animation-delay: 0s; /* Délai avant le début de l'animation (0.5 seconde dans cet exemple) */
  animation-fill-mode: forwards; /* Garde la fin de l'animation visible */
}
.logo{
  position:absolute;
  width:2.5vw;
  height:2.5vw;
  padding-top: 0.25vw;
  padding-left:0.5vw; 
}
.menu{
  position:absolute;
  right:1%;
  color:white;
  font-family: "Ailerons";
  font-size  : 2.2vw;
  border : 2px solid #505050;
  border-radius: 10px;
  height:80%;
  display: flex;
  align-items: center;
  top:10%;
  transition : background-color 1s;
  box-shadow: 0 0 2px 2px rgb(27, 27, 27);
}
.menu:hover{
  background-color:#505050;
  cursor: default;
}
.caché.affiche{
  opacity:1 !important;
  transition-delay: 0s !important;
}
.sat.affiche{
  opacity:1 !important;
  transition-delay: 0s !important;
}
.tailer{
  position:absolute;
  bottom:0%;
  color:gray;
  font-family: Arial, Helvetica, sans-serif;
  font-size:0.5vw;
}
.sat {
  opacity:0;
  width: 15px; /* Ajustez la taille de votre carré selon vos besoins */
  height: 15px;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius:50%;
  transform: translate(-50%, -50%); /* Centrez le carré dans .plan1 */
  animation: rotate 4s linear infinite; /* Utilisez l'animation "rotate" */
}
.trigger:hover + .sat {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s; 
  
}
.trigger:not(:hover) + .sat {
  opacity: 0;
  visibility: visible;
  transition: opacity 0.5s; 
  transition-delay: 1s;
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translateX(4vh); /* Ajustement pour le décalage */
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translateX(4vh); /* Ajustement pour le décalage */
  }
}
@keyframes rotate2 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translateX(6vh); /* Ajustement pour le décalage */
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translateX(6vh); /* Ajustement pour le décalage */
  }
}
@keyframes rotate3 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translateX(7.5vh); /* Ajustement pour le décalage */
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translateX(7.5vh); /* Ajustement pour le décalage */
  }
}
@keyframes rotate4 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translateX(5vh); /* Ajustement pour le décalage */
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translateX(5vh); /* Ajustement pour le décalage */
  }
}
@keyframes rotate5 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translateX(10vh); /* Ajustement pour le décalage */
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translateX(10vh); /* Ajustement pour le décalage */
  }
}
@keyframes rotate6 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translateX(12vh); /* Ajustement pour le décalage */
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translateX(12vh); /* Ajustement pour le décalage */
  }
}
#stages {
  cursor: pointer;
}
.gros {
  animation-name: grosse; /* Nom de l'animation */
  animation-duration: 2s; /* Durée de l'animation (1 seconde dans cet exemple) */
  animation-delay: 2s; /* Délai avant le début de l'animation (0.5 seconde dans cet exemple) */
  animation-fill-mode: forwards; /* Garde la fin de l'animation visible */
  width: 10vh; /* Taille initiale */
  height: 10vh; /* Taille initiale */
}
@keyframes grosse {
  from {
    width: 10vh; /* Taille initiale */
    height: 10vh; /* Taille initiale */
  }
  to {
    width:55vh;
    height:55vh;
  }
}

.disparition {
  animation-name: disp; /* Nom de l'animation */
  animation-duration: 2s; /* Durée de l'animation (1 seconde dans cet exemple) */
  animation-delay: 0.5s; /* Délai avant le début de l'animation (0.5 seconde dans cet exemple) */
  animation-fill-mode: forwards; /* Garde la fin de l'animation visible */
  opacity:1;
}
@keyframes disp {
  0% {
    opacity:1;
  }
  100% {
    opacity:0
  }
}
.lune1{
  opacity:1;
  width: 100px; /* Ajustez la taille de votre carré selon vos besoins */
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius:50%;
  transform: translate(-100%, -100%); /* Centrez le carré dans .plan1 */
  animation: rotatelune 120s linear infinite; /* Utilisez l'animation "rotate" */
  transition: background-color 0.3s ease;
  
}
.lune2{
  opacity:1;
  width: 100px; /* Ajustez la taille de votre carré selon vos besoins */
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius:50%;
  transform: translate(-50%, -50%); /* Centrez le carré dans .plan1 */
  animation: rotatelune2 120s linear infinite; /* Utilisez l'animation "rotate" */
  transition: background-color 0.3s ease;
}
@keyframes rotatelune {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translateX(27.5vh); /* Ajustement pour le décalage */
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translateX(27.5vh); /* Ajustement pour le décalage */
  }
}
@keyframes rotatelune2 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translateX(-27.5vh); /* Ajustement pour le décalage */
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translateX(-27.5vh); /* Ajustement pour le décalage */
  }
}
@keyframes rotatetexte {
  0% {
    transform: translate(-50%, 50%) rotate(0deg) translateX(-27.5vh); /* Ajustement pour le décalage */
  }
  100% {
    transform: translate(-50%, 50%) rotate(360deg) translateX(-27.5vh); /* Ajustement pour le décalage */
  }
}
@keyframes rotatetexte2 {
  0% {
    transform: translate(-50%, 50%) rotate(0deg) translateX(27.5vh); /* Ajustement pour le décalage */
  }
  100% {
    transform: translate(-50%, 50%) rotate(360deg) translateX(27.5vh); /* Ajustement pour le décalage */
  }
}
@keyframes cancelrotate {
  0% {
    transform: rotate(0deg) ; /* Ajustement pour le décalage */
  }
  100% {
    transform: rotate(360deg) ; /* Ajustement pour le décalage */
  }
}
.textelune1{
  opacity:1;
  width: 7vw; /* Ajustez la taille de votre carré selon vos besoins */
  height:2vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centrez le carré dans .plan1 */
  animation: rotatetexte 120s linear infinite; /* Utilisez l'animation "rotate" */
  color: white;
}
.textelune2{
  opacity:1;
  width: 7vw; /* Ajustez la taille de votre carré selon vos besoins */
  height:2vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centrez le carré dans .plan1 */
  animation: rotatetexte2 120s linear infinite; /* Utilisez l'animation "rotate" */
  color: white;
}
.cancel{
  animation:cancelrotate 120s linear infinite reverse;
  font-family: 'Exo';
  text-align:center;
  height: 100%;
  width:100%;
}
.lunes{
  display: none;
  opacity:0;
  animation-name: fadeIn; /* Nom de l'animation */
  animation-duration: 2s; /* Durée de l'animation (1 seconde dans cet exemple) */
  animation-delay: 0s; /* Délai avant le début de l'animation (0.5 seconde dans cet exemple) */
  animation-fill-mode: forwards;
}
.petit {
  animation-name: petite; /* Nom de l'animation */
  animation-duration: 3s; /* Durée de l'animation (1 seconde dans cet exemple) */
  animation-delay: 0s; /* Délai avant le début de l'animation (0.5 seconde dans cet exemple) */
  animation-fill-mode: forwards; /* Garde la fin de l'animation visible */
  width: 55vh; /* Taille initiale */
  height: 55vh; /* Taille initiale */
}
@keyframes petite {
  from {
    width: 55vh; /* Taille initiale */
    height: 55vh; /* Taille initiale */
  }
  to {
    width:10vh;
    height:10vh;
  }
}

.triangle1{
  position : absolute;
  top:50%;
  left:50%;
  height : 0;
  width : 0;
  border-right : 1.6vh solid transparent;
  border-bottom : 2.77vh solid gray;
  border-left : 1.6vh solid transparent;
  transition:all 1s;
  cursor:pointer;
  transform: translate(-50%,-70%);
}
.triangle2{
  position : absolute;
  top:50%;
  height : 0;
  width : 0;
  border-right : 1.36vh solid transparent;
  border-bottom : 2.30552vh solid #001;
  border-left : 1.36vh solid transparent;
  transform:translate(-50%,14.5%);
}
.triangle3{
    position : absolute;
    top:50%;
    height : 0;
    width : 0;
    border-right : 0.64vh solid transparent;
    border-bottom : 1.10848vh solid white;
    border-left : 0.64vh solid transparent;
    transform:translate(-50%,70%);
    transition:all 0.5s;
}
.triangle1:hover .triangle3{
  transform:translate(-50%,100%) rotate(180deg);
}
.triangle1:hover{
  border-bottom : 2.77vh solid red;
  filter: drop-shadow(0 0 0.8vh crimson);
}

.Intro{
  position: absolute;
  z-index: 990;
  height: 500px;
  width: 500px;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  background-color:#151520bb;
  border:1px solid gray;
  backdrop-filter: blur(15px);
  display:flex;
  justify-content: space-around;
  color:white;
  font-family:Arial, Helvetica, sans-serif ;
  font-size:22px;
  align-items: center;
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
}
#hideButton {
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  position : absolute; 
  bottom: 10px;
}

#hideButton:hover {
  background-color: #0056b3;
}