<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Xavier Jaleran — Expert &amp; Développeur Shopify Freelance</title>
  <meta name="description" content="Développeur Shopify freelance à Toulouse. Migration, création, refonte et optimisation de boutiques Shopify. +15 ans d&#039;expérience, 50+ boutiques suivies.">
  <link rel="canonical" href="https://xavierjaleran.com/">
  <meta property="og:type" content="website">
  <meta property="og:title" content="Xavier Jaleran — Expert &amp; Développeur Shopify Freelance">
  <meta property="og:description" content="Développeur web depuis 2007 et spécialiste Shopify. Migration, création, refonte et optimisation de boutiques en ligne. Basé à Toulouse.">
  <meta property="og:url" content="https://xavierjaleran.com/">
  <meta property="og:image" content="https://xavierjaleran.com/images/xavier-jaleran.jpg">
  <meta property="og:locale" content="fr_FR">
  <link rel="icon" type="image/x-icon" href="/favicon.ico">
  <link rel="preload" href="/assets/fonts/inter-latin.woff2" as="font" type="font/woff2" crossorigin>
  <style>
    @font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
    @font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
    *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
    :root{--green:#95BF47;--green-dark:#7aa838;--dark:#1a1a2e;--dark-light:#2d2d44;--text:#333;--text-light:#666;--bg:#fafafa;--white:#fff;--radius:12px;--shadow:0 4px 24px rgba(0,0,0,0.08);--shadow-hover:0 8px 32px rgba(0,0,0,0.12)}
    html{scroll-behavior:smooth}
    body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--text);background:var(--bg);line-height:1.6}
    #navbar{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,0.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,0.06)}
    .nav-inner{max-width:1120px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between}
    .nav-logo{font-weight:800;font-size:1.2rem;color:var(--dark);text-decoration:none}
    .nav-links{display:flex;gap:32px;list-style:none}
    .nav-links a{text-decoration:none;color:var(--text-light);font-size:0.9rem;font-weight:500}
    .nav-cta{background:var(--green);color:var(--white)!important;padding:8px 20px;border-radius:8px}
    .burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
    .burger span{display:block;width:24px;height:2px;background:var(--dark);border-radius:2px}
    .hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:120px 24px 80px;background:linear-gradient(160deg,var(--dark) 0%,var(--dark-light) 100%);color:var(--white);position:relative;overflow:hidden}
    .hero-content{position:relative;z-index:1;max-width:760px}
    .hero h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;line-height:1.15;margin-bottom:20px}
    .hero h1 span{color:var(--green)}
    .hero p{font-size:1.15rem;color:rgba(255,255,255,0.7);max-width:580px;margin:0 auto 36px;line-height:1.7}
    .hero-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
    .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:10px;font-size:1rem;font-weight:600;text-decoration:none;border:none}
    .btn-primary{background:var(--green);color:var(--white)}
    .btn-outline-light{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,0.25)}
    @media(max-width:768px){.nav-links{display:none}.burger{display:flex}}
  </style>
  <link rel="preload" href="/assets/css/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="/assets/css/style.css"></noscript>
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-CNDWMXL32F"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-CNDWMXL32F');
  </script>
</head>
<body>

<!-- NAV -->
<nav id="navbar">
  <div class="nav-inner">
    <a href="/" class="nav-logo"><img src="/images/logo-xavier-jaleran-100.webp" alt="Xavier Jaleran" width="50" height="50" style="vertical-align:middle;margin-right:10px;">Xavier Jaleran</a>
    <ul class="nav-links" id="navLinks">
      <li><a href="/#services">Services</a></li>
      <li><a href="/#apps">Apps sur-mesure</a></li>
      <li><a href="/#temoignages">Avis clients</a></li>
      <li><a href="/blog/">Blog</a></li>
      <li><a href="/#contact" class="nav-cta">Me contacter</a></li>
          </ul>
    <button class="burger" id="burger" aria-label="Menu">
      <span></span><span></span><span></span>
    </button>
  </div>
</nav>

