.zone-syllabe, .zone-mot {
border: 2px solid #ccc;
padding: 10px;
min-width: 50px; min-height: 50px;
text-align: center;
display: inline-block;
margin: 5px;
cursor: grab;
border-radius: 8px;
transition: background-color 0.3s, border-color 0.3s;
user-select: none;
transition: opacity 0.3s ease-in-out;
}
.zone-syllabe[draggable="true"]:hover { background-color: #f0f0f0; }
.droppable {
border: 2px dashed #999;
min-height: 60px;
padding: 10px;
border-radius: 8px;
background-color: #fff;
transition: background-color 0.3s, border-color 0.3s;
width: 80px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.correct {
background-color: #d4edda;
border-color: #28a745;
}
.incorrect {
background-color: #f8d7da;
border-color: #dc3545;
animation: tremblement 0.4s ease-in-out;
}
@keyframes tremblement {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-4px); }
40% { transform: translateX(4px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
}
#motImage {
max-width: 200px;
max-height: 200px;
cursor: pointer;
transition: transform 0.2s;
margin-bottom: 1rem;
}
#motImage:hover { transform: scale(1.05); }
#feedback { min-height: 1.5em; margin-top: 10px; font-weight: bold; }
progress { height: 20px; }
#resultats { margin-top: 20px; }

.result-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
  box-sizing: border-box; /* **Très important** pour que padding/border soient inclus dans la largeur */
}

.result-item img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 5px;
}
.result-item span {
  font-size: 1.1em;
  font-weight: bold;
}

/* Vos styles de couleurs (correct/incorrect) restent inchangés */
.result-correct-first-try {
  background-color: #d4edda;
  border: 2px solid #28a745;
}
.result-correct-multiple-tries {
  background-color: #f8d7da;
  border: 2px solid #dc3545;
}

/* Styles pour les résultats */
.result-correct-first-try {
background-color: #d4edda; /* Vert clair */
border: 2px solid #28a745; /* Bordure verte */
}
.result-correct-multiple-tries {
background-color: #f8d7da; /* Rouge clair */
border: 2px solid #dc3545; /* Bordure rouge */
}