/* section lecture mots  Exo4 */
#wordContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0;
}

#cellContainer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne */
    margin-bottom: 1rem;
}

.cell {
    min-width: 100px;
    height: 50px;
    border: 1px dashed #007bff;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9f9f9;
    border-radius: 5px;
    transition: background-color 0.3s;
    padding: 5px;
}


.word.dragging {
    opacity: 0.5;
}

.word:hover {
    background-color: #e0e0e0;
}


.cell {
    min-width: 100px;
    height: 50px; /* Ajustez la hauteur selon vos besoins */
    border: 1px dashed #007bff; /* Couleur de la bordure Bootstrap */
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9f9f9;
    border-radius: 5px;
    transition: background-color 0.3s;
		padding:5px;
}

.word {
    margin: 5px;
    padding: 5px;
    border: 1px solid #007bff; /* Couleur de la bordure Bootstrap */
    cursor: grab;
    user-select: none;
    background-color: #f9f9f9;
    border-radius: 5px;
    transition: background-color 0.3s;
}



/* 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); }
}