<!-- HERO -->
<section class="hero">
  <div class="hero-content">
    <div class="hero-badge">Expert Shopify Freelance</div>
    <h1>Votre expert <span>Shopify</span> pour un e&#8209;commerce qui&nbsp;performe</h1>
    <p>Développeur web depuis 2007 et spécialiste Shopify depuis 2020, j'accompagne les entrepreneurs et les marques dans la création, la migration et l'optimisation de leur boutique en ligne.</p>
    <div class="hero-buttons">
      <a href="#contact" class="btn btn-primary">Discutons de votre projet</a>
      <a href="#services" class="btn btn-outline-light">Découvrir mes services</a>
    </div>
    <div class="shopify-partner-badge"><img src="images/shopify-partners.png" alt="Shopify Partners"></div>
    <div class="hero-stats">
      <div>
        <div class="hero-stat-number">15+</div>
        <div class="hero-stat-label">Années d'expérience</div>
      </div>
      <div>
        <div class="hero-stat-number">50+</div>
        <div class="hero-stat-label">Boutiques suivies</div>
      </div>
      <div>
        <div class="hero-stat-number">100%</div>
        <div class="hero-stat-label">Clients satisfaits</div>
      </div>
    </div>
    <div class="hero-reviews">
      <span class="hero-reviews-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
      <a href="#clients" class="hero-reviews-link">Voir les avis clients</a>
    </div>
  </div>
</section>

<!-- SERVICES -->
<section id="services">
  <div class="container">
    <div class="section-header center">
      <div class="section-label">Services</div>
      <h2 class="section-title">Tout ce qu'il faut pour votre boutique Shopify</h2>
      <p class="section-subtitle">De la création à l'optimisation, je prends en charge chaque aspect de votre projet e-commerce.</p>
    </div>
    <div class="services-grid">

      <div class="service-card">
        <div class="service-icon">&#128300;</div>
        <h3>Audit &amp; Conseil</h3>
        <p>Avant de coder, j'analyse. Audit CRO et SEO complet pour identifier les quick wins et les chantiers prioritaires. Vous repartez avec un plan d'action clair et priorisé.</p>
        <div class="service-tags">
          <span class="service-tag">CRO</span>
          <span class="service-tag">SEO</span>
          <span class="service-tag">UX</span>
        </div>
      </div>

      <div class="service-card">
        <div class="service-icon">&#128640;</div>
        <h3>Migration vers Shopify</h3>
        <p>Vous êtes sur PrestaShop, WooCommerce ou une autre plateforme ? Je gère la migration complète : catalogue, domaine, DNS, emails, redirections SEO. Zéro perte de référencement.</p>
        <div class="service-tags">
          <span class="service-tag">PrestaShop</span>
          <span class="service-tag">WooCommerce</span>
          <span class="service-tag">SEO</span>
        </div>
      </div>

      <div class="service-card">
        <div class="service-icon">&#127912;</div>
        <h3>Création de boutique</h3>
        <p>Lancement de votre boutique Shopify de A à Z. Choix du thème, personnalisation avancée, intégration de votre identité visuelle et configuration complète pour un démarrage optimal.</p>
        <div class="service-tags">
          <span class="service-tag">Thème</span>
          <span class="service-tag">Design</span>
          <span class="service-tag">Configuration</span>
        </div>
      </div>

      <div class="service-card">
        <div class="service-icon">&#9889;</div>
        <h3>Développement sur-mesure</h3>
        <p>Personnalisation avancée en Liquid, intégration d'applications, meta-objets, meta-champs, systèmes de facturation, paiement en plusieurs fois, multilingue et bien plus.</p>
        <div class="service-tags">
          <span class="service-tag">Liquid</span>
          <span class="service-tag">HTML/CSS/JS</span>
          <span class="service-tag">Apps</span>
        </div>
      </div>

      <div class="service-card">
        <div class="service-icon">&#128260;</div>
        <h3>Refonte de boutique</h3>
        <p>Votre boutique a besoin d'un coup de neuf ? Je repense vos pages produits, votre tunnel de vente et l'expérience utilisateur pour transformer plus de visiteurs en clients.</p>
        <div class="service-tags">
          <span class="service-tag">UX/UI</span>
          <span class="service-tag">Conversion</span>
          <span class="service-tag">Performance</span>
        </div>
      </div>

      <div class="service-card">
        <div class="service-icon">&#128200;</div>
        <h3>Optimisation SEO &amp; CRO</h3>
        <p>Données structurées Schema.org, rich snippets, maillage interne, fil d'ariane, optimisation des pages produits... Chaque détail compte pour votre visibilité et vos conversions.</p>
        <div class="service-tags">
          <span class="service-tag">Schema.org</span>
          <span class="service-tag">Rich Snippets</span>
          <span class="service-tag">Maillage</span>
        </div>
      </div>

    </div>
  </div>
