// Expert service pages — no build, compiled by Babel standalone
// PerformancePage · ContinuPage · AmenagementPage · EquipementPage · CompetencesPage

// ══════════════════════════════════════════════════════════════════
// /performance — Amélioration de la performance productive
// ══════════════════════════════════════════════════════════════════
function PerformancePage({ navigate }) {
  return (
    <main className="page-enter">

      {/* ══ S0 : Hero ══ */}
      <section style={{ position:'relative', height:'100vh', display:'flex', flexDirection:'column', justifyContent:'center', paddingTop:80, paddingBottom:32, overflow:'hidden' }}>
        <div className="bg-stars" /><div className="bg-grid" />
        <div className="bg-glow" style={{ left:'60%', top:'20%' }} />
        <div className="container" style={{ position:'relative', zIndex:2 }}>
          <Reveal><Eyebrow>EXPERTISE · PERFORMANCE OPÉRATIONNELLE</Eyebrow></Reveal>
          <Reveal>
            <h1 className="display display-xl" style={{ margin:'12px 0 10px', maxWidth:980 }}>
              Trouver ce qui freine<br/><span className="italic-accent">votre production</span>
            </h1>
          </Reveal>
          <Reveal>
            <p style={{ fontSize:18, color:'var(--muted)', lineHeight:1.6, margin:'0 0 20px', maxWidth:660 }}>
              TRS, goulots, ordonnancement — souvent le problème n'est <strong style={{ color:'var(--text)' }}>pas là où on le cherche.</strong>
            </p>
          </Reveal>
          <Reveal>
            <div style={{ display:'flex', gap:8, flexWrap:'wrap', marginBottom:24 }}>
              {['TRS / OEE', 'Goulots', 'Ordonnancement'].map(c => (
                <span key={c} style={{ background:'rgba(62,45,214,0.08)', border:'1px solid rgba(62,45,214,0.2)', borderRadius:999, padding:'6px 14px', fontFamily:'var(--f-mono)', fontSize:11, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--electric)' }}>{c}</span>
              ))}
            </div>
          </Reveal>
          <Reveal>
            <div style={{ borderRadius:14, background:'linear-gradient(135deg, var(--deep) 0%, var(--electric) 100%)', padding:'20px 24px', position:'relative', overflow:'hidden', marginBottom:24 }}>
              <div style={{ position:'absolute', width:180, height:180, borderRadius:'50%', right:-50, top:-70, background:'radial-gradient(closest-side, rgba(94,76,255,0.45), transparent 70%)', filter:'blur(18px)', pointerEvents:'none' }} />
              <div style={{ display:'inline-flex', alignItems:'center', gap:5, background:'var(--yellow)', color:'#06061a', fontFamily:'var(--f-mono)', fontSize:9, fontWeight:700, letterSpacing:'0.16em', textTransform:'uppercase', padding:'4px 12px', borderRadius:999, marginBottom:14, position:'relative', zIndex:1 }}>
                <span style={{ width:4, height:4, background:'#06061a', borderRadius:'50%', flexShrink:0 }} />DIAGNOSTIC TERRAIN
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:10, position:'relative', zIndex:1 }}>
                {[['⏱','Mesure TRS avant d\'intervenir'],['🔍','Localisation du goulot réel'],['✓','Plan d\'action sous 48h']].map(([icon,text],i) => (
                  <div key={i} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:6, textAlign:'center', fontSize:13, fontWeight:500, color:'rgba(255,255,255,0.9)', lineHeight:1.3 }}>
                    <div style={{ width:28, height:28, borderRadius:7, background:'rgba(255,255,255,0.12)', border:'1px solid rgba(255,255,255,0.22)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:13 }}>{icon}</div>
                    {text}
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
          <Reveal>
            <button onClick={() => navigate('contact')} className="btn btn-primary" style={{ fontSize:15, padding:'14px 32px' }}>
              Demander un diagnostic
              <svg 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>
            </button>
          </Reveal>
        </div>
        <ScrollHint />
      </section>

      {/* ══ S1 : La méthode ══ */}
      <section style={{ borderTop:'1px solid var(--line)', background:'var(--ink-2)', display:'flex', flexDirection:'column', justifyContent:'center' }}>
        <div className="container" style={{ paddingTop:'clamp(80px,8vh,110px)', paddingBottom:'clamp(40px,5vh,72px)' }}>
          <Reveal><Eyebrow>LA MÉTHODE</Eyebrow></Reveal>
          <Reveal>
            <h2 className="display display-l" style={{ margin:'16px 0 28px' }}>
              On mesure avant de <span className="italic-accent">toucher quoi que ce soit</span>
            </h2>
          </Reveal>
          <Reveal>
            <div style={{ display:'flex', alignItems:'center', gap:16, flexWrap:'wrap', padding:'14px 20px', border:'1px solid rgba(62,45,214,0.18)', borderRadius:12, background:'white', marginBottom:28 }}>
              <span style={{ fontFamily:'var(--f-mono)', fontSize:11, color:'var(--muted)', letterSpacing:'0.1em', flexShrink:0 }}>TRS =</span>
              {[['D','Disponibilité','micro-arrêts, pannes, changements de série'],['×','',''],['P','Performance','vitesse réduite, sous-cadence'],['×','',''],['Q','Qualité','rebuts, retouches, démarrages']].map(([letter,label,detail],i) => (
                letter === '×'
                  ? <span key={i} style={{ fontFamily:'var(--f-mono)', fontSize:18, color:'var(--muted)', fontWeight:300 }}>×</span>
                  : <div key={i} style={{ display:'flex', flexDirection:'column', gap:3 }}>
                      <div style={{ display:'flex', alignItems:'center', gap:7 }}>
                        <span style={{ width:26, height:26, borderRadius:'50%', background:'var(--deep)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--f-mono)', fontWeight:700, fontSize:12, flexShrink:0 }}>{letter}</span>
                        <span style={{ fontWeight:600, fontSize:14 }}>{label}</span>
                      </div>
                      <span style={{ fontFamily:'var(--f-mono)', fontSize:9, color:'var(--muted)', letterSpacing:'0.05em', paddingLeft:33 }}>{detail}</span>
                    </div>
              ))}
            </div>
          </Reveal>
          <Reveal stagger>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:16 }} className="perf-m-grid">
              {[
                { n:'01', t:'Localiser le goulot', d:"Le goulot n'est pas toujours la machine la plus chargée — c'est celle qui bloque tout le reste. On la trouve par l'observation terrain, pas par intuition." },
                { n:'02', t:'Rééquilibrer la charge', d:'Répartir le travail entre postes pour absorber les variations sans subir les à-coups ni les accumulations de pièces.' },
                { n:'03', t:'Ordonnancement dynamique', d:'Un planning mis à jour toutes les 2 à 5 jours crée des files d\'attente invisibles entre étapes. La séquence des OF est aussi critique que la capacité machine.' },
              ].map((c,i) => (
                <MagCard key={i}>
                  <span style={{ fontFamily:'var(--f-mono)', fontSize:13, color:'var(--electric)', letterSpacing:'0.1em' }}>{c.n}</span>
                  <h3 className="display" style={{ fontSize:22, margin:'16px 0 12px', lineHeight:1.1 }}>{c.t}</h3>
                  <p style={{ color:'var(--muted)', fontSize:14, lineHeight:1.6, margin:0 }}>{c.d}</p>
                </MagCard>
              ))}
            </div>
          </Reveal>
        </div>
        <style>{`@media(max-width:760px){.perf-m-grid{grid-template-columns:1fr !important}}`}</style>
      </section>

      {/* ══ S2 : Cas client ══ */}
      <section style={{ borderTop:'1px solid var(--line)', display:'flex', flexDirection:'column', justifyContent:'center' }}>
        <div className="container" style={{ paddingTop:'clamp(80px,8vh,110px)', paddingBottom:'clamp(40px,5vh,72px)' }}>
          <Reveal>
            <Eyebrow>CAS CLIENT · USINAGE · ANONYMISÉ</Eyebrow>
            <h2 className="display display-l" style={{ margin:'16px 0 32px' }}>
              Le problème n'était pas <span className="italic-accent">la capacité machine</span>
            </h2>
          </Reveal>
          <Reveal stagger>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:16, marginBottom:28 }} className="perf-case-grid">
              {[
                { label:'LA SITUATION', icon:'📋', text:'Un atelier d\'usinage, plus de 100 machines. Les délais de livraison dérivent, les clients réclament. Le TRS des machines est correct.' },
                { label:'LE DIAGNOSTIC', icon:'🔍', text:'Cause racine identifiée : les plannings de chaque machine étaient mis à jour manuellement, toutes les 2 à 5 jours. Les pièces attendaient entre chaque étape d\'usinage — sans que personne ne le mesure vraiment.' },
                { label:'LA SOLUTION', icon:'⚙', text:'Un algorithme exploitant les données ERP recalcule le planning de 100+ machines toutes les 30 minutes. Chaque OF reçoit un score d\'urgence selon des critères métier définis avec le client.' },
              ].map((b,i) => (
                <div key={i} style={{ padding:'20px 24px', border:'1px solid var(--line)', borderRadius:14 }}>
                  <div style={{ fontSize:22, marginBottom:10 }}>{b.icon}</div>
                  <div style={{ fontFamily:'var(--f-mono)', fontSize:9, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--muted)', marginBottom:8 }}>{b.label}</div>
                  <p style={{ fontSize:14, lineHeight:1.6, color:'var(--text)', margin:0 }}>{b.text}</p>
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal>
            <div style={{ padding:'14px 20px', background:'rgba(62,45,214,0.05)', border:'1px solid rgba(62,45,214,0.15)', borderRadius:10, display:'flex', alignItems:'center', gap:14, flexWrap:'wrap' }}>
              <p style={{ fontSize:14, fontStyle:'italic', color:'var(--muted)', margin:0, flex:1, lineHeight:1.5 }}>
                Ce cas illustre aussi l'utilité du diagnostic organisationnel — un outil similaire a été utilisé chez DP Flex pour cartographier le flux de l'appel client jusqu'à la facturation.
              </p>
              <button onClick={() => navigate('diagnostic')} style={{ background:'none', border:'1px solid rgba(62,45,214,0.3)', borderRadius:999, padding:'8px 18px', color:'var(--electric)', fontFamily:'var(--f-mono)', fontSize:11, letterSpacing:'0.1em', cursor:'pointer', whiteSpace:'nowrap', flexShrink:0 }}>
                Voir le diagnostic →
              </button>
            </div>
          </Reveal>
        </div>
        <style>{`@media(max-width:760px){.perf-case-grid{grid-template-columns:1fr !important}}`}</style>
      </section>

    </main>
  );
}

// ══════════════════════════════════════════════════════════════════
// /continu — Amélioration continue
// ══════════════════════════════════════════════════════════════════
function ContinuPage({ navigate }) {
  return (
    <main className="page-enter">

      {/* ══ S0 : Hero ══ */}
      <section style={{ position:'relative', height:'100vh', display:'flex', flexDirection:'column', justifyContent:'center', paddingTop:80, paddingBottom:32, overflow:'hidden' }}>
        <div className="bg-stars" /><div className="bg-grid" />
        <div className="bg-glow" style={{ left:'55%', top:'25%' }} />
        <div className="container" style={{ position:'relative', zIndex:2 }}>
          <Reveal><Eyebrow>EXPERTISE · AMÉLIORATION CONTINUE</Eyebrow></Reveal>
          <Reveal>
            <h1 className="display display-xl" style={{ margin:'12px 0 10px', maxWidth:980 }}>
              Ancrer le progrès<br/><span className="italic-accent">dans la durée</span>
            </h1>
          </Reveal>
          <Reveal>
            <p style={{ fontSize:18, color:'var(--muted)', lineHeight:1.6, margin:'0 0 20px', maxWidth:660 }}>
              5S, Kaizen, QRQC — des outils simples qui <strong style={{ color:'var(--text)' }}>tiennent quand le consultant est parti.</strong>
            </p>
          </Reveal>
          <Reveal>
            <div style={{ display:'flex', gap:8, flexWrap:'wrap', marginBottom:24 }}>
              {['5S', 'Kaizen', 'QRQC'].map(c => (
                <span key={c} style={{ background:'rgba(62,45,214,0.08)', border:'1px solid rgba(62,45,214,0.2)', borderRadius:999, padding:'6px 14px', fontFamily:'var(--f-mono)', fontSize:11, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--electric)' }}>{c}</span>
              ))}
            </div>
          </Reveal>
          <Reveal>
            <div style={{ borderRadius:14, background:'linear-gradient(135deg, var(--deep) 0%, var(--electric) 100%)', padding:'20px 24px', position:'relative', overflow:'hidden', marginBottom:24 }}>
              <div style={{ position:'absolute', width:180, height:180, borderRadius:'50%', right:-50, top:-70, background:'radial-gradient(closest-side, rgba(94,76,255,0.45), transparent 70%)', filter:'blur(18px)', pointerEvents:'none' }} />
              <div style={{ display:'inline-flex', alignItems:'center', gap:5, background:'var(--yellow)', color:'#06061a', fontFamily:'var(--f-mono)', fontSize:9, fontWeight:700, letterSpacing:'0.16em', textTransform:'uppercase', padding:'4px 12px', borderRadius:999, marginBottom:14, position:'relative', zIndex:1 }}>
                <span style={{ width:4, height:4, background:'#06061a', borderRadius:'50%', flexShrink:0 }} />DÉMARCHE TERRAIN
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:10, position:'relative', zIndex:1 }}>
                {[['⚙','Adaptée à votre maturité'],['👷','Opérateurs acteurs, pas spectateurs'],['📋','Standards visuels qui tiennent']].map(([icon,text],i) => (
                  <div key={i} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:6, textAlign:'center', fontSize:13, fontWeight:500, color:'rgba(255,255,255,0.9)', lineHeight:1.3 }}>
                    <div style={{ width:28, height:28, borderRadius:7, background:'rgba(255,255,255,0.12)', border:'1px solid rgba(255,255,255,0.22)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:13 }}>{icon}</div>
                    {text}
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
          <Reveal>
            <button onClick={() => navigate('contact')} className="btn btn-primary" style={{ fontSize:15, padding:'14px 32px' }}>
              Lancer une démarche
              <svg 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>
            </button>
          </Reveal>
        </div>
        <ScrollHint />
      </section>

      {/* ══ S1 : Fondations 5S ══ */}
      <section style={{ borderTop:'1px solid var(--line)', background:'var(--ink-2)', display:'flex', flexDirection:'column', justifyContent:'center' }}>
        <div className="container" style={{ paddingTop:'clamp(80px,8vh,110px)', paddingBottom:'clamp(40px,5vh,72px)' }}>
          <Reveal><Eyebrow>LES FONDATIONS</Eyebrow></Reveal>
          <Reveal>
            <h2 className="display display-l" style={{ margin:'16px 0 12px' }}>
              Le 5S n'est pas du rangement<br/><span className="italic-accent">c'est un système de lecture</span>
            </h2>
          </Reveal>
          <Reveal>
            <p style={{ fontSize:16, color:'var(--muted)', lineHeight:1.7, margin:'0 0 28px', maxWidth:680 }}>
              Quand tout a une place et que les écarts sont visibles, les problèmes remontent d'eux-mêmes. C'est le fondement sur lequel toute démarche lean repose.
            </p>
          </Reveal>
          <Reveal stagger>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:16 }} className="cont-s1-grid">
              {[
                { n:'01', t:'5S — Les fondations', d:'Trier, ranger, nettoyer, standardiser, maintenir. Chaque étape crée les conditions de l\'étape suivante. Le 5e S est le plus difficile — c\'est celui qui dure.' },
                { n:'02', t:'Kaizen — Le progrès incrémental', d:'Des chantiers courts, des équipes autonomes, des gains visibles. Le progrès par petits pas qui s\'accumule — et qui engage les personnes qui le produisent.' },
                { n:'03', t:'Standards visuels', d:'Un standard visuel se comprend en 30 secondes sans explication. Il permet au remplaçant de tenir le niveau, et à l\'équipe de détecter les dérives immédiatement.' },
              ].map((c,i) => (
                <MagCard key={i}>
                  <span style={{ fontFamily:'var(--f-mono)', fontSize:13, color:'var(--electric)', letterSpacing:'0.1em' }}>{c.n}</span>
                  <h3 className="display" style={{ fontSize:22, margin:'16px 0 12px', lineHeight:1.1 }}>{c.t}</h3>
                  <p style={{ color:'var(--muted)', fontSize:14, lineHeight:1.6, margin:0 }}>{c.d}</p>
                </MagCard>
              ))}
            </div>
          </Reveal>
        </div>
        <style>{`@media(max-width:760px){.cont-s1-grid{grid-template-columns:1fr !important}}`}</style>
      </section>

      {/* ══ S2 : QRQC ══ */}
      <section style={{ borderTop:'1px solid var(--line)', display:'flex', flexDirection:'column', justifyContent:'center' }}>
        <div className="container" style={{ paddingTop:'clamp(80px,8vh,110px)', paddingBottom:'clamp(40px,5vh,72px)' }}>
          <Reveal>
            <Eyebrow>RÉSOLUTION DE PROBLÈMES</Eyebrow>
            <h2 className="display display-l" style={{ margin:'16px 0 12px' }}>
              Traiter la cause, <span className="italic-accent">pas le symptôme</span>
            </h2>
            <p style={{ fontSize:16, color:'var(--muted)', lineHeight:1.7, margin:'0 0 32px', maxWidth:680 }}>
              Le QRQC (Quick Response Quality Control) est la méthode préconisée. Elle structure la réaction, l'analyse et la correction — pour que le problème ne revienne pas.
            </p>
          </Reveal>
          <Reveal>
            <div style={{ display:'flex', flexDirection:'column', gap:0, border:'1px solid var(--line)', borderRadius:14, overflow:'hidden' }}>
              {[
                { n:'01', t:'Réaction immédiate', d:'Sécuriser la production — confinement, tri, blocage du flux défectueux. On ne cherche pas encore la cause : on stoppe la fuite.' },
                { n:'02', t:'Aller sur le terrain', d:'Observer la pièce, le poste, les conditions réelles. L\'analyse se fait là où le problème s\'est produit — pas depuis un bureau avec un rapport.' },
                { n:'03', t:'Analyser les causes', d:'Ishikawa, 5 Pourquoi, arbre des causes. Remonter méthodiquement jusqu\'à la cause racine — celle que si on la traite, le problème ne revient pas.' },
                { n:'04', t:'Corriger', d:'Action immédiate pour stopper la fuite aujourd\'hui. Action pérenne pour que ça n\'arrive plus — souvent deux actions différentes.' },
                { n:'05', t:'Vérifier et standardiser', d:'On valide que l\'action corrective fonctionne. On l\'écrit, on intègre au standard, on forme les équipes. La roue est bouclée.' },
              ].map((s,i,arr) => (
                <div key={i} style={{ display:'grid', gridTemplateColumns:'44px 1fr', borderBottom: i<arr.length-1 ? '1px solid var(--line)' : 'none', background: i%2===0 ? 'white' : 'var(--ink-2)' }}>
                  <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'center', paddingTop:20, borderRight:'1px solid var(--line)' }}>
                    <span style={{ width:26, height:26, borderRadius:'50%', background:'var(--deep)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--f-mono)', fontWeight:700, fontSize:11, flexShrink:0 }}>{s.n}</span>
                  </div>
                  <div style={{ padding:'18px 20px' }}>
                    <div style={{ fontWeight:600, fontSize:15, marginBottom:4 }}>{s.t}</div>
                    <p style={{ color:'var(--muted)', fontSize:14, lineHeight:1.55, margin:0 }}>{s.d}</p>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal>
            <div style={{ marginTop:24, padding:'14px 20px', background:'rgba(62,45,214,0.05)', border:'1px solid rgba(62,45,214,0.15)', borderRadius:10 }}>
              <p style={{ fontSize:14, fontStyle:'italic', color:'var(--muted)', margin:0, lineHeight:1.5 }}>
                Sur un atelier d'usinage de 100+ machines, le QRQC a révélé que les délais de livraison venaient d'un problème de fréquence d'ordonnancement — pas de la capacité machine. <button onClick={() => navigate('performance')} style={{ background:'none', border:'none', color:'var(--electric)', cursor:'pointer', padding:0, fontFamily:'var(--f-mono)', fontSize:11, letterSpacing:'0.06em', textDecoration:'underline' }}>Voir le cas →</button>
              </p>
            </div>
          </Reveal>
        </div>
      </section>

    </main>
  );
}

// ══════════════════════════════════════════════════════════════════
// /amenagement — Implantation atelier & optimisation flux
// ══════════════════════════════════════════════════════════════════
function AmenagementPage({ navigate }) {
  return (
    <main className="page-enter">

      {/* ══ S0 : Hero ══ */}
      <section style={{ position:'relative', height:'100vh', display:'flex', flexDirection:'column', justifyContent:'center', paddingTop:80, paddingBottom:32, overflow:'hidden' }}>
        <div className="bg-stars" /><div className="bg-grid" />
        <div className="bg-glow" style={{ left:'65%', top:'15%' }} />
        <div className="container" style={{ position:'relative', zIndex:2 }}>
          <Reveal><Eyebrow>EXPERTISE · AMÉNAGEMENT & FLUX</Eyebrow></Reveal>
          <Reveal>
            <h1 className="display display-xl" style={{ margin:'12px 0 10px', maxWidth:980 }}>
              Repenser l'implantation<br/><span className="italic-accent">de votre atelier</span>
            </h1>
          </Reveal>
          <Reveal>
            <p style={{ fontSize:18, color:'var(--muted)', lineHeight:1.6, margin:'0 0 20px', maxWidth:660 }}>
              Diagramme spaghetti, plan 2D, flux matière — <strong style={{ color:'var(--text)' }}>voir les trajets inutiles pour les supprimer.</strong>
            </p>
          </Reveal>
          <Reveal>
            <div style={{ display:'flex', gap:8, flexWrap:'wrap', marginBottom:24 }}>
              {['Flux matière', 'Diagramme spaghetti', 'Ergonomie poste'].map(c => (
                <span key={c} style={{ background:'rgba(62,45,214,0.08)', border:'1px solid rgba(62,45,214,0.2)', borderRadius:999, padding:'6px 14px', fontFamily:'var(--f-mono)', fontSize:11, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--electric)' }}>{c}</span>
              ))}
            </div>
          </Reveal>
          <Reveal>
            <div style={{ borderRadius:14, background:'linear-gradient(135deg, var(--deep) 0%, var(--electric) 100%)', padding:'20px 24px', position:'relative', overflow:'hidden', marginBottom:24 }}>
              <div style={{ position:'absolute', width:180, height:180, borderRadius:'50%', right:-50, top:-70, background:'radial-gradient(closest-side, rgba(94,76,255,0.45), transparent 70%)', filter:'blur(18px)', pointerEvents:'none' }} />
              <div style={{ display:'inline-flex', alignItems:'center', gap:5, background:'var(--yellow)', color:'#06061a', fontFamily:'var(--f-mono)', fontSize:9, fontWeight:700, letterSpacing:'0.16em', textTransform:'uppercase', padding:'4px 12px', borderRadius:999, marginBottom:14, position:'relative', zIndex:1 }}>
                <span style={{ width:4, height:4, background:'#06061a', borderRadius:'50%', flexShrink:0 }} />ANALYSE & PLAN
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:10, position:'relative', zIndex:1 }}>
                {[['📐','Déplacements réels mesurés sur plan'],['🔄','Scénarios d\'implantation comparés'],['🏗','Accompagnement jusqu\'au chantier']].map(([icon,text],i) => (
                  <div key={i} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:6, textAlign:'center', fontSize:13, fontWeight:500, color:'rgba(255,255,255,0.9)', lineHeight:1.3 }}>
                    <div style={{ width:28, height:28, borderRadius:7, background:'rgba(255,255,255,0.12)', border:'1px solid rgba(255,255,255,0.22)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:13 }}>{icon}</div>
                    {text}
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
          <Reveal>
            <button onClick={() => navigate('contact')} className="btn btn-primary" style={{ fontSize:15, padding:'14px 32px' }}>
              Analyser mon atelier
              <svg 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>
            </button>
          </Reveal>
        </div>
        <ScrollHint />
      </section>

      {/* ══ S1 : L'analyse ══ */}
      <section style={{ borderTop:'1px solid var(--line)', background:'var(--ink-2)', display:'flex', flexDirection:'column', justifyContent:'center' }}>
        <div className="container" style={{ paddingTop:'clamp(80px,8vh,110px)', paddingBottom:'clamp(40px,5vh,72px)' }}>
          <Reveal><Eyebrow>L'ANALYSE</Eyebrow></Reveal>
          <Reveal>
            <h2 className="display display-l" style={{ margin:'16px 0 12px' }}>
              Ce qu'on voit rarement sur un plan,<br/><span className="italic-accent">on le mesure sur le terrain</span>
            </h2>
            <p style={{ fontSize:16, color:'var(--muted)', lineHeight:1.7, margin:'0 0 28px', maxWidth:680 }}>
              Les pertes liées aux déplacements et aux manutentions sont souvent les plus importantes — et les moins visibles. Elles ne figurent sur aucun indicateur.
            </p>
          </Reveal>
          <Reveal stagger>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:16 }} className="amen-s1-grid">
              {[
                { n:'01', t:'Diagramme spaghetti', d:'Tracer les déplacements réels des opérateurs et des pièces sur le plan d\'atelier. Les croisements, les allers-retours, les zones mortes deviennent visibles.' },
                { n:'02', t:'VSM flux matière', d:'Value Stream Map appliquée aux flux de matières : visualiser le temps de valeur ajoutée vs les temps d\'attente entre opérations. Souvent, la pièce attend plus qu\'elle n\'est usinée.' },
                { n:'03', t:'Analyse manutentions', d:'Combien de fois une pièce est-elle déplacée avant d\'être transformée ? Chaque manutention inutile est un risque qualité, une fatigue opérateur, un temps perdu.' },
              ].map((c,i) => (
                <MagCard key={i}>
                  <span style={{ fontFamily:'var(--f-mono)', fontSize:13, color:'var(--electric)', letterSpacing:'0.1em' }}>{c.n}</span>
                  <h3 className="display" style={{ fontSize:22, margin:'16px 0 12px', lineHeight:1.1 }}>{c.t}</h3>
                  <p style={{ color:'var(--muted)', fontSize:14, lineHeight:1.6, margin:0 }}>{c.d}</p>
                </MagCard>
              ))}
            </div>
          </Reveal>
        </div>
        <style>{`@media(max-width:760px){.amen-s1-grid{grid-template-columns:1fr !important}}`}</style>
      </section>

      {/* ══ S2 : Du plan au sol ══ */}
      <section style={{ borderTop:'1px solid var(--line)', display:'flex', flexDirection:'column', justifyContent:'center' }}>
        <div className="container" style={{ paddingTop:'clamp(80px,8vh,110px)', paddingBottom:'clamp(40px,5vh,72px)' }}>
          <Reveal>
            <Eyebrow>DE L'ANALYSE AU TERRAIN</Eyebrow>
            <h2 className="display display-l" style={{ margin:'16px 0 32px' }}>
              De la feuille A3 <span className="italic-accent">au sol béton</span>
            </h2>
          </Reveal>
          <Reveal>
            <div style={{ display:'flex', flexDirection:'column', gap:0, border:'1px solid var(--line)', borderRadius:14, overflow:'hidden', marginBottom:28 }}>
              {[
                { n:'1', t:'Analyse terrain', d:'Observation des flux réels, diagramme spaghetti, mesure des distances parcourues, identification des zones de friction.' },
                { n:'2', t:'Scénarios 2D', d:'Un ou plusieurs plans d\'implantation alternatifs, cotés et comparables. Le 3D est mobilisé quand la géométrie est complexe ou pour faciliter la décision collective.' },
                { n:'3', t:'Validation collective', d:'L\'implantation choisie est testée avec les équipes — ceux qui travaillent dans l\'atelier ont souvent des contraintes que le plan ne montre pas.' },
                { n:'4', t:'Pilotage du chantier', d:'Coordination du déménagement ou de la réimplantation : planning, séquencement, continuité de production pendant les travaux.' },
              ].map((s,i,arr) => (
                <div key={i} style={{ display:'grid', gridTemplateColumns:'44px 1fr', borderBottom: i<arr.length-1 ? '1px solid var(--line)' : 'none', background: i%2===0 ? 'white' : 'var(--ink-2)' }}>
                  <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'center', paddingTop:20, borderRight:'1px solid var(--line)' }}>
                    <span style={{ width:26, height:26, borderRadius:'50%', background:'var(--deep)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--f-mono)', fontWeight:700, fontSize:11, flexShrink:0 }}>{s.n}</span>
                  </div>
                  <div style={{ padding:'18px 20px' }}>
                    <div style={{ fontWeight:600, fontSize:15, marginBottom:4 }}>{s.t}</div>
                    <p style={{ color:'var(--muted)', fontSize:14, lineHeight:1.55, margin:0 }}>{s.d}</p>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal>
            <button onClick={() => navigate('contact')} className="btn btn-primary" style={{ fontSize:15, padding:'14px 32px' }}>
              Discuter de votre atelier
              <svg 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>
            </button>
          </Reveal>
        </div>
      </section>

    </main>
  );
}

// ══════════════════════════════════════════════════════════════════
// /equipement — Conseil équipement industriel PME
// ══════════════════════════════════════════════════════════════════
function EquipementPage({ navigate }) {
  return (
    <main className="page-enter">

      {/* ══ S0 : Hero ══ */}
      <section style={{ position:'relative', height:'100vh', display:'flex', flexDirection:'column', justifyContent:'center', paddingTop:80, paddingBottom:32, overflow:'hidden' }}>
        <div className="bg-stars" /><div className="bg-grid" />
        <div className="bg-glow" style={{ left:'60%', top:'20%' }} />
        <div className="container" style={{ position:'relative', zIndex:2 }}>
          <Reveal><Eyebrow>EXPERTISE · ÉQUIPEMENT INDUSTRIEL</Eyebrow></Reveal>
          <Reveal>
            <h1 className="display display-xl" style={{ margin:'12px 0 10px', maxWidth:980 }}>
              Bien choisir son équipement —<br/><span className="italic-accent">ou en tirer le maximum</span>
            </h1>
          </Reveal>
          <Reveal>
            <p style={{ fontSize:18, color:'var(--muted)', lineHeight:1.6, margin:'0 0 20px', maxWidth:660 }}>
              Cahier des charges, diagnostic machine, TPM — <strong style={{ color:'var(--text)' }}>que vous investissiez ou que vous optimisiez l'existant.</strong>
            </p>
          </Reveal>
          <Reveal>
            <div style={{ display:'flex', gap:8, flexWrap:'wrap', marginBottom:24 }}>
              {['Cahier des charges', 'Diagnostic machine', 'TPM'].map(c => (
                <span key={c} style={{ background:'rgba(62,45,214,0.08)', border:'1px solid rgba(62,45,214,0.2)', borderRadius:999, padding:'6px 14px', fontFamily:'var(--f-mono)', fontSize:11, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--electric)' }}>{c}</span>
              ))}
            </div>
          </Reveal>
          <Reveal>
            <div style={{ borderRadius:14, background:'linear-gradient(135deg, var(--deep) 0%, var(--electric) 100%)', padding:'20px 24px', position:'relative', overflow:'hidden', marginBottom:24 }}>
              <div style={{ position:'absolute', width:180, height:180, borderRadius:'50%', right:-50, top:-70, background:'radial-gradient(closest-side, rgba(94,76,255,0.45), transparent 70%)', filter:'blur(18px)', pointerEvents:'none' }} />
              <div style={{ display:'inline-flex', alignItems:'center', gap:5, background:'var(--yellow)', color:'#06061a', fontFamily:'var(--f-mono)', fontSize:9, fontWeight:700, letterSpacing:'0.16em', textTransform:'uppercase', padding:'4px 12px', borderRadius:999, marginBottom:14, position:'relative', zIndex:1 }}>
                <span style={{ width:4, height:4, background:'#06061a', borderRadius:'50%', flexShrink:0 }} />SUR NEUF OU EXISTANT
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:10, position:'relative', zIndex:1 }}>
                {[['📝','Spécifications avant d\'aller voir les fournisseurs'],['⚙','Diagnostic méca · élec · automatisme'],['🔧','TPM et maintenance autonome']].map(([icon,text],i) => (
                  <div key={i} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:6, textAlign:'center', fontSize:13, fontWeight:500, color:'rgba(255,255,255,0.9)', lineHeight:1.3 }}>
                    <div style={{ width:28, height:28, borderRadius:7, background:'rgba(255,255,255,0.12)', border:'1px solid rgba(255,255,255,0.22)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:13 }}>{icon}</div>
                    {text}
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
          <Reveal>
            <button onClick={() => navigate('contact')} className="btn btn-primary" style={{ fontSize:15, padding:'14px 32px' }}>
              Discuter de votre machine
              <svg 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>
            </button>
          </Reveal>
        </div>
        <ScrollHint />
      </section>

      {/* ══ S1 : Avant d'acheter ══ */}
      <section style={{ borderTop:'1px solid var(--line)', background:'var(--ink-2)', display:'flex', flexDirection:'column', justifyContent:'center' }}>
        <div className="container" style={{ paddingTop:'clamp(80px,8vh,110px)', paddingBottom:'clamp(40px,5vh,72px)' }}>
          <Reveal><Eyebrow>INVESTISSEMENT MAÎTRISÉ</Eyebrow></Reveal>
          <Reveal>
            <h2 className="display display-l" style={{ margin:'16px 0 12px' }}>
              Le cahier des charges qui <span className="italic-accent">protège votre investissement</span>
            </h2>
            <p style={{ fontSize:16, color:'var(--muted)', lineHeight:1.7, margin:'0 0 28px', maxWidth:680 }}>
              La plupart des déceptions sur un équipement viennent d'un besoin mal défini. Les spécifications se rédigent avant le premier rendez-vous fournisseur — pas pendant.
            </p>
          </Reveal>
          <Reveal stagger>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:16, marginBottom:24 }} className="equip-s1-grid">
              {[
                { n:'01', t:'Spécifications fonctionnelles', d:'Ce que la machine doit faire — capacité, cadence, matériaux, tolérances. Pas "comment" : pourquoi et dans quelles conditions.' },
                { n:'02', t:'Contraintes process', d:'Environnement, température, poussières, vibrations, contraintes de sécurité, intégration avec les équipements existants.' },
                { n:'03', t:'Exigences de maintenabilité', d:'Accessibilité, pièces standard ou propriétaires, délais SAV, documentation technique, disponibilité des techniciens fournisseur.' },
                { n:'04', t:'Sourcing et notation fournisseur', d:'Identification des acteurs du marché, grille de comparaison multi-critères, conduite des négociations — votre intérêt d\'abord.' },
              ].map((c,i) => (
                <MagCard key={i}>
                  <span style={{ fontFamily:'var(--f-mono)', fontSize:13, color:'var(--electric)', letterSpacing:'0.1em' }}>{c.n}</span>
                  <h3 className="display" style={{ fontSize:20, margin:'14px 0 10px', lineHeight:1.1 }}>{c.t}</h3>
                  <p style={{ color:'var(--muted)', fontSize:14, lineHeight:1.6, margin:0 }}>{c.d}</p>
                </MagCard>
              ))}
            </div>
          </Reveal>
          <Reveal>
            <div style={{ padding:'14px 20px', background:'rgba(62,45,214,0.06)', border:'1px solid rgba(62,45,214,0.15)', borderRadius:10 }}>
              <p style={{ fontSize:14, color:'var(--muted)', margin:0, lineHeight:1.5 }}>
                <strong style={{ color:'var(--text)' }}>TPM (Total Productive Maintenance)</strong> — une fois la machine en production : maintenance autonome opérateurs, préventive planifiée, indicateurs d'état. L'équipement qui ne tombe pas en panne au mauvais moment.
              </p>
            </div>
          </Reveal>
        </div>
        <style>{`@media(max-width:760px){.equip-s1-grid{grid-template-columns:1fr !important}}`}</style>
      </section>

      {/* ══ S2 : Cas CUMA La Trieuse ══ */}
      <section style={{ borderTop:'1px solid var(--line)', display:'flex', flexDirection:'column', justifyContent:'center' }}>
        <div className="container" style={{ paddingTop:'clamp(80px,8vh,110px)', paddingBottom:'clamp(40px,5vh,72px)' }}>
          <Reveal>
            <Eyebrow>CAS CLIENT · CUMA LA TRIEUSE · AGROALIMENTAIRE</Eyebrow>
            <h2 className="display display-l" style={{ margin:'16px 0 32px' }}>
              Un équipement arrêté depuis des semaines —<br/><span className="italic-accent">remis en route en 2 heures</span>
            </h2>
          </Reveal>
          <Reveal>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:24, marginBottom:28 }} className="equip-case-grid">
              <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
                {[
                  { label:'LE CONTEXTE', icon:'📋', text:'Une ensacheuse de graines (haricots, pois chiches, lentilles) arrêtée depuis plusieurs semaines. Plusieurs prestataires avaient cherché sans trouver.' },
                  { label:'LE DIAGNOSTIC', icon:'🔍', text:'Identification d\'une carte électronique défectueuse. Remise en état chez un spécialiste électronique. Après redémarrage : dosages imprécis — recalibrage mécanique et paramétrage pour atteindre la précision au gramme.' },
                ].map((b,i) => (
                  <div key={i} style={{ padding:'20px 24px', border:'1px solid var(--line)', borderRadius:14 }}>
                    <div style={{ fontSize:20, marginBottom:10 }}>{b.icon}</div>
                    <div style={{ fontFamily:'var(--f-mono)', fontSize:9, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--muted)', marginBottom:8 }}>{b.label}</div>
                    <p style={{ fontSize:14, lineHeight:1.6, color:'var(--text)', margin:0 }}>{b.text}</p>
                  </div>
                ))}
              </div>
              <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
                <div style={{ padding:'20px 24px', border:'1px solid rgba(62,45,214,0.25)', borderRadius:14, background:'rgba(62,45,214,0.04)', flex:1 }}>
                  <div style={{ fontSize:20, marginBottom:10 }}>💡</div>
                  <div style={{ fontFamily:'var(--f-mono)', fontSize:9, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--muted)', marginBottom:8 }}>CE QUE ÇA ILLUSTRE</div>
                  <p style={{ fontSize:14, lineHeight:1.6, color:'var(--text)', margin:0 }}>
                    Ce type d'intervention nécessite des compétences croisées — électronique, mécanique, paramétrage machine. Ce n'est pas une spécialité rare : c'est une <strong>méthode de diagnostic structurée</strong> appliquée aux équipements industriels.
                  </p>
                </div>
                <div style={{ padding:'14px 18px', background:'var(--deep)', borderRadius:12, borderLeft:'3px solid var(--yellow)' }}>
                  <p style={{ fontSize:14, fontStyle:'italic', color:'rgba(255,255,255,0.85)', margin:0, lineHeight:1.5 }}>
                    "En parallèle : étude pour upgrader le suivi des lots — ajout d'un suivi par code-barres ou RFID pour identifier chaque contenant en temps réel."
                  </p>
                  <p style={{ fontFamily:'var(--f-mono)', fontSize:9, color:'rgba(255,255,255,0.45)', margin:'8px 0 0', letterSpacing:'0.1em', textTransform:'uppercase' }}>De la panne à la performance</p>
                </div>
              </div>
            </div>
          </Reveal>
          <Reveal>
            <button onClick={() => navigate('contact')} className="btn btn-primary" style={{ fontSize:15, padding:'14px 32px' }}>
              Discuter de votre équipement
              <svg 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>
            </button>
          </Reveal>
        </div>
        <style>{`@media(max-width:760px){.equip-case-grid{grid-template-columns:1fr !important}}`}</style>
      </section>

    </main>
  );
}

// ══════════════════════════════════════════════════════════════════
// /competences — Formation & montée en compétences
// ══════════════════════════════════════════════════════════════════
function CompetencesPage({ navigate }) {
  return (
    <main className="page-enter">

      {/* ══ S0 : Hero ══ */}
      <section style={{ position:'relative', height:'100vh', display:'flex', flexDirection:'column', justifyContent:'center', paddingTop:80, paddingBottom:32, overflow:'hidden' }}>
        <div className="bg-stars" /><div className="bg-grid" />
        <div className="bg-glow" style={{ left:'60%', top:'20%' }} />
        <div className="container" style={{ position:'relative', zIndex:2 }}>
          <Reveal><Eyebrow>EXPERTISE · FORMATION TERRAIN</Eyebrow></Reveal>
          <Reveal>
            <h1 className="display display-xl" style={{ margin:'12px 0 10px', maxWidth:980 }}>
              Former vos équipes<br/><span className="italic-accent">à trouver la panne</span>
            </h1>
          </Reveal>
          <Reveal>
            <p style={{ fontSize:18, color:'var(--muted)', lineHeight:1.6, margin:'0 0 20px', maxWidth:660 }}>
              Méthodes de diagnostic issues du lean — pour les dépanneurs, techniciens maintenance et régleurs qui <strong style={{ color:'var(--text)' }}>perdent du temps à chercher.</strong>
            </p>
          </Reveal>
          <Reveal>
            <div style={{ display:'flex', gap:8, flexWrap:'wrap', marginBottom:24 }}>
              {['Diagnostic méthodo', 'Maintenance', 'Régleurs / opérateurs'].map(c => (
                <span key={c} style={{ background:'rgba(62,45,214,0.08)', border:'1px solid rgba(62,45,214,0.2)', borderRadius:999, padding:'6px 14px', fontFamily:'var(--f-mono)', fontSize:11, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--electric)' }}>{c}</span>
              ))}
            </div>
          </Reveal>
          <Reveal>
            <div style={{ borderRadius:14, background:'linear-gradient(135deg, var(--deep) 0%, var(--electric) 100%)', padding:'20px 24px', position:'relative', overflow:'hidden', marginBottom:24 }}>
              <div style={{ position:'absolute', width:180, height:180, borderRadius:'50%', right:-50, top:-70, background:'radial-gradient(closest-side, rgba(94,76,255,0.45), transparent 70%)', filter:'blur(18px)', pointerEvents:'none' }} />
              <div style={{ display:'inline-flex', alignItems:'center', gap:5, background:'var(--yellow)', color:'#06061a', fontFamily:'var(--f-mono)', fontSize:9, fontWeight:700, letterSpacing:'0.16em', textTransform:'uppercase', padding:'4px 12px', borderRadius:999, marginBottom:14, position:'relative', zIndex:1 }}>
                <span style={{ width:4, height:4, background:'#06061a', borderRadius:'50%', flexShrink:0 }} />FORMATION EN ATELIER
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:10, position:'relative', zIndex:1 }}>
                {[['🔍','Méthodes QRQC appliquées à la maintenance'],['⚡','Méca · Élec · Automatisme'],['📋','Régleurs : produire conforme']].map(([icon,text],i) => (
                  <div key={i} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:6, textAlign:'center', fontSize:13, fontWeight:500, color:'rgba(255,255,255,0.9)', lineHeight:1.3 }}>
                    <div style={{ width:28, height:28, borderRadius:7, background:'rgba(255,255,255,0.12)', border:'1px solid rgba(255,255,255,0.22)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:13 }}>{icon}</div>
                    {text}
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
          <Reveal>
            <button onClick={() => navigate('contact')} className="btn btn-primary" style={{ fontSize:15, padding:'14px 32px' }}>
              Former vos équipes
              <svg 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>
            </button>
          </Reveal>
        </div>
        <ScrollHint />
      </section>

      {/* ══ S1 : La méthode ══ */}
      <section style={{ borderTop:'1px solid var(--line)', background:'var(--ink-2)', display:'flex', flexDirection:'column', justifyContent:'center' }}>
        <div className="container" style={{ paddingTop:'clamp(80px,8vh,110px)', paddingBottom:'clamp(40px,5vh,72px)' }}>
          <Reveal><Eyebrow>FORMER À TROUVER — PAS JUSTE À FAIRE</Eyebrow></Reveal>
          <Reveal>
            <h2 className="display display-l" style={{ margin:'16px 0 12px' }}>
              Un technicien sans méthode <span className="italic-accent">cherche en rond</span>
            </h2>
            <p style={{ fontSize:16, color:'var(--muted)', lineHeight:1.7, margin:'0 0 28px', maxWidth:680 }}>
              Le dépannage intuitif fonctionne sur les pannes connues. Sur une panne inconnue, sans méthode structurée, on perd un temps considérable — et on risque d'aggraver le problème.
            </p>
          </Reveal>
          <Reveal stagger>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:16, marginBottom:28 }} className="comp-s1-grid">
              {[
                { n:'01', t:'Symptômes → Hypothèses', d:'Décrire précisément le symptôme avant d\'agir. Lister les hypothèses possibles. Tester par ordre de probabilité et de facilité — pas au hasard.' },
                { n:'02', t:'Ishikawa & 5 Pourquoi', d:'Cartographier les causes potentielles (matière, machine, méthode, milieu, main-d\'œuvre). Remonter jusqu\'à la cause racine en questionnant chaque niveau.' },
                { n:'03', t:'Arbre des causes', d:'Pour les pannes complexes ou récurrentes : structurer l\'analyse en arbre pour identifier toutes les causes contributives et choisir le bon niveau d\'intervention.' },
              ].map((c,i) => (
                <MagCard key={i}>
                  <span style={{ fontFamily:'var(--f-mono)', fontSize:13, color:'var(--electric)', letterSpacing:'0.1em' }}>{c.n}</span>
                  <h3 className="display" style={{ fontSize:22, margin:'16px 0 12px', lineHeight:1.1 }}>{c.t}</h3>
                  <p style={{ color:'var(--muted)', fontSize:14, lineHeight:1.6, margin:0 }}>{c.d}</p>
                </MagCard>
              ))}
            </div>
          </Reveal>
          <Reveal>
            <div style={{ padding:'16px 20px', background:'white', border:'1px solid var(--line)', borderRadius:12 }}>
              <Eyebrow>AUSSI POUR LES RÉGLEURS</Eyebrow>
              <p style={{ fontSize:14, color:'var(--muted)', margin:'8px 0 0', lineHeight:1.6, maxWidth:720 }}>
                Les opérateurs-régleurs ont besoin de comprendre les paramètres qui influencent la qualité de leur production — pas seulement de savoir appuyer sur les bons boutons. Former les régleurs à diagnostiquer les dérives de qualité, c'est réduire les rebuts à la source.
              </p>
            </div>
          </Reveal>
        </div>
        <style>{`@media(max-width:760px){.comp-s1-grid{grid-template-columns:1fr !important}}`}</style>
      </section>

      {/* ══ S2 : Cas CUMA La Trieuse ══ */}
      <section style={{ borderTop:'1px solid var(--line)', display:'flex', flexDirection:'column', justifyContent:'center' }}>
        <div className="container" style={{ paddingTop:'clamp(80px,8vh,110px)', paddingBottom:'clamp(40px,5vh,72px)' }}>
          <Reveal>
            <Eyebrow>CAS CLIENT · CUMA LA TRIEUSE</Eyebrow>
            <h2 className="display display-l" style={{ margin:'16px 0 32px' }}>
              Ce que la méthode fait <span className="italic-accent">quand l'intuition a échoué</span>
            </h2>
          </Reveal>
          <Reveal>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:24, marginBottom:28 }} className="comp-case-grid">
              <div style={{ padding:'24px 28px', border:'1px solid var(--line)', borderRadius:14 }}>
                <div style={{ fontFamily:'var(--f-mono)', fontSize:9, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--muted)', marginBottom:12 }}>LA SITUATION</div>
                <p style={{ fontSize:15, lineHeight:1.65, margin:'0 0 16px', color:'var(--text)' }}>
                  Une ensacheuse de graines arrêtée depuis plusieurs semaines. <strong>Plusieurs prestataires avaient cherché sans trouver.</strong> La CUMA perdait de la production chaque jour.
                </p>
                <p style={{ fontSize:14, lineHeight:1.6, margin:0, color:'var(--muted)' }}>
                  En appliquant une démarche structurée — description précise du symptôme, hypothèses listées, tests par élimination — la carte électronique défectueuse a été identifiée. Remplacée, machine recalibrée au gramme près. <strong style={{ color:'var(--text)' }}>En 2 heures.</strong>
                </p>
              </div>
              <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
                <div style={{ padding:'20px 24px', background:'var(--deep)', borderRadius:14, flex:1 }}>
                  <p style={{ fontSize:16, fontWeight:500, color:'rgba(255,255,255,0.9)', margin:'0 0 12px', lineHeight:1.5, fontStyle:'italic' }}>
                    "Ce n'est pas de la magie — c'est une méthode."
                  </p>
                  <p style={{ fontSize:13, color:'rgba(255,255,255,0.55)', margin:0, lineHeight:1.5 }}>
                    La différence entre 2 heures et plusieurs semaines, ce n'est pas l'expérience sur cette machine précise. C'est une méthode de diagnostic qui s'applique à n'importe quel équipement.
                  </p>
                </div>
                <div style={{ padding:'16px 20px', border:'1px solid rgba(62,45,214,0.2)', borderRadius:12, background:'rgba(62,45,214,0.04)' }}>
                  <div style={{ fontFamily:'var(--f-mono)', fontSize:9, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--muted)', marginBottom:6 }}>C'EST ÇA QU'ON ENSEIGNE</div>
                  <p style={{ fontSize:13, lineHeight:1.55, margin:0, color:'var(--text)' }}>
                    Symptômes · Hypothèses · Tests · Cause racine · Correction · Standard. Une grille de diagnostic reproductible, applicable à vos équipements, par vos équipes.
                  </p>
                </div>
              </div>
            </div>
          </Reveal>
          <Reveal>
            <div style={{ display:'flex', gap:12, flexWrap:'wrap' }}>
              <button onClick={() => navigate('contact')} className="btn btn-primary" style={{ fontSize:15, padding:'14px 32px' }}>
                Former vos techniciens
                <svg 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>
              </button>
              <button onClick={() => navigate('equipement')} style={{ fontSize:14, padding:'14px 24px', background:'transparent', border:'1px solid var(--line)', borderRadius:999, color:'var(--text)', cursor:'pointer', fontFamily:'var(--f-mono)', letterSpacing:'0.06em' }}>
                Voir aussi : Équipement →
              </button>
            </div>
          </Reveal>
        </div>
        <style>{`@media(max-width:760px){.comp-case-grid{grid-template-columns:1fr !important}}`}</style>
      </section>

    </main>
  );
}

Object.assign(window, { PerformancePage, ContinuPage, AmenagementPage, EquipementPage, CompetencesPage });
