/* Photo Panels 3D — Frontend */

.pp3d-wrapper {
  position: relative;
  display: block;
  background: #000;
  overflow: hidden;
  /* Ratio 9:16 par défaut si pas de hauteur spécifiée */
  aspect-ratio: 9 / 16;
  max-width: 100%;
  margin: 0 auto;
}

.pp3d-canvas {
  display: block;
  width:  100% !important;
  height: 100% !important;
  touch-action: none;
}

.pp3d-error {
  color: #c00;
  font-style: italic;
  padding: 8px;
}

@media (prefers-reduced-motion: reduce) {
  /* Le moteur JS gère déjà prefers-reduced-motion,
     ce sélecteur est un filet de sécurité CSS */
  .pp3d-wrapper canvas {
    image-rendering: auto;
  }
}