/* =========================================================
   DND-WIDGET V2 — CSS COMPLET
   - Solution stylée via [data-source="solution"] (robuste)
   - Zone solution : border none (pas de cadre pointillé bleu)
   ========================================================= */

.dnd-widget{
  border-radius:10px;
  padding: 0 5px 5px 5px;
  background:#fff;
  max-width:900px;
  font-family: Arial, system-ui, sans-serif;
}

/* Stage image */
.dnd-stage{
  position:relative;
  width:100%;
  max-width:860px;
  margin: auto auto 12px auto;
  overflow: auto; /* labels peuvent déborder */
}

.dnd-canvas{
  position: relative;
  width: 100%;
  margin: 0;
}

.dnd-bg{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
}

/* Zones */
.dnd-zone{
  position:absolute;
  transform:translate(-50%, -50%);
  border:2px dashed rgba(15,109,134,.35);
  border-radius:10px;
  background:rgba(255,255,255,0);
  min-width:32px;
  min-height:65px;

  /* Empilement naturel des pills */
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:6px;
  box-sizing:border-box;
}

.dnd-zone.is-over{
  border-color:rgba(20,126,153,.8);
  background:rgba(20,126,153,.06);
}

/* États zones */
.dnd-zone.ok{ border: none; }
.dnd-zone.ko{ border: none; }
.dnd-zone.is-solution{ border: none; } /* ✅ important */
.dnd-zone.is-missed{
  border-style:dashed;
  border-color:#d64545;
  background:rgba(214,69,69,.06);
}

/* Pills */
.dnd-pill{
  /*display:inline-flex; modif 08_03*/
  display: inline-block;/*modif 08_03*/
  word-wrap: normal;/*modif 08_03*/
  align-items:center;
  /*gap:6px;*/
  padding: 5px 8px;
  border-radius: 15px;
  border: 2px solid #e7eef6;
  background: rgba(250, 252, 255, 0.54);
  white-space: normal;
  font-size: 12pt;
  line-height: 1.1;
  color: #000;
  font-family: arial;
}

/* ✅ Pill solution : robuste via data-source */
.dnd-pill[data-source="solution"]{
  border: 2px dashed #ffb913 !important;
  background: rgba(255, 245, 191, 0.54);
  color: #6a4d08 !important;
}

/* Pills ok/ko (pour les réponses élève, et éventuellement tout si tu gardes) */
.dnd-pill.ok{
  border-color:#06752c;
  background:rgba(6,117,44,.10);
  color:#0b3d1a;
}

.dnd-pill.ko{
  border-color:#d64545;
  background:rgba(214,69,69,.10);
  color:#5a0f0f;
}

/* Croix (suppression) */
.dnd-x{
  border:0;
  background:transparent;
  cursor:pointer;
  font-weight:900;
  line-height:1;
  padding:0 2px;
  color:#0f4c5c;
}

/* Optionnel : la croix suit ok/ko */
.dnd-pill.ok .dnd-x{ color:#06752c; }
.dnd-pill.ko .dnd-x{ color:#d64545; }

/* Banque */
.dnd-bank{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e7eef6;
}

.dnd-count{
  margin-left:6px;
  font-size:.75em;
  font-weight:700;
  color:#0f4c5c;
  opacity:.8;
}

.dnd-item{
  padding: 5px 10px;
  border-radius: 15px;
  border: 2px solid #e7eef6;
  background: #fafcff;
  cursor: grab;
  font-family: arial;
  font-weight: normal;
  color: #0f4c5c;
  text-transform: none;
  font-size: 14pt;
}

.dnd-item:hover{ background:#f4f9ff; }

.dnd-item.is-used,
.dnd-item:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.dnd-item.is-selected{
  outline: 2px solid rgba(20,126,153,.45);
  outline-offset: 2px;
}

/* Lock : bloque le jeu, garde scroll */
.dnd-widget.is-locked .dnd-bank,
.dnd-widget.is-locked .dnd-zone{
  pointer-events:none;
  user-select:none;
  opacity:1;
}

/* Actions */
.dnd-widget .dnd-actions{
  padding-top:12px;
  border-top:1px solid #e7eef6;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:12px;
}

.dnd-widget .dnd-actions button{
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #0f6d86;
  background: #147e99;
  color: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  font-size: 12pt;
  font-weight: normal;
  line-height: 1.1;
  font-family: arial;
}

.dnd-widget .dnd-actions button:hover{
  filter:brightness(0.95);
}

.dnd-widget .dnd-actions .dnd-solution:hover,
.dnd-widget .dnd-actions .dnd-solution.is-active{
  border:2px solid #ffb913;
  background:rgba(255, 245, 191, 0.54);
  color: #6a4d08;
}

.dnd-widget .dnd-actions .dnd-retry{
  background:#f0f3f6;
  color:#0f4c5c;
  border-color:#cfd9e6;
}

.dnd-widget .dnd-score{
  margin-left:auto;
  padding:8px 14px;
  display:inline-flex;
  align-items:center;
  font-weight:800;
  color:#0f4c5c;
  font-family: arial;
  font-size: 12pt;
}

/* Mobile : marge autour de l’image */
@media (max-width: 520px){
  .dnd-stage{
    padding: 18px 22px;
    box-sizing: border-box;
  }
}

/* ===== MODE PLEIN ÉCRAN ===== */
.dnd-stage .dnd-fullscreen {
  position:absolute;
  top:5px;
  right:5px;
  z-index:5;
  width:36px;
  height:36px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(15,109,134,.25);
  border-radius:10px;
  background:rgba(255,255,255,.85);
  color:#0f4c5c;
  cursor:pointer;
  font:inherit;
  line-height:1;
  appearance:none;
  -webkit-appearance:none;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}

.dnd-stage .dnd-fullscreen:hover{
  background:rgba(255,255,255,.98);
  border-color:rgba(15,109,134,.45);
}

.dnd-stage .dnd-fullscreen:active{
  transform:translateY(1px);
}

@media (max-width:520px) {
  .dnd-stage .dnd-fullscreen{
    top:8px;
    right:8px;
    width:34px;
    height:34px;
  }
}

/* Override lock : scroll + fullscreen cliquable */
.dnd-widget.is-locked .dnd-stage{
  pointer-events:auto !important;
}
.dnd-widget.is-locked .dnd-zone,
.dnd-widget.is-locked .dnd-bank{
  pointer-events:none !important;
}
.dnd-widget.is-locked .dnd-fullscreen{
  pointer-events:auto !important;
}