* {
  box-sizing: border-box;
}

html {
  image-rendering: pixelated;
  transform: scale(1);
  /* transform-origin: top left; */
}

/* body {
  image-rendering: pixelated;
  font-family: monospace;
  transform: scale(1.5);
  transform-origin: top left;
} */

body {
  margin: 0;
  background: #111;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 400px;
  overflow: hidden;
  touch-action: none; /* empêche le scroll vertical natif sur mobile */
  overscroll-behavior: none;
}

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

body.popup-open {
  overflow: hidden;
}

.camera {
  width: 100vw;
  height: 100vh;
  perspective: 1000px;
  /* perspective-origin: 100% 100% none; */
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: flat;
  will-change: transform;
  transform: translateZ(0); /* Hack GPU */
  filter: blur(0px);
  backface-visibility: hidden;
}

.camera-rotation {
  transform-style: preserve-3d;
  will-change: transform;
  transform: translateZ(0);
  transform-origin: center center 850px; /* exemple à ajuster */ /* Hack GPU */
}

.scene {
  width: 40000px;
  height: 600px;
  position: absolute;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
  z-index: 0;
  transform: translateX(-20000px) translateY(-250px);
  /* animation: rotate 15s infinite linear; */
}

@media (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }
}

.face {
  position: absolute;
  width: 10000px;
  height: 600px;
  background-size: contain;
  background-position: center;
}

.couloir {
  transform-style: preserve-3d;
  transform: translateX(15000px) translateZ(6700px);
  z-index: -10;
}

.lampe-wrapper {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19825px) translateY(-175px) translateZ(9600px)
    rotateX(-90deg);
  width: 350px;
  height: auto;
}

.lampe-wrapper2 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19825px) translateY(-175px) translateZ(8200px)
    rotateX(-90deg);
  width: 350px;
  height: auto;
}

.lampe-wrapper3 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19825px) translateY(-175px) translateZ(6800px)
    rotateX(-90deg);
  width: 350px;
  height: auto;
}

.lampe-wrapper4 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19825px) translateY(-175px) translateZ(5400px)
    rotateX(-90deg);
  width: 350px;
  height: auto;
}

.lampe-wrapper5 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19825px) translateY(-175px) translateZ(4000px)
    rotateX(-90deg);
  width: 350px;
  height: auto;
}

.lampe-wrapper6 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19825px) translateY(-175px) translateZ(2600px)
    rotateX(-90deg);
  width: 350px;
  height: auto;
}

.lampe-wrapper7 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19825px) translateY(-1245px) translateZ(2000px)
    rotateX(90deg);
  width: 2500px;
  height: 2500px;
  background-size: cover;
  object-fit: fill;
}

.lampe {
  transform-style: preserve-3d;
}

.lampe img {
  transform-style: preserve-3d;
  width: 350px;
  height: auto;
}

.fusebox-wrapper {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19560px) translateY(300px) translateZ(9500px)
    rotateY(90deg);
}

.fusebox-wrapper2 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19560px) translateY(300px) translateZ(9750px)
    rotateY(90deg);
}

.fusebox-wrapper3 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20440px) translateY(300px) translateZ(8000px)
    rotateY(-90deg);
}

.fusebox-wrapper4 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20440px) translateY(300px) translateZ(7750px)
    rotateY(-90deg);
}

.fusebox-wrapper5 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19560px) translateY(300px) translateZ(9250px)
    rotateY(90deg);
}

.fusebox-wrapper6 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19560px) translateY(300px) translateZ(6500px)
    rotateY(90deg);
}

.fusebox-wrapper7 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20370px) translateY(300px) translateZ(4750px)
    rotateY(-76deg);
}

.fusebox-wrapper8 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20390px) translateY(300px) translateZ(4500px)
    rotateY(-94deg);
}

.fusebox-wrapper9 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19560px) translateY(300px) translateZ(3100px)
    rotateY(90deg);
}

.fusebox-wrapper10 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19600px) translateY(300px) translateZ(2850px)
    rotateY(98deg);
}

.fusebox-wrapper11 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19580px) translateY(300px) translateZ(-450px)
    rotateY(0deg);
}

.fusebox-wrapper12 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20030px) translateY(300px) translateZ(-450px)
    rotateY(0deg);
}

.fusebox-wrapper13 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20240px) translateY(300px) translateZ(-450px)
    rotateY(0deg);
}

.fusebox-wrapper14 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20540px) translateY(300px) translateZ(-350px)
    rotateY(-45deg);
}

.fusebox-wrapper15 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20690px) translateY(300px) translateZ(-190px)
    rotateY(-45deg);
}

.fusebox-wrapper16 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(21070px) translateY(300px) translateZ(760px)
    rotateY(-90deg);
}

.fusebox-wrapper17 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19020px) translateY(300px) translateZ(150px)
    rotateY(45deg);
}

.fusebox-wrapper18 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19175px) translateY(300px) translateZ(0px)
    rotateY(45deg);
}

.fusebox-wrapper19 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(18930px) translateY(300px) translateZ(1000px)
    rotateY(90deg);
}

.fusebox {
  transform-style: preserve-3d;
}

.caisse {
  transform-style: preserve-3d;
}

.caisse-wrapper {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20390px) translateZ(8280px) translateY(-2px)
    rotateY(-90deg);
  z-index: 2;
}

.caisse-wrapper2 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20370px) translateZ(8280px) translateY(-72px)
    rotateY(-78deg);
  z-index: 3;
}

.caisse-wrapper3 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19570px) translateZ(9440px) translateY(-302px)
    rotateY(78deg);
  z-index: 3;
}

.caisse-wrapper4 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19600px) translateZ(9950px) translateY(-3px)
    rotateY(95deg);
  z-index: 3;
}

