---
import BaseLayout from '@/layouts/BaseLayout.astro';
import '@/styles/global.css';
import '@/styles/home-workbench.css';
import SiteHeader from '@/components/SiteHeader.astro';
import { withSiteBase } from '@/lib/site';
import { TRACK_EVENTS, trackAttrs } from '@/lib/tracking';

const title = "Formation électronique appliquée | L'électron rare";
const description = "Formations sur mesure : électronique, automatisme, énergie, stockage, PCB, instrumentation, IoT et optimisation. 1 jour, 3 jours ou programme dédié. Écoles, entreprises.";
const homeHref = withSiteBase('/');
const homeAboutHref = withSiteBase('/#a-propos');
const homeMissionsHref = withSiteBase('/#graphic-sprints-title');
const formationHref = withSiteBase('/formation/');
const contactHref = withSiteBase('/#contact');
const mentionsHref = withSiteBase('/mentions-legales/');
const headerItems = [
  { href: homeAboutHref, label: 'Approche' },
  { href: homeMissionsHref, label: 'Missions' },
  { href: formationHref, label: 'Formation', current: true },
  { href: contactHref, label: 'Contact', desktopOnly: true }
];
---

<BaseLayout title={title} description={description} ogDescription="Formations sur mesure en électronique, automatisme, énergie, stockage, PCB, instrumentation et IoT. 1 jour, 3 jours ou programme dédié. Écoles, entreprises, centres de formation.">
  <SiteHeader brandHref={homeHref} items={headerItems} quickHref={contactHref} />

  <main id="main-content" class="site-shell studio-structure pb-12 pt-3">

    <section class="circuit-board rounded-2xl p-5 md:p-6 mt-4" data-reveal>
      <div class="circuit-title-row">
        <span class="circuit-node" aria-hidden="true"></span>
        <h1 class="m-0 text-3xl md:text-4xl">Formation électronique appliquée</h1>
        <span class="circuit-pinline" aria-hidden="true"></span>
      </div>

      <p class="section-lead mb-0 mt-3">
        Des formations pratiques, ancrées dans le terrain, pour monter en compétences sur l'électronique, l'automatisme, l'énergie, le stockage, la conception PCB, l'instrumentation, l'IoT et l'optimisation d'usage.
      </p>
      <p class="mb-0 mt-3 studio-muted">
        Chaque formation est construite sur mesure à partir de votre contexte réel : vos projets, vos équipes, vos contraintes. Pas de slides génériques — du bench, du schéma et du livrable.
      </p>
    </section>

    <section class="circuit-board rounded-2xl p-5 md:p-6 mt-5" data-reveal>
      <div class="circuit-title-row">
        <span class="circuit-node circuit-node--magenta" aria-hidden="true"></span>
        <h2 class="m-0 text-2xl md:text-3xl">Publics cibles</h2>
        <span class="circuit-pinline" aria-hidden="true"></span>
      </div>

      <div class="mt-4 rounded-xl border border-[color:var(--line)] p-3">
        <ul class="m-0 grid grid-cols-1 gap-2 p-0">
          <li class="list-none studio-chip studio-chip--cyan">
            <strong>Entreprises industrielles</strong> — équipes R&D, bureaux d'études, techniciens de maintenance qui veulent concevoir, diagnostiquer ou fiabiliser des systèmes électroniques dans leurs produits ou process.
          </li>
          <li class="list-none studio-chip studio-chip--vio">
            <strong>Écoles et universités</strong> — BTS, IUT, grandes écoles : TP encadrés, projets tutorés, modules spécialisés en systèmes électroniques, PCB et prototypage.
          </li>
          <li class="list-none studio-chip studio-chip--pink">
            <strong>Centres de formation</strong> — organismes souhaitant intégrer des modules électronique, instrumentation, énergie, stockage, IoT ou automatisme à leur catalogue.
          </li>
          <li class="list-none studio-chip studio-chip--emerald">
            <strong>Studios créatifs et compagnies</strong> — équipes techniques du spectacle vivant, de l'événementiel ou des arts numériques qui veulent gagner en autonomie.
          </li>
        </ul>
      </div>
    </section>

    <section class="mt-5" data-reveal>
      <div class="graphic-sprints-panel graphic-sprints-panel--routing">
        <div class="graphic-sprints-head">
          <p class="graphic-sprints-kicker">Formats</p>
          <h2 class="graphic-sprints-title">Trois formats, un principe : le concret d'abord</h2>
          <p class="graphic-sprints-copy">
            Chaque format inclut un support de cours, des exercices pratiques sur matériel réel et un livrable que les participants repartent avec.
          </p>
        </div>

        <div class="graphic-sprints-grid">
          <article class="graphic-sprint-card" style="--sprint-progress-target: 33%">
            <header class="graphic-sprint-card-head">
              <p class="graphic-sprint-status graphic-sprint-status--trace">Initiation</p>
              <p class="graphic-sprint-window">1 jour (7h)</p>
            </header>
            <h3 class="graphic-sprint-title">Découverte</h3>
            <p class="graphic-sprint-objective">
              Comprendre les fondamentaux d'un domaine technique. Idéal pour une première prise en main ou une mise à niveau rapide.
            </p>
            <div class="graphic-sprint-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="33">
              <span class="graphic-sprint-progress-fill"></span>
            </div>
            <ul class="graphic-sprint-deliverables">
              <li>Théorie appliquée + démos live</li>
              <li>TP sur matériel réel</li>
              <li>Support de cours PDF</li>
            </ul>
          </article>

          <article class="graphic-sprint-card" style="--sprint-progress-target: 66%">
            <header class="graphic-sprint-card-head">
              <p class="graphic-sprint-status graphic-sprint-status--bench">Approfondissement</p>
              <p class="graphic-sprint-window">3 jours (21h)</p>
            </header>
            <h3 class="graphic-sprint-title">Pratique</h3>
            <p class="graphic-sprint-objective">
              Maîtriser un sujet de bout en bout avec un projet fil rouge. Les participants repartent avec un prototype fonctionnel.
            </p>
            <div class="graphic-sprint-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="66">
              <span class="graphic-sprint-progress-fill"></span>
            </div>
            <ul class="graphic-sprint-deliverables">
              <li>Projet fil rouge réalisé</li>
              <li>Prototype fonctionnel</li>
              <li>Documentation technique complète</li>
            </ul>
          </article>

          <article class="graphic-sprint-card" style="--sprint-progress-target: 100%">
            <header class="graphic-sprint-card-head">
              <p class="graphic-sprint-status graphic-sprint-status--run">Sur mesure</p>
              <p class="graphic-sprint-window">Durée adaptée</p>
            </header>
            <h3 class="graphic-sprint-title">Programme dédié</h3>
            <p class="graphic-sprint-objective">
              Formation construite intégralement autour de votre projet, vos équipements et vos objectifs. Accompagnement post-formation inclus.
            </p>
            <div class="graphic-sprint-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100">
              <span class="graphic-sprint-progress-fill"></span>
            </div>
            <ul class="graphic-sprint-deliverables">
              <li>Programme sur mesure</li>
              <li>Matériel adapté à votre contexte</li>
              <li>Suivi post-formation</li>
            </ul>
          </article>
        </div>
      </div>
    </section>

    <section class="circuit-board rounded-2xl p-5 md:p-6 mt-5" data-reveal>
      <div class="circuit-title-row">
        <span class="circuit-node" aria-hidden="true"></span>
        <h2 class="m-0 text-2xl md:text-3xl">Sujets de formation</h2>
        <span class="circuit-pinline" aria-hidden="true"></span>
      </div>

      <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-3">
        <article class="rounded-xl border border-[color:var(--line)] p-4">
          <h3 class="m-0 text-lg font-semibold">Systèmes électroniques et embarqués</h3>
          <p class="mt-2 mb-0 studio-muted">
            Architecture matérielle, microcontrôleurs (STM32, ESP32, Teensy), alimentation, lecture de datasheet, debug sur bench. Conformité IPC-A-610 et CEM.
          </p>
        </article>

        <article class="rounded-xl border border-[color:var(--line)] p-4">
          <h3 class="m-0 text-lg font-semibold">Conception PCB</h3>
          <p class="mt-2 mb-0 studio-muted">
            De la schématique au routage avec KiCad. Règles de design, stackup, vérification DRC/ERC, préparation des fichiers de fabrication (Gerber, BOM, pick & place).
          </p>
        </article>

        <article class="rounded-xl border border-[color:var(--line)] p-4">
          <h3 class="m-0 text-lg font-semibold">IoT et protocoles</h3>
          <p class="mt-2 mb-0 studio-muted">
            Capteurs, télémétrie, protocoles terrain (MQTT, HTTP, VE.Direct), connectivité (WiFi, BLE, LoRa), TinyML et IA embarquée. Du capteur au dashboard.
          </p>
        </article>

        <article class="rounded-xl border border-[color:var(--line)] p-4">
          <h3 class="m-0 text-lg font-semibold">Énergie, stockage et optimisation</h3>
          <p class="mt-2 mb-0 studio-muted">
            Batterie, BMS, télémétrie, supervision, pilotage de charges, logique d'optimisation et amélioration d'exploitation. De la mesure au système mieux réglé.
          </p>
        </article>

        <article class="rounded-xl border border-[color:var(--line)] p-4">
          <h3 class="m-0 text-lg font-semibold">Automatisme industriel</h3>
          <p class="mt-2 mb-0 studio-muted">
            Automates Siemens (S7) et Schneider, câblage d'armoires, variateurs, mise en service. Conformité IEC 60204-1, IEC 61439, NFC 13-200. Lecture de schémas électriques industriels.
          </p>
        </article>

        <article class="rounded-xl border border-[color:var(--line)] p-4">
          <h3 class="m-0 text-lg font-semibold">Contrôle LED et scénographie</h3>
          <p class="mt-2 mb-0 studio-muted">
            Protocoles DMX, Art-Net, DANTE. Pilotage LED, topologies multi-cartes, intégration dans des dispositifs scéniques et événementiels.
          </p>
        </article>

        <article class="rounded-xl border border-[color:var(--line)] p-4">
          <h3 class="m-0 text-lg font-semibold">Firmware et programmation</h3>
          <p class="mt-2 mb-0 studio-muted">
            C/C++ embarqué, Python pour l'instrumentation, debug série, gestion mémoire, interruptions, RTOS. Du code qui tourne sur le terrain.
          </p>
        </article>

        <article class="rounded-xl border border-[color:var(--line)] p-4">
          <h3 class="m-0 text-lg font-semibold">Workflows agentiques et IA appliquée</h3>
          <p class="mt-2 mb-0 studio-muted">
            Intégrer l'IA et les agents autonomes dans vos flux de travail : génération de code embarqué, revue automatisée, documentation technique, analyse de datasheets et tests assistés par IA. Productivité et qualité augmentées.
          </p>
        </article>
      </div>
    </section>

    <section class="circuit-board rounded-2xl p-5 md:p-6 mt-5" data-reveal>
      <div class="circuit-title-row">
        <span class="circuit-node circuit-node--magenta" aria-hidden="true"></span>
        <h2 class="m-0 text-2xl md:text-3xl">Catalogue des formations</h2>
        <span class="circuit-pinline" aria-hidden="true"></span>
      </div>

      <p class="section-lead mb-0 mt-3">14 modules prêts à l'emploi. Chaque formation est disponible en inter-entreprises (Lyon) ou intra/sur site (toute la France).</p>

      <h3 class="mt-4 mb-2 text-lg font-semibold" style="color:var(--electric)">Initiations — Tous publics</h3>
      <div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-3">
        <article class="rounded-xl border border-[color:var(--line)] p-4">
          <h4 class="m-0 text-base font-semibold">Mes Premiers Circuits</h4>
          <p class="mt-1 mb-1 studio-muted" style="font-size:0.85rem">Breadboard, soudure, badge lumineux. Zéro prérequis.</p>
          <p class="m-0" style="font-size:0.8rem"><strong>1 jour · 420€</strong> · 6-8 pers.</p>
        </article>
        <article class="rounded-xl border border-[color:var(--line)] p-4">
          <h4 class="m-0 text-base font-semibold">Arduino Pour Tous</h4>
          <p class="mt-1 mb-1 studio-muted" style="font-size:0.85rem">Capteurs, LED, moteurs. Kit Arduino à emporter.</p>
          <p class="m-0" style="font-size:0.8rem"><strong>1 jour · 450€</strong> · 6-8 pers.</p>
        </article>
        <article class="rounded-xl border border-[color:var(--line)] p-4">
          <h4 class="m-0 text-base font-semibold">Lumière et Son</h4>
          <p class="mt-1 mb-1 studio-muted" style="font-size:0.85rem">LED NeoPixel, DMX512, audio interactif. Kit LED+son inclus.</p>
          <p class="m-0" style="font-size:0.8rem"><strong>1 jour · 480€</strong> · 6-8 pers.</p>
        </article>
        <article class="rounded-xl border border-[color:var(--line)] p-4">
          <h4 class="m-0 text-base font-semibold">KiCad Découverte</h4>
          <p class="mt-1 mb-1 studio-muted" style="font-size:0.85rem">Du breadboard au PCB. Commandez votre carte chez JLCPCB.</p>
          <p class="m-0" style="font-size:0.8rem"><strong>1 jour · 420€</strong> · 6-8 pers.</p>
        </article>
      </div>

      <h3 class="mt-4 mb-2 text-lg font-semibold" style="color:var(--trace-magenta)">Créatif & Artistes</h3>
      <div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-3">
        <article class="rounded-xl border border-[color:var(--line)] p-4">
          <h4 class="m-0 text-base font-semibold">Créer son Contrôleur MIDI</h4>
          <p class="mt-1 mb-1 studio-muted" style="font-size:0.85rem">Teensy, potentiomètres, capteurs → instrument MIDI USB personnalisé.</p>
          <p class="m-0" style="font-size:0.8rem"><strong>1 jour · 450€</strong> · Variante 3h : 220€</p>
        </article>
        <article class="rounded-xl border border-[color:var(--line)] p-4">
          <h4 class="m-0 text-base font-semibold">Programmation Embarquée pour Artistes</h4>
          <p class="mt-1 mb-1 studio-muted" style="font-size:0.85rem">ESP32, capteurs, DMX, Art-Net, OSC → installations interactives.</p>
          <p class="m-0" style="font-size:0.8rem"><strong>1 jour · 480€</strong> · Variante 3h : 240€</p>
        </article>
        <article class="rounded-xl border border-[color:var(--line)] p-4">
          <h4 class="m-0 text-base font-semibold">IA pour la Création Artistique</h4>
          <p class="mt-1 mb-1 studio-muted" style="font-size:0.85rem">Stable Diffusion, ComfyUI, Ollama. Image, son, vidéo, performance live.</p>
          <p class="m-0" style="font-size:0.8rem"><strong>1 jour · 500€</strong> · Variante 3h : 250€</p>
        </article>
      </div>

      <h3 class="mt-4 mb-2 text-lg font-semibold" style="color:var(--accent)">Pro — Avancé</h3>
      <div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-3">
        <article class="rounded-xl border border-[color:var(--line)] p-4">
          <h4 class="m-0 text-base font-semibold">KiCad — Conception PCB</h4>
          <p class="mt-1 mb-1 studio-muted" style="font-size:0.85rem">KiCad 9/10, routage avancé, impedance, DFM, fabrication JLCPCB.</p>
          <p class="m-0" style="font-size:0.8rem"><strong>2 jours · 1 550€</strong> · 6 pers. max</p>
        </article>
        <article class="rounded-xl border border-[color:var(--line)] p-4">
          <h4 class="m-0 text-base font-semibold">Dispositifs Culturels</h4>
          <p class="mt-1 mb-1 studio-muted" style="font-size:0.85rem">LED, DMX512, Art-Net, autonomie batteries, intégration terrain spectacle.</p>
          <p class="m-0" style="font-size:0.8rem"><strong>1 jour · 775€</strong> · Finançable Afdas/OPCO</p>
        </article>
      </div>

      <h3 class="mt-4 mb-2 text-lg font-semibold" style="color:var(--trace-green)">Enfants & Jeunes</h3>
      <div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-3">
        <article class="rounded-xl border border-[color:var(--line)] p-4">
          <h4 class="m-0 text-base font-semibold">Premiers Circuits (8-10 ans)</h4>
          <p class="mt-1 mb-1 studio-muted" style="font-size:0.85rem">micro:bit, programmation par blocs, LED, capteurs.</p>
          <p class="m-0" style="font-size:0.8rem"><strong>3 demi-journées · 89€</strong></p>
        </article>
        <article class="rounded-xl border border-[color:var(--line)] p-4">
          <h4 class="m-0 text-base font-semibold">Maker Junior (10-13 ans)</h4>
          <p class="mt-1 mb-1 studio-muted" style="font-size:0.85rem">Arduino, première soudure, capteurs, projet personnel.</p>
          <p class="m-0" style="font-size:0.8rem"><strong>5 demi-journées · 149€</strong></p>
        </article>
        <article class="rounded-xl border border-[color:var(--line)] p-4">
          <h4 class="m-0 text-base font-semibold">Electro Lab (13-16 ans)</h4>
          <p class="mt-1 mb-1 studio-muted" style="font-size:0.85rem">ESP32, KiCad, conception et fabrication de vrai PCB.</p>
          <p class="m-0" style="font-size:0.8rem"><strong>8 sessions · 299€</strong></p>
        </article>
        <article class="rounded-xl border border-[color:var(--line)] p-4">
          <h4 class="m-0 text-base font-semibold">Atelier Parent-Enfant</h4>
          <p class="mt-1 mb-1 studio-muted" style="font-size:0.85rem">3h de découverte en duo. Montage, soudure, LED.</p>
          <p class="m-0" style="font-size:0.8rem"><strong>3h · 59€/binôme</strong> · À partir de 8 ans</p>
        </article>
      </div>
    </section>

    <section class="circuit-board rounded-2xl p-5 md:p-6 mt-5" data-reveal>
      <div class="circuit-title-row">
        <span class="circuit-node circuit-node--magenta" aria-hidden="true"></span>
        <h2 class="m-0 text-2xl md:text-3xl">Demander un programme</h2>
        <span class="circuit-pinline" aria-hidden="true"></span>
      </div>

      <p class="section-lead mb-0 mt-3">
        Décrivez votre besoin en quelques lignes. Je vous propose un programme adapté sous 48h.
      </p>
      <p class="mb-0 mt-3 studio-muted">
        Précisez le public, le niveau, le sujet visé et le format souhaité. Même une idée vague suffit pour démarrer.
      </p>

      <div class="mt-4 flex flex-wrap gap-3">
        <a
          href="mailto:contact@lelectronrare.fr?subject=Demande%20de%20formation&body=Bonjour%20Cl%C3%A9ment%2C%0A%0AJe%20suis%20int%C3%A9ress%C3%A9%20par%20une%20formation.%0A%0AContexte%20(entreprise%2C%20%C3%A9cole%2C%20centre%20de%20formation)%20%3A%0ASujet%20vis%C3%A9%20%3A%0APublic%20concern%C3%A9%20%3A%0AFormat%20souhait%C3%A9%20(dur%C3%A9e%2C%20pr%C3%A9sentiel%2Fdistanciel)%20%3A"
          class="figma-lab-pill figma-lab-pill--primary"
          {...trackAttrs(TRACK_EVENTS.outboundEmailContact, 'mailto:contact@lelectronrare.fr')}
        >
          Envoyer par mail
        </a>
        <a
          href="https://rdv.saillant.cc/clement/formation"
          target="_blank"
          rel="noopener noreferrer"
          class="figma-lab-pill figma-lab-pill--secondary"
        >
          Réserver un échange 30 min
        </a>
        <a
          href="https://fr.linkedin.com/in/electron-rare"
          target="_blank"
          rel="noopener noreferrer"
          class="figma-lab-pill figma-lab-pill--secondary"
          {...trackAttrs(TRACK_EVENTS.outboundLinkedinContact, 'linkedin.com')}
        >
          Contacter sur LinkedIn
        </a>
      </div>

      <ul aria-label="Repères" class="mb-0 mt-4 pl-5 studio-muted">
        <li>Intervention en présentiel (France entière) ou en distanciel</li>
        <li>Matériel de TP fourni ou adapté à votre parc existant</li>
        <li>Convention de formation et programme détaillé sur demande</li>
        <li>Intervention possible via un organisme certifié Qualiopi pour le financement OPCO</li>
        <li>Assuré RC Pro · NDA sur demande</li>
      </ul>
    </section>

  </main>

  <footer class="site-footer border-t border-[var(--line)] py-6 text-sm text-[var(--text-muted)]">
    <div class="site-shell footer-grid footer-grid--enhanced">
      <div class="footer-col footer-col--brand">
        <p class="m-0 footer-title">L'électron rare</p>
        <div class="footer-brand-meta">
          <p class="mb-0 footer-copy">
            © 2026 Clément Saillant - systèmes électroniques spécifiques, conseil, formation — industrie, culture et projets multi-techniques.
          </p>
        </div>
      </div>
      <nav aria-label="Ressources" class="footer-links footer-links--single-rail">
        <a href={homeHref} class="footer-link">Accueil</a>
        <a href={formationHref} class="footer-link">Formation</a>
        <a href="https://fr.linkedin.com/in/electron-rare" target="_blank" rel="noopener noreferrer me" class="footer-link">LinkedIn</a>
        <a href="mailto:contact@lelectronrare.fr" class="footer-link">contact@lelectronrare.fr</a>
        <a href="https://github.com/electron-rare/" target="_blank" rel="noopener noreferrer me" class="footer-link">GitHub</a>
        <a href={mentionsHref} class="footer-link">Mentions légales</a>
      </nav>
    </div>
  </footer>
</BaseLayout>
