/* ==========================================================================
   Boutons, liens, bouton icône — public/css/components/button.css
   Portés de design/maquettes/site/site.css. Jetons uniquement.

   Un seul bouton plein (vermillon) par écran : les actions secondaires sont
   des liens soulignés (`.link`) et ne doivent JAMAIS ressembler au principal.
   Le fond plein est --accent-fill (blanc dessus ≥ 5:1 dans les deux thèmes).
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h-btn); padding: 0 28px; border: 0; border-radius: var(--r-pill);
  background: var(--accent-fill); color: var(--ink-on-accent);
  font: 600 17px/1.2 var(--font-ui); letter-spacing: .005em; text-decoration: none; text-align: center; cursor: pointer;
  box-shadow: var(--shadow-cta); transition: background var(--t-fast) ease, transform var(--t-fast) ease;
}
/* Insécable dès que la largeur le permet ; peut passer à la ligne sous 380 px. */
@media (min-width: 380px) { .btn { white-space: nowrap; } }
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(1px); }
.btn .i { width: 20px; height: 20px; }
.btn--block { width: 100%; }
.btn--sm { min-height: var(--h-btn-sm); padding: 0 20px; font-size: 16px; }
/* Bouton clair posé sur un bloc encre (CTA final, révélation) : identique dans les deux thèmes. */
.btn--light { background: var(--btn-light-bg); color: var(--btn-light-ink); box-shadow: none; }
.btn--light:hover { background: var(--btn-light-hover); }
/* Envoi en cours : le bouton reste plein, le double envoi est neutralisé. */
.btn.is-loading { background: var(--accent-hover); cursor: progress; pointer-events: none; }
.btn:disabled:not(.is-loading) { cursor: not-allowed; opacity: .6; }
@media (max-width: 899px) { .btn--block-m { width: 100%; } }

.spinner {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2px solid var(--on-accent-track); border-top-color: var(--ink-on-accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Lien d'action secondaire (cible ≥ 44 px) */
.link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font: 500 15px/1.3 var(--font-ui); color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong);
}
.link .i { width: 16px; height: 16px; }
@media (min-width: 380px) { .link { white-space: nowrap; } }

/* Bouton icône rond de 44 px (thème, partage, PDF) */
.icon-btn {
  width: 44px; height: 44px; padding: 0; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: transparent; color: var(--ink-2); display: inline-grid; place-items: center; cursor: pointer;
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.icon-btn .i { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.6s; } }