<!doctype html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

    <!-- Resource hints — performance -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://nqpfmnsecjhqxuvfkqhi.supabase.co" crossorigin />
    <link rel="preconnect" href="https://api.groq.com" crossorigin />
    <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
    <link rel="dns-prefetch" href="https://plausible.io" />
    <link rel="dns-prefetch" href="https://browser.sentry-cdn.com" />

    <!-- Hreflang — multilingual SEO -->
    <link rel="alternate" hreflang="fr" href="https://abawi.app/" />
    <link rel="alternate" hreflang="en" href="https://abawi.app/?lang=en" />
    <link rel="alternate" hreflang="x-default" href="https://abawi.app/" />

    <!-- Primary meta -->
    <title>ABAWI — Guides Premium, Outils IA et Académie Business pour l'Afrique</title>
    <meta name="description" content="Portail premium africain : guides business, outils IA (CV, business plan, finance, juridique), académie Bac, actualités économiques. Créez vos documents professionnels en 5 minutes." />
    <meta name="keywords" content="ABAWI, business plan Afrique, CV Sénégal, outils IA, OHADA, SYSCOHADA, académie Bac, guides business, fintech, entrepreneuriat africain, UEMOA, BCEAO" />
    <meta name="author" content="ABAWI SN" />
    <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
    <link rel="canonical" href="https://abawi.app/" />

    <!-- Icons / PWA — logo vert ABAWI (favicon-abawi-192.png 192×192 requis par Google) -->
    <link rel="shortcut icon" type="image/png" sizes="48x48"   href="/favicon-32x32.png" />
    <link rel="icon"          type="image/png" sizes="16x16"   href="/favicon-16x16.png" />
    <link rel="icon"          type="image/png" sizes="32x32"   href="/favicon-32x32.png" />
    <link rel="icon"          type="image/png" sizes="96x96"   href="/favicon-96x96.png" />
    <link rel="icon"          type="image/png" sizes="192x192" href="/favicon-abawi-192.png" />
    <link rel="icon"          type="image/png" sizes="512x512" href="/favicon-abawi-512.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png" />
    <link rel="apple-touch-icon" sizes="192x192" href="/favicon-abawi-192.png" />
    <link rel="manifest" href="/manifest.json" />
    <meta name="theme-color" content="#4CAF50" />
    <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="ABAWI" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="application-name" content="ABAWI Portal" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="color-scheme" content="dark light" />

    <!-- Open Graph (Facebook, LinkedIn, WhatsApp) -->
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="ABAWI" />
    <meta property="og:title" content="ABAWI — Guides Premium, Outils IA et Académie Business pour l'Afrique" />
    <meta property="og:description" content="Portail premium africain : guides business, outils IA (CV, business plan, finance, juridique), académie Bac, actualités économiques." />
    <meta property="og:url" content="https://abawi.app/" />
    <meta property="og:image" content="https://abawi.app/abawi-og-banner.jpg" />
    <meta property="og:image:secure_url" content="https://abawi.app/abawi-og-banner.jpg" />
    <meta property="og:image:alt" content="ABAWI — Portail premium africain de guides business, outils IA et académie" />
    <meta property="og:image:type" content="image/jpeg" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:locale" content="fr_SN" />

    <!-- Twitter / X -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@abawi_sn" />
    <meta name="twitter:creator" content="@abawi_sn" />
    <meta name="twitter:title" content="ABAWI — Excellence Africaine" />
    <meta name="twitter:description" content="Guides, outils IA et académie business pour l'Afrique de l'Ouest." />
    <meta name="twitter:image" content="https://abawi.app/abawi-og-banner.jpg" />

    <!-- JSON-LD structured data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Organization",
      "name": "ABAWI SN",
      "url": "https://abawi.app/",
      "logo": "https://abawi.app/favicon-abawi-512.png",
      "description": "Portail premium africain de guides business, outils IA, académie Bac et actualités économiques.",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "VDN Liberté 6 Extension",
        "addressLocality": "Dakar",
        "addressCountry": "SN"
      },
      "contactPoint": {
        "@type": "ContactPoint",
        "telephone": "+221775185050",
        "contactType": "customer service",
        "areaServed": "SN",
        "availableLanguage": ["French", "English"]
      },
      "sameAs": [
        "https://www.instagram.com/abawi",
        "https://www.facebook.com/abawi",
        "https://www.tiktok.com/@abawi_sn"
      ]
    }
    </script>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "name": "ABAWI",
      "url": "https://abawi.app/",
      "potentialAction": {
        "@type": "SearchAction",
        "target": "https://abawi.app/?q={search_term_string}",
        "query-input": "required name=search_term_string"
      }
    }
    </script>

    <!-- Preload logo navbar (above-the-fold, loading=eager) -->
    <link rel="preload" as="image" href="/nav-logo-abawi.png" type="image/png" fetchpriority="high" />

    <!-- Fonts — chargement asynchrone pour ne pas bloquer le LCP.
         La police système (Outfit,system-ui) est définie dans le critical CSS,
         donc aucun FOUC visible : le texte s'affiche directement en fallback. -->
    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Syne:wght@700;800&display=swap&subset=latin" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Syne:wght@700;800&display=swap&subset=latin" media="print" onload="this.media='all'" />
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Syne:wght@700;800&display=swap&subset=latin" /></noscript>
    <!-- Polices supplémentaires pour Pro Card Élite (chargées en différé, non bloquantes) -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Playfair+Display:wght@600;700;800&family=Space+Mono:wght@400;700&family=Montserrat:wght@500;700;800&family=Poppins:wght@500;600;700&family=Raleway:wght@500;700;800&family=Bebas+Neue&family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:wght@500;700&family=Oswald:wght@500;700&family=Lora:wght@500;700&family=Sora:wght@500;700&family=Manrope:wght@500;700;800&family=Archivo:wght@600;800&family=Libre+Baskerville:wght@700&display=swap" media="print" onload="this.media='all'" />

    <!-- Swiper CSS est bundlé par Vite dans /assets/vendor-swiper-*.css — pas besoin de CDN -->

    <!-- Préchargement pages probables après accueil -->
    <link rel="prefetch" href="/outils" as="document" />
    <link rel="prefetch" href="/news" as="document" />
    <link rel="prefetch" href="/digital" as="document" />

    <!-- Critical inline CSS — rendu immédiat sans blocage (above-the-fold) -->
    <style>
      *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
      html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
      body{font-family:'Outfit',system-ui,-apple-system,sans-serif;background:#111;color:#f4f4f5;min-height:100vh;overflow-x:hidden}
      #root{min-height:100vh;position:relative}
      /* ── Anti-FOUC : cache le HTML SEO statique injecté dans #root avant que
         React ne monte. Appliqué avant le premier paint (style inline dans <head>).
         Les crawlers lisent quand même le DOM — seul l'affichage visuel est masqué. */
      #prerender{
        position:absolute;width:1px;height:1px;padding:0;margin:-1px;
        overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
        pointer-events:none;
      }
      /* Barre de chargement animée — visible tant que #root ne contient que
         du contenu non-React (prerender uniquement, pas d'éléments React) */
      #root:not(:has(> :not(#prerender,noscript)))::before{
        content:'';display:block;width:100%;height:4px;
        background:linear-gradient(90deg,#10B981 0%,#059669 50%,#10B981 100%);
        background-size:200% 100%;
        animation:abs-load 1.4s ease-in-out infinite;
        position:fixed;top:0;left:0;z-index:9999;
      }
      /* Fallback :empty pour navigateurs sans :has() */
      #root:empty::before{
        content:'';display:block;width:100%;height:4px;
        background:linear-gradient(90deg,#10B981 0%,#059669 50%,#10B981 100%);
        background-size:200% 100%;
        animation:abs-load 1.4s ease-in-out infinite;
        position:fixed;top:0;left:0;z-index:9999;
      }
      @keyframes abs-load{0%{background-position:200% 0}100%{background-position:-200% 0}}
      /* Prevent layout shift for navbar */
      .nav-root{height:60px}
      img{max-width:100%;height:auto}
    </style>
    <script type="module" crossorigin src="/assets/index-EdTpbBXo.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/rolldown-runtime-BENE6YOx.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-babel-C-RYcyge.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-fast-png-C9FYS9Nc.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-fflate-BhJDgCm0.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-jspdf-CWjnJwTG.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-monaco-editor-Dcr7QcOd.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-hoist-non-react-statics-C-4DeuoR.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-its-fine-C0PD9-Ki.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-react-BtenfR2U.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-react-oauth-GogYOkH8.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-maps-CNvYo8Uc.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-react-dom-DMFGHm3c.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-router-Cqc7sBqF.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-swiper-CO_uRZcJ.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-web-vitals-7JbL5xPX.js">
    <link rel="modulepreload" crossorigin href="/assets/observability-DLNXv1Fy.js">
    <link rel="modulepreload" crossorigin href="/assets/AudioContext-B4Wy2KN5.js">
    <link rel="modulepreload" crossorigin href="/assets/referral-CFMSb94U.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-iceberg-js-B1zMw3ey.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-supabase-CGWKEY13.js">
    <link rel="modulepreload" crossorigin href="/assets/supabase-B0JJrujb.js">
    <link rel="modulepreload" crossorigin href="/assets/AuthContext-BT2saI_8.js">
    <link rel="modulepreload" crossorigin href="/assets/AudioPlayer-CJMO4ik-.js">
    <link rel="modulepreload" crossorigin href="/assets/plans-CS5hgFp-.js">
    <link rel="modulepreload" crossorigin href="/assets/PremiumCTA-D8LRvu6m.js">
    <link rel="modulepreload" crossorigin href="/assets/SEO-zJ2oV8H2.js">
    <link rel="modulepreload" crossorigin href="/assets/AbTalkLogoSVG-1SzXXaR9.js">
    <link rel="modulepreload" crossorigin href="/assets/ArkelUpLogo-BjFDa0Mx.js">
    <link rel="modulepreload" crossorigin href="/assets/BackgroundJobsContext-61u6OcNB.js">
    <link rel="modulepreload" crossorigin href="/assets/FavContext-C-XUVbEI.js">
    <link rel="modulepreload" crossorigin href="/assets/ThemeContext-Cn19--yX.js">
    <link rel="modulepreload" crossorigin href="/assets/ToastContext-D0Ly0i8X.js">
    <link rel="stylesheet" crossorigin href="/assets/vendor-maps-CHtXxHHg.css">
    <link rel="stylesheet" crossorigin href="/assets/vendor-swiper-Dm7DhASN.css">
    <link rel="stylesheet" crossorigin href="/assets/AudioPlayer-DyHgjBd8.css">
    <link rel="stylesheet" crossorigin href="/assets/ToastContext-BEKf0iF-.css">
    <link rel="stylesheet" crossorigin href="/assets/index-BSI82npC.css">
  </head>
  <body>
    <div id="root">
      <!-- Fallback d'urgence : visible si React ne monte pas dans les 10s -->
      <noscript>
        <div style="padding:40px;text-align:center;font-family:sans-serif;color:#fff;background:#111;min-height:100vh;">
          <h2>JavaScript requis</h2><p style="color:#aaa;">Veuillez activer JavaScript pour utiliser ABAWI.</p>
        </div>
      </noscript>
      <div id="react-fallback" style="display:none;padding:40px;text-align:center;font-family:sans-serif;color:#fff;background:#111;min-height:100vh;">
        <h2>Chargement lent ou erreur</h2>
        <p style="color:#aaa;margin:12px 0;">Si cette page reste bloquée, videz le cache et rechargez.</p>
        <button onclick="location.reload(true)" style="margin-top:12px;padding:12px 24px;background:#10B981;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:700;">Recharger la page</button>
      </div>
    </div>
    <script>
      // Nettoyage SW en dev — exécuté avant tout chargement de module
      ;(function() {
        var isDev = location.hostname === 'localhost' || location.hostname === '127.0.0.1'
        if (!isDev || !('serviceWorker' in navigator)) return
        navigator.serviceWorker.getRegistrations().then(function(regs) {
          if (!regs.length) return
          Promise.all(regs.map(function(r){ return r.unregister() })).then(function() {
            return 'caches' in window ? caches.keys().then(function(k){ return Promise.all(k.map(function(c){ return caches.delete(c) })) }) : null
          }).then(function() { location.reload() })
        })
      })()
    </script>
    <script src="/sw-loader.js" defer></script>
    <script>
      // Affiche le fallback si React ne monte pas dans les 10 secondes.
      // Détection robuste : on ignore #prerender et noscript (contenu non-React).
      setTimeout(function() {
        var root = document.getElementById('root')
        var fb = document.getElementById('react-fallback')
        if (!root || !fb) return
        var reactMounted = false
        for (var i = 0; i < root.children.length; i++) {
          var child = root.children[i]
          var id = child.id || ''
          var tag = (child.tagName || '').toLowerCase()
          if (id !== 'prerender' && id !== 'react-fallback' && tag !== 'noscript') {
            reactMounted = true
            break
          }
        }
        if (!reactMounted) { fb.style.display = 'block' }
      }, 10000)
    </script>
  </body>
</html>
