.custom-hotspot .hotspot-inner {
	z-index:100;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: rgba(27, 58, 92, 0.7);
  border: 2px solid #fff;
	position: relative;
}

.hotspot-inner {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  border: 2px solid #fff;
  position: relative;
  overflow: hidden;
  /* animation: hotspot-pulse 1.8s ease-out infinite; */
}


@keyframes hotspot-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
    opacity: 1;
  }
  70% {
    box-shadow: 0 0 0 14px rgba(255, 255, 255, 0);
    opacity: 1;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    opacity: 1;
  }
}

.hotspot-inner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.hotspot-inner::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 1;

  animation: inner-wave 2s ease-out infinite;
}

@keyframes inner-wave {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.8;
  }
  70% {
    transform: translate(-50%, -50%) scale(8);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.custom-hotspot-porte {
  width: 80px;
  height: 80px;

  background: linear-gradient(
    to bottom,
    #c65952,
    rgba(198, 89, 82, 0)
  );

  border: 2px solid #fff;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  font-weight: bold;

  cursor: pointer;
  pointer-events: auto;
  box-sizing: border-box;

  overflow: hidden; /* 🔑 for effects */
}

.custom-hotspot-porte::before {
  /* content: ""; */
  /* position: absolute; */
  /* inset: 0; */
  /* background: linear-gradient( */
  /*   to bottom, */
  /*   rgba(255, 255, 255, 0.15), */
  /*   rgba(255, 255, 255, 0) */
  /* ); */
  /* opacity: 0; */
  /* animation: porte-breathe 3s ease-in-out infinite; */
}

@keyframes porte-breathe {
  0%,
  100% {
    opacity: 0.15;
  }
  50% {
    opacity: 0.95;
  }
}

.custom-hotspot-fronton {
  width: 40px; /* horizontal rectangle width */
  height: 40px; /* height */
  background: linear-gradient(to bottom, #c65952, rgba(198, 89, 82, 0));
  border: 2px solid #fff; /* white border, full opacity */
  border-radius: 50%; /* optional, slightly rounded */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff; /* optional text inside hotspot */
  font-weight: bold;
  cursor: pointer;
  pointer-events: auto; /* make it clickable */
  box-sizing: border-box;
}


/* #panorama canvas { */
/*   filter: grayscale(100%); */
/* } */