/* Custom CSS for Compare-paiement.fr */



/* Button Styles */

.btn {

  @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;

}



.btn-primary {

  @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;

}



.btn-secondary {

  @apply bg-white text-blue-600 border-blue-600 hover:bg-blue-50 focus:ring-blue-500;

}



.btn-success {

  @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;

}



.btn-purple {

  @apply bg-purple-600 text-white hover:bg-purple-700 focus:ring-purple-500;

}



.btn-warning {

  @apply bg-orange-600 text-white hover:bg-orange-700 focus:ring-orange-500;

}



.btn-outline {

  @apply bg-transparent text-gray-700 border-gray-300 hover:bg-gray-50 focus:ring-gray-500;

}



.btn-outline-white {

  @apply bg-transparent text-white border-white hover:bg-white hover:text-blue-600 focus:ring-white;

}



.btn-lg {

  @apply px-8 py-3 text-lg;

}



/* Card Styles */

.card {

  @apply bg-white rounded-lg shadow-md border border-gray-200;

}



.card-header {

  @apply p-6 border-b border-gray-200;

}



.card-content {

  @apply p-6;

}



.card-title {

  @apply text-xl font-semibold text-gray-900 mb-2;

}



.card-description {

  @apply text-gray-600;

}



/* Badge Styles */

.badge {

  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;

}



.badge-primary {

  @apply bg-blue-100 text-blue-800;

}



.badge-success {

  @apply bg-green-100 text-green-800;

}



.badge-warning {

  @apply bg-yellow-100 text-yellow-800;

}



.badge-danger {

  @apply bg-red-100 text-red-800;

}



/* Collapsible Styles */

.collapsible-trigger:hover {

  @apply bg-gray-50;

}



.collapsible-trigger.active svg {

  @apply rotate-180;

}



/* Animation Classes */

.animate-pulse {

  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

}



.animate-bounce {

  animation: bounce 1s infinite;

}



@keyframes pulse {

  0%,

  100% {

    opacity: 1;

  }

  50% {

    opacity: 0.5;

  }

}



@keyframes bounce {

  0%,

  100% {

    transform: translateY(-25%);

    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);

  }

  50% {

    transform: none;

    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);

  }

}



/* Gradient Backgrounds */

.bg-gradient-to-br {

  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));

}



.bg-gradient-to-r {

  background-image: linear-gradient(to right, var(--tw-gradient-stops));

}



.from-blue-50 {

  --tw-gradient-from: #eff6ff;

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 246, 255, 0));

}



.to-indigo-100 {

  --tw-gradient-to: #e0e7ff;

}



.from-blue-600 {

  --tw-gradient-from: #2563eb;

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(37, 99, 235, 0));

}



.to-purple-600 {

  --tw-gradient-to: #9333ea;

}



/* Responsive Design */

@media (max-width: 768px) {

  .text-4xl {

    font-size: 2.25rem;

    line-height: 2.5rem;

  }



  .text-6xl {

    font-size: 3rem;

    line-height: 1;

  }

}



/* WhatsApp Chat Styles */

#whatsapp-chat {

  z-index: 1000;

}



#whatsapp-expanded {

  animation: slideInUp 0.3s ease-out;

}



@keyframes slideInUp {

  from {

    transform: translateY(20px);

    opacity: 0;

  }

  to {

    transform: translateY(0);

    opacity: 1;

  }

}



/* Table Styles */

.table-responsive {

  @apply overflow-x-auto;

}



.table {

  @apply w-full border-collapse;

}



.table th {

  @apply text-left p-4 font-semibold border-b-2 border-gray-200;

}



.table td {

  @apply p-4 border-b border-gray-200;

}



.table tbody tr:nth-child(even) {

  @apply bg-gray-50;

}



/* Form Styles */

.form-input {

  @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500;

}



.form-label {

  @apply block text-sm font-medium text-gray-700 mb-1;

}



/* Utility Classes */

.text-shadow {

  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}



.backdrop-blur {

  backdrop-filter: blur(10px);

}



/* Print Styles */

@media print {

  .no-print {

    display: none !important;

  }

}



/* Custom transitions */

.transition-colors {

  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;

}



.transition-transform {

  transition: transform 0.2s ease;

}



/* Focus styles for accessibility */

.focus\:ring-2:focus {

  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);

}



/* Hover effects */

.hover\:shadow-lg:hover {

  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

}



/* Custom scrollbar */

::-webkit-scrollbar {

  width: 8px;

}



::-webkit-scrollbar-track {

  background: #f1f1f1;

}



::-webkit-scrollbar-thumb {

  background: #c1c1c1;

  border-radius: 4px;

}



::-webkit-scrollbar-thumb:hover {

  background: #a8a8a8;

}

svg.mr-2.h-5.w-5 {

  float: left;

}

.transition-colors {

  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;

  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;

  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;

  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  transition-duration: 150ms;

}

svg.ml-2.h-5.w-5 {

  float: right;

}

button.btn.btn-outline.btn-lg.transition-colors {

  border: 1px solid;

  background: #fff;

  font-size: 1rem;

}

button.btn.btn-primary.btn-lg.bleupp {

  font-size: 1rem;

}

.card-content {
  padding: 1.5rem;
}

.card-description {
  min-height: 4.5rem;
}

.btn {
  font-size: 0.9rem !important;
}

.btn-purple {
  color: #fff !important;
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1)) !important;
}

p.text-gray-600 {
  line-height: 1.2;
}

.text-lg {
  font-size: 1.12rem !important;
  line-height: 1.75rem;
}

.smallpayplug {
  padding: 0 1.5rem 0 1.5rem;
  font-size: 0.85rem;
  color: #777;
}

#comparatif-micro-entreprise .absolute.-top-3 {
  width: 100%;
  text-align: center;
}