::-webkit-scrollbar {
    display: none;
}

* {
    box-sizing: border-box;
}

body {
    background-color: black;
    cursor: url('images/souris.png') 40 40, auto;
    margin: 0;
    padding: 0;
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
}

label {
    cursor: url('images/souris.png') 40 40, auto;
}

input {
    font-family: "EB Garamond", serif;
    color: white;
    font-size: 1vw;
    border: none;
    background: none;
}

input:focus {
    outline: none;
}

a {
    color: white;
}

.interactif {
    cursor: url('images/sourissélect.png') 40 40, auto;
}

/* === CLASSES COMMUNES === */
.position-fixed {
    position: fixed;
}

.position-absolute {
    position: absolute;
}

.full-width {
    width: 100vw;
}

.full-height {
    height: 100vh;
}

.auto-height {
    height: auto;
}

.z-high {
    z-index: 999;
}

.z-medium {
    z-index: 10;
}

.z-low {
    z-index: 1;
}

.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 100%;
}

.display-none {
    display: none;
}

.transition-opacity {
    transition: opacity 2s;
}

.transition-all {
    transition: all 2s;
}

/* === ÉLÉMENTS PRINCIPAUX === */
#V {
    position: fixed;
    height: auto;
    width: 35vw;
    z-index: 999;
    top: 6vw;
    left: 32.5vw;
    display: none;
    opacity: 0;
    transition: opacity 2s;
}

#réflexion,#contre-pensé {
    position: fixed;
    height: auto;
    width: 100vw;
    z-index: 999;
    top: 15vw;
    text-align: center;
    transition: opacity 2s;
    font-size: 3vw;
    color: #ffffff;
    display: none;
    opacity: 0;
}

#fonddepensée{
    position: fixed;
    height: auto;
    width: 100vw;
    z-index: 999;
    top: 22vw;  
    text-align: center;  
    transition: 2.5s;
    transition-property: opacity;  
    font-size: 3vw;
    color: #ffffff;
    display: none;
    opacity: 0;
}

#contre-pensé {
      transition: opacity 1.5s;  
}

#limite {
    position: absolute;
    top: 999vw;
    width: 100vw;
    height: 100vh;
    left: 0;
    background-color: rgb(0, 0, 0);
    z-index: 89;
    margin: 0;
    padding: 0;
    opacity: 0%;
    transition: opacity 5s;
}

#rotationécran {
        position: fixed;
height: auto;
width: 100vw;
top: 25vh;
    display: none;
    z-index: 999;
}

/* === ARRIÈRE-PLANS ET DÉCORS - PAGE 1 === */
#arrièreplanp1,
#arrièreplancp1,
#arrièreplanep1,
#arrièreplansp1,
#balconnuages {
    position: absolute;
    height: auto;
    width: 100vw;
    z-index: -1;
    top: 0vw;
    left: 0vw;
}

#arrièreplansp1 {
    top: 40vw;
}

#arrièreplanep1,
#balconnuages {
    z-index: 0;
    opacity: 0%;
    transition: opacity 13s;
}

#balconnuages {
    display: none;
    z-index: -5;
}

/* === EFFETS MÉTÉO === */
#foudre1,
#foudre2,
#foudre3 {
    position: absolute;
    height: auto;
    width: 100vw;
    z-index: -5;
    top: 0vw;
    left: 0vw;
    opacity: 0;
    transition: opacity 0.5s;
}

#stormeffect,
#stormeffectpremierplan {
    position: absolute;
    z-index: -7;
    height: auto;
    width: 100vw;
    top: 0vw;
    left: 0vw;
    opacity: 0%;
    transition: opacity 10s;
    display: inline;
}

#stormeffectpremierplan {
    width: 100vw;
    z-index: -1;
}

/* === PREMIER PLANS === */
#premierplanp1,
#premierplanp1l {
    position: absolute;
    height: auto;
    width: 100vw;
    z-index: 0;
    top: 0vw;
    left: 0vw;
    background-color: transparent;
}

#premierplanp1l,
#arrièreplanp3l {
    opacity: 0%;
    transition: opacity 4s;
}