</section>

<!-- APPS -->
<section id="apps">
  <div class="container">
    <div class="section-header center">
      <div class="section-label">Développement d'apps</div>
      <h2 class="section-title">Des applications Shopify sur-mesure pour vos besoins</h2>
      <p class="section-subtitle">Quand les applications du Shopify App Store ne suffisent plus, je développe des apps privées adaptées à votre métier.</p>
    </div>
    <div class="about-grid">
      <div>
        <div class="about-text">
          <p>Certaines problématiques métier ne trouvent pas de réponse dans les apps existantes. Dans ce cas, je conçois et développe des <strong>applications Shopify custom</strong> qui s'intègrent nativement à votre back-office et à votre workflow.</p>
          <p>Qu'il s'agisse d'automatiser des tâches, de connecter Shopify à un outil tiers via API, de créer un tableau de bord sur-mesure ou de mettre en place une logique métier avancée, je m'appuie sur la stack officielle Shopify pour garantir fiabilité et évolutivité.</p>
          <p>Chaque app est pensée pour être <strong>simple à utiliser</strong>, intégrée visuellement au back-office Shopify (Polaris) et maintenue dans la durée.</p>
        </div>
      </div>
      <div>
        <div class="app-features">
          <div class="app-feature">
            <div class="app-feature-icon">&#128268;</div>
            <div>
              <strong>Intégrations API</strong>
              <p>Connexion avec vos outils existants (CRM, ERP, IA, logistique...)</p>
            </div>
          </div>
          <div class="app-feature">
            <div class="app-feature-icon">&#9881;&#65039;</div>
            <div>
              <strong>Automatisations</strong>
              <p>Webhooks, Shopify Flow, traitements en arrière-plan</p>
            </div>
          </div>
          <div class="app-feature">
            <div class="app-feature-icon">&#128202;</div>
            <div>
              <strong>Tableaux de bord</strong>
              <p>Interfaces admin embarquées avec Polaris &amp; App Bridge</p>
            </div>
          </div>
          <div class="app-feature">
            <div class="app-feature-icon">&#128640;</div>
            <div>
              <strong>Déploiement &amp; maintenance</strong>
              <p>Hébergement cloud, mises à jour et support continu</p>
            </div>
          </div>
        </div>
        <div class="app-stack">
          <span class="tech-pill">Remix</span>
          <span class="tech-pill">Shopify CLI</span>
          <span class="tech-pill">Polaris</span>
          <span class="tech-pill">App Bridge</span>
          <span class="tech-pill">GraphQL</span>
          <span class="tech-pill">PostgreSQL</span>
          <span class="tech-pill">Webhooks</span>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ABOUT -->
<section id="about">
  <div class="container">
    <div class="about-grid">
      <div>
        <div class="section-label">A propos</div>
        <h2 class="section-title">Un développeur qui parle votre&nbsp;langage</h2>
        <div class="about-text">
          <p>Développeur web depuis 2007, j'ai décidé en 2020 de me consacrer entièrement à l'écosystème Shopify. Depuis, j'ai accompagné des dizaines d'entrepreneurs et de marques dans des secteurs variés : mode, cosmétiques, luxe, santé, bien-être...</p>
          <p>Ce qui me distingue ? Je ne me contente pas d'exécuter. Je suis <strong>force de proposition</strong>, j'explique tout clairement — même les sujets techniques — et je m'assure que chaque décision sert vos objectifs business.</p>
          <p>Basé à Toulouse, je travaille principalement à distance et je suis disponible pour des missions ponctuelles comme pour des accompagnements de longue durée.</p>
        </div>
      </div>
      <div>
        <div class="about-photo">
          <img src="images/xavier-jaleran.jpg" alt="Xavier Jaleran — Expert & Développeur Shopify Freelance" loading="lazy">
        </div>
        <div class="about-highlights">
          <div class="about-highlight">
            <div class="about-highlight-number">2007</div>
            <div class="about-highlight-label">Début de carrière</div>
          </div>
          <div class="about-highlight">
            <div class="about-highlight-number">2020</div>
            <div class="about-highlight-label">Spécialisation Shopify</div>
          </div>
          <div class="about-highlight">
            <div class="about-highlight-number">50+</div>
            <div class="about-highlight-label">Boutiques suivies</div>
          </div>
          <div class="about-highlight">
            <div class="about-highlight-number">100%</div>
            <div class="about-highlight-label">Clients satisfaits</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- PROCESS -->
<section id="process">
  <div class="container">
    <div class="section-header center">
      <div class="section-label">Approche</div>
      <h2 class="section-title">Comment se déroule une collaboration ?</h2>
      <p class="section-subtitle">Un processus clair et structuré pour que votre projet avance sereinement.</p>
    </div>
    <div class="process-steps">
      <div class="process-step">
        <h3>Échange &amp; cadrage</h3>
        <p>On discute de votre projet, vos objectifs et vos contraintes. Je vous pose les bonnes questions pour bien comprendre vos besoins.</p>
      </div>
      <div class="process-step">
        <h3>Audit &amp; recommandations</h3>
        <p>J'analyse l'existant (ou le marché si c'est une création) et je vous propose un plan d'action clair avec les priorités identifiées.</p>
      </div>
      <div class="process-step">
        <h3>Développement</h3>
        <p>Je développe, j'intègre et je teste. Vous avez une visibilité complète sur l'avancement et on échange régulièrement.</p>
      </div>
      <div class="process-step">
        <h3>Livraison &amp; suivi</h3>
        <p>Mise en production accompagnée, formation à la prise en main des outils et suivi post-livraison pour ajuster si nécessaire.</p>
      </div>
    </div>
  </div>
</section>

<!-- LOGOS CLIENTS -->
<section id="clients">
  <div class="container">
    <div class="section-header center">
      <div class="section-label">Ils me font confiance</div>
    </div>
    <div class="logos-wrapper">
      <img src="images/logos-clients.webp" alt="Logos des marques clientes : Artist, Yo! Editions, Drilllight, Acheter des fans, Blue Lobster, Symbiozys, Bud &amp; Blossom, Happy Made, Skin Cafeine, Vagance, Inishié Paris, Pro Moustiquaire, Vogtime, Niir" loading="lazy">
    </div>
  </div>
</section>

<!-- TESTIMONIALS -->
<section id="temoignages">
  <div class="container">
    <div class="section-header center">
      <div class="section-label">Avis clients</div>
      <h2 class="section-title">Ce que disent mes clients</h2>
      <p class="section-subtitle"></p>
    </div>
    <div class="testimonials-grid">

      <div class="testimonial-card">
        <div class="testimonial-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
        <p class="testimonial-text">&laquo;&nbsp;Xavier est extrêmement réactif et maîtrise parfaitement Shopify. Il comprend rapidement les besoins, propose des solutions pertinentes et s'adapte facilement aux demandes. En plus d'être très compétent, il est toujours agréable, disponible et pédagogue dans ses explications. Honnêtement, heureusement que je l'ai !&nbsp;&raquo;</p>
        <div class="testimonial-author">
          <div class="testimonial-avatar">A</div>
          <div>
            <div class="testimonial-name">Anna</div>
            <div class="testimonial-company">Enära SASU</div>
          </div>
        </div>
      </div>

      <div class="testimonial-card">
        <div class="testimonial-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
        <p class="testimonial-text">&laquo;&nbsp;Nous avons vraiment beaucoup aimé travailler avec Xavier. Son expérience, ses compétences et la pertinence de ses propositions ont été extrêmement précieuses. Certains se disent experts Shopify, d'autres le sont vraiment : Xavier fait clairement partie de ces derniers.&nbsp;&raquo;</p>
        <div class="testimonial-author">
          <div class="testimonial-avatar">F</div>
          <div>
            <div class="testimonial-name">Francois</div>
            <div class="testimonial-company">Artist la marque</div>
          </div>
        </div>
      </div>

      <div class="testimonial-card">
        <div class="testimonial-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
        <p class="testimonial-text">&laquo;&nbsp;Très bonne expérience. Xavier comprend vite les objectifs et cherche les meilleures solutions pour les atteindre. La communication est fluide et les livrables sont de qualité.&nbsp;&raquo;</p>
        <div class="testimonial-author">
          <div class="testimonial-avatar">F</div>
          <div>
            <div class="testimonial-name">Florent</div>
            <div class="testimonial-company">SUPERVAN</div>
          </div>
        </div>
      </div>

      <div class="testimonial-card">
        <div class="testimonial-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
        <p class="testimonial-text">&laquo;&nbsp;Xavier est très pro. Réactif, force de proposition, sérieux et à l'écoute. C'est rare de trouver un technicien capable d'expliquer facilement à un non initié tout ce qu'il fait et pourquoi.&nbsp;&raquo;</p>
        <div class="testimonial-author">
          <div class="testimonial-avatar">T</div>
          <div>
            <div class="testimonial-name">Thierry</div>
            <div class="testimonial-company">Symbiozys</div>
          </div>
        </div>
      </div>

      <div class="testimonial-card">
        <div class="testimonial-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
        <p class="testimonial-text">&laquo;&nbsp;Xavier est un développeur exceptionnel ! Extraordinairement efficace, logique, structuré, il anticipe de manière ultra sensée les besoins en vulgarisant chaque étape de manière claire et intelligible.&nbsp;&raquo;</p>
        <div class="testimonial-author">
          <div class="testimonial-avatar">M</div>
          <div>
            <div class="testimonial-name">Maud Espie</div>
            <div class="testimonial-company">Consultante communication</div>
          </div>
        </div>
      </div>

      <div class="testimonial-card">
        <div class="testimonial-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
        <p class="testimonial-text">&laquo;&nbsp;La prestation de Xavier a surpassé mes attentes ! Délai respecté et même rendu en avance. Xavier a été force de proposition permettant d'avoir un regard critique sur mon projet.&nbsp;&raquo;</p>
        <div class="testimonial-author">
          <div class="testimonial-avatar">R</div>
          <div>
            <div class="testimonial-name">Rémi</div>
            <div class="testimonial-company">Immo Libre</div>
          </div>
        </div>
      </div>

      <div class="testimonial-card">
        <div class="testimonial-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
        <p class="testimonial-text">&laquo;&nbsp;Au sein de notre agence, la collaboration a été fluide de bout en bout : il a su s'approprier nos maquettes rapidement et les intégrer fidèlement en Liquid, tout en anticipant les contraintes techniques.&nbsp;&raquo;</p>
        <div class="testimonial-author">
          <div class="testimonial-avatar">M</div>
          <div>
            <div class="testimonial-name">Manon Mauperin</div>
            <div class="testimonial-company">Cher Ami (Agence)</div>
          </div>
        </div>
      </div>

      <div class="testimonial-card">
        <div class="testimonial-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
        <p class="testimonial-text">&laquo;&nbsp;Xavier est super compétent et c'est très agréable de travailler avec. Je recommande absolument à toute personne qui a besoin d'un développeur efficace et professionnel. Ce n'est pas toujours facile à trouver !&nbsp;&raquo;</p>
        <div class="testimonial-author">
          <div class="testimonial-avatar">C</div>
          <div>
            <div class="testimonial-name">Christophe</div>
            <div class="testimonial-company">Fusionten</div>
          </div>
        </div>
      </div>

      <div class="testimonial-card">
        <div class="testimonial-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
        <p class="testimonial-text">&laquo;&nbsp;Excellent contact avec Xavier, un vrai professionnel qui sait nous prévenir des limites de tous les développements qu'il met en place. Très agréable de travailler ensemble.&nbsp;&raquo;</p>
        <div class="testimonial-author">
          <div class="testimonial-avatar">L</div>
          <div>
            <div class="testimonial-name">Laurent</div>
            <div class="testimonial-company">MON BEAUTY COACH</div>
          </div>
        </div>
      </div>

    </div>
    <div style="text-align:center;margin-top:40px;">
      <a href="https://www.malt.fr/profile/xavierjaleran" target="_blank" rel="noopener" class="btn btn-outline-light">Voir plus d'avis sur Malt</a>
    </div>
  </div>
</section>

<!-- COMPETENCES -->
<section id="competences">
  <div class="container">
    <div class="section-header center">
      <div class="section-label">Compétences</div>
      <h2 class="section-title">Technologies &amp; expertises</h2>
      <p class="section-subtitle">(parmi d'autres...)</p>
    </div>
    <div class="tech-grid">
      <span class="tech-pill highlight">Shopify</span>
      <span class="tech-pill highlight">Liquid</span>
      <span class="tech-pill">HTML5</span>
      <span class="tech-pill">CSS3</span>
      <span class="tech-pill">JavaScript</span>
      <span class="tech-pill">SEO technique</span>
      <span class="tech-pill">CRO</span>
      <span class="tech-pill">Schema.org</span>
      <span class="tech-pill">Meta-objets Shopify</span>
      <span class="tech-pill">Meta-champs</span>
      <span class="tech-pill">Shopify Flow</span>
      <span class="tech-pill">Figma (intégration)</span>
      <span class="tech-pill">Multilingue</span>
      <span class="tech-pill">Migration e-commerce</span>
    </div>
  </div>
</section>

<!-- FAQ -->
<section id="faq">
  <div class="container">
    <div class="section-header center">
      <div class="section-label">FAQ</div>
      <h2 class="section-title">Questions fréquentes</h2>
    </div>
    <div class="faq-list">
      <div class="faq-item">
        <button class="faq-question">Comment se déroule un premier échange ?<span class="faq-icon">+</span></button>
        <div class="faq-answer"><p>On commence par un appel ou une visio pour comprendre votre projet, vos objectifs et vos contraintes. Ensuite, je vous propose un plan d'action clair avec un devis adapté. Pas d'engagement tant que vous n'avez pas validé.</p></div>
      </div>
      <div class="faq-item">
        <button class="faq-question">Quels sont vos délais habituels ?<span class="faq-icon">+</span></button>
        <div class="faq-answer"><p>Cela dépend de la complexité du projet. Un audit ou des optimisations ponctuelles prennent quelques jours. Une création ou une refonte complète de boutique, entre 2 et 6 semaines. Je m'engage toujours sur un calendrier précis dès le démarrage.</p></div>
      </div>
      <div class="faq-item">
        <button class="faq-question">Travaillez-vous uniquement avec Shopify ?<span class="faq-icon">+</span></button>
        <div class="faq-answer"><p>Oui, je me concentre exclusivement sur l'écosystème Shopify. C'est ce qui me permet d'avoir une expertise pointue sur la plateforme : thèmes, Liquid, API, apps, migrations... Plutôt que d'être généraliste, je préfère être vraiment bon sur un outil.</p></div>
      </div>
      <div class="faq-item">
        <button class="faq-question">Proposez-vous un suivi après la livraison ?<span class="faq-icon">+</span></button>
        <div class="faq-answer"><p>Absolument. Je ne disparais pas une fois le projet livré. Je propose un accompagnement continu pour la maintenance, les évolutions et les optimisations de votre boutique. Plusieurs de mes clients travaillent avec moi depuis des années.</p></div>
      </div>
      <div class="faq-item">
        <button class="faq-question">Je suis sur PrestaShop ou WooCommerce, pouvez-vous gérer la migration ?<span class="faq-icon">+</span></button>
        <div class="faq-answer"><p>C'est l'une de mes spécialités. Je gère la migration complète : catalogue produits, clients, commandes, domaine, DNS, emails et aussi les aspects SEO pour ne pas perdre votre référencement. Votre boutique est opérationnelle sur Shopify sans interruption.</p></div>
      </div>
      <div class="faq-item">
        <button class="faq-question">Peut-on travailler ensemble à distance ?<span class="faq-icon">+</span></button>
        <div class="faq-answer"><p>Bien sûr, la majorité de mes collaborations se font à distance. Visio, messagerie, outils de suivi de projet... La communication est fluide et régulière. Je suis basé à Toulouse si vous préférez des rencontres en personne.</p></div>
      </div>
    </div>
  </div>
</section>

<!-- CONTACT -->
<section id="contact" style="background:linear-gradient(160deg,var(--dark) 0%,var(--dark-light) 100%);color:var(--white);">
  <div class="container" style="position:relative;z-index:1;">
    <div class="section-header center">
      <div class="section-label" style="background:rgba(149,191,71,0.15);color:var(--green);">Contact</div>
      <h2 class="section-title" style="color:var(--white);">Un projet Shopify en tête ?</h2>
      <p class="section-subtitle" style="color:rgba(255,255,255,0.6);">Décrivez-moi votre projet et je vous réponds sous 24h.</p>
    </div>
    <div class="contact-grid">
      <div class="contact-info">
        <h3>Discutons de votre projet</h3>
        <p>Que vous ayez une idée précise ou simplement des questions, n'hésitez pas. Je suis là pour vous aider à trouver la meilleure solution pour votre boutique.</p>
        <div class="contact-detail">
          <span class="contact-detail-icon">&#9993;</span>
          <a href="mailto:contact@xavierjaleran.com">contact@xavierjaleran.com</a>
        </div>
        <div class="contact-detail">
          <span class="contact-detail-icon">&#127760;</span>
          <a href="https://www.malt.fr/profile/xavierjaleran" target="_blank" rel="noopener">Mon profil Malt</a>
        </div>
        <div class="contact-detail">
          <span class="contact-detail-icon">&#128205;</span>
          Toulouse, France        </div>
      </div>
      <div>
                <form class="contact-form" method="POST" action="/">
          <input type="hidden" name="csrf_token" value="c71bd35299da7e2c3a51e2433b5695d7501cb183a7b56d28a7fc536b1fadddc7">          <input type="hidden" name="contact_form" value="1">
          <input type="hidden" name="_ts" value="1781249920">
          <input type="hidden" name="_xf" value="">
          <div style="position:absolute;left:-9999px;" aria-hidden="true">
            <label for="phone_number">Téléphone</label>
            <input type="text" name="phone_number" id="phone_number" value="" tabindex="-1" autocomplete="off">
          </div>
          <input type="text" name="name" placeholder="Votre nom" required>
          <input type="email" name="email" placeholder="Votre email" required>
          <input type="text" name="sujet" placeholder="Sujet (ex: Migration Shopify, Refonte...)">
          <textarea name="message" placeholder="Décrivez votre projet..." required></textarea>
          <button type="submit" class="btn btn-primary">Envoyer le message</button>
        </form>
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            var f = document.querySelector('.contact-form');
            if (f) {
                var ts = f.querySelector('input[name="_ts"]').value;
                var crc32=function(s){var t=new Int32Array(256);for(var i=0;i<256;i++){var c=i;for(var j=0;j<8;j++)c=c&1?0xEDB88320^(c>>>1):c>>>1;t[i]=c}var r=0xFFFFFFFF;for(var i=0;i<s.length;i++)r=t[(r^s.charCodeAt(i))&0xFF]^(r>>>8);return((r^0xFFFFFFFF)>>>0).toString(16).padStart(8,'0')};
                f.querySelector('input[name="_xf"]').value = crc32('xj-' + ts);
            }
        });
        </script>
      </div>
    </div>
  </div>