.caisse-wrapper5 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20400px) translateZ(5960px) translateY(-205px)
    rotateY(-78deg);
  z-index: 3;
}

.caisse-wrapper6 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20200px) translateZ(5380px) translateY(-2px)
    rotateY(70deg);
  z-index: 2;
}

.caisse-wrapper7 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19620px) translateZ(5200px) translateY(-104px)
    rotateY(50deg);
  z-index: 2;
}

.caisse-wrapper8 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19580px) translateZ(3330px) translateY(-206px)
    rotateY(34deg);
  z-index: 3;
}

.caisse-wrapper9 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19590px) translateZ(2810px) translateY(-302px)
    rotateY(78deg);
  z-index: 3;
}

.caisse-wrapper10 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19390px) translateZ(-140px) translateY(-2px)
    rotateY(60deg);
  z-index: 2;
}

.caisse-wrapper11 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19450px) translateZ(-300px) translateY(-2px)
    rotateY(34deg);
  z-index: 2;
}

.caisse-wrapper12 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19550px) translateZ(-220px) translateY(-2px)
    rotateY(24deg);
  z-index: 2;
}

.caisse-wrapper13 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19570px) translateZ(-320px) translateY(-67px)
    rotateY(-34deg);
  z-index: 2;
}

.caisse-wrapper14 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19080px) translateZ(130px) translateY(-302px)
    rotateY(36deg);
  z-index: 2;
}

.caisse-wrapper15 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19630px) translateZ(-450px) translateY(-302px)
    rotateY(-26deg);
  z-index: 2;
}

.caisse-wrapper16 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19130px) translateZ(140px) translateY(-364px)
    rotateY(108deg);
  z-index: 2;
}

.caisse-wrapper17 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19180px) translateZ(-50px) translateY(-302px)
    rotateY(-8deg);
  z-index: 2;
}

.caisse-wrapper18 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19450px) translateZ(100px) translateY(-2px)
    rotateY(98deg);
  z-index: 2;
}

.caisse-wrapper19 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19070px) translateZ(600px) translateY(-210px)
    rotateY(58deg);
  z-index: 2;
}

.caisse-wrapper20 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19120px) translateZ(640px) translateY(-274px)
    rotateY(98deg);
  z-index: 2;
}

.caisse-front {
  height: 60px;
  width: auto;
  position: absolute;
  background-size: cover;
  transform: translateX(0px) translateY(540px) translateZ(-1px);
  z-index: 1;
}

.caisse-back {
  height: 60px;
  width: auto;
  position: absolute;
  background-size: cover;
  transform-style: preserve-3d;
  transform: translateX(0px) translateY(540px) translateZ(82px);
  z-index: 1;
}

.caisse-left {
  height: 60px;
  width: auto;
  position: absolute;
  background-size: cover;
  transform-style: preserve-3d;
  transform: translateX(-41.5px) translateY(540px) translateZ(40px)
    rotateY(90deg);
  z-index: 1;
}

.caisse-right {
  height: 60px;
  width: auto;
  position: absolute;
  background-size: cover;
  transform-style: preserve-3d;
  transform: translateX(83px) translateY(540px) translateZ(40px) rotateY(90deg);
  z-index: 1;
}

.caisse-top {
  height: 80px;
  width: auto;
  position: absolute;
  background-size: cover;
  transform-style: preserve-3d;
  transform: translateY(499px) translateZ(40px) rotateX(90deg);
  z-index: 2;
}

.herbie-wrapper {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20030px) translateY(160px) translateZ(770px)
    rotateY(-20deg);
  z-index: -1;
}

.herbie {
  transform-style: preserve-3d;
  z-index: -1;
}

.herbie-top {
  height: 350px;
  width: auto;
  transform: translateX(0px) translateZ(0px) translateY(0px) rotateY(0deg)
    rotateX(0deg);
  cursor: pointer;
  z-index: -1;
  opacity: 0;
}

.herbie-top.clicked {
  cursor: default;
  opacity: 1;
}

.herbie-top-alive {
  position: absolute;
  height: 350px;
  width: auto;
  transform: translateX(-684px) translateZ(2px) translateY(0px) rotateY(0deg)
    rotateX(0deg);
  z-index: -1;
  pointer-events: none;
}

.herbie-top-alive.hidden {
  display: none;
  pointer-events: none;
}

.herbie-yeux {
  height: 350px;
  width: auto;
  transform: translateX(-687px) translateZ(1px) translateY(0px) rotateY(0deg)
    rotateX(0deg);
  pointer-events: none;
  transition: opacity 3s ease;
  z-index: -1;
}

.herbie-yeux.dead {
  opacity: 0;
  pointer-events: none;
}

.herbie-middle {
  height: 350px;
  width: auto;
  transform: translateX(-230px) translateZ(165px) translateY(100px)
    rotateY(0deg) rotateX(85deg);
  z-index: -1;
}

.herbie-bottom {
  height: 350px;
  width: auto;
  transform: translateX(-460px) translateZ(170px) translateY(88px) rotateY(0deg)
    rotateX(0deg);
  z-index: -1;
  pointer-events: none;
}

.chaise {
  transform-style: preserve-3d;
  pointer-events: none;
}

.chaise-wrapper {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19350px) translateZ(500px) translateY(325px)
    rotateY(120deg) rotateX(00deg);
  z-index: 2;
}

.chaise-wrapper2 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19910px) translateZ(460px) translateY(325px)
    rotateY(70deg) rotateX(00deg);
  z-index: 2;
}

.chaise-front {
  width: 120px;
  height: auto;
  transform: translateX(0px) translateZ(0px) translateY(0px) rotateY(90deg)
    rotateX(0deg);
  z-index: 1;
}

.chaise-right {
  width: 120px;
  height: auto;
  transform: translateX(-312px) translateZ(60px) translateY(0px) rotateY(0deg)
    rotateX(0deg);
  z-index: 1;
}

