*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f5f4f0;
}

#canvas-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

#canvas-container.dragging {
  cursor: default;
}

#canvas-world {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.photo-item {
  position: absolute;
  cursor: pointer;
  transform-origin: center center;
  /* Cadre photo blanc + ombre légère réaliste */
  background: #fff;
  padding: 6px 6px 20px 6px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.10),
    0 4px 12px rgba(0, 0, 0, 0.07);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.photo-item:hover {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.13),
    0 12px 40px rgba(0, 0, 0, 0.10);
  z-index: 100 !important;
}

.photo-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #e8e6e0;
  transition: opacity 0.4s ease;
}

.photo-item img:not([src]) {
  opacity: 0;
}

#empty-state {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(0, 0, 0, 0.2);
  font-family: sans-serif;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-align: center;
  pointer-events: none;
}