/* Qui est là ? — la porte du comptoir. Tactile : tout ce qui se touche fait
   48 px au moins (règle de l'interface Comptoir). Aucune teinte inventée. */

.comptoir-outil [hidden] { display: none !important; }

.qel-prenoms {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin: 12px 0;
}
.qel-prenom {
  min-height: 72px; padding: 10px 12px; border-radius: 12px;
  border: 2px solid var(--bordure); background: var(--surface); color: var(--texte);
  font: inherit; font-size: 1.15em; font-weight: 600; cursor: pointer;
}
.qel-prenom small { display: block; font-size: 0.7em; font-weight: 400; color: var(--gris-moyen); margin-top: 2px; }
.qel-prenom.prevu { border-color: var(--module, var(--accent)); background: var(--accent-pale); }
.qel-prenom:active { transform: scale(0.98); }

.qel-bonjour, .qel-deja { font-size: 1.2em; margin-bottom: 10px; }
.qel-points { display: flex; gap: 14px; justify-content: center; margin: 12px 0 16px; }
.qel-points span {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--gris-moyen); background: var(--surface);
}
.qel-points span.plein { background: var(--texte); border-color: var(--texte); }

.qel-clavier {
  display: grid; grid-template-columns: repeat(3, minmax(64px, 96px));
  gap: 10px; justify-content: center; margin-bottom: 8px;
}
.qel-clavier button {
  min-height: 64px; border-radius: 12px; border: 1px solid var(--bordure);
  background: var(--surface); color: var(--texte); font: inherit; font-size: 1.5em; cursor: pointer;
}
.qel-clavier button:active { background: var(--fond-clair); }
.qel-clavier .qel-entrer {
  font-size: 1.05em; font-weight: 600; border: none;
  background: var(--module, var(--accent)); color: var(--surface);
}
.qel-clavier .qel-entrer[disabled] { opacity: 0.4; cursor: not-allowed; }


/* Un lien qui a l'allure d'un bouton : texte centré, sans soulignement. */
.comptoir-actions a.btn-comptoir { display: inline-flex; align-items: center; text-decoration: none; }
/* Choisir son code (premier code, ou code provisoire à changer). */
.qel-champ { display: grid; gap: 6px; margin: 10px 0; font-size: 1.05em; color: var(--gris-fonce); }
.qel-champ input { letter-spacing: 0.4em; font-size: 1.3em; }