/* Salle de sciences : scène 3D au format 16:9 et repère du tableau (tâche 2.3).
   La mise en page complète de la salle (bandeau, zone de dialogue, portrait sur
   téléphone) viendra avec la tâche 3.3 ; cette feuille ne fixe que la scène. */

/* Écran « salle » : la scène occupe la largeur disponible, sans dépasser la
   hauteur de la fenêtre, centrée (comme #scene de la page d'essai). */
.ecran-salle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ecran-salle .salle-scene {
  width: min(100vw, calc(100vh * 16 / 9));
  width: min(100vw, calc(100dvh * 16 / 9));
}

/* La scène : conteneur 16:9 de la toile WebGL, du tableau et des messages. */
.salle-scene {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--fond, #1f1d1a);
}

/* Toile du rendu, à la taille exacte de la scène. */
.salle-scene .salle-vue {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Repère du tableau (A9) : position et taille fixées par scene.js à partir des
   fractions `tableau` de la description de la salle. Le module du tableau
   (tâche 2.5) y pose son contenu ; vide, il laisse voir le tableau peint. */
.salle-scene .salle-tableau {
  position: absolute;
  pointer-events: none;
}
.salle-scene .salle-tableau > * {
  pointer-events: auto;
}

/* Message de chargement, au centre de la scène. */
.salle-scene .salle-chargement {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texte-doux, #cfc6ba);
  font-size: clamp(14px, 2.2vw, 20px);
}