:root {
            --saffron: #D4A03C;
            --saffron-light: #E8C068;
            --terracotta: #C75B39;
            --terracotta-deep: #8B3A2F;
            --majorelle: #2E4A8E;
            --majorelle-light: #4A6BB5;
            --midnight: #1A1A2E;
            --cream: #F5F0E6;
            --gold: #C9A227;
            --ink: #1A1A2E;
            --deep-green: #24431F;
            --shadow: rgba(26, 26, 46, 0.4);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Cormorant Garamond', Georgia, serif;
            background: var(--midnight);
            color: var(--cream);
            overflow-x: hidden;
            line-height: 1.7;
        }

        /* Zellige Pattern Background */
        .zellige-pattern {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            opacity: 0.03;
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23D4A03C' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }

        /* Navigation */
        .nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            padding: 1.5rem 4rem;
            display: flex;
            align-items: center;
            gap: 2rem;
            transition: all 0.5s ease;
        }

        .nav.scrolled {
            background: rgba(26, 26, 46, 0.95);
            backdrop-filter: blur(20px);
            padding: 1rem 4rem;
            box-shadow: 0 4px 30px var(--shadow);
        }

        .logo {
            font-family: 'Amiri', serif;
            font-size: 2rem;
            color: var(--saffron);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .logo-icon {
            width: 45px;
            height: 45px;
        }

        .nav-links {
            display: flex;
            gap: 3rem;
            list-style: none;
        }

        .nav-right {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            margin-left: auto;
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .nav-links a {
            color: var(--cream);
            text-decoration: none;
            font-family: 'Philosopher', sans-serif;
            font-size: 0.95rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            position: relative;
            padding: 0.5rem 0;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--saffron), var(--terracotta));
            transition: width 0.4s ease;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        .nav-cta {
            background: linear-gradient(135deg, var(--saffron), var(--terracotta));
            color: var(--midnight);
            padding: 0.8rem 2rem;
            border: none;
            font-family: 'Philosopher', sans-serif;
            font-size: 0.9rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.4s ease;
            text-decoration: none;
        }

        .nav-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(212, 160, 60, 0.4);
        }

        .cart-toggle {
            display: inline-flex;
            align-items: center;
            gap: 0.8rem;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(212, 160, 60, 0.3);
            color: var(--cream);
            padding: 0.8rem 1rem;
            font-family: 'Philosopher', sans-serif;
            font-size: 0.85rem;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.4s ease;
        }

        .cart-toggle:hover {
            transform: translateY(-2px);
            border-color: var(--saffron);
            box-shadow: 0 10px 30px rgba(212, 160, 60, 0.18);
        }

        .cart-toggle-icon {
            font-size: 1rem;
            line-height: 1;
        }

        .cart-toggle-total {
            font-size: 0.8rem;
            color: rgba(245, 240, 230, 0.75);
            letter-spacing: 1px;
        }

        .cart-toggle-count {
            min-width: 30px;
            height: 30px;
            border-radius: 999px;
            background: linear-gradient(135deg, var(--saffron), var(--terracotta));
            color: var(--midnight);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 0.4rem;
            font-size: 0.78rem;
            font-weight: 700;
        }

        body.cart-open {
            overflow: hidden;
        }

        body.recipe-open {
            overflow: hidden;
        }

        .cart-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(10, 10, 20, 0.65);
            backdrop-filter: blur(8px);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.35s ease;
            z-index: 1190;
        }

        .cart-backdrop.active {
            opacity: 1;
            pointer-events: auto;
        }

        .cart-panel {
            position: fixed;
            top: 0;
            right: 0;
            width: min(460px, 100vw);
            height: 100vh;
            background: linear-gradient(180deg, #202038 0%, #171728 100%);
            border-left: 1px solid rgba(212, 160, 60, 0.2);
            box-shadow: -30px 0 80px rgba(0, 0, 0, 0.35);
            transform: translateX(100%);
            transition: transform 0.4s ease;
            z-index: 1200;
            display: flex;
            flex-direction: column;
        }

        .cart-panel.active {
            transform: translateX(0);
        }

        .cart-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1rem;
            padding: 1.5rem;
            border-bottom: 1px solid rgba(212, 160, 60, 0.15);
        }

        .cart-kicker {
            font-family: 'Philosopher', sans-serif;
            font-size: 0.75rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--saffron);
            margin-bottom: 0.4rem;
        }

        .cart-header h3 {
            font-family: 'Amiri', serif;
            font-size: 2rem;
            font-weight: 400;
        }

        .cart-close {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid rgba(212, 160, 60, 0.3);
            background: rgba(255, 255, 255, 0.04);
            color: var(--cream);
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .cart-close:hover {
            background: rgba(212, 160, 60, 0.12);
            border-color: var(--saffron);
            color: var(--saffron);
        }

        .cart-items {
            flex: 1;
            overflow-y: auto;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .cart-empty {
            padding: 2rem;
            border: 1px dashed rgba(212, 160, 60, 0.25);
            background: rgba(255, 255, 255, 0.03);
            text-align: center;
        }

        .cart-empty h4 {
            font-family: 'Amiri', serif;
            font-size: 1.8rem;
            color: var(--saffron);
            margin-bottom: 0.75rem;
        }

        .cart-empty p {
            font-size: 1.05rem;
            opacity: 0.8;
        }

        .cart-item {
            display: grid;
            grid-template-columns: 88px 1fr auto;
            gap: 1rem;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(212, 160, 60, 0.15);
            padding: 1rem;
        }

        .cart-item-image {
            width: 88px;
            height: 88px;
            object-fit: cover;
        }

        .cart-item-title {
            font-family: 'Amiri', serif;
            font-size: 1.45rem;
            color: var(--saffron);
            margin-bottom: 0.2rem;
        }

        .cart-item-meta {
            font-family: 'Philosopher', sans-serif;
            font-size: 0.72rem;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: rgba(245, 240, 230, 0.6);
            margin-bottom: 0.5rem;
        }

        .cart-item-unit {
            font-size: 1rem;
            color: rgba(245, 240, 230, 0.85);
        }

        .cart-item-controls {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            flex-wrap: wrap;
            margin-top: 0.9rem;
        }

        .qty-control {
            display: inline-flex;
            align-items: center;
            border: 1px solid rgba(212, 160, 60, 0.25);
        }

        .qty-btn {
            width: 36px;
            height: 36px;
            border: none;
            background: transparent;
            color: var(--cream);
            cursor: pointer;
            font-size: 1.1rem;
            transition: all 0.2s ease;
        }

        .qty-btn:hover {
            background: rgba(212, 160, 60, 0.12);
            color: var(--saffron);
        }

        .qty-value {
            min-width: 42px;
            text-align: center;
            font-family: 'Philosopher', sans-serif;
            font-size: 0.9rem;
        }

        .cart-remove {
            background: none;
            border: none;
            color: rgba(245, 240, 230, 0.65);
            font-family: 'Philosopher', sans-serif;
            font-size: 0.75rem;
            letter-spacing: 1px;
            text-transform: uppercase;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .cart-remove:hover {
            color: var(--terracotta);
        }

        .cart-line-total {
            font-family: 'Philosopher', sans-serif;
            font-size: 1rem;
            color: var(--cream);
            white-space: nowrap;
        }

        .cart-footer {
            padding: 1.5rem;
            border-top: 1px solid rgba(212, 160, 60, 0.15);
            background: rgba(12, 12, 24, 0.35);
        }

        .cart-totals {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            font-family: 'Philosopher', sans-serif;
            font-size: 1rem;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .cart-totals strong {
            color: var(--saffron);
            font-size: 1.1rem;
        }

        .cart-footer-note {
            font-size: 1rem;
            opacity: 0.75;
            margin-top: 0.9rem;
        }

        .cart-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-top: 1.25rem;
        }

        .cart-action {
            padding: 1rem 1.2rem;
            border: 1px solid rgba(212, 160, 60, 0.3);
            font-family: 'Philosopher', sans-serif;
            font-size: 0.85rem;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .cart-action:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .cart-action-secondary {
            background: transparent;
            color: var(--cream);
        }

        .cart-action-secondary:hover:not(:disabled) {
            border-color: var(--terracotta);
            color: var(--terracotta);
        }

        .cart-action-primary {
            background: linear-gradient(135deg, var(--saffron), var(--terracotta));
            border: none;
            color: var(--midnight);
        }

        .cart-action-primary:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 10px 24px rgba(212, 160, 60, 0.3);
        }

        .cart-toast {
            position: fixed;
            right: 2rem;
            bottom: 2rem;
            max-width: 320px;
            background: rgba(20, 20, 32, 0.94);
            border: 1px solid rgba(212, 160, 60, 0.25);
            color: var(--cream);
            padding: 1rem 1.25rem;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
            opacity: 0;
            transform: translateY(20px);
            pointer-events: none;
            transition: all 0.3s ease;
            z-index: 1210;
        }

        .cart-toast.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Hero Section */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .hero-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--midnight) 0%, #2A2A4A 50%, var(--midnight) 100%);
        }

        .hero-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('../../resto/Hero Dar Zafran.webp') center center/cover no-repeat;
            opacity: 0.42;
            filter: sepia(8%) saturate(105%) contrast(102%);
        }

        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(ellipse at center, transparent 0%, var(--midnight) 70%);
        }

        .lantern {
            position: absolute;
            width: 80px;
            height: 120px;
            animation: lanternGlow 4s ease-in-out infinite;
        }

        .lantern:nth-child(1) { top: 15%; left: 10%; animation-delay: 0s; }
        .lantern:nth-child(2) { top: 20%; right: 15%; animation-delay: 1s; }
        .lantern:nth-child(3) { top: 30%; left: 20%; animation-delay: 2s; }

        @keyframes lanternGlow {
            0%, 100% { opacity: 0.6; filter: drop-shadow(0 0 20px rgba(212, 160, 60, 0.5)); }
            50% { opacity: 1; filter: drop-shadow(0 0 40px rgba(212, 160, 60, 0.8)); }
        }

        .hero-content {
            position: relative;
            z-index: 10;
            text-align: center;
            max-width: 900px;
            padding: 2rem;
            animation: fadeInUp 1.5s ease;
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(50px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .hero-subtitle {
            font-family: 'Amiri', serif;
            font-size: 1.2rem;
            color: var(--saffron);
            letter-spacing: 8px;
            text-transform: uppercase;
            margin-bottom: 1rem;
            animation: fadeInUp 1.5s ease 0.3s backwards;
        }

        .hero-title {
            font-family: 'Amiri', serif;
            font-size: clamp(3.5rem, 10vw, 8rem);
            font-weight: 400;
            line-height: 1;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, var(--cream) 0%, var(--saffron) 50%, var(--terracotta) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: fadeInUp 1.5s ease 0.5s backwards;
        }

        .hero-arabic {
            font-family: 'Amiri', serif;
            font-size: 2.5rem;
            color: var(--saffron-light);
            margin-bottom: 2rem;
            opacity: 0.8;
            animation: fadeInUp 1.5s ease 0.7s backwards;
        }

        .hero-description {
            font-size: 1.3rem;
            color: rgba(245, 240, 230, 0.8);
            max-width: 600px;
            margin: 0 auto 3rem;
            animation: fadeInUp 1.5s ease 0.9s backwards;
        }

        .hero-buttons {
            display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
            animation: fadeInUp 1.5s ease 1.1s backwards;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--saffron), var(--terracotta));
            color: var(--midnight);
            padding: 1.2rem 3rem;
            border: none;
            font-family: 'Philosopher', sans-serif;
            font-size: 1rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.4s ease;
            text-decoration: none;
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(212, 160, 60, 0.5);
        }

        .btn-secondary {
            background: transparent;
            color: var(--cream);
            padding: 1.2rem 3rem;
            border: 2px solid var(--saffron);
            font-family: 'Philosopher', sans-serif;
            font-size: 1rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.4s ease;
            text-decoration: none;
        }

        .btn-secondary:hover {
            background: var(--saffron);
            color: var(--midnight);
        }

        .scroll-indicator {
            position: absolute;
            bottom: 3rem;
            left: 50%;
            transform: translateX(-50%);
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 100% { transform: translateX(-50%) translateY(0); }
            50% { transform: translateX(-50%) translateY(10px); }
        }

        /* Section Styles */
        section {
            position: relative;
            z-index: 1;
            padding: 8rem 4rem;
        }

        .section-header {
            text-align: center;
            margin-bottom: 5rem;
        }

        .section-subtitle {
            font-family: 'Amiri', serif;
            font-size: 1rem;
            color: var(--saffron);
            letter-spacing: 6px;
            text-transform: uppercase;
            margin-bottom: 1rem;
        }

        .section-title {
            font-family: 'Amiri', serif;
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 400;
            margin-bottom: 1.5rem;
        }

        .section-divider {
            width: 100px;
            height: 3px;
            background: linear-gradient(90deg, var(--saffron), var(--terracotta), var(--majorelle));
            margin: 0 auto;
        }

        /* About Section */
        .about {
            background: linear-gradient(180deg, var(--midnight) 0%, #1E1E32 100%);
        }

        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5rem;
            align-items: center;
            max-width: 1400px;
            margin: 0 auto;
        }

        .about-image {
            position: relative;
        }

        .about-image img {
            width: 100%;
            height: 600px;
            object-fit: cover;
            filter: sepia(10%) saturate(110%);
        }

        .about-image::before {
            content: '';
            position: absolute;
            top: -20px;
            left: -20px;
            right: 20px;
            bottom: 20px;
            border: 3px solid var(--saffron);
            z-index: -1;
        }

        .about-image::after {
            content: '';
            position: absolute;
            bottom: -30px;
            right: -30px;
            width: 150px;
            height: 150px;
            background: url("data:image/svg+xml,%3Csvg width='150' height='150' viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M75 0L150 75L75 150L0 75L75 0z' fill='%23D4A03C' fill-opacity='0.2'/%3E%3Cpath d='M75 30L120 75L75 120L30 75L75 30z' fill='%23D4A03C' fill-opacity='0.3'/%3E%3Cpath d='M75 50L100 75L75 100L50 75L75 50z' fill='%23D4A03C' fill-opacity='0.4'/%3E%3C/svg%3E");
        }

        .about-content h3 {
            font-family: 'Amiri', serif;
            font-size: 2.5rem;
            margin-bottom: 2rem;
            color: var(--saffron);
        }

        .about-content p {
            font-size: 1.15rem;
            margin-bottom: 1.5rem;
            opacity: 0.9;
        }

        .about-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
            margin-top: 2.5rem;
        }

        .feature-item {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .feature-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--saffron), var(--terracotta));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

        /* Menu Section */
        .menu {
            background: #1E1E32;
        }

        .menu-categories {
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin-bottom: 4rem;
            flex-wrap: wrap;
        }

        .menu-category {
            background: transparent;
            border: 2px solid rgba(212, 160, 60, 0.3);
            color: var(--cream);
            padding: 1rem 2rem;
            font-family: 'Philosopher', sans-serif;
            font-size: 0.9rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.4s ease;
        }

        .menu-category:hover,
        .menu-category.active {
            background: var(--saffron);
            border-color: var(--saffron);
            color: var(--midnight);
        }

        .menu-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 3rem;
            max-width: 1400px;
            margin: 0 auto;
        }

        .menu-item {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(212, 160, 60, 0.2);
            overflow: hidden;
            transition: all 0.5s ease;
            position: relative;
        }

        .menu-item:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(212, 160, 60, 0.2);
            border-color: var(--saffron);
        }

        .menu-item-image {
            height: 250px;
            overflow: hidden;
            position: relative;
        }

        .menu-item-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.7s ease;
            filter: saturate(110%);
        }

        .menu-item:hover .menu-item-image img {
            transform: scale(1.1);
        }

        .menu-item-badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: var(--terracotta);
            color: var(--cream);
            padding: 0.5rem 1rem;
            font-family: 'Philosopher', sans-serif;
            font-size: 0.75rem;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .menu-item-content {
            padding: 2rem;
        }

        .menu-item-title {
            font-family: 'Amiri', serif;
            font-size: 1.6rem;
            margin-bottom: 0.5rem;
            color: var(--saffron);
        }

        .menu-item-description {
            font-size: 1rem;
            opacity: 0.8;
            margin-bottom: 1.5rem;
            line-height: 1.6;
        }

        .menu-item-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
        }

        .menu-item-price {
            font-family: 'Philosopher', sans-serif;
            font-size: 1.5rem;
            color: var(--saffron);
            white-space: nowrap;
        }

        .menu-item-actions {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .menu-item-btn {
            background: transparent;
            border: 1px solid var(--saffron);
            color: var(--saffron);
            padding: 0.7rem 1.5rem;
            font-family: 'Philosopher', sans-serif;
            font-size: 0.8rem;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .menu-item-btn:hover {
            background: var(--saffron);
            color: var(--midnight);
        }

        .menu-item-btn.is-added {
            background: var(--saffron);
            color: var(--midnight);
        }

        .recipe-icon-btn {
            width: 43px;
            height: 43px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(212, 160, 60, 0.65);
            border-radius: 50%;
            background: rgba(212, 160, 60, 0.08);
            color: var(--saffron);
            cursor: pointer;
            transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
        }

        .recipe-icon-btn svg {
            width: 21px;
            height: 21px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .recipe-icon-btn:hover {
            transform: translateY(-2px);
            background: var(--saffron);
            border-color: var(--saffron);
            color: var(--midnight);
        }

        .recipe-modal {
            position: fixed;
            inset: 0;
            z-index: 1300;
            display: grid;
            place-items: center;
            padding: 2rem;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.35s ease;
        }

        .recipe-modal.active {
            opacity: 1;
            pointer-events: auto;
        }

        .recipe-modal-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(7, 7, 15, 0.78);
            backdrop-filter: blur(10px);
        }

        .recipe-sheet {
            position: relative;
            width: min(1180px, 100%);
            max-height: min(88vh, 980px);
            overflow-y: auto;
            background:
                linear-gradient(135deg, rgba(245, 240, 230, 0.98), rgba(232, 213, 180, 0.96)),
                var(--cream);
            color: var(--midnight);
            border: 1px solid rgba(212, 160, 60, 0.45);
            box-shadow: 0 34px 100px rgba(0, 0, 0, 0.42);
            transform: translateY(18px) scale(0.98);
            transition: transform 0.35s ease;
        }

        .recipe-modal.active .recipe-sheet {
            transform: translateY(0) scale(1);
        }

        .recipe-image-title {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
        }

        .recipe-card-image {
            width: 100%;
            height: auto;
            display: block;
            background: var(--cream);
        }

        .recipe-book-page {
            min-height: 100vh;
            background:
                radial-gradient(circle at 20% 12%, rgba(212, 160, 60, 0.15), transparent 28%),
                linear-gradient(180deg, #191929 0%, #10101b 100%);
        }

        .recipe-book-nav {
            position: sticky;
        }

        .recipe-book-shell {
            position: relative;
            z-index: 1;
            padding: 8.5rem 2rem 4rem;
        }

        .recipe-book-shell--bare {
            padding-top: 5.5rem;
            padding-bottom: 2rem;
        }

        .book-cover-page {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 3rem 2.5rem;
            gap: 1.2rem;
            text-align: center;
            background:
                radial-gradient(circle at 50% 28%, rgba(212, 160, 60, 0.18), transparent 55%),
                radial-gradient(circle at 50% 80%, rgba(126, 79, 37, 0.12), transparent 55%),
                linear-gradient(180deg, #1a1224 0%, #241635 55%, #1a1224 100%);
            color: #f5ead4;
            border: 1px solid rgba(212, 160, 60, 0.25);
            box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.55);
        }

        .book-cover-ornament {
            font-size: 1.8rem;
            color: #d4a03c;
            opacity: 0.85;
            letter-spacing: 0.4em;
        }

        .book-cover-kicker {
            margin: 0;
            font-family: 'Philosopher', sans-serif;
            text-transform: uppercase;
            letter-spacing: 0.45em;
            font-size: 0.85rem;
            color: #d4a03c;
        }

        .book-cover-title {
            margin: 0;
            font-family: 'Amiri', serif;
            font-weight: 700;
            font-size: clamp(2.6rem, 5.2vw, 4.6rem);
            line-height: 1.02;
            color: #f3d78b;
            text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
        }

        .book-cover-intro {
            margin: 0;
            max-width: 32ch;
            font-family: 'Cormorant Garamond', serif;
            font-style: italic;
            font-size: 1.1rem;
            line-height: 1.55;
            color: rgba(245, 234, 212, 0.82);
        }

        .recipe-book-hero {
            max-width: 980px;
            margin: 0 auto 3rem;
            text-align: center;
        }

        .recipe-book-hero h1 {
            font-family: 'Amiri', serif;
            font-size: clamp(3.2rem, 7vw, 6.4rem);
            line-height: 0.95;
            color: var(--saffron);
            font-weight: 400;
            margin: 0.4rem 0 1rem;
        }

        .recipe-book-hero p:last-child {
            max-width: 720px;
            margin: 0 auto;
            color: rgba(245, 240, 230, 0.82);
            font-size: 1.25rem;
        }

        .recipe-book-reader {
            max-width: 1720px;
            margin: 0 auto;
        }

        .recipe-book-toolbar {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .book-control {
            width: 54px;
            height: 54px;
            border-radius: 50%;
            border: 1px solid rgba(212, 160, 60, 0.45);
            background: rgba(255, 255, 255, 0.05);
            color: var(--saffron);
            font-size: 2rem;
            line-height: 1;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .book-control:hover:not(:disabled) {
            background: var(--saffron);
            color: var(--midnight);
            transform: translateY(-2px);
        }

        .book-control:disabled {
            opacity: 0.35;
            cursor: not-allowed;
        }

        .book-progress {
            min-width: 220px;
            padding: 0.8rem 1.2rem;
            border: 1px solid rgba(212, 160, 60, 0.25);
            background: rgba(255, 255, 255, 0.04);
            text-align: center;
        }

        .book-progress span,
        .book-progress small {
            display: block;
            font-family: 'Philosopher', sans-serif;
            letter-spacing: 1.4px;
            text-transform: uppercase;
        }

        .book-progress span {
            color: var(--cream);
            font-size: 0.92rem;
        }

        .book-progress small {
            margin-top: 0.25rem;
            color: rgba(245, 240, 230, 0.58);
            font-size: 0.72rem;
        }

        .recipe-book {
            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
            gap: 0;
            padding: 2rem;
            perspective: 1800px;
            transform-style: preserve-3d;
            background:
                linear-gradient(90deg, rgba(0, 0, 0, 0.24), transparent 11%, transparent 89%, rgba(0, 0, 0, 0.24)),
                linear-gradient(135deg, #5d331f, #2a1710 52%, #6b3d24);
            border: 1px solid rgba(212, 160, 60, 0.35);
            box-shadow: 0 36px 100px rgba(0, 0, 0, 0.45);
            transform: rotateX(1.5deg);
        }

        .book-drag-hint {
            margin: 1rem 0 0;
            color: rgba(245, 240, 230, 0.72);
            font-family: 'Philosopher', sans-serif;
            font-size: 0.78rem;
            letter-spacing: 1.4px;
            text-align: center;
            text-transform: uppercase;
        }

        .book-spine {
            background:
                linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(245, 240, 230, 0.3), rgba(0, 0, 0, 0.45));
            box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.5);
            transform: translateZ(12px);
        }

        .book-page {
            position: relative;
            display: flex;
            flex-direction: column;
            min-height: 640px;
            background:
                radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.48), transparent 24%),
                linear-gradient(90deg, rgba(126, 79, 37, 0.08), transparent 14%, transparent 86%, rgba(126, 79, 37, 0.1)),
                #f7efdf;
            backface-visibility: hidden;
            overflow: hidden;
            transform-style: preserve-3d;
            transition: transform 0.42s ease, box-shadow 0.42s ease;
            will-change: transform;
            cursor: grab;
            user-select: none;
            touch-action: pan-y;
        }

        .book-page:active {
            cursor: grabbing;
        }

        .book-page.is-under-turn .book-page-inner {
            opacity: 1;
        }

        .book-page::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background-image:
                linear-gradient(rgba(90, 57, 28, 0.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(90, 57, 28, 0.025) 1px, transparent 1px);
            background-size: 18px 18px, 22px 22px;
            mix-blend-mode: multiply;
        }

        .book-page-left {
            border-radius: 8px 0 0 8px;
            box-shadow: inset -34px 0 54px rgba(75, 40, 20, 0.22), -12px 16px 34px rgba(0, 0, 0, 0.18);
            transform: rotateY(3deg) translateZ(18px);
            transform-origin: right center;
        }

        .book-page-right {
            border-radius: 0 8px 8px 0;
            box-shadow: inset 34px 0 54px rgba(75, 40, 20, 0.22), 12px 16px 34px rgba(0, 0, 0, 0.18);
            transform: rotateY(-3deg) translateZ(18px);
            transform-origin: left center;
        }

        .book-page-inner {
            position: relative;
            z-index: 2;
            display: flex;
            flex: 1;
            flex-direction: column;
            min-height: 640px;
        }

        .book-turn-layer {
            position: absolute;
            z-index: 80;
            display: none;
            pointer-events: none;
            perspective: 1800px;
            transform-style: preserve-3d;
            transform: translateZ(140px);
            isolation: isolate;
        }

        .book-turn-layer.active {
            display: block;
        }

        .book-turn-canvas {
            position: absolute;
            inset: 0;
            display: none;
            width: 100%;
            height: 100%;
            z-index: 4;
            transform: translateZ(1px);
        }

        .book-turn-layer.webgl-turn .book-turn-canvas {
            display: block;
        }

        .book-turn-layer.webgl-turn .book-turn-sheet {
            display: none;
        }

        .book-turn-sheet {
            --turn-progress: 0;
            position: absolute;
            inset: 0;
            transform-style: preserve-3d;
            will-change: transform;
        }

        .book-turn-sheet.settling,
        .book-turn-sheet.settling .book-turn-segment {
            transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .book-turn-layer.turn-next .book-turn-sheet {
            transform-origin: left center;
        }

        .book-turn-layer.turn-prev .book-turn-sheet {
            transform-origin: right center;
        }

        .book-turn-segment {
            --strip-shade: 0.12;
            position: absolute;
            top: 0;
            bottom: 0;
            transform-style: preserve-3d;
            will-change: transform;
        }

        .book-turn-layer.turn-next .book-turn-segment {
            transform-origin: left center;
        }

        .book-turn-layer.turn-prev .book-turn-segment {
            transform-origin: right center;
        }

        .book-turn-face {
            position: absolute;
            inset: 0;
            display: flex;
            overflow: hidden;
            background:
                radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.5), transparent 24%),
                linear-gradient(90deg, rgba(126, 79, 37, 0.08), transparent 14%, transparent 86%, rgba(126, 79, 37, 0.1)),
                #f7efdf;
            backface-visibility: hidden;
            box-shadow: 0 18px 48px rgba(0, 0, 0, calc(0.12 + var(--turn-progress) * 0.22));
        }

        .book-turn-layer.turn-next .book-turn-face {
            border-radius: 0 8px 8px 0;
        }

        .book-turn-layer.turn-prev .book-turn-face {
            border-radius: 8px 0 0 8px;
        }

        .book-turn-front {
            transform: translateZ(1px);
        }

        .book-turn-back {
            transform: rotateY(180deg) translateZ(1px);
        }

        .book-turn-content {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            display: flex;
            min-height: 100%;
        }

        .book-turn-content > .book-page-inner {
            width: 100%;
            min-height: 100%;
        }

        .book-turn-face::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 4;
            pointer-events: none;
            background:
                linear-gradient(90deg, rgba(255, 255, 255, calc(0.04 + var(--strip-shade) * 0.42)), transparent 32%, rgba(0, 0, 0, calc(var(--strip-shade) * 0.28)) 100%),
                linear-gradient(rgba(90, 57, 28, 0.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(90, 57, 28, 0.025) 1px, transparent 1px);
            background-size: auto, 18px 18px, 22px 22px;
            mix-blend-mode: multiply;
        }

        .book-turn-sheen {
            position: absolute;
            top: 0;
            bottom: 0;
            inset-inline: 0;
            z-index: 5;
            pointer-events: none;
            opacity: calc(0.16 + var(--strip-shade) * 1.2);
            background:
                linear-gradient(90deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.03) 46%, rgba(0, 0, 0, 0.26));
            filter: blur(0.4px);
        }

        .book-recipe-image {
            width: 100%;
            height: min(72vh, 980px);
            object-fit: contain;
            background: #f7efdf;
            flex: 1;
        }

        .book-page-footer {
            display: grid;
            gap: 0.2rem;
            padding: 0.75rem 1rem 1rem;
            background: rgba(26, 26, 46, 0.96);
            color: var(--saffron);
            font-family: 'Philosopher', sans-serif;
            text-align: center;
            text-transform: uppercase;
        }

        .book-page-footer span {
            font-size: 0.85rem;
            letter-spacing: 1.2px;
        }

        .book-page-footer strong {
            color: var(--cream);
            font-size: 0.95rem;
            letter-spacing: 1px;
        }

        .book-article-page {
            display: grid;
            grid-template-rows: 240px 1fr;
            min-height: 640px;
            color: var(--ink, #1A1A2E);
        }

        .book-article-image {
            width: 100%;
            height: 240px;
            object-fit: cover;
            border-bottom: 1px solid rgba(139, 58, 47, 0.22);
        }

        .book-article-copy {
            padding: 1.45rem clamp(1.2rem, 2vw, 2rem) 1.6rem;
        }

        .book-article-badge {
            display: inline-flex;
            align-items: center;
            min-height: 28px;
            padding: 0.3rem 0.65rem;
            background: var(--deep-green, #24431F);
            color: var(--cream);
            font-family: 'Philosopher', sans-serif;
            font-size: 0.7rem;
            letter-spacing: 1.2px;
            text-transform: uppercase;
        }

        .book-article-kicker {
            margin: 0.85rem 0 0.3rem;
            color: var(--terracotta);
            font-family: 'Philosopher', sans-serif;
            font-size: 0.78rem;
            letter-spacing: 1.4px;
            text-transform: uppercase;
        }

        .book-article-copy h3 {
            margin: 0;
            color: var(--deep-green, #24431F);
            font-family: 'Amiri', serif;
            font-size: clamp(1.9rem, 3.2vw, 3rem);
            font-weight: 700;
            line-height: 0.98;
        }

        .book-article-intro,
        .book-article-section p,
        .book-article-note span {
            color: rgba(26, 26, 46, 0.82);
            font-size: 0.96rem;
            line-height: 1.65;
        }

        .book-article-intro {
            margin: 0.95rem 0 1rem;
        }

        .book-article-section {
            margin-top: 0.85rem;
            padding-top: 0.85rem;
            border-top: 1px solid rgba(139, 58, 47, 0.18);
        }

        .book-article-section h4 {
            margin: 0 0 0.35rem;
            color: var(--terracotta-deep);
            font-family: 'Philosopher', sans-serif;
            font-size: 1rem;
        }

        .book-article-section p {
            margin: 0;
        }

        .book-article-note {
            display: grid;
            gap: 0.35rem;
            margin-top: 1rem;
            padding: 0.85rem 1rem;
            background: rgba(212, 160, 60, 0.14);
            border-left: 4px solid var(--saffron);
        }

        .book-article-note strong {
            color: var(--deep-green, #24431F);
            font-family: 'Philosopher', sans-serif;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .book-blank-page {
            flex: 1;
            min-height: 640px;
            background:
                linear-gradient(135deg, rgba(212, 160, 60, 0.08), transparent 38%),
                #f7efdf;
        }

        .recipe-book-thumbs {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 1rem;
            margin-top: 2rem;
        }

        .book-thumb {
            position: relative;
            border: 1px solid rgba(212, 160, 60, 0.2);
            background: rgba(255, 255, 255, 0.04);
            color: var(--cream);
            cursor: pointer;
            overflow: hidden;
            text-align: left;
            transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .book-thumb:hover,
        .book-thumb.active {
            transform: translateY(-4px);
            border-color: var(--saffron);
            box-shadow: 0 16px 36px rgba(212, 160, 60, 0.14);
        }

        .book-thumb img {
            width: 100%;
            aspect-ratio: 3 / 4;
            object-fit: cover;
            object-position: top;
        }

        .book-thumb-type {
            position: absolute;
            top: 0.55rem;
            left: 0.55rem;
            z-index: 1;
            min-height: 24px;
            padding: 0.25rem 0.5rem;
            background: rgba(26, 26, 46, 0.82);
            color: var(--saffron);
            font-family: 'Philosopher', sans-serif;
            font-size: 0.62rem;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .book-thumb > span:not(.book-thumb-type) {
            display: block;
            min-height: 54px;
            padding: 0.75rem;
            font-family: 'Philosopher', sans-serif;
            font-size: 0.76rem;
            letter-spacing: 1px;
            line-height: 1.35;
            text-transform: uppercase;
        }

        .recipe-book-empty {
            padding: 2rem;
            border: 1px dashed rgba(212, 160, 60, 0.35);
            text-align: center;
        }

        .recipe-close {
            position: sticky;
            top: 1rem;
            float: right;
            z-index: 2;
            width: 46px;
            height: 46px;
            margin: 1rem 1rem -3.4rem 0;
            border-radius: 50%;
            border: 1px solid rgba(139, 58, 47, 0.35);
            background: rgba(245, 240, 230, 0.9);
            color: var(--terracotta-deep);
            cursor: pointer;
            font-size: 1rem;
            transition: background 0.3s ease, transform 0.3s ease;
        }

        .recipe-close:hover {
            transform: rotate(90deg);
            background: #fff8ed;
        }

        .recipe-hero {
            display: grid;
            grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
            min-height: 360px;
            border-bottom: 1px solid rgba(139, 58, 47, 0.16);
        }

        .recipe-hero-copy {
            padding: 3.2rem;
            align-self: center;
        }

        .recipe-kicker,
        .recipe-panel-label {
            font-family: 'Philosopher', sans-serif;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--terracotta-deep);
            font-size: 0.78rem;
            font-weight: 700;
        }

        .recipe-hero h3 {
            font-family: 'Amiri', serif;
            font-size: clamp(2.8rem, 6vw, 5.5rem);
            line-height: 0.92;
            color: var(--terracotta);
            margin: 0.7rem 0 1rem;
        }

        .recipe-subtitle {
            max-width: 520px;
            color: #244521;
            font-size: 1.25rem;
            line-height: 1.45;
            font-weight: 700;
        }

        .recipe-hero img {
            width: 100%;
            height: 100%;
            min-height: 360px;
            object-fit: cover;
        }

        .recipe-metrics {
            display: grid;
            grid-template-columns: repeat(4, minmax(92px, 1fr));
            gap: 0.9rem;
            margin-top: 2rem;
        }

        .recipe-metrics span {
            min-height: 76px;
            display: grid;
            align-content: center;
            gap: 0.25rem;
            border-top: 3px solid #244521;
            color: #1f2518;
            font-family: 'Philosopher', sans-serif;
            font-size: 0.82rem;
            text-align: center;
        }

        .recipe-metrics strong {
            color: #244521;
            font-size: 1rem;
        }

        .recipe-body {
            display: grid;
            grid-template-columns: minmax(230px, 0.75fr) minmax(320px, 1.4fr) minmax(230px, 0.85fr);
            gap: 1.2rem;
            padding: 1.4rem;
        }

        .recipe-panel {
            border: 1px solid rgba(139, 58, 47, 0.18);
            background: rgba(255, 251, 242, 0.58);
            padding: 1.4rem;
        }

        .recipe-ingredients ul,
        .recipe-steps ol {
            margin: 1rem 0 0;
            padding-left: 1.2rem;
            color: #1f2518;
        }

        .recipe-ingredients li,
        .recipe-steps li {
            margin-bottom: 0.6rem;
            line-height: 1.45;
            font-size: 1.03rem;
        }

        .recipe-steps ol {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.8rem 1.5rem;
            list-style-position: inside;
            padding-left: 0;
        }

        .recipe-steps li::marker {
            color: var(--terracotta-deep);
            font-family: 'Philosopher', sans-serif;
            font-weight: 700;
        }

        .recipe-notes {
            display: grid;
            align-content: start;
            gap: 1.5rem;
        }

        .recipe-notes p:not(.recipe-panel-label) {
            margin-top: 0.65rem;
            color: #1f2518;
            line-height: 1.55;
        }

        /* Gallery Section */
        .gallery {
            background: var(--midnight);
            padding: 8rem 2rem;
        }

        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(2, 300px);
            gap: 1.5rem;
            max-width: 1600px;
            margin: 0 auto;
        }

        .gallery-item {
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        .gallery-item:nth-child(1) {
            grid-column: span 2;
            grid-row: span 2;
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.7s ease;
            filter: saturate(105%);
        }

        .gallery-item:hover img {
            transform: scale(1.1);
        }

        .gallery-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(26, 26, 46, 0.9) 0%, transparent 50%);
            opacity: 0;
            transition: opacity 0.5s ease;
            display: flex;
            align-items: flex-end;
            padding: 2rem;
        }

        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }

        .gallery-caption {
            font-family: 'Amiri', serif;
            font-size: 1.3rem;
            color: var(--cream);
        }

        /* Ambiance Section */
        .ambiance {
            background: linear-gradient(180deg, #1E1E32 0%, var(--midnight) 100%);
            position: relative;
            overflow: hidden;
        }

        .ambiance-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        background: url('../../resto/center-cover.webp') center/cover;
            opacity: 0.1;
            filter: sepia(30%);
        }

        .ambiance-content {
            position: relative;
            z-index: 1;
            max-width: 1400px;
            margin: 0 auto;
        }

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

        .ambiance-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(212, 160, 60, 0.2);
            padding: 3rem;
            text-align: center;
            transition: all 0.5s ease;
        }

        .ambiance-card:hover {
            transform: translateY(-10px);
            border-color: var(--saffron);
            box-shadow: 0 20px 50px rgba(212, 160, 60, 0.15);
        }

        .ambiance-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 2rem;
            background: linear-gradient(135deg, var(--saffron), var(--terracotta));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
        }

        .ambiance-card h3 {
            font-family: 'Amiri', serif;
            font-size: 1.8rem;
            margin-bottom: 1rem;
            color: var(--saffron);
        }

        .ambiance-card p {
            font-size: 1.05rem;
            opacity: 0.8;
            line-height: 1.7;
        }

        /* Infos & Traditions */
        .infos {
            background: var(--midnight);
        }

        .infos-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 3rem;
            max-width: 1400px;
            margin: 0 auto;
        }

        .info-article {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(212, 160, 60, 0.2);
            overflow: hidden;
            transition: all 0.5s ease;
        }

        .info-article:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(212, 160, 60, 0.2);
            border-color: var(--saffron);
        }

        .info-article-image {
            height: 300px;
            overflow: hidden;
            position: relative;
        }

        .info-article-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.7s ease;
            filter: saturate(110%);
        }

        .info-article:hover .info-article-image img {
            transform: scale(1.1);
        }

        .info-article-badge {
            position: absolute;
            top: 1rem;
            left: 1rem;
            background: var(--saffron);
            color: var(--midnight);
            padding: 0.5rem 1rem;
            font-family: 'Philosopher', sans-serif;
            font-size: 0.75rem;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .info-article-content {
            padding: 2.5rem;
        }

        .info-article-title {
            font-family: 'Amiri', serif;
            font-size: 1.8rem;
            margin-bottom: 1rem;
            color: var(--saffron);
        }

        .info-article-excerpt {
            font-size: 1.05rem;
            opacity: 0.9;
            margin-bottom: 1.5rem;
            line-height: 1.7;
        }

        .info-article-link {
            color: var(--saffron);
            text-decoration: none;
            font-family: 'Philosopher', sans-serif;
            font-size: 0.9rem;
            letter-spacing: 1px;
            text-transform: uppercase;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .info-article-link:hover {
            color: var(--saffron-light);
            gap: 1rem;
        }

        body.article-open {
            overflow: hidden;
        }

        .article-modal-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(8, 8, 18, 0.78);
            backdrop-filter: blur(12px);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.35s ease;
            z-index: 1220;
        }

        .article-modal-backdrop.active {
            opacity: 1;
            pointer-events: auto;
        }

        .article-modal {
            position: fixed;
            inset: 0;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 2rem;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.35s ease;
            z-index: 1230;
            overflow-y: auto;
        }

        .article-modal.active {
            opacity: 1;
            pointer-events: auto;
        }

        .article-modal-dialog {
            width: min(1200px, 100%);
            background: linear-gradient(180deg, rgba(27, 27, 46, 0.98) 0%, rgba(18, 18, 34, 0.98) 100%);
            border: 1px solid rgba(212, 160, 60, 0.18);
            box-shadow: 0 40px 120px rgba(0, 0, 0, 0.4);
            position: relative;
            margin: 3rem 0;
        }

        .article-modal-close {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 1px solid rgba(212, 160, 60, 0.25);
            background: rgba(15, 15, 28, 0.8);
            color: var(--cream);
            font-size: 1.2rem;
            cursor: pointer;
            z-index: 2;
            transition: all 0.3s ease;
        }

        .article-modal-close:hover {
            color: var(--saffron);
            border-color: var(--saffron);
            background: rgba(212, 160, 60, 0.08);
        }

        .article-modal-content {
            padding: 2rem;
        }

        .article-modal-hero {
            display: grid;
            grid-template-columns: 1.15fr 0.85fr;
            gap: 2rem;
            align-items: stretch;
            margin-bottom: 2rem;
        }

        .article-modal-media {
            position: relative;
            min-height: 420px;
            overflow: hidden;
            border: 1px solid rgba(212, 160, 60, 0.18);
        }

        .article-modal-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: saturate(108%);
        }

        .article-modal-badge {
            position: absolute;
            left: 1.5rem;
            top: 1.5rem;
            background: linear-gradient(135deg, var(--saffron), var(--terracotta));
            color: var(--midnight);
            padding: 0.75rem 1rem;
            font-family: 'Philosopher', sans-serif;
            font-size: 0.78rem;
            letter-spacing: 1.8px;
            text-transform: uppercase;
        }

        .article-modal-intro {
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(212, 160, 60, 0.14);
            padding: 2.5rem;
        }

        .article-modal-kicker {
            font-family: 'Philosopher', sans-serif;
            font-size: 0.8rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--saffron);
            margin-bottom: 1rem;
        }

        .article-modal-title {
            font-family: 'Amiri', serif;
            font-size: clamp(2.4rem, 5vw, 4rem);
            font-weight: 400;
            line-height: 1.1;
            margin-bottom: 1rem;
        }

        .article-modal-standfirst {
            font-size: 1.2rem;
            line-height: 1.8;
            color: rgba(245, 240, 230, 0.88);
        }

        .article-modal-grid {
            display: grid;
            grid-template-columns: 1.15fr 0.85fr;
            gap: 2rem;
        }

        .article-modal-body {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .article-section {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(212, 160, 60, 0.12);
            padding: 1.8rem;
        }

        .article-section h2,
        .article-section h4 {
            font-family: 'Amiri', serif;
            font-size: 1.9rem;
            color: var(--saffron);
            font-weight: 400;
            margin-bottom: 0.8rem;
        }

        .article-section p {
            font-size: 1.08rem;
            line-height: 1.85;
            color: rgba(245, 240, 230, 0.9);
            margin-bottom: 1rem;
        }

        .article-section p:last-child {
            margin-bottom: 0;
        }

        .article-modal-side {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .article-support-card,
        .article-highlights-card,
        .article-note-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(212, 160, 60, 0.12);
            padding: 1.5rem;
        }

        .article-support-card img {
            width: 100%;
            height: 240px;
            object-fit: cover;
            margin-bottom: 1rem;
        }

        .article-support-label,
        .article-note-label {
            font-family: 'Philosopher', sans-serif;
            font-size: 0.72rem;
            letter-spacing: 1.8px;
            text-transform: uppercase;
            color: var(--saffron);
            margin-bottom: 0.6rem;
        }

        .article-support-card h2,
        .article-support-card h4,
        .article-note-card h2,
        .article-note-card h4 {
            font-family: 'Amiri', serif;
            font-size: 1.7rem;
            font-weight: 400;
            margin-bottom: 0.65rem;
        }

        .article-support-card p,
        .article-note-card p {
            font-size: 1rem;
            line-height: 1.75;
            color: rgba(245, 240, 230, 0.84);
        }

        .article-page {
            position: relative;
            z-index: 1;
            min-height: 100vh;
            padding: 8rem 4rem 5rem;
        }

        .article-page-shell {
            max-width: 1240px;
            margin: 0 auto;
        }

        .article-page-topbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .article-back-link {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.9rem 1.4rem;
            border-radius: 999px;
            border: 1px solid rgba(212, 160, 60, 0.35);
            background: rgba(26, 26, 46, 0.76);
            color: var(--cream);
            text-decoration: none;
            font-family: 'Philosopher', sans-serif;
            letter-spacing: 0.04em;
            transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
        }

        .article-back-link:hover {
            transform: translateY(-2px);
            border-color: rgba(212, 160, 60, 0.75);
            background: rgba(46, 74, 142, 0.22);
        }

        .article-back-link-secondary {
            background: rgba(245, 240, 230, 0.06);
        }

        .article-page-brand {
            color: var(--saffron);
            text-decoration: none;
            font-family: 'Amiri', serif;
            font-size: 2rem;
            line-height: 1;
        }

        .article-page-content {
            padding: 2.6rem;
            background:
                linear-gradient(160deg, rgba(245, 240, 230, 0.04), rgba(46, 74, 142, 0.08)),
                rgba(26, 26, 46, 0.94);
            border: 1px solid rgba(212, 160, 60, 0.18);
            border-radius: 34px;
            box-shadow: 0 32px 80px rgba(0, 0, 0, 0.28);
        }

        .article-page-related {
            margin-top: 3rem;
        }

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

        .article-related-card {
            background: rgba(245, 240, 230, 0.05);
            border: 1px solid rgba(212, 160, 60, 0.14);
            border-radius: 26px;
            overflow: hidden;
            box-shadow: 0 20px 48px rgba(0, 0, 0, 0.2);
        }

        .article-related-card img {
            width: 100%;
            height: 230px;
            object-fit: cover;
            display: block;
        }

        .article-related-content {
            padding: 1.5rem;
        }

        .article-related-kicker {
            font-family: 'Philosopher', sans-serif;
            font-size: 0.78rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--saffron-light);
            margin-bottom: 0.7rem;
        }

        .article-related-content h3 {
            font-size: 1.9rem;
            color: var(--cream);
            margin-bottom: 0.7rem;
        }

        .article-related-content p {
            color: rgba(245, 240, 230, 0.82);
            margin-bottom: 1rem;
        }

        .article-page-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
            justify-content: center;
            margin-top: 2.5rem;
        }

        .article-page-empty {
            max-width: 780px;
            margin: 8vh auto 0;
            text-align: center;
            padding: 3rem;
            background: rgba(26, 26, 46, 0.92);
            border-radius: 30px;
            border: 1px solid rgba(212, 160, 60, 0.16);
        }

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

        .article-highlights-card {
            position: relative;
            overflow: hidden;
            min-height: 190px;
        }

        .article-highlights-card::before {
            content: '';
            position: absolute;
            inset: auto auto -45px -35px;
            width: 110px;
            height: 110px;
            background: radial-gradient(circle, rgba(212, 160, 60, 0.25) 0%, rgba(212, 160, 60, 0) 72%);
            pointer-events: none;
        }

        .article-highlight-mark {
            width: 52px;
            height: 52px;
            border-radius: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(212, 160, 60, 0.2), rgba(199, 91, 57, 0.12));
            color: var(--saffron);
            font-family: 'Amiri', serif;
            font-size: 1.7rem;
            margin-bottom: 1rem;
        }

        .article-highlight-label {
            font-family: 'Philosopher', sans-serif;
            font-size: 0.72rem;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: rgba(245, 240, 230, 0.65);
            margin-bottom: 0.4rem;
        }

        .article-highlight-value {
            font-family: 'Amiri', serif;
            font-size: 1.5rem;
            color: var(--saffron);
            margin-bottom: 0.6rem;
        }

        .article-highlight-text {
            font-size: 0.98rem;
            line-height: 1.7;
            color: rgba(245, 240, 230, 0.82);
        }

        /* Testimonials */
        .testimonials {
            background: #1E1E32;
        }

        .testimonials-slider {
            max-width: 900px;
            margin: 0 auto;
            position: relative;
        }

        .testimonial {
            text-align: center;
            padding: 0 3rem;
        }

        .testimonial-quote {
            font-size: 1.8rem;
            font-style: italic;
            line-height: 1.8;
            margin-bottom: 2rem;
            position: relative;
        }

        .testimonial-quote::before {
            content: '"';
            font-family: 'Amiri', serif;
            font-size: 6rem;
            color: var(--saffron);
            opacity: 0.3;
            position: absolute;
            top: -2rem;
            left: -1rem;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.5rem;
        }

        .testimonial-avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--saffron);
        }

        .testimonial-info h4 {
            font-family: 'Philosopher', sans-serif;
            font-size: 1.2rem;
            color: var(--saffron);
        }

        .testimonial-info p {
            font-size: 0.95rem;
            opacity: 0.7;
        }

        /* Reservation Section */
        .reservation {
            background: var(--midnight);
            position: relative;
        }

        .reservation-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5rem;
            align-items: center;
        }

        .reservation-info h3 {
            font-family: 'Amiri', serif;
            font-size: 2.5rem;
            margin-bottom: 2rem;
            color: var(--saffron);
        }

        .reservation-info p {
            font-size: 1.15rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }

        .contact-details {
            margin-top: 3rem;
        }

        .contact-item {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .contact-icon {
            width: 50px;
            height: 50px;
            background: rgba(212, 160, 60, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--saffron);
            font-size: 1.2rem;
        }

        .contact-text h4 {
            font-family: 'Philosopher', sans-serif;
            font-size: 0.9rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--saffron);
            margin-bottom: 0.3rem;
        }

        .contact-text p {
            font-size: 1.1rem;
            margin: 0;
        }

        .reservation-form {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(212, 160, 60, 0.2);
            padding: 3rem;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            font-family: 'Philosopher', sans-serif;
            font-size: 0.85rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--saffron);
            margin-bottom: 0.5rem;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(212, 160, 60, 0.3);
            color: var(--cream);
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.1rem;
            transition: all 0.3s ease;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--saffron);
            background: rgba(212, 160, 60, 0.1);
        }

        .form-group textarea {
            resize: vertical;
            min-height: 120px;
        }

        .form-submit {
            width: 100%;
            background: linear-gradient(135deg, var(--saffron), var(--terracotta));
            color: var(--midnight);
            padding: 1.2rem;
            border: none;
            font-family: 'Philosopher', sans-serif;
            font-size: 1rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.4s ease;
        }

        .form-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(212, 160, 60, 0.4);
        }

        .order-summary {
            margin-bottom: 1.5rem;
            padding: 1.5rem;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(212, 160, 60, 0.18);
        }

        .order-summary-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .order-summary-kicker {
            font-family: 'Philosopher', sans-serif;
            font-size: 0.72rem;
            letter-spacing: 1.8px;
            text-transform: uppercase;
            color: var(--saffron);
            margin-bottom: 0.3rem;
        }

        .order-summary h4 {
            font-family: 'Amiri', serif;
            font-size: 1.8rem;
            color: var(--saffron);
            font-weight: 400;
        }

        .order-summary-edit {
            background: transparent;
            border: 1px solid rgba(212, 160, 60, 0.3);
            color: var(--cream);
            padding: 0.8rem 1rem;
            font-family: 'Philosopher', sans-serif;
            font-size: 0.78rem;
            letter-spacing: 1px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .order-summary-edit:hover {
            border-color: var(--saffron);
            color: var(--saffron);
        }

        .order-summary-empty {
            font-size: 1.05rem;
            opacity: 0.8;
        }

        .order-summary-list {
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
        }

        .order-summary-item {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            padding-bottom: 0.8rem;
            border-bottom: 1px solid rgba(212, 160, 60, 0.12);
        }

        .order-summary-item:last-child {
            padding-bottom: 0;
            border-bottom: none;
        }

        .order-summary-name {
            font-size: 1.05rem;
        }

        .order-summary-qty {
            font-family: 'Philosopher', sans-serif;
            font-size: 0.75rem;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: rgba(245, 240, 230, 0.65);
            margin-bottom: 0.25rem;
        }

        .order-summary-price {
            font-family: 'Philosopher', sans-serif;
            font-size: 0.95rem;
            color: var(--saffron);
            white-space: nowrap;
        }

        .order-summary-total {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid rgba(212, 160, 60, 0.15);
            font-family: 'Philosopher', sans-serif;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .order-summary-total strong {
            color: var(--saffron);
        }

        /* Footer */
        footer {
            background: #12121F;
            padding: 5rem 4rem 2rem;
            position: relative;
            z-index: 1;
        }

        .footer-content {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 4rem;
            margin-bottom: 4rem;
        }

        .footer-brand .logo {
            margin-bottom: 1.5rem;
        }

        .footer-brand p {
            font-size: 1.05rem;
            opacity: 0.8;
            margin-bottom: 2rem;
            max-width: 300px;
        }

        .social-links {
            display: flex;
            gap: 1rem;
        }

        .social-link {
            width: 45px;
            height: 45px;
            border: 1px solid rgba(212, 160, 60, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--saffron);
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .social-link:hover {
            background: var(--saffron);
            color: var(--midnight);
        }

        .footer-column h4 {
            font-family: 'Philosopher', sans-serif;
            font-size: 0.9rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--saffron);
            margin-bottom: 1.5rem;
        }

        .footer-column ul {
            list-style: none;
        }

        .footer-column li {
            margin-bottom: 0.8rem;
        }

        .footer-column a {
            color: var(--cream);
            text-decoration: none;
            opacity: 0.8;
            transition: all 0.3s ease;
        }

        .footer-column a:hover {
            color: var(--saffron);
            opacity: 1;
        }

        .footer-bottom {
            border-top: 1px solid rgba(212, 160, 60, 0.2);
            padding-top: 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            opacity: 0.7;
            font-size: 0.95rem;
        }

        /* Animations */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Mobile Menu */
        .mobile-toggle {
            display: none;
            flex-direction: column;
            gap: 5px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 10px;
        }

        .mobile-toggle span {
            width: 25px;
            height: 2px;
            background: var(--saffron);
            transition: all 0.3s ease;
        }

        /* Responsive */
        @media (max-width: 1200px) {
            .footer-content {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 992px) {
            .nav {
                padding: 1rem 2rem;
            }

            .nav-right {
                gap: 0.75rem;
            }

            .nav-links {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background: rgba(26, 26, 46, 0.98);
                flex-direction: column;
                padding: 2rem;
                gap: 1.5rem;
            }

            .nav-links.active {
                display: flex;
            }

            .mobile-toggle {
                display: flex;
            }

            .nav-cta {
                display: none;
            }

            .cart-toggle {
                padding: 0.75rem 0.9rem;
            }

            .cart-toggle-total {
                display: none;
            }

            section {
                padding: 5rem 2rem;
            }

            .about-grid {
                grid-template-columns: 1fr;
                gap: 3rem;
            }

            .gallery-grid {
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto;
            }

            .gallery-item:nth-child(1) {
                grid-column: span 2;
            }

            .ambiance-grid {
                grid-template-columns: 1fr;
            }

            .reservation-container {
                grid-template-columns: 1fr;
            }

            .recipe-hero,
            .recipe-body {
                grid-template-columns: 1fr;
            }

            .recipe-hero {
                min-height: auto;
            }

            .recipe-hero img {
                min-height: 300px;
            }

            .recipe-steps ol {
                grid-template-columns: 1fr;
            }

            .recipe-book-shell {
                padding-top: 7rem;
            }

            .recipe-book {
                grid-template-columns: 1fr;
                gap: 1rem;
                padding: 1rem;
            }

            .book-spine {
                display: none;
            }

            .book-page {
                min-height: auto;
                border-radius: 8px;
            }

            .book-page img {
                height: auto;
                max-height: none;
            }

            .article-modal {
                padding: 1rem;
            }

            .article-modal-dialog {
                margin: 1rem 0;
            }

            .article-modal-hero,
            .article-modal-grid {
                grid-template-columns: 1fr;
            }

            .article-highlights-grid {
                grid-template-columns: 1fr;
            }

            .article-related-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .hero-title {
                font-size: 3rem;
            }

            .hero-arabic {
                font-size: 1.8rem;
            }

            .menu-grid {
                grid-template-columns: 1fr;
            }

            .menu-item-footer {
                align-items: flex-start;
                flex-direction: column;
            }

            .menu-item-actions {
                width: 100%;
                justify-content: space-between;
            }

            .recipe-modal {
                padding: 0.75rem;
            }

            .recipe-sheet {
                max-height: 92vh;
            }

            .recipe-close {
                width: 42px;
                height: 42px;
                margin-right: 0.75rem;
            }

            .recipe-hero-copy {
                padding: 2rem 1.25rem 1.5rem;
            }

            .recipe-hero h3 {
                font-size: 2.8rem;
            }

            .recipe-subtitle {
                font-size: 1.05rem;
            }

            .recipe-metrics {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .recipe-body {
                padding: 0.75rem;
            }

            .recipe-book-shell {
                padding-inline: 1rem;
            }

            .recipe-book-toolbar {
                gap: 0.65rem;
            }

            .book-progress {
                min-width: 150px;
                padding-inline: 0.8rem;
            }

            .book-control {
                width: 46px;
                height: 46px;
            }

            .recipe-book-thumbs {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .gallery-grid {
                grid-template-columns: 1fr;
            }

            .gallery-item:nth-child(1) {
                grid-column: span 1;
                grid-row: span 1;
            }

            .footer-content {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .social-links {
                justify-content: center;
            }

            .footer-bottom {
                flex-direction: column;
                gap: 1rem;
                text-align: center;
            }

            .form-row {
                grid-template-columns: 1fr;
            }

            .cart-toggle-label {
                display: none;
            }

            .cart-panel {
                width: 100%;
            }

            .cart-item {
                grid-template-columns: 76px 1fr;
            }

            .cart-item-image {
                width: 76px;
                height: 76px;
            }

            .cart-line-total {
                grid-column: 2;
                justify-self: end;
            }

            .cart-actions {
                grid-template-columns: 1fr;
            }

            .cart-toast {
                right: 1rem;
                left: 1rem;
                bottom: 1rem;
                max-width: none;
            }

            .order-summary-header,
            .order-summary-item,
            .order-summary-total {
                flex-direction: column;
                align-items: flex-start;
            }

            .article-modal-content {
                padding: 1.1rem;
            }

            .article-modal-intro,
            .article-section,
            .article-support-card,
            .article-highlights-card,
            .article-note-card {
                padding: 1.2rem;
            }

            .article-modal-media {
                min-height: 280px;
            }

            .article-page {
                padding: 6.5rem 1.25rem 3.5rem;
            }

            .article-page-topbar,
            .article-page-actions {
                flex-direction: column;
                align-items: stretch;
            }

            .article-page-brand {
                text-align: center;
            }

            .article-back-link,
            .article-page-actions .hero-cta-primary {
                justify-content: center;
                text-align: center;
            }
        }

/* =========================================================
   REFONTE LUXE — Or sur Noir
   Surcharge esthétique complète : fond noir profond, accent
   or unique, typographie italique élégante, cartes à bordure or fine.
   ========================================================= */
:root {
    --lux-bg: #050505;
    --lux-bg-soft: #0b0b0d;
    --lux-card: #0e0e10;
    --lux-card-hover: #131316;
    --lux-gold: #D4A03C;
    --lux-gold-soft: #B8862A;
    --lux-gold-light: #E8C068;
    --lux-line: rgba(212, 160, 60, 0.18);
    --lux-line-strong: rgba(212, 160, 60, 0.55);
    --lux-text: #EDE6D6;
    --lux-text-dim: rgba(237, 230, 214, 0.62);
    --lux-text-mute: rgba(237, 230, 214, 0.42);
}

body {
    background: var(--lux-bg) !important;
    color: var(--lux-text);
}

/* Motif zellige : encore plus discret */
.zellige-pattern { opacity: 0.018 !important; }

/* ---------- Navigation ---------- */
.nav.scrolled {
    background: rgba(5, 5, 5, 0.92) !important;
    box-shadow: 0 1px 0 var(--lux-line);
    backdrop-filter: blur(24px);
}
.logo {
    color: var(--lux-gold);
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.nav-links a {
    font-family: 'Philosopher', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 2.5px;
    color: var(--lux-text-dim);
    transition: color .35s ease;
}
.nav-links a:hover { color: var(--lux-gold); }
.nav-links a::after {
    background: var(--lux-gold) !important;
    height: 1px !important;
}

.nav-cta {
    background: transparent !important;
    color: var(--lux-gold) !important;
    border: 1px solid var(--lux-line-strong) !important;
    letter-spacing: 2.5px;
    font-size: 0.75rem;
    padding: 0.85rem 1.8rem;
    transition: all .35s ease;
}
.nav-cta:hover {
    background: var(--lux-gold) !important;
    color: var(--lux-bg) !important;
    box-shadow: 0 8px 30px rgba(212, 160, 60, 0.25) !important;
    transform: translateY(-1px);
}

.cart-toggle {
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid var(--lux-line) !important;
    letter-spacing: 2px;
    font-size: 0.72rem;
}
.cart-toggle:hover { border-color: var(--lux-gold-soft) !important; }
.cart-toggle-count {
    background: var(--lux-gold) !important;
    color: var(--lux-bg) !important;
}

/* ---------- Hero ---------- */
.hero-overlay {
    background: linear-gradient(180deg, rgba(5,5,5,0.55) 0%, rgba(5,5,5,0.85) 100%) !important;
}
.hero-subtitle {
    color: var(--lux-gold) !important;
    letter-spacing: 6px !important;
    font-size: 0.85rem;
}
.hero-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px;
    background: none !important;
    color: var(--lux-text) !important;
    -webkit-text-fill-color: var(--lux-text) !important;
}
.hero-title em,
.hero-title i { color: var(--lux-gold); font-style: italic; }
.hero-arabic { color: var(--lux-gold-light) !important; opacity: 0.85; }
.hero-description { color: var(--lux-text-dim) !important; }

.btn-primary {
    background: var(--lux-gold) !important;
    color: var(--lux-bg) !important;
    border: 1px solid var(--lux-gold) !important;
    letter-spacing: 3px;
    font-size: 0.78rem;
}
.btn-primary:hover {
    background: transparent !important;
    color: var(--lux-gold) !important;
    box-shadow: 0 12px 40px rgba(212, 160, 60, 0.2) !important;
}
.btn-secondary {
    background: transparent !important;
    border: 1px solid var(--lux-line-strong) !important;
    color: var(--lux-text) !important;
    letter-spacing: 3px;
    font-size: 0.78rem;
}
.btn-secondary:hover {
    border-color: var(--lux-gold) !important;
    color: var(--lux-gold) !important;
}

/* ---------- Section headers ---------- */
.about, .menu, .gallery, .ambiance, .infos, .testimonials, .reservation {
    background: var(--lux-bg) !important;
}
.section-subtitle {
    color: var(--lux-gold) !important;
    letter-spacing: 5px;
    font-size: 0.78rem;
    font-family: 'Philosopher', sans-serif;
}
.section-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 500;
    font-style: italic;
    color: var(--lux-text) !important;
    letter-spacing: 0.5px;
}
.section-divider {
    background: var(--lux-gold) !important;
    height: 1px !important;
    width: 60px !important;
}

/* ---------- Cards : menu, gallery, ambiance, infos ---------- */
.menu-item,
.ambiance-card,
.info-article,
.gallery-item,
.article-related-card,
.article-highlights-card {
    background: var(--lux-card) !important;
    border: 1px solid var(--lux-line) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    transition: border-color .4s ease, transform .4s ease, box-shadow .4s ease !important;
}
.menu-item:hover,
.ambiance-card:hover,
.info-article:hover,
.article-related-card:hover {
    border-color: var(--lux-line-strong) !important;
    transform: translateY(-3px);
    box-shadow: 0 18px 50px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,160,60,0.08) !important;
}

.menu-item-title,
.info-article-title,
.ambiance-card h3 {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 500;
    color: var(--lux-text) !important;
    letter-spacing: 0.3px;
}
.menu-item-description,
.info-article-excerpt {
    color: var(--lux-text-dim) !important;
    font-family: 'Cormorant Garamond', serif;
}
.menu-item-price {
    color: var(--lux-gold) !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 1.4rem !important;
}
.menu-item-badge,
.info-article-badge,
.article-modal-badge,
.book-article-badge {
    background: transparent !important;
    border: 1px solid var(--lux-gold) !important;
    color: var(--lux-gold) !important;
    letter-spacing: 2.5px;
    font-size: 0.7rem;
    padding: 0.35rem 0.9rem !important;
    border-radius: 2px !important;
}

.menu-item-btn {
    background: transparent !important;
    color: var(--lux-gold) !important;
    border: 1px solid var(--lux-line-strong) !important;
    letter-spacing: 2.5px;
    font-size: 0.72rem;
}
.menu-item-btn:hover {
    background: var(--lux-gold) !important;
    color: var(--lux-bg) !important;
    border-color: var(--lux-gold) !important;
}

/* Filtres catégorie */
.menu-category {
    background: transparent !important;
    border: 1px solid var(--lux-line) !important;
    color: var(--lux-text-dim) !important;
    letter-spacing: 3px;
    font-size: 0.75rem;
    border-radius: 2px !important;
    transition: all .35s ease;
}
.menu-category:hover { border-color: var(--lux-gold-soft) !important; color: var(--lux-text) !important; }
.menu-category.active {
    background: transparent !important;
    border-color: var(--lux-gold) !important;
    color: var(--lux-gold) !important;
    box-shadow: 0 0 0 1px var(--lux-gold), 0 0 30px rgba(212,160,60,0.15) !important;
}

/* ---------- About ---------- */
.about-features { gap: 1.25rem; }
.feature-item {
    background: var(--lux-card) !important;
    border: 1px solid var(--lux-line) !important;
    border-radius: 4px !important;
}
.feature-item h4, .feature-item span:not(.feature-icon) {
    color: var(--lux-text) !important;
}

/* ---------- Ambiance ---------- */
.ambiance-icon {
    color: var(--lux-gold) !important;
    background: transparent !important;
}

/* ---------- Gallery ---------- */
.gallery-overlay {
    background: linear-gradient(0deg, rgba(5,5,5,0.92), rgba(5,5,5,0.3)) !important;
}
.gallery-caption {
    color: var(--lux-gold-light) !important;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    letter-spacing: 1px;
}

/* ---------- Reservation form ---------- */
.reservation-container,
.order-summary,
form .form-group input,
form .form-group select,
form .form-group textarea {
    background: var(--lux-card) !important;
    border: 1px solid var(--lux-line) !important;
    color: var(--lux-text) !important;
    border-radius: 2px !important;
}
form .form-group input:focus,
form .form-group select:focus,
form .form-group textarea:focus {
    border-color: var(--lux-gold) !important;
    outline: none;
    box-shadow: 0 0 0 1px var(--lux-gold) !important;
}
.form-submit {
    background: var(--lux-gold) !important;
    color: var(--lux-bg) !important;
    border: 1px solid var(--lux-gold) !important;
    letter-spacing: 3px;
    border-radius: 2px !important;
}
.form-submit:hover {
    background: transparent !important;
    color: var(--lux-gold) !important;
}

.contact-icon {
    color: var(--lux-gold) !important;
    background: transparent !important;
    border: 1px solid var(--lux-line-strong) !important;
}

/* ---------- Testimonials ---------- */
.testimonial { background: var(--lux-card) !important; border: 1px solid var(--lux-line) !important; }
.testimonial-quote { color: var(--lux-text) !important; font-style: italic; }

/* ---------- Footer ---------- */
.footer-bottom,
footer { background: var(--lux-bg) !important; border-top: 1px solid var(--lux-line); }
.social-link {
    background: transparent !important;
    border: 1px solid var(--lux-line-strong) !important;
    color: var(--lux-gold) !important;
}
.social-link:hover {
    background: var(--lux-gold) !important;
    color: var(--lux-bg) !important;
}

/* ---------- Cart panel ---------- */
.cart-panel {
    background: var(--lux-bg-soft) !important;
    border-left: 1px solid var(--lux-line) !important;
}
.cart-kicker { color: var(--lux-gold) !important; letter-spacing: 4px; }
.cart-action-primary {
    background: var(--lux-gold) !important;
    color: var(--lux-bg) !important;
    border: 1px solid var(--lux-gold) !important;
    letter-spacing: 2.5px;
}
.cart-action-secondary {
    background: transparent !important;
    border: 1px solid var(--lux-line-strong) !important;
    color: var(--lux-text) !important;
    letter-spacing: 2.5px;
}

/* ---------- Recipe / livre overrides ---------- */
.recipe-sheet,
.book-cover-page,
.book-page,
.recipe-book-shell,
.article-modal,
.article-page-shell {
    background: var(--lux-bg-soft) !important;
    border: 1px solid var(--lux-line) !important;
    color: var(--lux-text);
}
.book-cover-title,
.article-modal-title,
.recipe-subtitle {
    font-family: 'Cormorant Garamond', serif !important;
    font-style: italic;
    color: var(--lux-text) !important;
}
.book-cover-kicker,
.recipe-panel-label,
.article-modal-kicker,
.book-article-kicker {
    color: var(--lux-gold) !important;
    letter-spacing: 5px !important;
}
.book-control,
.recipe-close,
.article-modal-close,
.article-back-link {
    background: transparent !important;
    border: 1px solid var(--lux-line-strong) !important;
    color: var(--lux-gold) !important;
}
.book-control:hover,
.article-back-link:hover {
    background: var(--lux-gold) !important;
    color: var(--lux-bg) !important;
}

/* ---------- Book / Livre — pages d'article ---------- */
.book-article-copy h3,
.book-cover-title { color: var(--lux-text) !important; }
.book-article-intro,
.book-article-section p,
.book-article-note span,
.book-article-copy p { color: var(--lux-text-dim) !important; }
.book-article-section h4 { color: var(--lux-gold) !important; font-style: italic; }
.book-article-section { border-top-color: var(--lux-line) !important; }
.book-article-note {
    background: rgba(212,160,60,0.06) !important;
    border-left-color: var(--lux-gold) !important;
}
.book-article-note strong { color: var(--lux-gold) !important; }
.book-cover-intro,
.book-cover-ornament { color: var(--lux-text-dim) !important; }
.recipe-panel,
.recipe-notes { background: transparent !important; color: var(--lux-text) !important; }
.recipe-panel p, .recipe-notes p { color: var(--lux-text-dim) !important; }
.recipe-panel h3, .recipe-panel h4 { color: var(--lux-text) !important; }
.book-page, .book-page-inner { color: var(--lux-text); }

/* =========================================================
   PAGE LA SEMAINE — Choisir son jour
   ========================================================= */
.page-semaine { background: var(--lux-bg); }
.semaine-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 8rem 2.5rem 6rem;
    color: var(--lux-text);
}

.semaine-head { text-align: center; margin-bottom: 3rem; }
.semaine-kicker {
    font-family: 'Philosopher', sans-serif;
    color: var(--lux-gold);
    letter-spacing: 8px;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}
.semaine-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    color: var(--lux-text);
    letter-spacing: 0.5px;
    line-height: 1.05;
    margin: 0;
}
.semaine-title em {
    color: var(--lux-gold);
    font-style: italic;
    font-weight: 500;
    margin-left: 0.4rem;
}
.semaine-divider {
    display: inline-block;
    width: 60px;
    height: 1px;
    background: var(--lux-gold);
    margin-top: 1.5rem;
}

/* ---------- Week picker ---------- */
.week-picker {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.day-card {
    position: relative;
    background: var(--lux-card);
    border: 1px solid var(--lux-line);
    border-radius: 6px;
    padding: 1.6rem 1rem 1.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    cursor: pointer;
    color: var(--lux-text);
    font-family: 'Cormorant Garamond', serif;
    transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.day-card:hover { border-color: var(--lux-line-strong); }
.day-card.is-active {
    border-color: var(--lux-gold);
    box-shadow: 0 0 0 1px var(--lux-gold), 0 22px 55px rgba(212,160,60,0.18), inset 0 0 35px rgba(212,160,60,0.05);
    transform: translateY(-2px);
}
.day-label {
    font-family: 'Philosopher', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 3px;
    color: var(--lux-text-dim);
}
.day-card.is-active .day-label { color: var(--lux-text); }
.day-number {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.4rem, 3.5vw, 3.6rem);
    font-weight: 500;
    line-height: 1;
    color: var(--lux-text);
    position: relative;
}
.day-card.is-active .day-number::before {
    content: '';
    position: absolute;
    inset: -10px;
    margin: auto;
    width: 70px; height: 70px;
    border: 1px solid var(--lux-gold);
    border-radius: 50%;
    z-index: -1;
}
.day-date {
    font-family: 'Philosopher', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 2.5px;
    color: var(--lux-text-mute);
}
.day-card.is-active .day-date { color: var(--lux-text-dim); }
.day-underline {
    width: 28px;
    height: 2px;
    background: transparent;
    margin-top: 0.2rem;
}
.day-card.is-active .day-underline { background: var(--lux-gold); }

/* ---------- Scrollbar décorative ---------- */
.week-scrollbar {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0 0 3.5rem;
    color: var(--lux-text-mute);
}
.week-nav {
    background: transparent;
    border: none;
    color: var(--lux-text-mute);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-family: 'Cormorant Garamond', serif;
}
.week-nav:hover { color: var(--lux-gold); }
.week-progress {
    flex: 1;
    height: 1px;
    background: var(--lux-line);
    position: relative;
}
.week-progress-thumb {
    position: absolute;
    left: 0; top: 0;
    width: 20%;
    height: 100%;
    background: var(--lux-gold);
}

/* ---------- Day panel ---------- */
.day-panel {
    background: var(--lux-card);
    border: 1px solid var(--lux-line);
    border-radius: 12px;
    padding: 2.5rem 2.75rem 2.25rem;
}
.day-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.4rem;
}
.day-panel-eyebrow {
    font-family: 'Philosopher', sans-serif;
    color: var(--lux-gold);
    letter-spacing: 5px;
    font-size: 0.78rem;
}
.day-panel-page {
    border: 1px solid var(--lux-line-strong);
    border-radius: 999px;
    padding: 0.35rem 1.1rem;
    color: var(--lux-text-dim);
    font-family: 'Philosopher', sans-serif;
    letter-spacing: 2px;
    font-size: 0.72rem;
}

.day-panel-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 1.25rem;
}
.day-panel-id { display: flex; align-items: flex-start; gap: 1.5rem; }
.day-panel-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(4rem, 7vw, 6.5rem);
    line-height: 0.85;
    color: var(--lux-gold);
    font-weight: 500;
}
.day-panel-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: clamp(2rem, 3vw, 2.8rem);
    color: var(--lux-text);
    margin: 0 0 0.5rem;
    letter-spacing: 0.5px;
}
.day-panel-tag {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--lux-text-dim);
    font-size: 1.05rem;
    max-width: 32ch;
    margin: 0;
}
.day-panel-kcal { text-align: right; }
.day-panel-kcal-value {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: clamp(3rem, 5vw, 4.5rem);
    color: var(--lux-text);
    line-height: 1;
}
.day-panel-kcal-unit {
    font-family: 'Philosopher', sans-serif;
    color: var(--lux-text-dim);
    letter-spacing: 3px;
    font-size: 0.72rem;
}