.chaise-left {
  width: 120px;
  height: auto;
  transform: translateX(-189px) translateZ(-60px) translateY(0px) rotateY(0deg)
    rotateX(0deg);
  z-index: 1;
}

.chaise-back {
  width: 120px;
  height: auto;
  transform: translateX(-370px) translateZ(0px) translateY(0px) rotateY(90deg)
    rotateX(0deg);
  z-index: 1;
}

.chaise-top {
  width: 120px;
  height: auto;
  transform: translateX(-64px) translateZ(0px) translateY(-91px) rotateY(0deg)
    rotateX(90deg);
  z-index: 1;
}

.table {
  transform-style: preserve-3d;
  pointer-events: none;
}

.table-wrapper {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19755px) translateZ(9100px) translateY(95px)
    rotateY(90deg) rotateX(00deg);
  z-index: 2;
}

.table-wrapper2 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19755px) translateZ(5550px) translateY(95px)
    rotateY(90deg) rotateX(00deg);
  z-index: 2;
}

.table-wrapper3 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19035px) translateZ(5600px) translateY(95px)
    rotateY(90deg) rotateX(00deg);
  z-index: 2;
}

.table-wrapper4 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19755px) translateZ(5250px) translateY(95px)
    rotateY(90deg) rotateX(00deg);
  z-index: 2;
}

.table-wrapper5 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19175px) translateZ(3650px) translateY(95px)
    rotateY(81deg) rotateX(00deg);
  z-index: 2;
  pointer-events: none;
}

.table-wrapper6 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19010px) translateZ(3250px) translateY(95px)
    rotateY(96deg) rotateX(00deg);
  z-index: 2;
}

.table-wrapper7 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19035px) translateZ(2900px) translateY(95px)
    rotateY(90deg) rotateX(00deg);
  z-index: 2;
}

.table-wrapper8 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19635px) translateZ(850px) translateY(95px)
    rotateY(15deg) rotateX(00deg);
  pointer-events: none;
  z-index: 2;
}

.table-wrapper8.cache.visible,
.table-wrapper9.cache.visible {
  pointer-events: none;
}

.table-wrapper9 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19970px) translateZ(850px) translateY(95px)
    rotateY(0deg) rotateX(00deg);
  z-index: 2;
}

.table-wrapper10 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(18630px) translateZ(150px) translateY(95px)
    rotateY(72deg) rotateX(00deg);
  z-index: 2;
}

.note1 {
  position: absolute;
  width: 70px;
  height: 100px;
  background-size: contain;
  transform: translateX(550px) translateY(240px) translateZ(-250px)
    rotateY(65deg) rotateX(90deg);
  cursor: pointer;
  z-index: 5;
}

.note2 {
  position: absolute;
  width: 70px;
  height: 100px;
  background-size: contain;
  transform: translateX(20px) translateY(240px) translateZ(200px) rotateY(14deg)
    rotateX(90deg);
  cursor: pointer;
  z-index: 5;
}

.note3 {
  position: absolute;
  width: 70px;
  height: 100px;
  background-size: contain;
  transform: translateX(190px) translateY(240px) translateZ(-100px)
    rotateY(134deg) rotateX(90deg);
  cursor: pointer;
  z-index: 5;
}

.note4 {
  position: absolute;
  width: 70px;
  height: 100px;
  background-size: contain;
  transform: translateX(19530px) translateY(279px) translateZ(4060px)
    rotateX(-86deg) rotateY(90deg) rotateZ(90deg);
  cursor: pointer;
  z-index: 100;
}

.note5 {
  position: absolute;
  width: 20px;
  height: 50px;
  background-size: contain;
  transform: translateX(20340px) translateY(346px) translateZ(5800px)
    rotateY(130deg) rotateX(0deg);
  cursor: pointer;
  z-index: 100;
  transform-style: preserve-3d;
}

.note6 {
  position: absolute;
  width: 150px;
  transform: translateX(20260px) translateY(311px) translateZ(9550px)
    rotateY(-99deg) rotateX(0deg);
  height: auto;
  cursor: pointer;
  transform-style: preserve-3d;
}

.note7 {
  position: absolute;
  width: 150px;
  transform: translateX(20230px) translateY(379px) translateZ(5700px)
    rotateY(-138deg) rotateX(0deg);
  height: auto;
  cursor: pointer;
  transform-style: preserve-3d;
}

.note8 {
  position: absolute;
  width: 70px;
  height: auto;
  background-size: contain;
  transform: translateX(40px) translateY(49px) translateZ(0px) rotateY(-6deg)
    rotateX(90deg);
  cursor: pointer;
  z-index: 5;
}

.note9 {
  position: absolute;
  width: 30px;
  height: auto;
  background-size: contain;
  transform: translateX(140px) translateY(79px) translateZ(0px) rotateY(-6deg)
    rotateX(90deg);
  cursor: pointer;
  z-index: 5;
}

@media (max-width: 768px) {
  .note9 {
    transform: scale(2) rotateX(90deg) translateY(20px) translateX(100px)
      translateZ(-40px);
    transform-style: preserve-3d;
  }
}

@media (max-width: 768px) {
  .note8 {
    transform: scale(2) rotateX(90deg) translateY(10px) translateX(20px)
      translateZ(-20px) rotateZ(90deg);
    transform-style: preserve-3d;
  }
}

.note10 {
  position: absolute;
  width: 60px;
  height: 100px;
  background-size: contain;
  transform: translateX(19690px) translateY(344px) translateZ(4000px)
    rotateY(106deg) rotateX(90deg);
  cursor: pointer;
  z-index: 5;
}

.note11 {
  position: absolute;
  width: 70px;
  height: auto;
  background-size: contain;
  transform: translateX(19800px) translateY(344px) translateZ(950px)
    rotateY(12deg) rotateX(90deg);
  cursor: pointer;
  z-index: 5;
}

