
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Green Property Development | Immobilier de Prestige au Maroc - Essaouira, Marrakech, Agadir</title>
    <meta name="description" content="Green Property Development : Votre agence immobilière de référence pour l'immobilier de luxe au Maroc. Découvrez notre sélection exclusive de villas, riads, appartements et terrains à Essaouira, Marrakech, Agadir et leurs environs. Expertise locale, accompagnement personnalisé et investissements immobiliers sécurisés." />
    <meta name="keywords" content="immobilier Essaouira, immobilier Marrakech, immobilier Agadir, villa de luxe Essaouira, riad à vendre Marrakech, appartement de standing Agadir, terrain à bâtir Essaouira, investissement immobilier Maroc, Green Property Development, agence immobilière Essaouira, maison de charme Marrakech, villa avec piscine Agadir, immobilier de prestige Maroc, achat villa Essaouira, vente riad Marrakech, location longue durée Essaouira, immobilier Sidi Kaouki, immobilier Ghazoua, immobilier Palmeraie Marrakech" />
    <meta property="og:title" content="Green Property Development | Immobilier de Prestige à Essaouira, Marrakech et Agadir" />
    <meta property="og:description" content="Trouvez le bien de vos rêves au Maroc avec Green Property Development. Villas d'exception, riads authentiques et terrains stratégiques à Essaouira, Marrakech et Agadir." />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="https://images.unsplash.com/photo-1540555700478-4be289fbecef?auto=format&fit=crop&w=800&q=80" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Green Property Development | Immobilier de Prestige à Essaouira, Marrakech et Agadir" />
    <meta name="twitter:description" content="Trouvez le bien de vos rêves au Maroc avec Green Property Development. Villas d'exception, riads authentiques et terrains stratégiques à Essaouira, Marrakech et Agadir." />
    <meta name="twitter:image" content="https://images.unsplash.com/photo-1540555700478-4be289fbecef?auto=format&fit=crop&w=800&q=80" />
    <meta name="robots" content="index, follow" />
    <meta name="theme-color" content="#4B3621" />
    <link rel="manifest" href="/manifest.json" />
    <link rel="apple-touch-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🏠</text></svg>">
    
    <!-- Default Favicon Placeholder -->
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🏠</text></svg>" />
    
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              brand: {
                blue: '#3D2B1F', // Dark Mahogany instead of blue
                sand: '#fdfbf7', 
                dark: '#2d1e16', 
                gold: '#A67C52', // Oak Gold
                slate: '#6b7280'
              },
              nature: {
                wood: '#4B3621',
                oak: '#8B5A2B',
                leaf: '#4A6741',
                earth: '#7B5E43',
                cream: '#F9F7F2',
                moss: '#606C38'
              }
            },
            fontFamily: {
              serif: ['"Playfair Display"', 'serif'],
              sans: ['"Lato"', 'sans-serif'],
            }
          }
        }
      }
    </script>
    <style>
      body {
        background-color: #fdfbf7;
        color: #2d1e16;
      }
      .wood-grain {
        background: 
          linear-gradient(90deg, #F9F7F2 0%, #F9F7F2 100%),
          repeating-linear-gradient(90deg, rgba(166, 124, 82, 0.03) 0px, rgba(166, 124, 82, 0.03) 1px, transparent 1px, transparent 20px);
        background-blend-mode: multiply;
      }
      .bio-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        transition: all 0.3s ease;
      }
      .bio-card:hover {
        border-color: #8B5A2B;
        box-shadow: 0 10px 25px -5px rgba(75, 54, 33, 0.1);
      }
      .scrollbar-hide::-webkit-scrollbar {
          display: none;
      }
      .scrollbar-hide {
          -ms-overflow-style: none;
          scrollbar-width: none;
      }
      .animate-fade-in-up {
          animation: fadeInUp 0.5s ease-out;
      }
      :focus {
          outline: 2px solid #4B3621;
          outline-offset: 2px;
      }
      @keyframes fadeInUp {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
      }
      
      /* Global Map Customizations */
      .leaflet-popup.custom-popup .leaflet-popup-content-wrapper {
          padding: 0;
          overflow: hidden;
          border-radius: 0.5rem;
      }
      .leaflet-popup.custom-popup .leaflet-popup-content {
          margin: 0;
          width: 100% !important;
      }
      .leaflet-popup.custom-popup .leaflet-popup-tip {
          background-color: white;
      }
      
      @media print {
        header, nav, footer, .print\:hidden, button {
          display: none !important;
        }
        body {
          background-color: white;
          color: black;
        }
        .container {
          width: 100% !important;
          max-width: 100% !important;
          padding: 0 !important;
          margin: 0 !important;
        }
        .bio-card, .shadow-xl {
          box-shadow: none !important;
          border: 1px solid #ddd !important;
        }
        main, .pt-6 {
          padding-top: 0 !important;
        }
      }
    </style>

