/* ============================================
   Système de Boutons Standardisés
   ============================================ */

/* Bouton Principal */
.btn-primary {
  @apply px-6 py-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700 active:bg-blue-800 transition-all duration-200 font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 active:translate-y-0 focus:ring-4 focus:ring-blue-300 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0;
}

/* Bouton Secondaire */
.btn-secondary {
  @apply px-6 py-3 bg-white text-gray-700 border-2 border-gray-300 rounded-xl hover:bg-gray-50 hover:border-gray-400 active:bg-gray-100 transition-all duration-200 font-semibold shadow-md hover:shadow-lg focus:ring-4 focus:ring-gray-200 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed;
}

/* Bouton Danger */
.btn-danger {
  @apply px-6 py-3 bg-red-600 text-white rounded-xl hover:bg-red-700 active:bg-red-800 transition-all duration-200 font-semibold shadow-lg hover:shadow-xl focus:ring-4 focus:ring-red-300 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed;
}

/* Bouton Succès */
.btn-success {
  @apply px-6 py-3 bg-green-600 text-white rounded-xl hover:bg-green-700 active:bg-green-800 transition-all duration-200 font-semibold shadow-lg hover:shadow-xl focus:ring-4 focus:ring-green-300 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed;
}

/* Bouton Avertissement */
.btn-warning {
  @apply px-6 py-3 bg-amber-500 text-white rounded-xl hover:bg-amber-600 active:bg-amber-700 transition-all duration-200 font-semibold shadow-lg hover:shadow-xl focus:ring-4 focus:ring-amber-300 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed;
}

/* Bouton Info */
.btn-info {
  @apply px-6 py-3 bg-cyan-600 text-white rounded-xl hover:bg-cyan-700 active:bg-cyan-800 transition-all duration-200 font-semibold shadow-lg hover:shadow-xl focus:ring-4 focus:ring-cyan-300 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed;
}

/* Bouton avec icône */
.btn-icon {
  @apply inline-flex items-center gap-2;
}

/* Tailles de boutons */
.btn-xs {
  @apply px-3 py-1.5 text-xs;
}

.btn-sm {
  @apply px-4 py-2 text-sm;
}

.btn-md {
  @apply px-6 py-3 text-base;
}

.btn-lg {
  @apply px-8 py-4 text-lg;
}

.btn-xl {
  @apply px-10 py-5 text-xl;
}

/* Bouton pleine largeur */
.btn-block {
  @apply w-full justify-center;
}

/* Bouton outline */
.btn-outline-primary {
  @apply px-6 py-3 bg-transparent text-blue-600 border-2 border-blue-600 rounded-xl hover:bg-blue-50 active:bg-blue-100 transition-all duration-200 font-semibold shadow-sm hover:shadow-md focus:ring-4 focus:ring-blue-200 focus:outline-none;
}

.btn-outline-secondary {
  @apply px-6 py-3 bg-transparent text-gray-700 border-2 border-gray-300 rounded-xl hover:bg-gray-50 active:bg-gray-100 transition-all duration-200 font-semibold shadow-sm hover:shadow-md focus:ring-4 focus:ring-gray-200 focus:outline-none;
}

/* Bouton ghost (minimal) */
.btn-ghost {
  @apply px-4 py-2 bg-transparent text-gray-700 hover:bg-gray-100 active:bg-gray-200 rounded-xl transition-colors duration-200 font-medium;
}

/* Bouton link */
.btn-link {
  @apply px-2 py-1 bg-transparent text-blue-600 hover:text-blue-700 hover:underline font-medium transition-colors duration-200;
}

/* Groupes de boutons */
.btn-group {
  @apply inline-flex rounded-xl shadow-sm;
}

.btn-group>button:not(:last-child),
.btn-group>a:not(:last-child) {
  @apply rounded-r-none border-r-0;
}

.btn-group>button:not(:first-child),
.btn-group>a:not(:first-child) {
  @apply rounded-l-none;
}

/* États spéciaux */
.btn-loading {
  @apply relative pointer-events-none;
}

.btn-loading::after {
  content: '';
  @apply absolute inset-0 flex items-center justify-center;
  background: inherit;
  border-radius: inherit;
}

.btn-loading::before {
  content: '';
  @apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2;
  @apply w-5 h-5 border-2 border-white border-t-transparent rounded-full;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}