.room-1{
    overflow-y: hidden;
    overflow-x: hidden;
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    position: fixed;
    height: max-content;
    display: none;
    background-color: white;
    margin: 0;
    padding: 0;
    background-color: #000;
    color: white;
    font-family: "Space Mono", monospace;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    display: flex;
    overflow-y: hidden;
    width: fit-content;
    height: 100vh;
    z-index: 10000;
    opacity: 0;
    transition: 2s;
    
    
}

.room-1--accueil,
.room-1--resultat-A,
.room-1--resultat-B,
.room-1--resultat-C,
.room-1--resultat-D{
    background-color: white;
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: 10000;
    top: 0;
    left:0;
    opacity: 1;
    user-select: auto;
    /* la transition est présente sur toute la section */
    transition: all 1s cubic-bezier(1, 0, 0, 1.01) ;

}
/* ordre des calques */
.room-1--accueil{
    z-index: -500;
}
.room-1--resultat-A{
    z-index: -400;
    background-color: transparent;
    transition: all 1s cubic-bezier(1, 0, 0, 1.01) ;
    transform: scale(100%);
}
.room-1--resultat-B{
    z-index: -300;
    background-color: transparent;
    transition: all 1s cubic-bezier(1, 0, 0, 1.01) ;
    transform: scale(100%);
}
.room-1--resultat-C{
    z-index: -200;
    background-color: transparent;
    transition: all 1s cubic-bezier(1, 0, 0, 1.01) ;
    transform: scale(100%);
}
.room-1--resultat-D{
    z-index: -100;
    background-color: transparent;
    transition: all 1s cubic-bezier(1, 0, 0, 1.01) ;
    transform: scale(100%);
}
/* désactivation des sections */
    .room-1--accueil-inactive,
    .room-1--resultat-A-inactive,
    .room-1--resultat-B-inactive,
    .room-1--resultat-C-inactive,
    .room-1--resultat-D-inactive{
    opacity: 0;
    user-select: none;
    transform: scale(0%);
    transition: all 0.8s cubic-bezier(1, 0, 0, 1.01) ;
    }
/* overlay */
.room-1--overlay--active{
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 85%);
    z-index: 500;
    transition: all 0.5s ease-in ;
}
.room-1--overlay--inactive{
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0%);
    z-index: 500;
    transition: all 0.5s ease-in ;
}
/* image de background */
    .room-1--container{
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }
    .room-1--container--image-background{
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
    }
    /* CADRAGE DES PHOTOS DU BG POUR LES RESULTATS */
    /* paramètres généraux */
    /* résultat A (photo construction)*/
    .room-1--container--image-background--resultat-A{
    position: absolute;
    top: -730px;
    left: 280px;
    width: 3130px;
    height: auto;
    transition: all 1s cubic-bezier(1, 0, 0, 1.01) ;
    }
    /* résultat B (disques durs)*/
    .room-1--container--image-background--resultat-B{
        top: -660px;
        transition: all 1s cubic-bezier(1, 0, 0, 1.01) ;
        left: -290px;
        width: 3130px;
        height: auto;
        position: absolute;
        }
    /* résultat C (vidéo)*/
    .room-1--container--image-background--resultat-C{
        top: -410px;
        transition: all 1s cubic-bezier(1, 0, 0, 1.01) ;
        left: -597px;
        width: 3130px;
        height: auto;
        position: absolute;
        }
     /* résultat D (photo scientifiques*/
    .room-1--container--image-background--resultat-D{
        top: -620px;
        transition: all 1s cubic-bezier(1, 0, 0, 1.01) ;
        left: -1400px;
        width: 3130px;
        height: auto;
        position: absolute;
    }
    
    /*rendre l'image de fond non sélectionnable*/
    .unselectable {
        user-select: none;
        -moz-user-select: none;
        -webkit-user-drag: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }

/* NAV DES ROOMS*/

/* paramètres généraux : définit le placement absolute en x à 50% et le z-index*/
.room-1--nav{
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 900;

}
    /* paramètres spécifiques retour : définit le placement en y */
    .room-1--nav--accueil{
            top: 30px;
        }
    .room-1--nav--resultat{
            bottom: 60px;
            }

/*Style du bouton retour*/

/* styles généraux : appliqué à tous les boutons retours*/
.room-1--return-button{
cursor: pointer;
padding: 12px 100px 12px 100px;
display: flex;
justify-content: center;
align-items: center;
color: black;

}
/* styles spécifiques : concerne le fond*/
    /* pour l'accueil */
    .room-1--return-button--accueil{
    
        border: 1px solid black;
        
    
        }
    /* pour les pages de résultat */
    .room-1--return-button--resultat{
    
    background-color: #FF3408;
    }
    
/* label et icone (général) */

    .room-1--return-button--label{
        display: flex;
        list-style-type: none;
        text-transform: uppercase;
        font-size: 20px;
        align-items: center;
        justify-content: center;
        padding: 0;
        z-index: 9999;
    }

    .room-1--return-button--label--icon{
        display: flex;
        margin-right :10px;
    }

/* sous-titre bouton retour (accueil uniquement) */
.room-1--nav--subtitle--liste{
color: #FF3408;
display: flex;
list-style: none;
width: 100%;
padding: 0;
justify-content: space-between;
margin-top: 25px;
text-transform: uppercase;
font-size: 20px;
align-items: center;

}
/* textes du sous-titre */
.room-1--nav--subtitle--liste--date{
    padding-right: 15px;
}
.room-1--nav--subtitle--liste--step{
    padding-left: 15px;
    text-wrap: nowrap;
}
.room-1--nav--subtitle--liste--separateur{
    height: 0;
    border-top: 1px solid #FF3408;
    width: 100%;
}



/* CIBLES D'INTERACTION (accueil uniquement) */

.room-1--cible{
width: 70px;
position: absolute;
z-index: 700;
transition: all 1s cubic-bezier(1, 0, 0, 1.01) ;


}
.room-1--cible--A{

bottom: 250px;
left: 320px;
mix-blend-mode: difference;
transition: all 1s cubic-bezier(1, 0, 0, 1.01) ;


}
.room-1--cible--B{

bottom: 290px;
left: 585px;
mix-blend-mode: difference;
transition: all 1s cubic-bezier(1, 0, 0, 1.01) ;

}

.room-1--cible--C{
top:355px;
left: 727px;


transition: all 1s cubic-bezier(1, 0, 0, 1.01) ;

}
.room-1--cible--D{
right: 366px;
bottom: 321px;
mix-blend-mode: difference;
transition: all 1s cubic-bezier(1, 0, 0, 1.01) ;

}

/* MEDIAS (photos et vidéos) */
/* masquage initial des médias */
.room-1--media--inactive{
    display: none;
}
/* Photo de la construction (phase A) */
    /* bloc contenant les photos */
        /* ce bloc sert à positionner les éléments par rapport au background */
        .room-1--resultat-A--photo--container{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 700;
            display: flex;
            justify-content: center;
            transition: 0.3s

            
        }
         /* Ce bloc permet le positionnement des éléments en flex */
        .room-1--resultat-A--photo--container--phase{
            display: flex;
            flex-direction: column;
            height: fit-content;
            align-items: center;
            justify-content: center;
            width: 80%;
    transition: all 1s cubic-bezier(1, 0, 0, 1.01) ;
        }
        /* ce bloc est celui qui contient les photos */
        .room-1--resultat-A--photo{
            width: 70%;
            height: 70%;
            position: relative;
            margin-top: 100px;
        }
    /* placement individuels des photos */
        .room-1--resultat-A--photo--1{
            transform: rotate(-17.44deg);
            position:absolute;
            top: 165px;
            left: 380px;
            z-index: 800;
    transition: all 1s cubic-bezier(1, 0, 0, 1.01) ;
        }
        .room-1--resultat-A--photo--2{
            transform: rotate(18.8deg);
            position:absolute;
            top: 215px;
            left: 820px;
            z-index: 700;
    transition: all 1s cubic-bezier(1, 0, 0, 1.01) ;

        }
        .room-1--resultat-A--photo--3{
            transform: rotate(13.19deg);
            position:absolute;
            top: 95px;
            left: 730px;
            z-index: 600;
            transition: all 1s cubic-bezier(1, 0, 0, 1.01) ;

        }

    /* phase B */
        /* le bloc contenant les photos s'aggrandit et passe en flex */

        .room-1--resultat-A--photo--phase-B{
            width: fit-content;
            display: flex;
            transition: all 0.3s;

        }
        /* les photos à l'interieur ne sont plus en absolute et leur rotation est annulée
        leur hauteur est adaptée pour remplir 100% de l'espace disponible */
        .room-1--resultat-A--photo--1--phase-B, .room-1--resultat-A--photo--2--phase-B,.room-1--resultat-A--photo--3--phase-B{
            position:initial;
            transform: rotate(0deg);
            height: fit-content;
            width: 100%;
            left: 0;
            top: 0;
            transition: all 0.3s ;

        
        }
        .room-1--resultat-A--photo--1--phase-B, .room-1--resultat-A--photo--2--phase-B{
            margin-right: 10px;
        }
        /* cette classe harmonise les tailles des photos */
        .room-1--resultat-A--photo--detail--phase-B{
            height: 386px;
            width: fit-content;

        }
/* photo plan sonde */
.room-1-resultat-B--photo{
    z-index: 700;
    position: absolute;
    top: 120px;
    left: 760px;
    transform: rotate(4deg);

}

/* médias de résultat C (vidéo) */
.room-1--resultat-C--medias--ecran{
    position: absolute;
    z-index: 700;
    width: 547px;
    top: 170px;
    left: 615px;
    transition: all 1s cubic-bezier(1, 0, 0, 1.01) ;

}
.room-1--resultat-C--medias--video{
    z-index: 700;
    position: absolute;
    top: 220px;
    left: 664px;
    width: 450px;
    border-radius: 16px;
    transition: all 1s cubic-bezier(1, 0, 0, 1.01) ;

}


