/* Container contenant les item-cards */
.draggable-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Espacement entre les item-cards */
    align-items: flex-start;
}

/* Chaque item-card est en mode inline-flex */
.item-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 200px; /* Largeur d'un item-card */
    height: auto; /* Ajustement automatique en fonction du contenu */
    padding: 10px;
    cursor: grab;
    box-sizing: border-box;
}

/* Placeholder pour montrer l'emplacement de dépôt */
.placeholder {
    width: 181.44px; /* Même largeur que les item-cards */
    min-height: 300px; /* Hauteur minimum par défaut */
    border: 2px dashed #ccc;
    background-color: rgba(230, 230, 230, 0.557);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 20px;
    padding: 10px; /* Même padding que les item-cards */
    visibility: hidden; /* Masque le placeholder par défaut pour éviter qu'il apparaisse hors du contexte de drag */
}

/* Ajoute une bordure autour de l'item-card en cours de déplacement */
.dragging {
    opacity: 0.5;
    border: 2px solid #007bff;
}

.item-card.dragging {
    opacity: 0.7;
    border: 2px dashed #aaa;
}

.item-card.drag-over {
    border: 2px solid #00f;
}

.empty-message {
    font-style: italic;
    text-align: center;
    width: 100%; /* La largeur est maintenant de 100% */
}