.day-panel-rule {
    border: none;
    border-top: 1px solid var(--lux-line);
    margin: 0.5rem 0 1.6rem;
}

.day-panel-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
}
.day-panel-tags {
    font-family: 'Philosopher', sans-serif;
    color: var(--lux-gold);
    letter-spacing: 3px;
    font-size: 0.75rem;
    line-height: 1.7;
    max-width: 50ch;
    margin: 0;
}
.day-panel-cta {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: transparent;
    border: 1px solid var(--lux-line-strong);
    border-radius: 6px;
    color: var(--lux-gold);
    padding: 0.9rem 1.5rem;
    font-family: 'Philosopher', sans-serif;
    letter-spacing: 3px;
    font-size: 0.75rem;
    text-decoration: none;
    transition: all .35s ease;
}
.day-panel-cta:hover {
    background: var(--lux-gold);
    color: var(--lux-bg);
    border-color: var(--lux-gold);
}

/* ---------- Meal card ---------- */
.meals { display: flex; flex-direction: column; gap: 1.5rem; }
.meal-card {
    display: grid;
    grid-template-columns: 130px 1fr 280px;
    gap: 1.5rem;
    background: var(--lux-bg-soft);
    border: 1px solid var(--lux-line);
    border-radius: 10px;
    padding: 1.75rem;
    align-items: stretch;
}
.meal-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    padding-top: 0.25rem;
}
.meal-icon {
    width: 46px; height: 46px;
    border: 1px solid var(--lux-line-strong);
    border-radius: 50%;
    color: var(--lux-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}
.meal-hour {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    color: var(--lux-text);
    margin-top: 0.5rem;
    letter-spacing: 1px;
}
.meal-tick {
    width: 26px;
    height: 2px;
    background: var(--lux-gold);
    margin-top: 0.3rem;
}

.meal-body { min-width: 0; }
.meal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.9rem;
    gap: 1rem;
}
.meal-slot {
    border: 1px solid var(--lux-gold);
    border-radius: 4px;
    color: var(--lux-gold);
    padding: 0.4rem 0.95rem;
    font-family: 'Philosopher', sans-serif;
    letter-spacing: 3px;
    font-size: 0.7rem;
}
.meal-fav {
    width: 34px; height: 34px;
    border: 1px solid var(--lux-line-strong);
    border-radius: 50%;
    background: transparent;
    color: var(--lux-gold);
    cursor: pointer;
    font-size: 0.85rem;
}
.meal-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    color: var(--lux-text);
    font-size: 1.65rem;
    line-height: 1.15;
    margin: 0 0 0.85rem;
    letter-spacing: 0.3px;
}
.meal-desc {
    color: var(--lux-text-dim);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 1.1rem;
}
.meal-stats {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    color: var(--lux-text-dim);
    font-family: 'Philosopher', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 2px;
    margin-bottom: 1.1rem;
}
.meal-stat-sep {
    width: 1px;
    height: 14px;
    background: var(--lux-line-strong);
}
.meal-foot {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.meal-pill {
    border: 1px solid var(--lux-line);
    border-radius: 4px;
    color: var(--lux-text-dim);
    padding: 0.45rem 0.9rem;
    font-family: 'Philosopher', sans-serif;
    letter-spacing: 2.5px;
    font-size: 0.68rem;
}
.meal-pill-note { color: var(--lux-text-mute); }

.meal-media {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    min-height: 220px;
    background: #111;
}
.meal-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.meal-media-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #1a1a1a, #0e0e0e);
}
.meal-go {
    position: absolute;
    right: 14px; bottom: 14px;
    width: 44px; height: 44px;
    border: 1px solid var(--lux-gold);
    border-radius: 50%;
    background: rgba(5,5,5,0.6);
    color: var(--lux-gold);
    cursor: pointer;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    backdrop-filter: blur(6px);
    transition: all .3s ease;
}
.meal-go:hover {
    background: var(--lux-gold);
    color: var(--lux-bg);
}