.etiquette-wrapper {
  position: absolute;
  width: 200px;
  height: auto;
  background-size: contain;
  transform: translateX(20310px) translateY(381px) translateZ(9670px)
    rotateY(-84deg) rotateX(0deg);
  z-index: 5;
  transform-style: preserve-3d;
}

.etiquette-wrapper2 {
  position: absolute;
  width: 200px;
  height: auto;
  background-size: contain;
  transform: translateX(19500px) translateY(381px) translateZ(5900px)
    rotateY(84deg) rotateX(0deg);
  z-index: 5;
  transform-style: preserve-3d;
}

.etiquette-wrapper3 {
  position: absolute;
  width: 200px;
  height: auto;
  background-size: contain;
  transform: translateX(20290px) translateY(381px) translateZ(5970px)
    rotateY(-94deg) rotateX(0deg);
  z-index: 5;
  transform-style: preserve-3d;
}

.etiquette-wrapper4 {
  position: absolute;
  width: 200px;
  height: auto;
  background-size: contain;
  transform: translateX(19630px) translateY(381px) translateZ(4050px)
    rotateY(44deg) rotateX(0deg);
  z-index: 5;
  transform-style: preserve-3d;
}

.etiquette {
  z-index: 5;
  transform-style: preserve-3d;
}

.etiquette-front {
  width: 80px;
  height: auto;
  background-size: cover;
  position: absolute;
  transform: translateX(0px) translateY(0px) translateZ(9px) rotateY(0deg)
    rotateX(35deg);
  pointer-events: none;
  z-index: 5;
}

.etiquette-back {
  width: 80px;
  height: auto;
  background-size: cover;
  position: absolute;
  transform: translateX(0px) translateY(0px) translateZ(0px) rotateY(0deg)
    rotateX(-35deg);
  pointer-events: none;
  z-index: 5;
}

.makeup {
  z-index: 5;
  transform-style: preserve-3d;
}

@media (max-width: 768px) {
  .makeup {
    transform: scaleZ(2) scaleY(1.5) scaleX(2) translateY(-5px);
    transform-style: preserve-3d;
  }
}

@media (max-width: 768px) {
  .etiquette {
    transform: scale(1.5) translateY(-5px);
    transform-style: preserve-3d;
  }
}

.vase {
  z-index: 5;
  transform-style: preserve-3d;
}

@media (max-width: 768px) {
  .vase {
    transform: scale(2) translateY(-21px) translateX(-100px) translateZ(-170px);
    transform-style: preserve-3d;
  }
}

.vase-front {
  width: 20px;
  height: auto;
  background-size: cover;
  position: absolute;
  transform: translateX(0px) translateY(0px) translateZ(0px) rotateY(0deg)
    rotateX(0deg);
  pointer-events: none;
}

.vase-right {
  width: 20px;
  height: auto;
  background-size: cover;
  position: absolute;
  transform: translateX(-10px) translateY(0px) translateZ(-10px) rotateY(90deg)
    rotateX(0deg);
  pointer-events: none;
}

.vase-left {
  width: 20px;
  height: auto;
  background-size: cover;
  position: absolute;
  transform: translateX(10px) translateY(0px) translateZ(-10px) rotateY(90deg)
    rotateX(0deg);
  pointer-events: none;
}

.vase-back {
  width: 20px;
  height: auto;
  background-size: cover;
  position: absolute;
  transform: translateX(0px) translateY(0px) translateZ(-20px) rotateY(0deg)
    rotateX(0deg);
  pointer-events: none;
}

.vase-fleurs {
  width: 50px;
  height: auto;
  background-size: cover;
  position: absolute;
  transform: translateX(-40px) translateY(-73px) translateZ(-10px) rotateY(0deg)
    rotateX(0deg);
  pointer-events: none;
}

.vase-glow {
  width: 17px;
  height: 40px;
  position: absolute;
  z-index: 5;
  background-color: aliceblue;
  transform: translateZ(-14px) translateY(5px) rotateY(-25deg);
}

.vase-glow:hover {
  filter: drop-shadow(0px 0px 8px yellow);
  transition: filter 0.2s ease-in-out;
  z-index: 5;
}

.makeup-top {
  width: 50px;
  height: auto;
  position: absolute;
  transform: translateX(-13px) translateY(-12px) translateZ(0px) rotateX(0deg)
    rotateY(90deg) rotateZ(00deg);
  background-size: cover;
}

.makeup-bottom {
  width: 50px;
  height: auto;
  position: absolute;
  transform: translateX(0px) translateY(0px) translateZ(0px) rotateY(90deg)
    rotateX(90deg);
  background-size: cover;
}

.cendrier {
  z-index: 5;
  transform-style: preserve-3d;
}

@media (max-width: 768px) {
  .cendrier {
    transform: scale(2) translateY(-38px) translateX(30px);
    transform-style: preserve-3d;
  }
}

.cendrier-top {
  width: 50px;
  height: 50px;
  position: absolute;
  transform: translateX(0px) translateY(49.5px) translateZ(0px) rotateY(90deg)
    rotateX(90deg);
  background-size: cover;
  pointer-events: none;
}

.cendrier-bottom {
  width: 37px;
  height: 37px;
  position: absolute;
  transform: translateX(6px) translateY(44px) translateZ(0px) rotateY(90deg)
    rotateX(90deg);
  background-color: rgb(144, 144, 144);
}

.cendrier-front {
  width: 39px;
  height: auto;
  background-size: cover;
  position: absolute;
  transform: translateX(6.2px) translateY(75px) translateZ(20px);
  pointer-events: none;
}

