.dtt-widget{
  /*border:2px solid #e7eef6;*/
  border-radius:10px;
  padding:0px 5px 5px 5px;
  background:#fff;
  max-width:1000px;
  font-family:Arial, system-ui, sans-serif;
}

.dtt-bank{
	display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
  align-items: flex-start;
}

.dtt-pill{
  position: relative;
  padding: 5px 5px;
  display: inline-flex;
  justify-content: center;
  align-content: center;
  max-width: max-content;
  white-space: nowrap;
  border-radius: 15px;
  border: 1pt solid #e7eef6;
  background: #f0f3f6;
  color: #0f4c5c;
  font-weight: normal;
  cursor: grab;
  user-select: none;
  text-transform: none;
  font-family: arial;
  font-size: 14pt;
}

/* bonnes réponses élève */
.dtt-pill.ok{
  border-color:#06752c;
  background:#f3fbf6;
  color:#035720;
}

/* mauvaises réponses élève */
.dtt-pill.ko{
  border-color:#d64545;
  background:#fff0f0;
  color:#5a0f0f;
}

/* espace pour la croix uniquement pendant le travail */
.dtt-widget:not(.dtt-locked) .dtt-drop .dtt-pill{
  padding-right:34px;
}

/* Croix (DTT) */
.dtt-widget .dtt-x{
  display:none;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  padding:2px 8px;
  background:transparent;
  color:#0f4c5c;
  font-weight:normal;
  cursor:pointer;
  font-size: 16pt;
	right: 0px;
}

/* reduire la taille du pill dans le booard */
.dtt-widget .dtt-drop .dtt-pill{font-size: 12pt;}

/* Quand une étiquette est déposée, on cache la légende */
.dtt-drop.has-items .dtt-pill .dtt-label p{
  display: none;
}

/* Afficher la croix dès que la pill est dans une DROP */
.dtt-widget .dtt-drop .dtt-pill .dtt-x{
  display:inline-block;
}

/* Jamais dans la banque */
.dtt-widget .dtt-bank .dtt-x{
  display:none !important;
}

/* Couleur après vérification */
.dtt-widget .dtt-pill.ok .dtt-x{ color:#035720 !important; }
.dtt-widget .dtt-pill.ko .dtt-x{ color:#d64545; }

/* Après correction / freeze : pas de croix */
.dtt-widget.dtt-locked .dtt-x{
  display:none !important;
}


/* réponses affichées par la correction */
.dtt-pill.is-solution{
  display:inline-flex;
	gap: 8px;
  border:2px dashed #ffb913;
  background:#fff5bf;
  color:#6a4d08;
}

.dtt-pill.ok.is-solution::after{
  content:none !important;
  display:none !important;
}

/* Hover seulement si la pile n'est PAS vide */
.dtt-pill:hover{
  border-color:#cfd9e6**;
  background:#eaf0f5;
  filter:none;
}

/* Hover seulement si la pile n'est PAS vide */
.dtt-pill.is-empty:hover{
  border: 1pt solid #e7eef6;
  background:#f0f3f6;
  filter:none;
}

/* Active (pendant clic) */
.dtt-pill:active{ 
cursor:grabbing; }
.dtt-pill.is-selected{
  outline: 2px solid rgba(20,126,153,.45);
  outline-offset: 2px;
  background: #f2fbfd;
}

.dtt-pill.is-dragging{ opacity:.6; }

/* badge xN */
.dtt-pill .dtt-count{
  margin-left: 8px;
  font-size: 8px;
  font-weight: normal;
  padding: 2px 6px;
  border-radius: 999px;
  color: #0f4c5c;
  line-height: 1;
}

.dtt-pill.is-stack.is-empty{
  opacity:.40;
  /*cursor:not-allowed;*/
}

.dtt-pill.is-stack {font-size: 14pt;}

.dtt-board{}

/* ===== Drop zones (générique) ===== */
.dtt-drop{
  min-height:110px;
  background:#ffffff;
  position:relative;
  padding:10px;
  border:2px solid #cfd9e6;
  border-radius:6px;
  box-sizing:border-box;
}

.dtt-drop::before{
  content: attr(data-placeholder);
  position:absolute;
  top:10px;
  left:12px;
  font-size:.85rem;
  color:#94a3b8;
  pointer-events:none;
}

.dtt-drop[data-placeholder=""]::before{ content:""; }
.dtt-drop.has-items::before{ content:""; }

.dtt-drop.is-over{
  outline:3px dashed rgba(59,130,246,.35);
  outline-offset:-6px;
  background:#f5fbff;
}

.dtt-drop .dtt-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
	align-items: flex-start;
}


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

.dtt-widget .dtt-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;
}

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

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

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

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


/* ===== Correction ===== */
.dtt-widget.is-solution .dtt-pill.correct{
  border-color:#bbf7d0;
  background:#f0fdf4;
}
.dtt-widget.is-solution .dtt-pill.incorrect{
  border-color:#fecaca;
  background:#fff1f2;
}

/* ===== GRID layout (responsive) ===== */
.dtt-grid{
  display:grid;
  gap:12px;

  /* Responsive auto : 1 à N colonnes selon largeur */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items:stretch;
}

.dtt-col{
  border: 1px solid #cfd9e600;
  border-radius: 5px;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
}

.dtt-col h3 { margin: 0px }
.dtt-col-title{
  margin:0 0 2px 2px;
  font-size:1rem;
  font-weight:800;
}

.dtt-col.is-missed{
  border: 2px dashed #d64545;
  border-radius: 3px;
  background: transparent;
}


/* ===== Mobile ===== */
@media (max-width:600px){
    
  .dtt-pill{ font-size:.9rem; padding:2px; }
  .dtt-widget{ padding:12px; }
  .dtt-bank{ gap:8px; }
  .dtt-btn{ padding:9px 10px; font-size:.95rem; }
}