/* Lecteur 360 public : écran d'accueil + visionneuse plein écran. */
html, body { height: 100%; overflow: hidden; }
body {
  background:
    radial-gradient(1100px 600px at 50% -10%, rgba(58,109,240,.16), transparent 60%),
    radial-gradient(800px 500px at 85% 110%, rgba(58,109,240,.08), transparent 55%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
}
.ecran { width: 100%; height: 100%; }

/* Accueil */
#accueil { display: flex; align-items: center; justify-content: center; padding: 20px; }
#accueil.survol .depot { border-color: var(--accent); background: rgba(58,109,240,.08); }

.carte {
  width: 100%; max-width: 460px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 36px 32px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
.badge {
  width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 18px; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.carte h1 { font-size: 21px; margin: 0 0 6px; }
.sous-titre { color: var(--muted); font-size: 14px; margin: 0 0 22px; }

.depot {
  display: block; cursor: pointer; border: 2px dashed var(--line); border-radius: 14px;
  padding: 22px 16px 20px; background: var(--inset); transition: border-color .15s, background .15s;
}
.depot:hover { border-color: var(--accent); }
.depot-icone { width: 38px; height: 38px; color: var(--accent); }
.depot-titre { margin: 8px 0 2px; font-weight: 600; }
.depot-aide { margin: 0 0 14px; color: var(--muted); font-size: 13px; }

.chips { display: flex; justify-content: center; gap: 8px; margin: 16px 0 0; flex-wrap: wrap; }
.chip { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }

.message { min-height: 20px; margin: 16px 0 0; font-size: 14px; }
.message.erreur { color: var(--err); }
.message.ok { color: var(--ok); }

.note { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 12px; margin: 20px 0 0; }
.note svg { width: 15px; height: 15px; flex: none; }

/* Visionneuse */
#pano { position: fixed; inset: 0; background: #000; }

.btn-retour {
  position: fixed; top: 14px; left: 14px; z-index: 20; cursor: pointer;
  background: rgba(20,22,28,.82); color: #eef1f7; border: 1px solid #313641; border-radius: 9px;
  padding: 9px 14px; font-size: 14px; backdrop-filter: blur(6px);
}
.btn-retour:hover { background: rgba(35,39,48,.92); }