.cendrier-right {
  width: 39px;
  height: auto;
  background-size: cover;
  transform: translateX(25.5px) translateY(69px) translateZ(0px) rotateY(90deg)
    rotateX(0deg);
  pointer-events: none;
}

.cendrier-left {
  width: 39px;
  height: auto;
  background-size: cover;
  transform: translateX(-55.5px) translateY(69px) translateZ(0px) rotateY(90deg)
    rotateX(0deg);
  pointer-events: none;
}

.note1:hover,
.note2:hover,
.note3:hover,
.note4:hover,
.note8:hover,
.note9:hover,
.note10:hover,
.note11:hover,
.makeup-top:hover {
  filter: drop-shadow(0px 0px 8px yellow);
  transition: filter 0.2s ease-in-out;
  z-index: 5;
}

.cendrier-bottom:hover {
  filter: drop-shadow(-5px 0px 14px yellow);
  transition: filter 0.2s ease-in-out;
  z-index: 5;
}

.note-popup {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
}

.note-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: 0.5s ease;
}

.note5-image {
  width: 40vw;
  transform: translateY(5vh);
  min-width: 400px;
  height: auto;
  transition: bottom 0.5s ease;
  pointer-events: none;
}

.note6-image {
  transform: translateY(5vh) rotateZ(-2deg);
  width: 40vw;
  min-width: 400px;
  height: auto;
  transition: bottom 0.5s ease;
  pointer-events: none;
}

.note7-image {
  transform: translateY(3vh) rotateZ(2deg);
  width: 45vw;
  min-width: 500px;
  height: auto;
  transition: bottom 0.5s ease;
  pointer-events: none;
}

.note8-image {
  transform: rotateZ(2deg);
  width: 40vw;
  min-width: 400px;
  height: auto;
  transition: bottom 0.5s ease;
  pointer-events: none;
}

.note9-image {
  transform: translateY(2vh) rotateZ(2deg);
  width: 50vw;
  min-width: 500px;
  height: auto;
  transition: bottom 0.5s ease;
  pointer-events: none;
}

.note10-image {
  transform: translateY(2vh) rotateZ(2deg);
  width: 40vw;
  min-width: 400px;
  height: auto;
  transition: bottom 0.5s ease;
  pointer-events: none;
}

.note-popup.active {
  pointer-events: all;
}

.note-popup.active .note-overlay {
  background: rgba(0, 0, 0, 0.75);
}

.note-popup.active .note-image {
  bottom: 10vh;
}

.note-popup.scrollable {
  position: fixed;
  inset: 0;
  z-index: 999;
}

.note-popup.scrollable .note-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.note-popup.scrollable .note-content-wrapper {
  position: relative;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  overflow-y: auto;
  padding: 5vh 0;
  transition: 0.5s ease;
}

.note-popup.scrollable:not(.active) .note-content-wrapper {
  transform: translateY(150vh);
  overflow-y: visible;
  transition: 0.5s ease;
}

.note-popup.zoom {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.note-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.note-popup.zoom .note-content-wrapper {
  position: absolute;
  z-index: 2;
  margin: 0 auto;
  object-fit: contain;
  transform: scale(1);
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.note-popup.zoom:not(.active) .note-content-wrapper {
  transform: scale(0.0001);
  overflow-y: visible;
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.note-popup.zoom .note-content-wrapper img {
  object-fit: contain;
  filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.3));
  pointer-events: none;
}

.note-content-wrapper::-webkit-scrollbar {
  display: none;
}

.note1-image {
  transform: translateX(12%) translateY(5%) rotateZ(2deg);
  width: 80vw;
  min-width: 490px;
  height: auto;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  transition: bottom 0.5s ease;
  pointer-events: none;
}

.note2-image {
  transform: translateX(12%) translateY(5%) rotateZ(2deg);
  width: 80vw;
  height: auto;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  transition: bottom 0.5s ease;
  pointer-events: none;
}

.note3-image {
  transform: translateX(12%) translateY(5%) rotateZ(2deg);
  width: 80vw;
  height: auto;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  transition: bottom 0.5s ease;
  pointer-events: none;
}

.note4-image {
  transform: translateX(11%) translateY(5%) rotateZ(2deg);
  width: 80vw;
  height: auto;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  transition: bottom 0.5s ease;
  pointer-events: none;
}

.note11-image {
  transform: translateX(12%) translateY(5%) rotateZ(2deg);
  width: 80vw;
  height: auto;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  transition: bottom 0.5s ease;
  pointer-events: none;
}

.table-top {
  width: 300px;
  height: auto;
  transform: translateX(-300px) translateZ(0px) translateY(169.8px)
    rotateY(0deg) rotateX(90deg);
  z-index: 3;
}

.table-front {
  width: 300px;
  height: auto;
  transform: translateX(4px) translateZ(74px) translateY(300px) rotateY(0deg)
    rotateX(00deg);
  z-index: 1;
}

.table-back {
  width: 300px;
  height: auto;
  transform: translateX(-908px) translateZ(-74px) translateY(300px)
    rotateY(0deg) rotateX(00deg);
  z-index: 1;
}

.table-right {
  width: 148px;
  height: auto;
  transform: translateX(-530px) translateZ(0px) translateY(300px) rotateY(90deg)
    rotateX(00deg);
  z-index: 2;
}

.table-left {
  width: 148px;
  height: auto;
  transform: translateX(-678px) translateZ(0px) translateY(300px) rotateY(90deg)
    rotateX(00deg);
  z-index: 2;
}

.screen {
  transform-style: preserve-3d;
}

.screen-wrapper {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20310px) translateZ(9400px) translateY(100px)
    rotateY(0deg) rotateX(0deg);
  z-index: 2;
}

.screen-wrapper2 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20310px) translateZ(9740px) translateY(100px)
    rotateY(0deg) rotateX(0deg);
  z-index: 2;
}

