<!doctype html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="google-site-verification" content="3KCu5cbGDmR-r2S-T9-hxGnuCx62Ovv3e52bWSUnB58" />
    
    <!-- CSP is delivered via Netlify response headers (see netlify.toml) -->

    <!-- Favicon optimisé et professionnel -->
    <link rel="icon" type="image/webp" sizes="32x32" href="/favicon-32x32.webp" />
    <link rel="icon" type="image/webp" sizes="16x16" href="/favicon-16x16.webp" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.webp" />
    <link rel="manifest" href="/manifest.json" />
    <link rel="icon" type="image/x-icon" href="/favicons/favicon.ico" />
    <link rel="icon" type="image/webp" sizes="192x192" href="/android-chrome-192x192.webp" />
    <link rel="icon" type="image/webp" sizes="512x512" href="/android-chrome-512x512.webp" />
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    
    <!-- Préchargement DNS pour les domaines critiques -->
    <link rel="dns-prefetch" href="https://www.googletagmanager.com" />
    <link rel="dns-prefetch" href="https://www.google-analytics.com" />
    
    <!-- Préchargement des ressources critiques -->
    <link rel="preload" href="/fonts/inter-v19-latin-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="preload" href="/fonts/inter-v19-latin-700.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    
    <!-- SEO Meta Tags optimisés et professionnels -->
    <title>Elyes Allani - Portfolio BTS SIO SLAM | Développeur Full-Stack Montpellier</title>
    <meta name="description" content="Portfolio professionnel d'Elyes Allani, étudiant en BTS SIO option SLAM à Montpellier. Développeur Full-Stack spécialisé en React, PHP, Node.js. Découvrez mes projets, stages et compétences techniques. Recherche stage et opportunités professionnelles." />
    <meta name="keywords" content="Elyes Allani, BTS SIO, SLAM, développeur, full-stack, React, PHP, Node.js, portfolio, stage, alternance, emploi, Montpellier, développeur web, programmeur, informatique, JavaScript, MySQL, Python" />
    <meta name="author" content="Elyes Allani" />
    <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
    <link rel="canonical" href="https://elyes-allani.netlify.app" />
    
    <!-- Open Graph Meta Tags (Facebook, LinkedIn) optimisés -->
    <meta property="og:title" content="Elyes Allani - Portfolio BTS SIO SLAM | Développeur Full-Stack Montpellier" />
    <meta property="og:description" content="Portfolio professionnel d'Elyes Allani, étudiant en BTS SIO option SLAM. Développeur Full-Stack spécialisé en React, PHP, Node.js. Recherche stage et opportunités." />
    <meta property="og:image" content="https://elyes-allani.netlify.app/image.webp" />
    <meta property="og:image:alt" content="Espace de travail de développeur avec ordinateur et code - Portfolio Elyes Allani" />
    <meta property="og:url" content="https://elyes-allani.netlify.app" />
    <meta property="og:type" content="website" />
    <meta property="og:locale" content="fr_FR" />
    <meta property="og:site_name" content="Portfolio Elyes Allani - Développeur BTS SIO SLAM" />
    
    <!-- Twitter Card Meta Tags optimisés -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Elyes Allani - Portfolio BTS SIO SLAM | Développeur Full-Stack" />
    <meta name="twitter:description" content="Portfolio professionnel d'Elyes Allani, étudiant en BTS SIO option SLAM. Développeur Full-Stack spécialisé en React, PHP, Node.js." />
    <meta name="twitter:image" content="https://elyes-allani.netlify.app/image.webp" />
    <meta name="twitter:image:alt" content="Espace de travail de développeur avec ordinateur et code - Portfolio Elyes Allani" />
    <meta name="twitter:creator" content="@elyesallani" />
    
    <!-- Additional SEO optimisé -->
    <meta name="format-detection" content="telephone=no" />
    <meta name="geo.region" content="FR-34" />
    <meta name="geo.placename" content="Montpellier" />
    <meta name="geo.position" content="43.610769;3.876716" />
    <meta name="ICBM" content="43.610769, 3.876716" />
    
    <!-- Structured Data (JSON-LD) externalized for strict CSP compliance -->
    <script type="application/ld+json" src="/ld.json"></script>
    
    <!-- Amélioration de l'accessibilité et chargement des polices -->
    <style>
      /* Définition des polices avec font-display: swap pour une meilleure performance */
      @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: local('Inter'),
             url('/fonts/inter-v19-latin-regular.woff2') format('woff2');
      }
      @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: local('Inter Bold'),
             url('/fonts/inter-v19-latin-700.woff2') format('woff2');
      }
      @font-face {
        font-family: 'Inter';
        font-style: italic;
        font-weight: 400;
        font-display: swap;
        src: local('Inter Italic'),
             url('/fonts/inter-v19-latin-italic.woff2') format('woff2');
      }
      @font-face {
        font-family: 'Inter';
        font-style: italic;
        font-weight: 700;
        font-display: swap;
        src: local('Inter Bold Italic'),
             url('/fonts/inter-v19-latin-700italic.woff2') format('woff2');
      }
    </style>

    <!-- Chargement du CSS critique en ligne -->
    <style id="critical-css">
      /* Contenu critique minimal pour éviter le FOIT/FOUT */
      body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
      @supports (font-variation-settings: normal) {
        body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
      }
    </style>
    
    <!-- Chargement asynchrone du CSS global -->
    <link rel="stylesheet" href="/src/app/globals.css" media="print" onload="this.media='all'">
    <noscript><link rel="stylesheet" href="/src/app/globals.css"></noscript>
    
    <!-- Custom WebSocket client for Vite HMR -->
    <script type="module" crossorigin src="/assets/index-BkfEfXwb.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/react-vendor-Dte3gkYF.js">
    <link rel="modulepreload" crossorigin href="/assets/ui-vendor-BdZyX9sL.js">
    <link rel="stylesheet" crossorigin href="/assets/index-M3bvaoGG.css">
  </head>
  <body>
    <!-- Loading screen optimisé pour améliorer la perception de performance -->
    <div id="loading-screen" class="loading-screen">
      <div class="loading-spinner"></div>
    </div>
    
    <div id="root"></div>
    
    <!-- Skip to main content for accessibility -->
    <a href="/#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-blue-600 text-white px-4 py-2 rounded z-50">
      Aller au contenu principal
    </a>
    
    <!-- Runtime init moved to external script for CSP compliance -->
    <script src="/runtime-init.js" defer></script>
  </body>
</html>