.day-pager {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 2rem;
}
.day-pager-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--lux-line-strong);
}
.day-pager-dot.is-active { background: var(--lux-gold); width: 22px; border-radius: 99px; }

@media (max-width: 920px) {
    .week-picker { grid-template-columns: repeat(3, 1fr); }
    .meal-card { grid-template-columns: 1fr; }
    .meal-time { flex-direction: row; justify-content: center; }
    .meal-media { min-height: 180px; }
    .day-panel { padding: 1.75rem 1.4rem; }
    .day-panel-row { flex-direction: column; align-items: flex-start; }
    .day-panel-kcal { text-align: left; }
    .day-panel-meta { flex-direction: column; align-items: stretch; }
}

/* Mobile menu */
.mobile-toggle { color: var(--lux-gold) !important; }
@media (max-width: 992px) {
    .nav-links {
        background: rgba(5, 5, 5, 0.97) !important;
        border-top: 1px solid var(--lux-line);
    }
}

/* =========================================================
   THEME MEDITERRANEEN PREMIUM - rapprochement regime/styles.css
   ========================================================= */
:root {
    color-scheme: dark;

    --midnight-deep: #030303;
    --midnight: #0b0b0a;
    --midnight-soft: #12110f;
    --midnight-card: #181612;
    --cream: #f5f0e6;
    --cream-soft: rgba(245, 240, 230, 0.78);
    --cream-mute: rgba(245, 240, 230, 0.55);
    --saffron: #cbb15f;
    --saffron-light: #eadb9a;
    --saffron-deep: #9a8034;
    --terracotta: #8f4c3f;
    --terracotta-deep: #5d302b;
    --gold: #d4bd68;
    --line: rgba(200, 168, 76, 0.24);
    --line-soft: rgba(200, 168, 76, 0.13);
    --line-strong: rgba(200, 168, 76, 0.46);
    --surface: rgba(255, 255, 255, 0.055);
    --surface-strong: rgba(255, 255, 255, 0.085);
    --shadow: rgba(0, 0, 0, 0.4);
    --shadow-soft: 0 24px 80px rgba(0, 0, 0, 0.38);
    --gradient-warm: linear-gradient(135deg, #f3e4aa, var(--gold) 52%, #a88a3b);
    --gradient-title: linear-gradient(135deg, var(--cream) 0%, #f0e5bc 46%, var(--gold) 100%);
    --gradient-divider: linear-gradient(90deg, rgba(234, 219, 154, 0), var(--saffron-light), var(--saffron), rgba(203, 177, 95, 0));
    --radius: 24px;
    --radius-sm: 14px;
    --radius-lg: 34px;

    --lux-bg: var(--midnight-deep);
    --lux-bg-soft: var(--midnight-soft);
    --lux-card: var(--surface);
    --lux-card-hover: var(--surface-strong);
    --lux-gold: var(--gold);
    --lux-gold-soft: var(--saffron);
    --lux-gold-light: var(--saffron-light);
    --lux-line: var(--line-soft);
    --lux-line-strong: var(--line-strong);
    --lux-text: var(--cream);
    --lux-text-dim: var(--cream-soft);
    --lux-text-mute: var(--cream-mute);
}

body {
    background:
        radial-gradient(circle at 18% 0%, rgba(212, 189, 104, 0.08), transparent 34%),
        radial-gradient(circle at 88% 10%, rgba(245, 240, 230, 0.04), transparent 32%),
        linear-gradient(180deg, var(--midnight-deep) 0%, var(--midnight) 42%, #060605 100%) !important;
    color: var(--cream);
    font-size: 17px;
    line-height: 1.7;
    text-wrap: pretty;
    -webkit-font-smoothing: antialiased;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: none;
    background:
        radial-gradient(ellipse 60% 50% at 18% -10%, rgba(212, 189, 104, 0.12), transparent 60%),
        radial-gradient(ellipse 50% 45% at 100% 100%, rgba(245, 240, 230, 0.07), transparent 60%);
}

.zellige-pattern {
    display: none !important;
}

main,
section,
footer,
.hero,
.semaine-shell,
.recipe-book-shell,
.article-page,
.article-page-shell {
    position: relative;
    z-index: 2;
}

::selection {
    background: var(--saffron);
    color: var(--midnight);
}

.nav,
.nav.scrolled {
    background: linear-gradient(180deg, rgba(7, 7, 6, 0.92), rgba(7, 7, 6, 0.74)) !important;
    border-bottom: 1px solid rgba(245, 240, 230, 0.1);
    box-shadow: 0 4px 30px var(--shadow) !important;
    backdrop-filter: blur(20px);
    gap: clamp(16px, 2vw, 28px);
    padding: 1rem clamp(18px, 3vw, 46px) !important;
}

.logo {
    color: var(--cream) !important;
    font-family: 'Amiri', Georgia, serif !important;
    font-weight: 400;
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: clamp(1.45rem, 2vw, 1.75rem) !important;
}

.logo-icon {
    flex: 0 0 auto;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50%;
    padding: 5px;
    background: rgba(255, 255, 255, 0.045);
    box-shadow: inset 0 0 0 1px rgba(212, 189, 104, 0.46);
}

.logo-icon path,
.logo-icon circle {
    stroke: var(--saffron-light);
}

.logo-icon circle {
    fill: var(--saffron-light);
}

.nav-links a {
    color: rgba(245, 240, 230, 0.76) !important;
    letter-spacing: 2.5px;
    white-space: nowrap;
    font-size: clamp(0.68rem, 0.74vw, 0.82rem) !important;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--saffron-light) !important;
}

.nav-links a::after {
    background: var(--gradient-warm) !important;
    height: 2px !important;
}

.nav-right {
    min-width: 0;
    gap: clamp(12px, 1.6vw, 22px) !important;
}

.nav-links {
    flex-wrap: nowrap;
    gap: clamp(12px, 1.7vw, 26px) !important;
}

.nav-actions {
    flex: 0 0 auto;
    gap: 0.7rem !important;
}

.cart-toggle {
    min-height: 40px;
    padding: 0.68rem 0.88rem !important;
}

.nav-cta,
.cart-toggle,
.btn-primary,
.btn-secondary,
.hero-cta-primary,
.menu-item-btn,
.cart-action,
.form-submit,
.order-summary-edit,
.book-control,
.recipe-close,
.article-modal-close,
.article-back-link,
.day-panel-cta,
.meal-go {
    border-radius: 999px !important;
}

.nav-cta,
.btn-primary,
.hero-cta-primary,
.cart-action-primary,
.form-submit {
    background: var(--gradient-warm) !important;
    border: 1px solid rgba(212, 189, 104, 0.56) !important;
    color: var(--midnight) !important;
    box-shadow: 0 14px 36px rgba(200, 168, 76, 0.22);
}

.nav-cta:hover,
.btn-primary:hover,
.hero-cta-primary:hover,
.cart-action-primary:hover:not(:disabled),
.form-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 48px rgba(200, 168, 76, 0.34) !important;
}

.btn-secondary,
.cart-toggle,
.menu-item-btn,
.cart-action-secondary,
.order-summary-edit,
.book-control,
.recipe-close,
.article-modal-close,
.article-back-link,
.day-panel-cta {
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(245, 240, 230, 0.14) !important;
    color: var(--saffron-light) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(14px);
}

.btn-secondary:hover,
.cart-toggle:hover,
.menu-item-btn:hover,
.cart-action-secondary:hover:not(:disabled),
.order-summary-edit:hover,
.book-control:hover:not(:disabled),
.recipe-close:hover,
.article-modal-close:hover,
.article-back-link:hover,
.day-panel-cta:hover {
    background: rgba(212, 189, 104, 0.14) !important;
    border-color: rgba(212, 189, 104, 0.62) !important;
    color: var(--cream) !important;
}

.cart-toggle-count,
.menu-item-btn.is-added {
    background: var(--gradient-warm) !important;
    color: var(--midnight) !important;
}

.hero-bg {
    background: linear-gradient(180deg, var(--midnight-deep), var(--midnight)) !important;
}

.hero-image {
    opacity: 0.62 !important;
    filter: saturate(108%) contrast(106%) brightness(0.72) !important;
}

.hero-overlay {
    background:
        radial-gradient(ellipse at 50% 36%, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.62) 64%, rgba(0, 0, 0, 0.94) 100%),
        linear-gradient(180deg, rgba(3, 3, 3, 0.28) 0%, rgba(3, 3, 3, 0.48) 48%, rgba(3, 3, 3, 0.95) 100%) !important;
}

