/* ============================================================
 *  Peerly — Boutons
 *  v8.1.0 — radius généreux
 * ============================================================ */

/* ---- Primaire ---- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition:
    background var(--duration-fast) var(--ease-out),
    transform var(--duration-instant) var(--ease-out);
  white-space: nowrap;
}
.btn-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--md-primary) 88%, white 12%);
}
.btn-primary:active:not(:disabled) {
  transform: scale(0.98);
}
.btn-primary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.btn-primary i { font-size: 15px; line-height: 1; }

/* ---- Secondaire ---- */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  border: 1px solid var(--md-outline-variant);
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-instant) var(--ease-out);
  white-space: nowrap;
}
.btn-secondary:hover:not(:disabled) {
  background: var(--md-surface-container-high);
  border-color: var(--md-outline);
}
.btn-secondary:active:not(:disabled) {
  transform: scale(0.98);
}
.btn-secondary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.btn-secondary i { font-size: 15px; line-height: 1; }

/* ---- Icône ---- */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--md-on-surface-variant);
  border: none;
  transition:
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}
.btn-icon:hover:not(:disabled) {
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
}
.btn-icon:active:not(:disabled) {
  background: var(--md-surface-container-highest);
}
.btn-icon:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.btn-icon i { font-size: 18px; line-height: 1; }

/* ---- Envoyer ---- */
.btn-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background: var(--md-primary);
  color: var(--md-on-primary);
  border: none;
  flex-shrink: 0;
  transition:
    background var(--duration-fast) var(--ease-out),
    transform var(--duration-instant) var(--ease-out);
}
.btn-send:hover:not(:disabled) {
  background: color-mix(in srgb, var(--md-primary) 88%, white 12%);
}
.btn-send:active:not(:disabled) {
  transform: scale(0.94);
}
.btn-send:disabled {
  background: var(--md-surface-container-high);
  color: var(--md-outline);
  cursor: not-allowed;
}
.btn-send i { font-size: 18px; line-height: 1; }

/* ---- Danger ---- */
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--md-error);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  border: 1px solid color-mix(in srgb, var(--md-error) 30%, transparent);
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}
.btn-danger:hover:not(:disabled) {
  background: var(--md-error-soft);
  border-color: var(--md-error);
}
.btn-danger:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-danger i { font-size: 15px; line-height: 1; }