/* L'établi en 3D, que site/js/demarrage.js pose en tête de sa section quand le navigateur dessine en 3D : la scène, ses
   étiquettes de kraft pendues à leur ficelle, la consigne, et la carte de l'objet survolé. Sans la scène, rien de ceci ne
   s'applique : la liste suffit. */

.scene {
  position: relative;
  height: clamp(320px, 62vh, 640px);
  overflow: hidden;
}

.scene canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.scene canvas.sur-un-objet {
  cursor: pointer;
}

/* Sur un téléphone, la scène prend toute la largeur de l'écran. */
@media (max-width: 640px) {
  .scene {
    height: min(75vw, 60vh);
    margin-inline: -16px;
  }
}

.etiquettes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.etiquette {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.14s ease;
}

.etiquette.visible {
  opacity: 1;
}

/* La ficelle, du sommet de l'objet au carton. */
.etiquette::before {
  position: absolute;
  top: -15px;
  left: -0.75px;
  width: 1.5px;
  height: 15px;
  background: var(--ficelle);
  content: '';
}

.carton {
  position: absolute;
  bottom: 15px;
  left: 0;
  padding: 7px 14px 8px 26px;
  border: 1.5px solid var(--etiquette-bord);
  border-radius: 9px;
  background: var(--etiquette);
  box-shadow: 0 4px 10px var(--ombre-etiquette);
  color: var(--texte);
  font: 500 15px/1.2 'Fredoka', 'Nunito', sans-serif;
  white-space: nowrap;
  transform: translateX(-50%) rotate(-2.5deg);
  transform-origin: 50% 100%;
}

/* Le trou du carton, où passe la ficelle. */
.carton::before {
  position: absolute;
  top: 50%;
  left: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fond-page);
  box-shadow: inset 0 0 0 1.5px var(--ficelle);
  content: '';
  transform: translateY(-50%);
}

.etiquette.visible .carton {
  animation: pendre 320ms cubic-bezier(0.3, 1.6, 0.5, 1);
}

@keyframes pendre {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) rotate(-9deg) scale(0.85);
  }
}

.consigne {
  margin: 4px 0 0;
  color: var(--texte-doux);
  font-size: 15px;
  font-weight: 600;
}

.objet.survolee {
  box-shadow: 0 0 0 3px var(--teinte);
}

@media (prefers-reduced-motion: reduce) {
  .etiquette {
    transition: none;
  }

  .etiquette.visible .carton {
    animation: none;
  }
}