/* kit-drag-drop.css — chips + zones drag-drop. Anim kit-shake héritée de fiche-kit.css. */
.kit-drag-pool, .kit-drag-zone {
  min-height: 4rem;
  border-radius: 0.5rem;
  padding: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-content: flex-start;
  transition: background 150ms, border-color 150ms;
}
.kit-drag-pool { background: rgba(255,255,255,0.03); border: 1px dashed rgba(255,255,255,0.15); }
.kit-drag-zone--cf { background: rgba(244,63,94,0.06); border: 1px dashed rgba(244,63,94,0.40); }
.kit-drag-zone--cv { background: rgba(52,211,153,0.06); border: 1px dashed rgba(52,211,153,0.40); }
.kit-drag-zone[data-over="1"] { background: rgba(255,255,255,0.08); border-style: solid; }

.kit-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.75rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 0.4rem;
  cursor: grab;
  font-size: 0.82rem;
  color: #e5e7eb;
  user-select: none;
  transition: transform 100ms, background 150ms, border-color 150ms;
  touch-action: none;
}
.kit-chip:hover { background: rgba(255,255,255,0.10); transform: translateY(-1px); }
.kit-chip:active { cursor: grabbing; transform: scale(0.96); }
.kit-chip[data-dragging="1"] { opacity: 0.5; }
.kit-chip[data-feedback="ok"] {
  border-color: var(--kit-ok, #34d399);
  background: rgba(52,211,153,0.15);
  color: #d1fae5;
}
.kit-chip[data-feedback="ko"] {
  border-color: var(--kit-ko, #fb7185);
  background: rgba(244,63,94,0.15);
  color: #fecdd3;
  animation: kit-shake 350ms;
}