/* Outil · Noms de marque (Name generator) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : nm-
   À gauche : 12 places fixes (2 colonnes), chaque nom avec son étoile ; l'info (2 lignes fixes), D'autres noms et Tout copier.
   À droite : le style, les mots, la longueur, le son, la lettre et la langue (grisés quand ils ne servent pas), puis les
   favoris (cadre de hauteur fixe qui défile). */
.nm .outil-fixe { align-items: stretch; }
.nm-noms { margin: 0; padding: 10px; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; border-radius: 14px;
  background: rgba(242, 240, 235, .025); box-shadow: inset 0 0 0 1px var(--filet-doux); }
.nm-noms li { min-width: 0; display: flex; align-items: center; height: 48px; border-radius: 10px; transition: background .2s var(--courbe); }
.nm-noms li:not(.nm-vide):hover { background: rgba(242, 240, 235, .05); }
.nm-nom { flex: 1; min-width: 0; height: 100%; border: 0; background: none; padding: 0 4px 0 12px; text-align: left; cursor: copy;
  font: 700 18px/1.1 var(--display); letter-spacing: -.01em; color: var(--papier); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nm-etoile { flex: none; width: 38px; height: 38px; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--texte2);
  transition: color .2s var(--courbe), opacity .2s; }
.nm-etoile svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.nm-etoile:hover { color: var(--papier); }
.nm-etoile[aria-pressed="true"] { color: var(--orange); }
.nm-etoile[aria-pressed="true"] svg { fill: currentColor; }
.nm-vide .nm-etoile { opacity: 0; }
.nm-info { flex: none; height: 2lh; margin: 0; overflow: hidden; }
.nm-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.nm-actions .pastille { cursor: pointer; }
.nm-actions .pastille:hover, .nm-mini .pastille:hover { translate: none; }
.nm-actions .pastille:disabled, .nm-mini .pastille:disabled { opacity: .3; cursor: default; }

.nm-champ { display: flex; flex-direction: column; gap: 10px; }
.nm-deux { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 16px; align-items: start; }
.nm-deux .groupe { display: block; margin-bottom: 10px; }
.nm-deux .nm-champ { gap: 0; }
.nm-lettre { text-align: center; font-family: var(--mono); }
.nm-cache { display: none; }   /* le champ des mots, hors de Tes mots */
.nm-eteint { opacity: .3; pointer-events: none; transition: opacity .4s var(--courbe); }

/* Les favoris */
.nm-favoris { padding-top: 10px; border-top: 1px solid var(--filet-doux); display: flex; flex-direction: column; gap: 10px; }
.nm-favoris-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.nm-mini { display: flex; gap: 6px; }
.nm-mini .pastille { cursor: pointer; padding: 6px 12px; }
.nm-liste { margin: 0; padding: 4px; list-style: none; height: 220px; overflow-y: auto; overscroll-behavior: contain; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--filet-doux); }
.nm-liste li { display: flex; align-items: center; height: 40px; border-bottom: 1px solid var(--filet-doux); }
.nm-fav { flex: 1; min-width: 0; height: 100%; border: 0; background: none; text-align: left; padding: 0 10px; cursor: copy; font: 600 15px/1 var(--display); color: var(--papier);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nm-oter { flex: none; width: 32px; height: 32px; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--texte2); }
.nm-oter svg { width: 15px; height: 15px; }
.nm-oter:hover { color: var(--papier); }
.nm-liste li.nm-rien { border: 0; height: 100%; justify-content: center; font: var(--valeur); letter-spacing: .06em; color: var(--texte2); }

/* Téléphone : les noms un peu plus petits, l'étoile plus serrée */
@media (max-width: 520px) {
  .nm-noms { padding: 8px 6px; gap: 4px 4px; }
  .nm-nom { font-size: 15.5px; line-height: 1.08; padding-left: 8px; white-space: normal; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }   /* deux mots : sur 2 lignes, dans la même case */
  .nm-etoile { width: 32px; height: 32px; }
}