:root {
      --primary-color: DodgerBlue;
      --secondary-color: LightSkyBlue;
      --accent-color: rebeccapurple;
      --error-color: lightcoral;
      --success-color: lightgreen;
      --font-family: Arial, sans-serif;
    }
		
/* aspect des zones façon fieldset */
.settings-wrapper {
    position: relative;
    padding-top: 15px;
}

.settings-title {
    position: absolute;
    top: 8px;
    left: 10px;
    padding: 1px 5px;
    font-style: italic;
    font-size: 1rem;
    border-radius: 5px;
}

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

/* 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 lecture pseudo_mots  Exo3 */

#pseudo-mots {
		display: flex;
		gap: 10px;
}

.pseudo-mot {
	min-width: 50px;
	padding: 10px;
	background-color: #f0f0f0;
	border: 1px solid #ccc;
	border-radius: 4px;
	cursor: grab;
}

#btnSonContainer {
	display: flex;
	gap: 10px;
}

.btnSon {
	min-width: 100px;
	min-height: 40px;
	background-color: #f0f0f0;
	border: 2px solid #ccc;
	border-radius: 4px;
	text-align: center;
	line-height: 40px;
	cursor: pointer;
	transition: background-color 0.3s;
}

.btnSon:hover {
	border-color: var(--primary-color);
	background-color: var(--secondary-color);
}

.btnSon.correct {
	background-color: #b8e994;
	padding-inline: 3px;
}

.btnSon.incorrect {
	background-color: #f8d7da;
	animation: tremblement 0.5s;
}

#feedback {
	font-size: 1.5em;
	margin-top: 10px;
	transition: all 0.3s ease;
}