/* =====================================================
   JMATCH — CSS FINAL CONSOLIDÉ (CORRIGÉ)
   Compatible :
   - JMatch classique (F / R / D)
   - JMatch SORT
   ===================================================== */

/* =====================================================
   VARIABLES
   ===================================================== */

:root {
  --jmatch-row-min-height: 3.2rem;
  --jmatch-row-gap: 1rem;
}

/* =====================================================
   CONTENEUR PRINCIPAL
   ===================================================== */

#jmatch-root {
  padding: 1rem;
}

/* =====================================================
   CARTES — COMMUN À TOUS LES JMATCH
   ===================================================== */

.jmatch-card {
  background: #fff;
  border: 2px solid #adb5bd;
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;

  /* 🔒 IMPORTANT POUR DnD */
  user-select: none;
  touch-action: none;              /* ✅ empêche scroll / zoom tactile */

  cursor: grab;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease;
}

/* =====================
   ÉTAT DRAG
   ===================== */

.jmatch-card.dragging {
  opacity: 0.6;
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
  cursor: grabbing;

  /* 🔑 CLÉ ABSOLUE POUR LE DROP */
  pointer-events: none;            /* ✅ laisse "voir" la dropzone dessous */
}

/* =====================
   FEEDBACK CARTE
   ===================== */

.jmatch-card.card-ok {
  border-color: #198754;
  box-shadow: 0 0 0 2px rgba(25,135,84,0.3);
}

.jmatch-card.card-ko {
  border-color: #dc3545;
  box-shadow: 0 0 0 2px rgba(220,53,69,0.3);
}

/* =====================================================
   JMATCH CLASSIQUE — ZONES F / R / D
   ===================================================== */

.jmatch-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2.5rem;
  align-items: stretch;
}

.jmatch-zone {
  padding: 1rem;
  border-radius: .75rem;
  box-sizing: border-box;
}

/* Zone F */
.jmatch-zone-f {
  background: #eef3ff;
  border: 2px solid #5c6bc0;
}

/* Zone R */
.jmatch-zone-r {
  background: #e8f5e9;
  border: 2px solid #66bb6a;
}

/* Zone D */
.jmatch-zone-d {
  background: #fff8e1;
  border: 2px dashed #f9a825;
}

/* Alignement lignes */
.jmatch-zone-f .jmatch-card,
.jmatch-zone-d .jmatch-card,
.jmatch-zone-d .jmatch-placeholder {
  min-height: var(--jmatch-row-min-height);
  margin-bottom: var(--jmatch-row-gap);
  display: flex;
  align-items: center;
}

/* Slots R */
.jmatch-zone-r .jmatch-slot {
  height: var(--jmatch-row-min-height);
  margin-bottom: var(--jmatch-row-gap);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #bbb;
  border-radius: .5rem;
}

.jmatch-zone-r .jmatch-slot.filled {
  border: none;
}

.jmatch-zone-r .jmatch-card {
  width: 100%;
  margin: 0;
}

/* Placeholder */
.jmatch-placeholder {
  border: 2px dashed #ccc;
  border-radius: .5rem;
}

/* Feedback classique */
.jmatch-slot.jmatch-correct {
  border-color: #28a745;
  box-shadow: 0 0 0 3px rgba(40,167,69,0.35);
}

.jmatch-slot.jmatch-wrong {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220,53,69,0.35);
}

/* =====================================================
   JMATCH SORT — COLONNES
   ===================================================== */

.jmatch-sort-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 220px));
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Colonne */
.jmatch-group {
  background: #f5f8ff;
  border: 2px solid #9fa8da;
  border-radius: 10px;
  padding: 0.5rem;
  min-height: 220px;
  display: flex;
  flex-direction: column;
}

/* Titre colonne */
.jmatch-group-title {
  font-weight: 600;
  text-align: center;
  background: #e8ebff;
  color: #2c387e;
  border-radius: 6px;
  padding: 0.4rem;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

/* Zone dépôt */
.jmatch-group-dropzone {
  flex: 1;
  border: 2px dashed #ced4da;
  border-radius: 8px;
  padding: 0.4rem;

  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;

  transition: background 0.2s ease, border-color 0.2s ease;
}

.jmatch-group-dropzone .jmatch-card {
  width: auto;
  max-width: 90%;
  text-align: center;
}

/* Pool */
.jmatch-sort-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  background: #f1f3f5;
  border: 2px solid #dee2e6;
  border-radius: 10px;
  padding: 0.8rem;
}

/* Feedback colonne SORT */
.jmatch-group.group-ok {
  box-shadow: 0 0 0 4px rgba(25,135,84,0.25);
}

.jmatch-group.group-ko {
  box-shadow: 0 0 0 4px rgba(220,53,69,0.25);
}

/* =====================================================
   FEEDBACK SCORE
   ===================================================== */

#jmatch-feedback .card {
  animation: pop-in 0.25s ease-out;
  transition: transform 0.2s ease;
}

#jmatch-feedback .card:hover {
  transform: scale(1.02);
}

@keyframes pop-in {
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}