/* La visite guidée de l'espace (04/11/2026). Le script : `static/js/visite-guidee.js`.
   Un projecteur autour du repère (son ombre assombrit le reste), et une carte
   posée à côté ; sans repère, la carte au milieu, le voile assombri.
   /!\ Un seul cadre : la carte n'en contient aucun autre (`pas-de-double-cadre`). */
.visite { position: fixed; inset: 0; z-index: 1200; }
.visite[hidden] { display: none; }

.visite-voile { position: absolute; inset: 0; background: transparent; }
.visite-voile--sombre { background: rgba(5, 6, 10, 0.72); }

.visite-projecteur {
  position: fixed; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(5, 6, 10, 0.72), 0 0 0 2px var(--accent),
              0 0 24px 4px rgba(167, 139, 250, 0.35);
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
}
.visite-projecteur[hidden] { display: none; }

.visite-carte {
  position: fixed; width: min(380px, calc(100vw - 32px));
  padding: 18px 20px 16px; border-radius: var(--radius-lg, 16px);
  color: var(--foreground); background: var(--card, rgb(18, 20, 29));
  border: 1px solid var(--border-strong);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  animation: visite-arrivee .22s ease-out;
}
.visite-carte--centre { left: 50% !important; top: 50% !important;
  transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)); }
/* Au téléphone : placée par le script, en bas de ce que l'écran montre. */
.visite-carte--bas { max-width: none; }
@keyframes visite-arrivee { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }

.visite-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.visite-compte {
  font-size: var(--text-xs, 11px); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
.visite-passer {
  flex: none; margin: 0 0 0 auto; width: auto; height: auto; box-shadow: none;
  background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit;
  font-size: var(--text-sm); color: var(--muted-foreground);
}
.visite-passer:hover { color: var(--foreground); text-decoration: underline; }

.visite-barre { height: 3px; margin: 10px 0 14px; border-radius: 3px;
  background: var(--border); overflow: hidden; }
.visite-barre span { display: block; height: 100%; width: 0; border-radius: 3px;
  background: var(--accent); transition: width .25s ease; }

.visite-titre { margin: 0 0 6px; font-size: var(--text-lg); font-weight: 600;
  letter-spacing: -0.015em; }
.visite-texte { margin: 0; font-size: var(--text-base); line-height: 1.55;
  color: var(--muted-foreground); }

.visite-gestes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.visite-gestes [hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .visite-carte { animation: none; }
  .visite-projecteur, .visite-barre span { transition: none; }
}