#premierplantp1 {
    position: absolute;
    height: auto;
    width: 100vw;
    z-index: 2;
    top: 0vw;
    left: 0vw;
}

/* === DOCUMENTS ET INTERFACE === */
#règles,
#document1_1,
#document1_2 {
    position: fixed;
    height: auto;
    width: 100vw;
    z-index: 10;
    top: 0vw;
    left: 0vw;
    transition: opacity 2s, top 1s;
}

#document1_1,
#document1_2 {
    display: none;
    opacity: 0%;
}

#fermerlivre {
    position: fixed;
    height: 4vw;
    width: 5.5vw;
    z-index: 11;
    top: 4vw;
    left: 86vw;
}

#pagesuivante {
    position: fixed;
    height: 4vw;
    width: 5.5vw;
    z-index: 11;
    top: 8.5vw;
    left: 86vw;
    transition: all 1s;
}

/* === CONTRÔLES AUDIO/EFFETS === */
#activermusique,
#activereffet,
#signeavertissement {
    position: absolute;
    height: auto;
    width: 12vw;
    z-index: 12;
    top: 38.3vw;
    left: 24.85vw;
    transition: opacity 0.5s, top 1s;
    opacity: 0%;
}

#activereffet {
    left: 60.5vw;
}

#signeavertissement {
    height: auto;
    width: 4.5vw;
    top: 33.3vw;
    left: 64.5vw;
}

/* === PAGE 2 - ARRIÈRE-PLANS ET MILIEUX === */
#arrièreplanp2,
#millieuplanp2,
#premierplanp2 {
    position: absolute;
    height: auto;
    width: 100vw;
    z-index: 1;
    top: 190vw;
    left: 0vw;
    transition: filter 4s;
}

/* Arrière-plans multiples page 2 */
#arrièreplanm1p2,
#arrièreplanm2p2,
#arrièreplanm3p2,
#arrièreplanm4p2,
#arrièreplanm5p2,
#arrièreplanm6p2,
#arrièreplanm7p2,
#arrièreplanm8p2,
#arrièreplanm9p2,
#arrièreplanm10p2,
#arrièreplanm11p2,
#arrièreplanm12p2,
#arrièreplanm13p2,
#arrièreplanm14p2 {
    position: absolute;
    height: auto;
    width: 100vw;
    z-index: 1;
    top: 190vw;
    left: 0vw;
    transition: filter 4s;
    display: none;
}

/* Éclats */
#éclat1, #éclat2, #éclat3, #éclat4, #éclat5,
#éclat6, #éclat7, #éclat8, #éclat9, #éclat10,
#éclat11, #éclat12, #éclat13, #éclat14 {
    display: none;
}

#svg {
    position: absolute;
    height: auto;
    width: 100vw;
    z-index: 3;
    top: 190vw;
    left: 0vw;
    opacity: 0;
}

#svg2 {
    position: absolute;
    top: 640vw;
    z-index: 10;
}

/* === PAGE 3 === */
#premierplanp3,
#premierplanp32 {
    position: absolute;
    height: auto;
    width: 100vw;
    z-index: 1;
    top: 375vw;
    left: 0vw;
}

#premierplanp32 {
    width: 62vw;
    z-index: 4;
    display: none;
}

#arrièreplanp3,
#arrièreplanp3l,
#arrièreplanmp3,
#arrièreplanfp3,
#arrièreplanep3,
#arrièreplansp3 {
    position: absolute;
    height: auto;
    width: 100vw;
    z-index: 0;
    top: 375vw;
    left: 0vw;
}

#arrièreplanmp3,
#arrièreplanfp3,
#arrièreplanep3,
#arrièreplansp3 {
    z-index: -1;
}

#arrièreplanep3,
#premierplanp5l {
    opacity: 0%;
}

#arrièreplansp3 {
    top: 392vw;
}

#ancrechoix {
    position: absolute;
    height: auto;
    width: 100vw;
    z-index: 1;
    top: 410vw;
    left: 0vw;
}

/* === PAGE 4 === */
#arrièreplanp4,
#mains1,
#entrée {
    position: absolute;
    height: auto;
    width: 100vw;
    z-index: 0;
    top: 590vw;
    left: 0vw;
}

