.headerHome {
    height: 80vh;
    background-color: #e4f9ff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    min-height: 940px;
}

.headerHome h1 {
    max-width: 850px;
    text-align: center;
    margin-bottom: 180px;
}

.page-id-2 body {
    background: #FAFEFF !important;
}
.video-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    max-width: 70%;
}
.video-container video {
    max-width: 1270px;
    width: 100%;
    top: 379px;
}


/* --- VIDÉO EN FOND --- */
video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -50;
}
.contentHeader {
    z-index: 10;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
  opacity: 0;
    animation: fadeIn 1s ease-in-out 4.5s forwards;
    
}


.planet {
  position: absolute;
  bottom: -259px;
  max-width: 930px;
  z-index: 3;
  transform: scale(0.5) rotate(-30deg);
  animation: planetEnter 3s ease-out forwards, planetFloat 5s ease-in-out infinite;
  animation-delay: 0s, 2.9s; /* l’entrée d'abord, puis la flottement en boucle */
}

@keyframes planetEnter {
  0% {
    transform: scale(0.2) rotate(-5deg);
  }
40% {
    transform: scale(1) rotate(5deg);
  }
  80% {
    transform: scale(0.95) rotate(-5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes planetFloat {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(10px, -4px); }
  50%  { transform: translate(-6px, 10px); }
  75%  { transform: translate(10px, -3px); }
  100% { transform: translate(0, 0); }
}


.moduleRecherche {
    z-index: 999;
    max-width: 821px !important;
    width: 100% !important;
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.nuageBottom{
    z-index: 99;
    bottom: 0;
    position: absolute;
}
.Astro {
    z-index: 10;
    position: absolute;
    width: 380px;
    right: 0px;
    transform: translate(-50px, 20px);
}
.Fusee2 {
    z-index: 10;
    position: absolute;
    width: 300px;
    left: 70px;
    transform: translate(80px, 10px);
}
.page-id-2  .main_logo {
  opacity: 1;
  transition: opacity 1s ease;
}
.headerHome::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 310px;
    background: linear-gradient(to top, #ffffff8f 0%, #ffffff00 100%);
    pointer-events: none;
    z-index: 81;
}
@keyframes floatSpace {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-40px) rotate(-5deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

.Astro, .Fusee2 {
  animation: floatSpace 3s ease-in-out infinite;
  will-change: transform;
}

@media only screen and (max-width: 1400px) {
  .headerHome {
    height: 70vh !important;
    min-height: 790px !important;
}
.Astro {
    width: 260px;
}
.Fusee2 {
    width: 210px;
}
.planet {
    bottom: -259px;
    max-width: 870px;
}
.video-container video {
    transform: translate(-50%, -50%) scale(0.7) !important;
        top: 251px;
}
}

@media only screen and (max-width: 1150px) {
    .Astro {
        width: 190px;
        transform: translate(-50px, 30px);
    }
    .Fusee2 {
        width: 160px;
            transform: translate(50px, 30px);
    }
    @keyframes floatSpace {
  0% {
    transform: translateY(40px) rotate(0deg);
  }
  50% {
    transform: translateY(-30px) rotate(-5deg);
  }
  100% {
    transform: translateY(40px) rotate(0deg);
  }
}
}


@media only screen and (max-width: 1024px) {
    .headerHome {
        height: 0vh !important;
        min-height: 650px !important;
    }
        .planet {
        bottom: -259px;
        max-width: 770px;
        width: 100%;
    }
    .header .logo {
    max-width: 180px !important;
}
    .Astro {
  animation: floatSpace 0s ease-in-out infinite;
}

.Fusee2 {
  animation: floatSpace 0s ease-in-out infinite;
      left: 0px;
}
    .video-container video {
        transform: translate(-50%, -50%) scale(0.9) !important;
        top: 199px;
    }
        .Astro {
        width: 150px;
        transform: translate(-10px, 30px);
    }
    .Fusee2 {
        width: 125px;
        transform: translate(15px, 33px);
    }
}


@media only screen and (max-width: 668px) {
  @keyframes planetFloat {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(0, 0); }
  }
    .planet {
        bottom: -169px;
        max-width: 770px;
        width: 100%;
    }
            .Astro {
        transform: translate(-10px, 70px);
    }
    .Fusee2 {
        transform: translate(15px, 72px);
    }
    .video-container {
    max-width: 100%;
}

}

@media only screen and (max-width: 550px) {
.headerHome h1 {
    margin-bottom: 35px;
    font-size: 33px;
    line-height: 42px;
    max-width: 340px;
}
    .headerHome {
        justify-content: flex-start;
        min-height: 615px !important;
    }
    .contentHeader {
        margin-top: 80px;
        width: 100%;
    }
    .headerHome::before {
    height: 120px;
}
    .Astro {
        transform: translate(0px, 310px);
        width: 110px;
    }
        .Fusee2 {
        transform: translate(0px, 310px);
        width: 85px;
    }
        .planet {
        bottom: -100px;
    }
    .video-container video {
    width: 130%;
        transform: translate(-50%, -50%) scale(0.7) !important;
}

}


@media only screen and (max-width: 400px) {
    .headerHome {
        min-height: 525px !important;
    }
        .Astro {
        transform: translate(0px, 310px);
        width: 80px;
    }
        .Fusee2 {
        transform: translate(15px, 312px);
        width: 62px;
    }
  }
  
@media only screen and (max-width: 375px) {
    .headerHome h1 {
        margin-bottom: 25px;
        font-size: 30px;
        line-height: 35px;
    }
        .headerHome {
        min-height: 480px !important;
    }
            .Astro {
        transform: translate(0px, 300px);
    }
        .Fusee2 {
        transform: translate(15px, 300px);
    }
}