/* Style global pour le tag <progress> */
progress {
    width: 100%; /* Largeur totale */
    height: 30px; /* Hauteur souhaitée */
    -webkit-appearance: none; /* Supprimer le style par défaut pour WebKit */
    appearance: none; /* Supprimer le style par défaut pour d'autres navigateurs */
}

/* Pour les navigateurs WebKit (Chrome, Safari) */
progress::-webkit-progress-bar {
    background-color: #f3f3f3; /* Couleur de fond de la barre de progression */
    border-radius: 5px; /* Coins arrondis */
}

progress::-webkit-progress-value {
    background-color: #4caf50; /* Couleur de la barre de progression */
    border-radius: 5px; /* Coins arrondis */
}

/* Pour Firefox */
progress::-moz-progress-bar {
    background-color: #4caf50; /* Couleur de la barre de progression */
    border-radius: 5px; /* Coins arrondis */
}

/* SECTION COMMUNE À TOUS LES EXOS */
.correct { background-color: lightgreen; }
.incorrect { background-color: lightcoral; animation: tremblement 0.3s ease-in-out;}

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

/* section écriture mots  Exo5 */
.correctExo5 { font-weight: bold; color: green; }
.incorrectExo5 { background-color: #f8d7da !important;}
.solutionExo5 { font-weight: bold; color: red; }

.form-control-inline {
		display: inline-block;
		font-family: monospace; /* Optionnel: pour un meilleur ajustement de la taille */
    background-color: cornsilk;
}