#mains1 {
    z-index: -99;
    opacity: 100%;
    display: none;
}

#éclat05 {
    opacity: 0;
    display: none;
}

#entrée {
    height: 10vw;
    top: 510vw;
}

/* Portes page 4 */
#porte1,
#porte2,
#porte3,
#porte4,
#porte5 {
    position: absolute;
    height: 11vw;
    width: 7vw;
    z-index: 3;
    top: 435vw;
    left: 2vw;
}

#porte2 { left: 23vw; }
#porte3 { left: 70vw; }
#porte4 { left: 90vw; }
#porte5 { 
    left: 49vw;
    width: 15vw;
    height: 13vw;
}

/* === PAGES 5-8 (ÉLÉMENTS FIXES) === */
#arrièreplanp5,
#arrièreplanp5j,
#arrièreplan2p5,
#arrièreplan2p5f {
    position: fixed;
    height: auto;
    width: 100vw;
    z-index: 1;
    top: 0vw;
    left: -100vw;
}

#arrièreplanp5,
#arrièreplanp5j {
    z-index: -1;
}

#premierplanp5,
#toutpremierplanp5,
#premierplanp5f,
#premierplanp5l,
#premierplanp6,
#premierplanp8 {
    position: fixed;
    height: auto;
    width: 100vw;
    z-index: 1;
    top: 0vw;
    left: -100vw;
}

/* Éléments musicaux */
#disque1,
#disque2 {
    position: fixed;
    height: 7vw;
    width: 7vw;
    z-index: 3;
    top: 19.5vw;
}

#disque1 { left: -53vw; }
#disque2 { left: -47vw; }

#piano {
    position: fixed;
    height: 20vw;
    width: 25.5vw;
    z-index: 3;
    top: 34vw;
    left: -66vw;
}

#arrièreplanp6 {
    position: fixed;
    height: auto;
    width: 100vw;
    z-index: 1;
    top: 0vw;
    left: -100vw;
}

#premierplanp7,
#premierplanp72,
#arrièreplanp7,
#arrièreplanp73,
#arrièreplanp74 {
    position: fixed;
    height: auto;
    width: 100vw;
    z-index: -1;
    top: 0vw;
    left: -100vw;
}

#premierplanp72 {
    z-index: 4;
    width: 50vw;
}

#premierplanp7,
#arrièreplanp7 {
    z-index: 0;
}

#arrièreplanp8,
#arrièreplan3p8 {
    position: fixed;
    height: auto;
    width: 100vw;
    z-index: 1;
    top: 0vw;
    left: -100vw;
}

#arrièreplan3p8 {
    z-index: -1;
}

/* === ÉLÉMENTS INTERACTIFS === */
#merch1 {
    position: fixed;
    height: 11vw;
    width: 5vw;
    z-index: 3;
    top: 27vw;
    left: 140vw;
    opacity: 0%;
}

#portesallegauche {
    position: fixed;
    height: 35.4vw;
    width: 8.5vw;
    z-index: 3;
    top: 17.5vw;
    left: -91.5vw;
}

#portemerch {
    position: fixed;
    height: 10vw;
    width: 8vw;
    z-index: 3;
    top: 38vw;
    left: 192vw;
    opacity: 0%;
}

#livre1 {
    position: fixed;
    height: auto;
    width: 5vw;
    z-index: 3;
    top: 21.8vw;
    left: -70.2vw;
}

#livre2 {
    position: fixed;
    height: auto;
    width: 10vw;
    z-index: 1;
    top: 20vw;
    left: 130vw;
    display: none;
}

#paramètres {
    position: fixed;
    height: 5vw;
    width: 5vw;
    z-index: 3;
    top: 40.5vw;
    left: -100vw;
}

/* === DONNÉES DEBUG === */
#données,
#données2,
#données3,
#données4,
#données5,
#données6,
#données7,
#données8,
#données9,
#données10,
#données11,
#données12,
#données13,
#données14,
#données15,
#données16,
#données17,
#données18,
#données19,
#données20,
#données21,
#données22 {
    position: fixed;
    z-index: 100;
    left: 0vw;
    color: white;
}

