// Pages logiciels dédiées — V4 SEO
// LogicielsHub : vue d'ensemble des 5 outils
// LogicielPage : page individuelle par outil

const LOGICIELS = {
  cadulis: {
    nom: 'Cadulis',
    eyebrow: 'OUTIL NUMÉRIQUE · PLANIFICATION',
    h1: 'Consultant Cadulis — Paramétrage & Mise en Œuvre',
    accroche: 'Planification terrain, dispatch automatique, connexion EBP. On installe Cadulis et on forme vos équipes.',
    couleur: '#3e2dd6',
    cible: 'Services terrain · Maintenance · SAV',
    description: "Cadulis est un outil de planification et de dispatch d'interventions terrain. L'Atelier Perf paramètre Cadulis de A à Z : types d'interventions, zones, techniciens, priorités, automatismes. Et on connecte Cadulis à votre ERP (EBP notamment) pour que la donnée circule sans ressaisie.",
    ceQueOnFait: [
      { num: '01', title: 'Paramétrage complet', desc: "Configuration des types d'interventions, des techniciens, des zones géographiques, des priorités et des règles de dispatch." },
      { num: '02', title: 'Workflows automatiques', desc: "Règles d'affectation automatique selon disponibilité, compétence, proximité. Les urgences remontent sans décrocher le téléphone." },
      { num: '03', title: 'Connexion EBP', desc: "Synchronisation bidirectionnelle : les commandes EBP génèrent des interventions Cadulis, les rapports terrain remontent dans EBP." },
      { num: '04', title: 'Formation équipe', desc: "Formation complète pour les planificateurs, les techniciens terrain (app mobile) et les managers. Documentation fournie." },
    ],
    resultats: [
      { value: '−65%', label: 'Temps planning/jour' },
      { value: '+22%', label: 'Créneaux remplis' },
      { value: '8h', label: 'De la commande à la planif' },
    ],
    casClient: {
      secteur: 'Maintenance itinérante',
      probleme: "Planning manuel sur Excel, surcharge de l'accueil, impossibilité de gérer les urgences en temps réel.",
      solution: 'Paramétrage Cadulis complet, connexion EBP, formation équipe. Déploiement en 6 semaines.',
    },
    mots_cles: 'consultant Cadulis · paramétrage Cadulis · mise en œuvre Cadulis · Cadulis planification interventions · Vendée',
    download: { url: 'assets/offre-cadulis.pdf', label: "Télécharger l'offre Cadulis" },
  },
  kizeo: {
    nom: 'Kizeo Forms',
    eyebrow: 'OUTIL NUMÉRIQUE · FORMULAIRES TERRAIN',
    h1: 'Consultant Kizeo Forms — Digitalisation Terrain',
    accroche: 'Dématérialisez vos formulaires papier. Rapports terrain, contrôles qualité, fiches intervention — en numérique, en temps réel.',
    couleur: '#0ca678',
    cible: 'Artisans · Services terrain · PME',
    description: "Kizeo Forms remplace vos formulaires papier par des formulaires numériques remplis sur smartphone ou tablette. L'Atelier Perf crée vos formulaires sur mesure, configure les workflows de validation, et connecte Kizeo à vos outils (ERP, comptabilité, planning).",
    ceQueOnFait: [
      { num: '01', title: 'Création de formulaires', desc: "Rapports d'intervention, contrôles 5S, réceptions, audits, feuilles de temps — adaptés exactement à votre process." },
      { num: '02', title: 'Workflows de validation', desc: "Le technicien remplit, le responsable valide, le client reçoit son compte-rendu. Automatique." },
      { num: '03', title: 'Connexion aux outils', desc: "Export automatique vers ERP, comptabilité, planning. La donnée terrain arrive sans ressaisie." },
      { num: '04', title: 'Formation terrain', desc: "Vos équipes terrain apprennent sur leur smartphone en 1/2 journée. Ça reste simple." },
    ],
    resultats: [
      { value: '0', label: 'Papier perdu' },
      { value: '−80%', label: 'Temps de saisie admin' },
      { value: 'Temps réel', label: 'Données disponibles' },
    ],
    casClient: {
      secteur: 'Artisan / service terrain',
      probleme: "Rapports d'intervention papier, perte de fiches, ressaisie en bureau = 2h/jour de travail improductif.",
      solution: 'Formulaires Kizeo adaptés au métier, workflow validation responsable, export comptabilité automatique.',
    },
    mots_cles: 'consultant Kizeo · paramétrage Kizeo Forms · formulaires terrain artisan · dématérialisation processus · Vendée',
  },
  skello: {
    nom: 'SKELLO',
    eyebrow: 'OUTIL NUMÉRIQUE · PLANNING ÉQUIPES',
    h1: 'Consultant SKELLO — Planning Équipes & Gestion du Temps',
    accroche: "Planifiez vos équipes, gérez les absences, exportez vers la paie. SKELLO, c'est simple — et on vous l'installe.",
    couleur: '#ae3ec9',
    cible: 'Artisans · Commerçants · Services',
    description: "SKELLO simplifie le planning de vos équipes : création des plannings, gestion des absences et congés, pointage, export vers la paie. L'Atelier Perf configure SKELLO pour votre structure, forme votre équipe, et vous aide à gagner les heures perdues chaque semaine en gestion admin.",
    ceQueOnFait: [
      { num: '01', title: 'Configuration', desc: "Création des postes, des contrats, des règles de travail. Votre organisation dans SKELLO dès le premier jour." },
      { num: '02', title: 'Planning & absences', desc: "Plannings visuels, gestion des congés et absences, alertes sur dépassement. Plus d'Excel partagé." },
      { num: '03', title: 'Pointage', desc: "Badgeage mobile ou tablette. Les heures réelles capturées sans effort." },
      { num: '04', title: 'Export paie', desc: "Connexion à votre logiciel de paie (Sage, Silae, etc.). Les données partent directement, sans ressaisie." },
    ],
    resultats: [
      { value: '−3h', label: 'Admin planning/semaine' },
      { value: '0', label: 'Erreur paie sur heures' },
      { value: '1 jour', label: 'Formation équipe' },
    ],
    casClient: {
      secteur: 'Commerce / artisan',
      probleme: "Planning sur papier ou Excel, gestion des absences manuelle, erreurs de paie régulières.",
      solution: 'SKELLO configuré pour la structure, planning digital, export automatique vers la paie.',
    },
    mots_cles: 'consultant SKELLO · mise en œuvre SKELLO · planning équipes artisan · gestion temps PME · Vendée',
  },
  ebp: {
    nom: 'EBP',
    eyebrow: 'OUTIL NUMÉRIQUE · ERP PME & ARTISANS',
    h1: 'Consultant EBP — Connexion Outils Métiers & Facture Électronique',
    accroche: "Connectez Cadulis, Kizeo, Pennylane à EBP. Supprimez les ressaisies. Préparez votre conformité à la réforme de la facture électronique — EBP est une plateforme agréée pour la facture électronique.",
    couleur: '#d9480f',
    cible: 'PME · Artisans · TPE',
    description: "EBP est l'ERP de référence pour les PME et artisans français — et une plateforme agréée pour la réforme de la facture électronique (PDP, 2026-2027). L'Atelier Perf intervient sur les connexions autour d'EBP : on fait circuler la donnée entre EBP et vos outils métiers (Cadulis, Kizeo, SKELLO, Pennylane) sans ressaisie.",
    ceQueOnFait: [
      { num: '01', title: 'EBP ↔ Cadulis', desc: "Les interventions planifiées dans Cadulis remontent automatiquement dans EBP : commandes, BL, facturation. Zéro ressaisie côté admin." },
      { num: '02', title: 'EBP ↔ Kizeo Forms', desc: "Rapports terrain Kizeo → bons de livraison EBP. Les données remontent dès la clôture du rapport, sans décrocher le téléphone." },
      { num: '03', title: 'EBP ↔ Pennylane', desc: "Factures EBP synchronisées avec Pennylane pour la comptabilité cloud. Chaîne devis → facture → compta, automatisée." },
      { num: '04', title: 'Facture électronique', desc: "EBP est une plateforme agréée (PDP) pour la réforme 2026-2027. On vous accompagne sur la mise en conformité : paramétrage, flux entrants/sortants, validation avec votre expert-comptable." },
    ],
    resultats: [
      { value: '0', label: 'Double saisie inter-outils' },
      { value: '−70%', label: 'Temps admin inter-systèmes' },
      { value: '2026', label: 'Conformité facture électronique' },
    ],
    casClient: {
      secteur: 'PME / artisan multi-outils',
      probleme: "Cadulis, Kizeo et EBP non connectés — chaque intervention nécessitait une ressaisie manuelle dans EBP.",
      solution: "Connecteurs EBP ↔ Cadulis + Kizeo. Les données remontent automatiquement depuis le terrain vers EBP.",
    },
    mots_cles: 'consultant EBP · connecteur EBP · EBP Cadulis · EBP Kizeo · facture électronique EBP · PDP EBP · Vendée',
  },
  pennylane: {
    nom: 'Pennylane',
    eyebrow: 'OUTIL NUMÉRIQUE · GESTION FINANCIÈRE',
    h1: 'Consultant Pennylane — Comptabilité Cloud & Facture Électronique',
    accroche: "Comptabilité cloud, trésorerie en temps réel, connexion Cadulis/Kizeo. Pennylane — plateforme agréée pour la réforme de la facture électronique.",
    couleur: '#1971c2',
    cible: 'TPE · PME · Indépendants',
    description: "Pennylane modernise la gestion comptable et financière des TPE et PME. L'Atelier Perf configure Pennylane pour votre activité, automatise les saisies (OCR sur factures fournisseurs), et connecte Pennylane à vos outils terrain (Cadulis pour les interventions, Kizeo pour les rapports) — la donnée terrain devient écriture comptable sans ressaisie. Pennylane est également une plateforme agréée (PDP) pour la réforme de la facture électronique.",
    ceQueOnFait: [
      { num: '01', title: 'Configuration', desc: "Plan comptable, TVA, paramètres légaux, connexion bancaire. Prêt à l'emploi en 1 semaine." },
      { num: '02', title: 'Automatisation saisies', desc: "OCR sur vos factures fournisseurs. La saisie comptable se fait toute seule — vous validez en un clic." },
      { num: '03', title: 'Connexion Cadulis · Kizeo', desc: "Les interventions (Cadulis) et rapports terrain (Kizeo) remontent dans Pennylane automatiquement — facturation et comptabilité sans ressaisie." },
      { num: '04', title: 'Facture électronique', desc: "Pennylane est une plateforme agréée (PDP) pour la réforme 2026-2027. On vous accompagne sur la mise en conformité : paramétrage, flux entrants/sortants, validation." },
    ],
    resultats: [
      { value: '−90%', label: 'Saisie manuelle factures' },
      { value: 'J+0', label: 'Synchronisation comptable' },
      { value: '2026', label: 'Conformité facture électronique' },
    ],
    casClient: {
      secteur: 'Services terrain / multi-secteurs',
      probleme: "Saisie manuelle des rapports d'intervention, double saisie entre Cadulis et la comptabilité, délai de comptabilisation.",
      solution: "Connexion Cadulis ↔ Pennylane. Les interventions Cadulis déclenchent automatiquement la facturation et l'écriture comptable dans Pennylane.",
    },
    mots_cles: 'consultant Pennylane · paramétrage Pennylane · facture électronique Pennylane · PDP Pennylane · connexion Cadulis Pennylane · Vendée',
  },
};

