/* Styles personnalisés complémentaires à Tailwind */

/* Animation fade-in */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

/* Styles pour les images */
img {
    max-width: 100%;
    height: auto;
}

/* Styles pour les boutons */
.btn-primary {
    @apply bg-blue-600 text-white px-6 py-3 rounded-full font-semibold transition duration-300;
}

.btn-primary:hover {
    @apply bg-blue-700 transform scale-105;
}

/* Styles pour les cartes */
.card {
    @apply bg-white rounded-lg shadow-md transition duration-300;
}

.card:hover {
    @apply shadow-lg transform -translate-y-1;
}

/* Styles pour les sections */
section {
    @apply py-16;
}

/* Styles pour les titres */
h1, h2, h3, h4, h5, h6 {
    @apply font-bold;
}

/* Styles pour les liens */
a {
    @apply transition duration-300;
}

/* Styles pour le formulaire */
input, textarea, select {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

/* Styles pour les badges */
.badge {
    @apply inline-block px-3 py-1 text-sm font-semibold rounded-full;
}

.badge-primary {
    @apply bg-blue-100 text-blue-800;
}

/* Styles pour les icônes */
.icon {
    @apply inline-block w-6 h-6;
}

/* Styles pour les listes */
ul {
    @apply list-none;
}

/* Styles pour les tableaux */
table {
    @apply w-full border-collapse;
}

th, td {
    @apply border border-gray-300 px-4 py-2;
}

th {
    @apply bg-gray-100 font-semibold;
}

/* Styles pour les messages d'alerte */
.alert {
    @apply p-4 rounded-lg mb-4;
}

.alert-success {
    @apply bg-green-100 text-green-800;
}

.alert-error {
    @apply bg-red-100 text-red-800;
}

.alert-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.alert-info {
    @apply bg-blue-100 text-blue-800;
}

/* Styles pour les tooltips */
.tooltip {
    @apply relative inline-block;
}

.tooltip .tooltip-text {
    @apply invisible absolute z-10 px-3 py-2 text-sm text-white bg-gray-900 rounded-lg opacity-0 transition-opacity duration-300;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
}

.tooltip:hover .tooltip-text {
    @apply visible opacity-100;
}

/* Styles pour les loaders */
.loader {
    @apply w-8 h-8 border-4 border-blue-200 border-t-blue-600 rounded-full animate-spin;
}

/* Styles pour les modales */
.modal {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
}

.modal-content {
    @apply bg-white rounded-lg p-6 max-w-lg w-full mx-4;
}

/* Styles pour les notifications */
.notification {
    @apply fixed bottom-4 right-4 p-4 rounded-lg shadow-lg z-50 transform transition-transform duration-300;
}

.notification-success {
    @apply bg-green-500 text-white;
}

.notification-error {
    @apply bg-red-500 text-white;
}

/* Styles pour les grilles responsives */
.grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

/* Styles pour les images de fond */
.bg-image {
    @apply bg-cover bg-center bg-no-repeat;
}

/* Styles pour les overlays */
.overlay {
    @apply absolute inset-0 bg-black bg-opacity-50;
}

/* Styles pour les cartes de prix */
.price-card {
    @apply bg-white rounded-lg shadow-md p-6 text-center transition duration-300;
}

.price-card:hover {
    @apply shadow-lg transform -translate-y-2;
}

.price-card.featured {
    @apply border-2 border-blue-500;
}

/* Styles pour les témoignages */
.testimonial {
    @apply bg-white rounded-lg shadow-md p-6;
}

.testimonial-author {
    @apply flex items-center mt-4;
}

.testimonial-author img {
    @apply w-12 h-12 rounded-full mr-4;
}

/* Styles pour les statistiques */
.stat-card {
    @apply text-center p-6;
}

.stat-number {
    @apply text-4xl font-bold text-blue-600 mb-2;
}

.stat-label {
    @apply text-gray-600;
}

/* Styles pour les timelines */
.timeline {
    @apply relative;
}

.timeline::before {
    content: '';
    @apply absolute left-1/2 transform -translate-x-1/2 w-0.5 h-full bg-gray-200;
}

.timeline-item {
    @apply relative mb-8;
}

.timeline-content {
    @apply bg-white rounded-lg shadow-md p-4;
}

/* Styles pour les accordéons */
.accordion {
    @apply border border-gray-200 rounded-lg;
}

.accordion-header {
    @apply p-4 cursor-pointer flex justify-between items-center;
}

.accordion-content {
    @apply p-4 border-t border-gray-200 hidden;
}

.accordion-content.active {
    @apply block;
}

/* Styles pour les onglets */
.tabs {
    @apply flex border-b border-gray-200;
}

.tab {
    @apply px-4 py-2 cursor-pointer;
}

.tab.active {
    @apply border-b-2 border-blue-500 text-blue-600;
}

.tab-content {
    @apply hidden p-4;
}

.tab-content.active {
    @apply block;
}