body {
  background-color: #00ff00;
  min-height: 200vh;
  overflow-x: hidden;
  position: relative;
}

marquee {
    position: fixed;
    bottom:0;
    background-color: black;
    color: white;
    font-family: monospace;
    height:30px;
    width: 100vw;
    z-index: 25;
}

#bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 300vh;
  z-index: 2;
  overflow: visible;
}

.bg-img {
  position: absolute;
  max-width: 40vw;
  max-height: 40vh;
  width: auto;
  height: auto;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  pointer-events: auto;
  cursor: grab;
  z-index: 2;
  will-change: transform;
  transform: translateZ(0);
  transition: transform 0.2s ease, box-shadow 0.2s ease;  /* ← transition fluide */
}

.bg-img:hover {
  z-index: 12;
  transform: translateZ(0) scale(1.05);  /* ← zoom au hover */
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}

.bg-img.dragging {
  z-index: 15;
  cursor: grabbing !important;
  transform: translateZ(0) scale(1.1) !important;  /* ← scale + grand en drag */
  box-shadow: 0 12px 40px rgba(255,255,255,0.4) !important;
  transition: none;  /* ← 0 latence en drag */
}

main { position: relative; z-index: 3; }

.card {
  position: fixed;
  max-width: 500px;
  /* top/left seront définis en JS → pas dans le CSS */
  background: white;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  cursor: grab;
  z-index: 10;
  will-change: transform;
  transform: translateZ(0);
}

.card.dragging {
  z-index: 30;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}

.card h2 { margin: 0; }