/* ================================
   FIX FINAL 3D HERO - PRIORITÉ MAXIMALE
   Surcharge tous les conflits
=============================== */

/* COLONNE GAUCHE - TEXTE */
.hero-text-section {
  transform: rotateX(3deg) rotateY(5deg) !important;
  transform-style: preserve-3d !important;
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
}

.hero-text-section:hover {
  transform: rotateX(0deg) rotateY(0deg) translateY(-10px) scale(1.02) !important;
  filter: drop-shadow(0 10px 30px rgba(138, 76, 255, 0.3)) !important;
}

/* COLONNE DROITE - VIDÉO (SYMÉTRIE MIROIR) */
.video-showcase-container {
  transform: rotateX(3deg) rotateY(-5deg) !important;
  transform-style: preserve-3d !important;
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  transform-origin: center center !important;
}

.video-showcase-container:hover {
  transform: rotateX(0deg) rotateY(0deg) translateY(-18px) scale(1.06) !important;
  /* FORCER transition au hover aussi */
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  /* Ne pas modifier padding - ça bloque la transition */
}

/* FRAME VIDÉO */
.video-showcase-frame {
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.video-showcase-container:hover .video-showcase-frame {
  transform: translateZ(25px) rotateX(-1deg) !important;
}

/* ÉLÉMENT VIDÉO */
.hero-showcase-video {
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  will-change: transform, filter !important;
}

.video-showcase-container:hover .hero-showcase-video {
  transform: translateZ(30px) scale(1.04) !important;
  filter: brightness(1.15) contrast(1.15) saturate(1.15) !important;
}

/* MOBILE - INCLINAISONS PLUS SUBTILES */
@media (max-width: 768px) {
  .hero-text-section {
    transform: rotateX(2deg) rotateY(3deg) !important;
  }
  
  .video-showcase-container {
    transform: rotateX(2deg) rotateY(-3deg) !important;
  }
  
  .video-showcase-container:hover {
    transform: rotateX(0deg) rotateY(0deg) translateY(-10px) scale(1.03) !important;
  }
  
  .video-showcase-container:hover .video-showcase-frame {
    transform: translateZ(10px) !important;
  }
  
  .video-showcase-container:hover .hero-showcase-video {
    transform: translateZ(5px) scale(1.015) !important;
    filter: brightness(1.08) contrast(1.08) !important;
  }
}