/**
 * 🎨 SYSTÈME COULEURS 60-30-10 UNIVERSEL
 * 
 * Direction Artistique : Alacarte 2025
 * Objectif : Expérience agréable, lisibilité optimale, ambiance cohérente
 * Support : Mobile-first (375px+)
 * 
 * Les 3 couleurs sont injectées dynamiquement via :root depuis le backend
 * Ce fichier définit UNIQUEMENT les règles d'application
 */

/* ============================================
   I. STRUCTURE & IDENTITÉ (60% - Primary)
   ============================================ */

/* Section Titles - Premier point de structuration */
.section-title,
.menu-section-title {
    color: var(--color-primary) !important;
    font-weight: 600;
    letter-spacing: 1px;
}

/* Ornements & Décorations thématiques */
.section-title::before,
.section-title::after,
.ornament,
.decorative-icon {
    color: var(--color-primary) !important;
    fill: var(--color-primary);
}

/* Navigation Active (Tabs) */
.tab.active,
.nav-link.active,
.bottom-nav-item.active {
    border-bottom-color: var(--color-primary) !important;
    font-weight: 600;
}

/* Navbar borders */
.navbar,
.top-navigation {
    border-bottom: 1px solid var(--color-primary-20);
}

/* Séparateurs entre sections */
.section-divider,
.section-separator {
    border-color: var(--color-primary-20) !important;
    background: var(--color-primary-10);
}

/* Burger menu icon */
.burger-menu,
.menu-toggle {
    color: var(--color-primary);
}

/* ============================================
   II. LISIBILITÉ & CONFORT (30% - Secondary)
   ============================================ */

/* Dish Name - Lisibilité maximale */
.dish-label,
.dish-label span,
.dish-name,
.menu-item-name,
.dish h4,
.dish-item h4,
.dish-item .name {
    color: var(--color-secondary) !important;
    font-weight: 500;
}

/* Dish Description - Hiérarchie subtile */
.dish-description,
.menu-item-description,
.dish p,
.dish-item p {
    color: var(--color-secondary-70) !important;
    font-weight: 400;
    opacity: 0.85;
}

/* Section Intro/Outro - Contexte discret */
.section-intro,
.section-intro-text,
.section-outro,
.section-outro-text {
    color: var(--color-secondary-60) !important;
    font-style: italic;
}

/* Navigation Inactive (Tabs) */
.tab:not(.active),
.nav-link:not(.active),
.bottom-nav-item:not(.active) {
    color: var(--color-secondary-50) !important;
    font-weight: 400;
}

/* Backgrounds alternés pour séparation douce */
.section:nth-child(even),
.menu-section:nth-child(even) {
    background-color: var(--color-secondary-05);
}

/* ============================================
   III. FOCALISATION SUBTILE (10% - Accent)
   ============================================ */

/* Dish Price - Point de décision */
.dish-price,
.menu-item-price,
.price,
.dish .price,
.dish-item .price {
    color: var(--color-accent) !important;
    font-weight: 500;
}

/* Wishlist Button Active - Seule interactivité */
.wishlist-button.active,
.wishlist-btn.active,
button.wishlist-button.active i,
.btn-wishlist.active i {
    color: var(--color-accent) !important;
}

/* Wishlist Button Inactive - Discret */
.wishlist-button:not(.active),
.wishlist-btn:not(.active) {
    color: var(--color-secondary-40) !important;
}