.screen-wrapper3 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(18768px) translateZ(6370px) translateY(50px)
    rotateY(180deg) rotateX(0deg);
  z-index: 2;
}

.screen-wrapper4 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(18768px) translateZ(6030px) translateY(63px)
    rotateY(180deg) rotateX(-6deg);
  z-index: 2;
}

.screen-wrapper5 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19760px) translateZ(-760px) translateY(50px)
    rotateY(90deg) rotateX(0deg);
  z-index: 2;
}

.screen-wrapper6 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20390px) translateZ(-470px) translateY(50px)
    rotateY(45deg) rotateX(0deg);
  z-index: 2;
}

.screen-front {
  height: 200px;
  width: auto;
  transform: translateX(-15px) translateZ(0px) translateY(0px) rotateY(90deg);
  z-index: 3;
}

.screen-left {
  height: 200px;
  width: auto;
  transform: translateX(-468px) translateZ(-148px) translateY(0px) rotateY(0deg);
  z-index: 2;
}

.screen-right {
  height: 200px;
  width: auto;
  transform: translateX(-484px) translateZ(148px) translateY(0px) rotateY(0deg);
  z-index: 2;
}

.screen-top {
  width: 297px;
  height: auto;
  transform: translateX(-310px) translateZ(0px) translateY(-194px)
    rotateY(90deg) rotateX(90deg);
  z-index: 2;
}

.screen-bottom {
  width: 297px;
  height: auto;
  transform: translateX(-643px) translateZ(0px) translateY(6px) rotateY(90deg)
    rotateX(90deg);
  z-index: 2;
}

.tableau {
  transform-style: preserve-3d;
}

.tableau-wrapper {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19340px) translateZ(3910px) translateY(55px)
    rotateY(0deg) rotateX(0deg);
  z-index: 2;
  pointer-events: none;
}

.tableau-wrapper2 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(18695px) translateZ(510px) translateY(55px)
    rotateY(0deg) rotateX(0deg);
  z-index: 2;
  pointer-events: none;
}

.tableau-front {
  height: 300px;
  width: auto;
  transform: translateX(-15px) translateZ(0px) translateY(0px) rotateY(90deg);
  z-index: 3;
}

.tableau-right {
  height: 300px;
  width: auto;
  transform: translateX(-753px) translateZ(-237px) translateY(0px) rotateY(0deg);
  z-index: 2;
}

.tableau-left {
  height: 300px;
  width: auto;
  transform: translateX(-741px) translateZ(237px) translateY(0px) rotateY(0deg);
  z-index: 2;
}

.tableau-top {
  width: 473.5px;
  height: auto;
  transform: translateX(-497px) translateZ(0px) translateY(-295px)
    rotateY(90deg) rotateX(90deg);
  z-index: 2;
}

.tableau-bottom {
  width: 473.5px;
  height: auto;
  transform: translateX(-999px) translateZ(0px) translateY(4px) rotateY(90deg)
    rotateX(90deg);
  z-index: 2;
}

.fuse-front {
  width: 200px;
  height: 300px;
  background-size: cover;
  position: absolute;
  transform: translateZ(100px);
}

.fuse-top {
  width: 200px;
  height: 100px;
  background-size: cover;
  position: absolute;
  transform: rotateX(90deg) translateZ(0.5px);
  transform-origin: top;
}

.fuse-left,
.fuse-right {
  width: 100px;
  height: 300px;
  background-size: cover;
  position: absolute;
  object-fit: cover;
}

.fuse-left {
  transform: rotateY(-90deg) translateZ(0px);
  transform-origin: left;
}

.fuse-right {
  transform: rotateY(90deg) translateZ(100px);
  transform-origin: right;
}

.incubateur-wrapper {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20445px) translateY(100px) translateZ(9000px)
    rotateY(-90deg);
}

.incubateur-wrapper2 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20445px) translateY(99px) translateZ(8750px)
    rotateY(-90deg);
}

.incubateur-wrapper3 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20445px) translateY(99px) translateZ(8500px)
    rotateY(-90deg);
}

.incubateur-wrapper4 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19555px) translateY(99px) translateZ(8500px)
    rotateY(90deg);
}

.incubateur-wrapper5 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19555px) translateY(99px) translateZ(8250px)
    rotateY(90deg);
}

.incubateur-wrapper6 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19555px) translateY(99px) translateZ(8000px)
    rotateY(90deg);
}

.incubateur-wrapper7 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19555px) translateY(99px) translateZ(7750px)
    rotateY(90deg);
}

.incubateur-wrapper8 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19555px) translateY(99px) translateZ(7500px)
    rotateY(90deg);
}

.incubateur-wrapper9 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19555px) translateY(99px) translateZ(7250px)
    rotateY(90deg);
}

.incubateur-wrapper10 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19555px) translateY(99px) translateZ(7000px)
    rotateY(90deg);
}

.incubateur-wrapper11 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19555px) translateY(99px) translateZ(6750px)
    rotateY(90deg);
}

.incubateur-wrapper12 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20445px) translateY(99px) translateZ(7500px)
    rotateY(-90deg);
}

.incubateur-wrapper13 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20445px) translateY(99px) translateZ(7250px)
    rotateY(-90deg);
}

.incubateur-wrapper14 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20445px) translateY(99px) translateZ(7000px)
    rotateY(-90deg);
}

.incubateur-wrapper15 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20445px) translateY(99px) translateZ(6750px)
    rotateY(-90deg);
}

.incubateur-wrapper16 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20445px) translateY(99px) translateZ(6500px)
    rotateY(-90deg);
}

.incubateur-wrapper17 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20445px) translateY(99px) translateZ(6250px)
    rotateY(-90deg);
}

.incubateur-wrapper18 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19555px) translateY(99px) translateZ(5750px)
    rotateY(90deg);
}

