/* Démo commerciale — iframe : même UI app, pas de backend */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #030303;
}

body.hyr4d-demo-mode .window-drag {
  pointer-events: none;
}

/* Bannière discrète mode démo (ne masque pas le chrome app) */
body.hyr4d-demo-mode::after {
  content: "MODE DÉMONSTRATION · données fictives";
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  padding: 5px 12px;
  border: 1px solid rgb(215 225 236 / 28%);
  border-radius: 999px;
  color: #d7e1ec;
  background: rgb(10 12 16 / 88%);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  pointer-events: none;
}

#startGuide {
  display: none !important;
}

/* Carte démo (image locale) */
.demo-map-board {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 280px;
  overflow: hidden;
  border-radius: 10px;
  background: #0a0c0a;
}

.demo-map-board img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  user-select: none;
  pointer-events: none;
}

.demo-map-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.demo-map-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 3px 7px;
  border: 1px solid rgb(215 225 236 / 40%);
  border-radius: 6px;
  color: #eef2f7;
  background: rgb(12 14 18 / 92%);
  font-size: 9px;
  font-weight: 650;
  pointer-events: auto;
  cursor: pointer;
}

.demo-map-pin.is-on {
  border-color: #d7e1ec;
  box-shadow: 0 0 0 2px rgb(215 225 236 / 18%);
}