<link rel="stylesheet" href="/index.css">
  <script type="importmap">
{
  "imports": {
    "react/": "https://esm.sh/react@^19.2.3/",
    "react": "https://esm.sh/react@^19.2.3",
    "lucide-react": "https://esm.sh/lucide-react@^0.562.0",
    "react-router-dom": "https://esm.sh/react-router-dom@^7.12.0",
    "@google/genai": "https://esm.sh/@google/genai@^1.38.0",
    "react-dom/": "https://esm.sh/react-dom@^19.2.3/",
    "@emailjs/browser": "https://esm.sh/@emailjs/browser@^4.4.1",
    "heic2any": "https://esm.sh/heic2any@0.0.4"
  }
}
</script>
  <script type="module" crossorigin src="/assets/index-FovObgZb.js"></script>
  <link rel="modulepreload" crossorigin href="/assets/react-CrdC5m_w.js">
  <link rel="modulepreload" crossorigin href="/assets/scheduler-Bb8JjhAW.js">
  <link rel="modulepreload" crossorigin href="/assets/react-dom-whC8-pz9.js">
  <link rel="modulepreload" crossorigin href="/assets/react-fast-compare-CC8_8jhm.js">
  <link rel="modulepreload" crossorigin href="/assets/invariant-Ci87l-sZ.js">
  <link rel="modulepreload" crossorigin href="/assets/shallowequal-JnP6R7JL.js">
  <link rel="modulepreload" crossorigin href="/assets/react-helmet-async-KYFfK-GI.js">
  <link rel="modulepreload" crossorigin href="/assets/react-router-CnXvu381.js">
  <link rel="modulepreload" crossorigin href="/assets/lucide-react-CVT2SQ26.js">
  <link rel="modulepreload" crossorigin href="/assets/motion-utils-DF2Khz3i.js">
  <link rel="modulepreload" crossorigin href="/assets/motion-dom-uMR0xWrC.js">
  <link rel="modulepreload" crossorigin href="/assets/framer-motion-CYIgGfvC.js">
  <link rel="modulepreload" crossorigin href="/assets/leaflet-Dkbc4dIH.js">
  <link rel="modulepreload" crossorigin href="/assets/leaflet.markercluster-Cy1JibqD.js">
  <link rel="modulepreload" crossorigin href="/assets/@react-leaflet-BtPxFlmd.js">
  <link rel="modulepreload" crossorigin href="/assets/react-leaflet-cluster-DtqVkzMu.js">
  <link rel="modulepreload" crossorigin href="/assets/react-leaflet-DkOu9k2M.js">
  <link rel="modulepreload" crossorigin href="/assets/swiper-DYOjpjTX.js">
  <link rel="modulepreload" crossorigin href="/assets/@emailjs-DfBlkqaH.js">
  <link rel="stylesheet" crossorigin href="/assets/leaflet-CIGW-MKW.css">
  <link rel="stylesheet" crossorigin href="/assets/swiper-CIBxQueP.css">
</head>
  <body>
    <div id="root"></div>
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('/sw.js').then(registration => {
          console.log('SW registered: ', registration);
        }).catch(registrationError => {
          console.log('SW registration failed: ', registrationError);
        });
      });
    }
  </script>
</body>
</html>
