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

{% block title %}NUM-ECARD | Secteur Conseil — Hub de Communication Professionnel{% endblock %}

{% block meta_description %}Consultants, avocats, experts-comptables, coachs : NUM-ECARD digitalise votre communication et renforce votre positionnement premium. 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: #ffffff;
            color: #1d1d1f;
            line-height: 1.47059;
            font-weight: 400;
            letter-spacing: -0.022em;
            overflow-x: hidden;
        }

        /* NAVBAR */
        .navbar {
            position: sticky; top: 0; left: 0; right: 0;
            background: rgba(255,255,255,0.85);
            backdrop-filter: saturate(180%) blur(20px);
            border-bottom: 1px solid rgba(0,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: -0.02em; }
        .navbar-logo span { color: #0071e3; }
        .navbar-back { color: #0071e3; text-decoration: none; font-size: 12px; }
        .navbar-back:hover { opacity: 0.7; }
        .navbar-cta { background: #0071e3; color: #fff !important; padding: 4px 14px; border-radius: 980px; font-size: 12px; font-weight: 500; text-decoration: none; }

        /* SECTOR BANNER — teinte conseil (vert émeraude / ardoise) */
        .sector-banner {
            background: linear-gradient(135deg, #0d2b22 0%, #071a15 60%, #0d2b22 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 30% 50%, rgba(52,199,89,0.12) 0%, transparent 60%),
                        radial-gradient(ellipse at 70% 50%, rgba(0,180,120,0.1) 0%, transparent 60%);
        }
        .sector-badge {
            display: inline-block;
            background: rgba(52,199,89,0.15);
            border: 1px solid rgba(52,199,89,0.3);
            color: #7de0a0;
            padding: 4px 14px;
            border-radius: 20px;
            font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
            margin-bottom: 20px; position: relative;
        }
        .sector-banner h1 { font-size: clamp(28px, 5vw, 48px); font-weight: 700; color: #ffffff; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 16px; position: relative; }
        .sector-banner h1 span { color: #7de0a0; }
        .sector-banner p { font-size: 17px; color: rgba(255,255,255,0.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 0.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,0.4); text-decoration: none; transition: all 0.3s; }
        .btn-outline-white:hover { border-color: rgba(255,255,255,0.8); }

        /* GENERIC */
        .section { padding: 80px 22px; }
        .section-inner { max-width: 1000px; margin: 0 auto; }
        .section-label { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #1a7a45; margin-bottom: 12px; }
        .section-title { font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.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 */
        .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,0.06); transition: box-shadow 0.3s, transform 0.3s; }
        .pain-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }
        .pain-card.solved { border-left: 3px solid #1a7a45; }
        .pain-card.solved h3 { color: #1a7a45; }
        .pain-icon { font-size: 28px; margin-bottom: 14px; }
        .pain-card h3 { font-size: 17px; font-weight: 600; color: #1d1d1f; margin-bottom: 8px; }
        .pain-card p { font-size: 14px; color: #6e6e73; line-height: 1.6; }

        /* USE CASES */
        .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: -0.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(26,122,69,0.08); color: #1a7a45; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; }
        .usecase-visual { background: linear-gradient(135deg, #eafaf2 0%, #d5f5e3 100%); border-radius: 20px; padding: 32px; min-height: 280px; display: flex; flex-direction: column; justify-content: center; }

        /* MOCK CARD */
        .mock-card { border-radius: 16px; padding: 20px; color: white; box-shadow: 0 20px 40px rgba(0,0,0,0.2); max-width: 280px; margin: 0 auto; font-size: 13px; background: linear-gradient(135deg, #0d2b22 0%, #071a15 100%); }
        .mc-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
        .mc-logo { width: 40px; height: 40px; background: #34c759; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: white; }
        .mc-company { font-weight: 700; font-size: 14px; }
        .mc-tagline { font-size: 10px; opacity: 0.7; }
        .mc-name { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
        .mc-role { font-size: 11px; opacity: 0.7; margin-bottom: 12px; }
        .mc-btn { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.1); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; font-size: 11px; }
        .mc-btn-icon { width: 20px; height: 20px; background: #34c759; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 10px; }
        .mc-actu { background: rgba(52,199,89,0.12); border: 1px solid rgba(52,199,89,0.25); border-radius: 8px; padding: 8px; margin-top: 8px; }
        .mc-actu-title { font-size: 10px; color: #7de0a0; font-weight: 600; margin-bottom: 4px; }
        .mc-actu-text { font-size: 10px; opacity: 0.8; line-height: 1.4; }

        /* ROI */
        .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,0.06); }
        .roi-number { font-size: 42px; font-weight: 700; color: #1a7a45; letter-spacing: -0.03em; line-height: 1; margin-bottom: 8px; }
        .roi-label { font-size: 14px; color: #6e6e73; line-height: 1.4; }

        /* PRICING */
        .pricing-highlight { background: linear-gradient(135deg, #1a7a45 0%, #0d5230 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: -0.02em; }
        .pricing-highlight p { opacity: 0.8; font-size: 15px; margin-bottom: 24px; }
        .price-big { font-size: 56px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin-bottom: 4px; }
        .price-note { font-size: 13px; opacity: 0.6; 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,0.12); padding: 6px 16px; border-radius: 20px; font-size: 13px; }
        .btn-pricing { display: inline-block; background: #fff; color: #1a7a45; padding: 14px 36px; border-radius: 980px; font-size: 16px; font-weight: 600; text-decoration: none; transition: all 0.3s; }
        .btn-pricing:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }

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

        /* COMPARISON */
        .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,0.08); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
        .comparison-table td { padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,0.05); color: #1d1d1f; }
        .comparison-table tr:last-child td { border-bottom: none; }
        .comparison-table .col-num { color: #1a7a45; font-weight: 600; }
        .yes { color: #34c759; font-weight: 600; }
        .no { color: #ff3b30; }
        .comparison-table tr:hover td { background: #f9f9f9; }

        /* CTA BAND */
        .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: -0.02em; }
        .cta-band p { color: #86868b; font-size: 17px; margin-bottom: 28px; }
        .btn-green { display: inline-block; background: #1a7a45; color: #fff; padding: 14px 32px; border-radius: 980px; font-size: 16px; font-weight: 500; text-decoration: none; transition: background 0.3s; margin: 0 8px 8px; }
        .btn-green:hover { background: #22964f; }
        .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,0.25); text-decoration: none; transition: all 0.3s; margin: 0 8px 8px; }
        .btn-ghost:hover { border-color: rgba(255,255,255,0.6); }

        /* TESTIMONIALS */
        .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,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%; background: linear-gradient(135deg, #0d2b22, #1a7a45); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 14px; flex-shrink: 0; }
        .author-name { font-size: 14px; font-weight: 600; color: #1d1d1f; }
        .author-role { font-size: 12px; color: #6e6e73; }

        /* FOOTER */
        .footer { background: #f5f5f7; border-top: 1px solid rgba(0,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; }

        /* CREDIBILITY */
        .credibility-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
        .credibility-card { background: #fff; border-radius: 16px; padding: 24px; border: 1px solid rgba(0,0,0,0.06); }
        .cred-icon { font-size: 28px; margin-bottom: 12px; }
        .credibility-card h4 { font-size: 15px; font-weight: 600; color: #1d1d1f; margin-bottom: 6px; }
        .credibility-card p { font-size: 13px; color: #6e6e73; line-height: 1.5; }

        /* PROFILS GRID */
        .profil-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 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,0.06);
            font-size: 14px; font-weight: 500; color: #1d1d1f;
            transition: all 0.3s;
        }
        .profil-pill:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); transform: translateY(-2px); }
        .profil-pill .emoji { font-size: 24px; margin-bottom: 8px; display: block; }

        @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 %}
<!-- SECTOR BANNER -->
<section class="sector-banner">
    <span class="sector-badge">💼 Secteur Conseil & Expertise</span>
    <h1>Le hub digital des<br><span>consultants & experts</span></h1>
    <p>Consultant, avocat, expert-comptable, coach, architecte, ingénieur — NUM-ECARD renforce votre positionnement premium et vous aide à générer des mandats qualifiés.</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-conseil" class="btn-outline-white">Voir une démo conseil</a>
    </div>
</section>

<!-- PROFILS -->
<section class="section section-alt">
    <div class="section-inner">
        <p class="section-label">Pour qui ?</p>
        <h2 class="section-title">Tous les experts qui vendent leur savoir-faire</h2>
        <p class="section-subtitle">NUM-ECARD est adapté à l'ensemble des professions du conseil et des services aux entreprises.</p>
        <div class="profil-grid">
            <div class="profil-pill"><span class="emoji">⚖️</span>Avocat</div>
            <div class="profil-pill"><span class="emoji">📊</span>Expert-comptable</div>
            <div class="profil-pill"><span class="emoji">🏗️</span>Architecte</div>
            <div class="profil-pill"><span class="emoji">💡</span>Consultant stratégie</div>
            <div class="profil-pill"><span class="emoji">🎯</span>Coach certifié</div>
            <div class="profil-pill"><span class="emoji">💻</span>Consultant IT / DSI</div>
            <div class="profil-pill"><span class="emoji">📈</span>Conseiller financier</div>
            <div class="profil-pill"><span class="emoji">🔧</span>Ingénieur conseil</div>
            <div class="profil-pill"><span class="emoji">📱</span>Expert Social Selling</div>
            <div class="profil-pill"><span class="emoji">🪪</span>Personal Branding</div>
            <div class="profil-pill"><span class="emoji">🤝</span>Animateur réseau d'affaires</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 experts et consultants</h2>
        <p class="section-subtitle">Dans l'économie du savoir, votre réputation digitale est votre premier actif. NUM-ECARD vous aide à la construire.</p>
        <div class="pain-grid">
            <div class="pain-card solved">
                <div class="pain-icon">🏆</div>
                <h3>Crédibilité & premium dès le premier contact</h3>
                <p>Une carte digitale avec vos certifications, références et témoignages clients donne immédiatement une impression haut de gamme, bien au-dessus d'une carte papier générique.</p>
            </div>
            <div class="pain-card solved">
                <div class="pain-icon">✍️</div>
                <h3>Capitaliser sur votre expertise editoriale</h3>
                <p><strong>Mon Actu</strong> vous permet de publier vos articles, études de cas, prises de parole et webinaires directement sur votre carte — vos abonnés (ayant accepté les notifications) reçoivent une alerte push à chaque publication.</p>
            </div>
            <div class="pain-card solved">
                <div class="pain-icon">🌐</div>
                <h3>Centraliser votre présence digitale</h3>
                <p>LinkedIn, site web, calendrier de prise de RDV, formulaire de contact — tout accessible en un seul QR code. Fini les aller-retours entre emails et sites.</p>
            </div>
            <div class="pain-card solved">
                <div class="pain-icon">⭐</div>
                <h3>Mettre en avant vos recommandations</h3>
                <p>Le module CRM Light (Force de Vente) recueille et affiche les témoignages de vos clients satisfaits, directement visibles sur votre carte — votre meilleure preuve sociale.</p>
            </div>
            <div class="pain-card solved">
                <div class="pain-icon">📱</div>
                <h3>Toujours joignable, quelle que soit la situation</h3>
                <p>Votre carte est une PWA installable. Vos contacts peuvent l'ajouter à leur écran d'accueil — vous êtes présent comme une vraie app, même hors connexion.</p>
            </div>
            <div class="pain-card solved">
                <div class="pain-icon">🤝</div>
                <h3>Réseau et prescripteurs</h3>
                <p>Un expert qui vous prescrit partage votre carte à ses propres clients. Votre QR code circule, votre présence se démultiplie — sans aucun effort supplémentaire.</p>
            </div>
        </div>
    </div>
</section>

<!-- CREDIBILITY -->
<section class="section section-alt">
    <div class="section-inner">
        <p class="section-label">Positionnement premium</p>
        <h2 class="section-title">NUM-ECARD valorise votre expertise</h2>
        <p class="section-subtitle">Chaque fonctionnalité a été pensée pour renforcer votre crédibilité et votre différenciation.</p>
        <div class="credibility-grid">
            <div class="credibility-card">
                <div class="cred-icon">🎓</div>
                <h4>Certifications & références</h4>
                <p>Affichez vos titres, diplômes et références clients. Votre profil complet accessible en un scan.</p>
            </div>
            <div class="credibility-card">
                <div class="cred-icon">📝</div>
                <h4>Thought leadership</h4>
                <p>Mon Actu transforme votre carte en mini-blog : publiez vos contenus et notifiez votre réseau instantanément.</p>
            </div>
            <div class="credibility-card">
                <div class="cred-icon">💬</div>
                <h4>Preuve sociale</h4>
                <p>Les recommandations de vos clients s'affichent sur votre carte — directement visibles par vos prospects.</p>
            </div>
            <div class="credibility-card">
                <div class="cred-icon">📅</div>
                <h4>Prise de RDV directe</h4>
                <p>Un bouton lié à votre Calendly ou autre outil de planning. Vos prospects prennent RDV en un tap.</p>
            </div>
        </div>
    </div>
</section>

<!-- USE CASES -->
<section class="section" id="demo-conseil">
    <div class="section-inner">
        <p class="section-label">Cas d'usage</p>
        <h2 class="section-title">Votre carte conseil en action</h2>
        <p class="section-subtitle">Trois profils types et leurs usages quotidiens avec NUM-ECARD.</p>

        <div class="usecase-list">

            <!-- CONSULTANT STRATÉGIE -->
            <div class="usecase-item">
                <div class="usecase-text">
                    <h3>Consultant en stratégie indépendant</h3>
                    <p>Nicolas est consultant stratégie et transformation digitale. Sa carte Force de Vente est son outil de développement commercial numéro un : elle présente son positionnement, ses références, ses articles LinkedIn et inclut le témoignage de ses clients les plus récents.</p>
                    <div class="usecase-tags">
                        <span class="tag">Modèle Force de Vente — 399€</span>
                        <span class="tag">Mon Actu (articles & insights)</span>
                        <span class="tag">CRM Light ✓</span>
                        <span class="tag">Push Notifications ✓</span>
                    </div>
                    <ul class="feature-list">
                        <li><span class="check">✓</span>Publication d'articles et études de cas avec notification push</li>
                        <li><span class="check">✓</span>Bouton "Réserver une session découverte"</li>
                        <li><span class="check">✓</span>Témoignages clients collectés & affichés automatiquement</li>
                        <li><span class="check">✓</span>Lien vers profil LinkedIn & publications</li>
                        <li><span class="check">✓</span>Analytics : qui lit vos contenus, quand, combien de fois</li>
                    </ul>
                </div>
                <div class="usecase-visual">
                    <div class="mock-card">
                        <div class="mc-header">
                            <div class="mc-logo">NC</div>
                            <div>
                                <div class="mc-company">NICOLAS CONSEIL</div>
                                <div class="mc-tagline">Stratégie & Transformation</div>
                            </div>
                        </div>
                        <div class="mc-name">Nicolas CHEVALIER</div>
                        <div class="mc-role">Consultant Senior — Ex McKinsey</div>
                        <div class="mc-btn"><div class="mc-btn-icon">📅</div>Session découverte</div>
                        <div class="mc-btn"><div class="mc-btn-icon">📖</div>Mes publications</div>
                        <div class="mc-btn"><div class="mc-btn-icon">⭐</div>Références clients</div>
                        <div class="mc-actu">
                            <div class="mc-actu-title">📝 NOUVEL ARTICLE</div>
                            <div class="mc-actu-text">IA & PME : comment structurer votre feuille de route digitale en 2026</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- AVOCAT -->
            <div class="usecase-item reverse">
                <div class="usecase-text">
                    <h3>Cabinet d'avocats</h3>
                    <p>Le cabinet DURAND & ASSOCIÉS équipe ses 5 avocats associés avec un pack Multi-Cartes. Chaque avocat dispose de sa fiche individuelle (spécialité, barreaux, langues) sous l'identité du cabinet. Les clients accèdent directement à la messagerie sécurisée et à l'espace client.</p>
                    <div class="usecase-tags">
                        <span class="tag">Modèle Multi-Cartes — 999€</span>
                        <span class="tag">5 avocats — identité cabinet</span>
                        <span class="tag">Spécialités par avocat</span>
                    </div>
                    <ul class="feature-list">
                        <li><span class="check">✓</span>Présentation des spécialités et domaines d'intervention</li>
                        <li><span class="check">✓</span>Liens vers l'espace client sécurisé</li>
                        <li><span class="check">✓</span>Mon Actu pour publications et actualités juridiques</li>
                        <li><span class="check">✓</span>Bouton de prise de RDV consultation initiale</li>
                    </ul>
                </div>
                <div class="usecase-visual" style="background: linear-gradient(135deg, #f0f4ff, #dde6ff);">
                    <div class="mock-card" style="background: linear-gradient(135deg, #1a2540, #0d1428);">
                        <div class="mc-header">
                            <div class="mc-logo" style="background:#4f7be8;">DA</div>
                            <div>
                                <div class="mc-company">DURAND & ASSOCIÉS</div>
                                <div class="mc-tagline">Avocats au Barreau de Paris</div>
                            </div>
                        </div>
                        <div class="mc-name">Maître Sophie DURAND</div>
                        <div class="mc-role">Droit des Sociétés & Fusion-Acquisition</div>
                        <div class="mc-btn"><div class="mc-btn-icon" style="background:#4f7be8;">🔐</div>Espace client</div>
                        <div class="mc-btn"><div class="mc-btn-icon" style="background:#4f7be8;">📅</div>Consultation initiale</div>
                        <div class="mc-actu">
                            <div class="mc-actu-title" style="color:#99b4f5;">⚖️ ACTUALITÉ JURIDIQUE</div>
                            <div class="mc-actu-text">Loi DDADUE 2026 : ce qui change pour les dirigeants d'entreprise</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- EXPERT-COMPTABLE -->
            <div class="usecase-item">
                <div class="usecase-text">
                    <h3>Expert-comptable & cabinet d'audit</h3>
                    <p>Le cabinet COMPTAPLUS exploite sa carte Premium pour informer ses clients TPE/PME des échéances fiscales, nouvelles réglementations et accompagnements disponibles. La fonctionnalité Mon Actu remplace les newsletters que personne ne lisait.</p>
                    <div class="usecase-tags">
                        <span class="tag">Modèle Premium — 299€</span>
                        <span class="tag">Mon Actu (alertes fiscales)</span>
                        <span class="tag">Push Notifications ✓</span>
                    </div>
                    <ul class="feature-list">
                        <li><span class="check">✓</span>Alertes push sur les échéances fiscales importantes</li>
                        <li><span class="check">✓</span>Lien vers le portail client & dépôt de documents</li>
                        <li><span class="check">✓</span>Publication des actualités comptables et sociales</li>
                        <li><span class="check">✓</span>Contact direct (téléphone, email, visioconférence)</li>
                    </ul>
                </div>
                <div class="usecase-visual" style="background: linear-gradient(135deg, #fff8e1, #ffecb3);">
                    <div class="mock-card" style="background: linear-gradient(135deg, #3a2c00, #261d00);">
                        <div class="mc-header">
                            <div class="mc-logo" style="background:#ff9500;">CP</div>
                            <div>
                                <div class="mc-company">COMPTAPLUS</div>
                                <div class="mc-tagline">Expert-Comptable & Commissaire</div>
                            </div>
                        </div>
                        <div class="mc-name">Éric MARTIN</div>
                        <div class="mc-role">Expert-Comptable · Commissaire aux comptes</div>
                        <div class="mc-btn"><div class="mc-btn-icon" style="background:#ff9500;">🗂️</div>Portail client</div>
                        <div class="mc-btn"><div class="mc-btn-icon" style="background:#ff9500;">📞</div>Appel direct</div>
                        <div class="mc-actu">
                            <div class="mc-actu-title" style="color:#ffc04d;">🔔 RAPPEL FISCAL</div>
                            <div class="mc-actu-text">TVA mensuelle : échéance le 20 mars<br>Liasse fiscale 2025 : avant le 15 mai</div>
                        </div>
                    </div>
                </div>
            </div>

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

<!-- ROI -->
<section class="section section-alt">
    <div class="section-inner">
        <p class="section-label">Résultats</p>
        <h2 class="section-title">Ce que ça change pour votre cabinet</h2>
        <p class="section-subtitle">Objectifs cibles — mesurés dans le cadre de notre <strong>programme ambassadeurs lancement</strong> Conseil & Expertise. Les premiers retours terrain confirmeront ces projections.</p>
        <div class="roi-grid">
            <div class="roi-card">
                <div class="roi-number">+80%</div>
                <div class="roi-label">de taux d'ouverture vs. les newsletters email classiques</div>
            </div>
            <div class="roi-card">
                <div class="roi-number">0€</div>
                <div class="roi-label">par an après le paiement unique — retour sur investissement immédiat</div>
            </div>
            <div class="roi-card">
                <div class="roi-number">54</div>
                <div class="roi-label">designs disponibles pour une carte à votre image premium</div>
            </div>
            <div class="roi-card">
                <div class="roi-number">∞</div>
                <div class="roi-label">publications Mon Actu sans surcoût — votre contenu, votre audience</div>
            </div>
        </div>
    </div>
</section>

<!-- COMPARISON -->
<section class="section">
    <div class="section-inner">
        <p class="section-label">Comparatif</p>
        <h2 class="section-title">NUM-ECARD vs. les alternatives pour les experts</h2>
        <p class="section-subtitle">Ce que les solutions classiques ne permettent pas — et que NUM-ECARD rend simple.</p>
        <div style="overflow-x:auto;">
        <table class="comparison-table">
            <thead>
                <tr>
                    <th>Besoin</th>
                    <th>Carte papier</th>
                    <th>LinkedIn seul</th>
                    <th class="col-num">NUM-ECARD</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Notifier les clients/prospects d'un nouveau contenu</td>
                    <td class="no">✗</td>
                    <td class="no">✗ Algo dépendant</td>
                    <td class="col-num yes">✓ Push direct</td>
                </tr>
                <tr>
                    <td>Afficher les témoignages clients</td>
                    <td class="no">✗</td>
                    <td class="no">✓ Partiel</td>
                    <td class="col-num yes">✓ CRM Light intégré</td>
                </tr>
                <tr>
                    <td>Accessible hors connexion (PWA)</td>
                    <td class="no">N/A</td>
                    <td class="no">✗</td>
                    <td class="col-num yes">✓ Installable iOS & Android</td>
                </tr>
                <tr>
                    <td>Analytics sur les consultations</td>
                    <td class="no">✗</td>
                    <td class="no">✗ Partiel</td>
                    <td class="col-num yes">✓ Tableau de bord</td>
                </tr>
                <tr>
                    <td>Prise de RDV directe</td>
                    <td class="no">✗</td>
                    <td class="no">✗</td>
                    <td class="col-num yes">✓ Bouton dédié</td>
                </tr>
                <tr>
                    <td>Identité visuelle premium personnalisée</td>
                    <td class="no">✗ Basique</td>
                    <td class="no">✗ Standard</td>
                    <td class="col-num yes">✓ 54 designs</td>
                </tr>
                <tr>
                    <td>Coût par an</td>
                    <td class="no">~300-600€ réimpression</td>
                    <td class="no">0€ (ou 60€/an Premium)</td>
                    <td class="col-num yes">0€/an — paiement unique</td>
                </tr>
            </tbody>
        </table>
        </div>
    </div>
</section>

<!-- PRICING -->
<section class="section">
    <div class="section-inner">
        <p class="section-label">L'offre recommandée</p>
        <h2 class="section-title">Pour les consultants & experts indépendants</h2>
        <p class="section-subtitle">Votre expertise mérite une communication à la hauteur de votre positionnement.</p>
        <div class="pricing-highlight">
            <h3>Consultant ou professionnel libéral ?</h3>
            <p>Le Modèle Force de Vente est votre meilleur outil de développement commercial</p>
            <div class="price-big">399€</div>
            <div class="price-note">Paiement unique · Pas d'abonnement</div>
            <div class="pricing-features">
                <span class="pricing-feature">✓ Mon Actu (articles, insights)</span>
                <span class="pricing-feature">✓ Push Notifications</span>
                <span class="pricing-feature">✓ CRM Light (recommandations)</span>
                <span class="pricing-feature">✓ Bouton prise de RDV</span>
                <span class="pricing-feature">✓ Analytics avancés</span>
                <span class="pricing-feature">✓ 54 designs premium</span>
            </div>
            <a href="/#pricing" class="btn-pricing">Voir tous les modèles →</a>
        </div>
    </div>
</section>

<!-- CTA BAND -->
<section class="cta-band">
    <h2>Votre expertise mérite<br>une communication premium</h2>
    <p>Rejoignez les consultants et experts qui ont adopté NUM-ECARD</p>
    <a href="/#contact" class="btn-green">Demande d'infos</a>
    <a href="/#modele-forcevente" class="btn-ghost">Découvrir le modèle Force de Vente</a>
</section>
{% endblock %}