.hero-content {
    max-width: 960px;
    padding: clamp(2rem, 5vw, 4rem);
}

.hero-subtitle,
.section-subtitle,
.semaine-kicker,
.cart-kicker,
.order-summary-kicker,
.article-modal-kicker,
.book-cover-kicker,
.recipe-panel-label,
.book-article-kicker,
.day-panel-eyebrow,
.day-panel-tags,
.meal-slot {
    color: var(--saffron-light) !important;
}

.hero-title,
.section-title,
.semaine-title,
.article-modal-title,
.book-cover-title {
    background: var(--gradient-title) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    letter-spacing: 0 !important;
}

.hero-arabic {
    color: var(--saffron-light) !important;
}

.hero-description,
.about-content p,
.menu-item-description,
.info-article-excerpt,
.ambiance-card p,
.testimonial-info p,
.reservation-info p,
.footer-brand p,
.article-section p,
.article-support-card p,
.article-note-card p,
.article-modal-standfirst,
.article-related-content p,
.recipe-panel p,
.recipe-notes p,
.book-article-intro,
.book-article-section p,
.book-article-note span,
.day-panel-tag,
.meal-desc,
.meal-stats,
.meal-pill {
    color: var(--cream-soft) !important;
}

.section-divider,
.semaine-divider {
    width: 132px !important;
    height: 2px !important;
    background: var(--gradient-divider) !important;
}

