<!doctype html>
<html lang="fr" class="dark">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=yes, maximum-scale=5.0"
    />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="X-Content-Type-Options" content="nosniff" />
    <meta http-equiv="X-XSS-Protection" content="1; mode=block" />
    <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin" />
    <meta http-equiv="Permissions-Policy" content="geolocation=(), microphone=(self), camera=()" />
    <title>VoxaOne - Votre Réceptionniste IA pour Restaurants</title>
    <!-- SEO -->
    <meta
      name="description"
      content="VoxaOne est la réceptionniste IA pour restaurants: prise d'appels, réservations, commandes et support 24/7. Augmentez vos conversions et offrez une expérience client premium avec notre IA conversationnelle avancée."
    />
    <meta
      name="keywords"
      content="réceptionniste IA, restaurant, intelligence artificielle, prise d'appels, réservations, commandes, automatisation restaurant, IA conversationnelle, support client 24/7"
    />
    <meta name="author" content="VoxaOne" />
    <meta
      name="robots"
      content="index,follow,max-snippet:-1,max-image-preview:large,max-video-preview:-1"
    />
    <link rel="canonical" href="https://vocal-ai-agent.netlify.app/" />
    <meta name="theme-color" content="#0b1220" />
    <!-- Open Graph -->
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="VoxaOne" />
    <meta
      property="og:title"
      content="VoxaOne - Réceptionniste IA pour Restaurants | Automatisation Complète"
    />
    <meta
      property="og:description"
      content="Révolutionnez votre restaurant avec notre réceptionniste IA. Prise d'appels automatique, gestion des réservations, commandes en ligne et support client 24/7. Essai gratuit disponible."
    />
    <meta property="og:url" content="https://vocal-ai-agent.netlify.app/" />
    <meta property="og:image" content="https://vocal-ai-agent.netlify.app/logo-ia26.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:locale" content="fr_FR" />
    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta
      name="twitter:title"
      content="Vocal AI Agent - Réceptionniste IA pour Restaurants | Automatisation Complète"
    />
    <meta
      name="twitter:description"
      content="Révolutionnez votre restaurant avec notre réceptionniste IA. Prise d'appels automatique, gestion des réservations, commandes en ligne et support client 24/7."
    />
    <meta name="twitter:image" content="https://vocal-ai-agent.netlify.app/logo-ia26.png" />
    <meta name="twitter:site" content="@VoxaOne" />
    <meta name="twitter:creator" content="@VoxaOne" />
    <!-- Schema.org structured data -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "SoftwareApplication",
        "name": "VoxaOne",
        "description": "Réceptionniste IA pour restaurants avec prise d'appels automatique, gestion des réservations et support client 24/7",
        "url": "https://vocal-ai-agent.netlify.app/",
        "applicationCategory": "BusinessApplication",
        "operatingSystem": "Web",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "EUR",
          "description": "Essai gratuit disponible"
        },
        "provider": {
          "@type": "Organization",
          "name": "VoxaOne",
          "url": "https://vocal-ai-agent.netlify.app/"
        },
        "featureList": [
          "Prise d'appels automatique",
          "Gestion des réservations",
          "Commandes en ligne",
          "Support client 24/7",
          "IA conversationnelle avancée"
        ]
      }
    </script>
    <!-- PWA Manifest -->
    <link rel="manifest" href="/manifest.webmanifest" />

    <!-- Favicon / App Icons -->
    <link rel="icon" type="image/png" href="/logo-ia26.png" />
    <link rel="apple-touch-icon" href="/logo-ia26.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/logo-ia26.png" />

    <!-- PWA Meta Tags -->
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="VoxaOne" />
    <meta name="application-name" content="VoxaOne" />
    <meta name="msapplication-TileColor" content="#0b1220" />
    <meta name="msapplication-config" content="/browserconfig.xml" />
    <!-- Remove CDN Tailwind as we're using it via npm -->

    <!-- DNS Prefetch for external resources -->
    <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
    <link rel="dns-prefetch" href="https://fonts.gstatic.com" />

    <!-- Preconnect for faster font loading -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

    <!-- Preload critical fonts for better LCP -->
    <!-- Preload hero video for better LCP -->
    <link rel="preload" href="/videos/hero-robot.mp4" as="video" type="video/mp4" />

    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=Manrope:wght@500;600&family=Lexend:wght@400;500&display=swap"
      rel="stylesheet"
    />
    <style>
      body {
        font-family: 'Inter', sans-serif;
        --tw-bg-opacity: 1;
        background-color: rgb(17 24 39 / var(--tw-bg-opacity));
      }
      /* Light theme base */
      .theme-light body {
        background-color: #f7fafc;
        color: #0b1220;
      }
      .theme-light .text-white {
        color: #0b1220;
      }
      .theme-light .bg-gray-900 {
        background-color: #ffffff;
      }
      .theme-light .bg-gray-800\/50 {
        background-color: rgba(255, 255, 255, 0.6);
      }
      .theme-light .bg-gray-800\/30 {
        background-color: rgba(255, 255, 255, 0.4);
      }
      .theme-light .text-gray-300 {
        color: #2d3748;
      }
      .theme-light .text-gray-400 {
        color: #4a5568;
      }
      .theme-light .border-gray-700 {
        border-color: #e2e8f0;
      }
      .bg-grid-pattern {
        background-image:
          linear-gradient(to right, rgb(255 255 255 / 0.05) 1px, transparent 1px),
          linear-gradient(to bottom, rgb(255 255 255 / 0.05) 1px, transparent 1px);
        background-size: 2rem 2rem;
      }
      .shine-effect {
        position: relative;
        overflow: hidden;
      }
      .shine-effect::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateX(-100%);
        background-image: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0) 0,
          rgba(255, 255, 255, 0.05) 20%,
          rgba(255, 255, 255, 0.2) 60%,
          rgba(255, 255, 255, 0)
        );
        animation: shine 5s ease-in-out infinite;
      }
      @keyframes shine {
        0% {
          transform: translateX(-100%);
        }
        60% {
          transform: translateX(100%);
        }
        100% {
          transform: translateX(100%);
        }
      }
      /* Logo animation */
      .logo-draw-path {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: stroke-draw 2.5s ease-out forwards;
      }
      @keyframes stroke-draw {
        to {
          stroke-dashoffset: 0;
        }
      }
      /* Glowing border for popular plan */
      .animate-border-glow {
        animation: border-glow 3s linear infinite;
      }
      @keyframes border-glow {
        0%,
        100% {
          border-color: rgb(59 130 246);
          box-shadow: 0 0 10px 0 rgb(59 130 246 / 0.5);
        }
        50% {
          border-color: rgb(96 165 250);
          box-shadow: 0 0 20px 5px rgb(59 130 246 / 0.3);
        }
      }
      /* Respect users who prefer reduced motion */
      @media (prefers-reduced-motion: reduce) {
        * {
          animation: none !important;
          transition: none !important;
          scroll-behavior: auto !important;
        }
      }
      /* Initial state for scroll animations */
      .scroll-animate {
        opacity: 0;
        transform: translateY(30px);
        transition:
          opacity 0.6s ease-out,
          transform 0.6s ease-out;
      }
      .scroll-animate.is-visible {
        opacity: 1;
        transform: translateY(0);
      }
      .scroll-animate > * {
        opacity: 0;
        transform: translateY(20px);
        transition:
          opacity 0.6s ease-out,
          transform 0.6s ease-out;
      }
      .scroll-animate.is-visible > * {
        opacity: 1;
        transform: translateY(0);
      }
      @keyframes fade-in {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .animate-fade-in {
        animation: fade-in 0.5s ease-out forwards;
      }
      /* Mobile menu transition */
      .mobile-menu {
        transition:
          opacity 0.3s ease-in-out,
          transform 0.3s ease-in-out;
      }
      #mouse-glow {
        position: fixed;
        width: 600px;
        height: 600px;
        border-radius: 9999px;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0) 60%);
        pointer-events: none;
        z-index: 9999;
        transition:
          transform 0.1s ease-out,
          opacity 0.3s ease-out;
        transform-origin: center center;
        will-change: transform;
        top: 0;
        left: 0;
      }
      /* Bento Grid Hover Effect */
      .bento-item-interactive::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient(
          400px circle at var(--x) var(--y),
          rgba(59, 130, 246, 0.1),
          transparent 80%
        );
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        pointer-events: none;
      }
      .bento-item-interactive:hover::before {
        opacity: 1;
      }
      /* Bento Grid Icon Animations */
      @keyframes pulse-glow {
        50% {
          box-shadow: 0 0 15px 3px rgb(59 130 246 / 0.25);
        }
      }
      .group:hover .animate-pulse-glow {
        animation: pulse-glow 2s ease-in-out infinite;
      }
      @keyframes conversation-wave {
        0%,
        100% {
          transform: scaleY(0.7);
        }
        50% {
          transform: scaleY(1.3);
        }
      }
      .group:hover .conversation-bar {
        animation: conversation-wave 1.2s ease-in-out infinite;
      }
      /* Analytics Chart Animations */
      .animate-path-draw {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
      }
      .is-visible .animate-path-draw {
        animation: draw-path 2s ease-out forwards;
      }
      @keyframes draw-path {
        to {
          stroke-dashoffset: 0;
        }
      }
      .animate-width-fill {
        width: 0%;
        transition: width 1.5s cubic-bezier(0.25, 1, 0.5, 1) 0.5s;
      }
      .is-visible .animate-width-fill {
        width: var(--final-width);
      }
      /* Hero Phone Chat Animation */
      .hero-bubble {
        opacity: 0;
        transform: translateY(10px);
        transition:
          opacity 0.5s ease-out,
          transform 0.5s ease-out;
      }
      .hero-bubble-visible {
        opacity: 1;
        transform: translateY(0);
      }
      /* How It Works Section Animation */
      .how-it-works-step {
        opacity: 0;
        transform: translateY(30px);
        transition:
          opacity 0.6s ease-out,
          transform 0.6s ease-out;
      }
      .is-visible .how-it-works-step {
        opacity: 1;
        transform: translateY(0);
      }
      /* Use Case Section Chat Animation */
      @keyframes fade-in-up-bubble {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .use-case-chat-bubble {
        animation: fade-in-up-bubble 0.5s ease-out forwards;
        opacity: 0;
      }
      /* Masking classes for cross-browser compatibility */
      .radial-mask-hero {
        -webkit-mask-image: radial-gradient(ellipse at center, transparent 20%, black);
        mask-image: radial-gradient(ellipse at center, transparent 20%, black);
      }
      .radial-mask-cta {
        -webkit-mask-image: radial-gradient(closest-side, white, transparent);
        mask-image: radial-gradient(closest-side, white, transparent);
      }
      /* Custom select for cross-browser consistency */
      .custom-select {
        -webkit-appearance: none;
        -moz-appearance: none;
             appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.5rem center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;
        padding-right: 2.5rem;
      }
      /* Custom scrollbar for Webkit browsers */
      ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }
      ::-webkit-scrollbar-track {
        background: rgb(17 24 39); /* bg-gray-900 */
      }
      ::-webkit-scrollbar-thumb {
        background: #4b5563; /* bg-gray-600 */
        border-radius: 4px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: #6b7280; /* bg-gray-500 */
      }
      /* Mobile Performance Optimizations */
      @media (max-width: 768px) {
        /* Reduce animations on mobile for better performance */
        * {
          animation-duration: 0.3s !important;
          transition-duration: 0.2s !important;
        }

        /* Optimize touch targets */
        button,
        a,
        input,
        select,
        textarea {
          min-height: 44px;
          min-width: 44px;
        }

        /* Prevent zoom on input focus */
        input,
        select,
        textarea {
          font-size: 16px;
        }

        /* Optimize scrolling */
        body {
          -webkit-overflow-scrolling: touch;
          overscroll-behavior: contain;
        }

        /* Reduce motion for better battery life */
        .animate-spin {
          animation-duration: 1s;
        }

        /* Mobile responsive utilities */
        .container {
          padding-left: 1rem;
          padding-right: 1rem;
        }

        /* Mobile navigation */
        .mobile-nav {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(17, 24, 39, 0.95);
          backdrop-filter: blur(10px);
          z-index: 50;
        }

        /* Mobile text sizing */
        h1 {
          font-size: 2rem;
          line-height: 1.2;
        }
        h2 {
          font-size: 1.75rem;
          line-height: 1.3;
        }
        h3 {
          font-size: 1.5rem;
          line-height: 1.4;
        }

        /* Mobile spacing */
        .section-padding {
          padding-top: 3rem;
          padding-bottom: 3rem;
        }
      }
      /* Tablet optimizations */
      @media (min-width: 769px) and (max-width: 1024px) {
        .container {
          padding-left: 2rem;
          padding-right: 2rem;
        }

        .section-padding {
          padding-top: 4rem;
          padding-bottom: 4rem;
        }
      }
      /* Desktop optimizations */
      @media (min-width: 1025px) {
        .container {
          max-width: 1200px;
          margin-left: auto;
          margin-right: auto;
          padding-left: 2rem;
          padding-right: 2rem;
        }

        .section-padding {
          padding-top: 5rem;
          padding-bottom: 5rem;
        }
      }
      /* PWA Safe Area Support */
      @supports (padding: max(0px)) {
        .safe-area-inset-top {
          padding-top: max(1rem, env(safe-area-inset-top));
        }
        .safe-area-inset-bottom {
          padding-bottom: max(1rem, env(safe-area-inset-bottom));
        }
        .safe-area-inset-left {
          padding-left: max(1rem, env(safe-area-inset-left));
        }
        .safe-area-inset-right {
          padding-right: max(1rem, env(safe-area-inset-right));
        }
      }
      /* iOS PWA Status Bar */
      @media (display-mode: standalone) {
        body {
          padding-top: env(safe-area-inset-top);
          padding-bottom: env(safe-area-inset-bottom);
        }
      }
      /* Prevent text size adjustment on mobile */
      html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
      }
      /* Optimize font rendering on mobile */
      body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
      }
      /* Accessible skip link */
      .skip-link {
        position: absolute;
        top: -1000px;
        left: 0;
        background: #ffffff;
        color: #111827;
        padding: 0.5rem 0.75rem;
        border-radius: 0.375rem;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        z-index: 10000;
      }
      .skip-link:focus,
      .skip-link:focus-visible {
        top: 0.5rem;
        left: 0.5rem;
        outline: 2px solid #60a5fa;
        outline-offset: 2px;
      }
    </style>
    <script type="module" crossorigin src="/assets/index-DR9GAMQW.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-cWrvjkht.css">
  </head>
  <body class="bg-gray-900 text-gray-100">
    <a href="#main-content" class="skip-link">Passer au contenu principal</a>
    
    <!-- Expanding Square Page Loader -->
    <!-- Loader removed -->

    
    <div id="root" role="application" aria-label="Application VoxaOne"></div>
    <!-- Dev-only: unregister any stale service workers that could hijack requests -->
    <script>
      if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') {
        if ('serviceWorker' in navigator) {
          navigator.serviceWorker
            .getRegistrations()
            .then((regs) => {
              regs.forEach((reg) => reg.unregister().catch(() => {}));
            })
            .catch(() => {});
        }
      }
    </script>
  </body>
</html>
