<!DOCTYPE html>
<html lang="fr">

<head>
  <!-- Preconnect & DNS prefetch -->
  <link rel="preconnect" href="https://ppfstoreloc.cloud" crossorigin>
  <link rel="preconnect" href="https://images.unsplash.com">
  <link rel="dns-prefetch" href="https://www.googletagmanager.com">

  <!-- Preload LCP hero image -->
  <link rel="preload" as="image" href="https://images.unsplash.com/photo-1503387762-592deb58ef4e?q=80&w=800&auto=format&fit=crop&fm=webp" fetchpriority="high">

  <!-- GTM: chargement différé après DOMContentLoaded pour ne pas bloquer le FCP -->
  <script>
    window.addEventListener('DOMContentLoaded', function() {
      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-WXTXBL6X');
    });
  </script>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>PPF Rénovation - Trouvez votre agence</title>

  <!-- Favicons -->
  <link rel="icon" type="image/png" href="/favicon.png" />
  <link rel="apple-touch-icon" sizes="180x180" href="/favicon.png" />
  <link rel="manifest" href="/site.webmanifest" />

  <!-- Google Fonts: Poppins (PPF Brand Font) — preload, non-blocking -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="preload" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap"></noscript>

  <!-- Font Awesome: preload CSS, apply after load (non-blocking) -->
  <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"></noscript>

  <style>
    /* Custom Map Height for Mobile/Desktop */
    .map-container {
      height: 400px;
      z-index: 0;
    }

    @media (min-width: 768px) {
      .map-container {
        height: calc(100vh - 64px);
        /* Full height minus header */
      }
    }

    /* Custom Scrollbar */
    .scrollbar-thin::-webkit-scrollbar {
      width: 6px;
    }
    .scrollbar-thin::-webkit-scrollbar-track {
      background: #f1f1f1;
    }
    .scrollbar-thin::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 3px;
    }
    .scrollbar-thin::-webkit-scrollbar-thumb:hover {
      background: #a1a1a1;
    }

    /* Mobile scroll fix for agency list container */
    @media (max-width: 767px) {
      .agency-list-scroll {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
      }
    }

    .scrollbar-hide::-webkit-scrollbar {
      display: none;
    }
    .scrollbar-hide {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    /* Animations */
    @keyframes shimmer {
      0% {
        background-position: -1000px 0;
      }

      100% {
        background-position: 1000px 0;
      }
    }

    @keyframes fade-in {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    @keyframes fade-in-up {
      0% {
        opacity: 0;
        transform: translateY(20px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes slide-in-left {
      0% {
        opacity: 0;
        transform: translateX(-30px);
      }

      100% {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes scale-in {
      0% {
        opacity: 0;
        transform: scale(0.95);
      }

      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    .animate-shimmer {
      animation: shimmer 2s infinite linear;
      background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
      background-size: 1000px 100%;
    }

    .animate-fade-in {
      animation: fade-in 0.5s ease-out;
    }

    .animate-fade-in-up {
      animation: fade-in-up 0.6s ease-out;
    }

    .animate-slide-in-left {
      animation: slide-in-left 0.5s ease-out;
    }

    .animate-scale-in {
      animation: scale-in 0.4s ease-out;
    }
  </style>

  <script type="importmap">
{
  "imports": {
    "react": "https://aistudiocdn.com/react@^19.2.0",
    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
    "react/": "https://aistudiocdn.com/react@^19.2.0/",
    "react-router-dom": "https://aistudiocdn.com/react-router-dom@^7.9.6",
    "vite": "https://aistudiocdn.com/vite@^7.2.4",
    "@vitejs/plugin-react": "https://aistudiocdn.com/@vitejs/plugin-react@^5.1.1"
  }
}
</script>
  <script type="module" crossorigin src="/assets/index-Dub1FMy3.js"></script>
  <link rel="stylesheet" crossorigin href="/assets/index-5Z6TWypg.css">
</head>

<body>
  <!-- GTM noscript fallback -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WXTXBL6X"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  <div id="root"></div>
  <!-- Point d'entrée explicite pour Vite -->
</body>

</html>
