.camera {
  width: 237px;
  height: 207px;
  position: absolute;
  right: -1%;
  top: 4%;
  z-index: 200;

  .cameraHead-pos1 {
    width: 100%;
    height: 100%;
    position: absolute;

    .top {
      background: #d9d9d9;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 4;
      clip-path: polygon(40% 19%, 70% 18%, 34% 59%, 5% 55%);
      animation: camera-top-animate-pos2-to-pos1 5s;
    }
    .left {
      background: #c0c0c0;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 1;
      clip-path: polygon(12% 56%, 44% 19%, 43% 41%, 14% 78%);
      animation: camera-left-animate-pos2-to-pos1 5s;
    }
    .right {
      background: #c0c0c0;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 2;
      clip-path: polygon(69% 18%, 69% 46%, 39% 83%, 36% 57%);
      animation: camera-right-animate-pos2-to-pos1 5s;
    }
    .bottom {
      background: #535353;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 0;
      clip-path: polygon(29% 57%, 69% 46%, 39% 83%, 14% 78%);
      animation: camera-bottom-animate-pos2-to-pos1 5s;
    }
    .plaque {
      background: #2b2b2b;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 3;
      clip-path: polygon(15% 56%, 36% 57%, 38.5% 80%, 16% 76%);

      animation: camera-plaque-animate-pos2-to-pos1 5s;
      .round1 {
        background: #404040;

        height: 10%;
        z-index: 5;
        position: absolute;
        border-radius: 50%;
        bottom: 27%;
        left: 22%;
        aspect-ratio: 1/1;

        animation: camera-rond1-animate-pos2-to-pos1 5s;
      }
      .round2 {
        background: #323232;
        height: 7%;
        z-index: 5;
        position: absolute;
        border-radius: 50%;
        bottom: 28%;
        left: 23%;
        aspect-ratio: 1/1;
        box-shadow: 0 0 3px 0 white;
        animation: camera-rond2-animate-pos2-to-pos1 5s;
      }
      .round3 {
        background: #00ff10;
        height: 3%;
        z-index: 5;
        position: absolute;
        border-radius: 50%;
        bottom: 39%;
        left: 31%;
        aspect-ratio: 1/1;
        box-shadow: 0 0 3px 0 white;
        animation:
          camera-blink 1s infinite,
          camera-rond3-animate-pos2-to-pos1 5s;
      }
    }
  }
  .cameraHead-pos2 {
    width: 100%;
    height: 100%;
    position: absolute;

    .top {
      background: #d9d9d9;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 4;
      clip-path: polygon(49% 31%, 68% 31%, 73% 35%, 44% 35%);
      animation: camera-top-animate-pos1-to-pos2 5s;
    }
    .left {
      box-shadow: 0 0 3px 0 white;

      background: #c0c0c0;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 1;
      clip-path: polygon(45% 34%, 49% 31%, 49% 49%, 45% 56%);
      animation: camera-left-animate-pos1-to-pos2 5s;
    }
    .right {
      box-shadow: 0 0 3px 0 white;

      background: #c0c0c0;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 2;
      clip-path: polygon(68% 31%, 69% 50%, 72% 56%, 72% 35%);
      animation: camera-right-animate-pos1-to-pos2 5s;
    }
    .bottom {
      box-shadow: 0 0 3px 0 white;

      background: #535353;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 0;
      clip-path: polygon(49% 49%, 68% 49%, 72% 56%, 45% 56%);
      animation: camera-bottom-animate-pos1-to-pos2 5s;
    }
    .plaque {
      box-shadow: 0 0 3px 0 white;

      background: #2b2b2b;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 3;
      clip-path: polygon(47% 34%, 70% 31%, 70.5% 53%, 47% 53%);
      animation: camera-plaque-animate-pos1-to-pos2 5s;
      .round1 {
        background: #404040;

        height: 10%;
        z-index: 5;
        position: absolute;
        border-radius: 50%;
        bottom: 50%;
        left: 54%;
        aspect-ratio: 1/1;
        animation: camera-rond1-animate-pos1-to-pos2 5s;
      }
      .round2 {
        background: #323232;
        height: 7%;
        z-index: 5;
        position: absolute;
        border-radius: 50%;
        bottom: 51%;
        left: 55%;
        aspect-ratio: 1/1;
        box-shadow: 0 0 3px 0 white;
        animation: camera-rond2-animate-pos1-to-pos2 5s;
      }
      .round3 {
        background: #f00;
        height: 3%;
        z-index: 5;
        position: absolute;
        border-radius: 50%;
        bottom: 58%;
        left: 65%;
        aspect-ratio: 1/1;
        box-shadow: 0 0 3px 0 white;
        animation:
          camera-blink 1s infinite,
          camera-rond3-animate-pos1-to-pos2 5s;
      }
    }
  }
}
/* ======== CAMERA TOP ============ */
@keyframes camera-top-animate-pos1-to-pos2 {
  0% {
    clip-path: polygon(40% 19%, 70% 18%, 34% 59%, 5% 55%);
  }
  100% {
    clip-path: polygon(49% 31%, 68% 31%, 73% 35%, 44% 35%);
  }
}
@keyframes camera-top-animate-pos2-to-pos1 {
  0% {
    clip-path: polygon(49% 31%, 68% 31%, 73% 35%, 44% 35%);
  }
  100% {
    clip-path: polygon(40% 19%, 70% 18%, 34% 59%, 5% 55%);
  }
}

