/* Styles personnalisés pour Séla - Infogérance MSP */

/* Animations personnalisées */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Classes d'animation */
.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.animate-fade-in-left {
    animation: fadeInLeft 0.6s ease-out;
}

.animate-fade-in-right {
    animation: fadeInRight 0.6s ease-out;
}

.animate-pulse-slow {
    animation: pulse 2s infinite;
}

/* Styles pour le scroll fluide */
html {
    scroll-behavior: smooth;
}

/* Styles personnalisés pour les boutons */
.btn-primary {
    @apply bg-primary hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg text-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg;
}

.btn-secondary {
    @apply border-2 border-primary text-primary hover:bg-primary hover:text-white font-bold py-3 px-8 rounded-lg text-lg transition-all duration-300;
}

.btn-accent {
    @apply bg-accent hover:bg-yellow-500 text-white font-bold py-3 px-8 rounded-lg text-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg;
}

/* Styles pour les cartes */
.card {
    @apply bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1;
}

.card-hover {
    @apply hover:shadow-2xl hover:scale-105 transition-all duration-300;
}

/* Styles pour les gradients personnalisés */
.gradient-primary {
    background: linear-gradient(135deg, #3B82F6 0%, #1E40AF 100%);
}

.gradient-accent {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
}

.gradient-text {
    background: linear-gradient(135deg, #3B82F6 0%, #F59E0B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Styles pour les effets de survol */
.hover-lift {
    @apply transition-transform duration-300 hover:-translate-y-2;
}

.hover-glow {
    @apply transition-shadow duration-300 hover:shadow-lg hover:shadow-primary/25;
}

/* Styles pour les icônes */
.icon {
    @apply w-6 h-6 transition-colors duration-300;
}

.icon-hover {
    @apply hover:text-primary transition-colors duration-300;
}

/* Styles pour les formulaires */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-300;
}

.form-input:focus {
    @apply shadow-lg shadow-primary/25;
}

/* Styles pour les sections */
.section-padding {
    @apply py-20;
}

.section-title {
    @apply text-3xl md:text-4xl font-bold text-gray-900 mb-4;
}

.section-subtitle {
    @apply text-xl text-gray-600 max-w-2xl mx-auto;
}

/* Styles pour la navigation */
.nav-link {
    @apply text-gray-700 hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300;
}

.nav-link.active {
    @apply text-primary font-semibold;
}

/* Styles pour les statistiques */
.stat-number {
    @apply text-3xl font-bold text-primary mb-2;
}

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

/* Styles pour les témoignages */
.testimonial {
    @apply bg-white p-8 rounded-xl shadow-lg border-l-4 border-primary;
}

.testimonial-text {
    @apply text-gray-600 italic mb-4;
}

.testimonial-author {
    @apply font-semibold text-gray-900;
}

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

.badge-primary {
    @apply bg-primary/10 text-primary;
}

.badge-accent {
    @apply bg-accent/10 text-accent;
}

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

/* Styles pour les alertes */
.alert {
    @apply p-4 rounded-lg border;
}

.alert-info {
    @apply bg-blue-50 border-blue-200 text-blue-800;
}

.alert-success {
    @apply bg-green-50 border-green-200 text-green-800;
}

.alert-warning {
    @apply bg-yellow-50 border-yellow-200 text-yellow-800;
}

.alert-error {
    @apply bg-red-50 border-red-200 text-red-800;
}

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

.modal-content {
    @apply bg-white rounded-xl p-8 max-w-md w-full mx-4;
}

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

.tooltip::after {
    content: attr(data-tooltip);
    @apply absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-gray-900 text-white text-sm rounded-lg opacity-0 pointer-events-none transition-opacity duration-300;
}

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

/* Styles pour les loaders */
.loader {
    @apply animate-spin rounded-full h-8 w-8 border-b-2 border-primary;
}

/* Styles pour les transitions personnalisées */
.transition-all-smooth {
    @apply transition-all duration-500 ease-in-out;
}

.transition-colors-smooth {
    @apply transition-colors duration-300 ease-in-out;
}

/* Styles pour les effets de parallaxe */
.parallax {
    @apply transform-gpu;
}

/* Styles pour les animations d'apparition */
.fade-in {
    @apply opacity-0 transform translate-y-8 transition-all duration-700;
}

.fade-in.visible {
    @apply opacity-100 transform translate-y-0;
}

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

.grid-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* Styles pour les espacements personnalisés */
.space-y-custom > * + * {
    margin-top: 1.5rem;
}

.space-x-custom > * + * {
    margin-left: 1.5rem;
}

/* Styles pour les bordures personnalisées */
.border-gradient {
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #3B82F6, #F59E0B) border-box;
}

/* Styles pour les ombres personnalisées */
.shadow-custom {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.shadow-custom-lg {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Styles pour les effets de texte */
.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.text-shadow-lg {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Styles pour les effets de glassmorphism */
.glass {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Styles pour les effets de néon */
.neon {
    text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}

/* Styles pour les effets de morphing */
.morph {
    @apply transition-all duration-500 ease-in-out;
}

.morph:hover {
    @apply transform scale-105 rotate-1;
}

/* Styles pour les effets de liquide */
.liquid {
    @apply relative overflow-hidden;
}

.liquid::before {
    content: '';
    @apply absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent transform -skew-x-12 -translate-x-full;
    animation: liquid 3s infinite;
}

@keyframes liquid {
    0% {
        transform: -skew-x-12 -translate-x-full;
    }
    100% {
        transform: -skew-x-12 translate-x-full;
    }
}

/* Styles pour les effets de particules */
.particles {
    @apply relative;
}

.particles::before {
    content: '';
    @apply absolute inset-0 opacity-20;
    background-image: radial-gradient(circle at 20% 50%, #3B82F6 1px, transparent 1px),
                      radial-gradient(circle at 80% 20%, #F59E0B 1px, transparent 1px),
                      radial-gradient(circle at 40% 80%, #1E40AF 1px, transparent 1px);
    background-size: 50px 50px, 30px 30px, 40px 40px;
    animation: particles 20s linear infinite;
}

@keyframes particles {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100px);
    }
}

/* Styles responsives personnalisés */
@media (max-width: 640px) {
    .mobile-hidden {
        @apply hidden;
    }
    
    .mobile-full {
        @apply w-full;
    }
    
    .mobile-text-center {
        @apply text-center;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .tablet-hidden {
        @apply hidden;
    }
    
    .tablet-grid-2 {
        @apply grid-cols-2;
    }
}

@media (min-width: 1025px) {
    .desktop-hidden {
        @apply hidden;
    }
    
    .desktop-grid-3 {
        @apply grid-cols-3;
    }
}

/* Styles pour l'accessibilité */
.sr-only {
    @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
}

.focus-visible {
    @apply focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2;
}

/* Styles pour les états de chargement */
.loading {
    @apply opacity-50 pointer-events-none;
}

.skeleton {
    @apply animate-pulse bg-gray-200 rounded;
}

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

.notification-enter {
    @apply translate-x-full opacity-0;
}

.notification-enter-active {
    @apply translate-x-0 opacity-100;
}

.notification-exit {
    @apply translate-x-0 opacity-100;
}

.notification-exit-active {
    @apply translate-x-full opacity-0;
}