IMPORTANT CONSTRAINTS:
- Output a SINGLE FILE named index.html
- Use ONLY HTML, CSS, JavaScript
- Use Tailwind via CDN: <script src="https://cdn.tailwindcss.com"></script>
- If using icons, import Font Awesome or Lucide via CDN first
- Everything must work offline as a demo using mocked data + localStorage (no real backend).

LANGUAGE:
- All UI text must be in French (FR), currency EUR, timezone Europe/Paris.

APP GOAL:
A multi-role web app with 4 interfaces: Client, Cuisine (KDS), Livreur, Boss/Admin.
Implement it as a single-page app (SPA) with a role switcher (simple login mock):
- On first screen: choose role (Client / Cuisine / Livreur / Boss)
- For Livreur and Boss require a demo PIN (e.g., 1234) stored in code (no security claim).
- Persist current role + state in localStorage.

DATA MODEL (in JS):
- products: pizzas/boissons/desserts with id, name, price, description, image placeholder, tags, options (taille, pâte, suppléments).
- orders: id, createdAt, customer {name, phone, address}, items[], notes, deliveryType (livraison/à emporter),
totals {subtotal, deliveryFee, tip, total}, status, assignedCourierId, timeline[], etaMinutes.
- couriers: id, name, phone, isAvailable, activeOrderIds[], earningsToday, deliveriesToday.

STATUSES + WORKFLOW:
placed -> accepted -> preparing -> ready -> picked_up -> on_the_way -> delivered (plus canceled)
Every status change appends an entry to timeline with timestamp + actor role.
Realtime simulation: update UI immediately across views via a simple event bus + storage sync (window.addEventListener('storage', ...)).

UI/UX REQUIREMENTS (original design, modern, not a clone):
- Clean dashboard aesthetic, high contrast, large tap targets, mobile-first
- Top bar shows role + quick actions + current time
- Use badges, progress stepper, timers, and toasts
- Responsive layouts for phone/tablet/desktop

CLIENT INTERFACE:
- Home/menu page with categories + search + filters (végétarienne, épicée, best-seller)
- Product modal with options:
- Taille: S/M/L (affects price)
- Pâte: fine/classique
- Suppléments: fromage, champignons, dinde, olives
- Cart drawer: edit quantities, remove items, add note (“sans oignons”), choose livraison/à emporter
- Checkout (mock): name/phone/address, tip slider, “Payer” button (simulate payment success)
- After order placed: live order tracking page with stepper + ETA + timeline
- Order history + “Recommander”

CUISINE (KDS) INTERFACE:
- Fullscreen kanban columns: Nouveau / Préparation / Prêt
- Each card shows: order number, time, SLA timer, items list with options, notes, delivery type
- Actions:
- Accepter (moves placed->accepted)
- Démarrer (accepted->preparing)
- Marquer prêt (preparing->ready)
- Sound + visual highlight for new orders (use a subtle beep via Web Audio API if allowed; otherwise visual only)
- Quick filter: livraison / à emporter

LIVREUR INTERFACE (mobile PWA style):
- Toggle “Disponible / Indisponible”
- “Courses” list (assigned orders only)
- Order detail: restaurant pickup info + customer address + call buttons (tel:) + “Ouvrir itinéraire” (link to Google Maps with query)
- Big workflow buttons:
1) Arrivé au restaurant
2) Commande récupérée
3) Livrée
- Proof of delivery optional: checkbox + note field (store in order)
- Earnings: daily summary

BOSS/ADMIN INTERFACE:
- Live dashboard KPIs (mock computed from orders):
- CA jour, commandes, panier moyen, temps moyen préparation, temps moyen livraison, taux annulation
- Orders table with search + filters by status + export CSV (client-side)
- Manage menu (simple CRUD in UI stored in localStorage): add/edit products, prices, availability
- Manage couriers: add/edit, enable/disable, set availability
- Dispatch:
- Manual assign courier to an order (ready/accepted/preparing)
- Simple auto-assign button: assign nearest “available” courier (simulate with random distance score)
- Settings: delivery fee rules (flat fee + free over X€), opening hours (display only)

SEED DATA:
- Provide 10 pizzas, 4 drinks, 4 desserts with realistic French names and prices
- Provide 3 couriers
- Provide a “Restaurant” fixed address used for pickup

QUALITY BAR:
- No broken interactions
- Avoid long code duplication: create small helper functions/components in JS (template strings)
- Use accessible semantics (buttons, labels, aria where needed)
- Include a small README section at bottom of page (collapsible) explaining the demo and limitations.

Finally: output ONLY the full index.html content.