<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Le 8 - Fast-food Tacos & Burgers à La Flèche</title>
    <meta name="description" content="Le 8 - Le fast-food le plus chaud de La Flèche. Tacos, Smash, Naan, Bowls. 8 Rue du Dr Lhoste, La Flèche. Commandez maintenant !">
    
    <!-- Open Graph -->
    <meta property="og:title" content="Le 8 - Fast-food Tacos & Burgers à La Flèche">
    <meta property="og:description" content="Le fast-food le plus chaud de La Flèche. Tacos, Smash, Naan, Bowls. 8 Rue du Dr Lhoste, La Flèche.">
    <meta property="og:image" content="https://i.imgur.com/FYAOErs.png">
    <meta property="og:url" content="https://le8snacking.fr">
    <meta property="og:type" content="website">
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Le 8 - Fast-food Tacos & Burgers à La Flèche">
    <meta name="twitter:description" content="Le fast-food le plus chaud de La Flèche. Tacos, Smash, Naan, Bowls.">
    <meta name="twitter:image" content="https://i.imgur.com/FYAOErs.png">
    
    <!-- Preconnect -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- JSON-LD LocalBusiness -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Restaurant",
        "name": "Le 8",
        "description": "Fast-food spécialisé en tacos, burgers, smash et bowls",
        "url": "https://le8snacking.fr",
        "telephone": "06 51 00 61 93",
        "address": {
            "@type": "PostalAddress",
            "streetAddress": "8 Rue du Dr Lhoste",
            "addressLocality": "La Flèche",
            "postalCode": "72200",
            "addressCountry": "FR"
        },
        "openingHours": [
            "Mo 11:00-14:00,18:00-22:00",
            "Tu 11:00-14:00,18:00-22:00",
            "We 11:00-14:00,18:00-22:00",
            "Th 11:00-14:00,18:00-22:00",
            "Fr 11:00-14:00,18:00-22:00",
            "Sa 18:00-22:00",
            "Su 18:00-22:00"
        ],
        "servesCuisine": ["Fast-food", "Tacos", "Burgers", "Mexican"],
        "priceRange": "€€"
    }
    </script>
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --primary-orange: #093a20;
            --white: #ffffff;
            --black: #000000;
            --gray-light: #f8f9fa;
            --gray-dark: #333333;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            color: var(--black);
            overflow-x: hidden;
        }
        
        /* Header */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: transparent;
            transition: all 0.5s ease-in-out;
            padding: 1rem 0;
        }
        
        .header.scrolled {
            background: rgba(0, 0, 0, 0.9);
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
        }
        
        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            height: 70px;
            transition: all 0.3s ease;
        }
        
        .nav-menu {
            display: flex;
            align-items: center;
            gap: 2rem;
        }
        
        .nav-links {
            display: flex;
            gap: 2rem;
            list-style: none;
        }
        
        .nav-links a {
            color: var(--white);
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .nav-links a:hover {
            color: var(--primary-orange);
        }
        
        .cta-button {
            background: var(--primary-orange);
            color: var(--white);
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 25px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .cta-button:hover {
            background: #072a15;
            transform: translateY(-2px);
        }
        
        /* Mobile Menu */
        .mobile-menu-toggle {
            display: none;
            background: none;
            border: none;
            color: var(--white);
            font-size: 1.5rem;
            cursor: pointer;
        }
        
        .mobile-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.95);
            backdrop-filter: blur(10px);
            padding: 2rem;
            flex-direction: column;
            gap: 1rem;
            z-index: 1000;
        }
        
        .mobile-menu.active {
            display: flex;
        }
        
        .mobile-menu a {
            color: var(--white);
            text-decoration: none;
            font-weight: 500;
            padding: 0.5rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .mobile-menu .cta-button {
            background: var(--primary-orange);
            color: var(--white);
            padding: 1rem 2rem;
            border-radius: 25px;
            text-align: center;
            margin-top: 1rem;
            border: none;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .mobile-menu .cta-button:hover {
            background: #0a2d15;
            transform: translateY(-2px);
        }
        
        .mobile-social-links {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
            justify-content: center;
        }
        
        .mobile-menu .social-link {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--white);
            text-decoration: none;
            font-weight: 500;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }
        
        .mobile-menu .social-link:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }
        
        .mobile-menu .social-icon {
            width: 20px;
            height: 20px;
        }
        
        /* Hero Section */
        .hero {
            position: relative;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        .hero-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -2;
        }
        
        .hero-video-desktop {
            display: block;
        }
        
        .hero-video-mobile {
            display: none;
        }
        
        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: transparent;
            z-index: -1;
        }
        
        /* Hero Content - Mobile Only */
        .hero-content-mobile {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 10;
            color: var(--white);
        }
        
        .hero-title {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 1rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        
        .hero-subtitle {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }
        
        .hero-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .hero-button {
            background: var(--primary-orange);
            color: var(--white);
            padding: 1rem 2rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(9, 58, 32, 0.3);
        }
        
        .hero-button:hover {
            background: #072a15;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(9, 58, 32, 0.4);
        }
        
        @media (max-width: 768px) {
            .hero-content-mobile {
                display: block;
            }
        }
        
        .hero-content {
            text-align: center;
            color: var(--white);
            z-index: 5;
            max-width: 800px;
            padding: 0 2rem;
        }
        
        .hero-title {
            font-size: 4rem;
            font-weight: 700;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease 0.5s forwards;
        }
        
        .hero-subtitle {
            font-size: 1.5rem;
            margin-bottom: 2rem;
            opacity: 0;
            animation: fadeInUp 1s ease 0.7s forwards;
        }
        
        .hero-cta {
            background: var(--primary-orange);
            color: var(--white);
            padding: 1rem 2rem;
            border: none;
            border-radius: 30px;
            font-size: 1.2rem;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            cursor: pointer;
            opacity: 0;
            animation: fadeInUp 1s ease 0.9s forwards;
            display: inline-block;
        }
        
        .hero-cta:hover {
            background: #072a15;
            transform: translateY(-3px) scale(1.05);
        }
        
        /* Scroll Down Button */
        .scroll-down {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            color: var(--white);
            font-size: 1.5rem;
            cursor: pointer;
            z-index: 10;
            opacity: 0;
            animation: fadeInUp 1s ease 1.1s forwards;
            transition: all 0.3s ease;
        }
        
        .scroll-down:hover {
            color: var(--primary-orange);
            transform: translateX(-50%) translateY(-5px);
        }
        
        .scroll-down::after {
            content: '↓';
            display: block;
            font-size: 2rem;
            margin-top: 0.5rem;
            animation: bounce 2s infinite;
        }
        
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-10px);
            }
            60% {
                transform: translateY(-5px);
            }
        }
        
        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Sections */
        .section {
            padding: 5rem 2rem;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .section-title {
            font-size: 3rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 3rem;
            color: var(--black);
        }
        
        /* Menu Section Styles */
        #specialties {
            background: linear-gradient(135deg, #ffffff 0%, #093a20 100%);
        }
        
        .menu-description {
            text-align: center;
            font-size: 1.2rem;
            color: var(--black);
            font-weight: bold;
            margin-bottom: 3rem;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.6;
        }
        
        .menu-categories {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }
        
        .menu-category {
            background: var(--white);
            border-radius: 15px;
            padding: 0.8rem;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            opacity: 0;
            transform: translateY(30px);
        }
        
        .menu-category.animate {
            opacity: 1;
            transform: translateY(0);
        }
        
        .menu-category:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }
        
        .category-icon {
            width: 80px;
            height: 80px;
            background: var(--primary-orange);
            border-radius: 50%;
            margin: 0 auto 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            color: var(--white);
        }
        
        .menu-category h3 {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--black);
            margin-bottom: 0;
        }
        
        .menu-category p {
            color: var(--gray-dark);
            line-height: 1.6;
            font-size: 1rem;
        }
        
        .menu-cta {
            text-align: center;
            margin-top: 3rem;
        }
        
        .menu-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            margin-top: 2rem;
            flex-wrap: wrap;
        }
        
        .menu-button {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--primary-orange);
            color: white;
            padding: 1rem 2rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1rem;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .menu-button:hover {
            background: #0a2d15;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        }
        
        .button-icon {
            font-size: 1.2rem;
        }
        
        .menu-note {
            margin-top: 1rem;
            color: var(--gray-dark);
            font-size: 0.9rem;
            font-style: italic;
        }
        
        /* Restaurant Section */
        .restaurant-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            margin-top: 3rem;
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }
        
        .service-item {
            background: var(--primary-orange);
            color: var(--white);
            padding: 0.75rem;
            border-radius: 10px;
            text-align: center;
            font-weight: 500;
        }
        
        .restaurant-contact h3 {
            color: var(--primary-orange);
            margin-bottom: 2rem;
        }
        
        .restaurant-map {
            margin-top: 2rem;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            border-radius: 15px;
            overflow: hidden;
        }
        
        /* ====================== */
        /* Section Ô L'INFO */
        /* ====================== */
        .saviezvous-section {
            padding: 60px 20px;
            width: 100vw;
            position: relative;
            left: 50%;
            right: 50%;
            margin-left: -50vw;
            margin-right: -50vw;
            background: linear-gradient(135deg, rgba(9, 58, 32, 0.8), rgba(255, 255, 255, 0.8)), url('https://i.imgur.com/AXTEbqM.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .saviezvous-section h2 {
            text-align: center;
            font-size: 2.2rem;
            margin-bottom: 40px;
            font-weight: bold;
        }

        .saviezvous-container {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            align-items: center;
            justify-content: center;
            max-width: 1200px;
            margin: 0 auto;
        }

        .saviezvous-text {
            flex: 2 1 600px;
            background: linear-gradient(135deg, #f0f8f0, #e8f5e8);
            padding: 30px 20px;
            border-radius: 16px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            text-align: center;
            min-height: 400px;
        }

        .saviezvous-text h3 {
            color: #093a20;
            font-size: 1.8rem;
            margin-bottom: 20px;
            transition: opacity 0.6s ease-in-out;
            font-weight: bold;
        }

        .saviezvous-text p {
            font-size: 1.4rem;
            color: #333;
            line-height: 1.6;
            transition: opacity 0.6s ease-in-out;
            max-width: 95%;
            margin: 0 auto;
        }

        .saviezvous-video {
            flex: 1 1 250px;
        }

        .saviezvous-video video {
            width: 100%;
            border-radius: 16px;
            display: block;
        }

    /* Responsive mobile */
    @media (max-width: 768px) {
        .saviezvous-section {
            padding-top: 0 !important;
            margin-top: 0 !important;
            background: linear-gradient(135deg, rgba(9, 58, 32, 0.8), rgba(255, 255, 255, 0.8)), url('https://i.imgur.com/AXTEbqM.png') !important;
            background-size: cover !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
        }
        
        .saviezvous-section h2 {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }
        
        .saviezvous-container {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }
        
        /* Supprimer ABSOLUMENT tout espace de toutes les sections image mobile */
        .mobile-image-section {
            margin: 0 !important;
            padding: 0 !important;
            margin-bottom: 0 !important;
            padding-bottom: 0 !important;
        }
        
        .mobile-image-section .container {
            margin: 0 !important;
            padding: 0 !important;
            margin-bottom: 0 !important;
            padding-bottom: 0 !important;
        }
        
        .mobile-image-section img {
            margin: 0 !important;
            padding: 0 !important;
            margin-bottom: 0 !important;
            padding-bottom: 0 !important;
            display: block !important;
            line-height: 0 !important;
        }
        
        .mobile-image-section .container {
            line-height: 0 !important;
            font-size: 0 !important;
        }
        
        /* Supprimer l'espace entre la section menu mobile/image et L'Info 8 */
        .mobile-menu-section ~ .saviezvous-section,
        .mobile-image-section ~ .saviezvous-section {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }
        
        /* Cibler spécifiquement la section image avant L'Info 8 - toutes les combinaisons possibles */
        section.mobile-image-section + section#saviezvous,
        section.mobile-image-section + div + section#saviezvous,
        section.mobile-image-section + section.section + section#saviezvous,
        section.mobile-image-section + section.image-section-desktop + section#saviezvous {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }
        
        /* Améliorer l'espacement de la section menu mobile */
        .mobile-menu-section {
            padding-top: 50px !important;
            padding-bottom: 50px !important;
        }
        
        /* S'assurer que le popup modal n'ajoute pas d'espace */
        #popupModal {
            margin: 0 !important;
            padding: 0 !important;
        }
        
        .saviezvous-container {
            flex-direction: column;
        }
        
        .saviezvous-text {
            flex: none;
            width: 100%;
            padding: 25px 15px;
            min-height: 300px;
        }
        
        .saviezvous-text h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
        }
        
        .saviezvous-text p {
            font-size: 1.2rem;
            line-height: 1.5;
            max-width: 100%;
        }
    }

        /* Contact Section */
        #contact {
            background: var(--black);
        }
        
        #contact .section-title {
            color: var(--white);
        }
        
        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            margin-top: 3rem;
        }
        
        .contact-info {
            background: var(--gray-light);
            padding: 2rem;
            border-radius: 20px;
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .contact-icon {
            width: 40px;
            height: 40px;
            background: var(--primary-orange);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
            color: var(--white);
        }
        
        .hours-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
        }
        
        .hours-table th,
        .hours-table td {
            padding: 0.5rem;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        
        .hours-table th {
            background: var(--primary-orange);
            color: var(--white);
        }
        
        /* Gallery Section */
        .gallery-section {
            padding: 2rem 2rem;
            background: var(--white);
        }
        
        .gallery-title {
            font-size: 2rem;
            font-weight: 400;
            text-align: center;
            margin-bottom: 1.5rem;
            color: var(--black);
            text-transform: lowercase;
            letter-spacing: 2px;
        }
        
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .gallery-item {
            width: 100%;
            overflow: hidden;
            border-radius: 5px;
        }
        
        .gallery-image {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 5px;
            transition: transform 0.3s ease;
        }
        
        .gallery-image:hover {
            transform: scale(1.05);
        }
        
        @media (max-width: 768px) {
            .gallery-section {
                padding: 1.5rem 1rem;
            }
            
            .gallery-title {
                font-size: 1.5rem;
                margin-bottom: 1rem;
            }
            
            .gallery-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
            }
        }
        
        /* Footer */
        .footer {
            background: var(--white);
            color: var(--black);
            padding: 0;
        }
        
        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 2rem;
            align-items: center;
            padding: 3rem 2rem;
        }
        
        .footer-section h3 {
            margin-bottom: 1rem;
            color: var(--primary-orange);
        }
        
        .footer-section p {
            color: var(--black);
        }
        
        .footer-section ul {
            list-style: none;
        }
        
        .footer-section ul li {
            margin-bottom: 0.5rem;
        }
        
        .footer-section ul li a {
            color: var(--black);
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .footer-section ul li a:hover {
            color: var(--primary-orange);
        }
        
        .instagram-link {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--black);
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .instagram-link:hover {
            color: var(--primary-orange);
        }
        
        .instagram-logo {
            width: 24px;
            height: 24px;
        }
        
        .facebook-link {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--black);
            text-decoration: none;
            transition: color 0.3s ease;
            margin-top: 0.5rem;
        }
        
        .facebook-link:hover {
            color: var(--primary-orange);
        }
        
        .facebook-logo {
            width: 24px;
            height: 24px;
        }
        
        .le8-logo {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border: 2px solid #093a20;
            border-radius: 4px;
            background: white;
            margin-right: 8px;
            font-family: 'Inter', sans-serif;
        }
        
        .le8-logo .le8-text {
            font-size: 7px;
            font-weight: bold;
            color: #093a20;
            line-height: 1;
            margin-right: 1px;
        }
        
        .le8-logo .le8-number {
            font-size: 9px;
            font-weight: bold;
            color: #093a20;
            line-height: 1;
        }
        
        .corner-dot {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #093a20;
            border-radius: 50%;
        }
        
        .corner-dot.top-left {
            top: -3px;
            left: -3px;
        }
        
        .corner-dot.top-right {
            top: -3px;
            right: -3px;
        }
        
        .corner-dot.bottom-left {
            bottom: -3px;
            left: -3px;
        }
        
        .corner-dot.bottom-right {
            bottom: -3px;
            right: -3px;
        }
        
        .imma-agency {
            text-align: center;
        }
        
        .imma-logo {
            height: 70px;
            margin-bottom: 0.5rem;
        }
        
        .footer-bottom {
            text-align: center;
            margin-top: 0;
            padding: 2rem;
            background: var(--white);
            color: var(--black);
        }
        
        /* Mobile Sticky CTA */
        .mobile-cta {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--primary-orange);
            padding: 1rem;
            display: none;
            z-index: 1000;
        }
        
        .mobile-cta-buttons {
            display: flex;
            gap: 1rem;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .mobile-cta-button {
            flex: 1;
            background: var(--white);
            color: var(--primary-orange);
            padding: 1rem;
            border: none;
            border-radius: 10px;
            font-weight: 600;
            text-decoration: none;
            text-align: center;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .social-icon {
            width: 32px;
            height: 32px;
        }
        
        .mobile-cta-button.social-button {
            flex: 0.7;
            padding: 0.8rem;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }
            
            .mobile-menu-toggle {
                display: block;
            }
            
            .hero-title {
                font-size: 2.5rem;
            }
            
            .hero-subtitle {
                font-size: 1.2rem;
            }
            
            .hero-video-desktop {
                display: none;
            }
            
            .menu-categories {
                grid-template-columns: repeat(2, 1fr);
                gap: 0.5rem;
            }
            
            .menu-category {
                padding: 0.5rem;
            }
            
            .menu-category h3 {
                font-size: 0.9rem;
                margin-bottom: 0;
            }
            
            .menu-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .menu-button {
                width: 100%;
                max-width: 300px;
                justify-content: center;
            }
            
            .hero-video-mobile {
                display: block;
            }
            
            .section-title {
                font-size: 2rem;
            }
            
            .contact-grid {
                grid-template-columns: 1fr;
            }
            
            .footer-content {
                grid-template-columns: 1fr;
                text-align: center;
            }
            
            .mobile-cta {
                display: block;
            }
            
            .header-content {
                padding: 0 1rem;
            }
            
            .cta-button {
                padding: 0.5rem 1rem;
                font-size: 0.9rem;
            }
            
            .restaurant-grid {
                grid-template-columns: 1fr;
            }
            
            .services-grid {
                grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            }
        }
        
        @media (max-width: 480px) {
            .hero-title {
                font-size: 2rem;
            }
            
            .section {
                padding: 3rem 1rem;
            }
            
            .menu-categories {
                grid-template-columns: 1fr;
            }
        }

        /* Image Section - Desktop Only */
        .image-section-desktop {
            display: block;
            padding: 2rem 0;
            background: #ffffff;
        }

        .slider {
            position: relative;
            width: 100%;
            max-width: 1400px;
            aspect-ratio: 16/9;
            margin: 0 auto;
            overflow: hidden;
            border-radius: 0;
            background: #ffffff;
        }

        .slide {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: translateX(100%);
            transition: transform 700ms ease-in-out;
        }

        .slide--first { 
            transform: translateX(0); 
        }
        
        .slide--second { 
            transform: translateX(100%); 
        }

        .slider.show-second .slide--first { 
            transform: translateX(-100%); 
        }
        
        .slider.show-second .slide--second { 
            transform: translateX(0); 
        }

        .slider:not(.show-second) .slide--first { 
            transform: translateX(0); 
        }
        
        .slider:not(.show-second) .slide--second { 
            transform: translateX(100%); 
        }

        /* Mobile Image Section */
        .mobile-image-section {
            display: none;
            padding: 0;
            margin: 0;
            background: #093a20;
        }

        .mobile-promo-image {
            width: 100%;
            height: auto;
            border-radius: 0;
            box-shadow: none;
            position: relative;
        }

        .mobile-image-section {
            position: relative;
        }

        /* Bouton Uber Eats sur l'image mobile */
        .mobile-uber-button {
            position: absolute;
            bottom: 170px;
            left: 78%;
            transform: translateX(-50%);
            background: #00a650;
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            text-decoration: none;
            font-size: 12px;
            font-weight: bold;
            text-align: center;
            white-space: nowrap;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            z-index: 10;
        }

        .mobile-uber-button:hover {
            background: #008f47;
            transform: translateX(-50%) scale(1.05);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        }
        
        .mobile-commander-button-on-image {
            position: absolute;
            top: 63%;
            left: 51%;
            transform: translate(-50%, -50%);
            background: #ffffff;
            color: #093a20;
            padding: 15px 35px;
            border-radius: 30px;
            text-decoration: none;
            font-size: 1.1rem;
            font-weight: 600;
            text-align: center;
            white-space: nowrap;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            z-index: 10;
        }
        
        .mobile-commander-button-on-image:hover {
            transform: translate(-50%, -50%) scale(1.05);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        }

        /* Mobile Menu Section */
        .mobile-menu-section {
            display: none;
            background: linear-gradient(180deg, #ffffff 0%, #ffffff 20%, #093a20 100%);
            padding: 50px 20px;
        }
        
        .mobile-menu-section .container {
            max-width: 100%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 0 15px;
        }

        .mobile-menu-title {
            color: #093a20;
            text-align: center;
            font-size: 2rem;
            margin-bottom: 20px;
            margin-top: 0;
            font-weight: bold;
            width: 100%;
        }
        
        .mobile-menu-description {
            color: var(--black);
            font-weight: bold;
            text-align: center;
            font-size: 1rem;
            line-height: 1.6;
            margin-bottom: 30px;
            margin-top: 0;
            max-width: 600px;
            width: 100%;
            padding: 0 5px;
        }

        .mobile-menu-categories {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 35px;
            width: 100%;
            max-width: 600px;
            justify-items: stretch;
        }

        .mobile-menu-category {
            background: white;
            padding: 18px 12px;
            border-radius: 10px;
            text-align: center;
            font-size: 0.95rem;
            font-weight: bold;
            color: #093a20;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 60px;
        }

        .mobile-menu-buttons {
            display: flex;
            flex-direction: column;
            gap: 18px;
            align-items: center;
            width: 100%;
            max-width: 600px;
            margin-top: 0;
        }

        .mobile-menu-button {
            background: #00a650;
            color: white;
            padding: 16px 32px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: bold;
            font-size: 1.1rem;
            text-align: center;
            transition: background 0.3s ease;
            width: 100%;
            max-width: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .mobile-menu-button:hover {
            background: #008f47;
        }

        .click-button {
            position: absolute;
            bottom: 35%;
            left: 79%;
            transform: translateX(-50%);
            background: #00a650;
            color: white;
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 10px;
            font-weight: bold;
            text-decoration: none;
            z-index: 10;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            transition: all 0.3s ease;
            white-space: nowrap;
        }

        .click-button:hover {
            background: #008f47;
            transform: translateX(-50%) scale(1.05);
        }

        /* Popup Modal */
        .popup-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            animation: fadeIn 0.3s ease;
        }

        .popup-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 90%;
            max-height: 90%;
            animation: zoomIn 0.3s ease;
        }

        .popup-image {
            width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
        }

        .popup-close {
            position: absolute;
            top: 10px;
            right: 20px;
            color: white;
            font-size: 30px;
            font-weight: bold;
            cursor: pointer;
            z-index: 1001;
        }

        .popup-close:hover {
            color: #ccc;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes zoomIn {
            from { transform: translate(-50%, -50%) scale(0.5); }
            to { transform: translate(-50%, -50%) scale(1); }
        }

        /* Mobile Image Slider */
        .mobile-image-slider {
            position: relative;
            width: 100%;
            overflow: hidden;
        }

        .mobile-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: auto;
            opacity: 0;
            transform: translateX(100%);
            transition: all 0.1s ease-in-out;
        }

        .mobile-slide--active {
            opacity: 1;
            transform: translateX(0);
            position: relative;
        }

        /* Changer le fond en blanc quand l'image g9MRnUM est active */
        .mobile-image-slider.bg-white {
            background: #ffffff;
        }

        .mobile-slide--out {
            opacity: 0;
            transform: translateX(-100%);
        }

        /* Animation d'apparition pour le slider */
        .mobile-image-slider {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s ease-out;
        }

        .mobile-image-slider.animate-in {
            opacity: 1;
            transform: translateY(0);
        }

        /* Hide on mobile */
        @media (max-width: 768px) {
            .image-section-desktop {
                display: none;
            }
            
            .mobile-image-section {
                display: block;
            }
            
            /* Baisser le titre "Notre Menu" sur mobile */
            #specialties .section-title {
                margin-top: 60px !important;
            }
            
            /* Colorer le bloc blanc en vert et fond de page menu en vert sur mobile */
            #specialties {
                background: #093a20 !important;
            }
            
            #specialties .section-title {
                background: #093a20;
                color: white;
                padding: 20px;
                margin: 60px 0 0 0 !important;
                border-radius: 0;
            }
            
            /* Supprimer l'espace blanc sous l'image vtE6sVW sur mobile */
            .mobile-image-section + #specialties {
                margin-top: 0 !important;
                padding-top: 0 !important;
            }
            
            .mobile-image-section {
                margin-bottom: 0 !important;
                padding-bottom: 0 !important;
            }
            
            /* Supprimer complètement l'espace blanc sous l'image vtE6sVW sur mobile */
            .remove-mobile-gap {
                margin: 0 !important;
                padding: 0 !important;
            }
            
            .remove-mobile-gap + * {
                margin-top: 0 !important;
                padding-top: 0 !important;
            }
            
            /* Supprimer l'espace blanc dans la section menu sur mobile */
            .menu-description {
                margin-bottom: 0 !important;
            }
            
            .menu-categories {
                margin-top: 0 !important;
                padding-top: 0 !important;
            }
            
            /* Masquer complètement la section menu sur mobile */
            #specialties {
                display: none !important;
            }
            
            /* Afficher la nouvelle section menu mobile */
            .mobile-menu-section {
                display: block !important;
            }
        }
        
        /* ====================== */
        /* Bandeau Cookies RGPD */
        /* ====================== */
        .cookie-banner {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.95);
            backdrop-filter: blur(10px);
            padding: 1.5rem 2rem;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.3);
            transform: translateY(100%);
            transition: transform 0.3s ease-in-out;
        }
        
        .cookie-banner.show {
            transform: translateY(0);
        }
        
        .cookie-banner-content {
            flex: 1;
            color: var(--white);
            font-size: 0.95rem;
            line-height: 1.5;
        }
        
        .cookie-banner-buttons {
            display: flex;
            gap: 1rem;
            flex-shrink: 0;
        }
        
        .cookie-btn {
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 25px;
            font-weight: 600;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Inter', sans-serif;
        }
        
        .cookie-btn-accept {
            background: var(--primary-orange);
            color: var(--white);
        }
        
        .cookie-btn-accept:hover {
            background: #072a15;
            transform: translateY(-2px);
        }
        
        .cookie-btn-refuse {
            background: transparent;
            color: var(--white);
            border: 2px solid rgba(255, 255, 255, 0.3);
        }
        
        .cookie-btn-refuse:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.5);
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .cookie-banner {
                flex-direction: column;
                padding: 1.5rem 1rem;
                gap: 1rem;
            }
            
            .cookie-banner-content {
                text-align: center;
                font-size: 0.9rem;
            }
            
            .cookie-banner-buttons {
                width: 100%;
                justify-content: center;
            }
            
            .cookie-btn {
                flex: 1;
                max-width: 150px;
            }
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header class="header" id="header">
        <div class="header-content">
            <img src="https://i.imgur.com/xhL27Se.png" alt="Le 8 Logo" class="logo">
            <nav class="nav-menu">
                <ul class="nav-links">
                <li><a href="#hero">Accueil</a></li>
                <li><a href="menu.html">Menu</a></li>
                <li><a href="#saviezvous">L'Info 8</a></li>
                <li><a href="#restaurant">Restaurant</a></li>
                </ul>
                <a href="https://le8-restaurant-la-fleche.order.dish.co/menus" target="_blank" class="cta-button">Commander</a>
                <button class="mobile-menu-toggle" id="mobile-menu-toggle">☰</button>
            </nav>
        </div>
        <div class="mobile-menu" id="mobile-menu">
            <a href="#hero">Accueil</a>
            <a href="menu.html">Menu</a>
            <a href="#saviezvous">L'Info 8</a>
            <a href="#restaurant">Restaurant</a>
            <a href="tel:0651006193" class="cta-button">Appeler</a>
            <div class="mobile-social-links">
                <a href="https://www.instagram.com/le8snacking/" target="_blank" class="social-link">
                    <img src="https://i.imgur.com/SXV6k7f.png" alt="Instagram" class="social-icon">
                    Instagram
                </a>
                <a href="https://www.facebook.com/p/restaurant-le-8-61575128912756/" target="_blank" class="social-link">
                    <img src="https://i.imgur.com/FYAOErs.png" alt="Facebook" class="social-icon">
                    Facebook
                </a>
            </div>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero" id="hero">
        <video class="hero-video hero-video-desktop" autoplay muted loop playsinline>
            <source src="https://i.imgur.com/JYP0x3i.mp4" type="video/mp4">
        </video>
        <video class="hero-video hero-video-mobile" autoplay muted loop playsinline>
            <source src="https://i.imgur.com/zuLBXXx.mp4" type="video/mp4">
        </video>
        <div class="hero-overlay"></div>
        
        <!-- Hero Content - Mobile Only -->
        <div class="hero-content-mobile">
        </div>
    </section>

    <!-- Mobile Menu Image Section -->
    <section class="mobile-image-section">
        <div class="container">
            <div class="mobile-image-slider">
                <img src="https://i.imgur.com/g9MRnUM.png" alt="Le 8 - Menu mobile" class="mobile-promo-image" onclick="openPopup()" style="cursor: pointer;">
            </div>
        </div>
    </section>

    <!-- Mobile Menu Section -->
    <section class="mobile-menu-section">
        <div class="container">
            <h2 class="mobile-menu-title">Notre Menu</h2>
            
            <p class="mobile-menu-description">Dans notre restaurant, nous vous proposons une cuisine moderne et savoureuse qui allie tradition et innovation. Découvrez nos spécialités préparées avec des ingrédients spécialement sélectionnés.</p>
            
            <div class="mobile-menu-buttons">
                <a href="menu.html" class="mobile-menu-button">Voir le Menu</a>
                <a href="https://cdn.website.dish.co/media/56/97/9222420/Offre-Etudiant-midi.png" class="mobile-menu-button" target="_blank">Offre étudiante</a>
            </div>
        </div>
    </section>

    <!-- Mobile Image After Menu Section -->
    <section class="mobile-image-section" style="margin-top: 0; padding-top: 0;">
        <div class="container" style="padding: 0; position: relative;">
            <img src="https://i.imgur.com/voCmp8B.png" alt="Le 8 - Promotion mobile" class="mobile-promo-image" style="margin: 0; border-radius: 0;">
            <a href="https://le8-restaurant-la-fleche.order.dish.co/menus" target="_blank" class="mobile-commander-button-on-image">COMMANDER</a>
        </div>
    </section>

    <!-- Mobile Third Image Section (après le menu) -->
    <section class="mobile-image-section" style="margin-top: 0; padding-top: 0;">
        <div class="container" style="padding: 0;">
            <img src="https://i.imgur.com/fqhEpeh.png" alt="Le 8 - Promotion mobile" class="mobile-promo-image" style="margin: 0; border-radius: 0;">
        </div>
    </section>

    <!-- Popup Modal -->
    <div id="popupModal" class="popup-modal" onclick="closePopup()">
        <span class="popup-close" onclick="closePopup()">&times;</span>
        <div class="popup-content" onclick="event.stopPropagation()">
            <img src="https://i.imgur.com/g9MRnUM.png" alt="Le 8 - Menu mobile" class="popup-image">
        </div>
    </div>

    <!-- Menu Section -->
    <section class="section" id="specialties" style="padding-top: 0; margin-top: 0;">
        <div class="container">
            <h2 class="section-title" style="margin-top: 0;">Notre Menu</h2>
            <p class="menu-description">
                Dans notre restaurant, nous vous proposons une cuisine moderne et savoureuse qui allie tradition et innovation. 
                Découvrez nos spécialités préparées avec des ingrédients spécialement sélectionnés.
            </p>
            
            <div class="menu-buttons">
                <a href="menu.html" class="menu-button">
                    <span class="button-icon">📋</span>
                    VOIR LE MENU
                </a>
                <a href="offre-etudiante.html" class="menu-button">
                    <span class="button-icon">🎓</span>
                    L'OFFRE ÉTUDIANTE
                </a>
            </div>
        </div>
    </section>

    <!-- Image Section - Desktop Only -->
    <section class="image-section-desktop">
        <div class="container">
            <div class="slider" id="slider">
                <img class="slide slide--first" src="https://i.imgur.com/J8IWksh.png" alt="Le 8 - Smash Burgers">
                <img class="slide slide--second" src="https://i.imgur.com/TwaOMSc.png" alt="Le 8 - Tacos">
            </div>
        </div>
    </section>

    <!-- ====================== -->
    <!-- Section L'INFO 8 -->
    <!-- ====================== -->
    <section id="saviezvous" class="saviezvous-section">
        <h2>L'Info 8</h2>

        <div class="saviezvous-container">

            <!-- Bloc texte -->
            <div class="saviezvous-text">
                <h3 id="saviezvous-title"></h3>
                <p id="saviezvous-paragraph"></p>
            </div>

        </div>
    </section>

    <!-- Restaurant Section -->
    <section class="section" id="restaurant">
        <div class="container">
            <h2 class="section-title">Restaurant</h2>
            
            <div class="restaurant-grid">
                <div class="restaurant-info">
                    <h3>Nos Services</h3>
                    <div class="services-grid">
                        <div class="service-item">WiFi Gratuit</div>
                        <div class="service-item">À Emporter</div>
                        <div class="service-item">Terrasse</div>
                        <div class="service-item">Accessible PMR</div>
                        <div class="service-item">Coin Chaud</div>
                        <div class="service-item">Convivial</div>
                    </div>
                    
                    <h3>Moyens de Paiement</h3>
                    <div class="services-grid">
                        <div class="service-item">Espèces</div>
                        <div class="service-item">Sans Contact</div>
                        <div class="service-item">Mastercard</div>
                        <div class="service-item">Ticket Restaurant</div>
                        <div class="service-item">Visa</div>
                        <div class="service-item">Carte Débit</div>
                    </div>
                </div>
                
                <div class="restaurant-contact">
                    <div class="contact-item">
                        <div class="contact-icon">📍</div>
                        <div>
                            <h4>Adresse</h4>
                            <p>8 Rue du Dr Lhoste<br>72200 La Flèche</p>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon">📞</div>
                        <div>
                            <h4>Téléphone</h4>
                            <p><a href="tel:0651006193" style="color: black;">06 51 00 61 93</a></p>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon">🕒</div>
                        <div>
                            <h4>Horaires</h4>
                            <p>Lun : 11:00-14:00, 18:00-22:00<br>
                            Mar : 11:00-14:00, 18:00-22:00<br>
                            Mer : 11:00-14:00, 18:00-22:00<br>
                            Jeu : 11:00-14:00, 18:00-22:00<br>
                            Ven : 11:00-14:00, 18:00-22:00<br>
                            Sam : 18:00-22:00<br>
                            Dim : 18:00-22:00</p>
                        </div>
                    </div>
                </div>
                
                <div class="restaurant-map">
                    <iframe 
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2700.123456789!2d1.0654!3d47.7928!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDfCsDQ3JzM0LjEiTiAxwrAwMyc1NS40IkU!5e0!3m2!1sfr!2sfr!4v1234567890123!5m2!1sfr!2sfr" 
                        width="100%" 
                        height="300" 
                        style="border:0; border-radius: 15px;" 
                        allowfullscreen="" 
                        loading="lazy" 
                        referrerpolicy="no-referrer-when-downgrade">
                    </iframe>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section class="section" id="contact">
        <div class="container">
            <h2 class="section-title">Contact & Horaires</h2>
            <div class="contact-grid">
                <div class="contact-info">
                    <h3>Informations</h3>
                    <div class="contact-item">
                        <div class="contact-icon">📍</div>
                        <div>8 Rue du Dr Lhoste, 72200 La Flèche</div>
                    </div>
                    <div class="contact-item">
                        <div class="contact-icon">📞</div>
                        <a href="tel:0651006193" style="color: black;">06 51 00 61 93</a>
                    </div>
                </div>
                <div class="contact-info">
                    <h3>Horaires d'ouverture</h3>
                    <table class="hours-table">
                        <tr>
                            <th>Jour</th>
                            <th>Horaires</th>
                        </tr>
                        <tr>
                            <td>Lundi</td>
                            <td>11:00–14:00, 18:00–22:00</td>
                        </tr>
                        <tr>
                            <td>Mardi</td>
                            <td>11:00–14:00, 18:00–22:00</td>
                        </tr>
                        <tr>
                            <td>Mercredi</td>
                            <td>11:00–14:00, 18:00–22:00</td>
                        </tr>
                        <tr>
                            <td>Jeudi</td>
                            <td>11:00–14:00, 18:00–22:00</td>
                        </tr>
                        <tr>
                            <td>Vendredi</td>
                            <td>11:00–14:00, 18:00–22:00</td>
                        </tr>
                        <tr>
                            <td>Samedi</td>
                            <td>18:00–22:00</td>
                        </tr>
                        <tr>
                            <td>Dimanche</td>
                            <td>18:00–22:00</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </section>

    <!-- Gallery Section -->
    <section class="gallery-section" id="gallery">
        <div class="container">
            <h2 class="gallery-title">galerie</h2>
            <div class="gallery-grid">
                <div class="gallery-item">
                    <img src="https://i.imgur.com/vGHeNDM.png" alt="Galerie Le 8 - Image 1" class="gallery-image">
                </div>
                <div class="gallery-item">
                    <img src="https://i.imgur.com/4bftu7C.png" alt="Galerie Le 8 - Image 2" class="gallery-image">
                </div>
                <div class="gallery-item">
                    <img src="https://i.imgur.com/LXn2uTv.png" alt="Galerie Le 8 - Image 3" class="gallery-image">
                </div>
                <div class="gallery-item">
                    <img src="https://i.imgur.com/Ee0aOnu.png" alt="Galerie Le 8 - Image 4" class="gallery-image">
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-section">
                <h3>Le 8</h3>
                <p>Le fast-food le plus chaud de La Flèche</p>
                <p>8 Rue du Dr Lhoste, 72200 La Flèche</p>
            </div>
            <div class="footer-section">
                <h3>Suivez-nous</h3>
                <a href="https://www.instagram.com/le8snacking/" target="_blank" class="instagram-link">
                    <img src="https://i.imgur.com/SXV6k7f.png" alt="Instagram" class="instagram-logo">
                    Instagram
                </a>
                <a href="https://www.facebook.com/p/restaurant-le-8-61575128912756/" target="_blank" class="facebook-link">
                    <img src="https://i.imgur.com/FYAOErs.png" alt="Facebook" class="facebook-logo">
                    Facebook
                </a>
            </div>
            <div class="footer-section imma-agency">
                <h3>Site fait par</h3>
                <a href="https://www.instagram.com/imma_agency/?igsh=NTd6YjNyMzF6YXY3#" target="_blank" rel="noopener">
                    <img src="https://i.imgur.com/o20TSAv.png" alt="IMMA AGENCY" class="imma-logo">
                </a>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2025 Le 8. Tous droits réservés.</p>
        </div>
    </footer>


    <script>
        // Header scroll behavior
        const header = document.getElementById('header');
        const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
        const mobileMenu = document.getElementById('mobile-menu');
        
        function handleScroll() {
            const scrollY = window.scrollY;
            
            if (scrollY > 10) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        }
        
        // Mobile menu toggle
        mobileMenuToggle.addEventListener('click', function() {
            mobileMenu.classList.toggle('active');
        });
        
        // Close mobile menu when clicking on a link
        mobileMenu.querySelectorAll('a').forEach(link => {
            link.addEventListener('click', function() {
                mobileMenu.classList.remove('active');
            });
        });
        
        // Scroll event listener
        window.addEventListener('scroll', handleScroll);
        
        // Animate specialty cards on scroll
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };
        
        const observer = new IntersectionObserver(function(entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate');
                }
            });
        }, observerOptions);
        
        document.querySelectorAll('.menu-category').forEach(card => {
            observer.observe(card);
        });
        
        // Slider droite → gauche (même sens infini)
        (function(){
            const slider = document.getElementById('slider');
            let showSecond = false;
            const intervalMs = 5000;

            setInterval(() => {
                showSecond = !showSecond;
                slider.classList.toggle('show-second', showSecond);
            }, intervalMs);
        })();

        // Popup functions
        function openPopup() {
            document.getElementById('popupModal').style.display = 'block';
            document.body.style.overflow = 'hidden'; // Prevent background scrolling
        }

        function closePopup() {
            document.getElementById('popupModal').style.display = 'none';
            document.body.style.overflow = 'auto'; // Restore scrolling
        }

        // Close popup with Escape key
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                closePopup();
            }
        });

    // Animation d'apparition quand le slider entre dans la vue
    const mobileSlider = document.querySelector('.mobile-image-slider');
    if (mobileSlider) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    // Ajouter la classe d'animation
                    entry.target.classList.add('animate-in');
                    // Stop observing after first trigger
                    observer.unobserve(entry.target);
                }
            });
        }, {
            threshold: 0.3 // Trigger when 30% of slider is visible
        });

        observer.observe(mobileSlider);
    }

    // Mobile Image Slider - Plus d'animation nécessaire (une seule image)
    // Le slider ne contient plus qu'une seule image, donc pas besoin d'animation
        
        // Smooth scroll for all anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
        
        // Phone number click handler
        document.querySelectorAll('a[href^="tel:"]').forEach(link => {
            link.addEventListener('click', function() {
                console.log('Phone number clicked:', this.href);
            });
        });

        // ======================
        // Section Ô L'INFO
        // ======================
        document.addEventListener("DOMContentLoaded", () => {
            const infos = [
                {
                    title: "🦁 Le zoo de La Flèche",
                    text: "Le zoo de La Flèche, créé en 1946, est le plus ancien parc zoologique privé de France. Il s'étend sur 18 hectares et accueille plus de 1 500 animaux de près de 160 espèces différentes !"
                },
                {
                    title: "🌊 La Sarthe",
                    text: "La Sarthe est surnommée parfois la \"porte de l'Ouest\", car elle fait le lien entre l'Île-de-France et la Bretagne / Pays de la Loire. Incroyable nan ?"
                },
                {
                    title: "🥙 Le kebab en France",
                    text: "Il existe aujourd'hui plus de 15 000 restaurants kebab, soit beaucoup plus que de restaurants McDonald's !"
                },
                {
                    title: "🇩🇪 Le döner kebab moderne",
                    text: "Il a été popularisé en Allemagne dans les années 1970 par des immigrés turcs à Berlin."
                },
                {
                    title: "🍔 Le hamburger",
                    text: "Le terme \"hamburger\" ne vient pas de \"ham\" (jambon) mais de la ville de Hambourg en Allemagne. Mais parcontre, nos menu burgers viennent tout droit de la flèche, des frites jusqu'au steak... Alors vient t'hamburguer un bon burger !"
                },
                {
                    title: "🍔 Les Français et le fast-food",
                    text: "Un peu plus d'un français sur 3 mange une fois par mois dans un fast food… et 59% des 15-24 ans, soit presque 2 jeunes sur 3 !"
                },
                {
                    title: "🔥 Le smash burger",
                    text: "Si vous ne le saviez pas, Le smash burger c'est une technique de cuisson d'un burger où une boule de viande hachée est écrasée (\"smash\" = écraser) sur une plaque très chaude. Le but est d'obtenir une croustillance à l'extérieur bord caramélisé, grillé — tout en gardant un cœur juteux."
                }
            ];

            let index = 0;
            const titleElement = document.getElementById("saviezvous-title");
            const textElement = document.getElementById("saviezvous-paragraph");

            function changeInfo() {
                titleElement.style.opacity = 0;
                textElement.style.opacity = 0;

                setTimeout(() => {
                    titleElement.textContent = infos[index].title;
                    textElement.textContent = infos[index].text;

                    titleElement.style.opacity = 1;
                    textElement.style.opacity = 1;

                    index = (index + 1) % infos.length;
                }, 600);
            }

            changeInfo();
            setInterval(changeInfo, 6000);
        });
    </script>
    
    <!-- ====================== -->
    <!-- Bandeau Cookies RGPD -->
    <!-- ====================== -->
    <div id="cookieBanner" class="cookie-banner">
        <div class="cookie-banner-content">
            Ce site utilise des cookies pour mesurer l'audience et améliorer l'expérience utilisateur.
        </div>
        <div class="cookie-banner-buttons">
            <button class="cookie-btn cookie-btn-accept" id="cookieAccept">Accepter</button>
            <button class="cookie-btn cookie-btn-refuse" id="cookieRefuse">Refuser</button>
        </div>
    </div>
    
    <!-- ====================== -->
    <!-- Gestion Cookies + GA4 -->
    <!-- ====================== -->
    <script>
        (function() {
            'use strict';
            
            // Clé pour localStorage
            const COOKIE_CONSENT_KEY = 'cookieConsent';
            
            // Éléments du bandeau
            const cookieBanner = document.getElementById('cookieBanner');
            const acceptBtn = document.getElementById('cookieAccept');
            const refuseBtn = document.getElementById('cookieRefuse');
            
            // Fonction pour charger Google Analytics
            function loadGoogleAnalytics() {
                // Vérifier que GA4 n'est pas déjà chargé
                if (window.gtag || document.querySelector('script[src*="googletagmanager"]')) {
                    return;
                }
                
                // Créer et ajouter le script gtag.js
                const script1 = document.createElement('script');
                script1.async = true;
                script1.src = 'https://www.googletagmanager.com/gtag/js?id=G-60MZL391SV';
                document.head.appendChild(script1);
                
                // Créer et ajouter le script de configuration
                const script2 = document.createElement('script');
                script2.textContent = `
                    window.dataLayer = window.dataLayer || [];
                    function gtag(){dataLayer.push(arguments);}
                    gtag('js', new Date());
                    gtag('config', 'G-60MZL391SV');
                `;
                document.head.appendChild(script2);
            }
            
            // Fonction pour masquer le bandeau
            function hideBanner() {
                if (cookieBanner) {
                    cookieBanner.classList.remove('show');
                    setTimeout(() => {
                        cookieBanner.style.display = 'none';
                    }, 300);
                }
            }
            
            // Fonction pour gérer l'acceptation
            function handleAccept() {
                localStorage.setItem(COOKIE_CONSENT_KEY, 'accepted');
                hideBanner();
                loadGoogleAnalytics();
            }
            
            // Fonction pour gérer le refus
            function handleRefuse() {
                localStorage.setItem(COOKIE_CONSENT_KEY, 'refused');
                hideBanner();
            }
            
            // Vérifier le consentement existant
            function checkConsent() {
                const consent = localStorage.getItem(COOKIE_CONSENT_KEY);
                
                if (consent === 'accepted') {
                    // L'utilisateur a déjà accepté, charger GA4
                    loadGoogleAnalytics();
                    return true;
                } else if (consent === 'refused') {
                    // L'utilisateur a refusé, ne rien faire
                    return true;
                }
                
                // Pas de consentement, afficher le bandeau
                return false;
            }
            
            // Initialisation
            function init() {
                const hasConsent = checkConsent();
                
                if (!hasConsent && cookieBanner) {
                    // Afficher le bandeau après un court délai
                    setTimeout(() => {
                        cookieBanner.classList.add('show');
                    }, 500);
                    
                    // Ajouter les event listeners
                    if (acceptBtn) {
                        acceptBtn.addEventListener('click', handleAccept);
                    }
                    
                    if (refuseBtn) {
                        refuseBtn.addEventListener('click', handleRefuse);
                    }
                }
            }
            
            // Lancer l'initialisation quand le DOM est prêt
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', init);
            } else {
                init();
            }
        })();
    </script>
</body>
</html>