          "text": "Snack Chez LOLO est ouvert du lundi au vendredi de 07h30 à 14h00 et de 18h00 à 21h30, ainsi que le dimanche soir de 18h00 à 21h30. Le restaurant est fermé le samedi."
        }
      },
      {
        "@type": "Question",
        "name": "Quel type de cuisine propose Snack Chez LOLO ?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Snack Chez LOLO propose de la cuisine locale polynésienne, des plats chinois et une carte variée. Spécialités : poisson cru, burgers de poisson frais, fish and chips, salades tropicales et jus de fruits frais. Tous les produits sont locaux et frais."
        }
      },
      {
        "@type": "Question",
        "name": "Snack Chez LOLO propose-t-il la vente à emporter ?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Oui, Snack Chez LOLO propose la vente à emporter rapide. Vous pouvez également manger sur place en terrasse en plein air ou dans la salle climatisée."
        }
      },
      {
        "@type": "Question",
        "name": "Comment contacter Snack Chez LOLO ?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Vous pouvez contacter Snack Chez LOLO par WhatsApp au +689 87 25 25 89 à tout moment. Vous pouvez aussi consulter la page Facebook facebook.com/SNACKLOLO pour le menu et les actualités."
        }
      }
    ]
  }
  </script>
  <link rel="icon" type="image/webp" href="img/logo.webp" />
  <link rel="apple-touch-icon" href="img/logo.webp" />
  <meta name="theme-color" content="#16a286" />
  <link rel="manifest" href="manifest.webmanifest" />
  <link rel="preload" as="image" href="img/image_0.webp" fetchpriority="high" />
  <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=Space+Grotesk:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
  <style>
    :root {
      --primary: hsl(168, 76%, 36%);
      --primary-light: hsl(168, 76%, 45%);
      --secondary: hsl(36, 72%, 52%);
      --accent: hsl(353, 91%, 65%);
      --bg: hsl(36, 30%, 97%);
      --fg: hsl(195, 35%, 12%);
      --muted: hsl(36, 18%, 92%);
      --muted-fg: hsl(195, 25%, 35%);
      --border: hsl(36, 18%, 88%);
      --radius: 1rem;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: 'Lora', Georgia, serif; background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; }
    h1,h2,h3,h4,h5,h6 { font-family: 'Fraunces', Georgia, serif; letter-spacing: -0.02em; font-feature-settings: "ss01"; }
    img { max-width: 100%; display: block; }
    a { text-decoration: none; color: inherit; }
    .nav-logo-img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
    a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
    .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

    /* LANG TOGGLE */
    .lang-toggle { display: flex; align-items: center; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; padding: 3px; gap: 2px; backdrop-filter: blur(8px); }
    nav.scrolled .lang-toggle { background: var(--muted); border-color: var(--border); }
    .lang-btn { padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; border: none; cursor: pointer; transition: all 0.2s; background: transparent; color: rgba(255,255,255,0.7); letter-spacing: 0.05em; }
    nav.scrolled .lang-btn { color: var(--muted-fg); }
    .lang-btn.active { background: white; color: var(--primary); box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
    nav.scrolled .lang-btn.active { background: var(--primary); color: white; }

    /* NAVBAR */
    nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: all 0.3s ease; padding: 1.25rem 0; }
    nav.scrolled { background: rgba(245,250,250,0.9); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); padding: 0.75rem 0; box-shadow: 0 1px 20px rgba(0,0,0,0.05); }
    .nav-inner { display: flex; align-items: center; justify-content: space-between; }
    .nav-logo { display: flex; align-items: center; gap: 0.5rem; }
    .nav-logo-icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-size: 1.25rem; transform: rotate(3deg); transition: transform 0.3s; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
    .nav-logo:hover .nav-logo-icon { transform: rotate(0deg); }
    .nav-logo-text { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1.125rem; color: white; }
    nav.scrolled .nav-logo-text { color: var(--fg); }
    .nav-logo-text span { color: var(--secondary); }
    nav.scrolled .nav-logo-text span { color: var(--primary); }
    .nav-right { display: flex; align-items: center; gap: 1.5rem; }
    .nav-links { display: flex; align-items: center; gap: 2rem; }
    .nav-links a { font-size: 0.875rem; font-weight: 500; transition: color 0.2s; position: relative; color: rgba(255,255,255,0.9); }
    nav.scrolled .nav-links a { color: var(--fg); }
    .nav-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--primary); transition: width 0.3s; }
    .nav-links a:hover { color: var(--primary); }
    .nav-links a:hover::after { width: 100%; }
    .btn-wa { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.25rem; background: linear-gradient(135deg, #25D366, #128C7E); color: white; border: none; border-radius: var(--radius); font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: opacity 0.2s; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
    .btn-wa:hover { opacity: 0.9; }
    .nav-mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 50%; color: white; }
    nav.scrolled .nav-mobile-toggle { color: var(--fg); }
    .nav-mobile-menu { display: none; flex-direction: column; gap: 1rem; padding: 1rem; background: var(--bg); border-top: 1px solid var(--border); }
    .nav-mobile-menu.open { display: flex; }
    .nav-mobile-menu a { font-size: 1.125rem; font-weight: 500; padding: 0.5rem 0.75rem; border-radius: 0.5rem; transition: background 0.2s; }
    .nav-mobile-menu a:hover { background: var(--muted); }
    .mobile-lang { display: flex; gap: 0.5rem; padding: 0.5rem 0.75rem; }
    .mobile-lang-btn { padding: 0.375rem 1rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; border: 1px solid var(--border); cursor: pointer; background: transparent; transition: all 0.2s; }
    .mobile-lang-btn.active { background: var(--primary); color: white; border-color: var(--primary); }

    /* HERO */
    #hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
    .hero-bg { position: absolute; inset: 0; z-index: 0; transform: scale(1.1); background-image: url('img/image_0.webp'); background-position: center; background-size: cover; }
    .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, hsla(168,72%,10%,0.82) 0%, hsla(168,60%,18%,0.55) 45%, hsla(38,70%,10%,0.15) 100%); }
    .hero-bg::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.35) 100%); z-index: 1; pointer-events: none; }
    .hero-glow { position: absolute; border-radius: 50%; filter: blur(80px); }
    .hero-content { position: relative; z-index: 10; max-width: 900px; padding: 0 5vw 5rem; }
    .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(255,255,255,0.1); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; margin-bottom: 2rem; animation: fadeUp 0.6s ease both; }
    .hero-badge .dot { width: 8px; height: 8px; background: var(--primary); border-radius: 50%; animation: ping 1.5s ease-in-out infinite; }
    @keyframes ping{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:0.6}}
    .hero-badge span { color: white; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
    .hero-title { font-size: clamp(3.5rem, 10vw, 7rem); font-weight: 900; color: white; line-height: 0.95; letter-spacing: -0.03em; margin-bottom: 1.5rem; animation: fadeUp 0.6s ease 0.1s both; }
    .hero-title .title-accent { color: var(--secondary); font-style: italic; font-weight: 300; display: block; font-size: 1.15em; line-height: 1; margin-top: 0.05em; }
    .hero-subtitle { font-family: 'Lora', Georgia, serif; font-size: clamp(0.95rem, 1.8vw, 1.1rem); color: rgba(255,255,255,0.75); line-height: 1.75; max-width: 420px; margin-bottom: 2.5rem; font-style: italic; animation: fadeUp 0.6s ease 0.2s both; }
    .hero-buttons { display: flex; flex-wrap: wrap; gap: 1rem; animation: fadeUp 0.6s ease 0.3s both; }
    .btn-primary { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.9rem 2rem; background: var(--secondary); color: var(--fg); border: 1px solid hsl(36,72%,44%); border-radius: var(--radius); font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: all 0.2s; box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
    .btn-primary:hover { transform: translateY(-2px); background: hsl(42,95%,70%); box-shadow: 0 12px 32px rgba(0,0,0,0.3); }
    .btn-outline { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.9rem 2rem; background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.35); color: rgba(255,255,255,0.9); border-radius: var(--radius); font-family: 'Lora', Georgia, serif; font-size: 0.9rem; font-style: italic; cursor: pointer; transition: background 0.2s; backdrop-filter: blur(10px); }
    .btn-outline:hover { background: rgba(255,255,255,0.14); }
    .hero-stats { display: flex; align-items: center; gap: 3rem; margin-top: 5rem; animation: fadeUp 0.6s ease 0.4s both; opacity: 0.85; }
    .hero-stat { display: flex; flex-direction: column; }
    .hero-stat-val { color: white; font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1.875rem; }
    .hero-stat-label { color: rgba(255,255,255,0.6); font-size: 0.8rem; }
    .hero-divider { width: 1px; height: 3rem; background: rgba(255,255,255,0.2); }
    .hero-scroll { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; opacity: 0.5; animation: bscroll 2s ease-in-out infinite; }
    @keyframes bscroll{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-8px)}}
    .hero-scroll span { color: white; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
    .hero-scroll-line { width: 1px; height: 3rem; background: linear-gradient(to bottom, white, transparent); }
    @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
    @keyframes pulse{0%,100%{opacity:0.6}50%{opacity:1}}

    /* GRAIN TEXTURE — hero & about */
    #hero::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      opacity: 0.07;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
      background-size: 200px 200px;
    }

    /* WAVE DIVIDERS */
    .wave-divider { line-height: 0; margin: 0; padding: 0; }
    .wave-divider svg { display: block; width: 100%; }

    /* SECTION HEADER */
    .section-header { text-align: center; margin-bottom: 4rem; }
    .section-header.left { text-align: left; }
    .section-badge { display: inline-flex; align-items: center; padding: 0.4rem 0.95rem; background: transparent; border: 1px solid var(--primary); border-radius: 999px; color: var(--primary); font-family: 'Lora', Georgia, serif; font-size: 0.72rem; font-weight: 500; font-style: italic; letter-spacing: 0.1em; margin-bottom: 1.25rem; }
    .section-title { font-size: clamp(1.875rem, 4vw, 2.75rem); font-weight: 800; margin-bottom: 1rem; letter-spacing: -0.025em; }
    .section-subtitle { color: var(--muted-fg); max-width: 36rem; margin: 0 auto; line-height: 1.7; }
    .section-header.left .section-subtitle { margin: 0; }

    /* INSTANT GOURMAND (gallery) */
    #instants { padding: 6rem 5vw; background: var(--bg); overflow: hidden; }
    .gallery-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 3rem; gap: 2rem; flex-wrap: wrap; }
    .gallery-title { font-family: 'Fraunces', Georgia, serif; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; line-height: 1; letter-spacing: -0.025em; }
    .gallery-title em { font-style: italic; font-weight: 300; color: var(--primary-light); display: block; }
    .gallery-sub { max-width: 300px; font-size: 0.9rem; color: var(--muted-fg); line-height: 1.65; font-style: italic; }
    .gallery-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 280px 200px; gap: 0.75rem; }
    .gallery-item { border-radius: 1.25rem; overflow: hidden; position: relative; background: var(--muted); }
    .gallery-item:nth-child(1) { grid-row: span 2; }
    .gallery-item:nth-child(4) { grid-column: span 2; }
    .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s ease, filter 0.5s; filter: saturate(0.9); }
    .gallery-item:hover img { transform: scale(1.07); filter: saturate(1.1); }
    .gallery-overlay { position: absolute; bottom: 0.85rem; left: 0.85rem; background: rgba(255,255,255,0.9); backdrop-filter: blur(8px); padding: 0.3rem 0.75rem; border-radius: 999px; opacity: 0; transform: translateY(4px); transition: opacity 0.35s, transform 0.35s; }
    .gallery-item:hover .gallery-overlay { opacity: 1; transform: translateY(0); }
    .gallery-overlay p { font-family: 'Fraunces', Georgia, serif; font-size: 0.75rem; font-weight: 700; color: var(--fg); }
    /* FB menu button block */
    .fb-menu-block { margin-top: 3.5rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
    .fb-menu-block p { color: var(--muted-fg); font-size: 0.9375rem; }
    .btn-fb-menu { display: inline-flex; align-items: center; gap: 0.75rem; padding: 1rem 2rem; background: #1877F2; color: white; border: none; border-radius: var(--radius); font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1rem; cursor: pointer; transition: all 0.3s; box-shadow: 0 8px 24px rgba(24,119,242,0.3); }
    .btn-fb-menu:hover { transform: translateY(-2px); opacity: 0.92; }
    .gallery-social { margin-top: 1.5rem; text-align: center; color: var(--muted-fg); font-size: 0.875rem; }
    .gallery-social a { color: #1877F2; font-weight: 700; }
    .gallery-social a:hover { text-decoration: underline; }

    /* ABOUT — pixel-perfect mockup */
    #about { position: relative; background: hsl(168,72%,28%); overflow: hidden; padding: 7rem 5vw; }
    #about::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.055; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); background-size: 200px; }
    #about::after { content: ''; position: absolute; right: -8rem; top: -8rem; width: 40rem; height: 40rem; border-radius: 50%; background: radial-gradient(circle, hsla(38,88%,52%,0.12) 0%, transparent 70%); pointer-events: none; z-index: 1; }
    .about-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; max-width: 1200px; margin: 0 auto; }
    .about-photo-stack { position: relative; }
    .about-photo-main { border-radius: 1.5rem; overflow: hidden; aspect-ratio: 4/5; box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
    .about-photo-main img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) contrast(1.05); }
    .about-quote-card { position: absolute; bottom: -2rem; right: -2.5rem; background: hsl(38,88%,52%); color: hsl(195,45%,10%); padding: 1.25rem 1.5rem; border-radius: 1rem; max-width: 220px; box-shadow: 0 12px 32px rgba(0,0,0,0.2); transform: rotate(2deg); }
    .about-quote-card p { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 0.9rem; line-height: 1.55; font-weight: 700; }
    .about-quote-card::before { content: '\201C'; font-family: 'Fraunces', Georgia, serif; font-size: 3rem; line-height: 0; vertical-align: -1rem; color: hsl(168,72%,28%); opacity: 0.4; margin-right: 0.2rem; }
    .about-year { position: absolute; top: 1.5rem; left: -1.5rem; width: 5rem; height: 5rem; background: hsl(38,40%,96%); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,0.2); z-index: 3; }
    .about-year strong { font-family: 'Fraunces', Georgia, serif; font-size: 1.1rem; font-weight: 900; color: hsl(168,72%,28%); line-height: 1; }
    .about-year span { font-size: 0.5rem; color: hsl(195,25%,38%); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 1px; }
    .about-text { color: white; }
    .about-text .section-badge { color: hsl(42,95%,70%); border-color: hsla(42,95%,70%,0.4); margin-bottom: 1.5rem; display: inline-flex; }
    .about-heading { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.8rem, 3.5vw, 2.75rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.025em; margin-bottom: 1.5rem; color: white; }
    .about-heading em { font-style: italic; font-weight: 300; color: hsl(42,95%,70%); }
    .about-body { font-size: 1rem; line-height: 1.8; color: rgba(255,255,255,0.75); margin-bottom: 2.5rem; font-style: italic; }
    .about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .feat { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.85rem 1rem; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); border-radius: 0.75rem; backdrop-filter: blur(6px); transition: background 0.2s; }
    .feat:hover { background: rgba(255,255,255,0.12); }
    .feat-icon { width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 0.5rem; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: hsl(42,95%,70%); }
    .feat-icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
    .feat-text strong { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 0.8rem; font-weight: 700; color: white; margin-bottom: 0.1rem; }
    .feat-text span { font-size: 0.72rem; color: rgba(255,255,255,0.5); line-height: 1.4; font-style: italic; }

    /* CONTACT */
    #contact { padding: 6rem 0; background: var(--bg); position: relative; overflow: hidden; }
    .contact-grid { display: flex; flex-direction: column; gap: 3rem; position: relative; z-index: 1; }
    .contact-info { display: flex; flex-direction: column; gap: 2rem; }
    .contact-item { display: flex; gap: 1.25rem; align-items: flex-start; }
    .contact-icon { width: 3.5rem; height: 3.5rem; flex-shrink: 0; background: var(--muted); border-radius: 1rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; transition: all 0.3s; }
    .contact-item:hover .contact-icon { background: var(--primary); transform: rotate(6deg); }
    .contact-item-title { font-weight: 700; font-size: 1.0625rem; }
    .contact-item-value { font-weight: 600; font-size: 1.0625rem; }
    .contact-item-sub { color: var(--muted-fg); font-size: 0.8125rem; opacity: 0.8; }
    .reviews-block { display: flex; flex-direction: column; gap: 1rem; }
    .review-card { padding: 1.25rem 1.5rem; background: var(--muted); border-radius: 1.25rem; border: 1px solid var(--border); transition: box-shadow 0.2s; }
    .review-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.07); }
    .review-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; gap: 0.5rem; flex-wrap: wrap; }
    .review-author { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 0.9375rem; }
    .review-meta { font-size: 0.75rem; color: var(--muted-fg); }
    .review-stars { color: #F5A623; font-size: 0.875rem; letter-spacing: 1px; margin-bottom: 0.5rem; }
    .review-text { font-size: 0.875rem; color: var(--muted-fg); font-style: italic; line-height: 1.65; }
    .review-scores { display: flex; gap: 1rem; margin-top: 0.5rem; flex-wrap: wrap; }
    .review-score { font-size: 0.75rem; color: var(--primary); font-weight: 600; }
    .reviews-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.75rem; font-size: 0.8125rem; font-weight: 700; color: var(--primary); transition: opacity 0.2s; }
    .reviews-link:hover { opacity: 0.7; text-decoration: underline; }
    .contact-map-wrap { display: flex; flex-direction: column; flex: 1; }
    .contact-map { min-height: 400px; border-radius: 3rem; overflow: hidden; border: 4px solid var(--muted); box-shadow: 0 25px 50px rgba(0,0,0,0.1); flex: 1; }
    .btn-maps { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 2rem; background: var(--primary); color: white; border: 1px solid hsl(168, 76%, 30%); border-radius: 999px; font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1rem; cursor: pointer; transition: all 0.3s; box-shadow: 0 8px 24px rgba(18,163,120,0.25); margin-top: 1rem; }
    .btn-maps:hover { transform: translateY(-2px); background: var(--primary-light); box-shadow: 0 12px 32px rgba(18,163,120,0.35); }

    /* FAQ */
    #faq { padding: 6rem 0; background: var(--muted); }
    .faq-list { max-width: 48rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
    .faq-item { background: var(--bg); border: 1px solid var(--border); border-radius: 1.25rem; overflow: hidden; transition: box-shadow 0.2s; }
    .faq-item:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.07); }
    .faq-q { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1.25rem 1.5rem; cursor: pointer; font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1rem; gap: 1rem; background: transparent; border: none; color: inherit; text-align: left; }
    .faq-q::after { content: '+'; font-size: 1.5rem; color: var(--primary); transition: transform 0.3s; flex-shrink: 0; }
    .faq-item.open .faq-q::after { transform: rotate(45deg); }
    .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
    .faq-item.open .faq-a { max-height: 12rem; }
    .faq-a p { padding: 0 1.5rem 1.25rem; color: var(--muted-fg); font-size: 0.9375rem; line-height: 1.7; }

    /* FOOTER REVIEW CTA */
    .footer-review-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; background: var(--bg); border-radius: 2rem; padding: 2.5rem; margin-bottom: 3rem; border: 1px solid var(--border); }
    .footer-review-left { display: flex; flex-direction: column; gap: 0.75rem; }
    .footer-review-title { font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-size: 1.375rem; color: var(--fg); }
    .footer-review-sub { color: var(--muted-fg); font-size: 0.875rem; max-width: 28rem; line-height: 1.6; }
    .footer-review-stars { color: #f59e0b; font-size: 1.5rem; letter-spacing: 2px; }
    .btn-review { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: var(--primary); color: white; border-radius: var(--radius); font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 0.875rem; transition: opacity 0.2s; width: fit-content; }
    .btn-review:hover { opacity: 0.85; }
    .footer-review-qr { flex-shrink: 0; width: 120px; height: 120px; border-radius: 1rem; overflow: hidden; background: white; padding: 6px; border: 2px solid var(--border); }
    .footer-review-qr canvas, .footer-review-qr img { width: 100% !important; height: 100% !important; }
    @media (max-width: 768px) { .footer-review-cta { flex-direction: column; } .footer-review-qr { display: none; } }

    /* FOOTER */
    footer { background: var(--muted); padding: 5rem 0 2.5rem; position: relative; overflow: hidden; }
    .footer-wave { position: absolute; top: 0; left: 0; right: 0; height: 2.5rem; background: var(--bg); border-radius: 0 0 50% 50%/0 0 100% 100%; transform: scaleX(1.25); }
    .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; border-bottom: 1px solid var(--border); padding-bottom: 4rem; margin-bottom: 2.5rem; }
    .footer-brand p { color: var(--muted-fg); font-size: 0.875rem; line-height: 1.7; max-width: 18rem; margin: 1.5rem 0; }
    .footer-socials { display: flex; gap: 1rem; }
    .footer-social { width: 2.5rem; height: 2.5rem; background: #1877F2; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: all 0.2s; color: white; }
    .footer-social.wa { background: #25D366; }
    .footer-social:hover { transform: scale(1.1); opacity: 0.9; }
    .footer-col h4 { font-weight: 700; font-size: 1.0625rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; }
    .footer-col h4::before { content: ''; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; }
    .footer-col:nth-child(2) h4::before { background: var(--primary); }
    .footer-col:nth-child(3) h4::before { background: var(--secondary); }
    .footer-col:nth-child(4) h4::before { background: var(--accent); }
    .footer-links { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
    .footer-links a { font-size: 0.875rem; color: var(--muted-fg); transition: all 0.2s; display: inline-block; }
    .footer-links a:hover { color: var(--primary); transform: translateX(4px); }
    .footer-contact-item { display: flex; gap: 0.75rem; margin-bottom: 1rem; font-size: 0.875rem; color: var(--muted-fg); }
    .footer-hours-block { display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem; color: var(--muted-fg); }
    .footer-hours-row { display: flex; gap: 0.5rem; align-items: flex-start; }
    .footer-hours-row strong { color: var(--fg); white-space: nowrap; }
    .footer-bottom { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; font-size: 0.75rem; color: var(--muted-fg); }
    .footer-bottom > p:not(.footer-credit), .footer-bottom .footer-legal { opacity: 0.6; }
    .footer-credit a { color: var(--primary); font-weight: 600; text-decoration: none; }
    .footer-credit a:hover { text-decoration: underline; }
    .footer-legal { display: flex; gap: 1.5rem; }
    .footer-legal a:hover { color: var(--primary); }

    /* RESPONSIVE */
    @media (min-width: 768px) {
      .contact-grid { flex-direction: row; }
      .contact-info { width: 33%; }
      .contact-map-wrap { flex: 1; }
      .about-grid { flex-direction: row; align-items: center; gap: 6rem; }
      .about-grid > div { width: 50%; }
      .footer-bottom { flex-direction: row; justify-content: space-between; }
    }
    @media (max-width: 768px) {
      .nav-links { display: none; }
      .nav-mobile-toggle { display: flex; }
      .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 160px; }
      .gallery-item:nth-child(1) { grid-row: span 1; grid-column: span 2; height: 240px; }
      .gallery-item:nth-child(4) { grid-column: span 2; }
      .about-inner { grid-template-columns: 1fr; gap: 3rem; }
      .about-quote-card { right: 0; bottom: -1.5rem; }
      .about-year { left: 0; }
      .about-features { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; }
      .hero-stats { gap: 1.5rem; }
      .gallery-header { flex-direction: column; align-items: flex-start; }
    }

    /* ===================== INFOS PRATIQUES ===================== */
    #infos { padding: 5rem 0; background: linear-gradient(135deg, var(--bg) 0%, hsl(168,30%,95%) 100%); }
    #infos .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
    #infos .section-head { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
    #infos h2 { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.85rem, 4.5vw, 2.75rem); font-weight: 700; color: var(--fg); margin: 1rem 0 .5rem; line-height: 1.15; }
    #infos .infos-sub { color: var(--muted-fg); font-size: 1rem; margin: 0; }
    .infos-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
    @media (min-width: 768px) { .infos-grid { grid-template-columns: repeat(3, 1fr); } }
    .info-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 4px 20px rgba(0,0,0,.04); display: flex; flex-direction: column; gap: 1rem; }
    .info-card-header { display: flex; align-items: center; gap: .75rem; }
    .info-card h3 { font-family: 'Fraunces', Georgia, serif; font-size: 1.1rem; color: var(--fg); margin: 0; font-weight: 700; }
    .info-icon { font-size: 1.6rem; line-height: 1; }
    /* météo */
    .weather-current { display: flex; align-items: baseline; gap: .75rem; }
    .weather-temp { font-family: 'Fraunces', Georgia, serif; font-size: 2.6rem; font-weight: 700; color: var(--primary); line-height: 1; }
    .weather-meta { display: flex; flex-direction: column; gap: .15rem; color: var(--muted-fg); font-size: .85rem; }
    .weather-forecast { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding-top: .9rem; border-top: 1px solid var(--border); }
    .weather-day { text-align: center; }
    .weather-day-name { color: var(--muted-fg); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
    .weather-day-icon { font-size: 1.4rem; margin: .25rem 0; }
    .weather-day-temp { color: var(--fg); font-weight: 600; font-size: .85rem; }
    /* devises */
    .curr-grid { display: flex; flex-direction: column; gap: .5rem; }
    .curr-row { display: grid; grid-template-columns: 1fr auto; gap: .75rem; align-items: center; background: var(--muted); border: 1px solid transparent; border-radius: .55rem; padding: .55rem .85rem; transition: border-color .15s; }
    .curr-row:focus-within { border-color: var(--primary); background: #fff; }
    .curr-row input { background: transparent; border: 0; outline: 0; font-family: inherit; font-size: 1.05rem; font-weight: 600; color: var(--fg); width: 100%; min-width: 0; padding: .15rem 0; -moz-appearance: textfield; }
    .curr-row input::-webkit-outer-spin-button, .curr-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .curr-row label { font-weight: 700; color: var(--primary); font-size: .85rem; letter-spacing: .03em; }
    /* tips */
    .info-tips { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
    .info-tips li { display: flex; flex-direction: column; gap: .1rem; padding-bottom: .55rem; border-bottom: 1px solid var(--border); }
    .info-tips li:last-child { border-bottom: 0; padding-bottom: 0; }
    .info-tips strong { color: var(--fg); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
    .info-tips span { color: var(--muted-fg); font-size: .9rem; }
    .info-source { color: var(--muted-fg); font-size: .72rem; margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--border); line-height: 1.4; }
  </style>
</head>
<body>

<!-- ===================== SVG SPRITE (icônes réutilisables) ===================== -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none;" aria-hidden="true">
  <symbol id="icon-wa" viewBox="0 0 24 24" fill="currentColor">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
    <path d="M12 0C5.373 0 0 5.373 0 12c0 2.127.558 4.126 1.535 5.858L.057 23.486a.5.5 0 0 0 .612.612l5.628-1.478A11.946 11.946 0 0 0 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818a9.806 9.806 0 0 1-5.032-1.386l-.36-.214-3.737.98.998-3.648-.235-.374A9.818 9.818 0 0 1 2.182 12C2.182 6.573 6.573 2.182 12 2.182S21.818 6.573 21.818 12 17.427 21.818 12 21.818z"/>
  </symbol>
</svg>

<!-- ===================== TRANSLATIONS ===================== -->
<script>
const FB_MENU_URL = "https://www.facebook.com/SNACKLOLO/posts/pfbid02vU6XS4YQcMybLBuWoxq17huF3e69jWUuqPfGJaekKvTvRnMBgiXTCStzdVkEZh6Ql";
const MAPS_URL = "https://www.google.com/maps/place/Snack+Chez+LOLO/@-16.5040694,-151.7539773,17z/data=!3m1!4b1!4m6!3m5!1s0x76bdbd0c0c20fbb9:0x4a5dde280bee2dda!8m2!3d-16.5040746!4d-151.7514024!16s%2Fg%2F11r_tr95kh?entry=ttu&g_ep=EgoyMDI2MDMwOC4wIKXMDSoASAFQAw%3D%3D";
const WA_URL = "https://wa.me/68987252589";

const T = {
  fr: {
    navInstants:"Instants Gourmands", navAbout:"À propos", navContact:"Contact", navFaq:"FAQ", navCall:"WhatsApp",
    instTitle:"INSTANT GOURMAND",
    heroBadge:"Vaitape BORA BORA",
    heroT1:"Saveurs Locales", heroT2:"Chez LOLO",
    heroSub:"Plongez dans l'authenticité de Bora Bora avec nos plats faits localement, préparés avec passion et servis avec le sourire.",
    heroBtn1:"Voir le menu", heroBtn2:"Nous trouver",
    stat1:"Note Google", stat2:"Depuis", stat3:"Produits locaux", scroll:"Scroll",
    instBadge:"Instants Gourmands", instTitle:"INSTANT GOURMAND",
    gal1:"Lagon de Bora Bora", gal2:"Burger Gourmand", gal3:"Fish & Chips", gal4:"Salade Tropicale", gal5:"Jus Frais",
    instSub:"Découvrez l'ambiance et les plats qui font notre renommée à Bora Bora.",
    fbMenuDesc:"Consultez notre menu complet directement sur notre page Facebook.",
    fbMenuBtn:"Voir notre Menu sur Facebook",
    galSocial:"Suivez-nous sur Facebook",
    aboutBadge:"Notre Histoire", aboutTitle:"Plus qu'un Snack, Une Tradition",