/* ======== CAMERA LEFT ============ */
@keyframes camera-left-animate-pos1-to-pos2 {
  0% {
    clip-path: polygon(12% 56%, 44% 19%, 43% 41%, 14% 78%);
  }
  100% {
    clip-path: polygon(45% 34%, 49% 31%, 49% 49%, 45% 56%);
  }
}
@keyframes camera-left-animate-pos2-to-pos1 {
  0% {
    clip-path: polygon(45% 34%, 49% 31%, 49% 49%, 45% 56%);
  }
  100% {
    clip-path: polygon(12% 56%, 44% 19%, 43% 41%, 14% 78%);
  }
}

/* ======== CAMERA RIGHT ============ */
@keyframes camera-right-animate-pos1-to-pos2 {
  0% {
    clip-path: polygon(69% 18%, 69% 46%, 39% 83%, 36% 57%);
  }
  100% {
    clip-path: polygon(68% 31%, 69% 50%, 72% 56%, 72% 35%);
  }
}
@keyframes camera-right-animate-pos2-to-pos1 {
  0% {
    clip-path: polygon(68% 31%, 69% 50%, 72% 56%, 72% 35%);
  }
  100% {
    clip-path: polygon(69% 18%, 69% 46%, 39% 83%, 36% 57%);
  }
}

/* ======== CAMERA BOTTOM ============ */
@keyframes camera-bottom-animate-pos1-to-pos2 {
  0% {
    clip-path: polygon(29% 57%, 69% 46%, 39% 83%, 14% 78%);
  }
  100% {
    clip-path: polygon(49% 49%, 68% 49%, 72% 56%, 45% 56%);
  }
}
@keyframes camera-bottom-animate-pos2-to-pos1 {
  0% {
    clip-path: polygon(49% 49%, 68% 49%, 72% 56%, 45% 56%);
  }
  100% {
    clip-path: polygon(29% 57%, 69% 46%, 39% 83%, 14% 78%);
  }
}

/* ======== CAMERA PLAQUE ============ */
@keyframes camera-plaque-animate-pos1-to-pos2 {
  0% {
    clip-path: polygon(15% 56%, 36% 57%, 38.5% 80%, 16% 76%);
  }
  100% {
    clip-path: polygon(47% 34%, 70% 31%, 70.5% 53%, 47% 53%);
  }
}
@keyframes camera-plaque-animate-pos2-to-pos1 {
  0% {
    clip-path: polygon(47% 34%, 70% 31%, 70.5% 53%, 47% 53%);
  }
  100% {
    clip-path: polygon(15% 56%, 36% 57%, 38.5% 80%, 16% 76%);
  }
}

/* ======== CAMERA ROND 1 ============ */
@keyframes camera-rond1-animate-pos1-to-pos2 {
  0% {
    bottom: 27%;
    left: 22%;
  }
  100% {
    bottom: 50%;
    left: 54%;
  }
}
@keyframes camera-rond1-animate-pos2-to-pos1 {
  0% {
    bottom: 50%;
    left: 54%;
  }
  100% {
    bottom: 27%;
    left: 22%;
  }
}

/* ======== CAMERA RODN2 ============ */
@keyframes camera-rond2-animate-pos1-to-pos2 {
  0% {
    bottom: 28%;
    left: 23%;
  }
  100% {
    bottom: 51%;
    left: 55%;
  }
}
@keyframes camera-rond2-animate-pos2-to-pos1 {
  0% {
    bottom: 51%;
    left: 55%;
  }
  100% {
    bottom: 28%;
    left: 23%;
  }
}

/* ======== CAMERA ROND3 ============ */
@keyframes camera-rond3-animate-pos1-to-pos2 {
  0% {
    bottom: 39%;
    left: 31%;
  }
  100% {
    bottom: 58%;
    left: 65%;
  }
}
@keyframes camera-rond3-animate-pos2-to-pos1 {
  0% {
    bottom: 58%;
    left: 65%;
  }
  100% {
    bottom: 39%;
    left: 31%;
  }
}

/* ======== CAMERA BLINK ============ */
@keyframes camera-blink {
  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.camerahasseenu {
  position: absolute;
  left: 50%;
  z-index: 300;
  top: 50%;
  transform: translate(-50%, -97%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 23px; 
  color: white;
  font-size: 64px;
  text-transform: uppercase;
  text-shadow: 0px 0px 9px black;
  img {
    filter: drop-shadow(0 0px 16px #b0b0b0);
  }
}

  .divEcranRouge{
    position: absolute;
    left: 0;
    top: 0 ;
    background: rgba(255, 0, 0, 0.226);
    width: 100vw;
    height: 100vh;
    z-index: 200;
  }