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

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

{% block meta_description %}Recruteurs, DRH, cabinets de recrutement : NUM-ECARD digitalise votre communication professionnelle et valorise votre marque employeur. 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; display: flex; align-items: center; gap: 4px; }
        .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 — couleur RH (violet/indigo professionnel) */
        .sector-banner {
            background: linear-gradient(135deg, #2d1b4e 0%, #1a0f32 60%, #2d1b4e 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(130,100,210,0.2) 0%, transparent 60%),
                        radial-gradient(ellipse at 70% 50%, rgba(100,80,200,0.15) 0%, transparent 60%);
        }
        .sector-badge {
            display: inline-block;
            background: rgba(130,100,210,0.2);
            border: 1px solid rgba(130,100,210,0.4);
            color: #c4b0ff;
            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: #c4b0ff; }
        .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); background: rgba(255,255,255,0.9); }
        .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: #7c5cbf; 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; }
        /* PROFIL GRID */
        .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; 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; }
        /* CONTEXT BOX */
        .context-box { background: linear-gradient(135deg, rgba(124,92,191,.06), rgba(124,92,191,.1)); border: 1px solid rgba(124,92,191,.2); border-radius: 16px; padding: 28px; margin-bottom: 48px; }
        .context-box h4 { font-size: 16px; font-weight: 600; color: #7c5cbf; margin-bottom: 8px; }
        .context-box p { font-size: 14px; color: #6e6e73; line-height: 1.7; }
        .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 #7c5cbf; }
        .pain-card.solved h3 { color: #7c5cbf; }
        .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(124,92,191,0.08); color: #7c5cbf; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; }
        .usecase-visual {
            background: linear-gradient(135deg, #f3f0ff 0%, #ebe4ff 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, #2d1b4e 0%, #1a0f32 100%);
        }
        .mc-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
        .mc-logo { width: 40px; height: 40px; background: #9b7fe8; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
        .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: #9b7fe8; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 10px; }
        .mc-actu { background: rgba(155,127,232,0.15); border: 1px solid rgba(155,127,232,0.3); border-radius: 8px; padding: 8px; margin-top: 8px; }
        .mc-actu-title { font-size: 10px; color: #c4b0ff; 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; margin-bottom: 48px; }
        .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: #7c5cbf; 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, #7c5cbf 0%, #5c3d9f 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: #7c5cbf; 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: #7c5cbf; 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: #7c5cbf; 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-purple { display: inline-block; background: #7c5cbf; 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-purple:hover { background: #8f6fd0; }
        .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, #2d1b4e, #7c5cbf); 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; }

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

        @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">👥 Ressources Humaines</span>
    <h1>Le hub digital des professionnels<br>des <span>Ressources Humaines</span></h1>
    <p>Recruteurs, DRH, responsables formation, cabinets RH — NUM-ECARD renforce votre marque employeur et facilite chaque prise de contact avec vos candidats et collaborateurs.</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-rh" class="btn-outline-white">Voir une démo RH</a>
    </div>
</section>

<!-- POUR QUI -->
<section class="section section-alt">
    <div class="section-inner">
        <p class="section-label">Pour qui ?</p>
        <h2 class="section-title">Tous les professionnels des Ressources Humaines</h2>
        <p class="section-subtitle">Du recruteur indépendant au DRH de groupe, NUM-ECARD s'adapte à chaque profil RH.</p>
        <div class="profil-grid">
            <div class="profil-pill"><span class="emoji">🎯</span>Recruteur cabinet</div>
            <div class="profil-pill"><span class="emoji">👔</span>DRH d'ETI</div>
            <div class="profil-pill"><span class="emoji">🤝</span>Chasseur de têtes</div>
            <div class="profil-pill"><span class="emoji">📋</span>Responsable RH</div>
            <div class="profil-pill"><span class="emoji">🧑‍💼</span>Consultant RH indépendant</div>
            <div class="profil-pill"><span class="emoji">🎓</span>Talent Acquisition Manager</div>
            <div class="profil-pill"><span class="emoji">🌍</span>Mobilité internationale</div>
            <div class="profil-pill"><span class="emoji">💡</span>HRBP / Business Partner</div>
            <div class="profil-pill"><span class="emoji">🔄</span>Coach reconversion pro</div>
            <div class="profil-pill"><span class="emoji">🤲</span>Consultant outplacement</div>
        </div>
        <div class="context-box">
            <h4>🏆 La marque employeur commence à la première carte de visite</h4>
            <p>Dans un marché des talents en tension, chaque point de contact compte. NUM-ECARD positionne immédiatement votre entreprise comme moderne et digitale — avant même le premier entretien. Vos offres d'emploi, votre page carrières, votre LinkedIn et vos coordonnées centralisés en un QR code : une expérience candidat mémorable dès le salon emploi ou la remise de carte.</p>
        </div>
    </div>
</section>

<!-- PAIN POINTS -->
<section class="section section-alt">
    <div class="section-inner">
        <p class="section-label">Les enjeux</p>
        <h2 class="section-title">Les défis des professionnels RH</h2>
        <p class="section-subtitle">Recrutement, marque employeur, formation : votre communication digitale est un levier de différenciation souvent sous-exploité.</p>
        <div class="pain-grid">
            <div class="pain-card solved">
                <div class="pain-icon">🎯</div>
                <h3>Première impression lors d'un salon emploi</h3>
                <p>Partagez votre carte digitale en quelques secondes via QR code. Le candidat a immédiatement accès à vos offres d'emploi, LinkedIn et coordonnées — une expérience moderne et mémorable.</p>
            </div>
            <div class="pain-card solved">
                <div class="pain-icon">📣</div>
                <h3>Diffuser vos offres d'emploi en temps réel</h3>
                <p>Publiez vos nouvelles offres via <strong>Mon Actu</strong> sur votre carte. Les candidats déjà en contact reçoivent une notification push instantanée — sans avoir besoin de LinkedIn ou d'un ATS.</p>
            </div>
            <div class="pain-card solved">
                <div class="pain-icon">🏢</div>
                <h3>Valoriser la marque employeur</h3>
                <p>Votre carte reflète l'identité visuelle de votre entreprise grâce aux 54 chartes graphiques disponibles. Chaque interaction renforce la cohérence de votre image.</p>
            </div>
            <div class="pain-card solved">
                <div class="pain-icon">📊</div>
                <h3>Mesurer l'impact de votre communication</h3>
                <p>Le tableau de bord analytics vous indique combien de candidats ont consulté votre carte, cliqué sur vos offres ou enregistré vos coordonnées.</p>
            </div>
            <div class="pain-card solved">
                <div class="pain-icon">🔗</div>
                <h3>Centraliser tous vos canaux</h3>
                <p>LinkedIn, Indeed, Welcome to the Jungle, site carrières — tous vos liens utiles réunis en un seul endroit. Plus besoin de chercher dans les emails.</p>
            </div>
            <div class="pain-card solved">
                <div class="pain-icon">💼</div>
                <h3>Solutions pour toute une équipe RH</h3>
                <p>Le pack Multi-Cartes équipe votre département entier sous une identité unifiée, à un tarif unique de 999€ pour jusqu'à 10 cartes.</p>
            </div>
        </div>
    </div>
</section>

<!-- MARQUE EMPLOYEUR -->
<section class="section">
    <div class="section-inner">
        <p class="section-label">Marque employeur</p>
        <h2 class="section-title">NUM-ECARD renforce votre attractivité</h2>
        <p class="section-subtitle">Dans un marché des talents sous tension, chaque point de contact compte.</p>
        <div class="marque-grid">
            <div class="marque-card">
                <div class="marque-icon">✨</div>
                <h4>Image moderne & professionnelle</h4>
                <p>Une carte digitale envoie un signal fort : votre organisation est tournée vers l'innovation et le digital.</p>
            </div>
            <div class="marque-card">
                <div class="marque-icon">📱</div>
                <h4>Expérience candidat améliorée</h4>
                <p>Le candidat peut appeler, envoyer un message ou postuler directement depuis la carte. <em style="font-size:11px;color:#86868b;">(<a href="politique-confidentialite.html" style="color:#86868b;">Politique de confidentialité RGPD</a>)</em></p>
            </div>
            <div class="marque-card">
                <div class="marque-icon">🎨</div>
                <h4>Charte graphique respectée</h4>
                <p>Votre carte reproduit fidèlement les couleurs, typographie et esprit visuel de votre marque employeur.</p>
            </div>
            <div class="marque-card">
                <div class="marque-icon">🔔</div>
                <h4>Candidats notifiés de vos offres</h4>
                <p>Grâce aux push notifications, votre vivier de candidats est informé instantanément de vos nouvelles opportunités.</p>
            </div>
        </div>
    </div>
</section>

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

        <div class="usecase-list">

            <!-- RECRUTEUR -->
            <div class="usecase-item">
                <div class="usecase-text">
                    <h3>Recruteur en cabinet</h3>
                    <p>Julien est chargé de recrutement dans un cabinet spécialisé IT. Il partage son QR code lors de forums école, sur LinkedIn et via ses emails. Ses candidats accèdent directement à son profil, ses offres actuelles et peuvent planifier un entretien d'un seul tap.</p>
                    <div class="usecase-tags">
                        <span class="tag">Modèle Force de Vente — 399€</span>
                        <span class="tag">Mon Actu (offres d'emploi)</span>
                        <span class="tag">Push Notifications ✓</span>
                        <span class="tag">CRM Light ✓</span>
                    </div>
                    <ul class="feature-list">
                        <li><span class="check">✓</span>Publication des offres en temps réel avec notification push</li>
                        <li><span class="check">✓</span>Bouton "Postuler" ou "Planifier un entretien"</li>
                        <li><span class="check">✓</span>Lien vers son profil LinkedIn & page carrières</li>
                        <li><span class="check">✓</span>Analytics : qui a consulté, quand, combien de fois</li>
                    </ul>
                </div>
                <div class="usecase-visual">
                    <div class="mock-card">
                        <div class="mc-header">
                            <div class="mc-logo">TR</div>
                            <div>
                                <div class="mc-company">TALENT RECRUIT</div>
                                <div class="mc-tagline">Experts IT & Digital</div>
                            </div>
                        </div>
                        <div class="mc-name">Julien BERNARD</div>
                        <div class="mc-role">Chargé de Recrutement Senior</div>
                        <div class="mc-btn"><div class="mc-btn-icon">📞</div>07 XX XX XX XX</div>
                        <div class="mc-btn"><div class="mc-btn-icon">📅</div>Planifier un entretien</div>
                        <div class="mc-btn"><div class="mc-btn-icon">💼</div>Voir mes offres</div>
                        <div class="mc-actu">
                            <div class="mc-actu-title">🔔 NOUVELLE OFFRE</div>
                            <div class="mc-actu-text">Lead Dev React — CDI Toulouse<br>55-65k€ · Hybride</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- DRH -->
            <div class="usecase-item reverse">
                <div class="usecase-text">
                    <h3>Direction des Ressources Humaines</h3>
                    <p>Isabelle est DRH d'une ETI de 250 salariés. Elle utilise sa carte NUM-ECARD pour présenter sa politique RH lors de comités de direction, rencontres avec les partenaires sociaux et salons professionnels. Son équipe RH de 4 personnes dispose d'un pack Multi-Cartes unifié.</p>
                    <div class="usecase-tags">
                        <span class="tag">Modèle Multi-Cartes — 999€</span>
                        <span class="tag">4 cartes équipe RH</span>
                        <span class="tag">Identité entreprise unifiée</span>
                    </div>
                    <ul class="feature-list">
                        <li><span class="check">✓</span>Présentation de la politique RH & valeurs entreprise</li>
                        <li><span class="check">✓</span>Liens vers l'espace SIRH et portail salariés</li>
                        <li><span class="check">✓</span>Communication sur les avantages employeur</li>
                        <li><span class="check">✓</span>Mon Actu pour actualités RH internes</li>
                    </ul>
                </div>
                <div class="usecase-visual" style="background: linear-gradient(135deg, #f0fff4, #dcffe8);">
                    <div class="mock-card" style="background: linear-gradient(135deg, #1a3a2a, #0d2117);">
                        <div class="mc-header">
                            <div class="mc-logo" style="background:#34c759;">GS</div>
                            <div>
                                <div class="mc-company">GROUPE SUDOTECH</div>
                                <div class="mc-tagline">Direction des RH</div>
                            </div>
                        </div>
                        <div class="mc-name">Isabelle ROUSSEAU</div>
                        <div class="mc-role">Directrice Ressources Humaines</div>
                        <div class="mc-btn"><div class="mc-btn-icon" style="background:#34c759;">🌐</div>Portail salariés</div>
                        <div class="mc-btn"><div class="mc-btn-icon" style="background:#34c759;">💼</div>Nos offres d'emploi</div>
                        <div class="mc-actu">
                            <div class="mc-actu-title" style="color:#34c759;">📋 ACTUALITÉ RH</div>
                            <div class="mc-actu-text">Bilan social 2025 disponible<br>Entretiens annuels : planning en ligne</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- CABINET CONSEIL RH -->
            <div class="usecase-item">
                <div class="usecase-text">
                    <h3>Cabinet conseil en ressources humaines</h3>
                    <p>Le cabinet RH PARTNERS équipe ses 6 consultants avec un pack Multi-Cartes. Chaque consultant présente ses spécialités (audit social, GPEC, outplacement), ses références et peut publier ses actualités (webinaires, articles) directement sur sa carte.</p>
                    <div class="usecase-tags">
                        <span class="tag">Modèle Multi-Cartes — 999€</span>
                        <span class="tag">6 consultants — identité cabinet</span>
                        <span class="tag">Mon Actu par consultant</span>
                    </div>
                    <ul class="feature-list">
                        <li><span class="check">✓</span>Mise en valeur des spécialités et certifications</li>
                        <li><span class="check">✓</span>Publication des prochains webinaires & formations</li>
                        <li><span class="check">✓</span>Témoignages clients via le module CRM Light</li>
                        <li><span class="check">✓</span>Lien vers les articles LinkedIn et le site cabinet</li>
                    </ul>
                </div>
                <div class="usecase-visual" style="background: linear-gradient(135deg, #fff5eb, #ffe0bc);">
                    <div class="mock-card" style="background: linear-gradient(135deg, #3a1f0d, #1f0f00);">
                        <div class="mc-header">
                            <div class="mc-logo" style="background:#ff9500;">HR</div>
                            <div>
                                <div class="mc-company">RH PARTNERS</div>
                                <div class="mc-tagline">Conseil & Expertise RH</div>
                            </div>
                        </div>
                        <div class="mc-name">Marc FONTAINE</div>
                        <div class="mc-role">Consultant Senior — GPEC & Outplacement</div>
                        <div class="mc-btn"><div class="mc-btn-icon" style="background:#ff9500;">📖</div>Mes articles</div>
                        <div class="mc-btn"><div class="mc-btn-icon" style="background:#ff9500;">🎓</div>Formations 2026</div>
                        <div class="mc-actu">
                            <div class="mc-actu-title" style="color:#ff9500;">📅 PROCHAIN WEBINAIRE</div>
                            <div class="mc-actu-text">GPEC & IA : enjeux 2026<br>Le 18 mars — Inscription gratuite</div>
                        </div>
                    </div>
                </div>
            </div>

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

<!-- ROI -->
<section class="section">
    <div class="section-inner">
        <p class="section-label">Résultats</p>
        <h2 class="section-title">Ce que ça change pour vos équipes RH</h2>
        <p class="section-subtitle">Objectifs cibles — mesurés dans le cadre de notre <strong>programme ambassadeurs lancement</strong> Ressources Humaines. Les premiers retours terrain confirmeront ces projections.</p>
        <div class="roi-grid">
            <div class="roi-card">
                <div class="roi-number">+65%</div>
                <div class="roi-label">de taux de rappel des candidats après un salon emploi</div>
            </div>
            <div class="roi-card">
                <div class="roi-number">0€/an</div>
                <div class="roi-label">après le paiement unique — économie vs. les abonnements du marché</div>
            </div>
            <div class="roi-card">
                <div class="roi-number">10</div>
                <div class="roi-label">cartes collaborateurs dans un pack Multi-Cartes à 999€</div>
            </div>
            <div class="roi-card">
                <div class="roi-number">∞</div>
                <div class="roi-label">mises à jour sans coût supplémentaire — votre carte évolue avec vous</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 RH classiques</h2>
        <p class="section-subtitle">Ce que les solutions traditionnelles ne permettent pas — et que NUM-ECARD rend possible.</p>
        <div style="overflow-x:auto;">
        <table class="comparison-table">
            <thead>
                <tr>
                    <th>Besoin</th>
                    <th>Carte papier</th>
                    <th>Signature email seule</th>
                    <th class="col-num">NUM-ECARD</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Notifier les candidats d'une nouvelle offre</td>
                    <td class="no">✗</td>
                    <td class="no">✗</td>
                    <td class="col-num yes">✓ Push Notifications</td>
                </tr>
                <tr>
                    <td>Lien direct vers la page carrières</td>
                    <td class="no">✗</td>
                    <td class="no">✗ Partiel</td>
                    <td class="col-num yes">✓ Tous modèles</td>
                </tr>
                <tr>
                    <td>Analytics sur les contacts générés</td>
                    <td class="no">✗</td>
                    <td class="no">✗</td>
                    <td class="col-num yes">✓ Tableau de bord</td>
                </tr>
                <tr>
                    <td>Équiper toute l'équipe RH sous une identité</td>
                    <td class="no">✗ Coûteux</td>
                    <td class="no">✗ Non standardisé</td>
                    <td class="col-num yes">✓ Multi-Cartes 999€</td>
                </tr>
                <tr>
                    <td>Mise à jour immédiate en cas de changement</td>
                    <td class="no">✗ Réimpression</td>
                    <td class="no">✓</td>
                    <td class="col-num yes">✓ Instantané</td>
                </tr>
                <tr>
                    <td>Marque employeur renforcée</td>
                    <td class="no">✗ Basique</td>
                    <td class="no">✗ Limité</td>
                    <td class="col-num yes">✓ 54 designs + charte</td>
                </tr>
                <tr>
                    <td>RGPD conforme</td>
                    <td class="no">N/A</td>
                    <td class="no">✗ Variable</td>
                    <td class="col-num yes">✓ 100% conforme</td>
                </tr>
            </tbody>
        </table>
        </div>
    </div>
</section>

<!-- PRICING -->
<section class="section section-alt">
    <div class="section-inner">
        <p class="section-label">L'offre recommandée</p>
        <h2 class="section-title">Pour les recruteurs & équipes RH</h2>
        <p class="section-subtitle">La communication RH mérite d'être aussi soignée que le reste de votre processus candidat.</p>
        <div class="pricing-highlight">
            <h3>Cabinet ou département RH ?</h3>
            <p>Le Modèle Multi-Cartes est votre meilleur investissement</p>
            <div class="price-big">999€</div>
            <div class="price-note">Paiement unique · Jusqu'à 10 cartes · Identité unifiée</div>
            <div class="pricing-features">
                <span class="pricing-feature">✓ 10 cartes individualisées</span>
                <span class="pricing-feature">✓ Mon Actu (offres, actualités)</span>
                <span class="pricing-feature">✓ Push Notifications</span>
                <span class="pricing-feature">✓ CRM Light — témoignages</span>
                <span class="pricing-feature">✓ Analytics avancés</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>

<!-- CTA BAND -->
<section class="cta-band">
    <h2>Valorisez votre marque employeur<br>avec NUM-ECARD</h2>
    <p>Rejoignez les professionnels RH qui ont modernisé leur communication</p>
    <a href="/#contact" class="btn-purple">Demande d'infos</a>
    <a href="/#modele-multi-cartes" class="btn-ghost">Découvrir le Multi-Cartes</a>
</section>
{% endblock %}