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

{% block title %}NUM-ECARD | Santé & Bien-être — Hub de Communication Professionnel{% endblock %}

{% block meta_description %}Médecins, kinésithérapeutes, coachs santé, thérapeutes : NUM-ECARD digitalise votre communication dans le respect de la déontologie médicale. 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 — corail doux + vert sauge */
        .sector-banner{background:linear-gradient(135deg,#1f3d3a 0%,#0f2422 60%,#1f3d3a 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(32,201,151,.15) 0%,transparent 60%),radial-gradient(ellipse at 70% 50%,rgba(255,147,112,.1) 0%,transparent 60%)}
        .sector-badge{display:inline-block;background:rgba(32,201,151,.15);border:1px solid rgba(32,201,151,.3);color:#80e8cc;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:#80e8cc}
        .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;transition:all .3s}
        .btn-outline-white:hover{border-color:rgba(255,255,255,.8)}

        /* GENERIC */
        .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:#14a882;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 */
        .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 #14a882}
        .pain-card.solved h3{color:#14a882}
        .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:-.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(20,168,130,.08);color:#14a882;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500}
        .usecase-visual{background:linear-gradient(135deg,#e6faf5 0%,#ccf2e8 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,.2);max-width:280px;margin:0 auto;font-size:13px;background:linear-gradient(135deg,#1f3d3a 0%,#0f2422 100%)}
        .mc-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
        .mc-logo{width:40px;height:40px;background:#20c997;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:.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;background:#20c997;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px}
        .mc-actu{background:rgba(32,201,151,.12);border:1px solid rgba(32,201,151,.25);border-radius:8px;padding:8px;margin-top:8px}
        .mc-actu-title{font-size:10px;color:#80e8cc;font-weight:600;margin-bottom:4px}
        .mc-actu-text{font-size:10px;opacity:.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,.06)}
        .roi-number{font-size:42px;font-weight:700;color:#14a882;letter-spacing:-.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,#14a882 0%,#0d7a5f 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:.8;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:.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,.12);padding:6px 16px;border-radius:20px;font-size:13px}
        .btn-pricing{display:inline-block;background:#fff;color:#14a882;padding:14px 36px;border-radius:980px;font-size:16px;font-weight:600;text-decoration:none;transition:all .3s}
        .btn-pricing:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2)}

        .feature-list{list-style:none;padding:0}
        .feature-list li{padding:10px 0;border-bottom:1px solid rgba(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:#14a882;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);color:#1d1d1f}
        .comparison-table tr:last-child td{border-bottom:none}
        .comparison-table .col-num{color:#14a882;font-weight:600}
        .yes{color:#34c759;font-weight:600}
        .no{color:#ff3b30}
        .comparison-table tr:hover td{background:#f9f9f9}

        .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%;background:linear-gradient(135deg,#1f3d3a,#14a882);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}

        /* RÉGLEMENTATION BOX */
        .rgpd-box{background:linear-gradient(135deg,rgba(20,168,130,.06),rgba(20,168,130,.1));border:1px solid rgba(20,168,130,.2);border-radius:16px;padding:28px;margin-bottom:48px}
        .rgpd-box h4{font-size:16px;font-weight:600;color:#14a882;margin-bottom:8px}
        .rgpd-box p{font-size:14px;color:#6e6e73;line-height:1.7}

        .profil-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,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;color:#1d1d1f;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}

        .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-teal{display:inline-block;background:#14a882;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-teal:hover{background:#18c99a}
        .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;transition:all .3s;margin:0 8px 8px}
        .btn-ghost:hover{border-color:rgba(255,255,255,.6)}

        .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">🩺 Santé & Bien-être</span>
    <h1>La communication digitale<br>des <span>professionnels de santé</span></h1>
    <p>Médecins, kinésithérapeutes, ostéopathes, infirmières libérales, coachs santé, thérapeutes — NUM-ECARD valorise votre expertise dans le strict respect de la déontologie.</p>
        <div class="sector-slogans">
            <span class="slogan-main">✦ Tout ce que vous êtes en 1 clic</span>
            <span class="slogan-sep">·</span>
            <span class="slogan-secondary">Le Pro qu'on n'oublie pas</span>
        </div>
    <div class="sector-banner-actions">
        <a href="/#modele-starter" class="btn-white">Voir les offres à partir de 179€</a>
        <a href="#demo-sante" class="btn-outline-white">Voir une démo santé</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 professionnels de santé & du bien-être</h2>
        <p class="section-subtitle">Du praticien libéral au thérapeute bien-être, NUM-ECARD s'adapte à chaque profil.</p>
        <div class="profil-grid">
            <div class="profil-pill"><span class="emoji">👨‍⚕️</span>Médecin</div>
            <div class="profil-pill"><span class="emoji">🦴</span>Kinésithérapeute</div>
            <div class="profil-pill"><span class="emoji">🤲</span>Ostéopathe</div>
            <div class="profil-pill"><span class="emoji">💊</span>Pharmacien</div>
            <div class="profil-pill"><span class="emoji">🧘</span>Coach bien-être</div>
            <div class="profil-pill"><span class="emoji">🧠</span>Psychologue</div>
            <div class="profil-pill"><span class="emoji">💉</span>Infirmier libéral</div>
            <div class="profil-pill"><span class="emoji">🌿</span>Naturopathe</div>
        </div>

        <!-- BOX DÉONTOLOGIE -->
        <div class="rgpd-box">
            <h4>✅ Conforme à la déontologie médicale & au RGPD</h4>
            <p>Les professions de santé sont soumises à des règles strictes sur la publicité et la communication. NUM-ECARD ne fait pas de publicité — elle centralise vos informations pratiques (horaires, spécialités, coordonnées, prise de RDV) sans aucune sollicitation commerciale. Hébergement en France, zéro tracking publicitaire, 100 % RGPD conforme. <a href="politique-confidentialite.html" style="color:#14a882;font-size:13px;">→ Politique de Confidentialité</a></p>
        </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 pros de santé</h2>
        <p class="section-subtitle">Entre contraintes réglementaires et attentes des patients, votre communication doit être à la fois utile, sobre et professionnelle.</p>
        <div class="pain-grid">
            <div class="pain-card solved">
                <div class="pain-icon">📋</div>
                <h3>Informer sans démarcher</h3>
                <p>NUM-ECARD diffuse vos informations pratiques (horaires, fermetures, spécialités) sans jamais tomber dans la publicité — totalement en accord avec le Code de déontologie médicale.</p>
            </div>
            <div class="pain-card solved">
                <div class="pain-icon">📅</div>
                <h3>Simplifier la prise de RDV</h3>
                <p>Un bouton direct vers Doctolib, Calendly ou votre agenda en ligne. Vos patients prennent RDV en un tap depuis votre carte, sans appel téléphonique.</p>
            </div>
            <div class="pain-card solved">
                <div class="pain-icon">🔔</div>
                <h3>Informer de vos absences et congés</h3>
                <p>Publiez vos fermetures exceptionnelles ou vos remplaçants via <strong>Mon Actu</strong>. Vos patients <strong>qui ont accepté les notifications</strong> reçoivent une alerte push — fini les appels dans le vide. <em style="font-size:11px;color:#86868b;">(Consentement opt-in requis)</em></p>
            </div>
            <div class="pain-card solved">
                <div class="pain-icon">🗺️</div>
                <h3>Orienter les nouveaux patients</h3>
                <p>Adresse, accès PMR, parking, transports — toutes les infos pratiques accessibles d'un QR code sur votre plaque, ordonnances ou carte de rendez-vous.</p>
            </div>
            <div class="pain-card solved">
                <div class="pain-icon">⭐</div>
                <h3>Valoriser votre expertise sans publicité</h3>
                <p>Affichez vos formations complémentaires, spécialités et approches thérapeutiques sur votre profil — une vitrine sobre et professionnelle, pas un panneau publicitaire.</p>
            </div>
            <div class="pain-card solved">
                <div class="pain-icon">👥</div>
                <h3>Cabinet de groupe ou maison de santé</h3>
                <p>Le pack Multi-Cartes équipe tous les praticiens d'une même structure sous une identité commune, à tarif unique.</p>
            </div>
        </div>
    </div>
</section>

<!-- USE CASES -->
<section class="section section-alt" id="demo-sante">
    <div class="section-inner">
        <p class="section-label">Cas d'usage</p>
        <h2 class="section-title">Votre carte santé en action</h2>
        <p class="section-subtitle">Trois profils types et leurs usages concrets au quotidien.</p>
        <div class="usecase-list">

            <!-- KINÉ -->
            <div class="usecase-item">
                <div class="usecase-text">
                    <h3>Kinésithérapeute libéral</h3>
                    <p>Marie exerce en cabinet individuel. Elle appose son QR code sur ses cartes de rendez-vous et à l'accueil. Ses patients accèdent instantanément à son lien Doctolib, ses spécialités (rééducation post-op, sport, pédiatrie) et ses informations pratiques.</p>
                    <div class="usecase-tags">
                        <span class="tag">Modèle Premium — 299€</span>
                        <span class="tag">Mon Actu (congés, infos pratiques)</span>
                        <span class="tag">Push Notifications ✓</span>
                    </div>
                    <ul class="feature-list">
                        <li><span class="check">✓</span>Bouton Doctolib / prise de RDV directe</li>
                        <li><span class="check">✓</span>Publication des fermetures avec notification push</li>
                        <li><span class="check">✓</span>Présentation des spécialités et formations</li>
                        <li><span class="check">✓</span>Accès PMR, parking, plan d'accès intégré</li>
                    </ul>
                </div>
                <div class="usecase-visual">
                    <div class="mock-card">
                        <div class="mc-header">
                            <div class="mc-logo">MK</div>
                            <div>
                                <div class="mc-company">CABINET KINÉ MARTIN</div>
                                <div class="mc-tagline">Kinésithérapie & Rééducation</div>
                            </div>
                        </div>
                        <div class="mc-name">Marie MARTIN</div>
                        <div class="mc-role">Kinésithérapeute DE — N° RPPS 12345678</div>
                        <div class="mc-btn"><div class="mc-btn-icon">📅</div>Prendre RDV (Doctolib)</div>
                        <div class="mc-btn"><div class="mc-btn-icon">📍</div>Accès & Parking</div>
                        <div class="mc-btn"><div class="mc-btn-icon">🩺</div>Mes spécialités</div>
                        <div class="mc-actu">
                            <div class="mc-actu-title">🔔 INFORMATION CABINET</div>
                            <div class="mc-actu-text">Fermeture du 14 au 21 avril<br>Remplaçante : Dr Claire DUVAL</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- MAISON DE SANTÉ -->
            <div class="usecase-item reverse">
                <div class="usecase-text">
                    <h3>Maison de santé pluriprofessionnelle</h3>
                    <p>La MSP Les Oliviers regroupe 8 praticiens (médecins, infirmières, kiné, sage-femme). Chaque professionnel dispose de sa carte individuelle sous l'identité de la maison de santé. Les patients retrouvent tous les contacts en un seul endroit.</p>
                    <div class="usecase-tags">
                        <span class="tag">Modèle Multi-Cartes — 999€</span>
                        <span class="tag">8 praticiens — identité MSP</span>
                        <span class="tag">Agenda partagé</span>
                    </div>
                    <ul class="feature-list">
                        <li><span class="check">✓</span>Une carte par praticien, identité MSP unifiée</li>
                        <li><span class="check">✓</span>Accès direct aux agendas individuels</li>
                        <li><span class="check">✓</span>Numéro d'urgence et permanence de soins</li>
                        <li><span class="check">✓</span>Mon Actu pour les actualités de la MSP</li>
                    </ul>
                </div>
                <div class="usecase-visual" style="background:linear-gradient(135deg,#e8f4fe,#c8e6ff)">
                    <div class="mock-card" style="background:linear-gradient(135deg,#1a2e45,#0d1a28)">
                        <div class="mc-header">
                            <div class="mc-logo" style="background:#0071e3">MO</div>
                            <div>
                                <div class="mc-company">MSP LES OLIVIERS</div>
                                <div class="mc-tagline">Maison de Santé Pluriprofessionnelle</div>
                            </div>
                        </div>
                        <div class="mc-name">Dr Sophie RENARD</div>
                        <div class="mc-role">Médecin Généraliste — Secteur 1</div>
                        <div class="mc-btn"><div class="mc-btn-icon" style="background:#0071e3">📅</div>Prendre RDV</div>
                        <div class="mc-btn"><div class="mc-btn-icon" style="background:#0071e3">🏥</div>Équipe médicale</div>
                        <div class="mc-actu">
                            <div class="mc-actu-title" style="color:#7bbfff">🔔 PERMANENCE</div>
                            <div class="mc-actu-text">Samedi matin : Dr PETIT<br>Urgences : 15 · SOS Médecins : 3966</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- COACH BIEN-ÊTRE -->
            <div class="usecase-item">
                <div class="usecase-text">
                    <h3>Coach bien-être & thérapeute</h3>
                    <p>Lucas est coach certifié en nutrition et gestion du stress. Sa carte Force de Vente est son principal outil de développement : il publie ses programmes, ses webinaires gratuits et ses témoignages clients. Son réseau de prescripteurs partage son QR code.</p>
                    <div class="usecase-tags">
                        <span class="tag">Modèle Force de Vente — 399€</span>
                        <span class="tag">Mon Actu (programmes, webinaires)</span>
                        <span class="tag">CRM Light ✓</span>
                    </div>
                    <ul class="feature-list">
                        <li><span class="check">✓</span>Publication des programmes et ateliers</li>
                        <li><span class="check">✓</span>Témoignages clients certifiés via CRM Light</li>
                        <li><span class="check">✓</span>Bouton "Séance découverte offerte"</li>
                        <li><span class="check">✓</span>Liens vers Instagram, YouTube, podcast</li>
                    </ul>
                </div>
                <div class="usecase-visual" style="background:linear-gradient(135deg,#fff8e6,#ffe8b0)">
                    <div class="mock-card" style="background:linear-gradient(135deg,#3a2800,#1f1500)">
                        <div class="mc-header">
                            <div class="mc-logo" style="background:#ff9500">LV</div>
                            <div>
                                <div class="mc-company">LUCAS VITAL COACHING</div>
                                <div class="mc-tagline">Nutrition · Stress · Performance</div>
                            </div>
                        </div>
                        <div class="mc-name">Lucas VERDIER</div>
                        <div class="mc-role">Coach certifié RNCP — 8 ans d'expérience</div>
                        <div class="mc-btn"><div class="mc-btn-icon" style="background:#ff9500">🎯</div>Séance découverte</div>
                        <div class="mc-btn"><div class="mc-btn-icon" style="background:#ff9500">⭐</div>Avis clients (47)</div>
                        <div class="mc-actu">
                            <div class="mc-actu-title" style="color:#ffc04d">🎓 NOUVEAU PROGRAMME</div>
                            <div class="mc-actu-text">Détox digitale & sommeil<br>Démarrage le 1er avril · 12 places</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 cabinet</h2>
        <p class="section-subtitle">Objectifs cibles — mesurés dans le cadre de notre <strong>programme ambassadeurs lancement</strong> Santé & Para-médical. Les premiers retours terrain confirmeront ces projections.</p>
        <div class="roi-grid">
            <div class="roi-card"><div class="roi-number">−60%</div><div class="roi-label">d'appels téléphoniques pour des infos pratiques (horaires, accès)</div></div>
            <div class="roi-card"><div class="roi-number">179€</div><div class="roi-label">pour le modèle Essentiel — moins qu'une plaque professionnelle</div></div>
            <div class="roi-card"><div class="roi-number">100%</div><div class="roi-label">conforme déontologie médicale et RGPD — hébergement France</div></div>
            <div class="roi-card"><div class="roi-number">∞</div><div class="roi-label">mises à jour sans coût — vos infos toujours à jour pour vos patients</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 alternatives santé</h2>
        <div style="overflow-x:auto">
        <table class="comparison-table">
            <thead><tr><th>Besoin</th><th>Site web classique</th><th>Doctolib seul</th><th class="col-num">NUM-ECARD</th></tr></thead>
            <tbody>
                <tr><td>Informer des absences en temps réel</td><td class="no">✗ Lent</td><td class="no">✗</td><td class="col-num yes">✓ Push immédiat</td></tr>
                <tr><td>QR code sur ordonnances / cartes RDV</td><td class="no">✗</td><td class="no">✗</td><td class="col-num yes">✓ Tous modèles</td></tr>
                <tr><td>Présenter spécialités & formations</td><td class="no">✓ Complexe</td><td class="no">✓ Partiel</td><td class="col-num yes">✓ Simple & rapide</td></tr>
                <tr><td>Conforme déontologie médicale</td><td class="no">✗ Variable</td><td class="col-num yes">✓</td><td class="col-num yes">✓ Certifié</td></tr>
                <tr><td>Équiper toute une MSP</td><td class="no">✗ Coûteux</td><td class="no">✗</td><td class="col-num yes">✓ Multi-Cartes 999€</td></tr>
                <tr><td>Coût annuel</td><td class="no">~500-2000€/an</td><td class="no">Gratuit (limité)</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 professionnels de santé libéraux</h2>
        <div class="pricing-highlight">
            <h3>Praticien libéral ou cabinet de groupe ?</h3>
            <p>Le Modèle Premium couvre 90% des besoins d'un professionnel de santé</p>
            <div class="price-big">299€</div>
            <div class="price-note">Paiement unique · Pas d'abonnement</div>
            <div class="pricing-features">
                <span class="pricing-feature">✓ Mon Actu (congés, infos)</span>
                <span class="pricing-feature">✓ Push Notifications patients</span>
                <span class="pricing-feature">✓ Bouton prise de RDV</span>
                <span class="pricing-feature">✓ QR code ordonnances</span>
                <span class="pricing-feature">✓ 54 designs disponibles</span>
                <span class="pricing-feature">✓ RGPD & déontologie ✓</span>
            </div>
            <a href="/#pricing" class="btn-pricing">Voir tous les modèles →</a>
        </div>
    </div>
</section>

<section class="cta-band">
    <h2>Modernisez votre communication<br>médicale en toute conformité</h2>
    <p>Rejoignez les professionnels de santé qui ont adopté NUM-ECARD</p>
    <a href="/#contact" class="btn-teal">Demande d'infos</a>
    <a href="/#modele-pro" class="btn-ghost">Voir le modèle Premium</a>
</section>



{% endblock %}