/* Style de la liste */
.sortable-list {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

/* Style de chaque élément de ta liste */
.haircut-item {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 4px;
    cursor: grab; /* Curseur en forme de main ouverte */
    transition: background 0.2s, opacity 0.2s;
    user-select: none; /* Évite de sélectionner le texte par erreur en glissant */
}

/* Quand on survole l'élément */
.haircut-item:hover {
    background: #e9ecef;
}

/* Pendant qu'on clique pour attraper l'élément */
.haircut-item:active {
    cursor: grabbing; /* Main fermée */
}

/* L'élément qui est actuellement en train d'être déplacé */
.haircut-item.dragging {
    opacity: 0.4;
    border-style: dashed;
    background: #e2e8f0;
}