.sonde-fixed{
    position: fixed;
    height: 190px;
    top: 50%;
    transform: translateY(-50%);
    left: 20vw;
    animation: anim-sonde-fixed;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1);
    z-index:9;
    user-select: none;
}

@keyframes anim-sonde-fixed {
    0%{
    transform: translateY(-50%) rotate(0deg);
    }

    30%{
        transform: translateY(-48%) rotate(-2deg);
        }

    50%{
        transform: translateY(-52%) rotate(2deg);
        }

    70%{
        transform: translateY(-49%) rotate(-1deg);
        }

    100%{
        transform: translateY(-50%) rotate(0deg);
        }
}











/* SECTION B1 */


.section-b1{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100vw;
}

.section-b1__text{
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 800px;

    top: 10vh;
    left: 100px;
}

.section-b1__sonde{
    width: 50px;
    transform: rotate(90deg);
    top: 10vh;
    left: 300px;
    position: absolute;
}








/* SECTION-B2 */

.section-b2{
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    padding: 30px;
    box-sizing: border-box;
}

.section-b2__titrage{
    margin-top: 10vh;
}

.section-b2__text{
    width: 330px;
    position: absolute;
    bottom: 220px;
}

.section-b2__medias{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 200px;
    width: 50vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.section-b2__medias-img{
    width: 300px;
    left: 25vw;
    transform: rotate(10deg);
} 

.section-b2__medias-cards{
    display: flex;
    width: 100%;
}

.section-b2__medias-card1{
    left: 30px;
    width: 400px;
    transform: translate(20px , -30px) rotate(-10deg);
    padding-right: 30px;


}

.section-b2__medias-card2{
    right: 30px;
    width: 400px;
    transform: rotate(10deg);
    transform: translate(0px, -97px) rotate(7deg);

}








/* SECTION B3 */

.section-b3{
    margin-right: 50vw;
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    padding: 30px;
    box-sizing: border-box;
}

.section-b3__container{
    width: 100%;
    display: flex;
    margin-top: 10vh;
    justify-content: space-between;
}

.section-b3__text1{
    width: 40%;
}

.section-b3__text2{
    width: 40%;
}

.section-b3__text3{
   width: 40vw;
   position: absolute;
   bottom: 50vh;
   left: 40vw;
}







/* SECTION B4 */

.section-b4{
    margin-right: 30vw;
}

.section-b4__container{
    width: 90vw;
    height: 250px;
    margin-top: 40vh;
    margin-left: 5vw;
    display: flex;
    justify-content: space-between;
}

.section-b4__container-2{
    width: 30%;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.section-b4__text1{
    width: 10%;
}

.section-b4__text2{
    width: 30%;
}

.section-b4__text3{
    text-align: right;
    width: 100%;
}

.section-b4__text4{
    width: 100%;
}







/* SECTION B5 - JUPITER*/

.section-b5{
    width: 200vw;
    min-width: 600px;
    
    position: relative;
}

.section-b5::before{    
    content: url(/assets-b/jupiter-bg.png);
    width: 200vw;
    height: 100vh;
    position: absolute;
    top: -30px;
    z-index: -1;
}


.section-b5__titrage{
    margin-top: 10vh;
    margin-bottom: 10vh;
}

.section-b5__jupitergif{
    width: 400px;
    border: 3px solid white;
    transform: rotate(5deg);
}

.section-b5__jupitergif::before{
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    display: block;
    background-color: black;
    border: 3px solid white;
}

/* INFOS */

.section-b5__tache{
    position: absolute;
    width: 800px;
    top: 60%;
    transform: translateY(-50%);
    height: 100vh;
    right: 1050px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-b5__button-tache-disable{
    background: transparent;
    border: none;
    transform: translate(0px, -280px) rotate(90deg);
    cursor: pointer;
    z-index: 10;
    transition: 0.3s;
}

.section-b5__button-tache-enable{
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
    transform: translate(0px, 0px) rotate(0deg);
    transition: 0.3s;

}

.section-b5__tache-container{
    width: 800px;
    position: relative;

}


/* TACHE DISABLE */
.section-b5__tache-img1-disable{
    width: 10px;
    height: auto;
    position: absolute;
    transition: 0.3s;

    transform: translate(-50%, -50%) rotate(0deg);
    left: 50%;
    top: 50%;
    opacity: 0;
}
.section-b5__tache-img2-disable{
    width: 10px;
    height: auto;
    position: absolute;
    transition: 0.3s;

    transform: translate(-50%, -50%) rotate(0deg);
    left: 50%;
    top: 50%;
    opacity: 0;
}
.section-b5__tache-text1-disable{
    width: 50%;
    height: auto;
    position: absolute;
    transition: 0.3s;

    transform: translate(-50%, -50%) rotate(0deg);
    left: 50%;
    top: 50%;
    opacity: 0;

}
.section-b5__tache-text2-disable{
    width: 50%;
    height: auto;
    position: absolute;
    transition: 0.3s;

    transform: translate(-50%, -50%) rotate(0deg);
    left: 50%;
    top: 50%;
    opacity: 0;

}


/* TACHE ENABLE */
.section-b5__tache-img1-enable{
    width: 50%;
    height: auto;
    position: absolute;
    transition: 0.3s;

    transform: translate(0%, 0%) rotate(-7deg);
    left: 0px;
    top: -300px;
    opacity: 100;
}
.section-b5__tache-img2-enable{
    width: 50%;
    height: auto;
    position: absolute;
    transition: 0.3s;

    transform: translate(0%, 0%) rotate(9deg);
    left: 50%;
    top: -400px;
    opacity: 100;
}
.section-b5__tache-text1-enable{
    width: 50%;
    height: auto;
    position: absolute;
    transition: 0.3s;

    transform: translate(0%, 0%) rotate(-7deg);
    left: 0px;
    top: 10px;
    opacity: 100;

}
.section-b5__tache-text2-enable{
    width: 50%;
    height: auto;
    position: absolute;
    transition: 0.3s;

    transform: translate(0px, -90px) rotate(3deg);
    left: 370px;
    top: 0;
    opacity: 100;

}


/* SON */

.section-b5__son{
    border: 1px solid white;
    width: 500px;
    height: 85vh;
    position: absolute;
    right: 180px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 20px;
}

.section-b5__son-title{
    position: absolute;
    bottom: 10px;
    left: -50px;
}

.section-b5__son-text1{
    position: absolute;
    left: -100px;
    top: 30px;
    width: 280px;
    transform: rotate(10deg);
}

.section-b5__son-text2{
    position: absolute;
    right: -100px;
    bottom: 30px;
    width: 280px;
    transform: rotate(-8deg);

}


/* SECTION B6 */

.section-b6{
    
    width: 100vw;
}

.section-b6::before{    
    content: url(/assets-b/jupiter-bg.png);
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: -30px;
    transform: translateX(-200vw);
    z-index: -1;

}

.section-b6__orages{
    width: 300px;
    margin-left: 200px;
    margin-top: 50px;
}

.section-b6__orages-text{
    transform: rotate(-6deg);
    margin-top: 30px;
}

.section-b6__orages-image{
    width: 280px;
    position: absolute;
    z-index: -1;
    top: 300px;
    left: 250px;
    mix-blend-mode: screen;
}

/* LUNE-1 */
.section-b6__lune{
    position: relative;
    height: 100%;
}

.section-b6__lune-1{
position: absolute;
bottom: 0;
right: 450px;
}

.section-b6__lune-1-image{
    width: 300px;
    border: 1px solid white;
    border-radius: 100%;
    padding: 20px;
}

.section-b6__lune-1-title{
    position: absolute;
    bottom: 80px;
}

.section-b6__lune-1-text-disable{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 320px;
    width: 700px;
    left: 50px;
    z-index: -1;
    clip-path: polygon(0 0, 20% 0, 20% 100%, 0% 100%);
    transition: 0.3s;
}

.section-b6__lune-1-text-enable{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 320px;
    width: 700px;
    left: 50px;
    z-index: -1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}



/* SECTION B7 */
.section-b7{
    
    width: 100vw;
}

.section-b7::before{    
    content: url(/assets-b/jupiter-bg.png);
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: -30px;
    transform: translateX(-300vw);
    z-index: -1;

}

.section-b7__lune{
    position: relative;
    height: 100%;
}

/* LUNE-2 */

.section-b7__lune-2{
    position: absolute;
    top: 100px;
    left: 10px;
}

.section-b7__lune-2-image{
    width: 250px;
    z-index: 3;
}

#section-b7__button-lune-2{
    position: absolute;
    top: 80px;
    left: 80px;
    cursor: pointer;
    background-color: transparent;
    border: none;
}

.section-b7__button-lune-2-disable{ 
    transition: 0.3s;
    transform: rotate(0deg);
}

.section-b7__button-lune-2-enable{
    transition: 0.3s;
    transform: rotate(45deg);
}

.section-b7__lune-2-text-enable{
    width:450px;
    position: absolute;
    left: 220px;
    padding-left: 50px;
    top: 80px;
    transform: rotate(6deg);
    z-index: -1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: 0.3s;
}

.section-b7__lune-2-text-disable{
    width:450px;
    position: absolute;
    left: 220px;
    padding-left: 50px;
    top: 80px;
    transform: rotate(6deg);
    z-index: -1;
    clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
    transition: 0.3s;

}

.section-b7__lune-2-text span{
    width:450px;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 10px;
}

.section-b7__lune-2-image2-enable{
    width: 300px;
    border: white solid 10px;
    z-index: -1;
    position: absolute;
    transform: rotate(-4deg);
    top: -120px;
    transition: 0.3s;
    left: 300px;
}

.section-b7__lune-2-image2-disable{
    width: 300px;
    border: white solid 10px;
    z-index: -1;
    position: absolute;
    transform: rotate(-4deg) scale(30%);
    top: -80px;
    left: 0;
    transition: 0.3s;

}





/* LUNE-3 */
.section-b7__lune-3{
    position: absolute;
    bottom: 50px;
    right: 330px;
}

.section-b7__lune-3-image{
    width: 250px;
    z-index: 3;
}

.section-b7__lune-3-image2-enable{
    width: 250px;
    z-index: -1;
    border: white solid 3px;
    position: absolute;
    left: -200px;
    top: -240px;
    transition: 0.3s;
}

.section-b7__lune-3-image2-disable{
    width: 250px;
    z-index: -1;
    border: white solid 3px;
    position: absolute;
    left: 0;
    top: -0;
    transform: scale(30%);
    transition: 0.3s;
}

.section-b7__lune-3-text-enable{
    width:450px;
    position: absolute;
    left: -360px;
    top: -50px;
    padding-right: 100px;
    transform: rotate(6deg);
    z-index: -1;
    transition: 0.3;
    clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
    transition: 0.3s;
}

.section-b7__lune-3-text-disable{
    width:450px;
    position: absolute;
    left: -360px;
    top: -50px;
    padding-right: 100px;
    transform: rotate(6deg);
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    z-index: -1;
    transition: 0.3s;
}

.section-b7__lune-3-text span{
    width:450px;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 10px;
}

#section-b7__button-lune-3{
    position: absolute;
    top: 80px;
    left: 80px;
    background-color: transparent;
    border: none;
    transition: 0.3s;
    cursor: pointer;
}

.section-b7__button-lune-3-enable{
    transform: rotate(45deg);
}

/* LUNE-4 */

.section-b7__lune-4{
position: absolute;
bottom: 0;
right: 0px;
top: 0;
}

.section-b7__lune-4-image{
    width: 300px;
    border: 1px solid white;
    border-radius: 100%;
    padding: 20px;
}

.section-b7__lune-4-title{
    position: absolute;
    text-align: right;
    top: 0;
    right: 0;
}

.section-b7__lune-4-text-disable{
    position: absolute;
    top: 150px;
    transform: translateY(-50%);
    padding-right: 200px;
    width: 500px;
    left: 50px;
    z-index: -1;
    left: -300px;
    clip-path: polygon(73% 0, 100% 0, 100% 100%, 69% 100%);
    transition: 0.3s;

}

.section-b7__lune-4-text-enable{
    position: absolute;
    top: 150px;
    transform: translateY(-50%);
    padding-right: 200px;
    width: 500px;
    left: 50px;
    z-index: -1;
    left: -300px;
    clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
}



/* SECTION B9 */
.section-b8{
    
    width: 100vw;
    position: relative;
}

.section-b8::before{    
    content: url(/assets-b/jupiter-bg.png);
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: -30px;
    transform: translateX(-400vw);
    z-index: -1;

}

.section-b8__anneaux-image{
    position: absolute;
    height: 60vh;
    left: -1460px;
    bottom: -180px;
}

#section-b8__button-anneaux{
    background-color: transparent;
    border: none;
    bottom: 50px;
    position: absolute;
    left: 830px;
}