.incubateur-wrapper19 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19555px) translateY(99px) translateZ(5500px)
    rotateY(90deg);
}

.incubateur-wrapper20 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19750px) translateY(599.5px) translateZ(4800px)
    rotateZ(90deg) rotateX(71deg) rotateY(-90deg);
}

.incubateur-wrapper21 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19848px) translateY(498px) translateZ(4830px)
    rotateY(187deg) rotateZ(-7deg) rotateX(80deg);
}

.incubateur-wrapper22 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20445px) translateY(99px) translateZ(5350px)
    rotateY(-90deg);
}

.incubateur-wrapper23 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20445px) translateY(99px) translateZ(5100px)
    rotateY(-90deg);
}

.incubateur-wrapper24 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20060px) translateY(598px) translateZ(3980px)
    rotateZ(90deg) rotateX(101deg) rotateY(-90deg);
}

.incubateur-wrapper25 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20370px) translateY(99px) translateZ(3870px)
    rotateY(-71deg);
}

.incubateur-wrapper26 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20445px) translateY(99px) translateZ(3620px)
    rotateY(-90deg);
}

.incubateur-wrapper27 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20445px) translateY(99px) translateZ(3370px)
    rotateY(-90deg);
}

.incubateur-wrapper28 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19910px) translateY(599px) translateZ(2970px)
    rotateZ(90deg) rotateX(145deg) rotateY(-90deg);
}

.incubateur-wrapper29 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20445px) translateY(99px) translateZ(2870px)
    rotateY(-90deg);
}

.incubateur-wrapper30 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20445px) translateY(99px) translateZ(2620px)
    rotateY(-90deg);
}

.incubateur-wrapper31 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19556px) translateY(99px) translateZ(2550px)
    rotateY(90deg);
}

.incubateur-wrapper32 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19556px) translateY(99px) translateZ(2300px)
    rotateY(90deg);
}

.incubateur-wrapper33 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20445px) translateY(99px) translateZ(2370px)
    rotateY(-90deg);
}
.incubateur-wrapper34 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19845px) translateY(99px) translateZ(-400px)
    rotateY(0deg);
}

.incubateur {
  transform-style: preserve-3d;
}

.porte-wrapper {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19444px) translateY(120px) translateZ(8800px)
    rotateY(90deg);
}

.porte {
  transform-style: preserve-3d;
}

.porte-front {
  height: 470px;
  width: auto;
}

.prise-wrapper {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19500px) translateY(125px) translateZ(5175px)
    rotateY(90deg);
  z-index: -1;
}

.prise-wrapper2 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19500px) translateY(125px) translateZ(4925px)
    rotateY(90deg);
  z-index: -1;
}

.prise-wrapper3 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20390px) translateY(125px) translateZ(4190px)
    rotateY(90deg);
  z-index: -1;
}

.prise-wrapper4 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20390px) translateY(125px) translateZ(3185px)
    rotateY(90deg);
  z-index: -1;
}

.prise-wrapper5 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20890px) translateY(125px) translateZ(70px)
    rotateY(-45deg);
  z-index: -1;
}

.prise-wrapper6 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(21000px) translateY(125px) translateZ(330px)
    rotateY(90deg);
  z-index: -1;
}

.prise-wrapper7 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(21000px) translateY(125px) translateZ(580px)
    rotateY(90deg);
  z-index: -1;
}

.prise {
  transform-style: preserve-3d;
  z-index: -1;
}

.prise-front {
  height: 470px;
  width: auto;
  z-index: -1;
}

.texte-mur-wrapper {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(20340px) translateY(190px) translateZ(5760px)
    rotateY(-90deg);
}

.texte-mur {
  transform-style: preserve-3d;
}

.texte-front {
  height: 90px;
  width: auto;
}

.sas-wrapper {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19550px) translateY(0px) translateZ(1707px)
    rotateY(0deg);
  pointer-events: none;
  z-index: 5;
}

.sas {
  transform-style: preserve-3d;
}

.sas-front {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  height: 598px;
  width: 898px;
}

.sas-portes-wrapper {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateX(19550px) translateY(0px) translateZ(1700px)
    rotateY(0deg);
  z-index: 4;
  overflow: hidden;
}

.sas-right {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  height: 598px;
  width: 449px;
  transform: translateX(-20px);
  z-index: -101;
  cursor: pointer;
}

.sas-left {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  height: 598px;
  width: 449px;
  transform: translateX(20px);
  z-index: -101;
  cursor: pointer;
}

.sas-left.slide-left {
  animation: slide-left 4s forwards;
  z-index: -101;
}

.sas-right.slide-right {
  animation: slide-right 4s forwards;
  z-index: -101;
}

@keyframes slide-left {
  15% {
    transform: translateX(-10px);
    opacity: 100;
  }
  45% {
    transform: translateX(-1000px);
    opacity: 100;
  }
  100% {
    transform: translateX(-1000px);
    opacity: 0;
  }
}

@keyframes slide-right {
  15% {
    transform: translateX(10px);
    opacity: 100;
  }
  45% {
    transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    transform: translateX(-1000px);
    opacity: 0;
  }
}

.incub-front {
  width: auto;
  height: 500px;
  background-size: cover;
  position: absolute;
  transform: translateZ(101px);
  z-index: 10;
  pointer-events: none;
}

.incub-back {
  width: auto;
  height: 500px;
  background-size: cover;
  position: absolute;
  transform: translateZ(0px) translateX(-36px);
  z-index: 0;
}

.incub-robot {
  width: auto;
  height: 500px;
  background-size: cover;
  position: absolute;
  transform: translateZ(70px) translateX(-36px) rotateY(10deg);
  z-index: 1;
}

/* .incub-robot:hover {
  filter: brightness(100);
  transition: filter 3s ease-in-out;
} */

