.card-3d {
    position: relative;
    perspective: 1500px; /* Plus grand pour stabiliser les clics */
    border-radius: 12px;
    overflow: visible !important;
    z-index: 1;
    transform-style: preserve-3d;
}

.atvImg-container {
    position: relative;
    width: 100%; height: 100%;
    transform-style: preserve-3d;
    pointer-events: auto; /* Doit être auto pour détecter le mouvement */
}

/* LE FOND */
.atvImg-bg-wrapper {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: inherit;
    overflow: hidden;
    z-index: 1;
    pointer-events: none; /* Ne doit jamais capter le clic */
}

.atvImg-bg-layer {
    position: absolute;
    top: -10%; left: -10%; width: 120%; height: 120%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* LE CONTENU (LA CLÉ EST ICI) */
.atvImg-content-layer {
    position: relative;
    z-index: 10;
    width: 100%; height: 100%;
    
    /* On réinitialise le style de transformation pour le contenu */
    transform-style: flat; 
    
    /* On s'assure que tout est cliquable */
    pointer-events: auto !important;
}

/* On force tous les éléments internes à être cliquables */
.atvImg-content-layer * {
    pointer-events: auto !important;
}

/* On s'assure que les liens et boutons ont un curseur et répondent */
.atvImg-content-layer a, 
.atvImg-content-layer button {
    cursor: pointer !important;
    position: relative;
}

/* LA BRILLANCE */
.atvImg-shine {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 100; /* Devant tout visuellement */
    pointer-events: none !important; /* MAIS totalement invisible aux clics */
}

/* L'OMBRE */
.atvImg-shadow {
    position: absolute;
    top: 5%; left: 5%; width: 90%; height: 90%;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    z-index: -1;
    pointer-events: none;
}