Spaces:
Sleeping
Sleeping
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CALL'VANTAGE — Poste de Commande CEO</title> | |
| <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400&family=Inter:wght@300;400;500;600&family=Playfair+Display:wght@400;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --navy: #0A1628; | |
| --navy-light: #162340; | |
| --navy-mid: #1E3A5F; | |
| --electric: #00A8E8; | |
| --electric-light: #4DC9F6; | |
| --electric-dark: #0077B6; | |
| --gold: #C9A84C; | |
| --gold-light: #E8D48B; | |
| --white: #F8F9FA; | |
| --grey-light: #CED4DA; | |
| --grey-mid: #8b949e; | |
| --success: #2ECC71; | |
| --warning: #F39C12; | |
| --danger: #E74C3C; | |
| --card-bg: rgba(22,35,64,0.6); | |
| --border: rgba(201,168,76,0.15); | |
| } | |
| *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: var(--navy); | |
| color: var(--white); | |
| line-height: 1.6; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* ── HEADER ── */ | |
| .top-header { | |
| position: sticky; top: 0; z-index: 100; | |
| background: rgba(10,22,40,0.94); | |
| backdrop-filter: blur(16px); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .header-inner { | |
| max-width: 1400px; margin: 0 auto; | |
| padding: 12px 24px; | |
| display: flex; align-items: center; justify-content: space-between; | |
| } | |
| .brand-title { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 18px; font-weight: 700; | |
| letter-spacing: 3px; | |
| } | |
| .brand-title em { font-style: normal; color: var(--gold); } | |
| .brand-sub { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-top: 1px; } | |
| .header-date { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--grey-mid); } | |
| /* ── MAIN GRID ── */ | |
| .main { max-width: 1400px; margin: 0 auto; padding: 24px; } | |
| .dash-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 1fr; | |
| gap: 16px; | |
| } | |
| .dash-full { grid-column: 1 / -1; } | |
| .dash-two { grid-column: span 2; } | |
| /* ── CARDS ── */ | |
| .card { | |
| background: var(--card-bg); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| padding: 20px; | |
| } | |
| .card-header { | |
| display: flex; justify-content: space-between; align-items: center; | |
| margin-bottom: 16px; | |
| } | |
| .card-label { | |
| font-size: 10px; letter-spacing: 2px; | |
| text-transform: uppercase; color: var(--gold); | |
| font-weight: 600; | |
| } | |
| .card-title { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 18px; font-weight: 700; | |
| } | |
| /* ── KPI STRIP ── */ | |
| .kpi-strip { | |
| display: grid; | |
| grid-template-columns: repeat(6, 1fr); | |
| gap: 12px; | |
| grid-column: 1 / -1; | |
| } | |
| .kpi-card { | |
| background: var(--card-bg); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| padding: 16px; | |
| text-align: center; | |
| } | |
| .kpi-num { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 28px; font-weight: 700; | |
| } | |
| .kpi-num.electric { color: var(--electric); } | |
| .kpi-num.gold { color: var(--gold); } | |
| .kpi-num.success { color: var(--success); } | |
| .kpi-num.warning { color: var(--warning); } | |
| .kpi-num.danger { color: var(--danger); } | |
| .kpi-label { | |
| font-size: 10px; color: var(--grey-mid); | |
| text-transform: uppercase; letter-spacing: 1px; | |
| margin-top: 4px; | |
| } | |
| .kpi-input { | |
| background: transparent; border: 1px solid var(--border); | |
| color: var(--white); text-align: center; | |
| font-family: 'DM Mono', monospace; font-size: 28px; font-weight: 700; | |
| width: 100%; padding: 4px; border-radius: 6px; | |
| outline: none; | |
| } | |
| .kpi-input:focus { border-color: var(--gold); } | |
| /* ── PIPELINE ── */ | |
| .pipeline { | |
| display: grid; | |
| grid-template-columns: repeat(7, 1fr); | |
| gap: 8px; | |
| } | |
| .pipe-stage { | |
| text-align: center; padding: 12px 8px; | |
| border-radius: 8px; | |
| font-size: 11px; | |
| } | |
| .pipe-stage .pipe-num { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 24px; font-weight: 700; | |
| display: block; margin-bottom: 4px; | |
| } | |
| .pipe-stage .pipe-label { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; } | |
| .pipe-new { background: rgba(206,212,218,0.1); } | |
| .pipe-new .pipe-num { color: var(--grey-light); } | |
| .pipe-email { background: rgba(0,168,232,0.08); } | |
| .pipe-email .pipe-num { color: var(--electric-light); } | |
| .pipe-linkedin { background: rgba(0,168,232,0.12); } | |
| .pipe-linkedin .pipe-num { color: var(--electric); } | |
| .pipe-interested { background: rgba(243,156,18,0.1); } | |
| .pipe-interested .pipe-num { color: var(--warning); } | |
| .pipe-rdv { background: rgba(201,168,76,0.1); } | |
| .pipe-rdv .pipe-num { color: var(--gold); } | |
| .pipe-offer { background: rgba(201,168,76,0.15); } | |
| .pipe-offer .pipe-num { color: var(--gold-light); } | |
| .pipe-closed { background: rgba(46,204,113,0.12); } | |
| .pipe-closed .pipe-num { color: var(--success); } | |
| /* ── WEEKLY LOG ── */ | |
| .log-table { | |
| width: 100%; border-collapse: collapse; | |
| font-size: 12px; | |
| } | |
| .log-table th { | |
| text-align: left; padding: 8px 10px; | |
| font-size: 9px; text-transform: uppercase; | |
| letter-spacing: 1px; color: var(--gold); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .log-table td { | |
| padding: 8px 10px; | |
| border-bottom: 1px solid rgba(201,168,76,0.06); | |
| } | |
| .log-table input { | |
| background: transparent; border: none; | |
| color: var(--white); font-family: 'DM Mono', monospace; | |
| font-size: 12px; width: 50px; text-align: center; | |
| outline: none; | |
| } | |
| .log-table input:focus { border-bottom: 1px solid var(--gold); } | |
| .log-today { background: rgba(201,168,76,0.06); } | |
| /* ── MARKET INTEL ── */ | |
| .intel-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 12px; | |
| } | |
| .intel-card { | |
| background: rgba(22,35,64,0.4); | |
| border: 1px solid rgba(201,168,76,0.08); | |
| border-radius: 8px; | |
| padding: 14px; | |
| } | |
| .intel-card h5 { font-size: 12px; color: var(--gold); margin-bottom: 6px; } | |
| .intel-card p { font-size: 11px; color: var(--grey-light); } | |
| .intel-card .intel-num { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 20px; font-weight: 700; | |
| color: var(--electric); | |
| } | |
| /* ── PRICING ── */ | |
| .price-compare { | |
| display: grid; | |
| grid-template-columns: repeat(5, 1fr); | |
| gap: 8px; | |
| } | |
| .price-col { | |
| text-align: center; padding: 14px 8px; | |
| border-radius: 8px; | |
| background: rgba(22,35,64,0.4); | |
| border: 1px solid rgba(201,168,76,0.08); | |
| } | |
| .price-col.ours { | |
| background: rgba(201,168,76,0.1); | |
| border-color: var(--gold); | |
| } | |
| .price-col .price-name { font-size: 10px; color: var(--grey-mid); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; } | |
| .price-col .price-val { font-family: 'DM Mono', monospace; font-size: 18px; font-weight: 700; } | |
| .price-col.ours .price-val { color: var(--gold); } | |
| /* ── ACTIONS ── */ | |
| .action-item { | |
| display: flex; align-items: center; gap: 10px; | |
| padding: 10px 0; | |
| border-bottom: 1px solid rgba(201,168,76,0.06); | |
| font-size: 12px; | |
| } | |
| .action-check { | |
| width: 18px; height: 18px; border-radius: 3px; | |
| border: 2px solid var(--gold); | |
| display: flex; align-items: center; justify-content: center; | |
| flex-shrink: 0; cursor: pointer; font-size: 11px; color: transparent; | |
| transition: all 0.2s; | |
| } | |
| .action-item.done .action-check { background: var(--gold); color: var(--navy); } | |
| .action-item.done .action-text { color: var(--grey-mid); text-decoration: line-through; } | |
| .action-priority { | |
| font-size: 9px; padding: 2px 8px; border-radius: 10px; | |
| font-weight: 600; text-transform: uppercase; letter-spacing: 1px; | |
| flex-shrink: 0; | |
| } | |
| .action-priority.high { background: rgba(231,76,60,0.15); color: var(--danger); } | |
| .action-priority.medium { background: rgba(243,156,18,0.15); color: var(--warning); } | |
| .action-priority.low { background: rgba(0,168,232,0.1); color: var(--electric-light); } | |
| /* ── COWORK TRACKER ── */ | |
| .cowork-timeline { | |
| position: relative; | |
| padding-left: 24px; | |
| } | |
| .cowork-timeline::before { | |
| content: ''; position: absolute; left: 7px; top: 0; bottom: 0; | |
| width: 2px; background: var(--border); | |
| } | |
| .cw-item { | |
| position: relative; margin-bottom: 14px; | |
| padding-left: 20px; | |
| } | |
| .cw-item::before { | |
| content: ''; position: absolute; | |
| left: -20px; top: 6px; | |
| width: 10px; height: 10px; border-radius: 50%; | |
| background: var(--navy-mid); | |
| border: 2px solid var(--gold); | |
| } | |
| .cw-item.active::before { background: var(--gold); box-shadow: 0 0 12px rgba(201,168,76,0.4); } | |
| .cw-item.done::before { background: var(--success); border-color: var(--success); } | |
| .cw-time { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--grey-mid); } | |
| .cw-action { font-size: 12px; margin-top: 2px; } | |
| .cw-channel { | |
| display: inline-block; font-size: 9px; padding: 1px 8px; | |
| border-radius: 8px; margin-left: 6px; | |
| font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; | |
| } | |
| .ch-email { background: rgba(0,168,232,0.12); color: var(--electric); } | |
| .ch-linkedin { background: rgba(0,119,182,0.15); color: var(--electric-light); } | |
| .ch-phone { background: rgba(201,168,76,0.15); color: var(--gold); } | |
| .ch-whatsapp { background: rgba(46,204,113,0.12); color: var(--success); } | |
| /* ── ROI CALC ── */ | |
| .roi-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } | |
| .roi-card { text-align: center; padding: 16px; border-radius: 8px; background: rgba(22,35,64,0.4); } | |
| .roi-card .roi-val { font-family: 'DM Mono', monospace; font-size: 22px; font-weight: 700; } | |
| .roi-card .roi-label { font-size: 10px; color: var(--grey-mid); text-transform: uppercase; margin-top: 4px; } | |
| /* ── RESPONSIVE ── */ | |
| @media (max-width: 1024px) { | |
| .dash-grid { grid-template-columns: 1fr 1fr; } | |
| .dash-two { grid-column: span 2; } | |
| .kpi-strip { grid-template-columns: repeat(3, 1fr); } | |
| .pipeline { grid-template-columns: repeat(4, 1fr); } | |
| .price-compare { grid-template-columns: repeat(3, 1fr); } | |
| } | |
| @media (max-width: 768px) { | |
| .dash-grid { grid-template-columns: 1fr; } | |
| .dash-two { grid-column: span 1; } | |
| .dash-full { grid-column: span 1; } | |
| .kpi-strip { grid-template-columns: repeat(2, 1fr); grid-column: span 1; } | |
| .pipeline { grid-template-columns: repeat(2, 1fr); } | |
| .intel-grid { grid-template-columns: 1fr; } | |
| .price-compare { grid-template-columns: repeat(2, 1fr); } | |
| .roi-grid { grid-template-columns: 1fr; } | |
| } | |
| @media print { | |
| body { background: #fff; color: #1a1a1a; } | |
| .top-header { position: static; } | |
| .card { background: #f5f5f5; border-color: #ddd; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- ═══════════════ HEADER ═══════════════ --> | |
| <header class="top-header"> | |
| <div class="header-inner"> | |
| <div> | |
| <div class="brand-title">CALL<em>'</em>VANTAGE</div> | |
| <div class="brand-sub">Poste de Commande CEO</div> | |
| </div> | |
| <div class="header-date" id="current-date"></div> | |
| </div> | |
| </header> | |
| <div class="main"> | |
| <div class="dash-grid"> | |
| <!-- ═══════════════ KPI STRIP ═══════════════ --> | |
| <div class="kpi-strip"> | |
| <div class="kpi-card"> | |
| <div class="kpi-num gold" id="kpi-targets">11</div> | |
| <div class="kpi-label">Cibles actives</div> | |
| </div> | |
| <div class="kpi-card"> | |
| <div class="kpi-num electric" id="kpi-contacted">0</div> | |
| <div class="kpi-label">Contactés</div> | |
| </div> | |
| <div class="kpi-card"> | |
| <div class="kpi-num warning" id="kpi-interested">0</div> | |
| <div class="kpi-label">Intéressés</div> | |
| </div> | |
| <div class="kpi-card"> | |
| <div class="kpi-num gold" id="kpi-rdv">0</div> | |
| <div class="kpi-label">RDV planifiés</div> | |
| </div> | |
| <div class="kpi-card"> | |
| <div class="kpi-num success" id="kpi-closed">0</div> | |
| <div class="kpi-label">Closés</div> | |
| </div> | |
| <div class="kpi-card"> | |
| <div class="kpi-num" style="color:var(--grey-mid);" id="kpi-lost">0</div> | |
| <div class="kpi-label">Perdus</div> | |
| </div> | |
| </div> | |
| <!-- ═══════════════ PIPELINE FUNNEL ═══════════════ --> | |
| <div class="card dash-full"> | |
| <div class="card-header"><span class="card-label">Pipeline en temps réel</span></div> | |
| <div class="pipeline" id="pipeline"> | |
| <div class="pipe-stage pipe-new"><span class="pipe-num" id="pipe-new">11</span><span class="pipe-label">Non contacté</span></div> | |
| <div class="pipe-stage pipe-email"><span class="pipe-num" id="pipe-email">0</span><span class="pipe-label">Email</span></div> | |
| <div class="pipe-stage pipe-linkedin"><span class="pipe-num" id="pipe-linkedin">0</span><span class="pipe-label">LinkedIn</span></div> | |
| <div class="pipe-stage pipe-interested"><span class="pipe-num" id="pipe-interested">0</span><span class="pipe-label">Intéressé</span></div> | |
| <div class="pipe-stage pipe-rdv"><span class="pipe-num" id="pipe-rdv">0</span><span class="pipe-label">RDV</span></div> | |
| <div class="pipe-stage pipe-offer"><span class="pipe-num" id="pipe-offer">0</span><span class="pipe-label">Offre</span></div> | |
| <div class="pipe-stage pipe-closed"><span class="pipe-num" id="pipe-closed">0</span><span class="pipe-label">Closé</span></div> | |
| </div> | |
| </div> | |
| <!-- ═══════════════ COWORK: CE QU'IL FAIT AUJOURD'HUI ═══════════════ --> | |
| <div class="card dash-two"> | |
| <div class="card-header"><span class="card-label">Ce que fait le cowork aujourd'hui</span><span class="card-label" style="color:var(--electric);" id="cowork-week">SEMAINE 1</span></div> | |
| <div class="cowork-timeline" id="cowork-today"> | |
| <div class="cw-item active"><div class="cw-time">09:00</div><div class="cw-action">Revue du pipeline + préparation des emails personnalisés<span class="cw-channel ch-email">CRM</span></div></div> | |
| <div class="cw-item"><div class="cw-time">09:30</div><div class="cw-action">Envoi Email 1 aux cibles TIER 1 (6 emails)<span class="cw-channel ch-email">Email</span></div></div> | |
| <div class="cw-item"><div class="cw-time">10:30</div><div class="cw-action">Connexions LinkedIn aux 6 décideurs TIER 1<span class="cw-channel ch-linkedin">LinkedIn</span></div></div> | |
| <div class="cw-item"><div class="cw-time">11:30</div><div class="cw-action">Engagement : commenter 5-10 posts de prospects<span class="cw-channel ch-linkedin">LinkedIn</span></div></div> | |
| <div class="cw-item"><div class="cw-time">14:00</div><div class="cw-action">Envoi Email 1 aux cibles TIER 2/3 (5 emails)<span class="cw-channel ch-email">Email</span></div></div> | |
| <div class="cw-item"><div class="cw-time">15:00</div><div class="cw-action">Appels de découverte si connexions LinkedIn acceptées<span class="cw-channel ch-phone">Tel</span></div></div> | |
| <div class="cw-item"><div class="cw-time">16:30</div><div class="cw-action">Mise à jour CRM + rapport WhatsApp à Issam<span class="cw-channel ch-whatsapp">Report</span></div></div> | |
| </div> | |
| </div> | |
| <!-- ═══════════════ ACTIONS CEO ═══════════════ --> | |
| <div class="card"> | |
| <div class="card-header"><span class="card-label">Tes actions CEO</span></div> | |
| <div id="ceo-actions"> | |
| <div class="action-item" data-key="ceo-validate-li"><div class="action-check" onclick="toggleCeoAction(this)">✓</div><span class="action-priority high">Urgent</span><div class="action-text">Valider la page LinkedIn avant que le cowork lance l'outreach</div></div> | |
| <div class="action-item" data-key="ceo-calendly"><div class="action-check" onclick="toggleCeoAction(this)">✓</div><span class="action-priority high">Urgent</span><div class="action-text">Créer un lien Calendly pour les RDV closing</div></div> | |
| <div class="action-item" data-key="ceo-crm"><div class="action-check" onclick="toggleCeoAction(this)">✓</div><span class="action-priority high">Urgent</span><div class="action-text">Configurer HubSpot Free ou Pipedrive pour le tracking</div></div> | |
| <div class="action-item" data-key="ceo-email-domain"><div class="action-check" onclick="toggleCeoAction(this)">✓</div><span class="action-priority medium">Important</span><div class="action-text">Configurer SPF/DKIM/DMARC pour les emails @callvantage.fr</div></div> | |
| <div class="action-item" data-key="ceo-waalaxy"><div class="action-check" onclick="toggleCeoAction(this)">✓</div><span class="action-priority medium">Important</span><div class="action-text">Souscrire Waalaxy (~60€/mois) pour l'automation LinkedIn</div></div> | |
| <div class="action-item" data-key="ceo-lemlist"><div class="action-check" onclick="toggleCeoAction(this)">✓</div><span class="action-priority medium">Important</span><div class="action-text">Souscrire Lemlist (~69€/mois) pour les séquences email</div></div> | |
| <div class="action-item" data-key="ceo-contract"><div class="action-check" onclick="toggleCeoAction(this)">✓</div><span class="action-priority low">Prépa</span><div class="action-text">Faire valider le contrat type courtier par un juriste</div></div> | |
| <div class="action-item" data-key="ceo-closing-dispo"><div class="action-check" onclick="toggleCeoAction(this)">✓</div><span class="action-priority low">Prépa</span><div class="action-text">Bloquer 3 créneaux/semaine pour les appels closing (Mar/Jeu 14h-16h)</div></div> | |
| </div> | |
| </div> | |
| <!-- ═══════════════ INTELLIGENCE MARCHE ═══════════════ --> | |
| <div class="card dash-two"> | |
| <div class="card-header"><span class="card-label">Intelligence Marché — Données Clés</span></div> | |
| <div class="intel-grid"> | |
| <div class="intel-card"><h5>Commission courtier par contrat PME</h5><div class="intel-num">800-3 000€</div><p>En one-shot. Recurrence 2-5%/an sur renouvellements. LTV 3 ans : 2 000-9 000€</p></div> | |
| <div class="intel-card"><h5>Facture énergie moyenne PME</h5><div class="intel-num">11-19k€/an</div><p>Profil C4 (37-240 kVA). Électricité : 115-119€/MWh HT en 2026</p></div> | |
| <div class="intel-card"><h5>Taux de conversion RDV → Contrat</h5><div class="intel-num">20-25%</div><p>Sur RDV qualifiés avec échéance vérifiée. Standard sans vérif : 10-15%</p></div> | |
| <div class="intel-card"><h5>Coût interne d'un RDV (courtier)</h5><div class="intel-num">250-330€</div><p>Commercial terrain : 4-5k€/mois chargé pour 15-20 RDV</p></div> | |
| </div> | |
| </div> | |
| <!-- ═══════════════ POSITIONNEMENT PRIX ═══════════════ --> | |
| <div class="card"> | |
| <div class="card-header"><span class="card-label">Notre positionnement prix</span></div> | |
| <div class="price-compare"> | |
| <div class="price-col"><div class="price-name">Interne</div><div class="price-val" style="color:var(--danger);">475€</div><p style="font-size:9px; color:var(--grey-mid); margin-top:4px;">Par RDV</p></div> | |
| <div class="price-col"><div class="price-name">Agence FR</div><div class="price-val" style="color:var(--danger);">250€</div><p style="font-size:9px; color:var(--grey-mid); margin-top:4px;">Par RDV</p></div> | |
| <div class="price-col"><div class="price-name">JobPhoning</div><div class="price-val" style="color:var(--warning);">80€</div><p style="font-size:9px; color:var(--grey-mid); margin-top:4px;">Par RDV</p></div> | |
| <div class="price-col ours"><div class="price-name">Call'Vantage</div><div class="price-val">60-110€</div><p style="font-size:9px; color:var(--gold-light); margin-top:4px;">C5/C4/C3 + vérif échéance</p></div> | |
| <div class="price-col"><div class="price-name">Madagascar</div><div class="price-val" style="color:var(--grey-mid);">20-40€</div><p style="font-size:9px; color:var(--grey-mid); margin-top:4px;">Qualité ↓</p></div> | |
| </div> | |
| </div> | |
| <!-- ═══════════════ ROI POUR LE COURTIER ═══════════════ --> | |
| <div class="card dash-full"> | |
| <div class="card-header"><span class="card-label">ROI pour le courtier — L'argument qui close</span></div> | |
| <p style="font-size:13px; color:var(--grey-light); margin-bottom:16px;">Ce calcul, c'est ce que le cowork présente en appel pour convaincre :</p> | |
| <div class="roi-grid"> | |
| <div class="roi-card"><div class="roi-val" style="color:var(--electric);">3 RDV</div><div class="roi-label">Offerts gratuitement</div><p style="font-size:10px; color:var(--grey-mid); margin-top:6px;">Zéro investissement pour tester</p></div> | |
| <div class="roi-card"><div class="roi-val" style="color:var(--gold);">20-25%</div><div class="roi-label">Taux de conversion</div><p style="font-size:10px; color:var(--grey-mid); margin-top:6px;">Sur RDV avec échéance vérifiée</p></div> | |
| <div class="roi-card"><div class="roi-val" style="color:var(--success);">800-3k€</div><div class="roi-label">Commission par contrat</div><p style="font-size:10px; color:var(--grey-mid); margin-top:6px;">+ 2-5%/an en récurrence</p></div> | |
| </div> | |
| <div class="card" style="margin-top:16px; background:rgba(201,168,76,0.06); border-color:rgba(201,168,76,0.2);"> | |
| <p style="font-size:13px; color:var(--gold-light);"><strong>Après le test gratuit, le calcul du courtier :</strong></p> | |
| <p style="font-size:13px; color:var(--grey-light); margin-top:8px;">20 RDV/mois × 40€ = <strong style="color:var(--electric);">800€/mois</strong> invest pour le courtier</p> | |
| <p style="font-size:13px; color:var(--grey-light);">20 RDV × 22% conversion = <strong>4-5 contrats signés</strong></p> | |
| <p style="font-size:13px; color:var(--grey-light);">4 contrats × 1 500€ commission = <strong style="color:var(--success);">6 000€ de CA</strong></p> | |
| <p style="font-size:14px; color:var(--gold); margin-top:10px; font-weight:600;">ROI : 650% — Pour chaque euro investi, le courtier récupère 7,5€</p> | |
| </div> | |
| </div> | |
| <!-- ═══════════════ SUIVI HEBDO ═══════════════ --> | |
| <div class="card dash-full"> | |
| <div class="card-header"><span class="card-label">Suivi activité hebdomadaire</span></div> | |
| <table class="log-table"> | |
| <tr> | |
| <th>Jour</th> | |
| <th>Emails envoyés</th> | |
| <th>LinkedIn connexions</th> | |
| <th>LinkedIn messages</th> | |
| <th>Appels</th> | |
| <th>RDV obtenus</th> | |
| <th>Leads chauds</th> | |
| </tr> | |
| <tr><td>Lundi</td><td><input type="number" data-key="log-lun-em" value="0" onchange="saveLog(this)"></td><td><input type="number" data-key="log-lun-lc" value="0" onchange="saveLog(this)"></td><td><input type="number" data-key="log-lun-lm" value="0" onchange="saveLog(this)"></td><td><input type="number" data-key="log-lun-ap" value="0" onchange="saveLog(this)"></td><td><input type="number" data-key="log-lun-rv" value="0" onchange="saveLog(this)"></td><td><input type="number" data-key="log-lun-ld" value="0" onchange="saveLog(this)"></td></tr> | |
| <tr><td>Mardi</td><td><input type="number" data-key="log-mar-em" value="0" onchange="saveLog(this)"></td><td><input type="number" data-key="log-mar-lc" value="0" onchange="saveLog(this)"></td><td><input type="number" data-key="log-mar-lm" value="0" onchange="saveLog(this)"></td><td><input type="number" data-key="log-mar-ap" value="0" onchange="saveLog(this)"></td><td><input type="number" data-key="log-mar-rv" value="0" onchange="saveLog(this)"></td><td><input type="number" data-key="log-mar-ld" value="0" onchange="saveLog(this)"></td></tr> | |
| <tr><td>Mercredi</td><td><input type="number" data-key="log-mer-em" value="0" onchange="saveLog(this)"></td><td><input type="number" data-key="log-mer-lc" value="0" onchange="saveLog(this)"></td><td><input type="number" data-key="log-mer-lm" value="0" onchange="saveLog(this)"></td><td><input type="number" data-key="log-mer-ap" value="0" onchange="saveLog(this)"></td><td><input type="number" data-key="log-mer-rv" value="0" onchange="saveLog(this)"></td><td><input type="number" data-key="log-mer-ld" value="0" onchange="saveLog(this)"></td></tr> | |
| <tr><td>Jeudi</td><td><input type="number" data-key="log-jeu-em" value="0" onchange="saveLog(this)"></td><td><input type="number" data-key="log-jeu-lc" value="0" onchange="saveLog(this)"></td><td><input type="number" data-key="log-jeu-lm" value="0" onchange="saveLog(this)"></td><td><input type="number" data-key="log-jeu-ap" value="0" onchange="saveLog(this)"></td><td><input type="number" data-key="log-jeu-rv" value="0" onchange="saveLog(this)"></td><td><input type="number" data-key="log-jeu-ld" value="0" onchange="saveLog(this)"></td></tr> | |
| <tr><td>Vendredi</td><td><input type="number" data-key="log-ven-em" value="0" onchange="saveLog(this)"></td><td><input type="number" data-key="log-ven-lc" value="0" onchange="saveLog(this)"></td><td><input type="number" data-key="log-ven-lm" value="0" onchange="saveLog(this)"></td><td><input type="number" data-key="log-ven-ap" value="0" onchange="saveLog(this)"></td><td><input type="number" data-key="log-ven-rv" value="0" onchange="saveLog(this)"></td><td><input type="number" data-key="log-ven-ld" value="0" onchange="saveLog(this)"></td></tr> | |
| <tr style="font-weight:600; border-top:2px solid var(--gold);"><td style="color:var(--gold);">TOTAL</td><td id="tot-em" style="text-align:center; font-family:'DM Mono',monospace;">0</td><td id="tot-lc" style="text-align:center; font-family:'DM Mono',monospace;">0</td><td id="tot-lm" style="text-align:center; font-family:'DM Mono',monospace;">0</td><td id="tot-ap" style="text-align:center; font-family:'DM Mono',monospace;">0</td><td id="tot-rv" style="text-align:center; font-family:'DM Mono',monospace;">0</td><td id="tot-ld" style="text-align:center; font-family:'DM Mono',monospace;">0</td></tr> | |
| </table> | |
| </div> | |
| <!-- ═══════════════ TECH STACK ═══════════════ --> | |
| <div class="card"> | |
| <div class="card-header"><span class="card-label">Stack Tech à déployer</span></div> | |
| <div style="font-size:12px;"> | |
| <div style="display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(201,168,76,0.06);"><span>CRM — HubSpot Free</span><span style="font-family:'DM Mono',monospace; color:var(--success);">0€</span></div> | |
| <div style="display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(201,168,76,0.06);"><span>LinkedIn — Waalaxy</span><span style="font-family:'DM Mono',monospace; color:var(--warning);">~60€/mois</span></div> | |
| <div style="display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(201,168,76,0.06);"><span>Cold Email — Lemlist</span><span style="font-family:'DM Mono',monospace; color:var(--warning);">~69€/mois</span></div> | |
| <div style="display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(201,168,76,0.06);"><span>Planning RDV — Cal.com</span><span style="font-family:'DM Mono',monospace; color:var(--success);">0€</span></div> | |
| <div style="display:flex; justify-content:space-between; padding:8px 0; font-weight:600; border-top:2px solid var(--gold); margin-top:8px;"><span style="color:var(--gold);">TOTAL</span><span style="font-family:'DM Mono',monospace; color:var(--gold);">~130€/mois</span></div> | |
| </div> | |
| </div> | |
| <!-- ═══════════════ LIENS RAPIDES ═══════════════ --> | |
| <div class="card"> | |
| <div class="card-header"><span class="card-label">Liens Rapides</span></div> | |
| <div style="font-size:12px;"> | |
| <a href="brief-mission-acquisition.html" style="display:block; padding:8px 0; color:var(--electric); text-decoration:none; border-bottom:1px solid rgba(201,168,76,0.06);">Brief Cowork (document complet)</a> | |
| <a href="../brand/brand-guide.html" style="display:block; padding:8px 0; color:var(--electric); text-decoration:none; border-bottom:1px solid rgba(201,168,76,0.06);">Brand Guide</a> | |
| <a href="tarification.html" style="display:block; padding:8px 0; color:var(--electric); text-decoration:none; border-bottom:1px solid rgba(201,168,76,0.06);">Grille Tarifaire</a> | |
| <a href="../juridique/contrat-type-courtier.md" style="display:block; padding:8px 0; color:var(--electric); text-decoration:none; border-bottom:1px solid rgba(201,168,76,0.06);">Contrat Type Courtier</a> | |
| <a href="../scripts-appel/script-principal.html" style="display:block; padding:8px 0; color:var(--electric); text-decoration:none; border-bottom:1px solid rgba(201,168,76,0.06);">Script d'Appel</a> | |
| <a href="https://courtiers-energie.info/liste-des-courtiers-en-energie-francais/" target="_blank" style="display:block; padding:8px 0; color:var(--gold); text-decoration:none;">Répertoire 70 courtiers (externe)</a> | |
| </div> | |
| </div> | |
| </div><!-- /dash-grid --> | |
| </div><!-- /main --> | |
| <script> | |
| // ── DATE ── | |
| document.getElementById('current-date').textContent = new Date().toLocaleDateString('fr-FR', {weekday:'long', year:'numeric', month:'long', day:'numeric'}); | |
| // ── PIPELINE SYNC (reads from brief localStorage) ── | |
| function syncPipeline() { | |
| const statuses = {new:0, email:0, linkedin:0, interested:0, rdv:0, offer:0, closed:0, lost:0}; | |
| const targets = ['mce','oxeo','optima','you','affinicia','opera','jechange','enerbioflex','hopenergie','studeffi','lelynx']; | |
| targets.forEach(t => { | |
| const s = localStorage.getItem('cv-status-' + t) || 'new'; | |
| if (statuses.hasOwnProperty(s)) statuses[s]++; | |
| }); | |
| document.getElementById('pipe-new').textContent = statuses.new; | |
| document.getElementById('pipe-email').textContent = statuses.email; | |
| document.getElementById('pipe-linkedin').textContent = statuses.linkedin; | |
| document.getElementById('pipe-interested').textContent = statuses.interested; | |
| document.getElementById('pipe-rdv').textContent = statuses.rdv; | |
| document.getElementById('pipe-offer').textContent = statuses.offer; | |
| document.getElementById('pipe-closed').textContent = statuses.closed; | |
| document.getElementById('kpi-contacted').textContent = statuses.email + statuses.linkedin + statuses.interested + statuses.rdv + statuses.offer + statuses.closed; | |
| document.getElementById('kpi-interested').textContent = statuses.interested; | |
| document.getElementById('kpi-rdv').textContent = statuses.rdv; | |
| document.getElementById('kpi-closed').textContent = statuses.closed; | |
| document.getElementById('kpi-lost').textContent = statuses.lost; | |
| } | |
| // ── CEO ACTIONS ── | |
| function toggleCeoAction(check) { | |
| const item = check.parentElement; | |
| item.classList.toggle('done'); | |
| const key = 'ceo-' + item.dataset.key; | |
| localStorage.setItem(key, item.classList.contains('done') ? 'done' : ''); | |
| } | |
| function loadCeoActions() { | |
| document.querySelectorAll('#ceo-actions .action-item').forEach(item => { | |
| const key = 'ceo-' + item.dataset.key; | |
| if (localStorage.getItem(key) === 'done') item.classList.add('done'); | |
| }); | |
| } | |
| // ── WEEKLY LOG ── | |
| function saveLog(input) { | |
| localStorage.setItem('cv-' + input.dataset.key, input.value); | |
| updateTotals(); | |
| } | |
| function loadLogs() { | |
| document.querySelectorAll('.log-table input').forEach(input => { | |
| const val = localStorage.getItem('cv-' + input.dataset.key); | |
| if (val) input.value = val; | |
| }); | |
| updateTotals(); | |
| } | |
| function updateTotals() { | |
| const cols = ['em','lc','lm','ap','rv','ld']; | |
| const days = ['lun','mar','mer','jeu','ven']; | |
| cols.forEach(col => { | |
| let total = 0; | |
| days.forEach(day => { | |
| const input = document.querySelector(`input[data-key="log-${day}-${col}"]`); | |
| if (input) total += parseInt(input.value) || 0; | |
| }); | |
| const el = document.getElementById('tot-' + col); | |
| if (el) el.textContent = total; | |
| }); | |
| } | |
| // ── INIT ── | |
| document.addEventListener('DOMContentLoaded', () => { | |
| syncPipeline(); | |
| loadCeoActions(); | |
| loadLogs(); | |
| // Auto-refresh pipeline every 5 seconds (picks up changes from brief tab) | |
| setInterval(syncPipeline, 5000); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |