<!doctype html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Portfolio de eMxPi : Staff Engineer iOS, photographe, vidéaste, et pilote de drone FPV à Nantes. Découvrez mes applications en Swift/SwiftUI et mes prestations visuelles aériennes."
    />

    <meta property="og:type" content="website" />
    <meta
      property="og:title"
      content="Portfolio | Photographie, Vidéo & Développement iOS"
    />
    <meta
      property="og:description"
      content="Découvrez le portfolio visuel et technique de eMxPi. Photographie, prises de vue en drone FPV et applications iOS."
    />
    <meta property="og:image" content="ressources/Me.jpg" />

    <meta
      http-equiv="Content-Security-Policy"
      content="script-src 'self' 'unsafe-inline' 'unsafe-eval' https://formsubmit.co; connect-src 'self' https://formsubmit.co; form-action 'self' https://formsubmit.co;"
    />

    <link
      rel="icon"
      href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cmVjdCB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgZmlsbD0iIzBmMGYwZiIvPjxwYXRoIGQ9Ik0xNzUgMTMwaDkwYzQ3IDAgODUgMzggODUgODV2ODJjMCA0Ny0zOCA4NS04NSA4NWgtOTBWMTMweiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIwIi8+PC9zdmc+"
      type="image/svg+xml"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAABMklEQVR4nO2XPU7DQBCFP0pBQ0GBI9BQ0lJwGa5ASQ1HoOIQlLkFLaKjoMMSSc+P5GFs70orWwqe9Eq/mZ03s7Ozs3DFfy/gBngGJsCHr7H3+sD1mJ1/AN4NrAL0gLmLWQL3VYE7wNoAS6DrY1+6+PU6n8O4uffeXIp/HeDW5ncxvbbwLM/NeBu+LvAGdFJgB+NuNTvg0fKOc8Jv7PpHRJChCbBMdDbNiJlZbCXDVcRmpSADvR/aZ7FQCqakPwPKnI0K55iq9IrhQSj9MSgDSrkphndCaSxVJbmYYngrlI5QVdZLMTwRSn2pShOUYngilIZSdSoDR0uxTJTKQvtCZGTfshyFlh/4I5J9v/WQmRTxf5MgK58FfVdKlpmrM7YB3ssG8Gz8vw9TVxRwAAYk0YX9nRZiAAAAAElFTkSuQmCC"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAApElEQVR4nO3SsQkCQRDF8Z8gaBkWYBEGFmEFYgEWYBemhmIHWoKYGAiCmIqo6O2buMngssMNIjvwkv3nzZud2YE/tAE8ECdYD7hh3dRfAB7RXeDlwbp4yWvDOE1cYvcWmCXGZoCbJp4LwE4Q0/XEHCfM8Ux5F3vsMMQVy8S8Bg4Y4Jp6FQHHgmKU2qhZZ6yymtQ2uZeAiD5OmeKtgEdFdIFVrv7vewFFrDJdx0YNUgAAAABJRU5ErkJggg=="
    />
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAYAAAA9zQYyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAJFklEQVR4nO3df4wU5R3H8fcsh0IvihzHRsW0RLkzgpUWCv5oDDHRGDH1NBaN/NHQoCSaGI21QWKqFrT9w4Sm4I9ojadBm9Y/NDVGkWiMlohrjYiAImC9m2tRCnIHAnecPf1jdvF2b3Zndubnszuf10l3O7t7+8y8Z5955pln5hkQERERERERERERERERERERERGROl5Fd0wGLgQNO56EzTth5DRoaQm9cCHjh0/zMhY2ANcD/elc+R3wAHBL6IXbDr8L5sG5P4TLPgcTjrFcgWVZPgF0Au8WvD4VuBK4GrhyyMI2/Qmu+nVw5dOfsmhoO+3XwbfuhUWLhi7MS+fKO4EzgP5i4PMprHwPOI3hvgV8GfilxV9RPDT1FPjGWnjllSYLG3qLnQ6vZGEN8mADgyYfAeuATwBnAb9rspBbgJWWxcczwZJgwSJYvBieegq+/GVri4+9oW95hcI+DfQAXwOuA0YDw4ER6Xz9oFB/SXcSLF8BJ54IS5ZYW3ysDX1PJ7Qd7Cl5I/1/BvwIeKZO4bO9wDrgRaA7nf93lhmBL30JRo+GHTusLT7Whj53Gkyd2nDJ+Vz5JnA68AKwr86SdxT83ZbOx3O9Y8bARRfB7bdD0mIzZSwNnUhA+wyLhbamc+U7GK4Yrh9m+s7RFqZPt9rQsbwaXzAX2tsblvoSOte/GahUtlb03FVVlDrPjx5tc/GxbKHPmm05Q+cDq6pI1xbYfCgV2Wx9xNLQcxbAeNsdGq6rIl1baLtJEeeMt9rQsezlOG0eTLLewwHwLtDRYPqZQHed+fcDG4C3AY49Fl54QT0cwRx7DJwwI9QM7cDLDaafDwyt92cBO4Ge9OnxmEHDL1+ONHSrzQNmVdWUbzWcyxVVLcUAnwGfHvzz/fdV7Q3D0tA+TFRJ8wr8v1cH+2XUh+7YwTtXDgzA2rVw331hhh8XsTT0v3cG2D7wvzrTLs9+jh5sQdas0Sk6jGJp6A0bYOvWwQ9OPgVeehmuvrr2HN+5srOqpRQW74FndSG+9FLrLXQsDf2f3uDBjq6N8NyLcM/vYdGl0H8I/n04/HngK3C2TRupuaeIk6Ghd++Cbdtg3/7w8o+loWH4o/Z9fTA/b7gDe+CHD8CUE2HSROjtC7cMUl9/ErZug127gLAue8RzELXVq+H664elP/kUbN6iHo+o/XkTPPZY2e/sNHQsDf3cc/Dgg/Dxx8O/O3AA2tvg3HODXxsWSz0cj/wBVlUYvGpo9Kg6qvb2wn33wh13wN695WbpTY9hiqWh9+yBjg647LLG83V2wooVdadZDdwZcNHEzi64557gqbv6xvP1pdXeWBq6nh078tnVRitUzxAPGZvNzBhgYSh/xfRExeZQQxeYNQvmzQu9XiSEuPZyZFKpIGPjRXlL6NlaLfQwDz4Iy5apWysuYmnoXXvg1VcHPjQ08MrSDHGvAuM5DkBwfvjUQn9iaWhI989u3gwXXwwPPRR6tjbOgZuhLzuFsIqloQ8dgo0bg8eH1sO2bcE3+/YVvD6SWs+O9RWkP6lq7rD+amLxvINrLMfS0ClqnVZr/LQdzSoXUf9yJ7U7+ELp5VBDly1eYJwTNbQXVTdFdFJULVfaHwlnLPUFQyXCKpYqx7XXwZIlQb79fYFnGp8Cf3o0aJ3V4hYLv7NzGTiWLXS9k1mGxmNMZYF9KfX2wltvwcIl8I+3Vd+IvVi20FNPhQsvDDy70mGohNqVRjEzVpbdLrRYnod33oF/bg/+6UaTtEYtloZeuBDmzAkyffDBwFOURMkNqSLCTFzSRsdeLE2d54GXggvvgwdbG8nSanZQGxdFkKvtQ6mGrqVYd0phoaWRLLXG0GhUirrFHrSXI9bTT6uVjodYGjrdGV0ybFLRjKeRLBLkKuJRVNWNGnqIWKsc27YGGfb1SReV/f0oKumvtFErFMtDHnko19NR3HLa7Q0pnSa2B8/zZo6pdbU+tMMjAiK+xbaF7ukJDqClWbW0yLVkqCiDDG9RlCkOPURsW+j+FDz/XLTrGPa6WGKlF8bnFlCHPAaJbQudfym4CaTdGVuGrxgojFy5AabWHGLdQjc6RD7Ky/fvvcGV79dfD8/Q17vYMoA85sbyopxA4aYVXrPdIYm0xUpT/Lrf3fG9hxcVnPuprxvq9+J5vSCWPRz1b9LgW+tZz2Yv1qA2NPBY9nCMGw/JcEezO5ZNP3zPwYfeE52Ct96K5vxBLeWH0Lfw3kYfxbKFnjMXWltt9Ux4/QT07dsGJz7wOXe0k8xV2iKVfi9B2JfYttDjxwdntlt6+LnXQu33kAdZv9xj4Pr9fAp6/oQ3Xwu2YtmGQFp634ddT8JOQ2cFudkSRL2Noyg1qnJkv67VYPNWNXE9D7Zuh/dr7NVMJmHCcWW/Ggs09yBqWy203Y6OwdthGhqCkRvJMXDbVjjY49ctg9fvtbEhx+xPWXjrUWxb6I8+hCefgHPODfbU1aR5NXahpVn3ooWDrDt/RX9pfRr33t4PZgz2Wvp1mf7y1HXG3tCvvQq//a29+WY9+HCdwWq1DXaX4sGYYxSX+/MY39A9PfDYGnvz9fUHGb66N9IfZ6tcdIXe5xCbx+iGXr8ebrs12HChqVmNLhF3mGZO9HA0+L2tXdVU/5i1gdWxa3s0eoFsNqxvZ2YGzNZ/aMxGudRtWP/1IFgm2dw0iYSe1RQTuoLYMqkUbPjnsMlMOlfem85R9uK+/wUP6HH4qVZFyvJHKB2RY8fKlXDrrUN+k7vz5Iu3MHQw+AwHHl6OeVhpZl37QUJCmjFjxnDQYXKGj/CllV6xYjBpQrCxLBs5mT8Htx1kF8Fj8G28+XSrsbZh2I0+8vhEOhc8r9D51vx/jrw+3m20XPqwCT72W5Hm+PVIpxjx8UqHj5vH49Ydxv5JQXz6W31aH9/22d5UHDVUHIsQGya6PoxeH9cX45NJQgkzAaIj9v5vURJJHKKkllJEBojJ/52IiIiIiIiIiIiIiIiIiEi5/wGP2psgCRuDVAAAAABJRU5ErkJggg=="
    />

    <meta name="theme-color" content="#0f0f0f" />
    <meta name="apple-itunes-app" content="app-id=6745263927" />
    <title>Portfolio | Photographie, Vidéo & Développement iOS</title>

    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@graph": [
          {
            "@type": "Person",
            "name": "eMxPi",
            "jobTitle": "Staff Engineer iOS, Photographe, Vidéaste et Pilote FPV",
            "description": "Créateur de contenu tech, lead développeur iOS expert en Swift/SwiftUI, et pilote de drone spécialisé en imagerie aérienne.",
            "url": "https://votre-site-ici.com",
            "sameAs": [
              "https://www.instagram.com/emxpi/",
              "https://x.com/emxpi",
              "http://youtube.com/emxpi"
            ]
          },
          {
            "@type": "ProfessionalService",
            "name": "Drone Visuals & eMxPi",
            "address": {
              "@type": "PostalAddress",
              "addressLocality": "Nantes",
              "addressRegion": "Pays de la Loire",
              "addressCountry": "FR"
            },
            "areaServed": "France"
          }
        ]
      }
    </script>

    <script src="/agentic/webmcp.js" defer></script>


    <style>
      /* Variables */
      :root {
        --background: #0f0f0f;
        --text: #ffffff;
        --text-secondary: rgba(255, 255, 255, 0.7);
        --accent: #e0e0e0;
        --spacing: clamp(40px, 8vw, 120px);
        --font-main: "Montserrat", sans-serif;
        --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
      }

      /* Reset & Base */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: var(--font-main);
        background-color: var(--background);
        color: var(--text);
        line-height: 1.6;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
      }

      /* Typography */
      h1,
      h2,
      h3,
      h4 {
        font-weight: 300;
        line-height: 1.2;
      }
      h1 {
        font-size: clamp(2rem, 5vw, 3.5rem);
        letter-spacing: -0.02em;
      }
      h2 {
        font-size: clamp(1.5rem, 3vw, 2.5rem);
        font-weight: 200;
        margin-bottom: 2rem;
        letter-spacing: -0.01em;
      }
      p {
        font-size: clamp(1rem, 1.2vw, 1.2rem);
        color: var(--text-secondary);
        margin-bottom: 1.5rem;
        font-weight: 300;
        max-width: 700px;
      }
      a {
        color: var(--text);
        text-decoration: none;
        transition: var(--transition);
      }

      /* Header & Navigation */
      header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 30px;
        z-index: 1000;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: var(--transition);
        mix-blend-mode: difference;
      }
      .logo {
        font-size: 1.2rem;
        font-weight: 300;
        letter-spacing: 2px;
        text-transform: uppercase;
      }
      .language-toggle {
        position: absolute;
        right: 80px;
        display: flex;
        align-items: center;
      }
      .language-toggle span {
        margin: 0 5px;
        color: var(--text);
        opacity: 0.7;
      }
      .lang-toggle-btn {
        opacity: 0.7;
        transition: var(--transition);
        font-size: 0.9rem;
        cursor: pointer;
        background: none;
        border: none;
        color: white;
      }
      .lang-toggle-btn.active {
        opacity: 1;
      }
      .nav-toggle {
        width: 30px;
        height: 20px;
        position: relative;
        cursor: pointer;
        z-index: 1002;
        background: none;
        border: none;
      }
      .nav-toggle span {
        display: block;
        width: 100%;
        height: 1px;
        background-color: var(--text);
        position: absolute;
        transition: var(--transition);
      }
      .nav-toggle span:nth-child(1) {
        top: 0;
      }
      .nav-toggle span:nth-child(2) {
        top: 50%;
        transform: translateY(-50%);
      }
      .nav-toggle span:nth-child(3) {
        bottom: 0;
      }
      .nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg);
        top: 50%;
      }
      .nav-toggle.active span:nth-child(2) {
        opacity: 0;
      }
      .nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg);
        bottom: 50%;
      }
      .navigation {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.95);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1001;
        transition: var(--transition);
      }
      .navigation.active {
        right: 0;
      }
      .nav-list {
        list-style: none;
        text-align: center;
      }
      .nav-item {
        margin: 2rem 0;
      }
      .nav-link {
        font-size: clamp(1.5rem, 3vw, 2.5rem);
        font-weight: 200;
        position: relative;
        display: inline-block;
      }
      .nav-link::after {
        content: "";
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 0;
        height: 1px;
        background-color: var(--text);
        transition: var(--transition);
      }
      .nav-link:hover::after {
        width: 100%;
      }

      /* Hero Section */
      .hero {
        height: 100vh;
        position: relative;
        overflow: hidden;
      }
      .hero-slider {
        height: 100%;
        position: relative;
      }
      .hero-slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 1s ease-in-out;
        background-size: cover;
        background-position: center;
      }
      .hero-slide.active {
        opacity: 1;
      }
      .hero-content {
        position: absolute;
        bottom: var(--spacing);
        left: var(--spacing);
        z-index: 1;
        max-width: 600px;
      }
      .hero-text {
        margin-bottom: 2rem;
      }
      .btn {
        display: inline-block;
        padding: 12px 30px;
        border: 1px solid var(--text);
        font-size: 0.9rem;
        letter-spacing: 2px;
        text-transform: uppercase;
        transition: var(--transition);
        background: transparent;
        color: var(--text);
        cursor: pointer;
      }
      .btn:hover {
        background-color: var(--text);
        color: var(--background);
      }
      .slider-nav {
        position: absolute;
        bottom: var(--spacing);
        right: var(--spacing);
        z-index: 1;
        display: flex;
      }
      .slider-arrow {
        width: 50px;
        height: 50px;
        border: 1px solid var(--text);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 10px;
        cursor: pointer;
        transition: var(--transition);
        background: transparent;
        color: var(--text);
      }
      .slider-arrow:hover {
        background-color: var(--text);
        color: var(--background);
      }

      /* Portfolios, Videos, General Sections */
      section {
        padding: var(--spacing) 0;
      }
      .section-header {
        padding: 0 var(--spacing);
        margin-bottom: 4rem;
      }
      .portfolio-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: minmax(300px, auto);
        gap: 30px;
        padding: 0 var(--spacing);
      }
      .portfolio-item {
        position: relative;
        overflow: hidden;
        cursor: pointer;
      }
      .portfolio-item.large {
        grid-column: span 8;
        grid-row: span 2;
      }
      .portfolio-item.medium {
        grid-column: span 4;
        grid-row: span 2;
      }
      .portfolio-item.small {
        grid-column: span 4;
        grid-row: span 1;
      }
      .portfolio-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: var(--transition);
      }
      .portfolio-item:hover .portfolio-img {
        transform: scale(1.05);
      }
      .portfolio-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 20px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
        opacity: 0;
        transition: var(--transition);
      }
      .portfolio-item:hover .portfolio-overlay {
        opacity: 1;
      }
      .portfolio-title {
        font-size: 1.2rem;
        font-weight: 400;
        margin-bottom: 5px;
      }
      .portfolio-category {
        font-size: 0.9rem;
        color: var(--text-secondary);
      }

      /* Videos Section */
      .videos {
        background-color: #0a0a0a;
      }
      .video-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
        gap: 30px;
        padding: 0 var(--spacing);
      }
      .video-item {
        position: relative;
        overflow: hidden;
        padding-bottom: 56.25%;
        height: 0;
      }
      .video-item img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        cursor: pointer;
        transition: var(--transition);
      }
      .video-item:hover img {
        transform: scale(1.05);
      }
      .play-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0.7;
        transition: var(--transition);
      }
      .play-icon::after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-left: 25px solid var(--text);
        margin-left: 5px;
      }
      .video-item:hover .play-icon {
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.7);
      }
      .video-info {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 20px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
        transform: translateY(100%);
        transition: var(--transition);
      }
      .video-item:hover .video-info {
        transform: translateY(0);
      }

      /* Equipment Grid */
      .info-section {
        padding: 0 var(--spacing);
        margin-top: 60px;
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
      }
      .info-title {
        font-size: 1.5rem;
        font-weight: 300;
        margin-bottom: 30px;
      }
      .equipment-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 60px;
      }
      .equipment-item {
        background-color: rgba(255, 255, 255, 0.05);
        padding: 30px;
        border-radius: 5px;
        transition: var(--transition);
      }
      .equipment-title {
        font-size: 1.2rem;
        font-weight: 400;
        margin-bottom: 10px;
        color: var(--text);
      }
      .equipment-desc {
        color: var(--text-secondary);
        font-size: 0.95rem;
        line-height: 1.5;
      }

      /* Services & Apps Grid (Centered) */
      .services-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 40px;
        padding: 0 var(--spacing);
        max-width: 1400px;
        margin: 0 auto;
      }
      .service-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        background-color: rgba(255, 255, 255, 0.05);
        padding: 30px;
        border-radius: 5px;
        transition: var(--transition);
      }
      .service-item:hover {
        transform: translateY(-5px);
        background-color: rgba(255, 255, 255, 0.08);
      }
      .service-title {
        font-size: 1.2rem;
        font-weight: 400;
        margin-bottom: 10px;
        color: var(--text);
      }
      .service-desc {
        color: var(--text-secondary);
        font-size: 0.95rem;
        line-height: 1.5;
      }

      /* Apps iOS Section Icons */
      .app-icon {
        width: 80px;
        height: 80px;
        margin: 0 auto 20px;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      }
      .app-logo {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .app-btn {
        display: inline-block;
        margin-top: 15px;
        padding: 8px 20px;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        color: var(--text);
        font-size: 0.85rem;
        transition: var(--transition);
      }
      .app-btn:hover {
        background-color: var(--text);
        color: var(--background);
      }

      /* FAQ Section */
      .faq {
        background-color: #151515;
      }
      .faq-item {
        margin-bottom: 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 1rem;
      }
      .faq-item h3 {
        font-size: 1.2rem;
        font-weight: 400;
        margin-bottom: 0.5rem;
        color: var(--text);
      }
      .faq-item p {
        margin-bottom: 0;
        font-size: 0.95rem;
      }

      /* About Section */
      .about {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .about-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        padding: 0 var(--spacing);
        max-width: 1400px;
        align-items: center;
      }
      .about-img {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 5px;
      }
      .about-text h2 {
        text-align: left;
        margin-bottom: 1.5rem;
      }

      /* Clients Section */
      .clients-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 40px;
        padding: 0 var(--spacing);
        max-width: 1400px;
        margin: 0 auto;
      }
      .client-item {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 120px;
      }
      .client-logo {
        max-width: 80%;
        max-height: 80%;
        filter: grayscale(100%) brightness(1.5);
        opacity: 0.7;
        transition: var(--transition);
      }
      .client-item:hover .client-logo {
        filter: grayscale(0%) brightness(1);
        opacity: 1;
      }

      /* Contact Section */
      .contact {
        background-color: #0a0a0a;
      }
      .contact-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        padding: 0 var(--spacing);
        max-width: 1400px;
        margin: 0 auto;
      }
      .contact-info h3 {
        font-size: 1.5rem;
        font-weight: 300;
        margin-bottom: 2rem;
      }
      .contact-detail {
        display: flex;
        margin-bottom: 2rem;
      }
      .contact-icon {
        font-size: 1.5rem;
        margin-right: 1.5rem;
      }
      .contact-meta h4 {
        font-size: 1.2rem;
        font-weight: 400;
        margin-bottom: 0.5rem;
      }
      .contact-form .form-group {
        margin-bottom: 2rem;
      }
      .form-control {
        width: 100%;
        padding: 15px 0;
        background-color: transparent;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        color: var(--text);
        font-size: 1rem;
        font-family: var(--font-main);
        outline: none;
        transition: var(--transition);
      }
      .form-control:focus {
        border-bottom-color: var(--text);
      }
      .form-control::placeholder {
        color: rgba(255, 255, 255, 0.5);
      }
      textarea.form-control {
        min-height: 120px;
        resize: vertical;
      }
      /* WebMCP : retour visuel quand un agent IA remplit le formulaire.
         Teinte alignée sur la palette monochrome du site. */
      form:tool-form-active {
        outline: 1px dashed var(--text);
        outline-offset: 8px;
        border-radius: 4px;
      }
      .btn:tool-submit-active {
        outline: 1px dashed var(--accent);
        outline-offset: 4px;
      }

      /* Footer */
      footer {
        padding: calc(var(--spacing) / 2) 0;
        text-align: center;
      }
      .social-links {
        display: flex;
        justify-content: center;
        margin-bottom: 1.5rem;
      }
      .social-link {
        margin: 0 15px;
        font-size: 1.2rem;
        opacity: 0.7;
        transition: var(--transition);
      }
      .social-link:hover {
        opacity: 1;
      }
      .copyright {
        font-size: 0.9rem;
        color: var(--text-secondary);
      }

      /* Responsive */
      @media (max-width: 1200px) {
        .portfolio-grid {
          grid-template-columns: repeat(8, 1fr);
        }
        .portfolio-item.large {
          grid-column: span 8;
        }
        .portfolio-item.medium,
        .portfolio-item.small {
          grid-column: span 4;
        }
      }
      @media (max-width: 768px) {
        .portfolio-grid {
          grid-template-columns: repeat(4, 1fr);
        }
        .portfolio-item.large,
        .portfolio-item.medium,
        .portfolio-item.small {
          grid-column: span 4;
          grid-row: span 1;
        }
        .about-content,
        .contact-wrapper {
          grid-template-columns: 1fr;
        }
        .video-grid {
          grid-template-columns: 1fr;
        }
        .hero-content,
        .slider-nav {
          left: 30px;
          bottom: 30px;
        }
        .slider-nav {
          left: auto;
          right: 30px;
        }
        .language-toggle {
          right: 70px;
        }
        .clients-grid,
        .services-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 480px) {
        :root {
          --spacing: 30px;
        }
        header {
          padding: 20px;
        }
        .clients-grid,
        .services-grid {
          grid-template-columns: 1fr;
        }
      }
    </style>
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <header>
      <a href="#" class="logo">DRONE VISUALS</a>
      <div class="language-toggle">
        <button
          class="lang-toggle-btn active"
          data-lang="fr"
          aria-label="Passer en français"
        >
          FR
        </button>
        <span>/</span>
        <button
          class="lang-toggle-btn"
          data-lang="en"
          aria-label="Switch to English"
        >
          EN
        </button>
      </div>
      <button class="nav-toggle" aria-label="Menu principal">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </header>

    <nav class="navigation">
      <ul class="nav-list">
        <li class="nav-item">
          <a href="#accueil" class="nav-link" data-fr="Accueil" data-en="Home"
            >Accueil</a
          >
        </li>
        <li class="nav-item">
          <a href="#portfolio" class="nav-link">Portfolio</a>
        </li>
        <li class="nav-item">
          <a href="#videos" class="nav-link" data-fr="Vidéos" data-en="Videos"
            >Vidéos</a
          >
        </li>
        <li class="nav-item">
          <a href="#drone" class="nav-link">Drone & FPV</a>
        </li>
        <li class="nav-item">
          <a
            href="#services"
            class="nav-link"
            data-fr="Prestations"
            data-en="Services"
            >Prestations</a
          >
        </li>
        <li class="nav-item">
          <a
            href="#clients"
            class="nav-link"
            data-fr="Clients"
            data-en="Clients"
            >Clients</a
          >
        </li>
        <li class="nav-item">
          <a href="#apps" class="nav-link" data-fr="Applications" data-en="Apps"
            >Applications</a
          >
        </li>
        <li class="nav-item">
          <a href="#apropos" class="nav-link" data-fr="À Propos" data-en="About"
            >À Propos</a
          >
        </li>
        <li class="nav-item">
          <a href="#faq" class="nav-link" data-fr="FAQ" data-en="FAQ">FAQ</a>
        </li>
        <li class="nav-item">
          <a href="#contact" class="nav-link">Contact</a>
        </li>
      </ul>
    </nav>

    <main>
      <section id="accueil" class="hero">
        <div class="hero-slider">
          <div
            class="hero-slide active"
            style="
              background-image: url(&quot;ressources/carrousel/image1.jpg&quot;);
            "
          ></div>
          <div
            class="hero-slide"
            style="
              background-image: url(&quot;ressources/carrousel/image2.jpg&quot;);
            "
          ></div>
          <div
            class="hero-slide"
            style="
              background-image: url(&quot;ressources/carrousel/image3.jpg&quot;);
            "
          ></div>
        </div>
        <div class="hero-content">
          <div class="hero-text">
            <h1 class="hero-title">Perspectives<br />extraordinaires</h1>
            <p>
              Photographe, vidéaste, pilote de drone FPV et Lead Dev iOS expert
              en Swift/SwiftUI. L'alliance de l'imagerie dynamique et de
              l'ingénierie logicielle.
            </p>
          </div>
          <a href="#portfolio" class="btn">Découvrir</a>
        </div>
        <div class="slider-nav">
          <button class="slider-arrow prev" aria-label="Image précédente">
            ←
          </button>
          <button class="slider-arrow next" aria-label="Image suivante">
            →
          </button>
        </div>
      </section>

      <section id="portfolio" class="portfolio">
        <div class="section-header">
          <h2>Portfolio Sélectionné</h2>
          <p>
            Une collection de mes travaux photographiques les plus expressifs,
            capturant l'émotion et l'essence de chaque sujet.
          </p>
        </div>
        <div class="portfolio-grid">
          <article class="portfolio-item large">
            <img
              src="ressources/photo/1.jpg"
              alt="Vue aérienne par drone de l'Ile Coeur en Polynésie Française"
              class="portfolio-img"
              loading="lazy"
            />
            <div class="portfolio-overlay">
              <h3 class="portfolio-title">Ile Coeur</h3>
              <p class="portfolio-category">Polynésie Française</p>
            </div>
          </article>
          <article class="portfolio-item medium">
            <img
              src="ressources/photo/2.jpg"
              alt="Photographie de montagnes au-dessus d'une mer de nuages en France"
              class="portfolio-img"
              loading="lazy"
            />
            <div class="portfolio-overlay">
              <h3 class="portfolio-title">Au dessus des nuages</h3>
              <p class="portfolio-category">France</p>
            </div>
          </article>
          <article class="portfolio-item small">
            <img
              src="ressources/photo/3.jpg"
              alt="Photographie côtière de la Pointe de Mesquer en France"
              class="portfolio-img"
              loading="lazy"
            />
            <div class="portfolio-overlay">
              <h3 class="portfolio-title">Pointe de Mesquer</h3>
              <p class="portfolio-category">France</p>
            </div>
          </article>
          <article class="portfolio-item small">
            <img
              src="ressources/photo/4.jpg"
              alt="Photographie d'un lever de soleil à La Flotte, Ile de Ré"
              class="portfolio-img"
              loading="lazy"
            />
            <div class="portfolio-overlay">
              <h3 class="portfolio-title">Lever de soleil</h3>
              <p class="portfolio-category">La Flotte, Ile de Ré</p>
            </div>
          </article>
          <article class="portfolio-item medium">
            <img
              src="ressources/photo/5.jpg"
              alt="Photographie d'un coucher de Soleil coloré à Taha'a en Polynésie Française"
              class="portfolio-img"
              loading="lazy"
            />
            <div class="portfolio-overlay">
              <h3 class="portfolio-title">Coucher de Soleil</h3>
              <p class="portfolio-category">Taha'a, Polynésie Française</p>
            </div>
          </article>
          <article class="portfolio-item large">
            <img
              src="ressources/photo/6.jpg"
              alt="Photographie architecturale d'un pont illuminé au lever du soleil en France"
              class="portfolio-img"
              loading="lazy"
            />
            <div class="portfolio-overlay">
              <h3 class="portfolio-title">Pont au lever de soleil</h3>
              <p class="portfolio-category">France</p>
            </div>
          </article>
        </div>
      </section>

      <section id="videos" class="videos">
        <div class="section-header">
          <h2>Créations Vidéo</h2>
          <p>
            Explorez ma collection de récits visuels, alliant montage dynamique
            et captations immersives, pour raconter une histoire unique.
          </p>
        </div>
        <div class="video-grid">
          <article class="video-item">
            <img
              src="ressources/video/Cote_Ouest.jpg"
              alt="Vignette vidéo : Présentation de l'Hôtel Côte Ouest"
              loading="lazy"
              onclick="window.open('ressources/video/Cote_Ouest.mp4', '_blank')"
            />
            <div class="play-icon"></div>
            <div class="video-info">
              <h3 class="portfolio-title">Hôtel Côte Ouest</h3>
              <p class="portfolio-category">
                Présentation cinématique de l'hôtel
              </p>
            </div>
          </article>
          <article class="video-item">
            <img
              src="ressources/video/Cote_Ouest2.jpg"
              alt="Vignette vidéo : Contenu format vertical pour les réseaux sociaux de l'Hôtel Côte Ouest"
              loading="lazy"
              onclick="
                window.open('ressources/video/Cote_Ouest2.mp4', '_blank')
              "
            />
            <div class="play-icon"></div>
            <div class="video-info">
              <h3 class="portfolio-title">Hôtel Côte Ouest</h3>
              <p class="portfolio-category">
                Contenu dynamique pour réseaux sociaux
              </p>
            </div>
          </article>
        </div>
      </section>

      <section id="drone" class="portfolio" style="background-color: #0a0a0a">
        <div class="section-header">
          <h2>Drone & FPV</h2>
          <p>
            Des perspectives immersives. J'utilise des drones FPV agiles (DJI
            Avata) pour les plans serrés et acrobatiques, et des drones
            stabilisés (Mavic, Mini 3 Pro) pour les captations cinématiques en
            haute résolution.
          </p>
        </div>
        <div class="portfolio-grid">
          <article
            class="portfolio-item medium"
            onclick="window.open('ressources/video/Fall.mp4', '_blank')"
          >
            <img
              src="ressources/video/Fall.jpg"
              alt="Vignette vidéo Drone FPV en chute libre (Fall)"
              class="portfolio-img"
              loading="lazy"
            />
            <div class="portfolio-overlay">
              <h3 class="portfolio-title">Fall</h3>
              <p class="portfolio-category">Plan acrobatique en Drone FPV</p>
            </div>
          </article>
          <article
            class="portfolio-item medium"
            onclick="window.open('ressources/video/Chebuette.mp4', '_blank')"
          >
            <img
              src="ressources/video/Chebuette.jpg"
              alt="Vignette vidéo FPV : Visite de la Ferme de la Chebuette à Noël"
              class="portfolio-img"
              loading="lazy"
            />
            <div class="portfolio-overlay">
              <h3 class="portfolio-title">Ferme de la Chebuette à Noël</h3>
              <p class="portfolio-category">Suivi immersif FPV</p>
            </div>
          </article>
        </div>

        <div class="info-section">
          <h3 class="info-title">Mon Équipement</h3>
          <div class="equipment-grid">
            <div class="equipment-item">
              <h4 class="equipment-title">Drones Cinématiques</h4>
              <p class="equipment-desc">
                DJI Mavic 2 Pro • DJI Mini 3 Pro • Phantom 4. Idéal pour les
                plans larges et les rendus haute résolution (Immobilier,
                Paysage).
              </p>
            </div>
            <div class="equipment-item">
              <h4 class="equipment-title">Systèmes FPV</h4>
              <p class="equipment-desc">
                DJI Avata, Antigravity A1. Optimisés pour les vols en intérieur
                (Cinewhoop), les espaces exigus et le suivi d'action rapide.
              </p>
            </div>
            <div class="equipment-item">
              <h4 class="equipment-title">Caméras & Outils 360</h4>
              <p class="equipment-desc">
                Insta360 X3, Final Cut Pro, Apple Motion, Lightroom. Un workflow
                complet de la captation à la post-production colorimétrique.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section id="services" class="services">
        <div class="section-header">
          <h2>Mes prestations</h2>
          <p>
            Des solutions sur mesure pour répondre à vos besoins en images
            aériennes, productions vidéos et développement logiciel.
          </p>
        </div>
        <div class="services-grid">
          <article class="service-item">
            <h4 class="service-title">Immobilier & Architecture</h4>
            <p class="service-desc">
              Valorisez vos biens immobiliers et vos projets architecturaux avec
              des prises de vues aériennes stabilisées et professionnelles.
            </p>
          </article>
          <article class="service-item">
            <h4 class="service-title">Films & Productions FPV</h4>
            <p class="service-desc">
              Des plans cinématiques aériens et des suivis FPV dynamiques pour
              vos productions audiovisuelles, apportant une véritable immersion.
            </p>
          </article>
          <article class="service-item">
            <h4 class="service-title">Développement App Mobile</h4>
            <p class="service-desc">
              Création de vos applications iOS sur mesure en Swift/SwiftUI. De
              l'architecture technique (SPM) jusqu'au déploiement sur l'App
              Store.
            </p>
          </article>
        </div>
      </section>

      <section id="clients" class="clients">
        <div class="section-header">
          <h2>Ils me font confiance</h2>
          <p>
            Des entreprises de la tech, de la vidéo et du sport ont choisi mon
            expertise pour leurs projets créatifs et techniques.
          </p>
        </div>
        <div class="clients-grid">
          <div class="client-item">
            <img
              src="ressources/logos/insta360.jpg"
              alt="Logo de l'entreprise Insta360"
              class="client-logo"
              loading="lazy"
            />
          </div>
          <div class="client-item">
            <img
              src="ressources/logos/antigravity.png"
              alt="Logo de l'entreprise AntiGravity"
              class="client-logo"
              loading="lazy"
            />
          </div>
          <div class="client-item">
            <img
              src="ressources/logos/polarpro.jpeg"
              alt="Logo de la marque PolarPro"
              class="client-logo"
              loading="lazy"
            />
          </div>
          <div class="client-item">
            <img
              src="ressources/logos/viewsonic.png"
              alt="Logo des écrans ViewSonic ColorPro"
              class="client-logo"
              loading="lazy"
            />
          </div>
          <div class="client-item">
            <img
              src="ressources/logos/alerion.png"
              alt="Logo d'Alerion Cycles"
              class="client-logo"
              loading="lazy"
            />
          </div>
          <div class="client-item">
            <img
              src="ressources/logos/leoncycle.png"
              alt="Logo de Léon Cycles"
              class="client-logo"
              loading="lazy"
            />
          </div>
          <div class="client-item">
            <img
              src="ressources/logos/kfConcept.png"
              alt="Logo de K&F Concept"
              class="client-logo"
              loading="lazy"
            />
          </div>
          <div class="client-item">
            <img
              src="ressources/logos/coteOuest.jpg"
              alt="Logo de l'Hôtel Côte Ouest"
              class="client-logo"
              loading="lazy"
            />
          </div>
          <div class="client-item">
            <img
              src="ressources/logos/fermesPlacier.png"
              alt="Logo des Fermes Placier"
              class="client-logo"
              loading="lazy"
            />
          </div>
        </div>
      </section>

      <section id="apps" class="services" style="background-color: #0a0a0a">
        <div class="section-header">
          <h2>Mes Applications iOS</h2>
          <p>
            Staff Engineer / Lead Dev iOS depuis plus de 18 ans, je conçois,
            design et développe des applications natives de A à Z en tirant
            parti des dernières technologies Apple (Swift, SwiftUI, Swift
            Package Manager).
          </p>
        </div>
        <div class="services-grid">
          <article class="service-item">
            <div class="app-icon">
              <img
                src="ressources/apps/mindlift.png"
                alt="Icône de l'application Mind Lift - Citations et motivation"
                class="app-logo"
                loading="lazy"
              />
            </div>
            <h4 class="service-title">Mind Lift</h4>
            <p class="service-desc">
              Commencez chaque jour avec une pensée inspirante ! Widget iOS,
              mode Stand by et 365 citations pour nourrir votre optimisme
              quotidien.
            </p>
            <a
              href="https://apps.apple.com/fr/app/mind-lift/id6743930224"
              class="app-btn"
              target="_blank"
              rel="noopener"
              >App Store</a
            >
          </article>

          <article class="service-item">
            <div class="app-icon">
              <img
                src="ressources/apps/lavaclock.png"
                alt="Icône de l'application Lava Clock - Horloge animée personnalisable"
                class="app-logo"
                loading="lazy"
              />
            </div>
            <h4 class="service-title">Lava Clock</h4>
            <p class="service-desc">
              Lava Clock transforme l'heure en œuvre d'art avec fonds animés et
              météo locale. Un travail pointu d'animations sur mesure et de
              rendu graphique iOS.
            </p>
            <a
              href="https://apps.apple.com/us/app/lava-clock/id6744017027"
              class="app-btn"
              target="_blank"
              rel="noopener"
              >App Store</a
            >
          </article>

          <article class="service-item">
            <div class="app-icon">
              <img
                src="ressources/apps/sunforecast.png"
                alt="Icône de l'application SunForecast - Prévisions Golden Hour"
                class="app-logo"
                loading="lazy"
              />
            </div>
            <h4 class="service-title">SunForecast</h4>
            <p class="service-desc">
              Ne manquez plus jamais un lever ou coucher de soleil. L'app
              utilise une architecture SwiftUI moderne avec Live Activities et
              Widgets pour la photographie.
            </p>
            <a
              href="https://apps.apple.com/us/app/sunforecast/id6745263927"
              class="app-btn"
              target="_blank"
              rel="noopener"
              >App Store</a
            >
          </article>

          <article class="service-item">
            <div class="app-icon">
              <img
                src="ressources/apps/mirrormind.png"
                alt="Icône de l'application Mirror Mind - Journal émotionnel"
                class="app-logo"
                loading="lazy"
              />
            </div>
            <h4 class="service-title">Mirror Mind</h4>
            <p class="service-desc">
              Votre journal émotionnel personnalisé. Stockage local sécurisé via
              CoreData/SwiftData, analyses détaillées et suivi quotidien de
              votre bien-être mental.
            </p>
            <a
              href="https://apps.apple.com/us/app/mirrormind/id6745898920"
              class="app-btn"
              target="_blank"
              rel="noopener"
              >App Store</a
            >
          </article>

          <article class="service-item">
            <div class="app-icon">
              <img
                src="ressources/apps/gruequest.png"
                alt="Icône du jeu textuel Grue Quest"
                class="app-logo"
                loading="lazy"
              />
            </div>
            <h4 class="service-title">Grue Quest</h4>
            <p class="service-desc">
              Grue Quest rend hommage aux jeux d'aventure textuels légendaires
              comme Zork. Explorez des donjons sombres et vivez des aventures
              épiques.
            </p>
            <a
              href="https://apps.apple.com/us/app/grue-quest/id6754385134"
              class="app-btn"
              target="_blank"
              rel="noopener"
              >App Store</a
            >
          </article>

          <article class="service-item">
            <div class="app-icon">
              <img
                src="ressources/apps/synthia.png"
                alt="Icône de l'application Synth I.A. - Résumés d'articles"
                class="app-logo"
                loading="lazy"
              />
            </div>
            <h4 class="service-title">Synth I.A.</h4>
            <p class="service-desc">
              Ne perdez plus de temps à lire des articles entiers. Laissez l'IA
              synthétiser votre veille quotidienne en résumés clairs dans une
              app Swift optimisée.
            </p>
            <a
              href="https://apps.apple.com/app/synth-i-a/id6745096328"
              class="app-btn"
              target="_blank"
              rel="noopener"
              >App Store</a
            >
          </article>

          <article class="service-item">
            <div class="app-icon">
              <img
                src="ressources/apps/pentago.png"
                alt="Icône du jeu Pentago"
                class="app-logo"
                loading="lazy"
              />
            </div>
            <h4 class="service-title">Pentago</h4>
            <p class="service-desc">
              Le jeu de stratégie où le plateau change constamment ! Posez votre
              bille, tournez un cadran et soyez le premier à en aligner 5.
              Défiez l'IA ou un ami.
            </p>
            <a
              href="https://apps.apple.com/us/app/pentago/id6756574305"
              class="app-btn"
              target="_blank"
              rel="noopener"
              >App Store</a
            >
          </article>

          <article class="service-item">
            <div class="app-icon">
              <img
                src="ressources/apps/savoir.png"
                alt="Icône de l'application Savoir - Culture générale"
                class="app-logo"
                loading="lazy"
              />
            </div>
            <h4 class="service-title">Savoir</h4>
            <p class="service-desc">
              Étanchez votre soif de connaissance ! Découvrez un fait unique
              chaque jour. Personnalisez vos thèmes (Histoire, Sciences,
              Tech...) et profitez des Widgets.
            </p>
            <a
              href="https://apps.apple.com/us/app/savoir-apprenez-chaque-jour/id6758041155"
              class="app-btn"
              target="_blank"
              rel="noopener"
              >App Store</a
            >
          </article>

          <article class="service-item">
            <div class="app-icon">
              <img
                src="ressources/apps/rugbyTracker.png"
                alt="Icône de l'application Rugby Tracker - Scores en direct"
                class="app-logo"
                loading="lazy"
              />
            </div>
            <h4 class="service-title">Rugby Tracker</h4>
            <p class="service-desc">
              Suivez le rugby en direct ! Application native haute performance
              synchronisant les scores en temps réel, incluant widgets et
              statistiques détaillées.
            </p>
            <a
              href="https://apps.apple.com/us/app/rugby-tracker/id6760354376"
              class="app-btn"
              target="_blank"
              rel="noopener"
              >App Store</a
            >
          </article>

          <article class="service-item">
            <div class="app-icon">
              <img
                src="ressources/apps/airquality.png"
                alt="Icône de l'application Air Quality - Qualité de l'air"
                class="app-logo"
                loading="lazy"
              />
            </div>
            <h4 class="service-title">Air Quality</h4>
            <p class="service-desc">
              Maîtrisez votre environnement. Suivez la qualité de l'air, les
              polluants (72h) et les risques allergiques (5j) avec une
              intégration poussée des API.
            </p>
            <a
              href="https://apps.apple.com/us/app/air-quality-tracker/id6762453860"
              class="app-btn"
              target="_blank"
              rel="noopener"
              >App Store</a
            >
          </article>
        </div>
      </section>

      <section id="apropos" class="about">
        <div class="section-header">
          <h2>À Propos</h2>
        </div>
        <div class="about-content">
          <div class="about-image">
            <img
              src="ressources/Me.jpg"
              alt="Portrait de eMxPi, photographe, pilote FPV et développeur"
              class="about-img"
              loading="lazy"
            />
          </div>
          <div class="about-text">
            <h2>L'Art de la Perspective & du Code</h2>
            <p>
              Staff Engineer et Lead Dev iOS de métier avec plus de 18 ans
              d'expérience, j'applique la même exigence et la même rigueur dans
              le développement de mes architectures logicielles (Swift, SwiftUI,
              Flutter) que dans la composition de mes plans aériens.
            </p>
            <p>
              Mon parcours de créateur de contenu sous le pseudonyme eMxPi s'est
              forgé en explorant l'image à travers les drones FPV, les caméras
              360° et le montage vidéo pointu (Final Cut Pro, Motion, DaVinci
              Resolve).
            </p>
            <p>
              En tant que pilote certifié, je repousse constamment les limites
              des systèmes FPV, particulièrement lors de vols acrobatiques ou
              dans des espaces complexes, offrant des angles de vue totalement
              inédits.
            </p>
            <a href="#contact" class="btn">Me Contacter</a>
          </div>
        </div>
      </section>

      <section id="faq" class="faq">
        <div class="section-header">
          <h2>Foire Aux Questions</h2>
          <p>
            Questions fréquentes sur mon approche de la création numérique, du
            drone au développement iOS.
          </p>
        </div>
        <div
          class="about-content"
          style="
            grid-template-columns: 1fr;
            max-width: 900px;
            padding: 0 var(--spacing);
          "
        >
          <div class="faq-item">
            <h3
              data-fr="Quel drone FPV utilisez-vous pour les plans d'intérieur (immobilier, entreprises) ?"
              data-en="Which FPV drone do you use for indoor shots?"
            >
              Quel drone FPV utilisez-vous pour les plans d'intérieur
              (immobilier, entreprises) ?
            </h3>
            <p
              data-fr="Pour la sécurité et la fluidité en espaces exigus, j'utilise principalement le DJI Avata ou des drones 'Cinewhoop' équipés de protections d'hélices. Cela garantit un vol sûr tout en offrant des mouvements cinématiques impossibles à réaliser au sol."
              data-en="For safety and fluidity in tight spaces, I mainly use the DJI Avata or 'Cinewhoop' drones with propeller guards. This ensures safe flights while providing cinematic movements impossible to achieve on the ground."
            >
              Pour la sécurité et la fluidité en espaces exigus, j'utilise
              principalement le DJI Avata ou des drones "Cinewhoop" équipés de
              protections d'hélices. Cela garantit un vol sûr tout en offrant
              des mouvements cinématiques impossibles à réaliser au sol.
            </p>
          </div>

          <div class="faq-item">
            <h3
              data-fr="Comment se déroule une prestation vidéo par drone ?"
              data-en="How does a drone video service work?"
            >
              Comment se déroule une prestation vidéo par drone ?
            </h3>
            <p
              data-fr="Tout commence par une étude du lieu et de la réglementation (Nantes, Pays de la Loire ou ailleurs). Le jour J, je combine des plans larges stabilisés (DJI Mavic) et des immersions en vol FPV. La post-production inclut ensuite l'étalonnage colorimétrique sur DaVinci Resolve ou Final Cut Pro."
              data-en="It starts with a study of the location and regulations. On the D-day, I combine stabilized wide shots (DJI Mavic) and FPV immersive flights. Post-production then includes color grading on DaVinci Resolve or Final Cut Pro."
            >
              Tout commence par une étude du lieu et de la réglementation
              (Nantes, Pays de la Loire ou ailleurs). Le jour J, je combine des
              plans larges stabilisés (DJI Mavic) et des immersions en vol FPV.
              La post-production inclut ensuite l'étalonnage colorimétrique sur
              DaVinci Resolve ou Final Cut Pro.
            </p>
          </div>

          <div class="faq-item">
            <h3
              data-fr="Quelles technologies utilisez-vous pour créer vos applications iOS ?"
              data-en="What technologies do you use to create your iOS apps?"
            >
              Quelles technologies utilisez-vous pour créer vos applications iOS
              ?
            </h3>
            <p
              data-fr="En tant que Lead Dev iOS, mes applications sont codées nativement à l'aide des frameworks Apple officiels : Swift, SwiftUI pour des interfaces modernes et réactives, gérées avec Swift Package Manager (SPM). Cela assure des performances optimales et une intégration parfaite aux fonctionnalités d'iOS (Live Activities, Dynamic Island)."
              data-en="As an iOS Lead Dev, my apps are coded natively using official Apple frameworks: Swift, SwiftUI for modern interfaces, managed with Swift Package Manager (SPM). This ensures peak performance and deep integration with iOS features."
            >
              En tant que Lead Dev iOS, mes applications sont codées nativement
              à l'aide des frameworks Apple officiels : Swift, SwiftUI pour des
              interfaces modernes et réactives, gérées avec Swift Package
              Manager (SPM). Cela assure des performances optimales et une
              intégration parfaite aux fonctionnalités d'iOS.
            </p>
          </div>
        </div>
      </section>

      <section id="contact" class="contact">
        <div class="section-header">
          <h2>Contact</h2>
          <p>
            Intéressé par une collaboration pour de la vidéo, de la photo, ou un
            besoin d'expertise en développement iOS ? Contactez-moi.
          </p>
        </div>
        <div class="contact-wrapper">
          <div class="contact-info">
            <h3>Restons en Contact</h3>
            <div class="contact-detail">
              <div class="contact-icon">📍</div>
              <div class="contact-meta">
                <h4>Localisation</h4>
                <p>Nantes / Pays de la Loire, France</p>
              </div>
            </div>
          </div>
          <div class="contact-form">
            <form id="contactForm" action="https://formsubmit.co/44b5ffaf766347a75215b7de65d6db5b" method="POST"
                  toolname="send_contact_message"
                  tooldescription="Envoyer un message de contact à eMxPi (collaboration vidéo, photo, drone FPV ou développement iOS).">
              <input type="hidden" name="_subject" value="Nouveau message depuis le site web portfolio" />
              <input type="hidden" name="_captcha" value="true" />
              <input type="hidden" name="_template" value="table" />
              <input type="text" name="_honey" style="display: none" />
              
              <div class="form-group">
                <input type="text" name="name" class="form-control" placeholder="Nom Complet" aria-label="Nom Complet" required
                       toolparamdescription="Nom complet de la personne qui contacte eMxPi." />
              </div>
              <div class="form-group">
                <input type="email" name="email" class="form-control" placeholder="Email" aria-label="Adresse Email" required
                       toolparamdescription="Adresse email de réponse." />
              </div>
              <div class="form-group">
                <input type="text" name="subject" class="form-control" placeholder="Sujet" aria-label="Sujet du message" required
                       toolparamdescription="Sujet ou objet du message (ex. prestation drone, projet vidéo, développement iOS)." />
              </div>
              <div class="form-group">
                <textarea name="message" class="form-control" placeholder="Message" aria-label="Votre message" required
                          toolparamdescription="Contenu du message : contexte, besoin et échéance éventuelle."></textarea>
              </div>
              <button type="submit" class="btn">Envoyer le Message</button>
            </form>
          </div>
        </div>
      </section>
    </main>

    <footer>
      <div class="social-links">
        <a
          href="https://www.instagram.com/emxpi/"
          class="social-link"
          target="_blank"
          rel="noopener"
          aria-label="Voir le profil Instagram"
          >Instagram</a
        >
        <a
          href="https://x.com/emxpi"
          class="social-link"
          target="_blank"
          rel="noopener"
          aria-label="Voir le profil Twitter X"
          >Twitter</a
        >
        <a
          href="http://youtube.com/emxpi"
          class="social-link"
          target="_blank"
          rel="noopener"
          aria-label="Voir la chaîne YouTube"
          >Youtube</a
        >
      </div>
      <p class="copyright">© 2026 eMxPi. Tous droits réservés.</p>
    </footer>

    <script>
      // Translations Object (Complet avec toutes les valeurs)
      const translations = {
        fr: {
          heroTitle: "Perspectives<br>extraordinaires",
          heroDesc:
            "Photographe, vidéaste, pilote de drone FPV et Lead Dev iOS expert en Swift/SwiftUI. L'alliance de l'imagerie dynamique et de l'ingénierie logicielle.",
          heroBtn: "Découvrir",
          portfolioTitle: "Portfolio Sélectionné",
          portfolioDesc:
            "Une collection de mes travaux photographiques les plus expressifs, capturant l'émotion et l'essence de chaque sujet.",
          videoTitle: "Créations Vidéo",
          videoDesc:
            "Explorez ma collection de récits visuels, alliant montage dynamique et captations immersives, pour raconter une histoire unique.",
          droneTitle: "Drone & FPV",
          droneDesc:
            "Des perspectives immersives. J'utilise des drones FPV agiles (DJI Avata) pour les plans serrés et acrobatiques, et des drones stabilisés (Mavic, Mini 3 Pro) pour les captations cinématiques en haute résolution.",
          equipTitle: "Mon Équipement",

          // Prestations
          servicesTitle: "Mes prestations",
          servicesDesc:
            "Des solutions sur mesure pour répondre à vos besoins en images aériennes, productions vidéos et développement logiciel.",
          s1Title: "Immobilier & Architecture",
          s1Desc:
            "Valorisez vos biens immobiliers et vos projets architecturaux avec des prises de vues aériennes stabilisées et professionnelles.",
          s2Title: "Films & Productions FPV",
          s2Desc:
            "Des plans cinématiques aériens et des suivis FPV dynamiques pour vos productions audiovisuelles, apportant une véritable immersion.",
          s3Title: "Développement App Mobile",
          s3Desc:
            "Création de vos applications iOS sur mesure en Swift/SwiftUI. De l'architecture technique (SPM) jusqu'au déploiement sur l'App Store.",

          clientsTitle: "Ils me font confiance",
          clientsDesc:
            "Des entreprises de la tech, de la vidéo et du sport ont choisi mon expertise pour leurs projets créatifs et techniques.",

          // Apps iOS
          appsTitle: "Mes Applications iOS",
          appsDesc:
            "Staff Engineer / Lead Dev iOS depuis plus de 18 ans, je conçois, design et développe des applications natives de A à Z en tirant parti des dernières technologies Apple (Swift, SwiftUI, Swift Package Manager).",
          appBtn: "App Store",
          app1Title: "Mind Lift",
          app1Desc:
            "Commencez chaque jour avec une pensée inspirante ! Widget iOS, mode Stand by et 365 citations pour nourrir votre optimisme quotidien.",
          app2Title: "Lava Clock",
          app2Desc:
            "Lava Clock transforme l'heure en œuvre d'art avec fonds animés et météo locale. Un travail pointu d'animations sur mesure et de rendu graphique iOS.",
          app3Title: "SunForecast",
          app3Desc:
            "Ne manquez plus jamais un lever ou coucher de soleil. L'app utilise une architecture SwiftUI moderne avec Live Activities et Widgets pour la photographie.",
          app4Title: "Mirror Mind",
          app4Desc:
            "Votre journal émotionnel personnalisé. Stockage local sécurisé via CoreData/SwiftData, analyses détaillées et suivi quotidien de votre bien-être mental.",
          app5Title: "Grue Quest",
          app5Desc:
            "Grue Quest rend hommage aux jeux d'aventure textuels légendaires comme Zork. Explorez des donjons sombres et vivez des aventures épiques.",
          app6Title: "Synth I.A.",
          app6Desc:
            "Ne perdez plus de temps à lire des articles entiers. Laissez l'IA synthétiser votre veille quotidienne en résumés clairs dans une app Swift optimisée.",
          app7Title: "Pentago",
          app7Desc:
            "Le jeu de stratégie où le plateau change constamment ! Posez votre bille, tournez un cadran et soyez le premier à en aligner 5. Défiez l'IA ou un ami.",
          app8Title: "Savoir",
          app8Desc:
            "Étanchez votre soif de connaissance ! Découvrez un fait unique chaque jour. Personnalisez vos thèmes (Histoire, Sciences, Tech...) et profitez des Widgets.",
          app9Title: "Rugby Tracker",
          app9Desc:
            "Suivez le rugby en direct ! Application native haute performance synchronisant les scores en temps réel, incluant widgets et statistiques détaillées.",
          app10Title: "Air Quality",
          app10Desc:
            "Maîtrisez votre environnement. Suivez la qualité de l'air, les polluants (72h) et les risques allergiques (5j) avec une intégration poussée des API.",

          aboutTitle: "À Propos",
          aboutSubtitle: "L'Art de la Perspective & du Code",
          aboutP1:
            "Staff Engineer et Lead Dev iOS de métier avec plus de 18 ans d'expérience, j'applique la même exigence et la même rigueur dans le développement de mes architectures logicielles (Swift, SwiftUI, Flutter) que dans la composition de mes plans aériens.",
          aboutP2:
            "Mon parcours de créateur de contenu sous le pseudonyme eMxPi s'est forgé en explorant l'image à travers les drones FPV, les caméras 360° et le montage vidéo pointu (Final Cut Pro, Motion, DaVinci Resolve).",
          aboutP3:
            "En tant que pilote certifié, je repousse constamment les limites des systèmes FPV, particulièrement lors de vols acrobatiques ou dans des espaces complexes, offrant des angles de vue totalement inédits.",
          aboutBtn: "Me Contacter",

          faqTitle: "Foire Aux Questions",
          faqDesc:
            "Questions fréquentes sur mon approche de la création numérique, du drone au développement iOS.",

          contactTitle: "Contact",
          contactDesc:
            "Intéressé par une collaboration pour de la vidéo, de la photo, ou un besoin d'expertise en développement iOS ? Contactez-moi.",
          contactSubtitle: "Restons en Contact",
          contactLocation: "Localisation",
          formName: "Nom Complet",
          formEmail: "Email",
          formSubject: "Sujet",
          formMessage: "Message",
          formBtn: "Envoyer le Message",
          formSuccess:
            "Merci pour votre message ! Je vous contacterai dans les plus brefs délais.",
          copyright: "© 2026 eMxPi. Tous droits réservés.",
        },
        en: {
          heroTitle: "Extraordinary<br>perspectives",
          heroDesc:
            "Photographer, videographer, FPV drone pilot and iOS Lead Dev expert in Swift/SwiftUI. The alliance of dynamic imagery and software engineering.",
          heroBtn: "Discover",
          portfolioTitle: "Selected Portfolio",
          portfolioDesc:
            "A collection of my most expressive photographic work, capturing the emotion and essence of each subject.",
          videoTitle: "Video Creations",
          videoDesc:
            "Explore my collection of visual stories, combining dynamic editing and immersive captures to tell a unique story.",
          droneTitle: "Drone & FPV",
          droneDesc:
            "Immersive perspectives. I use agile FPV drones (DJI Avata) for tight and acrobatic shots, and stabilized drones (Mavic, Mini 3 Pro) for high-resolution cinematic captures.",
          equipTitle: "My Equipment",

          // Prestations
          servicesTitle: "My Services",
          servicesDesc:
            "Customized solutions to meet your needs in aerial imagery, video productions, and software development.",
          s1Title: "Real Estate & Architecture",
          s1Desc:
            "Enhance your real estate properties and architectural projects with professional and stabilized aerial photography.",
          s2Title: "Films & FPV Productions",
          s2Desc:
            "Cinematic aerial shots and dynamic FPV tracking for your audiovisual productions, providing true immersion.",
          s3Title: "Mobile App Development",
          s3Desc:
            "Creation of your custom iOS applications in Swift/SwiftUI. From technical architecture (SPM) to App Store deployment.",

          clientsTitle: "They Trust Me",
          clientsDesc:
            "Tech, video and sports companies have chosen my expertise for their creative and technical projects.",

          // Apps iOS
          appsTitle: "My iOS Applications",
          appsDesc:
            "As an iOS Staff Engineer with over 18 years of experience, I design and develop native applications from scratch leveraging the latest Apple technologies (Swift, SwiftUI, Swift Package Manager).",
          appBtn: "App Store",
          app1Title: "Mind Lift",
          app1Desc:
            "Start each day with an inspiring thought! iOS widget, Stand by mode and 365 quotes to fuel your daily optimism.",
          app2Title: "Lava Clock",
          app2Desc:
            "Lava Clock turns time into art with animated backgrounds and local weather. Advanced custom animations and iOS graphics rendering.",
          app3Title: "SunForecast",
          app3Desc:
            "Never miss a spectacular sunrise or sunset again. The app uses modern SwiftUI architecture with Live Activities and Widgets for photography.",
          app4Title: "Mirror Mind",
          app4Desc:
            "Your personalized emotion journal! Secure local storage via CoreData/SwiftData, detailed analytics and daily mental wellness tracking.",
          app5Title: "Grue Quest",
          app5Desc:
            "Grue Quest pays homage to legendary text adventure games like Zork. Explore dark dungeons and experience epic adventures.",
          app6Title: "Synth I.A.",
          app6Desc:
            "Stop wasting time reading full articles. Let AI synthesize your daily news feed into clear, concise summaries in an optimized Swift app.",
          app7Title: "Pentago",
          app7Desc:
            "The ultimate strategy game where the board changes constantly! Place your marble, twist a quadrant, and align 5 to win. Challenge the AI or a friend.",
          app8Title: "Savoir",
          app8Desc:
            "Quench your thirst for knowledge! Discover a unique fact every morning. Customize your themes (History, Science, Tech...) and enjoy our beautiful Widgets.",
          app9Title: "Rugby Tracker",
          app9Desc:
            "Follow live rugby! High-performance native app synchronizing real-time scores, including widgets and detailed team statistics.",
          app10Title: "Air Quality",
          app10Desc:
            "Take control of your breath. Track air quality, pollutants (72h) and pollen risks (5d) with deep environmental API integration.",

          aboutTitle: "About",
          aboutSubtitle: "The Art of Perspective & Code",
          aboutP1:
            "An iOS Staff Engineer with over 18 years of experience, I apply the same high standards and rigor in developing software architectures (Swift, SwiftUI) as I do in composing aerial shots.",
          aboutP2:
            "My journey as a content creator under the pseudonym eMxPi was built exploring imagery through FPV drones, 360° cameras, and advanced video editing (Final Cut Pro, Motion, DaVinci Resolve).",
          aboutP3:
            "As a certified pilot, I constantly push the boundaries of FPV systems, offering viewing angles impossible to obtain otherwise.",
          aboutBtn: "Contact Me",

          faqTitle: "Frequently Asked Questions",
          faqDesc:
            "Common questions about my approach to digital creation, from drone to iOS development.",

          contactTitle: "Contact",
          contactDesc:
            "Interested in a collaboration for video, photo, or need iOS development expertise? Feel free to contact me.",
          contactSubtitle: "Let's Stay in Touch",
          contactLocation: "Location",
          formName: "Full Name",
          formEmail: "Email",
          formSubject: "Subject",
          formMessage: "Message",
          formBtn: "Send Message",
          formSuccess:
            "Thank you for your message! I will contact you as soon as possible.",
          copyright: "© 2026 eMxPi. All rights reserved.",
        },
      };

      function getBrowserLanguage() {
        return (navigator.language || navigator.userLanguage).substring(0, 2);
      }

      function setInitialLanguage() {
        let savedLang = localStorage.getItem("preferredLanguage");
        if (!savedLang) {
          const browserLang = getBrowserLanguage();
          savedLang = browserLang === "fr" ? "fr" : "en";
        }
        setTimeout(() => {
          changeLanguage(savedLang);
        }, 100);
      }

      function changeLanguage(lang) {
        document
          .querySelectorAll(".lang-btn, .lang-toggle-btn")
          .forEach((btn) => {
            if (btn.getAttribute("data-lang") === lang) {
              btn.classList.add("active");
            } else {
              btn.classList.remove("active");
            }
          });

        localStorage.setItem("preferredLanguage", lang);

        // Met à jour tous les éléments ayant data-fr ET data-en (ex: la navigation et la FAQ)
        document.querySelectorAll("[data-fr][data-en]").forEach((el) => {
          el.textContent = el.getAttribute(`data-${lang}`);
        });

        document.querySelector(".hero-title").innerHTML =
          translations[lang].heroTitle;
        document.querySelector(".hero-content .hero-text p").textContent =
          translations[lang].heroDesc;
        document.querySelector(".hero-content .btn").textContent =
          translations[lang].heroBtn;

        updateSectionText("#portfolio h2", translations[lang].portfolioTitle);
        updateSectionText(
          "#portfolio > .section-header > p",
          translations[lang].portfolioDesc,
        );

        updateSectionText("#videos h2", translations[lang].videoTitle);
        updateSectionText(
          "#videos > .section-header > p",
          translations[lang].videoDesc,
        );

        updateSectionText(
          "#drone > .section-header > h2",
          translations[lang].droneTitle,
        );
        updateSectionText(
          "#drone > .section-header > p",
          translations[lang].droneDesc,
        );

        // --- Mise à jour de la section Mes Prestations ---
        updateSectionText("#services h2", translations[lang].servicesTitle);
        updateSectionText(
          "#services > .section-header > p",
          translations[lang].servicesDesc,
        );

        const mainServiceItems = document.querySelectorAll(
          "#services .service-item",
        );
        if (mainServiceItems.length >= 3) {
          mainServiceItems[0].querySelector(".service-title").textContent =
            translations[lang].s1Title;
          mainServiceItems[0].querySelector(".service-desc").textContent =
            translations[lang].s1Desc;

          mainServiceItems[1].querySelector(".service-title").textContent =
            translations[lang].s2Title;
          mainServiceItems[1].querySelector(".service-desc").textContent =
            translations[lang].s2Desc;

          mainServiceItems[2].querySelector(".service-title").textContent =
            translations[lang].s3Title;
          mainServiceItems[2].querySelector(".service-desc").textContent =
            translations[lang].s3Desc;
        }

        updateSectionText("#clients h2", translations[lang].clientsTitle);
        updateSectionText(
          "#clients > .section-header > p",
          translations[lang].clientsDesc,
        );

        // --- Mise à jour de la section Mes Applications iOS ---
        updateSectionText("#apps h2", translations[lang].appsTitle);
        updateSectionText(
          "#apps > .section-header > p",
          translations[lang].appsDesc,
        );

        const appItems = document.querySelectorAll("#apps .service-item");
        appItems.forEach((item, index) => {
          const appNum = index + 1;
          const titleEl = item.querySelector(".service-title");
          const descEl = item.querySelector(".service-desc");
          const btnEl = item.querySelector(".app-btn");

          if (titleEl && translations[lang][`app${appNum}Title`]) {
            titleEl.textContent = translations[lang][`app${appNum}Title`];
          }
          if (descEl && translations[lang][`app${appNum}Desc`]) {
            descEl.textContent = translations[lang][`app${appNum}Desc`];
          }
          if (btnEl) {
            btnEl.textContent = translations[lang].appBtn;
          }
        });

        // FAQ Titles/Desc (les questions/réponses sont gérées plus haut par les data-attributes)
        updateSectionText("#faq h2", translations[lang].faqTitle);
        updateSectionText(
          "#faq > .section-header > p",
          translations[lang].faqDesc,
        );

        updateSectionText(
          ".info-section .info-title",
          translations[lang].equipTitle,
        );

        updateSectionText(
          "#apropos h2:first-of-type",
          translations[lang].aboutTitle,
        );
        updateSectionText(
          "#apropos .about-text h2",
          translations[lang].aboutSubtitle,
        );
        updateSectionText(
          "#apropos .about-text p:nth-of-type(1)",
          translations[lang].aboutP1,
        );
        updateSectionText(
          "#apropos .about-text p:nth-of-type(2)",
          translations[lang].aboutP2,
        );
        updateSectionText(
          "#apropos .about-text p:nth-of-type(3)",
          translations[lang].aboutP3,
        );
        updateSectionText(
          "#apropos .about-text .btn",
          translations[lang].aboutBtn,
        );

        updateSectionText("#contact h2", translations[lang].contactTitle);
        updateSectionText(
          "#contact > .section-header > p",
          translations[lang].contactDesc,
        );
        updateSectionText(
          ".contact-info h3",
          translations[lang].contactSubtitle,
        );
        updateSectionText(
          ".contact-meta h4:nth-of-type(1)",
          translations[lang].contactLocation,
        );

        document.querySelectorAll(".form-control")[0].placeholder =
          translations[lang].formName;
        document.querySelectorAll(".form-control")[1].placeholder =
          translations[lang].formEmail;
        document.querySelectorAll(".form-control")[2].placeholder =
          translations[lang].formSubject;
        document.querySelectorAll(".form-control")[3].placeholder =
          translations[lang].formMessage;
        document.querySelector(".contact-form .btn").textContent =
          translations[lang].formBtn;

        document.querySelector(".copyright").textContent =
          translations[lang].copyright;
      }

      function updateSectionText(selector, text) {
        const el = document.querySelector(selector);
        if (el) el.textContent = text;
      }

      document.addEventListener("DOMContentLoaded", () => {
        const langBtns = document.querySelectorAll(
          ".lang-btn, .lang-toggle-btn",
        );
        langBtns.forEach((btn) => {
          btn.addEventListener("click", function (e) {
            e.preventDefault();
            const lang = this.getAttribute("data-lang");
            changeLanguage(lang);
          });
        });
        setInitialLanguage();
      });

      // Navigation Toggle
      const navToggle = document.querySelector(".nav-toggle");
      const navigation = document.querySelector(".navigation");
      const navLinks = document.querySelectorAll(".nav-link");

      navToggle.addEventListener("click", () => {
        navToggle.classList.toggle("active");
        navigation.classList.toggle("active");
      });

      navLinks.forEach((link) => {
        link.addEventListener("click", () => {
          navToggle.classList.remove("active");
          navigation.classList.remove("active");
        });
      });

      // Smooth Scrolling
      document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
        anchor.addEventListener("click", function (e) {
          if (
            this.classList.contains("lang-btn") ||
            this.classList.contains("lang-toggle-btn")
          )
            return;
          e.preventDefault();
          const targetElement = document.querySelector(
            this.getAttribute("href"),
          );
          if (targetElement) {
            targetElement.scrollIntoView({ behavior: "smooth" });
          }
        });
      });

      // Hero Slider
      const slides = document.querySelectorAll(".hero-slide");
      const prevBtn = document.querySelector(".prev");
      const nextBtn = document.querySelector(".next");
      let currentSlide = 0;

      function showSlide(n) {
        if (slides.length === 0) return;
        slides.forEach((slide) => slide.classList.remove("active"));
        currentSlide = (n + slides.length) % slides.length;
        slides[currentSlide].classList.add("active");
      }

      if (prevBtn)
        prevBtn.addEventListener("click", () => {
          showSlide(currentSlide - 1);
        });
      if (nextBtn)
        nextBtn.addEventListener("click", () => {
          showSlide(currentSlide + 1);
        });
      if (slides.length > 0)
        setInterval(() => {
          showSlide(currentSlide + 1);
        }, 5000);

      // Header animation
      window.addEventListener("scroll", () => {
        const header = document.querySelector("header");
        if (window.scrollY > 50) {
          header.style.padding = "20px 30px";
          header.style.background = "rgba(15, 15, 15, 0.9)";
          header.style.mixBlendMode = "normal";
        } else {
          header.style.padding = "30px";
          header.style.background = "transparent";
          header.style.mixBlendMode = "difference";
        }
      });

      // Contact Form
      const contactForm = document.getElementById("contactForm");
      if (contactForm) {
        contactForm.addEventListener("submit", function (e) {
          e.preventDefault();
          const currentLang = localStorage.getItem("preferredLanguage") || "fr";
          // WebMCP : si un agent IA déclenche l'envoi, lui renvoyer un
          // résultat structuré (cohérent avec le retour vu par un humain).
          if (e.agentInvoked && typeof e.respondWith === "function") {
            e.respondWith(Promise.resolve(translations[currentLang].formSuccess));
          } else {
            alert(translations[currentLang].formSuccess);
          }
          contactForm.reset();
        });
      }

      /* =====================================================================
         WebMCP — Outils impératifs (API navigator.modelContext).
         Réf : https://developer.chrome.com/docs/ai/webmcp/imperative-api
         Détection de fonctionnalité : inerte hors Chrome compatible.
         Source de vérité du catalogue : à garder synchronisée avec la
         section #apps ci-dessus et avec /llms.txt.
         ===================================================================== */
      (function registerWebMCPTools() {
        if (typeof navigator === "undefined" || !("modelContext" in navigator)) return;
        const mc = navigator.modelContext;
        const ok = (payload) => JSON.stringify(payload);
        const READ_ONLY = { readOnlyHint: true, untrustedContentHint: false };

        const APPS = [
          { name: "Mind Lift",     url: "https://apps.apple.com/fr/app/mind-lift/id6743930224",            tagline: "Citations quotidiennes inspirantes, widget iOS et mode StandBy.",       categories: ["productivité", "bien-être"] },
          { name: "Lava Clock",    url: "https://apps.apple.com/us/app/lava-clock/id6744017027",           tagline: "Horloge animée personnalisable avec fonds animés et météo locale.",     categories: ["utilitaire", "design"] },
          { name: "SunForecast",   url: "https://apps.apple.com/us/app/sunforecast/id6745263927",          tagline: "Prévisions Golden Hour avec Live Activities et Widgets, pour la photo.", categories: ["photographie", "météo"] },
          { name: "Mirror Mind",   url: "https://apps.apple.com/us/app/mirrormind/id6745898920",           tagline: "Journal émotionnel, stockage local (CoreData/SwiftData), suivi du bien-être.", categories: ["bien-être", "santé"] },
          { name: "Grue Quest",    url: "https://apps.apple.com/us/app/grue-quest/id6754385134",           tagline: "Jeu d'aventure textuel hommage à Zork.",                                 categories: ["jeu"] },
          { name: "Synth I.A.",    url: "https://apps.apple.com/app/synth-i-a/id6745096328",               tagline: "Synthèse d'articles par IA pour votre veille quotidienne.",              categories: ["ia", "productivité"] },
          { name: "Pentago",       url: "https://apps.apple.com/us/app/pentago/id6756574305",              tagline: "Jeu de stratégie à plateau rotatif, aligner 5 billes.",                  categories: ["jeu"] },
          { name: "Savoir",        url: "https://apps.apple.com/us/app/savoir-apprenez-chaque-jour/id6758041155", tagline: "Un fait de culture générale par jour, thèmes personnalisables.",   categories: ["éducation"] },
          { name: "Rugby Tracker", url: "https://apps.apple.com/us/app/rugby-tracker/id6760354376",        tagline: "Scores de rugby en direct, widgets et statistiques détaillées.",         categories: ["sport"] },
          { name: "Air Quality",   url: "https://apps.apple.com/us/app/air-quality-tracker/id6762453860",  tagline: "Qualité de l'air, polluants (72h) et risques allergiques (5j).",          categories: ["santé", "environnement"] },
        ];

        const SERVICES = [
          { id: "immobilier", name: "Immobilier & Architecture", description: "Prises de vue aériennes stabilisées et professionnelles pour biens immobiliers et projets architecturaux." },
          { id: "fpv",        name: "Films & Productions FPV",    description: "Plans cinématiques aériens et suivis FPV dynamiques pour productions audiovisuelles." },
          { id: "ios",        name: "Développement App Mobile",   description: "Applications iOS sur mesure en Swift/SwiftUI, de l'architecture (SPM) au déploiement App Store." },
        ];

        const SECTIONS = ["accueil", "portfolio", "videos", "drone", "services", "clients", "apps", "apropos", "faq", "contact"];

        // Lister les applications iOS (filtre optionnel par catégorie).
        mc.registerTool({
          name: "list_ios_apps",
          description: "Liste les applications iOS publiées par eMxPi. Filtre optionnel par catégorie (ex. 'jeu', 'productivité', 'santé', 'sport', 'ia').",
          inputSchema: { type: "object", properties: { category: { type: "string", description: "Catégorie à filtrer. Omettre pour tout retourner." } } },
          annotations: READ_ONLY,
          execute: async ({ category } = {}) => {
            const list = category ? APPS.filter((a) => a.categories.includes(String(category).toLowerCase())) : APPS;
            return ok({ count: list.length, apps: list });
          },
        });

        // Détails d'une application par nom.
        mc.registerTool({
          name: "get_app_details",
          description: "Retourne les détails d'une application iOS d'eMxPi à partir de son nom (correspondance partielle, insensible à la casse).",
          inputSchema: { type: "object", properties: { name: { type: "string", description: "Nom de l'application, ex. 'SunForecast'." } }, required: ["name"] },
          annotations: READ_ONLY,
          execute: async ({ name }) => {
            const q = String(name || "").trim().toLowerCase();
            if (!q) return ok({ error: 'Paramètre "name" requis.' });
            const app = APPS.find((a) => a.name.toLowerCase().includes(q));
            return app ? ok(app) : ok({ error: `Aucune application trouvée pour "${name}".` });
          },
        });

        // Lister les prestations.
        mc.registerTool({
          name: "list_services",
          description: "Liste les prestations proposées par eMxPi (drone, vidéo, développement iOS).",
          inputSchema: { type: "object", properties: {} },
          annotations: READ_ONLY,
          execute: async () => ok({ services: SERVICES }),
        });

        // Informations de contact.
        mc.registerTool({
          name: "get_contact_info",
          description: "Retourne les informations de contact et la localisation d'eMxPi.",
          inputSchema: { type: "object", properties: {} },
          annotations: READ_ONLY,
          execute: async () => ok({
            location: "Nantes / Pays de la Loire, France",
            instagram: "https://www.instagram.com/emxpi/",
            twitter: "https://x.com/emxpi",
            youtube: "http://youtube.com/emxpi",
            contactForm: "https://emxpi.fr/#contact",
          }),
        });

        // Navigation interne (scroll vers une section ancrée).
        mc.registerTool({
          name: "navigate_to_section",
          description: "Fait défiler la page jusqu'à une section du portfolio. Sections valides : " + SECTIONS.join(", ") + ".",
          inputSchema: { type: "object", properties: { section: { type: "string", enum: SECTIONS.slice(), description: "Identifiant de la section cible." } }, required: ["section"] },
          annotations: { readOnlyHint: false, untrustedContentHint: false },
          execute: async ({ section }) => {
            const id = String(section || "").toLowerCase();
            if (!SECTIONS.includes(id)) return ok({ error: `Section inconnue "${section}".`, valid: SECTIONS });
            const el = document.getElementById(id);
            if (!el) return ok({ error: `Élément #${id} introuvable.` });
            el.scrollIntoView({ behavior: "smooth", block: "start" });
            return ok({ navigatedTo: id });
          },
        });
      })();
    </script>
  </body>
</html>
