<!doctype html>
<html lang="fr">
  <head>
    <!-- Google Tag Manager - CHARGEMENT SUR INTERACTION SEULEMENT -->
    <!-- End Google Tag Manager -->

    <meta charset="UTF-8" />
    <!-- Favicon par défaut - sera mis à jour dynamiquement par SEOHead.tsx -->
    <link rel="icon" type="image/png" href="/assets/SubmitSMART.ai - FLAVICON.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/SubmitSMART.ai - FLAVICON.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <title>Loading...</title>

    <!-- 🚀 CSS CRITIQUE INLINE - Performance +15 points -->
    <style>
      /* Reset critique */
      *,*:before,*:after{box-sizing:border-box;margin:0;padding:0}
      
      /* Layout de base */
      html{scroll-behavior:smooth;background-color:#000;line-height:1.5;font-family:ui-sans-serif,system-ui,sans-serif}
      body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background-color:#000;color:#fff;min-height:100vh;-webkit-font-smoothing:antialiased}
      #root{min-height:100vh;background-color:#000}
      
      /* Container critique */
      .container{width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}
      @media (min-width:640px){.container{max-width:640px}}
      @media (min-width:768px){.container{max-width:768px}}
      @media (min-width:1024px){.container{max-width:1024px}}
      @media (min-width:1280px){.container{max-width:1280px}}
      @media (min-width:1400px){.container{max-width:1400px}}
      
      /* Layout critique */
      .fixed{position:fixed}.relative{position:relative}.absolute{position:absolute}
      .inset-0{top:0;right:0;bottom:0;left:0}
      .z-50{z-index:50}.z-10{z-index:10}
      .flex{display:flex}.block{display:block}.hidden{display:none}
      .min-h-screen{min-height:100vh}
      .w-full{width:100%}.h-full{height:100%}
      
      /* Typography critique */
      .text-white{color:#fff}.text-gray-300{color:#d1d5db}
      .font-bold{font-weight:700}.font-semibold{font-weight:600}
      .text-3xl{font-size:1.875rem;line-height:2.25rem}
      .text-xl{font-size:1.25rem;line-height:1.75rem}
      .text-lg{font-size:1.125rem;line-height:1.75rem}
      
      /* Background critique */
      .bg-black{background-color:#000}
      .bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}
      .from-orange-600{--tw-gradient-from:#ea580c;--tw-gradient-to:rgb(234 88 12 / 0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
      .to-orange-800{--tw-gradient-to:#9a3412}
      
      /* Navigation critique */
      .items-center{align-items:center}
      .justify-center{justify-content:center}
      .justify-between{justify-content:space-between}
      .space-x-4>:not([hidden])~:not([hidden]){margin-left:1rem}
      
      /* Buttons critique */
      .px-6{padding-left:1.5rem;padding-right:1.5rem}
      .py-3{padding-top:.75rem;padding-bottom:.75rem}
      .rounded-lg{border-radius:.5rem}
      .transition{transition-property:color,background-color,border-color,opacity,transform;transition-duration:.15s}
      
      /* Orange theme critique */
      .text-orange-600{color:#ea580c}
      .bg-orange-600{background-color:#ea580c}
      .border-orange-600{border-color:#ea580c}
      
      /* Loading states */
      .opacity-0{opacity:0}.opacity-100{opacity:1}
      .animate-spin{animation:spin 1s linear infinite}
      @keyframes spin{to{transform:rotate(360deg)}}
    </style>

    <!-- Schema.org JSON-LD sera géré dynamiquement par SEOHead via company files -->

    <!-- Meta SEO - Gérés dynamiquement par SEOHead.tsx -->
    <meta name="robots" content="index, follow" />
    <meta
      name="googlebot"
      content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1"
    />
    <meta name="theme-color" content="#ea580c" />
    <meta name="color-scheme" content="dark light" />
    <meta name="format-detection" content="telephone=yes" />
    <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" />
    <!-- App names - Gérés dynamiquement par SEOHead.tsx -->
    <meta name="msapplication-TileColor" content="#ea580c" />
    <meta name="msapplication-config" content="/browserconfig.xml" />



    <!-- Open Graph, Twitter, Canonicals - Gérés dynamiquement par SEOHead.tsx -->

    <!-- Schema.org JSON-LD sera géré dynamiquement par SEOHead via company files -->

    <!-- CSS Critique inline pour Core Web Vitals -->
    <style>
      /* Critical CSS - Above the fold optimisation */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.5;
      }
      body {
        background-color: #000;
        color: #fff;
        font-family:
          'Inter',
          -apple-system,
          BlinkMacSystemFont,
          'Segoe UI',
          Roboto,
          sans-serif;
      }

      /* Font fallback pour éviter CLS */
      .font-inter {
        font-family:
          'Inter',
          -apple-system,
          BlinkMacSystemFont,
          'Segoe UI',
          Roboto,
          sans-serif;
      }

      /* Header critique */
      .header-critical {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.95);
        -webkit-backdrop-filter: blur(8px);
                backdrop-filter: blur(8px);
        z-index: 50;
        border-bottom: 1px solid #374151;
        height: 80px;
      }

      /* Hero critique */
      .hero-critical {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 80px;
        background: linear-gradient(135deg, #111827, #000);
      }
      .hero-title {
        font-size: clamp(3rem, 9vw, 5rem);
        font-weight: 700;
        background: linear-gradient(135deg, #fff, #ea580c, #dc2626);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 1.5rem;
        line-height: 1.1;
        max-width: 100%;
      }

      /* Images optimisées pour éviter CLS */
      img {
        height: auto;
        max-width: 100%;
      }
      .logo-optimized {
        width: 48px;
        height: 48px;
        aspect-ratio: 1/1;
      }

      /* Prévention Layout Shift */
      .avatar-placeholder {
        width: 64px;
        height: 64px;
        background: #374151;
        border-radius: 50%;
        display: inline-block;
      }
      .image-container {
        position: relative;
        overflow: hidden;
      }
      .image-loading {
        background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
      }

      @keyframes loading {
        0% {
          background-position: 200% 0;
        }
        100% {
          background-position: -200% 0;
        }
      }

      /* Boutons critiques */
      .btn-primary {
        background: linear-gradient(135deg, #ea580c, #dc2626);
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        font-weight: 600;
        text-decoration: none;
        display: inline-block;
        transition: transform 0.2s;
      }
      .btn-primary:hover {
        transform: translateY(-2px);
      }

      /* Layout fixes pour CLS */
      .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1rem;
      }
      @media (min-width: 640px) {
        .container {
          padding: 0 1.5rem;
        }
      }
      @media (min-width: 1024px) {
        .container {
          padding: 0 2rem;
        }
      }

      /* SEO 2025 - WCAG 2.1 AA Accessibility */
      /* Focus visible amélioré */
      *:focus-visible {
        outline: 3px solid #ea580c;
        outline-offset: 2px;
        border-radius: 4px;
      }

      /* Touch targets 44x44px minimum */
      button,
      input,
      select,
      textarea {
        min-height: 44px;
        min-width: 44px;
      }

      /* Exception pour les checkboxes - taille normale - FORCE OVERRIDE */
      input[type='checkbox'] {
        min-height: auto !important;
        min-width: auto !important;
        width: 1rem !important; /* 16px */
        height: 1rem !important; /* 16px */
        max-width: 1rem !important;
        max-height: 1rem !important;
      }

      /* Exception pour les boutons d'action du dashboard admin - COMPACT */
      .dashboard-admin-button {
        min-height: auto !important;
        min-width: auto !important;
      }

      /* Footer links - espacement intermédiaire */
      footer a {
        min-height: 28px; /* Entre auto et 44px - espacement modéré */
        min-width: auto;
      }

      /* Contraste couleurs amélioré pour WCAG AA */
      .text-gray-400 {
        color: #9ca3af;
      } /* Ratio 4.5:1 sur fond noir */
      .text-gray-300 {
        color: #d1d5db;
      } /* Ratio 7:1 sur fond noir */

      /* Skip links pour navigation clavier */
      .skip-link {
        position: absolute;
        top: -40px;
        left: 6px;
        background: #ea580c;
        color: white;
        padding: 8px;
        border-radius: 4px;
        text-decoration: none;
        z-index: 9999;
      }

      .skip-link:focus {
        top: 6px;
      }

      /* Optimisation Layout Shift - Containment */
      .header-critical {
        contain: layout style;
      }
      .hero-critical {
        contain: layout style;
      }
      main {
        contain: layout style;
      }
      

      /* CORRECTION FINALE CHECKBOXES ET RADIO BUTTONS - DERNIÈRE PRIORITÉ ABSOLUE */
      html body input[type='checkbox'],
      html body input[type='radio'] {
        min-height: 16px !important;
        min-width: 16px !important;
        width: 16px !important;
        height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
        box-sizing: border-box !important;
      }
      
      /* 🚀 CSS CRITIQUE INLINE - Above the fold (3KB) */
      *,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
      html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}
      body{margin:0;line-height:inherit;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#000;color:#fff;min-height:100vh}
      #root{min-height:100vh;background-color:#000}
      .container{width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem}
      .min-h-screen{min-height:100vh}.bg-black{background-color:#000}.text-white{color:#fff}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.flex{display:flex}.grid{display:grid}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.w-full{width:100%}.h-full{height:100%}.top-0{top:0}.z-50{z-index:50}.z-10{z-index:10}
      .pt-8{padding-top:2rem}.pt-12{padding-top:3rem}.pt-20{padding-top:5rem}.pt-24{padding-top:6rem}.pt-28{padding-top:7rem}.pb-12{padding-bottom:3rem}.pb-16{padding-bottom:4rem}
      .text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-7xl{font-size:4.5rem;line-height:1}.font-bold{font-weight:700}.text-transparent{color:transparent}.bg-clip-text{-webkit-background-clip:text;background-clip:text}
      .bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-white{--tw-gradient-from: #fff var(--tw-gradient-from-position);--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.via-orange-400{--tw-gradient-to: rgb(251 146 60 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #fb923c var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-red-600{--tw-gradient-to: #dc2626 var(--tw-gradient-to-position)}
      .text-gray-300{color:#e5e7eb}.text-orange-400{color:#fb923c}.text-orange-600{color:#f97316}
      .from-orange-600{--tw-gradient-from: #ea580c var(--tw-gradient-from-position);--tw-gradient-to: rgb(234 88 12 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-red-600{--tw-gradient-to: #dc2626 var(--tw-gradient-to-position)}.rounded-full{border-radius:9999px}.px-8{padding-left:2rem;padding-right:2rem}.py-4{padding-top:1rem;padding-bottom:1rem}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\\:scale-105:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
      /* Amélioration contraste pour accessibilité */
      .border-gray-600\/50{border-color:#6b728080}.text-gray-400{color:#9ca3af}
      .hover\\:text-orange-600:hover{color:#ea580c}.hover\\:border-orange-500:hover{border-color:#f97316}
      
      /* 🛡️ CORRECTION CLS - Dimensions fixes pour éviter layout shifts */
      .hero-container{min-height:100vh;display:flex;flex-direction:column}
      .hero-buttons{min-height:80px;display:flex;align-items:center;gap:1rem}
      .hero-grid{min-height:400px}
      
      /* Font loading optimization */
      @font-face{font-family:'Inter';font-display:swap;src:local('Inter')}
      
      /* Prevent layout shifts during font loading */
      .font-inter{font-family:Inter,ui-sans-serif,system-ui,sans-serif}
      @media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}.md\\:text-6xl{font-size:3.75rem;line-height:1}}@media (min-width: 1024px){.container{max-width:1024px}}
    </style>

    <!-- Preconnect CRITIQUES en premier (détection PageSpeed) -->
    <link rel="preconnect" href="https://ipapi.co" />
    <link rel="preconnect" href="https://udmjstmqxpkwlutugugs.supabase.co" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://chatwoot-production-dffc.up.railway.app" />
    <link rel="preconnect" href="https://app.chatwoot.com" />
    <link rel="preconnect" href="https://www.googletagmanager.com" />

    <!-- Preconnect secondaires -->
    <link rel="preconnect" href="https://images.pexels.com" />

    <!-- Preload des ressources critiques -->
    <link
      rel="preload"
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
      as="style"
      onload="this.onload=null;this.rel='stylesheet'"
    />
    <noscript
      ><link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
    /></noscript>

    <!-- PRELOAD géré automatiquement par Vite modulePreload -->

    <!-- CSS critique sera injecté automatiquement par Vite -->

    <!-- DNS Prefetch pour les domaines externes -->
    <link rel="dns-prefetch" href="//hook.us2.make.com" />
    <link rel="dns-prefetch" href="//fonts.googleapis.com" />
    <link rel="dns-prefetch" href="//fonts.gstatic.com" />
    
    <!-- 🚀 CSS CRITIQUE INLINE - Éviter le blocage de rendu -->
    <!-- Le CSS critique est déjà inline ci-dessus -->
    <!-- CSS non-critique chargé de façon asynchrone -->
    <link rel="preload" href="/css/style-cCvn75Eq.css" as="style" onload="this.onload=null;this.rel='stylesheet'" media="print">
    <noscript><link rel="stylesheet" href="/css/style-cCvn75Eq.css"></noscript>
    <script>
      // Force le chargement asynchrone du CSS après le rendu initial
      setTimeout(() => {
        const link = document.querySelector('link[href*="style-cCvn75Eq.css"]');
        if (link) link.media = 'all';
      }, 100);
    </script>
    <script type="module" crossorigin src="/assets/index-CrTLAfUb.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/vendor-DjoGpwFI.js">
    <link rel="stylesheet" crossorigin href="/css/style.css">
  </head>
  <body>
    <!-- Google Tag Manager (noscript) -->
    <noscript>
      <iframe
        src="https://www.googletagmanager.com/ns.html?id=GTM-MZWZV2PQ"
        height="0"
        width="0"
        style="display: none; visibility: hidden"
      ></iframe>
    </noscript>
    <!-- End Google Tag Manager (noscript) -->

    <div id="root"></div>

    <!-- Chatwoot Widget maintenant géré par ChatwootWidget.tsx -->
  </body>
</html>