#données { top: 0vh; }
#données2 { top: 5vh; }
#données3 { top: 10vh; }
#données4 { top: 15vh; }
#données5 { top: 20vh; }
#données6 { top: 25vh; }
#données7 { top: 30vh; }
#données8 { top: 35vh; }
#données9 { top: 40vh; }
#données10 { top: 45vh; }
#données11 { top: 50vh; }
#données12 { top: 55vh; }
#données13 { top: 60vh; }
#données14 { top: 65vh; }
#données15 { top: 70vh; }
#données16 { top: 75vh; }
#données17 { top: 78vh; }
#données18 { top: 81vh; }
#données19 { top: 84vh; }
#données20 { top: 87vh; }
#données21 { top: 91vh; }
#données22 { top: 94vh; }

/* === SYSTÈME E-COMMERCE === */
#ficheproduit {
    position: fixed;
    z-index: 90;
    width: 100vw;
    height: 100vh;
    top: -120vh;
    left: 0;
    transition: top 2s;
}

#pageproduit,
#fermerproduit {
    position: fixed;
    z-index: 90;
    width: 100vw;
    height: auto;
    top: -140vh;
    left: 0;
    transition: top 2s;
}

#fermerproduit {
    width: 6vw;
    height: 6vw;
    top: -138.5vh;
    left: 94vw;
    margin: 0;
}

#ref1 {
    position: absolute;
    z-index: 91;
    width: 50vw;
    height: auto;
    left: 25vw;
    top: 0vw;
}

#suppmerch {
    position: absolute;
    z-index: 91;
    width: 10vw;
    height: auto;
    left: 90vw;
    top: 0vw;
}

#achat {
    position: absolute;
    height: auto;
    width: 20vw;
    z-index: 91;
    left: 40vw;
    top: 40vw;
}

#prix {
    position: absolute;
    height: auto;
    width: 20vw;
    z-index: 91;
    left: 60vw;
    top: 30vw;
}

#titreproduit {
    position: absolute;
    height: auto;
    width: 20vw;
    z-index: 91;
    left: 30vw;
    top: 30vw;
}

/* Produits */
#produit1,
#produit2,
#produit3,
#produit4,
#produit5,
#produit6,
#produit7,
#produit8 {
    position: absolute;
    z-index: 91;
    width: 20vw;
    height: auto;
    left: 2.5vw;
    top: 5vh;
}

#produit2, #produit6 { left: 27.5vw; }
#produit3, #produit7 { left: 52.5vw; }
#produit4, #produit8 { left: 77.5vw; }
#produit5, #produit6, #produit7, #produit8 { top: 40vh; }

/* === SYSTÈME UTILISATEUR === */
#texteprésentation,
#news,
#connection,
#créercompte,
#mailinsert,
#destruction,
#notifications,
#notifproduits,
#notifBD,
#historiquecommandes,
#inscriptionMessage,
#connexionMessage,
#notifproduitsCheckbox,
#notifBDCheckbox,
#destructionCheckbox {
    position: fixed;
    z-index: 11;
    width: 21vw;
    height: auto;
    left: 20.5vw;
    top: 11vw;
    display: none;
    opacity: 0%;
    transition: opacity 0.25s, top 0.25s;
    font-size: 1.6vw;
    text-align: center;
    color: #161638;
    font-weight: normal;
}

#signaux {
    position: fixed;
    width: 100vw;
    height: 5vh;
    left: 0vw;
    top: 0vw;
    transition: top 1s;
    display: inline;
    z-index: 12;
}

#texteprésentation,#news,#connection,#créercompte,#connexionMessage#inscriptionMessage{
        display: inline;
            transition: opacity 0.25s, top 1s;
}

#connection,#créercompte{
    display: none;
}

/* Éléments masqués par défaut */
#notifications,
#notifproduits,
#notifBD,
#historiquecommandes,
#mailinsert,
#destruction,
#paramètrestitre,
#notifproduitsCheckbox,
#notifBDCheckbox,
#destructionCheckbox {
    display: none;
}