.about,
.menu,
.gallery,
.ambiance,
.infos,
.testimonials,
.reservation,
.section--manifesto,
.section--health,
.section--week,
.section--recipes,
.section--market,
.page-semaine {
    background: transparent !important;
}

.menu-item,
.ambiance-card,
.info-article,
.gallery-item,
.article-related-card,
.article-highlights-card,
.feature-item,
.reservation-form,
.order-summary,
.cart-empty,
.cart-item,
.recipe-sheet,
.book-cover-page,
.article-modal-dialog,
.article-page-content,
.article-page-empty,
.article-section,
.article-support-card,
.article-note-card,
.day-card,
.day-panel,
.meal-card {
    background:
        radial-gradient(circle at 18% 0%, rgba(212, 189, 104, 0.08), transparent 38%),
        linear-gradient(145deg, rgba(24, 22, 18, 0.96), rgba(10, 10, 9, 0.98)) !important;
    border: 1px solid rgba(245, 240, 230, 0.11) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-soft) !important;
}

.menu-item,
.info-article,
.gallery-item,
.ambiance-card,
.article-related-card,
.meal-card {
    overflow: hidden;
}

.menu-item:hover,
.ambiance-card:hover,
.info-article:hover,
.article-related-card:hover,
.day-card:hover,
.meal-card:hover {
    border-color: rgba(212, 189, 104, 0.48) !important;
    box-shadow: 0 24px 74px rgba(0, 0, 0, 0.38) !important;
    transform: translateY(-6px);
}