const LOGICIELS_ORDER = ['cadulis', 'kizeo', 'skello', 'ebp', 'pennylane'];

// ============================================
// HUB — Vue d'ensemble des 5 outils
// ============================================
const PHASES_6 = [
  { num: '01', t: 'Cadrage',             d: "Enjeux, périmètre, budget, planning projet. On part de votre réalité terrain — pas d'un template consultant." },
  { num: '02', t: 'Diagnostic process',  d: "Cartographie de vos flux : prod, admin, commerce. On liste ce qui est saisi deux fois, ce qui coince, ce qui coûte des heures — ordonnancement, bons de livraison, banque d'heures." },
  { num: '03', t: 'Cahier des charges',  d: "On formalise vos besoins en langage métier — pas en jargon IT. Facturation automatique, gestion du personnel, expéditions. Prêt pour mise en concurrence." },
  { num: '04', t: 'Choix du bon outil',  d: "Conseil neutre, pas de commission. On consulte les éditeurs et intégrateurs à votre place, on compare, on négocie. Vous choisissez en connaissance de cause." },
  { num: '05', t: 'Tests & recette',     d: "Jeux de tests sur vos vraies données. On suit les corrections avec l'intégrateur jusqu'à ce que ça marche dans votre contexte exact." },
  { num: '06', t: 'Déploiement & suivi', d: "Formation des équipes. Suivi J+30 et J+90. Bilan ROI avant/après. Vous n'êtes pas abandonnés après le Go Live." },
];