.incub-left1 {
  width: auto;
  height: 500px;
  background-size: cover;
  position: absolute;
  transform: rotateY(-90deg) translateX(33px) translateZ(67px);
  z-index: 2;
}

.incub-left2 {
  width: auto;
  height: 500px;
  background-size: cover;
  position: absolute;
  transform: translateX(-41px) translateZ(81px) rotateY(-45deg);
  z-index: 2;
}

.incub-right1 {
  width: auto;
  height: 500px;
  background-size: cover;
  position: absolute;
  transform: rotateY(-90deg) translateX(32.5px) translateZ(-129px);
  z-index: 2;
}

.incub-right2 {
  width: auto;
  height: 500px;
  background-size: cover;
  position: absolute;
  transform: translateX(116.5px) translateZ(82px) rotateY(45deg);
  z-index: 2;
}

.incub-top {
  width: 196px;
  height: auto;
  background-size: cover;
  position: absolute;
  transform: translateZ(50px) translateX(-35px) translateY(-51px)
    rotateX(-90deg) rotateZ(180deg);
  z-index: 1;
}

.incub-bottom {
  width: 196px;
  height: auto;
  background-size: cover;
  position: absolute;
  transform: translateZ(50px) translateX(-35px) translateY(450px)
    rotateX(-90deg) rotateZ(180deg);
  z-index: 1;
}

/* Haut */
.top {
  height: 900px;
  width: 10000px;
  transform: rotateX(90deg) rotateZ(90deg) translateZ(450px);
  background-image: url(../images/sol01.png);
  z-index: -100;
}

/* Bas */
.bottom {
  height: 900px;
  width: 10000px;
  transform: rotateX(-90deg) rotateZ(90deg) translateZ(151px);
  background-image: url(../images/sol01.png);
  z-index: -100;
}

/* Gauche */
.left {
  height: 610px;
  width: 10000px;
  transform: rotateY(-90deg) translateZ(455px) translateY(-5px);
  background-image: url(../images/mur01.png);
  z-index: -100;
}

/* Droite */
.right {
  height: 610px;
  width: 10000px;
  transform: rotateY(90deg) translateZ(455px) translateY(-5px);
  background-image: url(../images/mur01.png);
  z-index: -100;
}

.room {
  transform-style: preserve-3d;
  z-index: -200;
}

.room-top {
  height: 2171px;
  width: auto;
  transform-style: preserve-3d;
  transform: translateX(18914px) translateY(-1085px) translateZ(615px)
    rotateX(90deg);
}

.room-bottom {
  height: 2171px;
  width: auto;
  transform-style: preserve-3d;
  transform: translateX(16740px) translateY(-485px) translateZ(615px)
    rotateX(90deg);
}

.room-right {
  height: 600px;
  width: auto;
  transform-style: preserve-3d;
  transform: translateX(16280px) translateY(-1570px) translateZ(615px)
    rotateY(90deg);
}

.room-right1 {
  height: 600px;
  width: auto;
  transform-style: preserve-3d;
  transform: translateX(15062px) translateY(-1570px) translateZ(1382px)
    rotateY(45deg);
}

.room-right2 {
  height: 600px;
  width: auto;
  transform-style: preserve-3d;
  transform: translateX(14152px) translateY(-1570px) translateZ(-152px)
    rotateY(-45deg);
}

.room-back {
  height: 600px;
  width: auto;
  transform-style: preserve-3d;
  transform: translateX(9775px) translateY(-1570px) translateZ(-465px)
    rotateY(0deg);
}

.room-left {
  height: 600px;
  width: auto;
  transform-style: preserve-3d;
  transform: translateX(11405px) translateY(-1570px) translateZ(615px)
    rotateY(-90deg);
}

.room-left1 {
  height: 600px;
  width: auto;
  transform-style: preserve-3d;
  transform: translateX(10818px) translateY(-1570px) translateZ(1380px)
    rotateY(-45deg);
}

.room-left2 {
  height: 600px;
  width: auto;
  transform-style: preserve-3d;
  transform: translateX(9918px) translateY(-1570px) translateZ(-150px)
    rotateY(45deg);
}

.paroi1 {
  height: 1000px;
  width: 1000px;
  transform-style: preserve-3d;
  transform: translateX(890px) translateY(-800px) translateZ(10px) rotateY(0deg);
  background-color: #111;
}

.paroi2 {
  height: 1000px;
  width: 1000px;
  transform-style: preserve-3d;
  transform: translateX(-990px) translateY(-1800px) translateZ(10px)
    rotateY(0deg);
  background-color: #111;
}

/* .mains {
  position: fixed;
  bottom: 0;
  width: 100%;
  transform: translateX(50%);
  height: auto;
  pointer-events: none;
  z-index: 1000;
  animation: respire 1s infinite alternate ease-in-out;
} */

@keyframes rotate {
  from {
    transform: rotateX(0) rotateY(0);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

@keyframes respire {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(0.5vh);
  }
}

.camera-rotation {
  transform-style: preserve-3d;
  will-change: transform;
}

.scene-wrapper {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transform-style: preserve-3d;
  will-change: transform;
}

.incubateur,
.note,
.table,
.fusebox,
.caisse,
.screen,
.porte {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.intro-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75); /* fond noir semi-transparent */
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: opacity 1s ease;
}

.intro-title-image {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  transform: translateY(0);
  transition: transform 1s ease, opacity 1s ease;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.4));
  animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
  0%,
  100% {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.7));
  }
}

/* Animation de sortie */
.intro-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

.intro-title-image.slide-up {
  transform: translateY(-200px);
  opacity: 0;
}

.cache {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.cache.visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.lampe {
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

@media (max-width: 768px) {
  .intro-title-image {
    content: url("../images/intro-titre-mobile.png"); /* Chemin de l'image pour mobile */
  }
}