@tailwind base;
@tailwind components;
@tailwind utilities;

/* Norman colors */
:root {
    --rouge-normand: #dc2626;
    --or-normand: #fbbf24;
    --gris-clair: #fef7ed;
    --gris-fonce: #374151;
}

@layer base {
    body {
        font-family: 'Inter', 'Open Sans', sans-serif;
        @apply bg-orange-50 text-gray-800 leading-relaxed;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-family: 'Lora', serif;
        @apply text-red-600 font-semibold;
    }
}

@layer components {
    .btn-primary {
        @apply inline-flex items-center px-6 py-3 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 transition-all duration-300 transform hover:-translate-y-0.5 hover:shadow-lg;
    }
    
    .btn-secondary {
        @apply inline-flex items-center px-6 py-3 bg-amber-400 text-gray-900 font-medium rounded-lg hover:bg-amber-500 transition-all duration-300;
    }
    
    .card {
        @apply bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden;
    }
    
    .card-hover {
        @apply transform hover:-translate-y-2 transition-all duration-300;
    }
    
    .norman-decoration {
        @apply h-2 bg-gradient-to-r from-red-600 via-amber-400 to-red-600 rounded-full;
    }
    
    .section-padding {
        @apply px-4 sm:px-6 lg:px-8 py-6 lg:py-8;
    }
    
    .container-custom {
        @apply max-w-7xl mx-auto;
    }
}

/* Custom styles for specific elements */
.hero-gradient {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.9) 0%, rgba(251, 191, 36, 0.8) 100%);
}

.story-card {
    @apply card card-hover cursor-pointer group;
}

.story-card:hover .story-arrow {
    @apply translate-x-2;
}

.story-arrow {
    @apply transition-transform duration-300;
}

.audio-player {
    @apply w-full bg-gray-100 rounded-lg p-4;
}

.modal-backdrop {
    @apply fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4;
}

.modal-content {
    @apply bg-white rounded-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto;
}

.mobile-menu {
    @apply lg:hidden;
}

.desktop-menu {
    @apply hidden lg:flex;
}

.mobile-menu button {
    @apply lg:hidden;
}

/* Responsive typography */
@layer utilities {
    .text-hero {
        @apply text-4xl sm:text-5xl lg:text-6xl font-bold;
    }
    
    .text-section-title {
        @apply text-3xl sm:text-4xl lg:text-5xl font-bold;
    }
    
    .text-card-title {
        @apply text-lg sm:text-xl font-semibold;
    }
}

/* Animation utilities */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.animate-delay-100 {
    animation-delay: 0.1s;
}

.animate-delay-200 {
    animation-delay: 0.2s;
}

.animate-delay-300 {
    animation-delay: 0.3s;
}

/* Petites Histoires specific styles */
.stories-hero {
    @apply relative bg-gradient-to-br from-red-600 to-amber-500 text-white;
}

.stories-intro {
    @apply card section-padding text-center;
}

.stories-grid {
    @apply grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 lg:gap-8;
}

.story-card {
    @apply card card-hover cursor-pointer group relative overflow-hidden;
}

.story-card::before {
    content: '';
    @apply absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-amber-400 to-red-600;
}

.story-image {
    @apply w-full h-48 sm:h-56 object-cover group-hover:scale-105 transition-transform duration-500;
}

.story-card img {
    @apply w-full h-48 object-cover;
}

.story-content {
    @apply p-6;
}

.story-title {
    @apply text-card-title text-red-600 mb-3 group-hover:text-red-700 transition-colors;
}

.story-description {
    @apply text-gray-800 mb-4 line-clamp-3 font-medium;
}

.story-duration {
    @apply inline-flex items-center text-sm font-medium text-amber-600 mb-4;
}

.story-arrow {
    @apply absolute bottom-4 right-6 text-2xl text-amber-500 transition-transform duration-300;
}

.audio-intro {
    @apply mt-6 p-4 bg-gray-50 rounded-lg;
}

/* Modal styles */
.modal {
    @apply hidden fixed inset-0 bg-black bg-opacity-75 z-50 overflow-y-auto;
}

.modal.active {
    @apply flex items-center justify-center p-4;
}

.modal-contenu {
    @apply bg-white rounded-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto relative;
}

.modal-header {
    @apply sticky top-0 bg-white border-b border-gray-200 p-6 flex justify-between items-center rounded-t-2xl;
}

.modal-body {
    @apply p-6;
}

.modal-image {
    @apply w-full h-64 sm:h-80 object-cover rounded-lg mb-6;
}

.modal-title {
    @apply text-section-title text-red-600 mb-4;
}

.modal-text {
    @apply text-gray-700 leading-relaxed mb-6 text-lg;
}

.fermer {
    @apply text-3xl text-gray-400 hover:text-gray-600 cursor-pointer transition-colors p-2 -m-2;
}

.audio-player {
    @apply w-full bg-gray-100 rounded-lg p-4;
}

/* Additional responsive utilities */
@media (max-width: 640px) {
    .stories-grid {
        @apply grid-cols-1;
    }
    
    .story-card {
        @apply mx-4;
    }
    
    .modal-contenu {
        @apply m-4 max-h-[95vh];
    }
    
    .text-hero {
        @apply text-3xl;
    }
}

/* Print styles */
@media print {
    .modal, .btn-primary, .btn-secondary {
        @apply hidden;
    }
}