(function () {
  const C = {
    bg: '#F1EFEB',
    bgSunken: '#E7E4DE',
    bgElevated: '#FFFFFF',
    ink: '#15202B',
    inkMuted: '#5A6772',
    inkDim: '#8A94A0',
    primary: '#0B3D5C',
    primaryDeep: '#082A40',
    safety: '#FF6B00',
    success: '#0F766E',
    border: 'rgba(21,32,43,0.12)',
    borderStrong: 'rgba(21,32,43,0.22)',
  };

  function Icon({ d, size = 20, stroke = 'currentColor', sw = 2, fill = 'none' }) {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
        {typeof d === 'string' ? <path d={d}/> : d}
      </svg>
    );
  }

  const I = {
    Bolt: () => <Icon d="M13 2 3 14h7l-1 8 11-12h-7l1-8z" fill="currentColor"/>,
    Check: () => <Icon d="M20 6 9 17l-5-5"/>,
    Arrow: () => <Icon d="M5 12h14M13 5l7 7-7 7"/>,
    Play: () => <Icon d="M8 5v14l11-7z" fill="currentColor"/>,
    Clock: () => <Icon d={<><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></>}/>,
    Lock: () => <Icon d={<><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></>}/>,
    Wrench: () => <Icon d="M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.5 2.5-2.4-2.4z"/>,
    Brush: () => <Icon d={<><path d="M9.06 11.9 4 17v3h3l5.1-5.06"/><path d="m13 9 5-5 3 3-5 5z"/></>}/>,
    Flame: () => <Icon d="M12 2s4 4 4 8a4 4 0 0 1-8 0c0-2 1-3 1-3s-3 2-3 6a6 6 0 0 0 12 0c0-5-6-11-6-11z"/>,
    Home: () => <Icon d="M3 11l9-8 9 8v10a1 1 0 0 1-1 1h-5v-7H10v7H5a1 1 0 0 1-1-1V11z"/>,
    Drill: () => <Icon d={<><path d="M14 4h6v4h-6z"/><path d="M14 6H6a2 2 0 0 0 0 4h8"/><path d="M10 10v3l-2 7h4l2-7v-3"/></>}/>,
    Leaf: () => <Icon d={<><path d="M11 20A7 7 0 0 1 4 13c0-5 4-9 15-9 0 11-4 15-9 15"/><path d="M4 20c4-4 8-8 15-16"/></>}/>,
  };

  const TRADES = [
    { Icon: I.Wrench, label: 'Plombiers' },
    { Icon: I.Bolt, label: 'Électriciens' },
    { Icon: I.Brush, label: 'Peintres' },
    { Icon: I.Flame, label: 'Chauffagistes' },
    { Icon: I.Leaf, label: 'Paysagistes' },
    { Icon: I.Home, label: 'Rénovation' },
    { Icon: I.Drill, label: 'Petits travaux' },
  ];

  function goApp() { window.location.href = '/app'; }
  function goHow() { document.getElementById('comment-ca-marche')?.scrollIntoView({ behavior: 'smooth' }); }

  function Logo() {
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 34, height: 34, borderRadius: 6, background: C.primary, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: `0 2px 0 ${C.primaryDeep}` }}>
          <I.Bolt size={16} stroke={C.safety} />
        </div>
        <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: -0.6 }}>
          <span style={{ color: C.ink }}>Instant</span><span style={{ color: C.primary }}>Devis</span>
        </div>
      </div>
    );
  }

  function TactileButton({ children, variant = 'primary', icon, onClick }) {
    const v = variant === 'safety'
      ? { bg: C.safety, fg: '#0D1520', border: '#C25400', shadow: '0 4px 0 #C25400' }
      : variant === 'ghost'
        ? { bg: 'transparent', fg: C.ink, border: C.borderStrong, shadow: 'none' }
        : { bg: C.primary, fg: '#fff', border: C.primaryDeep, shadow: `0 4px 0 ${C.primaryDeep}` };
    return (
      <button className={`btn-tactile landing-cta${variant === 'ghost' ? ' landing-cta--ghost' : ''}`} onClick={onClick} style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        height: 58, padding: '0 22px', borderRadius: 8, border: `2px solid ${v.border}`,
        background: v.bg, color: v.fg, fontSize: 16, fontWeight: 800, boxShadow: v.shadow,
      }}>
        {icon}
        <span>{children}</span>
      </button>
    );
  }

  function PhoneMockup() {
    return (
      <div className="phone-float landing-phone" style={{
        borderRadius: 36, background: 'linear-gradient(180deg, #121C2A 0%, #0A0F18 100%)', padding: 10,
        boxShadow: '0 34px 64px -22px rgba(11,61,92,0.48), 0 0 0 2px #000, inset 0 1px 0 rgba(255,255,255,0.08)',
        position: 'relative',
      }}>
        <div style={{
          position: 'absolute',
          top: 18,
          right: 16,
          width: 70,
          height: 160,
          background: 'linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0))',
          borderRadius: 30,
          transform: 'rotate(8deg)',
          pointerEvents: 'none',
        }}/>
        <div style={{ width: '100%', height: '100%', borderRadius: 28, overflow: 'hidden', background: '#F3EFE8', border: '1px solid rgba(0,0,0,0.2)' }}>
          <div style={{ height: 34, padding: '9px 18px', display: 'flex', justifyContent: 'space-between', fontFamily: 'JetBrains Mono, monospace', fontSize: 11, fontWeight: 700 }}>
            <span>20:47</span><span>LTE</span>
          </div>
          <div style={{ padding: '8px 14px', borderBottom: `1px solid ${C.border}`, background: 'linear-gradient(180deg, #ffffff 0%, #F7F3EC 100%)' }}>
            <div style={{ fontSize: 14, fontWeight: 800, color: C.ink }}>Q-2026-047 · Mme Dubois</div>
            <div style={{ fontSize: 11, color: C.inkMuted, marginTop: 2, fontWeight: 600 }}>Remplacement chaudière + vannes</div>
          </div>
          <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 8, background: '#F1ECE4' }}>
            {[['Main d’œuvre', '480 €'], ['Fournitures', '2 450 €'], ['Déplacement', '90 €']].map((row) => (
              <div key={row[0]} style={{
                background: '#FCFAF7',
                border: `1px solid rgba(21,32,43,0.16)`,
                borderRadius: 8,
                padding: '10px 12px',
                display: 'flex',
                justifyContent: 'space-between',
                boxShadow: '0 3px 10px rgba(11,61,92,0.06)',
              }}>
                <span style={{ fontSize: 12, color: C.ink, fontWeight: 600 }}>{row[0]}</span>
                <span style={{ fontSize: 12, fontWeight: 800, color: C.ink }}>{row[1]}</span>
              </div>
            ))}
            <div style={{
              background: 'linear-gradient(180deg, #0B3D5C 0%, #082A40 100%)',
              color: '#fff',
              borderRadius: 8,
              padding: '11px 12px',
              marginTop: 4,
              border: '1px solid rgba(255,255,255,0.12)',
              boxShadow: '0 8px 16px rgba(8,42,64,0.35)',
            }}>
              <div style={{ fontSize: 10, opacity: 0.7, fontFamily: 'JetBrains Mono, monospace' }}>TOTAL TTC</div>
              <div style={{ fontSize: 23, fontWeight: 800, letterSpacing: -0.4 }}>3 906 €</div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  function SectionNumber({ n, label }) {
    return (
      <div style={{ display: 'inline-flex', alignItems: 'baseline', gap: 10, marginBottom: 16 }}>
        <span className="mono" style={{ fontSize: 11, fontWeight: 800, color: C.primary, border: `1px solid ${C.primary}`, borderRadius: 4, padding: '3px 7px' }}>{String(n).padStart(2, '0')}</span>
        <span className="mono" style={{ fontSize: 11, letterSpacing: 1.8, color: C.inkDim }}>{label}</span>
      </div>
    );
  }

  function LandingPage() {
    return (
      <div style={{ background: C.bg, minHeight: '100dvh' }}>
        <style>{`
          .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
          .hazard-tape-thin { background: repeating-linear-gradient(-45deg, #FF6B00 0, #FF6B00 9px, #15202B 9px, #15202B 18px); }
          .hazard-tape { background: repeating-linear-gradient(-45deg, #FF6B00 0, #FF6B00 14px, #15202B 14px, #15202B 28px); }
          .hachure { background-image: repeating-linear-gradient(135deg, rgba(21,32,43,0.025) 0, rgba(21,32,43,0.025) 1px, transparent 1px, transparent 14px); }
          .reveal { animation: id-reveal .35s ease-out both; }
          .btn-tactile { cursor: pointer; transition: transform .08s ease; }
          .btn-tactile:active { transform: scale(0.98); }
          .phone-float { animation: id-phone-float 6s ease-in-out infinite; }
          @keyframes id-phone-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
          @keyframes id-reveal { from{opacity:0; transform: translateY(8px)} to{opacity:1; transform: translateY(0)} }
          .landing-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
          .hero { padding: 56px 0 68px; }
          .hero-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr); gap:44px; align-items:center; }
          .hero-title { margin: 0; font-size: clamp(42px, 6.5vw, 78px); line-height: 0.97; letter-spacing: -1.6px; font-weight: 800; }
          .hero-sub { margin: 16px 0 0; font-size: 18px; color: ${C.inkMuted}; line-height: 1.5; max-width: 640px; }
          .hero-chips { margin-top: 18px; display: flex; gap: 18px; flex-wrap: wrap; color: ${C.inkMuted}; font-size: 13px; }
          .hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
          .section-pad { padding: 72px 0; }
          .section-h2 { margin: 0; font-size: clamp(30px, 5vw, 56px); line-height: 1.04; letter-spacing: -1.1px; font-weight: 800; }
          .section-h2--lg { font-size: clamp(36px, 5.4vw, 62px); line-height: 1; letter-spacing: -1.2px; }
          .section-lead { margin: 18px 0 0; max-width: 760px; color: ${C.inkMuted}; font-size: 18px; line-height: 1.52; }
          .landing-phone { width: 294px; height: 602px; }
          .landing-cta { flex: 0 0 auto; }
          .trade-section { position: relative; }
          .trade-strip-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
          .trade-strip-wrap::-webkit-scrollbar { display: none; }
          .trade-strip { display:flex; gap:30px; white-space:nowrap; }
          .trade-item { display:inline-flex; align-items:center; gap:8px; flex: 0 0 auto; scroll-snap-align: start; font-size: 14px; }
          .cards { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:14px; }
          .steps { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:14px; }
          .benefits { display:grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap:12px; }
          .nav-links a { text-decoration:none; }
          .emotion-box { margin-top: 22px; background: linear-gradient(180deg, #FFF6EA 0%, #FDF2E3 100%); border: 1px solid rgba(255,107,0,0.28); border-radius: 10px; padding: 14px 14px 14px 16px; box-shadow: 0 10px 20px rgba(11,61,92,0.08); position: relative; }
          .final-cta-h2 { margin: 0; font-size: clamp(38px, 6vw, 80px); line-height: 0.98; letter-spacing: -1.4px; font-weight: 800; }
          @media (max-width: 980px){
            .hero-grid{grid-template-columns:1fr; gap: 28px;}
            .cards,.steps,.benefits{grid-template-columns:repeat(2,minmax(0,1fr));}
            .landing-phone { width: 262px; height: 536px; }
          }
          @media (max-width: 767px){
            .landing-container { padding: 0 18px; }
            .hero { padding: 32px 0 44px; }
            .hero-title { font-size: clamp(34px, 9.2vw, 46px); letter-spacing: -1px; line-height: 1; }
            .hero-sub { font-size: 16px; margin-top: 12px; }
            .hero-chips { gap: 14px; font-size: 12.5px; margin-top: 14px; }
            .hero-cta-row { gap: 10px; margin-top: 20px; flex-direction: column; align-items: stretch; }
            .landing-cta { width: 100%; }
            .landing-cta--ghost { height: 50px !important; font-size: 14px !important; border-width: 1px !important; }
            .section-pad { padding: 52px 0; }
            .section-h2 { font-size: clamp(28px, 7vw, 34px); line-height: 1.06; }
            .section-h2--lg { font-size: clamp(30px, 7.5vw, 38px); line-height: 1.04; }
            .section-lead { font-size: 16px; line-height: 1.5; }
            .final-cta-h2 { font-size: clamp(32px, 8vw, 40px); }
            .landing-phone { width: 232px; height: 478px; }
            .emotion-box { margin-top: 18px; padding: 12px 12px 12px 14px; }
            .emotion-box p { font-size: 15px !important; }
            .trade-section { padding: 14px 0 !important; }
            .trade-strip-wrap { scroll-snap-type: x proximity; padding: 0 18px; margin: 0 -18px; }
            .trade-strip { min-width: max-content; padding-right: 8px; gap: 22px; }
            .trade-section::before, .trade-section::after { content: ''; position: absolute; top: 0; bottom: 0; width: 26px; pointer-events: none; z-index: 2; }
            .trade-section::before { left: 0; background: linear-gradient(90deg, ${C.ink} 0%, rgba(21,32,43,0) 100%); }
            .trade-section::after { right: 0; background: linear-gradient(270deg, ${C.ink} 0%, rgba(21,32,43,0) 100%); }
          }
          @media (min-width: 768px){
            .trade-strip-wrap { overflow: visible; }
            .trade-strip { justify-content: space-between; }
          }
          @media (max-width: 640px){
            .cards,.steps,.benefits{grid-template-columns:1fr;}
            .nav-links a:not(:last-child){display:none;}
          }
        `}</style>

        <header style={{ position: 'sticky', top: 0, zIndex: 30, background: 'rgba(241,239,235,0.94)', backdropFilter: 'blur(8px)', borderBottom: `1px solid ${C.border}` }}>
          <div className="hazard-tape-thin" style={{ height: 4 }}/>
          <div className="landing-container" style={{ height: 68, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <Logo />
            <nav className="nav-links" style={{ display: 'flex', alignItems: 'center', gap: 22 }}>
              <a href="#probleme" className="mono" style={{ fontSize: 11, color: C.inkMuted, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase' }}>Problème</a>
              <a href="#solution" className="mono" style={{ fontSize: 11, color: C.inkMuted, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase' }}>Solution</a>
              <a href="#comment-ca-marche" className="mono" style={{ fontSize: 11, color: C.inkMuted, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase' }}>Comment ça marche</a>
              <a href="/app" style={{ padding: '9px 14px', borderRadius: 6, border: `1.5px solid ${C.primary}`, color: C.primary, fontSize: 13, fontWeight: 700 }}>Lancer InstantDevis</a>
            </nav>
          </div>
        </header>

        <section className="hachure hero">
          <div className="landing-container hero-grid">
            <div className="reveal">
              <h1 className="hero-title">
                <span style={{ display: 'block' }}>Vos devis en 2 minutes.</span>
                <span style={{ display: 'block', color: C.safety, fontStyle: 'italic' }}>Vos soirées pour vous.</span>
              </h1>
              <p className="hero-sub">
                InstantDevis aide les artisans à créer, envoyer et faire signer leurs devis depuis leur téléphone.
              </p>
              <div className="emotion-box">
                <span style={{
                  position: 'absolute',
                  left: 0,
                  top: 0,
                  bottom: 0,
                  width: 5,
                  borderRadius: '10px 0 0 10px',
                  background: 'linear-gradient(180deg,#FF6B00 0%, #F59E0B 100%)',
                }}/>
                <div style={{ display: 'flex', gap: 10, paddingLeft: 8 }}>
                  <span style={{ color: C.safety, marginTop: 2, flex: '0 0 auto' }}><I.Clock size={16}/></span>
                  <p style={{ margin: 0, fontSize: 16, lineHeight: 1.5, color: C.ink, fontWeight: 600 }}>
                    Le soir, passez du temps avec votre famille.<br/>
                    <span style={{ color: C.inkMuted, fontWeight: 500 }}>Fini les heures tardives sur les devis.</span>
                  </p>
                </div>
              </div>
              <div className="hero-cta-row">
                <TactileButton variant="safety" icon={<I.Bolt size={18}/> } onClick={goApp}>Créer mon premier devis</TactileButton>
                <TactileButton variant="ghost" icon={<I.Play size={16}/>} onClick={goHow}>Voir comment ça marche</TactileButton>
              </div>
              <div className="hero-chips">
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><I.Clock size={14}/> Devis en 2 min</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><I.Lock size={14}/> Devis verrouillé + horodatage</span>
              </div>
            </div>
            <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
              <PhoneMockup />
              <div style={{ position: 'absolute', left: -8, bottom: 30, background: '#fff', border: `1px solid ${C.border}`, borderRadius: 8, padding: '9px 12px', boxShadow: '0 10px 24px rgba(11,61,92,0.14)' }}>
                <div className="mono" style={{ fontSize: 9, color: C.inkDim }}>SIGNÉ · 14:32</div>
                <div style={{ fontSize: 12, fontWeight: 700, color: C.ink }}>Mme Dubois · 3 906 €</div>
              </div>
            </div>
          </div>
          <div className="hazard-tape" style={{ height: 8, marginTop: 36 }}/>
        </section>

        <section className="trade-section" style={{ background: C.ink, color: '#fff', padding: '16px 0', borderTop: '1px solid #000', borderBottom: '1px solid #000' }}>
          <div className="landing-container">
            <div className="trade-strip-wrap">
              <div className="trade-strip">
                {TRADES.map((t) => (
                  <div key={t.label} className="trade-item" style={{ fontWeight: 700 }}>
                    <span style={{ color: C.safety }}><t.Icon/></span>
                    <span>{t.label}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        <section id="probleme" className="section-pad" style={{ background: C.bgSunken }}>
          <div className="landing-container">
            <SectionNumber n={1} label="LE PROBLÈME"/>
            <h2 className="section-h2 section-h2--lg">Encore des devis à faire à 22h ?</h2>
            <p className="section-lead">
              Après une journée de chantier, vous ne devriez pas passer votre soirée à refaire des devis, chercher les infos client ou relancer à la main.
            </p>
          </div>
        </section>

        <section id="solution" className="section-pad" style={{ background: C.bg }}>
          <div className="landing-container">
            <SectionNumber n={2} label="LA SOLUTION"/>
            <h2 className="section-h2">InstantDevis simplifie tout le parcours</h2>
            <div className="cards" style={{ marginTop: 24 }}>
              {[
                ['Créez un devis rapidement', 'Lignes claires, totaux calculés, workflow mobile-first.'],
                ['Envoyez-le par email', 'Lien sécurisé envoyé au client depuis le même écran.'],
                ['Faites-le signer en ligne', 'Acceptation côté client avec preuve d’acceptation.'],
                ['Suivez vos devis envoyés', 'Vue simple des statuts brouillon, envoyé, signé, payé.'],
              ].map((c) => (
                <div key={c[0]} style={{ background: C.bgElevated, border: `1.5px solid ${C.border}`, borderRadius: 8, padding: '20px 18px', boxShadow: '0 8px 24px rgba(11,61,92,0.08)' }}>
                  <div style={{ fontSize: 17, fontWeight: 800, marginBottom: 8, color: C.ink }}>{c[0]}</div>
                  <div style={{ fontSize: 14, color: C.inkMuted, lineHeight: 1.5 }}>{c[1]}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section id="comment-ca-marche" className="section-pad" style={{ background: C.ink, color: '#F3F5F7' }}>
          <div className="landing-container">
            <SectionNumber n={3} label="COMMENT ÇA MARCHE"/>
            <h2 className="section-h2">Comment ça marche ?</h2>
            <div className="steps" style={{ marginTop: 24 }}>
              {[
                'Vous créez le devis depuis votre téléphone',
                'Le client reçoit un lien sécurisé',
                'Il consulte et accepte le devis',
                'Vous gardez une preuve d’acceptation horodatée',
              ].map((s, i) => (
                <div key={s} style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 8, padding: 16 }}>
                  <div className="mono" style={{ width: 26, height: 26, borderRadius: '50%', background: C.safety, color: '#0D1520', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 800, marginBottom: 9 }}>{i + 1}</div>
                  <div style={{ fontSize: 14, lineHeight: 1.45 }}>{s}</div>
                </div>
              ))}
            </div>
            <div className="mono" style={{ marginTop: 18, fontSize: 11, color: '#9CA8B5', letterSpacing: 0.4 }}>
              RÉFÉRENCE D’INTÉGRITÉ · HORODATAGE · DEVIS VERROUILLÉ
            </div>
          </div>
        </section>

        <section className="section-pad" style={{ background: C.bg }}>
          <div className="landing-container">
            <SectionNumber n={4} label="BÉNÉFICES"/>
            <div className="benefits" style={{ marginTop: 4 }}>
              {['Moins d’administratif', 'Devis plus rapides', 'Signature client en ligne', 'Meilleur suivi', 'Soirées libérées'].map((b) => (
                <div key={b} style={{ background: C.bgElevated, border: `1.5px solid ${C.border}`, borderRadius: 8, padding: 16, display: 'flex', alignItems: 'center', gap: 8, fontWeight: 700, color: C.ink }}>
                  <span style={{ color: C.success }}><I.Check size={16}/></span>
                  <span style={{ fontSize: 14 }}>{b}</span>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section className="section-pad" style={{ background: C.bgSunken }}>
          <div className="landing-container" style={{ textAlign: 'center' }}>
            <SectionNumber n={5} label="ON Y VA"/>
            <h2 className="final-cta-h2">
              Fini les devis qui traînent.
            </h2>
            <p className="section-lead" style={{ margin: '16px auto 0', fontSize: 17 }}>
              Créez votre premier devis dès maintenant et testez InstantDevis sur mobile.
            </p>
            <div style={{ marginTop: 26, display: 'inline-flex' }}>
              <TactileButton variant="safety" icon={<I.Bolt size={20}/>} onClick={goApp}>Lancer InstantDevis</TactileButton>
            </div>
          </div>
        </section>

        <footer style={{ background: C.ink, color: '#9CA8B5', padding: '40px 24px calc(36px + env(safe-area-inset-bottom, 0px) + 72px)' }}>
          <div className="landing-container">
            <div style={{ display: 'flex', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
              <div>
                <Logo />
                <p style={{ margin: '10px 0 0', fontSize: 13, lineHeight: 1.5 }}>Vos devis en 2 minutes. Vos soirées pour vous.</p>
              </div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: 0.8, alignSelf: 'flex-end' }}>
                © 2026 INSTANTDEVIS
              </div>
            </div>
          </div>
        </footer>
      </div>
    );
  }

  window.LandingPage = LandingPage;
})();