// About + Contact pages

function AboutPage({ navigate }) {
  return (
    <main className="page-enter">

      {/* ══ S0 : Hero + Bio + Valeurs (100vh, sans photo) ══ */}
      <section style={{ position: 'relative', height: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingTop: 80, paddingBottom: 32, overflow: 'hidden' }}>
        <div className="bg-stars"></div>
        <div className="bg-grid"></div>
        <div className="bg-glow" style={{ left: '50%', top: '30%', transform: 'translateX(-50%)' }}></div>

        <div className="container" style={{ position: 'relative', zIndex: 2 }}>

          {/* ── Hero ── */}
          <Reveal><Eyebrow>QUI SOMMES-NOUS</Eyebrow></Reveal>
          <Reveal>
            <h1 className="display display-xl" style={{ margin: '10px 0 14px', maxWidth: 1100 }}>
              Benoît <span className="italic-accent">Tenailleau</span><br/>
              <span style={{ background: 'linear-gradient(90deg, var(--deep) 0%, var(--electric-2) 100%)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>
                Black Belt Lean &middot; 25 ans d&rsquo;ateliers
              </span>, dans vos mains.
            </h1>
          </Reveal>

          {/* ── Bio (sans photo) ── */}
          <Reveal>
            <p style={{ fontSize: 18, lineHeight: 1.5, marginBottom: 8, maxWidth: 820 }}>
              Atelier Perf, c&rsquo;est l&rsquo;histoire d&rsquo;un homme de terrain —{' '}
              <span className="italic-accent">apprenti à 17 ans, Black Belt à 45</span>.
            </p>
          </Reveal>
          <Reveal>
            <p style={{ color: 'var(--muted)', fontSize: 15, lineHeight: 1.6, marginBottom: 16, maxWidth: 820 }}>
              SKF Vendée, Oceplast 13 ans, OCEWOOD breveté, lean ancré. Aujourd&rsquo;hui Atelier Perf met cette expertise au service des PME — sur le terrain, avec vos équipes, jusqu&rsquo;à ce que ça tourne en autonomie.
            </p>
          </Reveal>

          {/* ── Badges crédibilité ── */}
          <Reveal>
            <div style={{ display:'flex', gap:10, flexWrap:'wrap', marginBottom:16 }}>
              <div style={{ display:'flex', alignItems:'center', gap:8, padding:'6px 14px', background:'rgba(251,220,116,0.12)', border:'1px solid rgba(180,140,0,0.3)', borderRadius:999 }}>
                <img src="black belt.png" alt="" style={{ height:18, width:'auto', objectFit:'contain' }} />
                <span style={{ fontFamily:'var(--f-mono)', fontSize:9, letterSpacing:'0.12em', textTransform:'uppercase', color:'#7a5c00' }}>Black Belt Lean Durable</span>
              </div>
              <div style={{ display:'flex', alignItems:'center', gap:8, padding:'6px 14px', background:'var(--ink-2)', border:'1px solid var(--line)', borderRadius:999 }}>
                <img src="LOGO proxinnov.svg" alt="" style={{ height:14, width:'auto', objectFit:'contain' }} />
                <span style={{ fontFamily:'var(--f-mono)', fontSize:9, letterSpacing:'0.12em', textTransform:'uppercase', color:'var(--muted)' }}>Adhérent Proxinnov</span>
              </div>
            </div>
          </Reveal>

          {/* ── Valeurs ── */}
          <div style={{ borderTop: '1px solid var(--line)', paddingTop: 14 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 16 }}>
              <Eyebrow>CE QUI GUIDE L&rsquo;ATELIER PERF</Eyebrow>
            </div>
            <Reveal stagger>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }} className="values-grid">
                {[
                  { num: '01', t: 'Terrain',   d: "Chaque grade s'est gagné dans les ateliers." },
                  { num: '02', t: 'Méthode',   d: 'Black Belt Lean — le bon outil à la bonne situation.' },
                  { num: '03', t: 'Résultats', d: 'KPI avant / après. Le progrès se prouve en chiffres.' },
                  { num: '04', t: 'Autonomie', d: "Quand on part, ça tourne sans nous." },
                ].map((v, i) => (
                  <MagCard key={i}>
                    <span style={{ fontFamily: 'var(--f-mono)', fontSize: 11, color: 'var(--electric)', letterSpacing: '0.1em' }}>{v.num}</span>
                    <h3 className="display" style={{ fontSize: 22, margin: '10px 0 8px' }}>{v.t}</h3>
                    <p style={{ color: 'var(--muted)', fontSize: 13, lineHeight: 1.55, margin: 0 }}>{v.d}</p>
                  </MagCard>
                ))}
              </div>
            </Reveal>

          </div>

        </div>
        <style>{`
          @media (max-width: 980px) { .values-grid { grid-template-columns: repeat(2, 1fr) !important; } }
          @media (max-width: 540px) { .values-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>

      {/* ══ S1 : Parcours timeline ══ */}
      <section style={{ borderTop: '1px solid var(--line)', background: 'linear-gradient(180deg, transparent, rgba(94,76,255,0.05))', display:'flex', flexDirection:'column', justifyContent:'center' }}>
        <div className="container" style={{ paddingTop: 'clamp(100px,8vh,120px)', paddingBottom: 'clamp(40px,5vh,72px)' }}>
          <div style={{ marginBottom: 48 }}>
            <Eyebrow>PARCOURS</Eyebrow>
            <h2 className="display display-l" style={{ margin: '20px 0 0' }}>Un parcours<br/><span className="italic-accent">tout en ateliers</span></h2>
          </div>
          <Reveal stagger>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
              {[
                { y: '1998', t: 'SKF · Vendée',       d: "Apprenti technicien maintenance — rectification, SMED, automatismes. Le début : les mains dans la graisse." },
                { y: '2004', t: 'Lapeyre-Cougnaud',   d: "Responsable industrialisation. Transformation d'usine : reconversion complète d'une ligne bois vers la menuiserie PVC." },
                { y: '2010', t: 'Oceplast · 13 ans',  d: "Responsable Technique puis membre COMOP. Création de la ligne OCEWOOD, brevets déposés, lean déployé dans tous les ateliers." },
                { y: '2024', t: "L'Atelier Perf",     d: "Création : mettre l'expertise terrain au service des PME, artisans et industriels. Vendée & déplacements toute France." },
                { y: '2026', t: 'Black Belt Lean',    d: "Certification Black Belt Lean Durable · Cubik – L'école Pop. Mars 2026." },
              ].map((e, i) => (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: '120px 200px 1fr', gap: 32, alignItems: 'baseline',
                  padding: 'clamp(16px,2vh,24px) 0', borderBottom: '1px solid var(--line)',
                }} className="timeline-row">
                  <span className="display" style={{ fontSize: 32, color: 'var(--electric)' }}>{e.y}</span>
                  <span className="display" style={{ fontSize: 24 }}>{e.t}</span>
                  <p style={{ color: 'var(--muted)', fontSize: 16, lineHeight: 1.6, margin: 0 }}>{e.d}</p>
                </div>
              ))}
            </div>
          </Reveal>

          {/* ── Certifications & réseau ── */}
          <div style={{ marginTop: 28, paddingTop: 24, borderTop: '1px solid var(--line)', display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '12px 20px', background: 'rgba(251,220,116,0.12)', border: '1px solid rgba(180,140,0,0.35)', borderRadius: 16 }}>
              <img src="black belt.png" alt="Black Belt Lean Durable" style={{ height: 36, width: 'auto', objectFit: 'contain' }} />
              <div>
                <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 14, color: '#7a5c00', lineHeight: 1.2 }}>Black Belt Lean Durable</div>
                <div style={{ fontFamily: 'var(--f-mono)', fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--muted)', marginTop: 3 }}>Cubik — L&rsquo;&eacute;cole Pop &middot; 2026</div>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '12px 20px', background: 'var(--ink-2)', border: '1px solid var(--line)', borderRadius: 16 }}>
              <img src="LOGO proxinnov.svg" alt="Proxinnov" style={{ height: 28, width: 'auto', objectFit: 'contain' }} />
              <div>
                <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 14, color: 'var(--text)', lineHeight: 1.2 }}>Adhérent Proxinnov</div>
                <div style={{ fontFamily: 'var(--f-mono)', fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--muted)', marginTop: 3 }}>R&eacute;seau robotique &amp; innovation Vendée</div>
              </div>
            </div>
          </div>

        </div>
        <style>{`
          @media (max-width: 760px) { .timeline-row { grid-template-columns: 1fr !important; gap: 8px !important; } }
        `}</style>
      </section>

    </main>
  );
}

// =================== CONTACT ===================

function ContactPage({ navigate }) {
  return (
    <main className="page-enter">

      {/* ══ S0 fusionné : Header + CTA + Alternatives (1 section, 2 blocs empilés) ══ */}
      <section style={{
        position: 'relative',
        height: '100vh',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        paddingTop: 80,
        paddingBottom: 40,
        overflow: 'hidden',
      }}>
        <div className="bg-stars"></div>
        <div className="bg-grid"></div>
        <div className="bg-glow" style={{ left: '70%', top: '30%' }}></div>
        <div className="container" style={{ position: 'relative', zIndex: 2 }}>

          {/* Header */}
          <Reveal><Eyebrow>CONTACT · NOUS PARLER</Eyebrow></Reveal>
          <Reveal>
            <h1 className="display display-xl" style={{ margin: '12px 0 20px' }}>
              Parlons de votre <span className="italic-accent">projet</span>
            </h1>
          </Reveal>

          {/* Bloc 1 : CTA principal (glassmorphism horizontal) */}
          <Reveal>
            <div style={{
              padding: '24px 32px',
              border: '1px solid var(--line)',
              borderRadius: 24,
              background: 'var(--ink-2)',
              display: 'flex', alignItems: 'center', gap: 32, flexWrap: 'wrap',
              marginBottom: 16,
            }}>
              <div style={{ flex: 1, minWidth: 220 }}>
                <div style={{ fontFamily: 'var(--f-mono)', fontSize: 9, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 8 }}>
                  PREMI&Egrave;RE VISITE GRATUITE &nbsp;&middot;&nbsp; R&Eacute;PONSE SOUS 48H
                </div>
                <h2 className="display" style={{ fontSize: 'clamp(22px,2.8vw,36px)', margin: '0 0 8px' }}>
                  &Eacute;crivez &agrave; <span className="italic-accent">Beno&icirc;t</span>
                </h2>
                <p style={{ color: 'var(--muted)', fontSize: 14, margin: 0, lineHeight: 1.55 }}>
                  D&eacute;crivez votre besoin en quelques mots — il r&eacute;pond directement, sans interm&eacute;diaire.
                </p>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 10 }}>
                <a href="mailto:b.tenailleau@atelierperf.fr?subject=Prise%20de%20contact%20%E2%80%94%20L%27Atelier%20Perf"
                   className="btn btn-primary" style={{ fontSize: 14, padding: '14px 28px', whiteSpace: 'nowrap' }}>
                  &Eacute;crire &agrave; Beno&icirc;t
                  <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 style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'var(--f-mono)', fontSize: 9, color: 'var(--muted)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>
                  <span className="pulse" style={{ width: 7, height: 7, background: 'var(--electric)', borderRadius: '50%', flexShrink: 0, boxShadow: '0 0 10px var(--electric-2)' }}></span>
                  Bas&eacute; en Vend&eacute;e (85) &middot; Interventions Grand Ouest
                </div>
              </div>
            </div>
          </Reveal>

          {/* Bloc 2 : 3 alternatives en ligne */}
          <Reveal>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              {[
                { icon: '✉', t: 'Email direct',             v: 'b.tenailleau@atelierperf.fr', href: 'mailto:b.tenailleau@atelierperf.fr' },
                { icon: '☎', t: 'Téléphone',                v: '06 85 68 53 36',              href: 'tel:+33685685336' },
                { icon: '◉', t: 'Vendée (85) · Grand Ouest', v: 'Déplacements toute France',   href: '#' },
              ].map((c, i) => (
                <a key={i} href={c.href} style={{
                  flex: 1, minWidth: 180,
                  padding: '14px 18px',
                  background: '#fff',
                  border: '1px solid var(--line)',
                  borderRadius: 16,
                  display: 'flex', alignItems: 'center', gap: 14,
                  transition: 'border-color 200ms',
                  color: 'var(--text)', textDecoration: 'none',
                }}
                onMouseEnter={(e) => e.currentTarget.style.borderColor = 'var(--electric)'}
                onMouseLeave={(e) => e.currentTarget.style.borderColor = 'var(--line)'}>
                  <span style={{ fontSize: 20, color: 'var(--electric)', flexShrink: 0 }}>{c.icon}</span>
                  <div>
                    <div style={{ fontFamily: 'var(--f-mono)', fontSize: 9, color: 'var(--muted)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>{c.t}</div>
                    <div style={{ fontSize: 13, marginTop: 3 }}>{c.v}</div>
                  </div>
                </a>
              ))}
            </div>
          </Reveal>

        </div>
      </section>

    </main>
  );
}

// =================== DIAGNOSTIC ===================

function DiagnosticPage({ 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>
        <div className="bg-grid"></div>
        <div className="bg-glow" style={{ left:'60%', top:'20%' }}></div>

        <div className="container" style={{ position:'relative', zIndex:2 }}>
          <Reveal><Eyebrow>OUTIL LEAN · DIAGNOSTIC ORGANISATIONNEL</Eyebrow></Reveal>
          <Reveal>
            <h1 className="display display-xl" style={{ margin:'12px 0 10px', maxWidth:980 }}>
              Rendre votre organisation<br/>
              <span className="italic-accent">lisible, partagée</span> et améliorable
            </h1>
          </Reveal>
          <Reveal>
            <p style={{ fontSize:19, color:'var(--muted)', lineHeight:1.6, margin:'0 0 24px', maxWidth:720 }}>
              Et si <strong style={{ color:'var(--text)' }}>1h</strong> suffisait à y voir plus clair ?
              Un regard extérieur sur vos processus — offert, sans engagement.
            </p>
          </Reveal>

          {/* Offre découverte — Flash Diag block (style QVCT flyer) */}
          <Reveal>
            <div style={{ borderRadius:14, background:'linear-gradient(135deg, var(--deep) 0%, var(--electric) 100%)', padding:'22px 28px', display:'flex', flexDirection:'column', gap:14, overflow:'hidden', position:'relative', marginBottom:24 }}>
              <div style={{ position:'absolute', width:200, height:200, borderRadius:'50%', right:-60, top:-80, background:'radial-gradient(closest-side, rgba(94,76,255,0.45), transparent 70%)', filter:'blur(20px)', pointerEvents:'none' }}></div>
              <div style={{ position:'absolute', width:130, height:130, borderRadius:'50%', left:-40, bottom:-50, background:'radial-gradient(closest-side, rgba(251,220,116,0.22), transparent 70%)', filter:'blur(18px)', pointerEvents:'none' }}></div>
              <div style={{ display:'inline-flex', alignItems:'center', gap:5, background:'var(--yellow)', color:'var(--ink)', fontFamily:'var(--f-mono)', fontSize:9, fontWeight:700, letterSpacing:'0.16em', textTransform:'uppercase', padding:'4px 12px', borderRadius:999, width:'fit-content', position:'relative', zIndex:1 }}>
                <span style={{ width:4, height:4, background:'var(--ink)', borderRadius:'50%', flexShrink:0, display:'inline-block' }}></span>
                OFFRE DÉCOUVERTE
              </div>
              <div style={{ fontFamily:'var(--f-display)', fontWeight:700, fontSize:'clamp(20px,2.8vw,28px)', lineHeight:1, letterSpacing:'-0.03em', color:'#fff', position:'relative', zIndex:1 }}>
                Visite Flash Diag <span style={{ fontStyle:'italic', fontWeight:500, color:'var(--yellow)' }}>offerte</span>
              </div>
              <div style={{ width:30, height:2, background:'rgba(255,255,255,0.22)', position:'relative', zIndex:1 }}></div>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:12, position:'relative', zIndex:1 }}>
                {[['⏱','1-2h sur site'],['💬','Restitution le jour même'],['✓','Zéro engagement']].map(([icon,t],i) => (
                  <div key={i} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:8, textAlign:'center', fontSize:13, fontWeight:500, color:'rgba(255,255,255,0.9)', lineHeight:1.35 }}>
                    <div style={{ width:30, height:30, borderRadius:8, flexShrink:0, background:'rgba(255,255,255,0.12)', border:'1px solid rgba(255,255,255,0.22)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:14, color:'var(--yellow)' }}>{icon}</div>
                    {t}
                  </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' }}>
                Demander ma visite gratuite
                <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>
              <a href="assets/flyer-swimlane-diagnostic.pdf" download style={{ fontSize:14, padding:'14px 24px', background:'transparent', border:'1px solid var(--line)', borderRadius:999, color:'var(--text)', textDecoration:'none', display:'inline-flex', alignItems:'center', gap:8, fontFamily:'var(--f-mono)', letterSpacing:'0.06em' }}>
                ↓ Télécharger le flyer
              </a>
            </div>
          </Reveal>
        </div>
        <ScrollHint />
      </section>

      {/* ══ S1 : La démarche ══ */}
      <section style={{ borderTop:'1px solid var(--line)' }}>
        <div className="container" style={{ paddingTop:'clamp(80px,8vh,110px)', paddingBottom:'clamp(40px,5vh,72px)' }}>
          <Reveal>
            <Eyebrow>LA DÉMARCHE — EN ATELIER COLLECTIF</Eyebrow>
            <h2 className="display display-l" style={{ margin:'16px 0 32px' }}>3 étapes pour rendre<br/><span className="italic-accent">l'invisible visible</span></h2>
          </Reveal>

          {/* Swimlane visuelle — identique au flyer OCA */}
          <Reveal>
            <div style={{ border:'1px solid rgba(16,30,142,0.18)', borderRadius:14, overflow:'hidden', marginBottom:36 }}>
              <div style={{ padding:'10px 20px', borderBottom:'1px solid var(--line)', fontFamily:'var(--f-mono)', fontSize:9, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--muted)', background:'var(--ink-2)' }}>
                EXEMPLE — CARTOGRAPHIE D'UN PROCESSUS ENTRE SERVICES
              </div>
              <div style={{ padding:'16px 20px', background:'#f4f4f7' }}>
                <svg width="100%" viewBox="0 0 540 118" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ display:'block' }}>
                  <rect x="82" y="2"  width="456" height="38" fill="rgba(62,45,214,0.04)"/>
                  <rect x="82" y="40" width="456" height="38" fill="#ffffff"/>
                  <rect x="82" y="78" width="456" height="38" fill="rgba(62,45,214,0.04)"/>
                  <rect x="0" y="2" width="82" height="114" fill="rgba(16,30,142,0.07)" rx="4"/>
                  <text x="10" y="24"  fontFamily="Inter,sans-serif" fontSize="8.5" fontWeight="600" fill="#101e8e">Client</text>
                  <text x="10" y="63"  fontFamily="Inter,sans-serif" fontSize="8.5" fontWeight="600" fill="#101e8e">Bureau d&apos;études</text>
                  <text x="10" y="102" fontFamily="Inter,sans-serif" fontSize="8.5" fontWeight="600" fill="#101e8e">Atelier</text>
                  <line x1="0"  y1="40"  x2="540" y2="40"  stroke="rgba(16,30,142,0.18)" strokeWidth="1"/>
                  <line x1="0"  y1="78"  x2="540" y2="78"  stroke="rgba(16,30,142,0.18)" strokeWidth="1"/>
                  <line x1="82" y1="2"   x2="82"  y2="116" stroke="#3e2dd6"               strokeWidth="1.2"/>
                  <circle cx="130" cy="21" r="11" fill="#3e2dd6"/>
                  <text x="130" y="25" textAnchor="middle" fontFamily="Inter,sans-serif" fontSize="7" fontWeight="700" fill="white">CMD</text>
                  <line x1="130" y1="32" x2="130" y2="40" stroke="rgba(6,6,26,0.38)" strokeWidth="1.1" strokeDasharray="3,2"/>
                  <line x1="130" y1="40" x2="170" y2="40" stroke="rgba(6,6,26,0.38)" strokeWidth="1.1" strokeDasharray="3,2"/>
                  <polygon points="170,37 178,40 170,43" fill="rgba(6,6,26,0.38)"/>
                  <rect x="178" y="49" width="65" height="22" rx="3.5" fill="white" stroke="#3e2dd6" strokeWidth="1.1"/>
                  <text x="210" y="64" textAnchor="middle" fontFamily="Inter,sans-serif" fontSize="7.5" fontWeight="600" fill="#101e8e">Analyse</text>
                  <line x1="243" y1="60" x2="268" y2="60" stroke="#3e2dd6" strokeWidth="1.1"/>
                  <polygon points="268,57 276,60 268,63" fill="#3e2dd6"/>
                  <rect x="276" y="49" width="65" height="22" rx="3.5" fill="white" stroke="#3e2dd6" strokeWidth="1.1"/>
                  <text x="308" y="64" textAnchor="middle" fontFamily="Inter,sans-serif" fontSize="7.5" fontWeight="600" fill="#101e8e">Cahier charges</text>
                  <rect x="343" y="45" width="20" height="30" rx="3" fill="#FDECEA" stroke="#D85A30" strokeWidth="1"/>
                  <text x="353" y="65" textAnchor="middle" fontFamily="Inter,sans-serif" fontSize="11" fontWeight="700" fill="#D85A30">!</text>
                  <text x="353" y="44" textAnchor="middle" fontFamily="Inter,sans-serif" fontSize="6.5" fill="#D85A30">Info manquante</text>
                  <line x1="353" y1="75" x2="353" y2="78" stroke="rgba(6,6,26,0.38)" strokeWidth="1.1" strokeDasharray="3,2"/>
                  <line x1="353" y1="78" x2="390" y2="78" stroke="rgba(6,6,26,0.38)" strokeWidth="1.1" strokeDasharray="3,2"/>
                  <polygon points="390,75 398,78 390,81" fill="rgba(6,6,26,0.38)"/>
                  <rect x="398" y="87" width="65" height="22" rx="3.5" fill="white" stroke="#3e2dd6" strokeWidth="1.1"/>
                  <text x="430" y="102" textAnchor="middle" fontFamily="Inter,sans-serif" fontSize="7.5" fontWeight="600" fill="#101e8e">Production</text>
                  <line x1="463" y1="98" x2="480" y2="98" stroke="#3e2dd6" strokeWidth="1.1"/>
                  <polygon points="480,95 488,98 480,101" fill="#3e2dd6"/>
                  <circle cx="500" cy="98" r="12" fill="#f7c948"/>
                  <text x="500" y="102" textAnchor="middle" fontFamily="Inter,sans-serif" fontSize="9" fontWeight="700" fill="#101e8e">✓</text>
                  <line x1="500" y1="86" x2="500" y2="21" stroke="rgba(6,6,26,0.28)" strokeWidth="1" strokeDasharray="3,2"/>
                  <circle cx="500" cy="21" r="9" fill="rgba(16,30,142,0.07)" stroke="#3e2dd6" strokeWidth="1"/>
                  <text x="500" y="25" textAnchor="middle" fontFamily="Inter,sans-serif" fontSize="6.5" fontWeight="600" fill="#101e8e">Livré</text>
                  <circle cx="90"  cy="109" r="6"  fill="#3e2dd6"/>
                  <text x="100" y="113" fontFamily="Inter,sans-serif" fontSize="7" fill="rgba(6,6,26,0.62)">Début / fin</text>
                  <rect x="138" y="103" width="14" height="12" rx="2" fill="white" stroke="#3e2dd6" strokeWidth="1"/>
                  <text x="156" y="113" fontFamily="Inter,sans-serif" fontSize="7" fill="rgba(6,6,26,0.62)">Tâche</text>
                  <rect x="194" y="103" width="14" height="12" rx="2" fill="#FDECEA" stroke="#D85A30" strokeWidth="0.9"/>
                  <text x="212" y="113" fontFamily="Inter,sans-serif" fontSize="7" fill="#D85A30">Zone de friction</text>
                  <line x1="278" y1="109" x2="290" y2="109" stroke="rgba(6,6,26,0.38)" strokeWidth="1" strokeDasharray="3,2"/>
                  <text x="294" y="113" fontFamily="Inter,sans-serif" fontSize="7" fill="rgba(6,6,26,0.62)">Transfert entre acteurs</text>
                </svg>
              </div>
            </div>
          </Reveal>

          {/* 3 étapes */}
          <Reveal stagger>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:16, marginBottom:32 }} className="diag-steps-grid">
              {[
                { n:'1', t:'État actuel',       d:"Observer et cartographier les processus réels avec les acteurs. Ce qui se passe vraiment — pas ce qui est censé se passer." },
                { n:'2', t:'Co-construction',   d:'Identifier collectivement les frictions, doublons, zones de flou. Les équipes décident ensemble des changements.' },
                { n:'3', t:'Plan d\'actions',   d:'Priorités claires, responsables désignés, engagement collectif. Les décisions co-construites sont mieux tenues.' },
              ].map((s,i) => (
                <MagCard key={i}>
                  <div style={{ width:30, height:30, borderRadius:'50%', background:'var(--electric)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--f-mono)', fontWeight:700, fontSize:14, marginBottom:12 }}>{s.n}</div>
                  <h3 className="display" style={{ fontSize:19, margin:'0 0 8px' }}>{s.t}</h3>
                  <p style={{ color:'var(--muted)', fontSize:13, lineHeight:1.55, margin:0 }}>{s.d}</p>
                </MagCard>
              ))}
            </div>
          </Reveal>
        </div>
        <style>{`
          @media (max-width:760px) { .diag-steps-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>

      {/* ══ S2 : 3 Questions + Ce que ça révèle ══ */}
      <section style={{ borderTop:'1px solid var(--line)', background:'linear-gradient(180deg, transparent, rgba(94,76,255,0.05))' }}>
        <div className="container" style={{ paddingTop:'clamp(88px,11vh,108px)', paddingBottom:'clamp(24px,3vh,44px)' }}>

          {/* 3 questions */}
          <Reveal>
            <div style={{ padding:'12px 18px', background:'rgba(62,45,214,0.1)', border:'1px solid rgba(94,76,255,0.3)', borderRadius:12, marginBottom:14 }}>
              <Eyebrow>3 QUESTIONS POUR DIAGNOSTIQUER VOS IRRITANTS</Eyebrow>
              <div style={{ display:'flex', flexDirection:'column', gap:0, marginTop:8 }}>
                {[
                  { n:'01', q:'Où passez-vous du temps sans valeur ajoutée ?',           outil:'VSM · Value Stream Map' },
                  { n:'02', q:'Où les responsabilités sont-elles floues entre équipes ?', outil:'Swimlane · Diagramme de processus' },
                  { n:'03', q:'Quelle est la charge réelle de vos équipes ?',             outil:'Analyse de flux · Charge vs perçue' },
                ].map((q,i) => (
                  <div key={i} style={{ display:'grid', gridTemplateColumns:'32px 1fr auto', gap:12, alignItems:'center', padding:'7px 0', borderBottom: i < 2 ? '1px solid var(--line)' : 'none' }} className="diag-q-row">
                    <span style={{ fontFamily:'var(--f-mono)', fontWeight:700, fontSize:15, color:'var(--electric)' }}>{q.n}</span>
                    <span style={{ fontSize:14, fontWeight:500 }}>{q.q}</span>
                    <span style={{ fontFamily:'var(--f-mono)', fontSize:9, color:'var(--muted)', letterSpacing:'0.1em', textTransform:'uppercase', whiteSpace:'nowrap' }}>{q.outil}</span>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>

          <Reveal>
            <h2 className="display display-l" style={{ margin:'0 0 2px' }}>Ce que ça <span className="italic-accent">révèle</span></h2>
            <p style={{ color:'var(--muted)', fontSize:14, margin:'0 0 10px' }}>Un gaspillage ignoré = un irritant qui dure.</p>
          </Reveal>

          {/* Tableau gaspillage ↔ irritant */}
          <Reveal>
            <div style={{ border:'1px solid var(--line)', borderRadius:12, overflow:'hidden', marginBottom:14 }}>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', background:'var(--ink-2)' }}>
                {['Gaspillage lean','Irritant humain'].map((h,i) => (
                  <div key={i} style={{ padding:'7px 16px', fontFamily:'var(--f-mono)', fontSize:9, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--muted)', borderBottom:'1px solid var(--line)', borderLeft: i>0 ? '1px solid var(--line)' : 'none' }}>{h}</div>
                ))}
              </div>
              {[
                ['Attentes & blocages entre services',  'Frustration, perte de sens'],
                ['Erreurs & retraitements',             'Stress, travail perçu absurde'],
                ['Interfaces floues entre services',    'Conflits, blame, silos'],
                ['Compétences mal utilisées',           'Désengagement, risques RPS'],
                ['Surtraitement (tâches sans valeur)',  "Charge mentale, sentiment d'absurdité"],
              ].map(([g,h],i) => (
                <div key={i} style={{ display:'grid', gridTemplateColumns:'1fr 1fr', borderTop:'1px solid var(--line)' }}>
                  <div style={{ padding:'8px 16px', fontSize:13, fontWeight:500 }}>{g}</div>
                  <div style={{ padding:'8px 16px', fontSize:13, color:'var(--muted)', borderLeft:'1px solid var(--line)', display:'flex', gap:6, alignItems:'center' }}>
                    <span style={{ color:'var(--electric)', fontWeight:700, flexShrink:0 }}>→</span>{h}
                  </div>
                </div>
              ))}
            </div>
          </Reveal>

          {/* Citation + CTA côte à côte */}
          <Reveal>
            <div style={{ display:'grid', gridTemplateColumns:'1fr auto', gap:16, alignItems:'center' }} className="diag-cta-grid">
              <div style={{ padding:'12px 18px', background:'rgba(16,30,142,0.07)', borderRadius:12, borderLeft:'3px solid var(--electric)' }}>
                <p style={{ fontSize:15, fontWeight:500, margin:'0 0 4px', lineHeight:1.45 }}>
                  Le <span className="italic-accent">coaching</span> soigne les personnes.<br/>
                  Le <span className="italic-accent">lean</span> soigne les systèmes.
                </p>
                <p style={{ fontFamily:'var(--f-mono)', fontSize:9, color:'var(--muted)', letterSpacing:'0.14em', textTransform:'uppercase', margin:0 }}>Traiter les causes, pas seulement les symptômes</p>
              </div>
              <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
                <button onClick={() => navigate('contact')} className="btn btn-primary" style={{ fontSize:14, padding:'12px 24px', whiteSpace:'nowrap' }}>
                  Demander ma visite gratuite
                  <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>
                </button>
                <a href="assets/flyer-swimlane-diagnostic.pdf" download style={{ fontSize:13, padding:'10px 18px', background:'transparent', border:'1px solid var(--line)', borderRadius:999, color:'var(--text)', textDecoration:'none', display:'inline-flex', alignItems:'center', gap:8, fontFamily:'var(--f-mono)', letterSpacing:'0.06em', justifyContent:'center' }}>
                  ↓ Flyer PDF
                </a>
              </div>
            </div>
          </Reveal>
        </div>
        <style>{`
          @media (max-width:640px) { .diag-q-row { grid-template-columns: 28px 1fr !important; } .diag-q-row > span:last-child { display:none; } }
          @media (max-width:700px) { .diag-cta-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>

    </main>
  );
}

Object.assign(window, { AboutPage, ContactPage, DiagnosticPage });