/* Badges "Nouveau" / "Spécialité" */
.badge-new,
.badge-specialty,
.dish-badge {
    background-color: var(--color-accent) !important;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

/* Options "Supplément +" */
.option-supplement,
.supplement-text,
.dish-option .supplement-badge {
    color: var(--color-accent) !important;
}

/* Option Price - Même logique que dish price */
.option-price,
.dish-option .price {
    color: var(--color-accent) !important;
    font-weight: 500;
}

/* ============================================
   IV. HIÉRARCHIE TYPOGRAPHIQUE RENFORCÉE
   ============================================ */

/* Mobile-first : Tailles adaptées à 375px+ */
.section-title,
.menu-section-title {
    font-size: 1.5rem;        /* 24px */
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.dish-label,
.dish-name {
    font-size: 1.125rem;      /* 18px */
    line-height: 1.4;
    margin-bottom: 0.25rem;
}

.dish-description {
    font-size: 0.9375rem;     /* 15px */
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.dish-price {
    font-size: 1.125rem;      /* 18px */
}

/* Options plus petites */
.dish-option,
.option-label {
    font-size: 0.875rem;      /* 14px */
}

.option-price {
    font-size: 1rem;          /* 16px */
}

/* ============================================
   V. ACCESSIBILITÉ (WCAG AA)
   ============================================ */

/* Focus clavier - Important pour navigation */
.dish-label:focus,
.tab:focus,
.wishlist-button:focus {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* Contraste renforcé pour descriptions */
/* Note: .dish-description a opacity: 0.85 déjà défini dans la section II
   Cette valeur garantit un contraste WCAG AA ≥ 4.5:1 avec le fond blanc */

/* ============================================
   VI. RESPONSIVE (Tablette & Desktop)
   ============================================ */

@media (min-width: 768px) {
    .section-title {
        font-size: 2rem;      /* 32px */
    }
    
    .dish-label {
        font-size: 1.25rem;   /* 20px */
    }
    
    .dish-description {
        font-size: 1rem;      /* 16px */
    }
    
    .dish-price {
        font-size: 1.25rem;   /* 20px */
    }
}

/* ============================================
   VII. ÉTATS & MICRO-INTERACTIONS
   ============================================ */

/* Wishlist : Seule interactivité autorisée */
.wishlist-button {
    transition: color 0.2s ease, transform 0.1s ease;
    cursor: pointer;
}

.wishlist-button:active {
    transform: scale(0.95);
}

/* Pas d'hover sur les autres éléments (pas d'interactivité) */
/* Note: Les éléments suivants n'ont volontairement PAS de hover :
   - .dish-label
   - .dish-price
   - .section-title
   Aucune transition hover n'est appliquée pour éviter les fausses affordances */

/* ============================================
   VIII. VARIABLES OPACITY PRÉ-CALCULÉES
   ============================================ */

/**
 * Ces variables sont injectées par le backend
 * Mais on définit des fallbacks au cas où
 */
:root {
    /* Fallbacks si backend ne définit pas */
    --color-primary: #4A4A4A;
    --color-secondary: #2C2C2C;
    --color-accent: #8B0000;
    
    /* RGB versions (doivent être définies par backend) */
    --color-primary-rgb: 74, 74, 74;
    --color-secondary-rgb: 44, 44, 44;
    --color-accent-rgb: 139, 0, 0;
    
    /* Opacités pré-calculées pour performance */
    --color-primary-05: rgba(var(--color-primary-rgb), 0.05);
    --color-primary-10: rgba(var(--color-primary-rgb), 0.1);
    --color-primary-20: rgba(var(--color-primary-rgb), 0.2);
    
    --color-secondary-40: rgba(var(--color-secondary-rgb), 0.4);
    --color-secondary-50: rgba(var(--color-secondary-rgb), 0.5);
    --color-secondary-60: rgba(var(--color-secondary-rgb), 0.6);
    --color-secondary-70: rgba(var(--color-secondary-rgb), 0.7);
    --color-secondary-05: rgba(var(--color-secondary-rgb), 0.05);
}

/* ============================================
   IX. COMPATIBILITÉ TEMPLATES EXISTANTS
   ============================================ */

/**
 * Pour assurer la rétrocompatibilité avec les anciens templates
 * qui utilisent des classes custom
 */

/* Christmas templates */
.christmas-title,
.festive-title,
.elegant-title {
    color: var(--color-primary) !important;
}

.festive-price,
.elegant-price {
    color: var(--color-accent) !important;
}

/* Halloween templates */
.spooky-title,
.halloween-section-title {
    color: var(--color-primary) !important;
}

/* Palace template */
.palace-title,
.ultra-luxe-title {
    color: var(--color-primary) !important;
}

.palace-price {
    color: var(--color-accent) !important;
}

/* ============================================
   X. NOTES DE MAINTENANCE
   ============================================ */

/**
 * ⚠️ RÈGLES IMPORTANTES :
 * 
 * 1. NE JAMAIS hard-coder de couleurs dans les templates
 *    → Toujours utiliser les variables CSS
 * 
 * 2. Les 3 couleurs (primary, secondary, accent) sont injectées
 *    dynamiquement depuis le backend via variants_config
 * 
 * 3. Ce fichier définit UNIQUEMENT les règles d'application
 *    → Pas de valeurs de couleurs (sauf fallbacks)
 * 
 * 4. Pour ajouter un nouvel élément :
 *    - Identifier sa fonction (Structure/Lisibilité/Focalisation)
 *    - Lui assigner la variable correspondante
 *    - Ajouter un commentaire explicatif
 * 
 * 5. Testez TOUJOURS le contraste WCAG AA après modification
 *    → https://webaim.org/resources/contrastchecker/
 */