function PhasesCarousel() {
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const timerRef = React.useRef(null);

  function restartTimer() {
    clearInterval(timerRef.current);
    timerRef.current = setInterval(() => {
      setIdx(i => (i + 1) % PHASES_6.length);
    }, 3200);
  }

  React.useEffect(() => {
    if (!paused) restartTimer();
    else clearInterval(timerRef.current);
    return () => clearInterval(timerRef.current);
  }, [paused]);

  function goTo(i) { setIdx(i); restartTimer(); }

  const p = PHASES_6[idx];
  return (
    <div onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      {/* Tabs numérotés */}
      <div style={{ display: 'flex', gap: 8, marginBottom: 20, flexWrap: 'wrap' }}>
        {PHASES_6.map((ph, i) => (
          <button key={i} onClick={() => goTo(i)} style={{
            fontFamily: 'var(--f-mono)', fontWeight: 700, fontSize: 12,
            letterSpacing: '0.08em', padding: '8px 16px', borderRadius: 999,
            border: i === idx ? '2px solid var(--electric)' : '1px solid var(--line-2)',
            background: i === idx ? 'var(--electric)' : '#fff',
            color: i === idx ? '#fff' : 'var(--muted)',
            cursor: 'pointer', transition: 'all 160ms',
          }}>{ph.num}</button>
        ))}
      </div>
      {/* Carte active */}
      <div style={{
        padding: '28px 32px', border: '1px solid var(--line-2)', borderRadius: 20,
        background: '#fff', minHeight: 140,
        display: 'flex', flexDirection: 'column', gap: 10,
      }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
          <span style={{ fontFamily: 'var(--f-mono)', fontWeight: 700, fontSize: 36, color: 'var(--electric)', lineHeight: 1 }}>{p.num}</span>
          <span className="display" style={{ fontSize: 20, fontWeight: 700 }}>{p.t}</span>
        </div>
        <p style={{ color: 'var(--muted)', fontSize: 15, lineHeight: 1.7, margin: 0, maxWidth: 680 }}>{p.d}</p>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8 }}>
          <span style={{ fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--line-2)', letterSpacing: '0.1em' }}>
            {idx + 1} / {PHASES_6.length}
          </span>
          <div style={{ display: 'flex', gap: 8 }}>
            <button onClick={() => goTo(Math.max(0, idx - 1))} disabled={idx === 0} style={{
              background: 'none', border: '1px solid var(--line-2)', borderRadius: 999,
              padding: '6px 14px', fontFamily: 'var(--f-mono)', fontSize: 11,
              cursor: idx === 0 ? 'default' : 'pointer', opacity: idx === 0 ? 0.3 : 1,
              color: 'var(--text)',
            }}>← Préc</button>
            <button onClick={() => goTo(Math.min(PHASES_6.length - 1, idx + 1))} disabled={idx === PHASES_6.length - 1} style={{
              background: idx === PHASES_6.length - 1 ? 'none' : 'var(--electric)',
              border: idx === PHASES_6.length - 1 ? '1px solid var(--line-2)' : '1px solid var(--electric)',
              borderRadius: 999, padding: '6px 14px', fontFamily: 'var(--f-mono)', fontSize: 11,
              cursor: idx === PHASES_6.length - 1 ? 'default' : 'pointer',
              opacity: idx === PHASES_6.length - 1 ? 0.3 : 1,
              color: idx === PHASES_6.length - 1 ? 'var(--text)' : '#fff',
            }}>Suiv →</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function LogicielsHub({ navigate }) {
  return (
    <main className="page-enter">
      <section style={{ position: 'relative', paddingTop: 120, paddingBottom: 64, overflow: 'hidden' }}>
        <div className="bg-stars"></div>
        <div className="bg-grid"></div>
        <div className="bg-glow" style={{ left: '60%', top: '-10%', background: 'radial-gradient(closest-side, rgba(94,76,255,0.25), transparent 70%)' }}></div>
        <div className="container" style={{ position: 'relative', zIndex: 2 }}>
          <Reveal><Eyebrow>AUTOMATISATION & OUTILS NUMÉRIQUES</Eyebrow></Reveal>
          <Reveal>
            <h1 className="display display-xl" style={{ margin: '24px 0 24px', maxWidth: 900 }}>
              5 outils que l&rsquo;on <span className="italic-accent">maîtrise</span><br />
              et qu&rsquo;on installe pour vous
            </h1>
          </Reveal>
          <Reveal>
            <p style={{ maxWidth: 660, fontSize: 18, color: 'var(--muted)', lineHeight: 1.75, marginBottom: 40 }}>
              Paramétrage, connexion, formation. On ne vend pas de licences — on met les outils en production.
            </p>
          </Reveal>
          <Reveal>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 12 }} className="logiciels-hub-grid">
              {LOGICIELS_ORDER.map(id => {
                const l = LOGICIELS[id];
                return (
                  <button key={id} onClick={() => navigate(id)} style={{
                    background: '#fff', border: `1px solid ${l.couleur}33`,
                    borderRadius: 16, padding: '20px 16px', cursor: 'pointer', textAlign: 'left',
                    transition: 'background 180ms, border-color 180ms, box-shadow 180ms',
                  }}
                  onMouseEnter={e => { e.currentTarget.style.background = `${l.couleur}0d`; e.currentTarget.style.borderColor = l.couleur; e.currentTarget.style.boxShadow = `0 4px 16px ${l.couleur}22`; }}
                  onMouseLeave={e => { e.currentTarget.style.background = '#fff'; e.currentTarget.style.borderColor = `${l.couleur}33`; e.currentTarget.style.boxShadow = 'none'; }}>
                    <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 18, color: 'var(--text)', marginBottom: 6 }}>{l.nom}</div>
                    <div style={{ fontFamily: 'var(--f-mono)', fontSize: 9, color: 'var(--muted)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 12 }}>{l.cible}</div>
                    <div style={{ fontSize: 13, color: 'var(--muted)', lineHeight: 1.5 }}>{l.accroche}</div>
                    <div style={{ marginTop: 14, fontFamily: 'var(--f-mono)', fontSize: 10, color: l.couleur, letterSpacing: '0.1em' }}>Voir →</div>
                  </button>
                );
              })}
            </div>
          </Reveal>
        </div>
        <ScrollHint />
        <style>{`
          @media (max-width: 900px) { .logiciels-hub-grid { grid-template-columns: repeat(2,1fr) !important; } }
          @media (max-width: 500px) { .logiciels-hub-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>

      {/* S1 — Pourquoi ça dérape */}
      <section style={{ background: '#fff', padding: 'clamp(80px,8vw,120px) 0' }}>
        <div className="container">
          <Reveal><Eyebrow>VOUS EN AVEZ ASSEZ DES DOUBLES SAISIES ?</Eyebrow></Reveal>
          <Reveal>
            <h2 className="display" style={{ margin: '16px 0 20px', maxWidth: 820 }}>
              1 projet de changement de logiciel sur 2 <span className="italic-accent">dérape</span>
            </h2>
          </Reveal>
          <Reveal>
            <p style={{ color: 'var(--muted)', fontSize: 17, maxWidth: 720, lineHeight: 1.75, marginBottom: 28 }}>
              Dépassement de budget, de délai — près de 30&nbsp;% échouent en partie ou totalement. Et ça coince rarement sur la technique. Ça coince sur l&rsquo;humain et sur la méthode. Voici les quatre causes que l&rsquo;on retrouve presque toujours.
            </p>
          </Reveal>

          {/* Stats alarmantes */}
          <Reveal>
            <div style={{ display: 'flex', gap: 0, marginBottom: 32, border: '1px solid var(--line-2)', borderRadius: 16, overflow: 'hidden' }} className="erp-stats-strip">
              {[
                { v: '1 / 2', l: 'Projets qui dérapen',   sub: 'budget ou délai dépassé' },
                { v: '30 %',  l: 'Échouent partiellement', sub: 'ou totalement' },
                { v: '9–15 m',l: 'Durée réelle',           sub: 'pas 3 mois' },
              ].map((s, i) => (
                <div key={s.l} style={{
                  flex: 1, padding: '18px 20px', textAlign: 'center',
                  borderRight: i < 2 ? '1px solid var(--line-2)' : 'none',
                  background: i % 2 === 0 ? 'var(--ink-2)' : '#fff',
                }}>
                  <div className="display" style={{ fontSize: 'clamp(22px,3vw,34px)', fontWeight: 700, color: 'var(--electric)', lineHeight: 1 }}>{s.v}</div>
                  <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--text)', letterSpacing: '0.08em', textTransform: 'uppercase', marginTop: 6 }}>{s.l}</div>
                  <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 2 }}>{s.sub}</div>
                </div>
              ))}
            </div>
          </Reveal>

          {/* 4 causes */}
          <Reveal>
            <div style={{ marginBottom: 40 }}>
              <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--muted)', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 12 }}>
                LES 4 CAUSES — ET QUE NOTRE MÉTHODE NEUTRALISE
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }} className="causes-grid">
                {[
                  "Cadrage flou : on part d'un besoin d'outil plutôt que d'un besoin métier",
                  "Conduite du changement sous-estimée : l'humain passe après",
                  "Dépendance à l'éditeur : du sur-mesure non maîtrisé qui coûte cher à maintenir",
                  "Go-live précipité : pas assez de tests sur données réelles, pas de suivi terrain",
                ].map((c, i) => (
                  <div key={i} style={{
                    padding: '12px 16px', borderRadius: 12,
                    background: 'var(--ink-2)', border: '1px solid var(--line-2)',
                    fontSize: 13, color: 'var(--text)', lineHeight: 1.55,
                    display: 'flex', gap: 10, alignItems: 'flex-start',
                  }}>
                    <span style={{ flexShrink: 0, fontSize: 14 }}>✗</span>
                    <span>{c}</span>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>

          {/* CTA vers section suivante */}
          <Reveal>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, paddingTop: 8 }}>
              <p style={{ fontFamily: 'var(--f-mono)', fontSize: 12, color: 'var(--muted)', letterSpacing: '0.12em', textTransform: 'uppercase', margin: 0 }}>
                Bonne nouvelle : ces 4 causes se neutralisent avec de la méthode
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--electric)', fontFamily: 'var(--f-mono)', fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600 }}>
                Découvrez notre démarche en 6 phases
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ animation: 'scrollBounce 1.9s ease-in-out infinite' }}><polyline points="6 9 12 15 18 9"/></svg>
              </div>
            </div>
          </Reveal>
        </div>
        <style>{`
          @media (max-width: 640px) { .erp-stats-strip { flex-direction: column !important; } .erp-stats-strip > div { border-right: none !important; border-bottom: 1px solid var(--line-2); } }
          @media (max-width: 600px) { .causes-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>

      {/* S2 — Notre méthode en 6 phases */}
      <section style={{ background: 'var(--ink-2)', padding: 'clamp(80px,8vw,120px) 0' }}>
        <div className="container" style={{ position: 'relative' }}>
          {/* Bulle flottante — hors flux, ne compte pas dans la hauteur */}
          <div className="methode-bulle" style={{ position: 'absolute', top: 0, right: 0, zIndex: 2, background: '#fff', borderRadius: 16, padding: '12px 16px', border: '1px solid var(--line-2)', boxShadow: '0 2px 12px rgba(0,0,0,0.07)', maxWidth: 280 }}>
            <p style={{ fontFamily: 'var(--f-mono)', fontSize: 11, color: 'var(--muted)', letterSpacing: '0.08em', lineHeight: 1.6, margin: 0 }}>
              Ce qui compte, c&rsquo;est que vos équipes terrain soient impliquées <em>dès le diagnostic</em>, pas seulement avant le&nbsp;Go&nbsp;Live.
            </p>
            <div style={{ position: 'absolute', bottom: -8, left: 20, width: 0, height: 0, borderLeft: '8px solid transparent', borderRight: '8px solid transparent', borderTop: '8px solid var(--line-2)' }} />
            <div style={{ position: 'absolute', bottom: -6, left: 21, width: 0, height: 0, borderLeft: '7px solid transparent', borderRight: '7px solid transparent', borderTop: '7px solid #fff' }} />
          </div>
          <style>{`@media (max-width: 860px) { .methode-bulle { display: none !important; } }`}</style>
          <Reveal>
            <h2 className="display" style={{ margin: '16px 0 20px', maxWidth: 820 }}>
              6 phases pour changer de logiciel de gestion<br />
              <span className="italic-accent">sans se planter</span>
            </h2>
          </Reveal>
          <Reveal>
            <p style={{ color: 'var(--muted)', fontSize: 17, maxWidth: 720, lineHeight: 1.75, marginBottom: 28 }}>
              On cartographie vos process, on rédige le cahier des charges logiciel en langage métier et on vous accompagne de A à Z — avec un conseil neutre, sans commission sur la vente du logiciel.
            </p>
          </Reveal>

          {/* Carousel 6 phases */}
          <Reveal>
            <PhasesCarousel />
          </Reveal>

          {/* Stats + CTA */}
          <Reveal>
            <div style={{ marginTop: 32, padding: '28px 32px', background: '#fff', borderRadius: 20, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', gap: 40, flexWrap: 'wrap' }}>
                {[
                  { v: '0',    l: 'Commission perçue — conseil neutre' },
                  { v: '−80%', l: 'Ressaisies après déploiement' },
                  { v: 'J+90', l: 'Autonomie garantie' },
                ].map(s => (
                  <div key={s.l}>
                    <div className="display" style={{ fontSize: 'clamp(28px,4vw,44px)', fontWeight: 700, color: 'var(--electric)', lineHeight: 1 }}>{s.v}</div>
                    <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--muted)', letterSpacing: '0.1em', textTransform: 'uppercase', marginTop: 4 }}>{s.l}</div>
                  </div>
                ))}
              </div>
              <a className="btn btn-electric" href="#contact" onClick={e => { e.preventDefault(); navigate('contact'); }}>
                Décrire mon projet
                <svg className="arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
              </a>
            </div>
          </Reveal>
        </div>
      </section>

    </main>
  );
}

// ============================================
// PAGE LOGICIEL INDIVIDUELLE
// ============================================
function LogicielPage({ id, navigate }) {
  const l = LOGICIELS[id];
  if (!l) return <div style={{ padding: 120, textAlign: 'center' }}>Page non trouvée</div>;

  return (
    <main className="page-enter">
      {/* S0 — Hero */}
      <section style={{ position: 'relative', paddingTop: 120, paddingBottom: 40, overflow: 'hidden' }}>
        <div className="bg-stars"></div>
        <div className="bg-grid"></div>
        <div className="bg-glow" style={{ left: '60%', top: '-10%', background: `radial-gradient(closest-side, ${l.couleur}30, transparent 70%)` }}></div>
        <div className="container" style={{ position: 'relative', zIndex: 2 }}>
          <Reveal>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 16, flexWrap: 'wrap' }}>
              <button onClick={() => navigate('logiciels')} style={{ background: 'none', border: 'none', color: 'var(--muted)', fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', cursor: 'pointer', padding: 0 }}>
                ← Nos outils
              </button>
              <span style={{ color: 'var(--line-2)' }}>·</span>
              <span className="eyebrow" style={{ color: l.couleur, fontSize: 9, margin: 0 }}>{l.eyebrow}</span>
            </div>
          </Reveal>
          <Reveal>
            <h1 className="display display-xl" style={{ margin: '0 0 24px', maxWidth: 900 }}>{l.h1}</h1>
          </Reveal>
          <Reveal>
            <p style={{ maxWidth: 640, fontSize: 19, color: 'var(--muted)', lineHeight: 1.75, marginBottom: 32 }}>{l.accroche}</p>
          </Reveal>
          <Reveal>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 40 }}>
              {l.cible.split(' · ').map(c => (
                <span key={c} style={{ fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--muted)', padding: '6px 14px', border: '1px solid rgba(16,30,142,0.18)', borderRadius: 999, background: 'rgba(16,30,142,0.06)' }}>{c}</span>
              ))}
            </div>
          </Reveal>
          <Reveal>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a className="btn" href="#contact" onClick={e => { e.preventDefault(); navigate('contact'); }} style={{ background: l.couleur, color: '#fff', display: 'inline-flex', alignItems: 'center', gap: 8, padding: '14px 24px', borderRadius: 999, fontFamily: 'var(--f-mono)', fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600 }}>
                Nous contacter
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
              </a>
              {l.download && (
                <a href={l.download.url} download style={{ background: 'var(--ink-2)', color: 'var(--text)', display: 'inline-flex', alignItems: 'center', gap: 8, padding: '14px 24px', borderRadius: 999, fontFamily: 'var(--f-mono)', fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600, border: '1px solid var(--line)' }}>
                  {l.download.label}
                </a>
              )}
            </div>
          </Reveal>
        </div>
        <ScrollHint />
      </section>

      {/* S1 — Description + Ce qu’on fait */}
      <section style={{ background: 'var(--ink-2)', borderTop: '1px solid var(--line)', display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingTop: 80, paddingBottom: 40 }}>
        <div className="container">
          <Reveal>
            <p style={{ fontSize: 18, lineHeight: 1.8, maxWidth: 800, color: 'var(--text)', marginBottom: 36 }}>{l.description}</p>
          </Reveal>
          <Reveal><Eyebrow>CE QU&rsquo;ON FAIT CONCRÈTEMENT</Eyebrow></Reveal>
          <Reveal stagger>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 14, marginTop: 16 }} className="logiciel-pillars">
              {l.ceQueOnFait.map(p => (
                <div key={p.num} style={{ padding: '18px 22px', border: '1px solid var(--line-2)', borderRadius: 14, display: 'flex', gap: 16, background: '#fff' }}>
                  <span style={{ fontFamily: 'var(--f-mono)', fontWeight: 700, fontSize: 22, color: l.couleur, lineHeight: 1, flexShrink: 0 }}>{p.num}</span>
                  <div>
                    <div className="display" style={{ fontWeight: 700, fontSize: 15, marginBottom: 6 }}>{p.title}</div>
                    <p style={{ color: 'var(--muted)', fontSize: 13, lineHeight: 1.6, margin: 0 }}>{p.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
        <style>{`@media (max-width: 768px) { .logiciel-pillars { grid-template-columns: 1fr !important; } }`}</style>
      </section>

      {/* S2 — Stats + Cas client + Autres outils */}
      <section style={{ background: '#fff', borderTop: '1px solid var(--line)', display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingTop: 80, paddingBottom: 40 }}>
        <div className="container">
          <Reveal>
            <div style={{ display: 'flex', gap: 40, flexWrap: 'wrap', marginBottom: 36 }}>
              {l.resultats.map(r => (
                <div key={r.label}>
                  <div className="display" style={{ fontSize: 'clamp(32px,4vw,52px)', fontWeight: 700, color: l.couleur, lineHeight: 1 }}>{r.value}</div>
                  <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--muted)', letterSpacing: '0.1em', textTransform: 'uppercase', marginTop: 6 }}>{r.label}</div>
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 20, alignItems: 'start', marginBottom: 28 }} className="cas-grid">
              <div style={{ padding: '22px 26px', background: 'var(--ink-2)', borderRadius: 18 }}>
                <div style={{ fontFamily: 'var(--f-mono)', fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 12 }}>SECTEUR — {l.casClient.secteur}</div>
                <p style={{ fontSize: 14, lineHeight: 1.65, color: 'var(--text)', margin: '0 0 14px' }}>
                  <span style={{ fontFamily: 'var(--f-mono)', fontSize: 9, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.1em', display: 'block', marginBottom: 3 }}>Problème</span>
                  {l.casClient.probleme}
                </p>
                <p style={{ fontSize: 14, lineHeight: 1.65, color: 'var(--text)', margin: 0 }}>
                  <span style={{ fontFamily: 'var(--f-mono)', fontSize: 9, color: l.couleur, textTransform: 'uppercase', letterSpacing: '0.1em', display: 'block', marginBottom: 3 }}>Solution déployée</span>
                  {l.casClient.solution}
                </p>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 190 }}>
                <a className="btn" href="#contact" onClick={e => { e.preventDefault(); navigate('contact'); }} style={{ background: l.couleur, color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '12px 18px', borderRadius: 999, fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600, whiteSpace: 'nowrap' }}>
                  Parler de votre projet
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                </a>
                <button onClick={() => navigate('logiciels')} style={{ background: 'none', border: '1px solid var(--line-2)', borderRadius: 999, padding: '10px 14px', fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', cursor: 'pointer', color: 'var(--muted)', whiteSpace: 'nowrap' }}>
                  ← Nos autres outils
                </button>
              </div>
            </div>
          </Reveal>
          <Reveal>
            <div style={{ borderTop: '1px solid var(--line)', paddingTop: 20 }}>
              <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--muted)', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 10 }}>AUTRES OUTILS QU&rsquo;ON DÉPLOIE</div>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                {LOGICIELS_ORDER.filter(k => k !== id).map(k => {
                  const other = LOGICIELS[k];
                  return (
                    <button key={k} onClick={() => navigate(k)} style={{ background: 'var(--ink-2)', border: '1px solid var(--line-2)', borderRadius: 999, padding: '7px 16px', cursor: 'pointer', fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.08em', color: 'var(--text)', transition: 'all 160ms' }}
                    onMouseEnter={e => { e.currentTarget.style.borderColor = other.couleur; e.currentTarget.style.color = other.couleur; }}
                    onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--line-2)'; e.currentTarget.style.color = 'var(--text)'; }}>
                      {other.nom}
                    </button>
                  );
                })}
              </div>
            </div>
          </Reveal>
        </div>
        <style>{`@media (max-width: 768px) { .cas-grid { grid-template-columns: 1fr !important; } }`}</style>
      </section>
    </main>
  );
}

Object.assign(window, { LogicielsHub, LogicielPage });