/* ═══════════════════════════════════════════════════════
   CLM — Design system boutons
   Rôles fonctionnels : primary / secondary / danger / success / link
   Modificateur de taille : .btn-sm
   ═══════════════════════════════════════════════════════ */

:root {
  --clm-primary:            #1a1a2e;
  --clm-primary-hover:      #f0a500;
  --clm-primary-text:       #fff;
  --clm-primary-text-hover: #1a1a2e;

  --clm-secondary:             #fff;
  --clm-secondary-border:      #e0e0d8;
  --clm-secondary-text:        rgba(26,26,46,0.6);
  --clm-secondary-hover-border:#f0a500;
  --clm-secondary-hover-text:  #1a1a2e;

  --clm-danger:        #fde8e8;
  --clm-danger-text:   #e74c3c;
  --clm-danger-border: #f5c0c0;
  --clm-danger-solid:  #e74c3c;
  --clm-danger-solid-text: #fff;

  --clm-success:      #27ae60;
  --clm-success-hover:#219150;
  --clm-success-text: #fff;

  --clm-link: #1a6edb;
}

/* ── BASE ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 7px;
  border: 1.5px solid transparent;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 9px 18px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:disabled,
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── PRIMARY ── */
.btn-primary {
  background: var(--clm-primary);
  color: var(--clm-primary-text);
  border-color: var(--clm-primary);
}
.btn-primary:hover:not(:disabled) {
  background: var(--clm-primary-hover);
  border-color: var(--clm-primary-hover);
  color: var(--clm-primary-text-hover);
}

/* ── SECONDARY ── */
.btn-secondary {
  background: var(--clm-secondary);
  color: var(--clm-secondary-text);
  border-color: var(--clm-secondary-border);
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--clm-secondary-hover-border);
  color: var(--clm-secondary-hover-text);
}

/* ── DANGER ── */
.btn-danger {
  background: var(--clm-danger);
  color: var(--clm-danger-text);
  border-color: var(--clm-danger-border);
}
.btn-danger:hover:not(:disabled) {
  background: var(--clm-danger-solid);
  color: var(--clm-danger-solid-text);
  border-color: var(--clm-danger-solid);
}
/* Variante pleine directe (ex. "Supprimer définitivement") */
.btn-danger.btn-solid {
  background: var(--clm-danger-solid);
  color: var(--clm-danger-solid-text);
  border-color: var(--clm-danger-solid);
}
.btn-danger.btn-solid:hover:not(:disabled) {
  opacity: 0.88;
}

/* ── SUCCESS ── */
.btn-success {
  background: var(--clm-success);
  color: var(--clm-success-text);
  border-color: var(--clm-success);
}
.btn-success:hover:not(:disabled) {
  background: var(--clm-success-hover);
  border-color: var(--clm-success-hover);
}

/* ── LINK ── */
.btn-link {
  background: none;
  border-color: transparent;
  color: var(--clm-link);
  padding: 4px 2px;
  font-weight: 800;
}
.btn-link:hover:not(:disabled) {
  text-decoration: underline;
}

/* ── FOCUS (accessibilité, tous rôles) ── */
.btn:focus-visible {
  outline: 2px solid var(--clm-primary-hover);
  outline-offset: 2px;
}

/* ── TAILLE COMPACTE (tableaux, lignes) ──
   Volontairement PAS de .btn-sm ici : shared.js injecte déjà site-wide
   .btn-sm / .btn-sm.primary / .btn-sm.danger (padding 4px 10px, radius 5px,
   0.72rem — mêmes métriques que prévu). Redéfinir .btn-sm ici créerait une
   collision de cascade avec ce système déjà cohérent et partagé par
   plusieurs pages. Les boutons compacts de tableau restent sur le système
   shared.js existant. */