:root { 
    --primary: #2563eb; 
    --bg: #f1f5f9; 
}

body { 
    font-family: 'Segoe UI', sans-serif; 
    background: var(--bg); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    height: 100vh; 
    margin: 0; 
}

#chapter-title { 
    margin-bottom: 20px; 
    color: #1e293b; 
    font-size: 1.5rem; 
}

#progress {
    margin-bottom: 10px;
    font-weight: bold;
    color: #64748b;
}

.flashcard-container { 
    width: 400px; 
    height: 250px; 
    perspective: 1000px; 
    cursor: pointer; 
}

.flashcard { 
    width: 100%; 
    height: 100%; 
    position: relative; 
    transition: transform 0.6s; 
    transform-style: preserve-3d; 
}

.flashcard.flipped { 
    transform: rotateY(180deg); 
}

.front, .back {
    position: absolute; 
    width: 100%; 
    height: 100%; 
    backface-visibility: hidden;
    display: flex;            /* Centrage Flexbox */
    align-items: center;      /* Vertical */
    justify-content: center;   /* Horizontal */
    text-align: center;
    padding: 20px; 
    border-radius: 15px; 
    box-shadow: 0 8px 15px rgba(0,0,0,0.1); 
    box-sizing: border-box;
}

.front { 
    background: white; 
    color: #1e293b; 
    font-size: 1.2rem; 
    font-weight: bold; 
    border: 2px solid var(--primary); 
}

.back { 
    background: var(--primary); 
    color: white; 
    transform: rotateY(180deg); 
    font-size: 1.1rem; 
}

.controls { 
    margin-top: 30px; 
    display: flex; 
    gap: 20px; 
}

button { 
    padding: 10px 20px; 
    border: none; 
    border-radius: 8px; 
    background: #1e293b; 
    color: white; 
    cursor: pointer; 
    transition: background 0.3s;
}

button:hover {
    background: #334155;
}