/* Positionnements spécifiques */
#news, #créercompte, #notifproduits, #notifBD, #historiquecommandes { left: 56.1vw; }
#connection { left: 21vw; }
#mailinsert { top: 13vw; }
#destruction { top: 36vw; }
#notifications { top: 20vw; }
#notifproduits { top: 13vw; }
#notifBD { top: 26vw; }
#historiquecommandes { top: 42vw; }

/* Checkboxes */
#notifproduitsCheckbox, #notifBDCheckbox {
    width: 5vw;
    left: 64vw;
}
#notifproduitsCheckbox { top: 21vw; }
#notifBDCheckbox { top: 32vw; }
#destructionCheckbox {
    width: 5vw;
    top: 40vw;
    left: 28vw;
}

/* Messages */
#inscriptionMessage,
#connexionMessage {
    top: 29vw;
    font-size: 2vw;
    left: 0vw;
}

/* Champs de connexion */
#creamail_insc,
#mdp_insc,
#mdp_conf,
#mail_login,
#mdp_login {
    border: none;
    background: none;
}

/* Boutons */
#submit,
#submit2,
#deconnexion {
    position: absolute;
    width: 4.5vw;
    top: 18vw;
    left: 8vw;
}

#submit2 { top: 23.5vw; }
#deconnexion {
    top: 22vw;
    left: 16vw;
}

#resterconnecte,
#termsCheckbox {
    position: relative;
    width: 3vw;
    top: 1vw;
}

/* === STYLES DE PAGE === */
#pagestyle,
#pagestyle2,
#pagestyle3,
#pagestyle4 {
    position: fixed;
    z-index: 11;
    width: 33.5vw;
    height: auto;
    left: 14vw;
    top: 3vw;
    display: inline;
    opacity: 0%;
    transition: opacity 0.5s, top 1s;
}

#pagestyle2,
#pagestyle4 {
    left: 50vw;
}

#pagestyle2 {
    transform: scaleX(-1);
}

#titre,
#newst,
#paramètrestitre,
#notifications {
    position: fixed;
    z-index: 11;
    width: 35.5vw;
    height: auto;
    left: 13.2vw;
    top: 6.5vw;
    display: inline;
    opacity: 0%;
    transition: opacity 0.5s, top 1s;
    font-size: 2.5vw;
    color: #2a2b6c;
    text-align: center;
    font-family: "Cinzel Decorative", serif;
    font-weight: 700;
    font-style: normal;
}

#newst,
#notifications {
    left: 49vw;
}

#loader {
    position: fixed;
    z-index: 99;
    width: auto;
    height: 100vh;
    left: 25vw;
    top: 0vw;
    transition: opacity 1.5s;
}

#portegauche,
#portedroite {
    position: fixed;
    z-index: 12;
    width: 50vw;
    height: 100vh;
    left: 0vw;
    top: 0vw;
    margin: 0;
    padding: 0;
    background-color: rgb(0, 0, 0);
    transition: width 1.5s, left 1.5s;
}

#portedroite {
    left: 50vw;
}

#serrure,
#musiqueactive,
#musiqueinactive {
    position: fixed;
    z-index: 90;
    width: auto;
    height: 20vw;
    left: 44vw;
    top: 17vw;
    margin: 0;
    padding: 0;
    transition: opacity 1.5s;
    display: none;
    opacity: 0;
}

#musiqueinactive {
    width: 30vw;
    height: auto;
    left: 65vw;
    top: 10vw;
        transition: opacity 1s;
}

#musiqueactive {
    width: 30vw;
    height: auto;
    left: 5vw;
    top: 10vw;
            transition: opacity 1s;
}

/* === ÉLÉMENTS STRUCTURELS === */
#escalier,
#couloir {
    position: absolute;
    top: 55vw;
    left: 0;
    width: 100vw;
    height: 100vw;
    background-color: black;
}

#couloir {
    top: 250vw;
    height: 118vw;
}

#partie1 {
    display: none;
}

/* === EFFETS ATMOSPHÉRIQUES === */
#luminosité {
    z-index: 1;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: black;
    top: 0;
    left: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 5s;
}

#éclaireffet {
    z-index: 2;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: #ffffff;
    top: 0;
    left: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 0.15s;
}