.menu-item-image,
.info-article-image,
.gallery-item,
.about-image img,
.article-modal-media,
.article-support-card img,
.meal-media,
.book-recipe-image {
    border-radius: var(--radius-sm) !important;
}

.menu-item-title,
.info-article-title,
.ambiance-card h3,
.about-content h3,
.reservation-info h3,
.article-section h2,
.article-section h4,
.article-support-card h2,
.article-note-card h2,
.meal-title,
.day-panel-title,
.recipe-panel h3,
.recipe-panel h4 {
    color: var(--cream) !important;
}

.menu-item-price,
.info-article-link,
.article-page-brand,
.footer-column h4,
.contact-text h4,
.testimonial-info h4,
.article-highlight-value,
.day-panel-num,
.meal-icon,
.meal-hour,
.meal-go {
    color: var(--saffron-light) !important;
}

.menu-item-badge,
.info-article-badge,
.article-modal-badge,
.book-article-badge,
.meal-pill {
    background: rgba(203, 177, 95, 0.12) !important;
    border: 1px solid rgba(212, 189, 104, 0.34) !important;
    border-radius: 8px !important;
    color: var(--saffron-light) !important;
}

.menu-category {
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid rgba(245, 240, 230, 0.12) !important;
    border-radius: 999px !important;
    color: rgba(245, 240, 230, 0.72) !important;
}

