/* =====================================================================
   Opera Populi : boutons, liens, formulaires
   ===================================================================== */

/* ---------- Boutons et liens ---------- */
.btn {
  --btn-bg: var(--surface); --btn-fg: var(--text); --btn-bd: var(--field-border);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 2.75rem; padding: .6rem 1.15rem;
  border: 1.5px solid var(--btn-bd); border-radius: var(--r-sm);
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
    color var(--dur), box-shadow var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { --btn-bg: var(--surface-2); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn .icon { transition: translate var(--dur) var(--ease-out); }
.btn:hover .icon--end { translate: 3px 0; }
.btn--primary {
  --btn-bg: var(--accent); --btn-fg: var(--accent-ink); --btn-bd: var(--accent);
  box-shadow: var(--shadow-inset), var(--shadow-sm);
}
.btn--primary:hover { --btn-bg: var(--accent-hover); --btn-bd: var(--accent-hover); box-shadow: var(--shadow-inset), var(--shadow-md); }
.btn--ghost { --btn-bg: transparent; }
/* Action destructive (retirer une idée, se déconnecter en perdant des envois) : contour au ton danger des statuts,
   distinct du bouton principal terracotta ; contraste AA en clair et en sombre */
.btn--danger { --btn-bg: transparent; --btn-fg: var(--st-rejected-fg); --btn-bd: var(--st-rejected-fg); }
.btn--danger:hover { --btn-bg: var(--st-rejected-bg); }
.btn--ghost:hover { --btn-bg: var(--surface-2); --btn-bd: var(--text-muted); }
.btn--sm { min-height: 2.25rem; padding: .4rem .8rem; font-size: var(--fs-sm); }
.btn--lg { min-height: 3.1rem; padding: .75rem 1.4rem; }
.btn--block { width: 100%; white-space: normal; text-align: center; } /* libellé long : sur 2 lignes, jamais de débordement */
/* aria-disabled : indisponible mais focalisable (ex. délai avant renvoi de l'email, ui/verify-banner.js) */
.btn:disabled, .btn[aria-disabled="true"] {
  --btn-bg: var(--surface-3); --btn-fg: var(--text-muted); --btn-bd: var(--line-strong);
  box-shadow: none; cursor: not-allowed; transform: none;
}
.btn:disabled .icon, .btn[aria-disabled="true"] .icon { translate: none; }
/* Libellé masqué visuellement (reste lu) : mobile étroit et en-tête desktop chargé */
@media (max-width: 30rem), (min-width: 60rem) and (max-width: 74.99rem) {
  .btn--collapse { padding-inline: var(--sp-2); }
  .btn--collapse .btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Icône seule sur mobile : 44 px de haut (la largeur reste celle de l'icône : l'en-tête doit tenir à 320 px) */
@media (max-width: 30rem) { .btn--collapse { min-height: 2.75rem; } }

.link {
  color: var(--accent-text); font-weight: var(--fw-semibold);
  text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: .22em;
  transition: text-decoration-color var(--dur);
}
.link:hover { text-decoration-color: currentColor; }
.link .icon { display: inline-block; width: 1em; height: 1em; margin-left: .3em; vertical-align: -.12em; }
.link--strong { font-size: var(--fs-md); }

/* ---------- Formulaires ---------- */
.form { --gap: var(--sp-5); display: grid; gap: var(--gap); }
.auth-form { --gap: var(--sp-4); }
.form__note { margin-top: calc(var(--sp-2) - var(--gap)); text-align: center; }
.form__live:empty,
.form__live:has(> [hidden]):not(:has(> :not([hidden]))) { margin-top: calc(-1 * var(--gap)); }
.field { display: grid; gap: .4rem; }
.field__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.input {
  width: 100%; min-height: 2.9rem; padding: .65rem .9rem;
  background: var(--surface); color: var(--text);
  border: 1.5px solid var(--field-border); border-radius: var(--r-sm);
  font-size: var(--fs-md); line-height: 1.45;
  transition: border-color var(--dur), box-shadow var(--dur), background-color var(--dur);
}
.input::placeholder { color: var(--text-muted); opacity: 1; }
.input:hover { border-color: var(--text-muted); }
.input:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px var(--focus-ring); }
.input[aria-invalid="true"] { border-color: var(--st-rejected-fg); background: color-mix(in srgb, var(--st-rejected-bg) 40%, var(--surface)); }
.input--area { min-height: 8.5rem; resize: vertical; }
.field__hint { font-size: var(--fs-xs); color: var(--text-muted); }
.field__error { display: flex; align-items: flex-start; gap: .45rem; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--st-rejected-fg); }
.field__error::before { content: ""; width: .5em; height: .5em; flex: none; margin-top: calc((1lh - .5em) / 2); border-radius: var(--r-2xs); background: currentColor; rotate: 45deg; }
.count { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.count[data-state="near"] { color: var(--st-pending-fg); font-weight: var(--fw-bold); }
.check { display: flex; align-items: flex-start; gap: .7rem; font-size: var(--fs-sm); }
.check__input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; flex: none; accent-color: var(--accent); }
.check__label a { color: var(--accent-text); font-weight: var(--fw-semibold); }
button.link { font-size: var(--fs-sm); }

/* Contrôle segmenté (radios) */
.segmented { display: grid; gap: .5rem; }
.segmented__track {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
}
.segmented__opt { position: relative; min-width: 0; }
.segmented__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segmented__opt span {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.6rem; padding: .4rem .5rem; border-radius: var(--r-sm);
  color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  transition: background-color var(--dur), color var(--dur), box-shadow var(--dur);
}
.segmented__opt:hover span { color: var(--text); }
.segmented__opt input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); }
.segmented__opt input:checked + span .icon { color: var(--type-tone); }
.segmented__opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
[data-type="idea"] { --type-tone: var(--st-pending-fg); }
[data-type="bug"] { --type-tone: var(--st-rejected-fg); }
[data-type="improvement"] { --type-tone: var(--st-implemented-fg); }
@media (max-width: 26rem) {
  .segmented__opt span { flex-direction: column; gap: .15rem; min-height: 3.2rem; padding-inline: .15rem; font-size: var(--fs-xs); }
}