/* === ANIMATION PLUIE === */
.container {
    position: relative;
    height: 110vh;
    width: 100vw;
    top: 0;
}

.rain {
    z-index: -4;
    top: 0;
    position: absolute;
    opacity: 0%;
    transition: opacity 10s;
    display: none;
}

.rain span {
    top: 0;
    position: absolute;
    width: 2px;
    height: 10px;
    background: #72788c;
    border-radius: 50%;
    animation: animate 5s linear infinite;
    animation-duration: calc(15s / var(--i));
}

/* Positions des gouttes de pluie */
.rain span:nth-child(1) { left: 13.9vw; }
.rain span:nth-child(2) { left: 67.2vw; }
.rain span:nth-child(3) { left: 7.5vw; }
.rain span:nth-child(4) { left: 10vw; }
.rain span:nth-child(5) { left: 12.5vw; }
.rain span:nth-child(6) { left: 15vw; }
.rain span:nth-child(7) { left: 17.5vw; }
.rain span:nth-child(8) { left: 20vw; }
.rain span:nth-child(9) { left: 22.5vw; }
.rain span:nth-child(10) { left: 25vw; }
.rain span:nth-child(11) { left: 27.5vw; }
.rain span:nth-child(12) { left: 30vw; }
.rain span:nth-child(13) { left: 32.5vw; }
.rain span:nth-child(14) { left: 35vw; }
.rain span:nth-child(15) { left: 37.5vw; }
.rain span:nth-child(16) { left: 40vw; }
.rain span:nth-child(17) { left: 42.5vw; }
.rain span:nth-child(18) { left: 45vw; }
.rain span:nth-child(19) { left: 47.5vw; }
.rain span:nth-child(20) { left: 50vw; }
.rain span:nth-child(21) { left: 52.5vw; }
.rain span:nth-child(22) { left: 55vw; }
.rain span:nth-child(23) { left: 57.5vw; }
.rain span:nth-child(24) { left: 60vw; }
.rain span:nth-child(25) { left: 62.5vw; }
.rain span:nth-child(26) { left: 65vw; }
.rain span:nth-child(27) { left: 67.5vw; }
.rain span:nth-child(28) { left: 70vw; }
.rain span:nth-child(29) { left: 72.5vw; }
.rain span:nth-child(30) { left: 75vw;}
.rain span:nth-child(31){
    left: 77.5vw;
}
.rain span:nth-child(32){
    left: 80vw;
}
.rain span:nth-child(33){
    left: 82.5vw;
}
.rain span:nth-child(34){
    left: 85vw;
}
.rain span:nth-child(35){
    left: 87.5vw;
}
.rain span:nth-child(36){
    left: 90vw;
}
.rain span:nth-child(37){
    left: 92.5vw;
}
.rain span:nth-child(38){
    left: 53.7vw;
}
.rain span:nth-child(39){
    left: 44.2vw;
}
.rain span:nth-child(40){
    left: 68.4vw;
}
.rain span:nth-child(41){
    left: 8.7vw;
}
.rain span:nth-child(42){
    left: 22.1vw;
}
.rain span:nth-child(43){
    left: 38.4vw;
}
.rain span:nth-child(44){
    left: 47.2vw;
}
.rain span:nth-child(45){
    left: 56.8vw;
}
.rain span:nth-child(46){
    left: 67.2vw;
}
.rain span:nth-child(47){
    left: 72.9vw;
}
.rain span:nth-child(48){
    left: 85.9vw;
}
.rain span:nth-child(49){
    left: 98.2vw;
}
.rain span:nth-child(50){
    left: 7.8vw;
}
.rain span:nth-child(51){
    left: 11.65vw;
}
.rain span:nth-child(52){
    left: 28.4vw;
}
.rain span:nth-child(53){
    left: 32.6vw;
}
.rain span:nth-child(54){
    left: 45.4vw;
}
.rain span:nth-child(55){
    left: 58.4vw;
}
.rain span:nth-child(56){
    left: 64.8vw;
}
.rain span:nth-child(57){
    left: 79.2vw;
}
.rain span:nth-child(58){
    left: 86.2vw;
}
.rain span:nth-child(59){
    left: 95.8vw;
}
.rain span:nth-child(60){
    left: 55.7vw;
}

