/* Intégration de la police globale et gestion du box-sizing */
* { 
    font-family: 'Nunito', sans-serif; 
    box-sizing: border-box; 
}

/* Styles pour l'effet de retournement des Flashcards */
.card-flip { 
    perspective: 1000px; 
}

.card-inner { 
    transition: transform 0.6s; 
    transform-style: preserve-3d; 
}

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

.card-front, .card-back { 
    backface-visibility: hidden; 
    position: absolute; 
    inset: 0; 
    border-radius: 1rem; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
    padding: 1.5rem; 
}

.card-back { 
    transform: rotateY(180deg); 
}

/* Animations visuelles (Secousse, Pop et Apparition) */
.shake { 
    animation: shake 0.4s ease; 
}

@keyframes shake { 
    0%, 100% { transform: translateX(0); } 
    25% { transform: translateX(-5px); } 
    75% { transform: translateX(5px); } 
}

.pop { 
    animation: pop 0.3s ease; 
}

@keyframes pop { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.1); } 
    100% { transform: scale(1); } 
}

.fade-in { 
    animation: fadeIn 0.4s ease; 
}

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}