/* ========================================
   VITE & GOURMAND - STYLESHEET PRINCIPAL
   Architecture CSS modulaire
   Bordeaux - Gastronomie - Excellence
   ======================================== */

/* ========================================
   1. POLICES GOOGLE FONTS
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Open+Sans:wght@300;400;500;600;700&display=swap');

/* ========================================
   2. BASE - Fondations
   Variables, Reset, Typographie
   ======================================== */
@import "base/_variables-717e3b588512ad57a7c7e90a7d7786d3.css";
@import "base/_reset-e06468609cb94ceb9db3ec1909e1d4bd.css";
@import "base/_typography-d9367880c00cc186e7b1f1213c17f60c.css";

/* ========================================
   3. UTILITIES - Classes utilitaires (chargé tôt pour override facile)
   Marges, Padding, Display, Flexbox, etc.
   ======================================== */
@import "utilities/_utilities-14ce7d07b84b8e5ba34e4ed5346f1ed6.css";

/* ========================================
   4. LAYOUT - Structure
   Container, Grid, Sections
   ======================================== */
@import "layout/_container-2e72b887008bbffb6774aa54f04a6a8f.css";
@import "layout/_sections-cabbd9dc07e77279838dc70e376e04da.css";
@import "layout/_footer-b3c61d41b54dc62e046860ce1f8ab5dc.css";

/* ========================================
   5. COMPONENTS - Composants réutilisables
   Boutons, Cards, Forms, etc.
   ======================================== */
@import "components/_navbar-7e027d8be15338fdec97c10da703e81e.css";
@import "components/_buttons-993ef611c54811b590ecd31b848692ce.css";
@import "components/_badges-d93cfb7fa2ea17d8075365308c634453.css";
@import "components/_cards-8ee3ff82001b907bb37d6142dce9b387.css";
@import "components/_modal-97efba3362e019661dc111328d3709bd.css";
@import "components/_forms-8033864b8f05d1183d0ddccb860f0580.css";
@import "components/_breadcrumb-640654bf0f3759aa986cdad4cc4a7a82.css";
@import "components/_flash-messages-e2c8cb4113c26b18b7acaf506ca1fa99.css";
@import "components/_opening-hours-da75f039e5dff08dc9e9ebd3b74c8b76.css";

/* ========================================
   6. PAGES - Styles spécifiques aux pages
   Account, Contact, Home, etc.
   ======================================== */
@import "pages/account-cc53b5dbf5e88fc782bec59e492d5568.css";
@import "pages/account-edit-3f991c31ebec0b9d0d7e438b738dc861.css";
@import "pages/account-addresses-f5b35addc3eb4adc1561065d753e65fa.css";
@import "pages/account-password-6eba3e255d23cc26aa9e020a9f428191.css";
@import "pages/contact-7b576e6534561d4e3eb406d0d7132c48.css";

/* ========================================
   7. STYLES ADDITIONNELS
   ======================================== */

/* Alerts - Styles définis dans components/_flash-messages.css */

/* Footer - Styles définis dans layout/_footer.css */

/* Hero Section - Styles définis dans layout/_sections.css */

/* Menu Filters - Figma Design */
.menu-filters {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .menu-filters {
        padding: 1.5rem;
    }
}

.filters-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .filters-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .filters-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.filter-item {
    display: flex;
    flex-direction: column;
}

/* Menu Grid */
.menu-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .menu-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .menu-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Page Title */
.page-title {
    font-family: var(--font-heading);
    color: var(--bordeaux);
    font-size: 1.875rem;
    margin-bottom: 1rem;
    font-weight: 400;
}

@media (min-width: 768px) {
    .page-title {
        font-size: 3rem;
        margin-bottom: 1.5rem;
    }
}

/* Regime Filter Buttons */
.regime-filter-btn {
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    border: 2px solid var(--bordeaux);
    background-color: transparent;
    color: var(--bordeaux);
    cursor: pointer;
    transition: all var(--transition-fast);
}

@media (min-width: 768px) {
    .regime-filter-btn {
        padding: 0.375rem 0.75rem;
        font-size: var(--text-sm);
    }
}

.regime-filter-btn:hover {
    background-color: rgba(139, 0, 0, 0.05);
}

.regime-filter-btn.active {
    background-color: var(--bordeaux);
    color: white;
}

/* Account Layout - Figma Design */
.account-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .account-layout {
        grid-template-columns: 1fr 3fr;
    }
}

.account-tabs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

@media (min-width: 1024px) {
    .account-tabs-grid {
        grid-template-columns: 1fr;
    }
}

.account-tab {
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--dark-text);
    border: none;
    font-family: var(--font-body);
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: var(--text-sm);
    cursor: pointer;
}

.account-tab:hover {
    background: rgba(116, 32, 41, 0.05);
}

.account-tab.active {
    background: var(--bordeaux);
    color: white;
}

@media (min-width: 1024px) {
    .account-tab {
        justify-content: flex-start;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.8s ease-out;
}

/* Anti-FOUC */
html.fonts-loading body {
    opacity: 0;
}

html.fonts-loaded body {
    opacity: 1;
    transition: opacity var(--transition-base);
}