#éclaireffet{
    z-index: 2;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background:#ffffff;
    top: 0;
    left: 0;
    margin: 0;
    opacity: 0;
    transition:0.15s opacity;
}

@keyframes animate {
    0%{
        transform: translateY(0vh);
    }
    100%{
        transform: translateY(100vh);
    }
}

@media (max-aspect-ratio: 16/9) {

    #loader{
        display: none;
    }

    #serrure,#musiqueactive,#musiqueinactive{
        top: 30vh;
    }

    #rotationécran{
        display: inline;
    }

    #limite{
        top: 0vw;
    }
  }

  @media (min-aspect-ratio: 16/9) {
    #serrure,#loader{
    display: inline;
    }
    #serrure{
        width: auto;
        height: 20vw;
        left: 44vw;
        top: 17vw; 
    }

    #rotationécran{
        display: none;
    }

    #limite{
        top: 999vw;
    }
  }

@media only screen and (max-width: 1000px) {
 #réflexion,#contre-pensé,#fonddepensée{
        font-size: 7vw;
 }
#premierplanp7,#premierplanp72,#arrièreplanp7,#arrièreplanp73,#arrièreplanp74,#arrièreplanp6,#premierplanp6,#portemerch,#merch1,#arrièreplan3p8,#arrièreplanp8,#premierplanp8{
     top: -10vw;
}
#arrièreplanp5,#arrièreplanp5j,#arrièreplan2p5,#arrièreplan2p5f,#premierplanp5,#premierplanp5f,#premierplanp5l,#toutpremierplanp5{
    top: -10vw;
}

#texteprésentation,#news,#mailinsert,#destruction,#notifproduits,#notifBD,#historiquecommandes,#inscriptionMessage,#connexionMessage,#notifproduitsCheckbox,#notifBDCheckbox,#destructionCheckbox {
    font-size: 1.4vw;
}

#activermusique,#activereffet{
top: 33vw;
}

#signeavertissement{
   top: 28.3vw; 
}

#livre1,#livre2{
top: 11.8vw;
}

#paramètres{
   top: 30.5vw; 
}

#disque1,
#disque2 {
        top: 9.5vw;
}

#fatigue{
   top: -5vw; 
}
}
@media only screen and (min-width: 1001px) {
 #réflexion,#contre-pensé,#fonddepensée{
        font-size: 4vw;
 }
#premierplanp7,#premierplanp72,#arrièreplanp7,#arrièreplanp73,#arrièreplanp74,#arrièreplanp6,#premierplanp6,#portemerch,#merch1,#arrièreplan3p8,#arrièreplanp8,#premierplanp8{
     top: 0vw;
}
#arrièreplanp5,#arrièreplanp5j,#arrièreplan2p5,#arrièreplan2p5f,#premierplanp5,#premierplanp5f,#premierplanp5l,#toutpremierplanp5{
    top: 0vw;
}

#texteprésentation,#news,#mailinsert,#destruction,#notifproduits,#notifBD,#historiquecommandes,#inscriptionMessage,#connexionMessage,#notifproduitsCheckbox,#notifBDCheckbox,#destructionCheckbox {
    font-size: 1.6vw;
}

#inscriptionMessage,#connexionMessage{
    top: 26vw;
}

#activermusique,#activereffet{
top: 38.3vw;
}

#signeavertissement{
   top: 33.3vw;
}

#livre1,#livre2{
top: 21.8vw;
}

#paramètres{
   top: 40.5vw; 
}

#disque1,
#disque2 {
        top: 19.5vw;
}

