/**
 * Theme: Christmas Festive - Veillée de Noël Élégante
 * Inspiration: Design rouge bordeaux avec ornements dorés
 * Architecture: Système universel 60-30-10
 */

/* ============================================
   VARIABLES UNIVERSELLES
   ============================================ */
:root {
    /* Couleurs de base du thème */
    --festive-burgundy: #8b1a1a;
    --festive-gold: #d4af37;
    --festive-cream: #f5f2e8;
    --festive-white: #ffffff;
    --festive-text-light: rgba(255, 255, 255, 0.95);
    --festive-text-desc: rgba(255, 255, 255, 0.80);
    
    /* Les variables --color-primary/secondary/accent sont injectées dynamiquement */
}

/* ============================================
   BODY & BACKGROUND
   ============================================ */
body {
    background: var(--color-primary, var(--festive-burgundy)) !important;
    font-family: 'Lato', sans-serif;
    color: var(--festive-text-light) !important;
    margin: 0;
    padding: 0;
    position: relative;
    overflow-x: hidden;
}

/* Force TOUS les textes à être blancs par défaut */
.christmas-festive-container,
.christmas-festive-container *,
.menu-header-festive,
.menu-header-festive * {
    color: var(--festive-text-light) !important;
}

/* Exceptions pour les éléments spécifiques */
.dish-price,
.menu-title-main,
.menu-date-badge {
    color: var(--festive-gold) !important;
}

/* Ornements dorés dans les coins */
body::before,
body::after {
    content: '';
    position: fixed;
    width: 300px;
    height: 300px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 10 L55 30 L75 25 L60 45 L80 50 L60 55 L75 75 L55 70 L50 90 L45 70 L25 75 L40 55 L20 50 L40 45 L25 25 L45 30 Z' fill='%23d4af37' opacity='0.15'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.15;
    pointer-events: none;
    z-index: 1;
}

body::before {
    top: -50px;
    left: -50px;
    transform: rotate(-15deg);
}

body::after {
    bottom: -50px;
    right: -50px;
    transform: rotate(15deg) scaleX(-1);
}

/* ============================================
   NAVBAR TOP - Minimaliste
   ============================================ */
.navbar-christmas-festive {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 1.5rem 0;
    position: relative;
    z-index: 100;
}

