/* ==========================================
   1. CONTENEUR ÉTABLI & PERSPECTIVE
========================================== */
.d1m-workbench {
  position: relative;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px 20px;
  background-image: url("https://www.aerostyl.com/d1m/wp-content/uploads/2026/08/atelier-table-scaled-1.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  perspective: 1200px;
  box-sizing: border-box;
}

/* RIDEAU D'ASSOMBRISSEMENT DU BUREAU */
.d1m-workbench::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  backdrop-filter: blur(1px);
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.3, 1);
  z-index: 1;
  pointer-events: none;
}

.d1m-workbench.bureau-sombre::before {
  opacity: 1;
}

/* ==========================================
   2. ZONE DU BUREAU (Tapis de dispersion)
========================================== */
.d1m-cards {
  position: relative;
  width: 100%;
  max-width: 1350px;
  height: 850px;
  margin: 0 auto;
  z-index: 2;
  perspective: 1200px;
}

/* ==========================================
   3. STRUCTURE ET POSITIONS DES CARTES
========================================== */
.d1m-card {
  position: absolute;
  width: 300px;
  height: 428px;
  display: block;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s ease;
}

/* Positions repères de base */
.d1m-card.p1 { top: 2%;   left: 2%; }
.d1m-card.p2 { top: 6%;   left: 36%; }
.d1m-card.p3 { top: 1%;   left: 70%; }
.d1m-card.p4 { top: 50%;  left: 4%; }
.d1m-card.p5 { top: 54%;  left: 38%; }
.d1m-card.p6 { top: 48%;  left: 72%; }

.d1m-plate-wrapper {
  width: 300px;
  height: 428px;
  position: relative;
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s ease;
}

.d1m-plate {
  width: 100%;
  height: 100%;
  display: block;
}

/* Ombre sous la carte au repos */
.d1m-plate-wrapper::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 18px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.85);
  z-index: -1;
  opacity: 1;
  transition: box-shadow 0.6s ease;
}

/* ==========================================
   4. FAISCEAU DE LA LAMPE D'ATELIER (HALO)
========================================== */
.d1m-card::before {
  content: "";
  position: absolute;
  width: 650px;
  height: 650px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.5s ease;
}

.d1m-card:hover::before {
  opacity: 1;
}

/* ==========================================
   5. INTERACTIONS ET FOCUS AU SURVOL
========================================== */
.d1m-cards:has(.d1m-card:hover) .d1m-card:not(:hover) {
  filter: brightness(0.5);
  transition: filter 0.4s ease;
}

.d1m-card:hover {
  z-index: 50 !important;
  filter: brightness(1) !important;
}

.d1m-card:hover .d1m-plate-wrapper {
  filter: brightness(1.1) contrast(1.02);
  transform: translate(var(--x, 0px), calc(var(--y, 0px) - 20px)) rotate(var(--rot, 0deg)) scale(1.15);
}

.d1m-card:hover .d1m-plate-wrapper::after {
  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.7), 0 10px 20px rgba(0, 0, 0, 0.45);
}

/* ==========================================
   6. ANIMATION DE SAISIE 3D AU CLIC
========================================== */
.d1m-workbench.table-cliquee .d1m-card:not(.carte-saisie) {
  filter: brightness(0.1) blur(2px) !important;
  transition: filter 0.3s ease;
}

.d1m-card.carte-saisie {
  z-index: 1000 !important;
  pointer-events: none;
  filter: brightness(1.2) !important;
}

.d1m-card.carte-saisie .d1m-plate-wrapper {
  animation: saisieEtPivot3D 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes saisieEtPivot3D {
  0% {
    transform: translate(var(--x, 0px), calc(var(--y, 0px) - 20px)) rotate(var(--rot, 0deg)) scale(1.15) rotateY(0deg);
  }
  35% {
    transform: translate(0px, -40px) rotate(0deg) scale(1.4) rotateX(-10deg) rotateY(15deg);
    filter: brightness(1.2);
  }
  100% {
    transform: translate(0px, -80px) rotate(0deg) scale(2) rotateX(90deg);
    filter: brightness(1.8) blur(2px);
    opacity: 0;
  }
}

/* ==========================================
   7. RESPONSIVE MOBILE
========================================== */
@media (max-width: 768px) {
  .d1m-cards {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }

  .d1m-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 260px;
    height: 371px;
  }

  .d1m-plate-wrapper {
    width: 260px;
    height: 371px;
  }
}