/* photo décollage sonde (résultat C) */
.room-1-resultat-C--photo-decollage{
    position: absolute;
    z-index: 700;
    top: 40px;
    right: 60px;
    transform: rotate(8deg);
    transition: all 1s cubic-bezier(1, 0, 0, 1.01) ;

}
    
/* photo des scientifiques */
    /* photo des scientifiques (accueil room)*/

        .room-1--photo-scientifique{
        background-color: black;
        position: absolute;
        height: 163px;
        width: 135px;
        z-index: 300;
        transform: rotate(1deg);
        overflow: hidden;
        right: 313px;
        bottom: 293px;
        transform: translate(0);
        z-index: 600;
    transition: all 1s cubic-bezier(1, 0, 0, 1.01) ;

        }
        .room-1--photo-scientifique--photo{
        height: 100%;
        object-fit: cover;
        transform: translateX(-25%);
    transition: all 1s cubic-bezier(1, 0, 0, 1.01) ;


        }
    /* photo des scientifiques (résultat)*/

        .room-1--photo-scientifique--active{
        background-color: aqua;
        position: absolute;
        height: 439px;
        width: 691px;
        z-index: 300;
        
        overflow: hidden;
        /* les valeurs absolute de right et bottom sont transformées en pourcentages
        pour que l'image soit parfaitement centrée.
        La propritété transform passe de 0 à 50/50%  */
        right: 50%;
        bottom: 50%;
        transform: translate(50%, 50%) rotate(5deg);
        z-index: 600;
    transition: all 1s cubic-bezier(1, 0, 0, 1.01) ;

        }
        .room-1--photo-scientifique--photo--active{
        height: 100%;
        object-fit: cover;
        transform: translateX(0);
        transition: all 1s cubic-bezier(1, 0, 0, 1.01) ;
        }

/* TEXTES (résultats */
/* masquage initial des textes */
.room-1--resultat--texte--inactive{
    display: none;
}
/* paramètres généraux */
/* titres */
.room-1--resultat--titre{
    font-size: 23px;
    color: #FF3408;
    text-wrap: nowrap;
    margin-bottom: 15px;
    z-index: 700;

}
/* paragraphes */
.room-1--resultat--texte{
    z-index: 700;
    color: #FF3408;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    font-size: 19px;
    line-height: 30.8px;
}

/* largeurs spécifiques des textes */
.room-1--resultat--texte--B{
   
    width: 28%;
}
.room-1--resultat--texte--C{
   
    width: 28%;
}
.room-1--resultat--texte--D{
   
    width: 19%;
    
}


/* placement spécifiques des textes */
    /* texte de gauche (resulat B)*/
    .room-1--resultat--texte--B--part-1{
        margin-left: 150px;
        left: 0;
        /* ligne qui sert à la transition des textes quand ils apparaissent : vérifier ? */
        transition: margin-left 0.5s ease-in;
    }
        /* texte de gauche (resulat C)*/
        .room-1--resultat--texte--C--part-1{
            margin-left: 75px;
            left: 0;
            /* ligne qui sert à la transition des textes quand ils apparaissent : vérifier ? */
            transition: margin-left 0.5s ease-in;
        }
    /* texte de gauche (resulat D)*/
    .room-1--resultat--texte--D--part-1{
        margin-left: 75px;
        left: 0;
        /* ligne qui sert à la transition des textes quand ils apparaissent : vérifier ? */
        transition: margin-left 0.5s ease-in;
    }
    /* texte de droite (resultat D*/
    .room-1--resultat--texte--D--part-2{
        margin-right: 75px;
        right: 0;
        /* ligne qui sert à la transition des textes quand ils apparaissent : vérifier ? */
        transition: margin-right 0.5s ease-in;
        

    }
    /* styles spécifiques de paragraphes */
    .room-1--resultat-A--texte{
        display: flex;
        width: 100%;
        justify-content: space-between;
        transition: 0.3s;
    }
    .room-1--resultat--texte--B{
        z-index: 700;
        color: #FF3408;
        font-size: 16px;
        line-height: 20.8px;
        max-width: 33%;
        min-width: 32%;
        padding-right: 10px;
    }
    .room-1--resultat--titre--B{
        text-transform: uppercase;
        font-size: 23px;
        text-wrap: nowrap;
        margin-bottom: 15px;
        color: #FF3408;
        margin-top: 30px;
    }
    /* cartouche résultat C */
    .cartouche-c{
        z-index: 700;
        
        width: 100vw;
        bottom: 50px;
        right: 110px;
        transform: rotate(-7deg);
    }

    .room-1--resultat-C--titre-cartouche{
        font-size: 23px;
    }
    .room-1--resultat-C--texte--cartouche{
        font-size: 17px;
    }