</section>


<!-- FOOTER -->
<footer>
  <p>&copy; 2026 Xavier Jaleran — Expert & Développeur Shopify Freelance &bull; Toulouse, France &bull; <a href="mailto:contact@xavierjaleran.com">contact@xavierjaleran.com</a> &bull; <a href="https://www.malt.fr/profile/xavierjaleran" target="_blank" rel="noopener">Profil Malt</a> &bull; <a href="/mentions-legales">Mentions légales</a> &bull; <a href="/politique-confidentialite">Politique de confidentialité</a></p>
</footer>

<script>
  // Navbar scroll effect
  const navbar = document.getElementById('navbar');
  window.addEventListener('scroll', () => {
    navbar.classList.toggle('scrolled', window.scrollY > 20);
  });

  // Mobile menu
  const burger = document.getElementById('burger');
  const navLinks = document.getElementById('navLinks');
  burger.addEventListener('click', () => {
    navLinks.classList.toggle('open');
  });
  navLinks.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', () => navLinks.classList.remove('open'));
  });

  // Scroll animations
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.style.opacity = '1';
        entry.target.style.transform = 'translateY(0)';
      }
    });
  }, { threshold: 0.1 });

  document.querySelectorAll('.service-card, .process-step, .testimonial-card, .about-highlight').forEach(el => {
    el.style.opacity = '0';
    el.style.transform = 'translateY(20px)';
    el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
    observer.observe(el);
  });

  // FAQ accordion
  document.querySelectorAll('.faq-question').forEach(btn => {
    btn.addEventListener('click', () => {
      const item = btn.parentElement;
      const wasOpen = item.classList.contains('open');
      document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('open'));
      if (!wasOpen) item.classList.add('open');
    });
  });

</script>

</body>
</html>
