/* EFFET flipX simple */
.flipX {
    transition: transform 1.0s;
    cursor: pointer;
    transform-style: preserve-3d; /* Pour effets 3D */
}

.flipX.flipped {
    transform: scaleX(-1); /* Retournement horizontal */
}


/* EFFET flipX2 deux images */
.flipX2 {
    position: relative;
    cursor: pointer; 
    transform-style: preserve-3d;
    transition: transform 1.5s;
}

/* Les deux faces de l'image: avant et arrière */
.flipX2 .front, .flipX2 .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Empêche l'image arrière d'être visible avant le flip */
}

/* Image de la face arrière */
.flipX2 .back {
    transform: rotateY(180deg);
}

/* Au clic, rotation de 180° */
.flipX2.flipped {
    transform: rotateY(180deg); /* Rotation horizontale */
}