:root {
  --bg: #111;
  --fg: #fff;
  --muted: #c9c9c9;
  --accent: #f5c542;
  --accent-fg: #111;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

/* Conteneur AR : le contexte d'empilement garde la caméra (z-index -2 posé par MindAR) visible */
#ar-container {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background: #000;
}

#ar-video { display: none; }

/* Écrans plein cadre */
.screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  background: var(--bg);
  text-align: center;
}

.screen h1 { margin: 0; font-size: 1.6rem; line-height: 1.25; max-width: 22ch; }
.lead { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.45; max-width: 32ch; }
.hint { margin: 0; color: var(--muted); font-size: .9rem; }
.icon { font-size: 3rem; }

.btn-primary, .btn-secondary, .btn-link, .btn-unmute {
  font: inherit;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary {
  min-width: 240px;
  padding: 18px 28px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 1.2rem;
  font-weight: 700;
}

.btn-secondary {
  min-width: 240px;
  padding: 14px 24px;
  background: transparent;
  color: var(--fg);
  border: 2px solid var(--fg);
  font-size: 1rem;
}

.btn-link {
  background: none;
  color: var(--muted);
  text-decoration: underline;
  padding: 8px;
}

/* Surimpressions transparentes au-dessus de la caméra */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  pointer-events: none;
  text-align: center;
}

.overlay p {
  margin: 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .6);
  font-size: 1.05rem;
}

.overlay-scan { justify-content: flex-end; padding-bottom: max(48px, env(safe-area-inset-bottom)); }

.overlay-scan .frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62vmin;
  height: 86vmin;
  transform: translate(-50%, -55%);
  border: 3px dashed rgba(255, 255, 255, .8);
  border-radius: 16px;
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse { 50% { opacity: .35; } }

.btn-unmute {
  position: fixed;
  z-index: 15;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  padding: 10px 16px;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  font-size: .95rem;
}

.spinner {
  width: 44px;
  height: 44px;
  border: 4px solid rgba(255, 255, 255, .25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner, .overlay-scan .frame { animation: none; }
}

#ar-container a-scene { width: 100%; height: 100%; }

/* Boutons VR/AR d'A-Frame inutiles ici */
.a-enter-vr, .a-enter-ar, .a-enter-vr-button, .a-enter-ar-button { display: none !important; }