body {
    background-color: #f8f9fa;
}

.card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

label {
    font-size: 16px;
}

.result {
    font-weight: bold;
}

.correct {
    color: #28a745;
}

.incorrect {
    color: #dc3545;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.d-none {
    display: none;
}




.btn-group {
    display: flex;
    justify-content: center;
    width: 40%;
    margin: 0 auto;
    padding: 20px;
    flex-wrap: wrap;
    background-color: transparent; /* Rend le fond transparent pour éviter les conflits visuels */
    color: white; /* Texte blanc */
}

.btn-group .btn {
    background-color: #541aff; /* Couleur de fond gris pour les boutons */
    color: white; /* Texte blanc */
    border: none; /* Supprime les bordures pour éviter tout contour indésirable */
    margin-right: 5px; /* Espacement à droite */
    transition: background-color 0.3s; /* Transition douce pour le changement de couleur */
}

.btn-group .btn:hover {
    background-color: #f2cbff; /* Jaune au survol */
    color: black; /* Texte noir pour le contraste */
}

.btn-group .btn:last-child {
    margin-right: 0; /* Pas de marge à droite pour le dernier bouton */
}

/* Styles pour la page "Examen blanc" */
.exam-page {
    background-color: #f0f8ff; /* Couleur de fond différente */
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin-top: 20px;
}

.exam-page .card {
    background-color: #e6f7ff; /* Couleur de fond des cartes */
    border: 1px solid #b3d7ff;
    margin-bottom: 15px;
    border-radius: 5px;
    padding: 15px;
}

.exam-page .card-title {
    font-size: 18px;
    font-weight: bold;
    color: #005b99;
}

.exam-page .btn {
    margin: 10px 0;
    background-color: #005b99; /* Couleur de fond des boutons */
    color: white;
}

.exam-page .btn:hover {
    background-color: #004080; /* Couleur de fond des boutons au survol */
}


/* Styles pour le thème 'dark' */
body.dark-theme {
    background-color: #121212;
    color: #ffffff;
}

body.dark-theme .card {
    background-color: #1e1e1e;
    border: 1px solid #333;
}

body.dark-theme .card-title {
    color: #ffffff;
}

body.dark-theme .btn {
    background-color: #333;
    color: #ffffff;
}

body.dark-theme .btn:hover {
    background-color: #555;
}

body.dark-theme .exam-page {
    background-color: #1e1e1e;
    border: 1px solid #333;
}

body.dark-theme .exam-page .card {
    background-color: #2c2c2c;
    border: 1px solid #444;
}

body.dark-theme .exam-page .card-title {
    color: #ffffff;
}