/* Démo du tableau de bord : bandeau « données fictives » et curseur de la visite guidée */
.demo-bandeau { position: fixed; z-index: 96; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 8px 8px 8px 10px; border-radius: 14px;
  border: 1px solid rgba(94, 234, 212, .3); background: rgba(10, 28, 26, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #C8DCD8; font: 500 13px/1.35 var(--police);
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .9), 0 0 30px -12px rgba(94, 234, 212, .4); }
.demo-puce { padding: 3px 9px; border-radius: 999px; background: #5EEAD4; color: #03201C; font-weight: 700; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
.demo-bandeau a { flex: none; padding: 7px 12px; border-radius: 9px; background: linear-gradient(180deg, #9AF7E8, #5EEAD4 48%, #2DD4BF); color: #03201C; font-weight: 650; text-decoration: none; }
.demo-bandeau a:hover { color: #03201C; filter: brightness(1.05); }
@media (max-width: 640px) { .demo-bandeau { right: 16px; flex-wrap: wrap; } .demo-bandeau > span:nth-child(2) { flex: 1 1 60%; } }

/* Visite guidée : pas de barres de défilement, un curseur qui glisse d'une action à l'autre */
.demo-visite, .demo-visite body { scrollbar-width: none; }
.demo-visite ::-webkit-scrollbar { display: none; }
.demo-curseur { position: fixed; z-index: 99; left: 0; top: 0; pointer-events: none; transition: transform .9s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6)); }
.demo-curseur::after { content: ""; position: absolute; left: -12px; top: -12px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(94, 234, 212, .9); opacity: 0; transform: scale(.4); }
.demo-curseur.clic::after { animation: demo-clic .5s ease-out; }
@keyframes demo-clic { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } }