/* Parcours public (Phase 7) : formulaires, boutons, listes de choix. */

.step-title {
  margin-bottom: var(--space-md);
}

.back-link {
  display: inline-block;
  /* padding vertical (pas seulement line-height) pour atteindre les
     24px de hauteur de cible minimum (WCAG 2.2 SC 2.5.8) : ce lien
     fait office de contrôle de navigation autonome, pas d'un lien
     noyé dans une phrase — l'exception "inline" de 2.5.8 ne s'applique
     pas ici. */
  padding: 0.4rem 0;
  margin-bottom: var(--space-md);
  color: var(--color-ink-muted);
  font-size: var(--text-small);
  text-decoration: none;
}

.back-link:hover {
  color: var(--color-primary-hover);
}

.step-intro {
  margin-bottom: var(--space-lg);
}

/* --- Grille de sélection (CCI, mode de recherche) --------------------- */

.choice-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.choice-grid > li {
  display: flex;
}

.choice-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 640px) {
  .choice-grid--3col {
    grid-template-columns: 1fr;
  }
}

.choice-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border: 1px solid var(--color-border-interactive);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-ink);
  text-align: center;
}

.choice-card:hover,
.choice-card:focus-visible {
  border-color: var(--color-primary);
}

.choice-card__logo {
  height: 40px;
  width: auto;
}

.choice-card__label {
  font-weight: 600;
  font-size: var(--text-h2);
}

/* --- Formulaires -------------------------------------------------------- */

.form-field {
  margin-bottom: var(--space-md);
}

.form-field label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.form-field input[type="text"] {
  width: 100%;
  max-width: 28rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border-interactive);
  border-radius: var(--radius-sm);
  font-size: var(--text-body);
  font-family: var(--font-body);
}

.form-field input:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.form-field--checkbox label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  font-weight: 400;
  cursor: pointer;
}

.form-field--checkbox input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--color-primary);
}

.form-field__hint {
  color: var(--color-ink-muted);
  font-size: var(--text-small);
  margin-top: var(--space-xs);
}

/* --- Boutons ------------------------------------------------------------ */

.btn {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.7rem 1.5rem;
  font-size: var(--text-body);
  font-family: var(--font-body);
  cursor: pointer;
  text-decoration: none;
  margin-top: var(--space-xs);
}

.btn:hover {
  background: var(--color-primary-hover);
  /*
   * Sans ce color: la règle générique `a:hover` (base.css, plus
   * spécifique que `.btn:hover` seul sur cette propriété) repeint le
   * texte dans --color-primary-hover, soit la même teinte que ce
   * fond au survol — le libellé du bouton devenait illisible.
   */
  color: #fff;
}

.btn:disabled {
  background: var(--color-border);
  color: var(--color-ink-muted);
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--color-surface-alt);
  color: var(--color-ink);
  border: 1px solid var(--color-border-interactive);
}

.btn-secondary:hover {
  background: var(--color-border);
  color: var(--color-ink);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* --- Résultats de recherche (étape 2, plusieurs correspondances) ------ */

.result-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border-interactive);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.result-list__item + .result-list__item {
  border-top: 1px solid var(--color-border);
}

.result-list__link {
  display: block;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-ink);
  text-decoration: none;
}

.result-list__link:hover,
.result-list__link:focus-visible {
  background: var(--color-surface-alt);
}

.result-list__name {
  font-weight: 600;
}

.result-list__meta {
  color: var(--color-ink-muted);
  font-size: var(--text-small);
}

/* --- Modal de confirmation (envoi de confirm/infirm) ------------------- */

dialog.modal {
  max-width: 28rem;
  width: calc(100% - 2 * var(--space-lg));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-lg);
  margin: auto;
}

dialog.modal::backdrop {
  background: rgb(22 22 42 / 0.5);
}

dialog.modal .actions {
  margin-top: var(--space-lg);
}

/* --- Message d'erreur (ex. échec de vérification Turnstile) ------------ */

.form-error {
  background: var(--color-danger-surface);
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-md);
}

/* --- Rappel de vérification déjà effectuée (étape 3) ------------------- */

.notice {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

.notice p {
  margin-bottom: var(--space-sm);
}

.notice p:last-child,
.notice a:last-child {
  margin-bottom: 0;
}

/* --- Fiche de confirmation (étape 3) ----------------------------------- */

.confirmation-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.confirmation-card dt {
  font-weight: 600;
  color: var(--color-ink-muted);
  font-size: var(--text-small);
}

.confirmation-card dd {
  margin: 0 0 var(--space-sm);
}