<!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="Présentation BTG" description="Deck 1920×1080 d'après les gabarits 'Slides presentation BTG' du Brandbook — cover, programme, chapitre, cartes, étapes, chiffre clé, clôture." -->
<helmet>
  <script src="./ds-base.js"></script>
  <style>
    body { margin: 0; background: #0C1E18; }
    @media print { body { background: none; } }
  </style>
</helmet>
<x-import component-from-global-scope="deck-stage" from="./deck-stage.js" width="1920" height="1080" hint-size="100%,100vh">

  <!-- 01 · COVER -->
  <section data-label="Cover" data-screen-label="01 Cover" style="position:relative; width:1920px; height:1080px; overflow:hidden; background:#005236; font-family:'Instrument Sans',sans-serif;">
    <div style="position:absolute; left:60px; top:20px; right:60px; display:flex; justify-content:space-between; font-family:'Schibsted Grotesk',sans-serif; font-weight:500; font-size:14px; letter-spacing:-0.04em; color:#D4F5E0;">
      <span>Beetogreen — Présentation</span>
      <span>2026</span>
    </div>
    <div style="position:absolute; left:-320px; bottom:-560px; width:1450px; height:672px;">
      <div style="transform:scale(0.09); transform-origin:0 0;">
        <x-import component-from-global-scope="BeeToGreenDesignSystem_3a7d8f.Shapes" figure="01" color="green ice" hint-size="16108px,7469px"></x-import>
      </div>
    </div>
    <div style="position:absolute; left:60px; top:133px; width:1100px; display:flex; flex-direction:column; gap:48px;">
      <h1 style="margin:0; font-family:'Parkinsans',sans-serif; font-weight:700; font-size:96px; line-height:105%; letter-spacing:-0.02em; color:#E6FF55;">Facilitez l'accès à la mobilité durable de vos salariés</h1>
      <p style="margin:0; font-weight:500; font-size:28px; color:#FFFFFF;">Le référent vélo en entreprise</p>
    </div>
    <div style="position:absolute; right:120px; bottom:0; width:560px; height:640px;">
      <image-slot id="cover-photo" shape="rect" placeholder="Photo — personne à vélo"></image-slot>
    </div>
  </section>

  <!-- 02 · AU PROGRAMME -->
  <section data-label="Programme" data-screen-label="02 Programme" style="position:relative; width:1920px; height:1080px; overflow:hidden; background:#0C1E18; font-family:'Instrument Sans',sans-serif;">
    <div style="position:absolute; left:60px; top:20px; right:60px; display:flex; justify-content:space-between; font-family:'Schibsted Grotesk',sans-serif; font-weight:500; font-size:14px; letter-spacing:-0.04em; color:#008558;">
      <span>Beetogreen — Présentation</span>
      <span>02</span>
    </div>
    <h2 style="position:absolute; left:60px; top:120px; margin:0; font-family:'Parkinsans',sans-serif; font-weight:700; font-size:76px; letter-spacing:-0.02em; color:#E6FF55;">Au programme</h2>
    <div style="position:absolute; left:60px; top:320px; width:820px; display:flex; flex-direction:column; gap:36px;">
      <div style="display:flex; align-items:center; gap:20px;"><span style="display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:#E6FF55; color:#0C1E18; font-weight:600; font-size:16px;">01</span><span style="font-weight:500; font-size:26px; color:#F5F0E6;">Le constat &amp; l'opportunité</span></div>
      <div style="display:flex; align-items:center; gap:20px;"><span style="display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:#E6FF55; color:#0C1E18; font-weight:600; font-size:16px;">02</span><span style="font-weight:500; font-size:26px; color:#F5F0E6;">La solution Beetogreen</span></div>
      <div style="display:flex; align-items:center; gap:20px;"><span style="display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:#E6FF55; color:#0C1E18; font-weight:600; font-size:16px;">03</span><span style="font-weight:500; font-size:26px; color:#F5F0E6;">La marketplace &amp; le réseau</span></div>
      <div style="display:flex; align-items:center; gap:20px;"><span style="display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:#E6FF55; color:#0C1E18; font-weight:600; font-size:16px;">04</span><span style="font-weight:500; font-size:26px; color:#F5F0E6;">Exemples de pricing</span></div>
      <div style="display:flex; align-items:center; gap:20px;"><span style="display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:#E6FF55; color:#0C1E18; font-weight:600; font-size:16px;">05</span><span style="font-weight:500; font-size:26px; color:#F5F0E6;">Tarifs &amp; services</span></div>
      <div style="display:flex; align-items:center; gap:20px;"><span style="display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:#E6FF55; color:#0C1E18; font-weight:600; font-size:16px;">06</span><span style="font-weight:500; font-size:26px; color:#F5F0E6;">Notre plus-value &amp; références</span></div>
    </div>
    <div style="position:absolute; right:120px; top:120px; width:620px; height:860px;">
      <image-slot id="programme-photo" shape="rounded" radius="16" placeholder="Photo — cycliste"></image-slot>
    </div>
  </section>

  <!-- 03 · CHAPITRE -->
  <section data-label="Chapitre" data-screen-label="03 Chapitre" style="position:relative; width:1920px; height:1080px; overflow:hidden; background:#8CCAF7; font-family:'Instrument Sans',sans-serif;">
    <div style="position:absolute; left:-420px; top:-160px; width:1300px; height:1490px;">
      <div style="transform:scale(0.408); transform-origin:0 0; color:#033968;">
        <x-import component-from-global-scope="BeeToGreenDesignSystem_3a7d8f.LogoIconsB" type="icon" color="dark green" hint-size="2928px,3350px" style="color:#033968"></x-import>
      </div>
    </div>
    <h2 style="position:absolute; right:120px; top:340px; width:820px; margin:0; font-family:'Parkinsans',sans-serif; font-weight:700; font-size:110px; line-height:100%; letter-spacing:-0.02em; color:#033968;">Nos services</h2>
    <div style="position:absolute; left:60px; bottom:35px; font-family:'Schibsted Grotesk',sans-serif; font-weight:500; font-size:14px; letter-spacing:-0.04em; color:#033968;">03&nbsp;&nbsp;Beetogreen — Présentation</div>
  </section>

  <!-- 04 · CARTES OFFRE -->
  <section data-label="Offre" data-screen-label="04 Offre" style="position:relative; width:1920px; height:1080px; overflow:hidden; background:#F3EEFC; font-family:'Instrument Sans',sans-serif;">
    <div style="position:absolute; left:60px; top:20px; right:60px; display:flex; justify-content:space-between; font-family:'Schibsted Grotesk',sans-serif; font-weight:500; font-size:14px; letter-spacing:-0.04em; color:#4B1A9A;">
      <span>Beetogreen — Présentation</span>
      <span>04</span>
    </div>
    <h2 style="position:absolute; left:60px; top:110px; width:900px; margin:0; font-family:'Parkinsans',sans-serif; font-weight:700; font-size:64px; line-height:110%; letter-spacing:-0.02em; color:#4B1A9A;">Un modèle freemium pour l'entreprise</h2>
    <div style="position:absolute; left:60px; right:60px; top:360px; bottom:80px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px;">
      <div style="border-radius:16px; background:#4B1A9A; padding:40px; display:flex; flex-direction:column; gap:20px;">
        <h3 style="margin:0; font-family:'Parkinsans',sans-serif; font-weight:600; font-size:34px; color:#FFFFFF;">Marketplace</h3>
        <p style="margin:0; font-size:20px; line-height:150%; color:#D3BFF3;">L'accès à la plus grande sélection de vélos et d'équipements négociés pour vos salariés.</p>
      </div>
      <div style="border-radius:16px; background:#E54C1E; padding:40px; display:flex; flex-direction:column; gap:20px;">
        <h3 style="margin:0; font-family:'Parkinsans',sans-serif; font-weight:600; font-size:34px; color:#FFFFFF;">Onboarding</h3>
        <p style="margin:0; font-size:20px; line-height:150%; color:#F7C9BA;">Un accompagnement au changement : ateliers, essais et conseils pour se lancer sereinement.</p>
      </div>
      <div style="border-radius:16px; background:#033968; padding:40px; display:flex; flex-direction:column; gap:20px;">
        <h3 style="margin:0; font-family:'Parkinsans',sans-serif; font-weight:600; font-size:34px; color:#FFFFFF;">Welcome pack</h3>
        <p style="margin:0; font-size:20px; line-height:150%; color:#8CCAF7;">Tout l'équipement essentiel du cycliste, prêt à l'emploi dès le premier jour.</p>
      </div>
    </div>
  </section>

  <!-- 05 · ÉTAPES -->
  <section data-label="Étapes" data-screen-label="05 Étapes" style="position:relative; width:1920px; height:1080px; overflow:hidden; background:#ECF6FE; font-family:'Instrument Sans',sans-serif;">
    <div style="position:absolute; left:60px; top:20px; right:60px; display:flex; justify-content:space-between; font-family:'Schibsted Grotesk',sans-serif; font-weight:500; font-size:14px; letter-spacing:-0.04em; color:#033968;">
      <span>Beetogreen — Présentation</span>
      <span>05</span>
    </div>
    <div style="position:absolute; left:60px; top:110px; width:1000px; display:flex; flex-direction:column; gap:16px;">
      <h2 style="margin:0; font-family:'Parkinsans',sans-serif; font-weight:700; font-size:64px; letter-spacing:-0.02em; color:#033968;">Lever les freins au changement</h2>
      <p style="margin:0; font-size:24px; color:#033968;">Pour encourager durablement les trajets domicile-travail à vélo.</p>
    </div>
    <div style="position:absolute; left:60px; right:60px; top:380px; bottom:100px; display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;">
      <div style="border-radius:14px; background:#033968; padding:32px; display:flex; flex-direction:column; justify-content:space-between;">
        <span style="font-family:'Parkinsans',sans-serif; font-weight:600; font-size:40px; color:#8CCAF7;">01</span>
        <div style="display:flex; flex-direction:column; gap:12px;">
          <h3 style="margin:0; font-family:'Parkinsans',sans-serif; font-weight:600; font-size:30px; color:#FFFFFF;">La sécurité</h3>
          <p style="margin:0; font-size:17px; line-height:145%; color:#8CCAF7;">Quiz de prévention et équipements adaptés à chaque trajet.</p>
        </div>
      </div>
      <div style="border-radius:14px; background:#033968; padding:32px; display:flex; flex-direction:column; justify-content:space-between;">
        <span style="font-family:'Parkinsans',sans-serif; font-weight:600; font-size:40px; color:#8CCAF7;">02</span>
        <div style="display:flex; flex-direction:column; gap:12px;">
          <h3 style="margin:0; font-family:'Parkinsans',sans-serif; font-weight:600; font-size:30px; color:#FFFFFF;">L'entretien</h3>
          <p style="margin:0; font-size:17px; line-height:145%; color:#8CCAF7;">Ateliers de réparation et réseau de partenaires près du bureau.</p>
        </div>
      </div>
      <div style="border-radius:14px; background:#033968; padding:32px; display:flex; flex-direction:column; justify-content:space-between;">
        <span style="font-family:'Parkinsans',sans-serif; font-weight:600; font-size:40px; color:#8CCAF7;">03</span>
        <div style="display:flex; flex-direction:column; gap:12px;">
          <h3 style="margin:0; font-family:'Parkinsans',sans-serif; font-weight:600; font-size:30px; color:#FFFFFF;">Le parking</h3>
          <p style="margin:0; font-size:17px; line-height:145%; color:#8CCAF7;">Des solutions de stationnement sécurisé sur site.</p>
        </div>
      </div>
      <div style="border-radius:14px; background:#033968; padding:32px; display:flex; flex-direction:column; justify-content:space-between;">
        <span style="font-family:'Parkinsans',sans-serif; font-weight:600; font-size:40px; color:#8CCAF7;">04</span>
        <div style="display:flex; flex-direction:column; gap:12px;">
          <h3 style="margin:0; font-family:'Parkinsans',sans-serif; font-weight:600; font-size:30px; color:#FFFFFF;">Les essais</h3>
          <p style="margin:0; font-size:17px; line-height:145%; color:#8CCAF7;">Tester le bon vélo avant de s'engager.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- 06 · CHIFFRE CLÉ -->
  <section data-label="Chiffre clé" data-screen-label="06 Chiffre clé" style="position:relative; width:1920px; height:1080px; overflow:hidden; background:#E54C1E; font-family:'Instrument Sans',sans-serif;">
    <div style="position:absolute; left:60px; top:20px; right:60px; display:flex; justify-content:space-between; font-family:'Schibsted Grotesk',sans-serif; font-weight:500; font-size:14px; letter-spacing:-0.04em; color:#F7C9BA;">
      <span>Beetogreen — Présentation</span>
      <span>06</span>
    </div>
    <div style="position:absolute; left:60px; top:200px; width:1400px; display:flex; flex-direction:column; gap:24px;">
      <span style="font-family:'Parkinsans',sans-serif; font-weight:700; font-size:280px; line-height:95%; letter-spacing:-0.03em; color:#D4F5E0;">100 000</span>
      <span style="font-weight:600; font-size:44px; line-height:130%; color:#FFFFFF; max-width:800px;">salariés déjà accompagnés par Beetogreen</span>
    </div>
  </section>

  <!-- 07 · CLÔTURE -->
  <section data-label="Clôture" data-screen-label="07 Clôture" style="position:relative; width:1920px; height:1080px; overflow:hidden; background:#005236; font-family:'Instrument Sans',sans-serif;">
    <div style="position:absolute; left:77px; top:400px; width:1766px; height:355px;">
      <div style="transform:scale(0.1036); 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>
    <p style="position:absolute; left:80px; top:820px; margin:0; font-weight:500; font-size:28px; color:#D4F5E0;">On en discute ? — contact@beetogreen.com</p>
    <div style="position:absolute; left:60px; bottom:35px; font-family:'Schibsted Grotesk',sans-serif; font-weight:500; font-size:14px; letter-spacing:-0.04em; color:#008558;">07&nbsp;&nbsp;Beetogreen — Présentation</div>
  </section>

</x-import>
</x-dc>
</body>
</html>
