/* =========================================================
   generateur.css — UI Générateur Nature / Fonction
   Version propre & stable
========================================================= */

/* ===================== BASE ===================== */

.token {
  cursor: pointer;
  padding: 2px 6px;
  margin: 2px 1px;
  display: inline-block;
  border-radius: 8px;
  user-select: none;
}

.token.locked {
  cursor: default;
  opacity: .95;
}

.token.in-current-group {
  outline: 2px dashed #555;
}

.token.used {
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.08);
}

.small-muted { font-size: .92rem; color: #666; }
.card-soft   { border: 1px solid rgba(0,0,0,.08); }

pre,
#tokensZone {
  white-space: pre-wrap;
}

/* ===================== SÉLECTEUR DE COMPÉTENCES ===================== */

/* Base des boutons */
#compSelector .btn {
  position: relative;
  font-weight: 600;
  overflow: visible; /* nécessaire pour afficher le tick */
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/* Bouton actif */
#compSelector .btn.active {
  box-shadow: 0 0 0 2px rgba(0,0,0,.15);
  filter: brightness(0.95);
}

/* Tick visuel du bouton actif */
#compSelector .btn.active::after {
  content: "✓";
  position: absolute;
  top: -6px;
  right: -6px;

  width: 18px;
  height: 18px;

  border-radius: 50%;
  background: #000;
  color: #fff;

  font-size: 12px;
  font-weight: 700;

  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: none; /* ne bloque jamais le clic */
}

/* Pastille compteur */
.comp-count {
  margin-left: .35rem;
  padding: .1rem .45rem;

  border-radius: 999px;
  background: rgba(0,0,0,.25);
  color: white;

  font-size: .7rem;
  font-weight: 700;
}