/* ===============================================
   LA MESA DE LELO - STYLES PRINCIPAUX
   =============================================== */

/* Hero Section Background
   =============================================== */
.hero-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                      url('https://images.unsplash.com/photo-1740506871748-e8dddf59524b');
    background-size: cover;
    background-position: center;
}

/* Fix espacement sélecteur langue desktop */
#language-selector {
    padding-right: 2.5rem;
}

/* Services Cards Animations
   =============================================== */
.menu-card {
    transition: all 0.3s ease;
}

.menu-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Testimonials Cards Animations
   =============================================== */
.testimonial-card {
    transition: all 0.3s ease;
}

.testimonial-card:hover {
    transform: scale(1.03);
}

/* ===============================================
   MODAL LÉGAL - STYLES RESPONSIVES
   =============================================== */

/* Modal Overlay */
#legal-modal {
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s ease-out;
}

#legal-modal.hidden {
    animation: fadeOut 0.2s ease-in;
}

/* Modal Container */
#legal-modal .bg-white {
    animation: slideUp 0.3s ease-out;
    max-height: 95vh;
}

/* Desktop Styles */
@media (min-width: 768px) {
    #legal-modal .bg-white {
        max-width: 800px;
        max-height: 85vh;
    }
}

/* Mobile Styles - 95% écran */
@media (max-width: 767px) {
    #legal-modal .bg-white {
        width: 95%;
        max-height: 95vh;
        margin: 2.5vh auto;
    }
    
    #legal-modal .p-6 {
        padding: 1rem;
    }
    
    #legal-modal .text-2xl {
        font-size: 1.5rem;
    }
}

/* Navigation Tabs */
.legal-modal-tab {
    transition: all 0.2s ease;
    position: relative;
}

.legal-modal-tab.active {
    background-color: rgb(255 251 235); /* amber-50 */
    color: rgb(217 119 6); /* amber-600 */
    border-bottom: 2px solid rgb(217 119 6);
}

.legal-modal-tab:not(.active) {
    color: rgb(107 114 128); /* gray-600 */
}

.legal-modal-tab:not(.active):hover {
    color: rgb(217 119 6); /* amber-600 */
    background-color: rgb(249 250 251); /* gray-50 */
}

/* Contenu Scroll */
.legal-content {
    line-height: 1.7;
}

.legal-content h3 {
    color: rgb(31 41 55); /* gray-800 */
    margin-bottom: 1rem;
}

.legal-content h4 {
    color: rgb(55 65 81); /* gray-700 */
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.legal-content p {
    margin-bottom: 1rem;
    color: rgb(75 85 99); /* gray-600 */
}

.legal-content ul, .legal-content ol {
    margin-bottom: 1rem;
    color: rgb(75 85 99); /* gray-600 */
}

.legal-content li {
    margin-bottom: 0.5rem;
}

.legal-content strong {
    color: rgb(55 65 81); /* gray-700 */
    font-weight: 600;
}

/* Scroll personnalisé */
#legal-modal .overflow-y-auto::-webkit-scrollbar {
    width: 6px;
}

#legal-modal .overflow-y-auto::-webkit-scrollbar-track {
    background: rgb(243 244 246); /* gray-100 */
    border-radius: 3px;
}

#legal-modal .overflow-y-auto::-webkit-scrollbar-thumb {
    background: rgb(209 213 219); /* gray-300 */
    border-radius: 3px;
}

#legal-modal .overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: rgb(156 163 175); /* gray-400 */
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Focus States */
#legal-modal button:focus {
    outline: 2px solid rgb(217 119 6); /* amber-600 */
    outline-offset: 2px;
}

/* Close Button */
#close-modal {
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

#close-modal:hover {
    background-color: rgb(243 244 246); /* gray-100 */
    color: rgb(75 85 99); /* gray-600 */
}

/* Centrage des cartes services - responsive */
#services > div > div:last-child {
    display: flex !important;
    justify-content: center !important;
    gap: 2rem !important;
    flex-wrap: wrap !important;
}

#services .menu-card:not(.hidden) {
    flex: 1 1 300px !important;
    max-width: 400px !important;
    width: auto !important;
}

/* ===============================================
   SYSTÈME D'AUTHENTIFICATION CLIENT
   =============================================== */

/* Modal de connexion */
.login-modal {
    backdrop-filter: blur(8px);
}

/* Statut d'authentification */
.auth-status-connected {
    @apply bg-green-50 border border-green-200 rounded-lg p-4;
}

.auth-status-disconnected {
    @apply bg-red-50 border border-red-200 rounded-lg p-4;
}

/* Boutons d'authentification */
.auth-btn-login {
    @apply w-full bg-amber-600 hover:bg-amber-700 text-white font-bold py-3 px-6 rounded-lg transition;
}

.auth-btn-logout {
    @apply w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition;
}

.auth-btn-dashboard {
    @apply w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg transition;
}

.auth-btn-disabled {
    @apply bg-gray-400 text-white cursor-not-allowed;
}

/* Feedback messages */
.auth-error {
    @apply bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded;
}

.auth-success {
    @apply bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded;
}

/* Loading states */
.auth-loading {
    @apply opacity-75 cursor-not-allowed;
}

/* ===============================================
   DINERS PRIVÉS - STYLES SPÉCIFIQUES
   =============================================== */

/* Hero Image Background pour diners privés */
.hero-image-diners {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
                      url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0');
    background-size: cover;
    background-position: center;
}

/* Modal Menu Styles pour diners privés */
.menu-modal {
    backdrop-filter: blur(8px);
}

.menu-content {
    max-height: 80vh;
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    border: 2px solid #d97706;
}

.menu-item {
    border-bottom: 1px solid #374151;
    transition: all 0.3s ease;
}

.menu-item:hover {
    background-color: rgba(217, 119, 6, 0.1);
    transform: translateX(5px);
}

.menu-category {
    background: linear-gradient(90deg, #d97706, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.menu-description {
    font-style: italic;
    color: #9ca3af;
    line-height: 1.4;
}

/* ===============================================
   PRÉPARATION REPAS HEBDOMADAIRE - STYLES SPÉCIFIQUES
   =============================================== */

/* Hero Image Background pour préparation repas */
.hero-image-repas {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
                      url('https://images.unsplash.com/photo-1547592180-85f173990554?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80');
    background-size: cover;
    background-position: center;
}

.hero-image-bakery {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
                      url('https://images.unsplash.com/photo-1558961363-fa8fdf82db35?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1065&q=80');
    background-size: cover;
    background-position: center;
}

/* Meal Plan Card Styles */
.meal-plan-card {
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.meal-plan-card:hover {
    border-color: #d97706;
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.plan-price {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.meal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .meal-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .meal-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.day-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-left: 4px solid #d97706;
}

/* Styles pour les filtres de diète */
.diet-filter.active {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: #d97706 !important;
    transform: scale(1.05);
}

.meal-card-filtered {
    display: none !important;
}