.menu-category:hover,
.menu-category.active {
    background: rgba(212, 189, 104, 0.14) !important;
    border-color: rgba(212, 189, 104, 0.72) !important;
    color: var(--saffron-light) !important;
    box-shadow: 0 0 0 1px rgba(212, 189, 104, 0.18), 0 18px 46px rgba(0, 0, 0, 0.28) !important;
}

.form-group input,
.form-group select,
.form-group textarea {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(245, 240, 230, 0.12) !important;
    border-radius: 12px !important;
    color: var(--cream) !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--saffron-light) !important;
    box-shadow: 0 0 0 3px rgba(212, 189, 104, 0.14) !important;
}

.recipe-book {
    border-color: rgba(245, 240, 230, 0.12) !important;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 18% 0%, rgba(245, 240, 230, 0.08), transparent 36%),
        radial-gradient(circle at 86% 6%, rgba(212, 189, 104, 0.08), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.024) 58%, rgba(0, 0, 0, 0.18)) !important;
    box-shadow: var(--shadow-soft) !important;
}

.book-page {
    border-radius: var(--radius-sm) !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(245, 240, 230, 0.08), transparent 32%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.025)) !important;
    color: var(--cream) !important;
}

.week-picker {
    display: flex !important;
    gap: clamp(14px, 2vw, 22px);
    overflow-x: auto;
    padding: 0.25rem 0 1.4rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.week-picker::-webkit-scrollbar {
    display: none;
}

.day-card {
    flex: 0 0 clamp(132px, 13vw, 178px);
    min-height: clamp(172px, 18vw, 220px);
    scroll-snap-align: center;
    isolation: isolate;
}

.day-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    opacity: 0;
    background:
        radial-gradient(circle at 50% 47%, rgba(212, 189, 104, 0.22), transparent 32%),
        linear-gradient(180deg, rgba(212, 189, 104, 0.16), rgba(212, 189, 104, 0.04));
    transition: opacity 400ms ease;
}