.section-b8__button-anneaux-enable{
    transform: rotate(45deg);
    transition: 0.3s;
    cursor: pointer;
}

.section-b8__button-anneaux-disable{
    transform: rotate(0deg);
    transition: 0.3s;
    cursor: pointer;
}

.section-b8__anneaux-title{
    position: absolute;
    text-align: right;
    bottom :200px;
    left: 1200px ;
}

.section-b8__anneaux-text-enable{
    width: 400px;
    position: absolute;
    transform: rotate(8deg);
    padding-left: 80px;
    left: 800px;
    bottom: 200px;
    transition: 0.3s;
}

.section-b8__anneaux-text-disable{
    width: 400px;
    position: absolute;
    transform: rotate(8deg) scale(0%);
    padding-left: 80px;
    left: 700px;
    bottom: 0px;
    transition: 0.3s;

}

.section-b8__anneaux-image2-enable{
    width: 300px;
    border: white solid 3px;
    position : absolute;
    transform: rotate(-6deg);
    left: 550px;
    bottom: 280px;
    transition: 0.3s;

}

.section-b8__anneaux-image2-disable{
    width: 300px;
    border: white solid 3px;
    position : absolute;
    transform: rotate(-6deg) scale(0%);
    left: 620px;
    bottom: 10px;
    transition: 0.3s;
}

/* SECTION B9 */
.section-b9{
    
    width: 100vw;
    position: relative;
}
.section-b9__text1{
    position: absolute;
    top: 500px;
    left: 0px;
}

.section-b9__text1 span{
    margin-right: 40px;
}

.section-b9__text2{
    position: absolute;
    top: 520px;
    left: 700px;
    width: 300px;
}

.section-b9__text3{
    position: absolute;
    top: 540px;
    right: 200px;
    width: 300px;
}

.section-b9__text4{
    position: absolute;
    top: 602px;
    right: 50px;
    width: 100px;
}

/* section b10 */
.section-b10{
    width: 100vw;
    position: relative;
}
.section-b10__text1{
    position: absolute;
    top: 602px;
    left: 50px;
    width: 150px;
}

.section-b10__text2{
    position: absolute;
    top: 602px;
    left: 300px;
    width: 300px;
}

.section-b10__text3{
    position: absolute;
    top: 650px;
    left: 480px;
    width: 100px;

}

.section-b10__text4{
    position: absolute;
    top: 602px;
    left: 700px;
    width: 200px;

}

.section-b10__text5{
    position: absolute;
    top: 650px;
    right: 100px;
    width: 300px;
}