/* Choisir un prénom kemit : styles propres à cette page seulement. Aucune couleur en dur, tout vient de theme.css. */

/* Les trois questions */
.pn-steps { display: grid; gap: 28px; margin: 0 0 36px; padding: 0; list-style: none; counter-reset: pn; }
.pn-step { counter-increment: pn; }
.pn-step-title { margin: 0 0 4px; font-size: 1.15rem; }
.pn-step-title::before {
  content: counter(pn); display: inline-grid; place-items: center;
  width: 1.7em; height: 1.7em; margin-inline-end: .5em;
  border-radius: 50%; background: var(--gold); color: var(--night);
  font-size: .72em; font-weight: 700;
}
.pn-step-help { margin: 0 0 12px; color: var(--ws-muted, inherit); font-size: .9375rem; opacity: .85; }

.pn-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.pn-choice {
  display: grid; gap: 2px; text-align: start;
  padding: 10px 14px; min-height: 44px;
  border: 1px solid var(--gold); border-radius: 999px;
  background: transparent; color: inherit; font: inherit; cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.pn-choice-name { font-weight: 600; }
.pn-choice-sub { font-size: .8125rem; opacity: .8; }
.pn-choice:hover { background: color-mix(in srgb, var(--gold) 16%, transparent); }
.pn-choice[aria-pressed="true"] { background: var(--gold); color: var(--night); }
.pn-choice[aria-pressed="true"] .pn-choice-sub { opacity: .9; }
/* Un choix qui porte un résumé ne tient pas dans une pastille étroite : il s'élargit. */
.pn-choice:has(.pn-choice-sub) { border-radius: var(--r-md, 14px); }

/* Les prénoms trouvés */
.pn-invite, .pn-count { margin: 0 0 14px; font-weight: 600; }
.pn-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.pn-card {
  display: grid; gap: 6px; align-content: start;
  padding: 16px 18px 18px;
  border: 1px solid var(--ws-line, var(--gold)); border-inline-start: 4px solid var(--gold);
  border-radius: var(--r-md, 14px); background: var(--card, transparent);
}
.pn-name { margin: 0; font-size: 1.25rem; }
.pn-sens { margin: 0; font-style: italic; }
.pn-porte { margin: 0; font-size: .875rem; opacity: .85; }
.pn-facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 8px 0 12px; font-size: .875rem; }
.pn-facts dt { opacity: .7; }
.pn-facts dd { margin: 0; }
.pn-card .btn { justify-self: start; }

.pn-empty { padding: 20px; border: 1px dashed var(--gold); border-radius: var(--r-md, 14px); }
.pn-empty p { margin: 0 0 6px; }
.pn-note { margin: 28px 0 0; font-size: .8125rem; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .pn-choice { transition: none; }
}