#fatigue{
   top: 0vw; 
}

}

  #premierplanp1l,#premierplanp2,#premierplanp3,#toutpremierplanp5,#premierplanp6,#premierplanp7,#premierplanp8{
    z-index: 1;
  }

  #millieuplanp2,#premierplanp5l,#premierplanp5f,#premierplanp5,#arrièreplanp6,#arrièreplanp8{
    z-index: 0;
  }

  #arrièreplanp2,#arrièreplan2p5f,#arrièreplan2p5{
    z-index: -1;
  }

  #premierplanp1,#premierplanp1l,#arrièreplanp3l,#arrièreplanp3,#arrièreplanp7{
    z-index: -3;
  }

  #arrièreplanp73,#arrièreplan3p8,#arrièreplanmp3,#arrièreplancp1{
    z-index: -6;
  }

  #arrièreplansp1,#arrièreplansp3,#arrièreplanp74,#arrièreplanp5j{
    z-index: -8;
  }

  #arrièreplanp1,#arrièreplanep1,#arrièreplanfp3,#arrièreplanp5{
    z-index: -9;
  }

  #escalier,#couloir{
    position: absolute;
    top: 55vw;
    left: 0;
    width: 100vw;
    height: 100vw;
    background-color: black;
  }

  #couloir{
    top: 250vw;
    height: 118vw;
  }

  a {
    color: white;
  }

  #partie1{
    display: none;
  }

  #luminosité{
        z-index: 1;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background:black;
    top: 0;
    left: 0;
    margin: 0;
    opacity: 0;
    transition:5s opacity;
  }

    #fatigue{
        z-index: 99;
    position: fixed;
    width: 100vw;
    height: auto;
    top: 0;
    left: 0;
    margin: 0;
    display: none;
  }

  #trailer{
    z-index: 89;
    position: fixed;
    width: 100vw;
    height: auto;
    top: 0;
    left: 0;
    margin: 0;
    display: none;
  }


/*#V,#arrièreplanp1,#arrièreplanep1,#arrièreplansp1,#balconnuages,#foudre1,#foudre2,#foudre3,#premierplanp1,#premierplanp1l,#arrièreplanp3l,#premierplantp1,#document1_1,#document1_2,#activermusique,#activereffet,#signeavertissement,#arrièreplanp2,#millieuplanp2,#premierplanp2,#arrièreplanm1p2,#arrièreplanm2p2,#arrièreplanm3p2,#arrièreplanm4p2,#arrièreplanm5p2,#arrièreplanm6p2,#arrièreplanm7p2,#arrièreplanm8p2,#arrièreplanm9p2,#arrièreplanm10p2,#arrièreplanm11p2,#arrièreplanm12p2,#arrièreplanm13p2,#arrièreplanm14p2,#éclat1,#éclat2,#éclat3,#éclat4,#éclat5,#éclat6,#éclat7,#éclat8,#éclat9,#éclat10,#éclat11,#éclat12,#éclat13,#éclat14,#svg,#svg2,#premierplanp3,#premierplanp32,#arrièreplanp3,#arrièreplanp3l,#arrièreplanmp3,#arrièreplanfp3,#arrièreplanep3,#arrièreplansp3,#ancrechoix,#arrièreplanp4,#entrée,#éclat05,#porte1,#porte2,#porte3,#porte4,#porte5,#arrièreplanp5,#arrièreplanp5j,#arrièreplan2p5,#arrièreplan2p5f,#premierplanp5,#toutpremierplanp5,#premierplanp5f,#premierplanp5l,#premierplanp6,#premierplanp8,#disque1,#disque2,#arrièreplanp6,#arrièreplanp8,#arrièreplan3p8,#merch1,#portesallegauche,#portemerch,#livre1,#livre2,#paramètres,#données,#données2,#données3,#données4,#données5,#données6,#données7,#données8,#données9,#données10,#données11,#données12,#données13,#données14,#données15,#données16,#données17,#données18,#données19,#données20,#données21,#données22,#ficheproduit,#pageproduit,#fermerproduit,#ref1,#suppmerch,#achat,#prix,#titreproduit,#produit1,#produit2,#produit3,#produit4,#produit5,#produit6,#produit7,#produit8,#texteprésentation,#news,#connection,#créercompte,#mailinsert,#destruction,#notifproduits,#notifBD,#historiquecommandes,#inscriptionMessage,#connexionMessage,#notifproduitsCheckbox,#notifBDCheckbox,#destructionCheckbox,#pagestyle,#pagestyle2,#pagestyle3,#pagestyle4,#titre,#newst,#paramètrestitre,#escalier,#couloir,#partie1,#luminosité,#éclaireffet,#fatigue{
    display: none;
}