{% extends 'demo/_base.html.twig' %}

{% block title %}NUM-ECARD | Commerce & Retail — Hub de Communication Professionnel{% endblock %}

{% block meta_description %}Commerçants indépendants, franchisés, gérants de boutiques : NUM-ECARD digitalise votre relation client. Promotions, horaires, fidélisation. Paiement unique dès 179€.{% endblock %}

{% block theme_css %}
*{margin:0;padding:0;box-sizing:border-box}
        html{scroll-behavior:smooth;overflow-x:hidden}
        body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif;background:#fff;color:#1d1d1f;line-height:1.47059;font-weight:400;letter-spacing:-.022em;overflow-x:hidden}
        .navbar{position:sticky;top:0;left:0;right:0;background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08);z-index:9999;height:44px}
        .navbar-container{max-width:1000px;margin:0 auto;padding:0 22px;display:flex;justify-content:space-between;align-items:center;height:100%}
        .navbar-logo{font-size:17px;font-weight:600;color:#1d1d1f;text-decoration:none;letter-spacing:-.02em}
        .navbar-logo span{color:#0071e3}
        .navbar-back{color:#0071e3;text-decoration:none;font-size:12px}
        .navbar-back:hover{opacity:.7}
        .navbar-cta{background:#0071e3;color:#fff!important;padding:4px 14px;border-radius:980px;font-size:12px;font-weight:500;text-decoration:none}

        /* BANNER — violet profond + or */
        .sector-banner{background:linear-gradient(135deg,#1a0933 0%,#0d0419 60%,#1f0a3d 100%);padding:60px 22px 50px;text-align:center;position:relative;overflow:hidden}
        .sector-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 25% 50%,rgba(175,82,222,.2) 0%,transparent 55%),radial-gradient(ellipse at 75% 40%,rgba(255,196,0,.1) 0%,transparent 50%)}
        .sector-badge{display:inline-block;background:rgba(175,82,222,.15);border:1px solid rgba(175,82,222,.35);color:#d490ff;padding:4px 14px;border-radius:20px;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:20px;position:relative}
        .sector-banner h1{font-size:clamp(28px,5vw,48px);font-weight:700;color:#fff;letter-spacing:-.03em;line-height:1.1;margin-bottom:16px;position:relative}
        .sector-banner h1 span{color:#c77dff}
        .sector-banner p{font-size:17px;color:rgba(255,255,255,.7);max-width:580px;margin:0 auto 30px;position:relative}
        .sector-banner-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative}
        .btn-white{background:#fff;color:#1d1d1f;padding:12px 24px;border-radius:980px;font-size:15px;font-weight:500;text-decoration:none;transition:all .3s}
        .btn-white:hover{transform:translateY(-1px)}
        .btn-outline-white{background:transparent;color:#fff;padding:12px 24px;border-radius:980px;font-size:15px;font-weight:500;border:1.5px solid rgba(255,255,255,.4);text-decoration:none}

        .section{padding:80px 22px}
        .section-inner{max-width:1000px;margin:0 auto}
        .section-label{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#9b36d0;margin-bottom:12px}
        .section-title{font-size:clamp(28px,4vw,40px);font-weight:700;letter-spacing:-.03em;color:#1d1d1f;margin-bottom:16px;line-height:1.1}
        .section-subtitle{font-size:17px;color:#6e6e73;max-width:580px;line-height:1.6;margin-bottom:48px}
        .section-alt{background:#f5f5f7}

        .pain-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
        .pain-card{background:#fff;border-radius:16px;padding:28px;border:1px solid rgba(0,0,0,.06);transition:box-shadow .3s,transform .3s}
        .pain-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-2px)}
        .pain-card.solved{border-left:3px solid #af52de}
        .pain-card.solved h3{color:#9b36d0}
        .pain-icon{font-size:28px;margin-bottom:14px}
        .pain-card h3{font-size:17px;font-weight:600;margin-bottom:8px}
        .pain-card p{font-size:14px;color:#6e6e73;line-height:1.6}

        .usecase-list{display:flex;flex-direction:column;gap:64px}
        .usecase-item{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
        .usecase-item.reverse{direction:rtl}
        .usecase-item.reverse>*{direction:ltr}
        .usecase-text h3{font-size:22px;font-weight:600;color:#1d1d1f;margin-bottom:10px;letter-spacing:-.02em}
        .usecase-text p{font-size:15px;color:#6e6e73;line-height:1.7;margin-bottom:14px}
        .usecase-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
        .tag{background:rgba(175,82,222,.1);color:#9b36d0;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500}
        .usecase-visual{background:linear-gradient(135deg,#f3e8ff,#e9d5ff);border-radius:20px;padding:32px;min-height:280px;display:flex;flex-direction:column;justify-content:center}

        .mock-card{border-radius:16px;padding:20px;color:white;box-shadow:0 20px 40px rgba(0,0,0,.25);max-width:280px;margin:0 auto;font-size:13px}
        .mc-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
        .mc-logo{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:white;flex-shrink:0}
        .mc-company{font-weight:700;font-size:14px}
        .mc-tagline{font-size:10px;opacity:.7}
        .mc-name{font-size:16px;font-weight:700;margin-bottom:2px}
        .mc-role{font-size:11px;opacity:.7;margin-bottom:12px}
        .mc-btn{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border-radius:8px;padding:8px 10px;margin-bottom:6px;font-size:11px}
        .mc-btn-icon{width:20px;height:20px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0}
        .mc-actu{border-radius:8px;padding:8px;margin-top:8px}
        .mc-actu-title{font-size:10px;font-weight:600;margin-bottom:4px}
        .mc-actu-text{font-size:10px;opacity:.8;line-height:1.4}

        .roi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
        .roi-card{text-align:center;padding:32px 20px;background:#fff;border-radius:16px;border:1px solid rgba(0,0,0,.06)}
        .roi-number{font-size:42px;font-weight:700;color:#af52de;letter-spacing:-.03em;line-height:1;margin-bottom:8px}
        .roi-label{font-size:14px;color:#6e6e73;line-height:1.4}

        .pricing-highlight{background:linear-gradient(135deg,#af52de 0%,#7b2d9e 100%);border-radius:20px;padding:48px;text-align:center;color:white}
        .pricing-highlight h3{font-size:28px;font-weight:700;margin-bottom:8px;letter-spacing:-.02em}
        .pricing-highlight p{opacity:.85;font-size:15px;margin-bottom:24px}
        .price-big{font-size:56px;font-weight:700;letter-spacing:-.04em;line-height:1;margin-bottom:4px}
        .price-note{font-size:13px;opacity:.65;margin-bottom:32px}
        .pricing-features{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:32px}
        .pricing-feature{background:rgba(255,255,255,.15);padding:6px 16px;border-radius:20px;font-size:13px}
        .btn-pricing{display:inline-block;background:#fff;color:#7b2d9e;padding:14px 36px;border-radius:980px;font-size:16px;font-weight:600;text-decoration:none;transition:all .3s}
        .btn-pricing:hover{transform:translateY(-2px)}

        .feature-list{list-style:none}
        .feature-list li{padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:15px;display:flex;align-items:flex-start;gap:10px}
        .feature-list li:last-child{border-bottom:none}
        .check{color:#af52de;font-size:16px;flex-shrink:0;margin-top:1px}

        .comparison-table{width:100%;border-collapse:collapse;font-size:14px}
        .comparison-table th{padding:12px 16px;text-align:left;font-weight:600;color:#6e6e73;border-bottom:2px solid rgba(0,0,0,.08);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
        .comparison-table td{padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.05)}
        .comparison-table tr:last-child td{border-bottom:none}
        .col-num{color:#9b36d0;font-weight:600}
        .yes{color:#34c759;font-weight:600}
        .no{color:#ff3b30}
        .comparison-table tr:hover td{background:#fafafa}

        .testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
        .testimonial-card{background:#fff;border-radius:16px;padding:28px;border:1px solid rgba(0,0,0,.06)}
        .testimonial-stars{color:#f5a623;font-size:14px;margin-bottom:12px}
        .testimonial-text{font-size:15px;color:#1d1d1f;line-height:1.7;margin-bottom:16px;font-style:italic}
        .testimonial-author{display:flex;align-items:center;gap:12px}
        .author-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:14px;flex-shrink:0;background:linear-gradient(135deg,#af52de,#7b2d9e)}
        .author-name{font-size:14px;font-weight:600}
        .author-role{font-size:12px;color:#6e6e73}

        .profil-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:48px}
        .profil-pill{text-align:center;padding:20px 16px;background:#fff;border-radius:14px;border:1px solid rgba(0,0,0,.06);font-size:14px;font-weight:500;transition:all .3s}
        .profil-pill:hover{box-shadow:0 4px 16px rgba(0,0,0,.06);transform:translateY(-2px)}
        .profil-pill .emoji{font-size:24px;margin-bottom:8px;display:block}

        .usecase-pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:48px}
        .pillar{background:#fff;border-radius:14px;padding:24px;border:1px solid rgba(0,0,0,.06);border-top:3px solid #af52de}
        .pillar h4{font-size:15px;font-weight:600;margin-bottom:8px;color:#1d1d1f}
        .pillar p{font-size:13px;color:#6e6e73;line-height:1.5}
        .pillar .p-icon{font-size:24px;margin-bottom:10px}

        .cta-band{background:#1d1d1f;padding:60px 22px;text-align:center}
        .cta-band h2{font-size:32px;font-weight:700;color:#fff;margin-bottom:12px;letter-spacing:-.02em}
        .cta-band p{color:#86868b;font-size:17px;margin-bottom:28px}
        .btn-purple{display:inline-block;background:#af52de;color:#fff;padding:14px 32px;border-radius:980px;font-size:16px;font-weight:500;text-decoration:none;transition:background .3s;margin:0 8px 8px}
        .btn-purple:hover{background:#9b36d0}
        .btn-ghost{display:inline-block;background:transparent;color:#fff;padding:14px 32px;border-radius:980px;font-size:16px;font-weight:500;border:1.5px solid rgba(255,255,255,.25);text-decoration:none;margin:0 8px 8px}

        .footer{background:#f5f5f7;border-top:1px solid rgba(0,0,0,.08);padding:40px 22px;text-align:center}
        .footer-links{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
        .footer-links a{color:#6e6e73;font-size:12px;text-decoration:none}
        .footer-links a:hover{color:#1d1d1f}
        .footer-copy{color:#86868b;font-size:12px}

        @media(max-width:768px){.usecase-item{grid-template-columns:1fr}.usecase-item.reverse{direction:ltr}.pricing-highlight{padding:32px 24px}.roi-grid{grid-template-columns:repeat(2,1fr)}}

        /* ── Slogans officiels — hero banner ── */
        .sector-slogans{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;margin:20px 0 8px;position:relative;z-index:1}
        .slogan-main{font-size:15px;font-weight:700;color:#fff;letter-spacing:.01em;text-shadow:0 1px 3px rgba(0,0,0,.3)}
        .slogan-sep{color:rgba(255,255,255,.35);font-size:18px;line-height:1}
        .slogan-secondary{font-size:14px;color:rgba(255,255,255,.82);font-style:italic;letter-spacing:.01em}
{% endblock %}

{% block content %}
<section class="sector-banner">
    <span class="sector-badge">🛍️ Commerce & Retail</span>
    <h1>La vitrine digitale des<br><span>commerçants indépendants</span></h1>
    <p>Boutiques, franchise, artisans-commerçants, concept stores — NUM-ECARD favorise la fidélisation de vos clients de passage.</p>
        <div class="sector-slogans">
            <span class="slogan-main">✦ Le Pro qu'on n'oublie pas</span>
            <span class="slogan-sep">·</span>
            <span class="slogan-secondary">Tout ce que vous êtes en 1 clic</span>
        </div>
    <div class="sector-banner-actions">
        <a href="/#modele-starter" class="btn-white">Voir les offres à partir de 179€</a>
        <a href="#demo-commerce" class="btn-outline-white">Voir une démo commerce</a>
    </div>
</section>

<!-- PROFILS -->
<section class="section section-alt">
    <div class="section-inner">
        <p class="section-label">Pour qui ?</p>
        <h2 class="section-title">De la boutique indépendante au réseau franchise</h2>
        <p class="section-subtitle">Chaque commerçant a ses enjeux spécifiques — NUM-ECARD y répond.</p>
        <div class="profil-grid">
            <div class="profil-pill"><span class="emoji">👗</span>Prêt-à-porter</div>
            <div class="profil-pill"><span class="emoji">💍</span>Bijouterie</div>
            <div class="profil-pill"><span class="emoji">🥐</span>Boulangerie</div>
            <div class="profil-pill"><span class="emoji">💐</span>Fleuriste</div>
            <div class="profil-pill"><span class="emoji">📚</span>Librairie</div>
            <div class="profil-pill"><span class="emoji">🔑</span>Agence franchise</div>
            <div class="profil-pill"><span class="emoji">🍷</span>Cave à vins</div>
            <div class="profil-pill"><span class="emoji">🎨</span>Galerie d'art</div>
            <div class="profil-pill"><span class="emoji">📊</span>Coach commercial B2B</div>
            <div class="profil-pill"><span class="emoji">💼</span>Expert Social Selling</div>
        </div>

        <!-- 4 PILIERS -->
        <div class="usecase-pillars">
            <div class="pillar">
                <div class="p-icon">📢</div>
                <h4>Informer en temps réel</h4>
                <p>Horaires exceptionnels, soldes, opérations spéciales — vos clients reçoivent une notification push dès que vous publiez.</p>
            </div>
            <div class="pillar">
                <div class="p-icon">💬</div>
                <h4>Fidéliser sans app</h4>
                <p>Vos clients installent votre carte comme une PWA sur leur téléphone — une présence permanente sans développer une app coûteuse.</p>
            </div>
            <div class="pillar">
                <div class="p-icon">⭐</div>
                <h4>Capitaliser les avis</h4>
                <p>Chaque client satisfait devient ambassadeur grâce au CRM Light. Les recommandations certifiées s'accumulent sur votre carte.</p>
            </div>
            <div class="pillar">
                <div class="p-icon">🔗</div>
                <h4>Centraliser vos canaux</h4>
                <p>Instagram, boutique en ligne, Google Maps, menu du jour, catalogue — tout depuis une seule carte scannée en caisse.</p>
            </div>
        </div>
    </div>
</section>

<!-- PAIN POINTS -->
<section class="section">
    <div class="section-inner">
        <p class="section-label">Les enjeux</p>
        <h2 class="section-title">Les défis des commerçants en 2026</h2>
        <p class="section-subtitle">Face au e-commerce et aux grandes surfaces, votre force c'est le lien humain — NUM-ECARD le digitalise.</p>
        <div class="pain-grid">
            <div class="pain-card solved">
                <div class="pain-icon">📅</div>
                <h3>Communiquer les horaires atypiques</h3>
                <p>Jours fériés, fermeture annuelle, horaires étendus pour les fêtes — publiez via Mon Actu, vos clients reçoivent une notification push. Fini les déplacements pour porte close.</p>
            </div>
            <div class="pain-card solved">
                <div class="pain-icon">🏷️</div>
                <h3>Annoncer promotions et nouveautés</h3>
                <p>Nouvelle collection, déstockage, vente privée — votre Mon Actu devient votre canal de communication directe. Zéro algorithme, 100% de vos abonnés notifiés.</p>
            </div>
            <div class="pain-card solved">
                <div class="pain-icon">📍</div>
                <h3>Être trouvé et mémorisé</h3>
                <p>QR code sur vitrines, tickets de caisse, emballages, sacs boutique — chaque point de contact devient une opportunité de rester dans le téléphone du client.</p>
            </div>
            <div class="pain-card solved">
                <div class="pain-icon">🌐</div>
                <h3>Centraliser sa présence digitale</h3>
                <p>Instagram, boutique en ligne, Google Business, WhatsApp — votre carte regroupe tous vos canaux. Un seul QR code à communiquer.</p>
            </div>
            <div class="pain-card solved">
                <div class="pain-icon">🏪</div>
                <h3>Uniformiser un réseau franchise</h3>
                <p>Chaque point de vente dispose de sa carte personnalisée sous l'identité de l'enseigne. Le Multi-Cartes uniformise la communication réseau à coût fixe.</p>
            </div>
            <div class="pain-card solved">
                <div class="pain-icon">💳</div>
                <h3>Fidéliser sans programme complexe</h3>
                <p>Le CRM Light transforme vos clients en prescripteurs actifs. Leurs recommandations enrichissent votre carte et rassurent les nouveaux prospects.</p>
            </div>
        </div>
    </div>
</section>

<!-- USE CASES -->
<section class="section section-alt" id="demo-commerce">
    <div class="section-inner">
        <p class="section-label">Cas d'usage</p>
        <h2 class="section-title">Votre carte commerce en action</h2>
        <div class="usecase-list">

            <!-- BOUTIQUE MODE -->
            <div class="usecase-item">
                <div class="usecase-text">
                    <h3>Boutique de prêt-à-porter indépendante</h3>
                    <p>Léa dirige une boutique mode à Toulouse. Son QR code est sur chaque sac et ticket de caisse. Ses clientes reçoivent une notification push à chaque nouvelle collection ou vente privée — son Instagram professionnel sans l'algorithme.</p>
                    <div class="usecase-tags">
                        <span class="tag">Modèle Premium — 299€</span>
                        <span class="tag">Mon Actu — nouvelles collections</span>
                        <span class="tag">Push Notifications ✓</span>
                    </div>
                    <ul class="feature-list">
                        <li><span class="check">✓</span>QR code sur sacs, tickets de caisse, vitrine</li>
                        <li><span class="check">✓</span>Notification push à chaque nouvelle collection</li>
                        <li><span class="check">✓</span>Lien direct Instagram + boutique en ligne</li>
                        <li><span class="check">✓</span>Horaires mis à jour en temps réel</li>
                    </ul>
                </div>
                <div class="usecase-visual">
                    <div class="mock-card" style="background:linear-gradient(135deg,#1a0933,#0d0419)">
                        <div class="mc-header">
                            <div class="mc-logo" style="background:#af52de">LB</div>
                            <div>
                                <div class="mc-company">LÉONIE BOUTIQUE</div>
                                <div class="mc-tagline">Mode Féminine · Collections Exclusives</div>
                            </div>
                        </div>
                        <div class="mc-name">Léa MARTIN</div>
                        <div class="mc-role">Gérante · 12 rue des Arts, Toulouse</div>
                        <div class="mc-btn"><div class="mc-btn-icon" style="background:#af52de">📸</div>Notre Instagram</div>
                        <div class="mc-btn"><div class="mc-btn-icon" style="background:#af52de">🛍️</div>Boutique en ligne</div>
                        <div class="mc-btn"><div class="mc-btn-icon" style="background:#af52de">📍</div>Horaires & Accès</div>
                        <div class="mc-actu" style="background:rgba(175,82,222,.12);border:1px solid rgba(175,82,222,.25)">
                            <div class="mc-actu-title" style="color:#d490ff">🔔 VENTE PRIVÉE</div>
                            <div class="mc-actu-text">−30% sur toute la collection Printemps<br>Vendredi 18h → Dimanche 20h</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- RÉSEAU FRANCHISE -->
            <div class="usecase-item reverse">
                <div class="usecase-text">
                    <h3>Réseau de franchise régional</h3>
                    <p>Le réseau Maison Dorée compte 12 points de vente en Occitanie. Chaque gérant dispose de sa carte personnalisée sous l'identité de l'enseigne. La tête de réseau pilote les publications Mon Actu et coordonne les opérations promotionnelles.</p>
                    <div class="usecase-tags">
                        <span class="tag">Modèle Multi-Cartes — 999€</span>
                        <span class="tag">12 points de vente</span>
                        <span class="tag">Identité réseau unifiée</span>
                    </div>
                    <ul class="feature-list">
                        <li><span class="check">✓</span>Une carte par point de vente — identité commune</li>
                        <li><span class="check">✓</span>Opérations promo synchronisées</li>
                        <li><span class="check">✓</span>Géolocalisation par boutique</li>
                        <li><span class="check">✓</span>Reporting centralisé pour la tête de réseau</li>
                    </ul>
                </div>
                <div class="usecase-visual" style="background:linear-gradient(135deg,#fff8e6,#fef3c7)">
                    <div class="mock-card" style="background:linear-gradient(135deg,#2a1a00,#140d00)">
                        <div class="mc-header">
                            <div class="mc-logo" style="background:#d4a017">MD</div>
                            <div>
                                <div class="mc-company">MAISON DORÉE</div>
                                <div class="mc-tagline">Art de vivre &amp; Décoration</div>
                            </div>
                        </div>
                        <div class="mc-name">Sandrine DUPONT</div>
                        <div class="mc-role">Gérante — Boutique Toulouse Capitole</div>
                        <div class="mc-btn"><div class="mc-btn-icon" style="background:#d4a017">🗺️</div>Trouver une boutique</div>
                        <div class="mc-btn"><div class="mc-btn-icon" style="background:#d4a017">🎁</div>Programme fidélité</div>
                        <div class="mc-actu" style="background:rgba(212,160,23,.12);border:1px solid rgba(212,160,23,.25)">
                            <div class="mc-actu-title" style="color:#f5c842">🏷️ OPÉRATION RÉSEAU</div>
                            <div class="mc-actu-text">Journées Maison Dorée — 12 boutiques<br>15 &amp; 16 mars · −25% sur tout</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- RESTAURANT / FOOD -->
            <div class="usecase-item">
                <div class="usecase-text">
                    <h3>Restaurant & commerce alimentaire</h3>
                    <p>Le Comptoir du Sud met sa carte NUM-ECARD sur chaque table et addition. Les clients s'abonnent aux notifications push : plat du jour, menu de saison, événements. 340 abonnés qui reçoivent le menu chaque matin.</p>
                    <div class="usecase-tags">
                        <span class="tag">Modèle Force de Vente — 399€</span>
                        <span class="tag">Menus quotidiens via Mon Actu</span>
                        <span class="tag">Réservation directe</span>
                    </div>
                    <ul class="feature-list">
                        <li><span class="check">✓</span>QR code sur tables, additions, cartes menu</li>
                        <li><span class="check">✓</span>Publication du plat du jour avec notification push</li>
                        <li><span class="check">✓</span>Lien réservation (The Fork, Zenchef…)</li>
                        <li><span class="check">✓</span>Avis clients certifiés — CRM Light</li>
                    </ul>
                </div>
                <div class="usecase-visual" style="background:linear-gradient(135deg,#fef3f0,#fde8e0)">
                    <div class="mock-card" style="background:linear-gradient(135deg,#2a0a00,#1a0500)">
                        <div class="mc-header">
                            <div class="mc-logo" style="background:#ff3b30">CS</div>
                            <div>
                                <div class="mc-company">LE COMPTOIR DU SUD</div>
                                <div class="mc-tagline">Cuisine du Marché · Toulouse</div>
                            </div>
                        </div>
                        <div class="mc-name">Antoine GIBERT</div>
                        <div class="mc-role">Chef & Propriétaire · Depuis 2018</div>
                        <div class="mc-btn"><div class="mc-btn-icon" style="background:#ff3b30">📅</div>Réserver une table</div>
                        <div class="mc-btn"><div class="mc-btn-icon" style="background:#ff3b30">⭐</div>Avis clients (127)</div>
                        <div class="mc-actu" style="background:rgba(255,59,48,.12);border:1px solid rgba(255,59,48,.25)">
                            <div class="mc-actu-title" style="color:#ff7b73">🍽️ MENU DU JOUR</div>
                            <div class="mc-actu-text">Magret de canard aux cèpes<br>Dessert inclus · 18€ · Midi seulement</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

<!-- ROI -->
<section class="section">
    <div class="section-inner">
        <p class="section-label">Impact concret</p>
        <h2 class="section-title">Ce que ça change pour votre commerce</h2>
        <p class="section-subtitle">Objectifs cibles — mesurés dans le cadre de notre <strong>programme ambassadeurs lancement</strong> Commerce & Retail. Les premiers retours terrain confirmeront ces projections.</p>
        <div class="roi-grid">
            <div class="roi-card"><div class="roi-number">340</div><div class="roi-label">abonnés push notifications en moyenne pour les commerces actifs</div></div>
            <div class="roi-card"><div class="roi-number">0€</div><div class="roi-label">de frais annuels — une seule fois, à vie, toutes les mises à jour incluses</div></div>
            <div class="roi-card"><div class="roi-number">+55%</div><div class="roi-label">de retours clients suite aux notifications push vs. email marketing</div></div>
            <div class="roi-card"><div class="roi-number">54</div><div class="roi-label">designs pour trouver le style qui correspond à votre univers</div></div>
        </div>
    </div>
</section>

<!-- COMPARISON -->
<section class="section section-alt">
    <div class="section-inner">
        <p class="section-label">Comparatif</p>
        <h2 class="section-title">NUM-ECARD vs. les outils habituels des commerçants</h2>
        <div style="overflow-x:auto">
        <table class="comparison-table">
            <thead><tr><th>Besoin</th><th>Instagram / Réseaux</th><th>Newsletter email</th><th class="col-num">NUM-ECARD</th></tr></thead>
            <tbody>
                <tr><td>Notification push instantanée</td><td class="no">✗ (algorithme)</td><td class="no">✗ (email limité)</td><td class="col-num yes">✓ 100% de reach</td></tr>
                <tr><td>QR code caisse / emballage</td><td class="no">✗</td><td class="no">✗</td><td class="col-num yes">✓ Tous modèles</td></tr>
                <tr><td>Carte installable sur téléphone (PWA)</td><td class="no">✗</td><td class="no">✗</td><td class="col-num yes">✓ Sans app store</td></tr>
                <tr><td>Avis clients certifiés</td><td class="no">✓ Partiel</td><td class="no">✗</td><td class="col-num yes">✓ CRM Light</td></tr>
                <tr><td>Réseau franchise unifié</td><td class="no">✗ Complexe</td><td class="no">✗</td><td class="col-num yes">✓ Multi-Cartes</td></tr>
                <tr><td>Coût annuel</td><td class="yes">0€ (mais temps)</td><td class="no">~120-600€/an</td><td class="col-num yes">0€/an — paiement unique</td></tr>
            </tbody>
        </table>
        </div>
    </div>
</section>

<!-- PRICING -->
<section class="section section-alt">
    <div class="section-inner">
        <p class="section-label">Offre recommandée</p>
        <h2 class="section-title">Pour les commerçants qui veulent fidéliser</h2>
        <div class="pricing-highlight">
            <h3>Le modèle Premium — idéal pour le commerce</h3>
            <p>Notifications push, Mon Actu, installation PWA — les outils de fidélisation des grandes enseignes, au prix d'un commerçant</p>
            <div class="price-big">299€</div>
            <div class="price-note">Paiement unique · Pas d'abonnement · Mises à jour à vie</div>
            <div class="pricing-features">
                <span class="pricing-feature">✓ Mon Actu (promos, nouvelles)</span>
                <span class="pricing-feature">✓ Push Notifications illimitées</span>
                <span class="pricing-feature">✓ QR code caisse / emballage</span>
                <span class="pricing-feature">✓ Carte installable (PWA)</span>
                <span class="pricing-feature">✓ Liens réseaux sociaux</span>
                <span class="pricing-feature">✓ 54 designs disponibles</span>
            </div>
            <a href="/#pricing" class="btn-pricing">Voir tous les modèles →</a>
        </div>
    </div>
</section>

<section class="cta-band">
    <h2>Transformez vos clients de passage<br>en clients fidèles connectés</h2>
    <p>Rejoignez les commerçants indépendants qui font confiance à NUM-ECARD</p>
    <a href="/#contact" class="btn-purple">Demande d'infos</a>
    <a href="/#modele-pro" class="btn-ghost">Voir le modèle Premium</a>
</section>



{% endblock %}