.navbar-christmas-festive .navbar-brand {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    color: var(--festive-gold) !important;
    font-weight: 400;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.navbar-christmas-festive .navbar-brand img {
    max-height: 60px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

/* ============================================
   BOTTOM NAVIGATION - Discrète
   ============================================ */
.navbar-christmas-festive-bottom {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.3);
    padding: 0.75rem 1rem;
    z-index: 1040;
}

.navbar-christmas-festive-bottom .navbar-brand {
    color: var(--festive-gold) !important;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.navbar-christmas-festive-bottom .navbar-toggler {
    border-color: var(--festive-gold) !important;
    color: var(--festive-gold) !important;
}

.navbar-christmas-festive-bottom .navbar-toggler i {
    color: var(--festive-gold) !important;
    font-size: 1.2rem;
}

.christmas-festive-nav-link {
    color: var(--festive-text-light) !important;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    padding: 0.5rem 1rem !important;
    transition: all 0.3s ease;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
}

.christmas-festive-nav-link:hover,
.christmas-festive-nav-link.active {
    background: rgba(212, 175, 55, 0.15) !important;
    border-color: var(--festive-gold);
    color: var(--festive-gold) !important;
}

/* Swipe indicator */
.navbar-christmas-festive-bottom .swipe-indicator {
    color: var(--festive-gold) !important;
}

/* Sélecteur de langues dans la bottom navbar */
.navbar-christmas-festive-bottom .language-selector-dropdown,
.navbar-christmas-festive-bottom .dropdown-menu.language-selector-dropdown {
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 12px;
    padding: 0.25rem 0;
}

.navbar-christmas-festive-bottom .language-selector-dropdown a,
.navbar-christmas-festive-bottom .language-selector-dropdown .dropdown-item {
    color: var(--festive-text-light) !important;
    font-family: 'Lato', sans-serif;
    font-size: 0.85rem;
    padding: 0.35rem 0.9rem;
}

.navbar-christmas-festive-bottom .language-selector-dropdown .dropdown-item.active,
.navbar-christmas-festive-bottom .language-selector-dropdown .dropdown-item:active,
.navbar-christmas-festive-bottom .language-selector-dropdown .dropdown-item:hover {
    background: rgba(212, 175, 55, 0.2);
    color: var(--festive-gold) !important;
}

.navbar-christmas-festive-bottom .language-selector-dropdown .dropdown-item + .dropdown-item {
    border-top: 1px solid rgba(212, 175, 55, 0.3);
}

/* ============================================
   HEADER PRINCIPAL - "Veillée de Noël"
   ============================================ */
.menu-header-festive {
    text-align: center;
    padding: 3rem 1.5rem 2rem;
    position: relative;
    z-index: 10;
    min-height: calc(100vh - 140px); /* occupe l'écran de garde */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.menu-title-main {
    font-family: 'Allura', cursive; /* Police script élégante */
    font-size: 4rem;
    color: var(--festive-gold);
    margin: 0 0 0.5rem 0;
    font-weight: 400;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.menu-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    color: var(--festive-text-light);
    margin: 0 0 1.5rem 0;
    font-weight: 300;
    letter-spacing: 3px;
}

.menu-date-badge {
    display: inline-block;
    padding: 0.75rem 2rem;
    border: 2px solid var(--festive-gold);
    border-radius: 30px;
    font-family: 'Lato', sans-serif;
    font-size: 0.95rem;
    color: var(--festive-gold);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.menu-word {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    color: var(--festive-text-light);
    letter-spacing: 6px;
    text-transform: uppercase;
    margin: 2rem 0 1.5rem 0;
    font-weight: 300;
}

/* Indicateur de scroll (ligne + flèche) */
.scroll-indicator {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.scroll-line {
    width: 72px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.9);
}

.scroll-arrow {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    animation: scrollBounce 1.6s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50% { transform: translateY(6px); opacity: 1; }
}

/* ============================================
   CONTAINER PRINCIPAL
   ============================================ */
.christmas-festive-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem 2rem;
    position: relative;
    z-index: 10;
}

/* ============================================
   SECTIONS
   ============================================ */
.menu-section {
    margin-bottom: 3rem;
}

.section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    color: var(--festive-white) !important;
    font-weight: 600;
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 0.75rem;
}

.section-description {
    font-family: 'Lato', sans-serif;
    font-size: 0.95rem;
    color: var(--festive-text-desc) !important;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-style: italic;
}

/* ============================================
   PLATS
   ============================================ */
/* On garde la structure générique du composant dish ; seules les couleurs viennent du thème */
.dishes-table {
    width: 100%;
    margin-bottom: 0;
}

.dishes-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dishes-table tbody tr:last-child {
    border-bottom: none;
}

.dishes-table td {
    padding: 1rem 0;
    vertical-align: top;
    border: none;
}

.dishes-table .dish-label span {
    color: var(--festive-gold);
    font-weight: 600;
    font-size: 1.05rem;
}

.dishes-table .dish-description {
    color: var(--festive-white) !important;
    margin-top: 0.35rem;
}

/* Forcer TOUS les éléments dans la description à être blancs */
.dishes-table .dish-description,
.dishes-table .dish-description * {
    color: var(--festive-white) !important;
}

.dishes-table .dish-price {
    color: var(--festive-text-light);
    font-weight: 600;
}

/* ============================================
   SECTIONS - Carte subtile uniforme
   ============================================ */
.menu-section {
    margin-bottom: 3rem;
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 6px;
    padding: 1.75rem 1.5rem 1.5rem;
}

.menu-section + .menu-section {
    margin-top: 1rem;
}

/* ============================================
   FOOTER MESSAGE - Bande beige
   ============================================ */
.festive-footer {
    background: var(--festive-cream);
    text-align: center;
    padding: 2rem 1.5rem;
    margin-top: 5rem;
    position: relative;
    z-index: 10;
}

.festive-footer-message {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    color: var(--color-primary, var(--festive-burgundy));
    font-weight: 400;
    letter-spacing: 2px;
    margin: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .menu-title-main {
        font-size: 3rem;
    }
    
    .menu-subtitle {
        font-size: 1.4rem;
    }
    
    .section-title {
        font-size: 1.6rem;
    }
    
    .dish-name {
        font-size: 0.95rem;
    }
    
    .festive-footer-message {
        font-size: 1.6rem;
    }
    
    body::before,
    body::after {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 480px) {
    .menu-title-main {
        font-size: 2.5rem;
    }
    
    .dish-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .dish-price {
        margin-left: 0;
        margin-top: 0.5rem;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    body::before,
    body::after {
        display: none;
    }
    
    .navbar-christmas-festive,
    .navbar-christmas-festive-bottom {
        display: none !important;
    }
}