<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<!-- @template name="Landing page BTG" description="Page marketing d'après la Homepage-D finale (Art direction UI) — nav, hero, promesse + cartes, témoignage, FAQ, push CTA, footer." -->
<helmet>
  <script src="./ds-base.js"></script>
  <script src="./image-slot.js"></script>
  <style>body { margin: 0; }</style>
</helmet>
<div style="min-height:100vh; background:#F5F0E6; font-family:'Instrument Sans',sans-serif;" data-screen-label="Landing page">

  <!-- NAV -->
  <header style="display:flex; align-items:center; justify-content:space-between; padding:20px 56px; background:#F5F0E6;">
    <div style="width:190px; height:38px; overflow:hidden;">
      <div style="transform:scale(0.01115); transform-origin:0 0;">
        <x-import component-from-global-scope="BeeToGreenDesignSystem_3a7d8f.LogoBeetogreenFull" type="full" style2="brand" color="03" hint-size="17036px,3423px"></x-import>
      </div>
    </div>
    <nav style="display:flex; gap:36px; font-weight:500; font-size:16px; color:#0C1E18;">
      <a href="#solutions" style="color:#0C1E18; text-decoration:none;">Solutions</a>
      <a href="#tarifs" style="color:#0C1E18; text-decoration:none;">Tarifs</a>
      <a href="#pourquoi" style="color:#0C1E18; text-decoration:none;">Pourquoi Beetogreen ?</a>
      <a href="#ressources" style="color:#0C1E18; text-decoration:none;">Ressources</a>
    </nav>
    <div style="display:flex; gap:12px; align-items:center;">
      <a href="#connexion" style="font-weight:500; font-size:16px; color:#0C1E18; text-decoration:none; padding:12px 18px;">Connexion</a>
      <a href="#demo" style="font-weight:600; font-size:16px; color:#F5F0E6; text-decoration:none; background:#005236; border-radius:8px; padding:13px 22px;">Demander une démo</a>
    </div>
  </header>

  <!-- HERO -->
  <section style="position:relative; padding:96px 56px 140px; overflow:hidden;">
    <div style="position:relative; max-width:1148px; margin:0 auto; display:flex; flex-direction:column; gap:60px; align-items:center; text-align:center;">
      <h1 style="margin:0; font-family:'Parkinsans',sans-serif; font-weight:700; font-size:90px; line-height:95%; letter-spacing:-0.03em; color:#005236;">Activez le vélo.<br>Simplement.</h1>
      <div style="display:flex; flex-direction:column; gap:40px; align-items:center; max-width:638px;">
        <p style="margin:0; font-weight:500; font-size:22px; line-height:30px; letter-spacing:-0.02em; color:#0C1E18;">BeeToGreen aide les entreprises à transformer la mobilité des salariés grâce à une solution clé en main qui finance, structure et déploie le vélo en entreprise (rien que ça).</p>
        <a href="#decouvrir" style="display:inline-block; font-weight:600; font-size:16px; color:#F5F0E6; text-decoration:none; background:#005236; border-radius:8px; padding:15px 28px;">Découvrez Beetogreen</a>
      </div>
    </div>
    <div style="position:absolute; left:40px; bottom:-60px; width:279px; border-radius:12px; background:#FCEE98; padding:9px 17px 20px; box-shadow:0 12px 40px rgba(12,30,24,0.10);">
      <div style="width:245px; height:149px; border-radius:10px 10px 0 0; overflow:hidden;">
        <image-slot id="hero-card-photo" shape="rect" placeholder="Photo vélo"></image-slot>
      </div>
      <p style="margin:16px 0 0; font-family:'Parkinsans',sans-serif; font-weight:700; font-size:38px; line-height:105%; letter-spacing:-0.04em; color:#005236;">Jusqu'à 600€/an<br><span style="font-size:26px;">et par salarié</span></p>
    </div>
    <div style="position:absolute; right:-80px; top:40px; width:560px; height:260px; overflow:visible; pointer-events:none;">
      <div style="transform:scale(0.035); transform-origin:0 0;">
        <x-import component-from-global-scope="BeeToGreenDesignSystem_3a7d8f.Shapes" figure="01" color="green light" hint-size="16108px,7469px"></x-import>
      </div>
    </div>
  </section>

  <!-- PROMESSE + CARTES -->
  <section id="solutions" style="background:#FFFFFF; padding:100px 32px 120px;">
    <h2 style="margin:0 auto; max-width:1176px; font-family:'Parkinsans',sans-serif; font-weight:700; font-size:72px; line-height:110%; letter-spacing:-0.03em; text-align:center; color:#005236;">Le vélo devient un avantage salarié simple à activer.</h2>
    <div style="max-width:1376px; margin:80px auto 0; display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px;">
      <div style="border-radius:16px; background:#005236; padding:40px; display:flex; flex-direction:column; gap:28px; min-height:520px;">
        <h3 style="margin:0; font-family:'Parkinsans',sans-serif; font-weight:600; font-size:34px; line-height:115%; color:#F5F0E6;">On vous aide à démarrer.</h3>
        <ul style="margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:14px; font-size:18px; line-height:145%; color:#D4F5E0;">
          <li>Un diagnostic mobilité offert,</li>
          <li>Un déploiement guidé pas à pas,</li>
          <li>Des salariés embarqués dès le premier jour.</li>
        </ul>
        <span style="margin-top:auto; align-self:flex-start; background:#E6FF55; color:#0C1E18; font-weight:600; font-size:15px; border-radius:8px; padding:12px 20px;">On démarre ?</span>
      </div>
      <div style="border-radius:16px; background:#005236; padding:40px; display:flex; flex-direction:column; gap:28px; min-height:520px;">
        <h3 style="margin:0; font-family:'Parkinsans',sans-serif; font-weight:600; font-size:34px; line-height:115%; color:#F5F0E6;">On vous simplifie vraiment la vie.</h3>
        <ul style="margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:14px; font-size:18px; line-height:145%; color:#D4F5E0;">
          <li>Le FMD est activé, cadré, sécurisé,</li>
          <li>On centralise les justificatifs,</li>
          <li>Et on vous accompagne sur le terrain.</li>
        </ul>
        <span style="margin-top:auto; align-self:flex-start; background:#FCEE98; color:#0C1E18; font-weight:600; font-size:15px; border-radius:8px; padding:12px 20px;">Voir comment</span>
      </div>
      <div style="border-radius:16px; background:#005236; padding:40px; display:flex; flex-direction:column; gap:28px; min-height:520px;">
        <h3 style="margin:0; font-family:'Parkinsans',sans-serif; font-weight:600; font-size:34px; line-height:115%; color:#F5F0E6;">Avec une décision qui tient la route.</h3>
        <ul style="margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:14px; font-size:18px; line-height:145%; color:#D4F5E0;">
          <li>Pas de frais de setup à prévoir,</li>
          <li>Pas de flotte à gérer,</li>
          <li>Un coût clair, sans surprise.</li>
        </ul>
        <span style="margin-top:auto; align-self:flex-start; background:#FFD0E0; color:#0C1E18; font-weight:600; font-size:15px; border-radius:8px; padding:12px 20px;">Parler à un expert</span>
      </div>
    </div>
  </section>

  <!-- TÉMOIGNAGE -->
  <section id="pourquoi" style="background:#F5F0E6; padding:110px 56px;">
    <div style="max-width:1100px; margin:0 auto; display:flex; flex-direction:column; gap:48px;">
      <div style="display:flex; justify-content:space-between; align-items:center;">
        <span style="font-weight:500; font-size:14px; letter-spacing:0.12em; text-transform:uppercase; color:#008558;">Ils roulent avec nous</span>
        <span style="font-weight:500; font-size:16px; color:#008558;">01 / 03</span>
      </div>
      <blockquote style="margin:0; font-family:'Parkinsans',sans-serif; font-weight:600; font-size:44px; line-height:125%; letter-spacing:-0.02em; color:#0C1E18;">« En trois mois, un salarié sur cinq venait au bureau à vélo. Beetogreen a géré le FMD, les vélos et les ateliers — nous, on a juste dit oui. »</blockquote>
      <div style="display:flex; align-items:center; gap:16px;">
        <div style="width:56px; height:56px;">
          <image-slot id="temoin-avatar" shape="circle" placeholder="Portrait"></image-slot>
        </div>
        <div style="display:flex; flex-direction:column; gap:4px;">
          <span style="font-weight:600; font-size:17px; color:#0C1E18;">Prénom Nom</span>
          <span style="font-size:15px; color:#52525B;">DRH, Entreprise</span>
        </div>
      </div>
    </div>
  </section>

  <!-- FAQ -->
  <section id="ressources" style="background:#D4F5E0; padding:110px 56px;">
    <div style="max-width:1240px; margin:0 auto; display:grid; grid-template-columns:445px 1fr; gap:80px; align-items:start;">
      <h2 style="margin:0; font-family:'Parkinsans',sans-serif; font-weight:600; font-size:56px; line-height:100%; letter-spacing:-0.025em; color:#005236;">Vous avez des questions ?</h2>
      <div style="display:flex; flex-direction:column; gap:8px;">
        <div style="border-radius:8px; background:#FFFFFF; padding:24px; display:flex; flex-direction:column; gap:24px;">
          <div style="display:flex; justify-content:space-between; align-items:center; gap:32px;">
            <span style="font-weight:600; font-size:26px; letter-spacing:-1px; color:#005236;">Qu'est-ce que le Forfait Mobilité Durable (FMD) ?</span>
            <span style="font-size:26px; color:#181E25;">−</span>
          </div>
          <p style="margin:0; font-size:16px; line-height:24px; color:#181E25;">Le FMD permet à l'employeur de prendre en charge jusqu'à 600 € par an et par salarié pour les trajets domicile-travail à vélo — exonérés de cotisations. Beetogreen l'active, le cadre et le sécurise pour vous.</p>
        </div>
        <div style="border-radius:8px; background:#FFFFFF; padding:24px; display:flex; justify-content:space-between; align-items:center; gap:32px;">
          <span style="font-weight:600; font-size:26px; letter-spacing:-1px; color:#005236;">Combien coûte la mise en place ?</span>
          <span style="font-size:26px; color:#181E25;">+</span>
        </div>
        <div style="border-radius:8px; background:#FFFFFF; padding:24px; display:flex; justify-content:space-between; align-items:center; gap:32px;">
          <span style="font-weight:600; font-size:26px; letter-spacing:-1px; color:#005236;">Qui gère les vélos et l'entretien ?</span>
          <span style="font-size:26px; color:#181E25;">+</span>
        </div>
        <div style="border-radius:8px; background:#FFFFFF; padding:24px; display:flex; justify-content:space-between; align-items:center; gap:32px;">
          <span style="font-weight:600; font-size:26px; letter-spacing:-1px; color:#005236;">Et si un salarié quitte l'entreprise ?</span>
          <span style="font-size:26px; color:#181E25;">+</span>
        </div>
      </div>
    </div>
  </section>

  <!-- PUSH CTA -->
  <section id="demo" style="background:#FFFFFF; padding:110px 56px; display:flex; justify-content:center;">
    <div style="width:1200px; max-width:100%; height:436px; overflow:hidden; border-radius:20px;">
      <div style="transform:scale(0.872); transform-origin:0 0;">
        <x-import component-from-global-scope="BeeToGreenDesignSystem_3a7d8f.Push" property1="push-01" hint-size="1376px,500px"></x-import>
      </div>
    </div>
  </section>

  <!-- FOOTER -->
  <footer style="background:#0C1E18; padding:80px 56px 40px;">
    <div style="max-width:1376px; margin:0 auto; display:flex; flex-direction:column; gap:64px;">
      <div style="display:flex; justify-content:space-between; gap:60px; flex-wrap:wrap;">
        <div style="width:260px; height:52px; overflow:hidden;">
          <div style="transform:scale(0.01526); transform-origin:0 0;">
            <x-import component-from-global-scope="BeeToGreenDesignSystem_3a7d8f.LogoBeetogreenFull" type="full" style2="brand" color="01" hint-size="17036px,3423px"></x-import>
          </div>
        </div>
        <div style="display:flex; gap:80px; flex-wrap:wrap;">
          <div style="display:flex; flex-direction:column; gap:14px;">
            <span style="font-weight:500; font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:#E6FF55;">Solutions</span>
            <a href="#employeurs" style="color:#F5F0E6; text-decoration:none; font-size:16px;">Employeurs</a>
            <a href="#salaries" style="color:#F5F0E6; text-decoration:none; font-size:16px;">Salariés</a>
            <a href="#partenaires" style="color:#F5F0E6; text-decoration:none; font-size:16px;">Devenir partenaire</a>
          </div>
          <div style="display:flex; flex-direction:column; gap:14px;">
            <span style="font-weight:500; font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:#E6FF55;">Ressources</span>
            <a href="#blog" style="color:#F5F0E6; text-decoration:none; font-size:16px;">Blog</a>
            <a href="#newsroom" style="color:#F5F0E6; text-decoration:none; font-size:16px;">Newsroom</a>
            <a href="#contact" style="color:#F5F0E6; text-decoration:none; font-size:16px;">Contact</a>
          </div>
          <div style="display:flex; flex-direction:column; gap:14px;">
            <span style="font-weight:500; font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:#E6FF55;">Légal</span>
            <a href="#mentions" style="color:#F5F0E6; text-decoration:none; font-size:16px;">Mentions légales</a>
            <a href="#cgu" style="color:#F5F0E6; text-decoration:none; font-size:16px;">CGU / CGV</a>
            <a href="#donnees" style="color:#F5F0E6; text-decoration:none; font-size:16px;">Données personnelles</a>
          </div>
        </div>
      </div>
      <div style="display:flex; justify-content:space-between; border-top:1px solid rgba(245,240,230,0.18); padding-top:24px; font-size:14px; color:#9DA8A2;">
        <span>© 2026 BeeToGreen — Le référent vélo en entreprise</span>
        <span>Fait avec énergie (et sans voiture)</span>
      </div>
    </div>
  </footer>
</div>
</x-dc>
</body>
</html>