.day-card.is-active {
    border-color: rgba(212, 189, 104, 0.84) !important;
    color: var(--cream);
}

.day-card.is-active::before {
    opacity: 1;
}

.day-number {
    display: grid;
    place-items: center;
    width: clamp(58px, 6vw, 76px);
    height: clamp(58px, 6vw, 76px);
    border-radius: 50%;
}

.day-card.is-active .day-number {
    border: 1px solid rgba(212, 189, 104, 0.86);
    box-shadow: inset 0 0 18px rgba(212, 189, 104, 0.13), 0 0 28px rgba(212, 189, 104, 0.12);
}

.day-card.is-active .day-number::before {
    display: none;
}

.day-panel {
    border-radius: var(--radius-lg) !important;
}

.meal-card {
    grid-template-columns: minmax(0, 1fr) 280px !important;
    grid-template-areas:
        "time image"
        "body image";
}

.meal-time {
    grid-area: time;
    flex-direction: row !important;
    justify-content: flex-start !important;
}

.meal-body {
    grid-area: body;
}

.meal-media {
    grid-area: image;
    min-height: 220px;
}

@media (max-width: 920px) {
    .week-picker {
        display: flex !important;
        margin-inline: -1.15rem;
        padding-inline: 1.15rem;
    }

    .day-card {
        flex-basis: 126px;
        min-height: 166px;
    }

    .meal-card {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "image"
            "time"
            "body";
    }
}

@media (max-width: 1320px) {
    .nav-links {
        gap: clamp(10px, 1.25vw, 18px) !important;
    }

    .nav-links a {
        font-size: 0.66rem !important;
        letter-spacing: 2px;
    }

    .cart-toggle-total {
        display: none;
    }

    .cart-toggle {
        padding-inline: 0.75rem !important;
    }
}

@media (max-width: 1160px) {
    .nav-cta {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .nav {
        padding-inline: 1rem;
    }

    .hero-content {
        padding-inline: 1rem;
    }

    .menu-item,
    .info-article,
    .ambiance-card,
    .reservation-form,
    .day-panel {
        border-radius: 22px !important;
    }
}