body {
    @apply bg-white text-gray-800;
}

header {
    @apply bg-ff6b35 text-white p-4;
}

nav a {
    @apply text-white hover:text-efeef0 mx-2;
}

h1, h2, h3 {
    @apply font-bold;
}

button {
    @apply bg-1a659e text-white py-2 px-4 rounded hover:bg-004e89;
}

section {
    @apply my-6 p-4;
}

footer {
    @apply bg-004e89 text-white p-4 text-center;
}

.card {
    @apply bg-white shadow-md rounded-lg p-4 my-4;
}

.card-title {
    @apply text-xl font-semibold;
}

.card-content {
    @apply text-gray-700;
}

/* Boutons personnalisés */
.btn-primary {
    @apply bg-primary text-white px-6 py-3 rounded-lg font-semibold hover:bg-primary/90 transition-all duration-300 shadow-md hover:shadow-lg;
}

.btn-primary-rounded {
    @apply bg-primary text-white px-6 py-3 rounded-full text-sm font-semibold hover:bg-primary/90 transition-all duration-200 shadow-md hover:shadow-lg transform hover:scale-105;
}

.btn-secondary {
    @apply bg-secondary-light text-tertiary px-6 py-3 rounded-lg font-semibold hover:bg-secondary-light/80 transition-all duration-300 shadow-md hover:shadow-lg border border-tertiary/20;
}

.btn-secondary-rounded {
    @apply bg-tertiary text-white px-6 py-3 rounded-full text-sm font-semibold hover:bg-tertiary/90 transition-all duration-200 shadow-md hover:shadow-lg transform hover:scale-105;
}

.btn-primary-large {
    @apply bg-primary text-white px-8 py-4 rounded-lg font-medium hover:shadow-lg transform hover:scale-105 transition-all duration-300 text-center;
}

.btn-secondary-large {
    @apply bg-tertiary text-white px-8 py-4 rounded-lg font-medium hover:shadow-lg transform hover:scale-105 transition-all duration-300 text-center;
}

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

.btn-secondary-outline {
    @apply border border-tertiary text-tertiary hover:bg-tertiary/5 px-6 py-3 rounded-lg shadow-md transition-all flex items-center;
}

/* Sections avec backgrounds colorés */
.section-colored {
    @apply bg-gradient-to-br from-primary/5 to-secondary/5;
}

.section-light {
    @apply bg-gradient-to-r from-light/20 to-accent/10;
}

.section-secondary {
    @apply bg-gradient-to-br from-secondary-light/20 to-primary/5;
}


/* Améliorations responsive mobile */
@media (max-width: 640px) {
    /* Espacement mobile optimisé */
    .container {
        @apply px-4;
    }
    
    /* Textes responsive */
    h1 {
        @apply text-2xl leading-tight;
    }
    
    h2 {
        @apply text-xl leading-tight;
    }
    
    h3 {
        @apply text-lg leading-tight;
    }
    
    /* Cards mobile */
    .card {
        @apply p-4 mx-2 rounded-xl;
    }
    
    /* Boutons mobile */
    .btn-primary,
    .btn-secondary {
        @apply px-4 py-3 text-sm;
    }
    
    /* Navigation mobile */
    nav {
        @apply px-3;
    }
    
    /* Sections mobile */
    section {
        @apply py-8 px-4;
    }
    
    /* Grids responsive */
    .grid {
        @apply gap-4;
    }
    
    /* Animations mobile optimisées */
    .transform {
        @apply transition-transform duration-200;
    }
    
    .hover\:scale-105:hover {
        @apply scale-102;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    /* Tablette */
    .container {
        @apply px-6;
    }
    
    section {
        @apply py-12 px-6;
    }
}

/* Améliorations pour la lisibilité */
.text-responsive {
    @apply text-sm sm:text-base lg:text-lg;
}

.heading-responsive {
    @apply text-xl sm:text-2xl lg:text-3xl;
}

.spacing-responsive {
    @apply space-y-4 sm:space-y-6 lg:space-y-8;
}

/* Burger menu flat styles */
.burger-line {
    @apply block w-5 h-0.5 bg-current transition-all duration-300 ease-in-out;
}

.burger-line + .burger-line {
    @apply mt-1;
}

/* Animations fluides */
.animate-smooth {
    @apply transition-all duration-300 ease-out;
}

.animate-bounce-subtle {
    animation: bounce-subtle 2s infinite;
}

@keyframes bounce-subtle {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-5px);
    }
    60% {
        transform: translateY(-3px);
    }
}

/* Focus states améliorés */
button:focus,
a:focus {
    @apply outline-none ring-2 ring-primary/30 ring-offset-2;
}

/* Accessibilité mobile */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}