/* ═══════════════════════════════════════════════════════
   SHARED STYLES — Le Restaurant Démo
   Used by: index.html, carte.html, evenements.html, contact.html
═══════════════════════════════════════════════════════ */

/* ── Theme Variables ── */
:root {
    --color-primary: #c9a84c;
    --color-primary-light: #e8c97a;
    --color-primary-alpha: rgba(201, 168, 76, 0.1);
    --color-primary-alpha-strong: rgba(201, 168, 76, 0.5);
}

/* ── Preloader ── */
body.loading {
    overflow: hidden !important;
    height: 100vh !important;
}

/* ── Grain overlay ── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.028;
}

/* ── Scroll reveals (GSAP controlled) ── */
.reveal { opacity: 0; transform: translateY(40px); }
.reveal-left { opacity: 0; transform: translateX(-40px); }

/* ── Transition delays ── */
.d1 { transition-delay: 100ms; }
.d2 { transition-delay: 200ms; }
.d3 { transition-delay: 300ms; }
.d4 { transition-delay: 400ms; }

/* ── Custom Cursor ── */
@media (pointer: fine) {
    body, a, button, select, input, .cursor-pointer { cursor: none !important; }
}

.custom-cursor {
    position: fixed; top: 0; left: 0;
    width: 8px; height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    mix-blend-mode: difference;
    will-change: transform;
}

.custom-cursor-follower {
    position: fixed; top: 0; left: 0;
    width: 32px; height: 32px;
    border: 1px solid var(--color-primary-alpha-strong);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.3s, border-color 0.3s;
    will-change: transform;
    transform-origin: center;
}

/* ── Glass morphism ── */
.glass {
    background: rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* ── Gold CTA shadow ── */
.shadow-gold { box-shadow: 0 8px 28px -8px rgba(201, 168, 76, 0.55); }

/* ── Decorative line ── */
.deco-line { display: flex; align-items: center; gap: 12px; }
.deco-line::before, .deco-line::after {
    content: ''; flex: 1; height: 1px;
    background: currentColor; opacity: 0.25;
}

/* ── Hero video ── */
.hero-bg { will-change: transform; }
.hero-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1.08);
    will-change: transform;
}
.hero-video-wrap { position: absolute; inset: 0; overflow: hidden; }

/* ── Safe area ── */
body { padding-bottom: env(safe-area-inset-bottom); }
.no-scroll { overflow: hidden; }

/* ── Custom scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #0d2018; }
::-webkit-scrollbar-thumb { background: #c9a84c; border-radius: 2px; }

/* ── Gold underline on nav ── */
.nav-link { position: relative; }
.nav-link::after {
    content: ''; position: absolute;
    bottom: -4px; left: 0; width: 0; height: 1px;
    background: var(--color-primary);
    transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }
.nav-link.active { color: var(--color-primary); }

/* ── Feature card hover ── */
.feature-card { transition: background 0.4s ease, transform 0.4s ease; }
.feature-card:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    transform: translateY(-4px);
}

/* ── Typographic indent ── */
.font-body.leading-relaxed,
.font-body.leading-\[1\.8\] { text-indent: 1.5em; }

/* ── Event icon dot ── */
.event-dot {
    width: 8px; height: 8px; min-width: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* ── Menu card hover ── */
.menu-card { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease; }
.menu-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.18);
}

/* ── Testimonial quote mark ── */
.quote-mark {
    position: absolute;
    top: -12px; left: 20px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 5rem; line-height: 1;
    color: var(--color-primary); opacity: 0.15;
    pointer-events: none;
}

/* ── Ardoise / Chalkboard ── */
.ardoise {
    background: #111;
    background-image: repeating-linear-gradient(
        0deg, transparent, transparent 27px,
        rgba(255,255,255,0.04) 28px
    );
    box-shadow: inset 0 0 60px rgba(0,0,0,0.7), inset 2px 0 0 rgba(255,255,255,0.04);
}

/* ── Page transition ── */
.page-transition {
    animation: pageFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* Force light rendering for white sections */
.bg-cream, .bg-earth, .bg-sand { color-scheme: light; }