.cj-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 90vw;
    padding-top: 40px;
}

.cj {
    width: 250px;
    height: 420px;
    max-width: 40vw;
    perspective: 1000px;
    cursor: pointer;
    position: relative;
    transition: transform 1s ease-in-out;
    z-index: 1000;
    touch-action: manipulation;
}

.cj-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform-origin: center;
    transition: transform 1s ease-in-out;
    will-change: transform; /* Améliore la fluidité sur mobile */
}

.cj.flipped .cj-inner {
    transform: rotateY(180deg);
}

.carte_tirage,
.cj-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.cj-back {
    background: url('../images/cartes/dos_cartes_jour.jpg') no-repeat center/cover; /* Correction du chemin */
}

.hidden { 
    z-index:-1;
    opacity: 0;
    visibility: hidden;
}

.visible {
    opacity: 1;
    z-index:10
}

.carte_tirage {
    font-size: 20px;
    font-weight: 800;
    transform: rotateY(180deg); /* Assure que l’image est correctement affichée après le flip */
}

.carte_tirage img{ 
    z-index: 1000;
}

#nom_carte_tirage {
    font-size: 30px;
    padding-left: 20px;
}

#interpretation {
    font-size: 18px;
    max-width: 50vw;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    padding-left: 20px;
}

/* Adaptation mobile */
@media screen and (max-width: 768px) {
    .cj {
        width: 140px; /* Ajustement pour un meilleur affichage */
        height: 200px;
        max-width: 80vw;
    }

    #interpretation {
        font-size: 16px;
        max-width: 80vw;
    }
}