/* Page cachée : simulateur 3D. Chargée seulement sur /admin-simulateur/
   (convention late28_enqueue_page). */

.sim-hero {
  padding: 48px 0 24px;
}
.sim-hero h1 {
  margin: 6px 0 10px;
}
.sim-hero p {
  max-width: 62ch;
  color: var(--muted, #5b6169);
}

.sim-body {
  padding-bottom: 64px;
}

/* Le visualiseur a sa propre mise en page plein écran : on lui donne un
   cadre de proportions généreuses plutôt qu'une hauteur fixe, pour qu'il
   reste utilisable du portable au grand écran. */
.sim-cadre {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 420px;
  max-height: calc(100vh - 180px);
  border-radius: 10px;
  overflow: hidden;
  background: #0d1013;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}
.sim-cadre iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.sim-cadre:fullscreen {
  border-radius: 0;
  max-height: none;
  aspect-ratio: auto;
  height: 100%;
}

.sim-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.sim-note {
  margin-top: 14px;
  font-size: .92rem;
  color: var(--muted, #5b6169);
  max-width: 70ch;
}

/* Page /simulateur/ : le visualiseur occupe toute la hauteur laissée libre
   par l'en-tête et le pied de page, qui restent visibles tous les deux. Pas
   de conteneur .wrap : il déborde volontairement des marges du site.

   La hauteur exacte est posée par page-admin-simulateur.js, qui mesure les
   deux au lieu de les coder en dur. Le calcul ci-dessous n'est qu'un point de
   départ raisonnable, le temps que le script s'exécute : en-tête 85 px, pied
   de page environ 150 px. */
.sim-plein {
  position: relative;
  width: 100%;
  height: calc(100vh - 235px);
  min-height: 360px;
  background: #0d1013;
}
.sim-plein iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Page interne fermée : message + bouton de connexion. */
.sim-ferme {
  padding: 40px 0 72px;
  max-width: 60ch;
}
.sim-ferme p {
  margin: 0 0 18px;
}
.sim-ferme .btn + .btn {
  margin-left: 10px;
}

@media (max-width: 700px) {
  .sim-cadre {
    aspect-ratio: 3 / 4;
    min-height: 460px;
  }
}