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 — Module Acquisition Partenaires</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); | |
| --kanban-neutral: #484f58; | |
| } | |
| *, *::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.92); | |
| backdrop-filter: blur(16px); | |
| -webkit-backdrop-filter: blur(16px); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .header-inner { | |
| max-width: 1200px; margin: 0 auto; | |
| padding: 14px 24px; | |
| display: flex; align-items: center; justify-content: space-between; | |
| flex-wrap: wrap; gap: 10px; | |
| } | |
| .brand-title { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 20px; font-weight: 700; | |
| letter-spacing: 3px; color: var(--white); | |
| white-space: nowrap; | |
| } | |
| .brand-title em { font-style: normal; color: var(--gold); } | |
| .brand-sub { | |
| font-size: 10px; letter-spacing: 2px; | |
| text-transform: uppercase; color: var(--grey-mid); | |
| margin-top: 2px; | |
| } | |
| .nav-strip { | |
| display: flex; gap: 4px; | |
| overflow-x: auto; -webkit-overflow-scrolling: touch; | |
| scrollbar-width: none; padding: 4px 0; | |
| } | |
| .nav-strip::-webkit-scrollbar { display: none; } | |
| .nav-btn { | |
| background: transparent; border: 1px solid rgba(201,168,76,0.25); | |
| color: var(--grey-light); font-size: 11px; font-weight: 500; | |
| padding: 6px 14px; border-radius: 20px; | |
| cursor: pointer; white-space: nowrap; | |
| transition: all 0.25s ease; | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .nav-btn:hover, .nav-btn.active { | |
| background: var(--gold); color: var(--navy); | |
| border-color: var(--gold); | |
| } | |
| /* ── SECTIONS ── */ | |
| .section { | |
| max-width: 1200px; margin: 0 auto; | |
| padding: 60px 24px; | |
| } | |
| .section-label { | |
| font-size: 10px; letter-spacing: 3px; | |
| text-transform: uppercase; color: var(--gold); | |
| margin-bottom: 8px; font-weight: 600; | |
| } | |
| .section-title { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 32px; font-weight: 700; | |
| margin-bottom: 12px; line-height: 1.2; | |
| } | |
| .section-desc { | |
| font-size: 15px; color: var(--grey-light); | |
| max-width: 640px; margin-bottom: 40px; | |
| } | |
| .divider { | |
| width: 60px; height: 2px; | |
| background: linear-gradient(90deg, var(--gold), transparent); | |
| margin-bottom: 40px; | |
| } | |
| /* ── TIMELINE (Section 1) ── */ | |
| .timeline { | |
| display: flex; gap: 0; position: relative; | |
| padding: 20px 0; | |
| } | |
| .timeline::before { | |
| content: ''; position: absolute; | |
| top: 50%; left: 40px; right: 40px; | |
| height: 2px; | |
| background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold)); | |
| transform: translateY(-50%); | |
| z-index: 0; | |
| } | |
| .tl-step { | |
| flex: 1; text-align: center; | |
| position: relative; z-index: 1; | |
| cursor: pointer; padding: 16px 8px; | |
| } | |
| .tl-num { | |
| width: 44px; height: 44px; | |
| border-radius: 50%; margin: 0 auto 14px; | |
| display: flex; align-items: center; justify-content: center; | |
| font-family: 'DM Mono', monospace; font-size: 16px; font-weight: 700; | |
| background: var(--navy-light); border: 2px solid var(--gold); | |
| color: var(--gold); transition: all 0.3s ease; | |
| } | |
| .tl-step.active .tl-num, | |
| .tl-step:hover .tl-num { | |
| background: var(--gold); color: var(--navy); | |
| box-shadow: 0 0 24px rgba(201,168,76,0.4); | |
| } | |
| .tl-title { | |
| font-size: 13px; font-weight: 600; | |
| margin-bottom: 4px; transition: color 0.3s; | |
| } | |
| .tl-step.active .tl-title { color: var(--gold); } | |
| .tl-brief { | |
| font-size: 11px; color: var(--grey-mid); | |
| line-height: 1.4; | |
| } | |
| .tl-detail { | |
| margin-top: 30px; padding: 28px; | |
| background: var(--card-bg); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| display: none; animation: fadeUp 0.35s ease; | |
| } | |
| .tl-detail.visible { display: block; } | |
| @keyframes fadeUp { | |
| from { opacity:0; transform: translateY(12px); } | |
| to { opacity:1; transform: translateY(0); } | |
| } | |
| /* ── FILTER + CARDS (Section 2) ── */ | |
| .filter-bar { | |
| display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; | |
| } | |
| .filter-btn { | |
| padding: 8px 20px; border-radius: 20px; | |
| border: 1px solid rgba(201,168,76,0.3); | |
| background: transparent; color: var(--grey-light); | |
| font-size: 12px; font-weight: 500; cursor: pointer; | |
| font-family: 'Inter', sans-serif; | |
| transition: all 0.2s; | |
| } | |
| .filter-btn.active, .filter-btn:hover { | |
| background: var(--gold); color: var(--navy); | |
| border-color: var(--gold); | |
| } | |
| .targets-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); | |
| gap: 16px; | |
| } | |
| .target-card { | |
| background: var(--card-bg); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; overflow: hidden; | |
| transition: all 0.25s ease; | |
| } | |
| .target-card:hover { | |
| border-color: var(--gold); | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 32px rgba(0,0,0,0.3); | |
| } | |
| .target-card[data-hidden="true"] { display: none; } | |
| .tc-header { | |
| padding: 18px 20px; | |
| display: flex; justify-content: space-between; | |
| align-items: flex-start; cursor: pointer; | |
| } | |
| .tc-name { | |
| font-size: 15px; font-weight: 600; | |
| } | |
| .tc-city { | |
| font-size: 11px; color: var(--grey-mid); margin-top: 2px; | |
| } | |
| .tc-stat { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 11px; color: var(--electric-light); | |
| margin-top: 4px; | |
| } | |
| .tier-badge { | |
| font-size: 10px; font-weight: 600; | |
| padding: 3px 10px; border-radius: 10px; | |
| white-space: nowrap; flex-shrink: 0; | |
| } | |
| .tier-badge.t1 { background: rgba(201,168,76,0.2); color: var(--gold); } | |
| .tier-badge.t2 { background: rgba(0,168,232,0.15); color: var(--electric-light); } | |
| .tier-badge.t3 { background: rgba(206,212,218,0.12); color: var(--grey-mid); } | |
| .tc-body { | |
| padding: 0 20px; max-height: 0; | |
| overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; | |
| } | |
| .tc-body.open { | |
| max-height: 400px; padding: 0 20px 20px; | |
| } | |
| .tc-row { | |
| display: flex; gap: 8px; margin-bottom: 6px; | |
| font-size: 12px; | |
| } | |
| .tc-label { | |
| color: var(--grey-mid); min-width: 80px; flex-shrink: 0; | |
| } | |
| .tc-volume { | |
| font-family: 'DM Mono', monospace; | |
| color: var(--gold); font-size: 13px; | |
| margin-top: 8px; | |
| } | |
| /* ── EMAIL CARDS (Section 3) ── */ | |
| .email-card { | |
| background: var(--card-bg); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| margin-bottom: 20px; overflow: hidden; | |
| } | |
| .ec-header { | |
| padding: 18px 22px; | |
| display: flex; justify-content: space-between; | |
| align-items: center; cursor: pointer; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .ec-num { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 12px; color: var(--gold); | |
| } | |
| .ec-subject { | |
| font-size: 14px; font-weight: 600; | |
| flex: 1; margin-left: 14px; | |
| } | |
| .copy-btn { | |
| padding: 6px 16px; border-radius: 6px; | |
| border: 1px solid var(--electric); | |
| background: transparent; color: var(--electric); | |
| font-size: 11px; font-weight: 600; cursor: pointer; | |
| font-family: 'Inter', sans-serif; | |
| transition: all 0.2s; | |
| white-space: nowrap; | |
| } | |
| .copy-btn:hover { | |
| background: var(--electric); color: var(--navy); | |
| } | |
| .copy-btn.copied { | |
| border-color: var(--success); color: var(--success); | |
| } | |
| .ec-body { | |
| padding: 0 22px; max-height: 0; | |
| overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; | |
| } | |
| .ec-body.open { max-height: 800px; padding: 20px 22px; } | |
| .ec-field { | |
| font-size: 12px; margin-bottom: 6px; | |
| } | |
| .ec-field strong { color: var(--gold); } | |
| .ec-text { | |
| font-size: 13px; line-height: 1.7; | |
| color: var(--grey-light); margin-top: 12px; | |
| white-space: pre-line; | |
| } | |
| .ec-ps { | |
| margin-top: 14px; padding: 12px 16px; | |
| background: rgba(201,168,76,0.08); | |
| border-left: 2px solid var(--gold); | |
| border-radius: 0 6px 6px 0; | |
| font-size: 12px; color: var(--gold-light); | |
| font-style: italic; | |
| } | |
| /* ── LINKEDIN (Section 4) ── */ | |
| .li-card { | |
| background: var(--card-bg); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; padding: 22px; | |
| margin-bottom: 14px; | |
| position: relative; | |
| } | |
| .li-tag { | |
| font-size: 10px; font-weight: 600; | |
| text-transform: uppercase; letter-spacing: 1.5px; | |
| margin-bottom: 10px; | |
| } | |
| .li-tag.conn { color: var(--electric); } | |
| .li-tag.followup { color: var(--gold); } | |
| .li-tag.tier1 { color: var(--warning); } | |
| .li-text { | |
| font-size: 13px; line-height: 1.7; | |
| color: var(--grey-light); | |
| } | |
| .li-char-count { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 10px; color: var(--grey-mid); | |
| margin-top: 8px; | |
| } | |
| .li-actions { | |
| display: flex; justify-content: flex-end; | |
| margin-top: 12px; | |
| } | |
| /* ── SCRIPT ACCORDION (Section 5) ── */ | |
| .script-phase { | |
| background: var(--card-bg); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; margin-bottom: 10px; | |
| overflow: hidden; | |
| } | |
| .sp-header { | |
| padding: 18px 22px; | |
| display: flex; align-items: center; gap: 14px; | |
| cursor: pointer; | |
| } | |
| .sp-num { | |
| width: 36px; height: 36px; border-radius: 50%; | |
| display: flex; align-items: center; justify-content: center; | |
| font-family: 'DM Mono', monospace; font-size: 14px; | |
| background: var(--navy-mid); color: var(--electric); | |
| flex-shrink: 0; | |
| } | |
| .sp-title { | |
| font-size: 15px; font-weight: 600; flex: 1; | |
| } | |
| .sp-time { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 11px; color: var(--grey-mid); | |
| } | |
| .sp-chevron { | |
| transition: transform 0.3s; | |
| color: var(--grey-mid); font-size: 14px; | |
| } | |
| .script-phase.open .sp-chevron { transform: rotate(180deg); } | |
| .sp-body { | |
| max-height: 0; overflow: hidden; | |
| transition: max-height 0.4s ease; | |
| } | |
| .sp-body.open { max-height: 2000px; } | |
| .sp-content { | |
| padding: 0 22px 22px; | |
| } | |
| .say-card { | |
| padding: 14px 18px; border-radius: 8px; | |
| margin-bottom: 10px; font-size: 13px; line-height: 1.6; | |
| } | |
| .say-good { | |
| background: rgba(46,204,113,0.08); | |
| border-left: 3px solid var(--success); | |
| } | |
| .say-good .say-label { color: var(--success); } | |
| .say-bad { | |
| background: rgba(231,76,60,0.08); | |
| border-left: 3px solid var(--danger); | |
| } | |
| .say-bad .say-label { color: var(--danger); } | |
| .say-label { | |
| font-size: 10px; font-weight: 700; | |
| text-transform: uppercase; letter-spacing: 1px; | |
| margin-bottom: 6px; | |
| } | |
| .objection-item { | |
| margin-bottom: 14px; | |
| } | |
| .obj-trigger { | |
| font-weight: 600; color: var(--warning); | |
| font-size: 13px; margin-bottom: 6px; | |
| } | |
| .obj-response { | |
| font-size: 13px; color: var(--grey-light); | |
| line-height: 1.6; padding-left: 14px; | |
| border-left: 2px solid var(--electric); | |
| } | |
| /* ── OFFRE DECOUVERTE (Section 6) ── */ | |
| .offre-card { | |
| background: linear-gradient(135deg, rgba(22,35,64,0.9), rgba(30,58,95,0.6)); | |
| border: 2px solid var(--gold); | |
| border-radius: 16px; padding: 40px; | |
| position: relative; overflow: hidden; | |
| } | |
| .offre-card::before { | |
| content: ''; position: absolute; | |
| top: -60px; right: -60px; | |
| width: 180px; height: 180px; | |
| background: radial-gradient(circle, rgba(201,168,76,0.1), transparent 70%); | |
| border-radius: 50%; | |
| } | |
| .offre-badge { | |
| display: inline-block; | |
| background: var(--gold); color: var(--navy); | |
| font-size: 10px; font-weight: 700; | |
| letter-spacing: 2px; text-transform: uppercase; | |
| padding: 5px 16px; border-radius: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .offre-title { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 28px; font-weight: 700; | |
| margin-bottom: 24px; | |
| } | |
| .offre-list { | |
| list-style: none; margin-bottom: 30px; | |
| } | |
| .offre-list li { | |
| padding: 10px 0; | |
| border-bottom: 1px solid var(--border); | |
| font-size: 14px; display: flex; | |
| align-items: flex-start; gap: 12px; | |
| } | |
| .offre-list li:last-child { border-bottom: none; } | |
| .offre-check { | |
| color: var(--gold); font-size: 16px; | |
| flex-shrink: 0; margin-top: 2px; | |
| } | |
| .offre-criteria { | |
| margin-top: 24px; padding: 20px; | |
| background: rgba(10,22,40,0.5); | |
| border-radius: 10px; | |
| } | |
| .offre-criteria h4 { | |
| font-size: 13px; color: var(--gold); | |
| text-transform: uppercase; letter-spacing: 1px; | |
| margin-bottom: 12px; | |
| } | |
| .criteria-grid { | |
| display: grid; grid-template-columns: 1fr 1fr; | |
| gap: 8px; | |
| } | |
| .criteria-item { | |
| font-size: 12px; color: var(--grey-light); | |
| display: flex; align-items: center; gap: 8px; | |
| } | |
| .criteria-dot { | |
| width: 6px; height: 6px; border-radius: 50%; | |
| background: var(--gold); flex-shrink: 0; | |
| } | |
| /* ── CALCULATEUR (Section 7) ── */ | |
| .calc-container { | |
| display: grid; grid-template-columns: 1fr 1fr; | |
| gap: 40px; align-items: start; | |
| } | |
| .calc-inputs { display: flex; flex-direction: column; gap: 28px; } | |
| .calc-group label { | |
| display: block; font-size: 13px; | |
| font-weight: 500; margin-bottom: 10px; | |
| } | |
| .calc-group .calc-value { | |
| font-family: 'DM Mono', monospace; | |
| color: var(--gold); font-size: 14px; | |
| float: right; | |
| } | |
| .calc-range { | |
| width: 100%; height: 6px; | |
| -webkit-appearance: none; appearance: none; | |
| background: var(--navy-mid); border-radius: 3px; | |
| outline: none; cursor: pointer; | |
| } | |
| .calc-range::-webkit-slider-thumb { | |
| -webkit-appearance: none; appearance: none; | |
| width: 20px; height: 20px; border-radius: 50%; | |
| background: var(--gold); cursor: pointer; | |
| border: 2px solid var(--navy); | |
| box-shadow: 0 0 10px rgba(201,168,76,0.3); | |
| } | |
| .calc-range::-moz-range-thumb { | |
| width: 20px; height: 20px; border-radius: 50%; | |
| background: var(--gold); cursor: pointer; | |
| border: 2px solid var(--navy); | |
| } | |
| .calc-results { | |
| background: var(--card-bg); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; padding: 30px; | |
| } | |
| .calc-result-item { | |
| padding: 14px 0; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .calc-result-item:last-child { border-bottom: none; } | |
| .cr-label { | |
| font-size: 12px; color: var(--grey-mid); | |
| margin-bottom: 4px; | |
| } | |
| .cr-value { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 24px; font-weight: 700; | |
| color: var(--gold); | |
| } | |
| .cr-value.highlight-electric { color: var(--electric-light); } | |
| .cr-sub { | |
| font-size: 11px; color: var(--success); | |
| margin-top: 2px; | |
| } | |
| .cr-projection { | |
| margin-top: 20px; padding: 16px; | |
| background: rgba(201,168,76,0.08); | |
| border-radius: 8px; border: 1px solid rgba(201,168,76,0.2); | |
| font-size: 13px; line-height: 1.6; | |
| color: var(--gold-light); | |
| } | |
| /* ── PIPELINE KANBAN (Section 8) ── */ | |
| .kanban { | |
| display: grid; | |
| grid-template-columns: repeat(5, 1fr); | |
| gap: 12px; min-height: 300px; | |
| } | |
| .kanban-col { | |
| background: rgba(22,35,64,0.4); | |
| border-radius: 10px; padding: 0; | |
| min-height: 280px; display: flex; | |
| flex-direction: column; | |
| } | |
| .kc-header { | |
| padding: 12px 14px; border-radius: 10px 10px 0 0; | |
| font-size: 11px; font-weight: 700; | |
| text-transform: uppercase; letter-spacing: 1px; | |
| text-align: center; | |
| } | |
| .kc-header[data-col="identifie"] { background: var(--kanban-neutral); } | |
| .kc-header[data-col="contacte"] { background: var(--electric-dark); } | |
| .kc-header[data-col="rdv"] { background: rgba(201,168,76,0.7); color: var(--navy); } | |
| .kc-header[data-col="pilote"] { background: rgba(243,156,18,0.7); color: var(--navy); } | |
| .kc-header[data-col="signe"] { background: rgba(46,204,113,0.7); color: var(--navy); } | |
| .kc-count { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 10px; opacity: 0.7; | |
| margin-left: 6px; | |
| } | |
| .kc-body { | |
| padding: 8px; flex: 1; | |
| min-height: 60px; | |
| } | |
| .kanban-card { | |
| background: var(--navy-light); | |
| border: 1px solid var(--border); | |
| border-radius: 6px; padding: 10px 12px; | |
| margin-bottom: 6px; cursor: grab; | |
| font-size: 12px; transition: all 0.2s; | |
| } | |
| .kanban-card:active { cursor: grabbing; } | |
| .kanban-card:hover { | |
| border-color: var(--electric); | |
| transform: scale(1.02); | |
| } | |
| .kanban-card .kk-name { | |
| font-weight: 600; font-size: 12px; | |
| margin-bottom: 2px; | |
| } | |
| .kanban-card .kk-vol { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 10px; color: var(--gold); | |
| } | |
| .kanban-card .kk-mobile-move { | |
| display: none; margin-top: 6px; | |
| } | |
| .kk-mobile-select { | |
| width: 100%; padding: 4px; | |
| background: var(--navy); color: var(--grey-light); | |
| border: 1px solid var(--border); border-radius: 4px; | |
| font-size: 10px; font-family: 'Inter', sans-serif; | |
| } | |
| .kanban-card.dragging { | |
| opacity: 0.4; transform: scale(0.95); | |
| } | |
| .kc-body.drag-over { | |
| background: rgba(201,168,76,0.06); | |
| border: 1px dashed var(--gold); | |
| border-radius: 6px; | |
| } | |
| .reset-btn { | |
| margin-top: 16px; padding: 8px 20px; | |
| background: transparent; border: 1px solid var(--danger); | |
| color: var(--danger); border-radius: 6px; | |
| font-size: 12px; cursor: pointer; | |
| font-family: 'Inter', sans-serif; | |
| transition: all 0.2s; | |
| } | |
| .reset-btn:hover { | |
| background: var(--danger); color: var(--white); | |
| } | |
| /* ── FOOTER ── */ | |
| .site-footer { | |
| text-align: center; padding: 40px 24px; | |
| border-top: 1px solid var(--border); | |
| margin-top: 40px; | |
| } | |
| .footer-divider { | |
| width: 40px; height: 2px; | |
| background: var(--gold); margin: 0 auto 16px; | |
| } | |
| .footer-brand { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 16px; font-weight: 600; | |
| margin-bottom: 6px; | |
| } | |
| .footer-brand em { font-style: normal; color: var(--gold); } | |
| .footer-info { | |
| font-size: 12px; color: var(--grey-mid); | |
| } | |
| /* ── RESPONSIVE ── */ | |
| @media (max-width: 768px) { | |
| .header-inner { flex-direction: column; align-items: flex-start; } | |
| .timeline { flex-direction: column; gap: 0; } | |
| .timeline::before { | |
| top: 0; bottom: 0; left: 22px; right: auto; | |
| width: 2px; height: auto; | |
| transform: none; | |
| } | |
| .tl-step { text-align: left; display: flex; align-items: center; gap: 14px; padding: 10px 0; } | |
| .tl-num { margin: 0; flex-shrink: 0; } | |
| .targets-grid { grid-template-columns: 1fr; } | |
| .calc-container { grid-template-columns: 1fr; } | |
| .kanban { | |
| grid-template-columns: 1fr; | |
| } | |
| .kanban-card .kk-mobile-move { display: block; } | |
| .criteria-grid { grid-template-columns: 1fr; } | |
| .offre-card { padding: 24px; } | |
| .section-title { font-size: 24px; } | |
| } | |
| @media (max-width: 480px) { | |
| .section { padding: 40px 16px; } | |
| .nav-btn { font-size: 10px; padding: 8px 14px; min-height: 44px; } | |
| .cr-value { font-size: 20px; } | |
| .filter-btn, .copy-btn, .ec-copy { min-height: 44px; } | |
| .section-title { font-size: 20px; } | |
| .offre-card h3 { font-size: 20px; } | |
| input[type="range"]::-webkit-slider-thumb { width: 36px; height: 36px; } | |
| input[type="range"]::-moz-range-thumb { width: 36px; height: 36px; } | |
| } | |
| /* ── Focus & Accessibility ── */ | |
| *:focus-visible { | |
| outline: 2px solid #C9A84C; | |
| outline-offset: 2px; | |
| box-shadow: 0 0 0 4px rgba(201,168,76,0.2); | |
| } | |
| button:focus-visible, input:focus-visible, select:focus-visible { | |
| outline: 2px solid #C9A84C; | |
| outline-offset: 2px; | |
| } | |
| /* ── Hover Enhancements ── */ | |
| .li-card:hover { border-color: rgba(201,168,76,0.3); box-shadow: 0 4px 20px rgba(0,0,0,0.2); } | |
| .script-phase:hover, .email-card:hover { border-color: rgba(201,168,76,0.2); } | |
| .sp-header:hover, .ec-header:hover { color: #C9A84C; } | |
| .tl-step:hover { transform: scale(1.05); } | |
| /* ── Premium Offre Card ── */ | |
| .offre-card:hover { box-shadow: 0 0 40px rgba(201,168,76,0.15), 0 8px 32px rgba(0,0,0,0.3); } | |
| .offre-card li:hover { padding-left: 4px; transition: padding-left 0.2s ease; } | |
| @keyframes subtlePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.7; } } | |
| .offre-badge { animation: subtlePulse 3s ease-in-out infinite; } | |
| /* ── Section Label Accent ── */ | |
| .section-label::before { | |
| content: ''; | |
| display: inline-block; | |
| width: 20px; | |
| height: 2px; | |
| background: #C9A84C; | |
| vertical-align: middle; | |
| margin-right: 8px; | |
| } | |
| /* ── Kanban Gradient Headers ── */ | |
| .kc-header[data-col="identifie"] { background: linear-gradient(135deg, #484f58, #5a6270); } | |
| .kc-header[data-col="contacte"] { background: linear-gradient(135deg, #0077B6, #0088cc); } | |
| .kc-header[data-col="rdv"] { background: linear-gradient(135deg, #F39C12, #e8a020); } | |
| .kc-header[data-col="pilote"] { background: linear-gradient(135deg, #C9A84C, #d4b85a); } | |
| .kc-header[data-col="signe"] { background: linear-gradient(135deg, #2ECC71, #3dd67e); } | |
| /* ── Calculator Polish ── */ | |
| .calc-results:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.25); } | |
| .cr-projection:hover { box-shadow: 0 4px 20px rgba(201,168,76,0.15); } | |
| /* ── Range Slider Touch Targets ── */ | |
| input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; } | |
| input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; } | |
| </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">Module Acquisition Partenaires</div> | |
| </div> | |
| <nav class="nav-strip"> | |
| <button class="nav-btn active" onclick="scrollTo_s('s1')">Stratégie</button> | |
| <button class="nav-btn" onclick="scrollTo_s('s2')">Cibles</button> | |
| <button class="nav-btn" onclick="scrollTo_s('s3')">Emails</button> | |
| <button class="nav-btn" onclick="scrollTo_s('s4')">LinkedIn</button> | |
| <button class="nav-btn" onclick="scrollTo_s('s5')">Script Appel</button> | |
| <button class="nav-btn" onclick="scrollTo_s('s6')">Offre Découverte</button> | |
| <button class="nav-btn" onclick="scrollTo_s('s7')">Calculateur ROI</button> | |
| <button class="nav-btn" onclick="scrollTo_s('s8')">Pipeline</button> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- ═══════════ SECTION 1: STRATEGIE ═══════════ --> | |
| <section class="section" id="s1"> | |
| <div class="section-label">Section 01</div> | |
| <h2 class="section-title">Stratégie d’Approche</h2> | |
| <p class="section-desc">Une séquence d’acquisition en 5 étapes, conçue pour convertir les courtiers en énergie B2B en partenaires long terme.</p> | |
| <div class="divider"></div> | |
| <div class="timeline" id="timeline"> | |
| <div class="tl-step active" data-step="1" onclick="showStep(1)"> | |
| <div class="tl-num">01</div> | |
| <div> | |
| <div class="tl-title">Recherche</div> | |
| <div class="tl-brief">Audit LinkedIn + site web</div> | |
| </div> | |
| </div> | |
| <div class="tl-step" data-step="2" onclick="showStep(2)"> | |
| <div class="tl-num">02</div> | |
| <div> | |
| <div class="tl-title">Connexion LinkedIn</div> | |
| <div class="tl-brief">Demande personnalisée</div> | |
| </div> | |
| </div> | |
| <div class="tl-step" data-step="3" onclick="showStep(3)"> | |
| <div class="tl-num">03</div> | |
| <div> | |
| <div class="tl-title">Séquence Email</div> | |
| <div class="tl-brief">3 emails sur 8 jours</div> | |
| </div> | |
| </div> | |
| <div class="tl-step" data-step="4" onclick="showStep(4)"> | |
| <div class="tl-num">04</div> | |
| <div> | |
| <div class="tl-title">Appel Téléphonique</div> | |
| <div class="tl-brief">Si pas de réponse</div> | |
| </div> | |
| </div> | |
| <div class="tl-step" data-step="5" onclick="showStep(5)"> | |
| <div class="tl-num">05</div> | |
| <div> | |
| <div class="tl-title">Offre Découverte</div> | |
| <div class="tl-brief">5 RDV zéro risque</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tl-detail visible" id="step-detail-1"> | |
| <strong style="color:var(--gold);">🔍 Recherche & Audit</strong> | |
| <p style="margin-top:10px; font-size:13px; color:var(--grey-light); line-height:1.7;"> | |
| Avant tout contact, on analyse en profondeur le courtier cible :<br> | |
| • <strong>LinkedIn</strong> : taille équipe commerciale, publications récentes, recrutements en cours<br> | |
| • <strong>Site web</strong> : zones géographiques, types d’énergie (gaz, électricité, multi), modèle (franchise vs direct)<br> | |
| • <strong>Société.com</strong> : chiffre d’affaires, croissance, effectif<br> | |
| • <strong>Actualités</strong> : levée de fonds, fusion, expansion, recrutement<br><br> | |
| <em style="color:var(--grey-mid);">Objectif : identifier le pain point spécifique pour personnaliser le premier message.</em> | |
| </p> | |
| </div> | |
| <div class="tl-detail" id="step-detail-2"> | |
| <strong style="color:var(--gold);">🤝 Connexion LinkedIn Personnalisée</strong> | |
| <p style="margin-top:10px; font-size:13px; color:var(--grey-light); line-height:1.7;"> | |
| Envoi d’une demande de connexion avec note personnalisée (300 caractères max) :<br> | |
| • Mentionner un élément spécifique trouvé lors de la recherche<br> | |
| • Ne pas pitcher immédiatement — créer la curiosité<br> | |
| • Taux d’acceptation visé : 40-60%<br><br> | |
| <em style="color:var(--grey-mid);">Timing : mardi à jeudi, 8h-10h ou 17h-19h.</em> | |
| </p> | |
| </div> | |
| <div class="tl-detail" id="step-detail-3"> | |
| <strong style="color:var(--gold);">✉️ Séquence Email (J+1 → J+4 → J+8)</strong> | |
| <p style="margin-top:10px; font-size:13px; color:var(--grey-light); line-height:1.7;"> | |
| Trois emails espacés sur 8 jours, chacun avec un angle différent :<br> | |
| • <strong>Email 1 (J+1)</strong> : Le coût du RDV non qualifié — problème/solution<br> | |
| • <strong>Email 2 (J+4)</strong> : L’Offre Découverte — 5 RDV zéro risque<br> | |
| • <strong>Email 3 (J+8)</strong> : FOMO concurrentiel — urgence et exclusivité<br><br> | |
| <em style="color:var(--grey-mid);">Taux d’ouverture visé : 35-50%. Taux de réponse : 8-15%.</em> | |
| </p> | |
| </div> | |
| <div class="tl-detail" id="step-detail-4"> | |
| <strong style="color:var(--gold);">📞 Appel Téléphonique</strong> | |
| <p style="margin-top:10px; font-size:13px; color:var(--grey-light); line-height:1.7;"> | |
| Si aucune réponse après la séquence email :<br> | |
| • Appel direct au décideur (directeur commercial ou fondateur)<br> | |
| • Reférencer les emails envoyés pour créer le lien<br> | |
| • Script structuré en 5 phases (voir Section 5)<br> | |
| • Objectif : décrocher un appel découverte de 15 minutes<br><br> | |
| <em style="color:var(--grey-mid);">Meilleurs créneaux : mardi-jeudi, 9h30-11h30.</em> | |
| </p> | |
| </div> | |
| <div class="tl-detail" id="step-detail-5"> | |
| <strong style="color:var(--gold);">🎁 Offre Découverte — Zéro Risque</strong> | |
| <p style="margin-top:10px; font-size:13px; color:var(--grey-light); line-height:1.7;"> | |
| La proposition irrésistible :<br> | |
| • <strong>5 RDV qualifiés</strong> avec vérification de la date d’échéance<br> | |
| • <strong>Paiement uniquement si qualifié</strong> — aucun risque financier<br> | |
| • <strong>Seuil</strong> : si moins de 4/5 qualifiés → remplacement gratuit<br> | |
| • <strong>Livraison</strong> : premiers RDV sous 48h<br><br> | |
| <em style="color:var(--grey-mid);">Taux de conversion offre découverte → contrat : 60-70% visé.</em> | |
| </p> | |
| </div> | |
| </section> | |
| <!-- ═══════════ SECTION 2: CIBLES ═══════════ --> | |
| <section class="section" id="s2"> | |
| <div class="section-label">Section 02</div> | |
| <h2 class="section-title">Top Partenaires Cibles</h2> | |
| <p class="section-desc">17 courtiers en énergie identifiés et segmentés par priorité. Cliquez sur une carte pour voir le détail.</p> | |
| <div class="divider"></div> | |
| <div class="filter-bar"> | |
| <button class="filter-btn active" onclick="filterTier('all', this)">Tous (17)</button> | |
| <button class="filter-btn" onclick="filterTier('1', this)">Tier 1 (5)</button> | |
| <button class="filter-btn" onclick="filterTier('2', this)">Tier 2 (6)</button> | |
| <button class="filter-btn" onclick="filterTier('3', this)">Tier 3 (6)</button> | |
| </div> | |
| <div class="targets-grid" id="targets-grid"> | |
| <!-- TIER 1 --> | |
| <div class="target-card" data-tier="1" onclick="toggleCard(this)"> | |
| <div class="tc-header"> | |
| <div> | |
| <div class="tc-name">Mon Courtier Énergie (MCE)</div> | |
| <div class="tc-city">Bordeaux</div> | |
| <div class="tc-stat">~100 collab · CA 24.7M€ · Euronext</div> | |
| </div> | |
| <span class="tier-badge t1">Tier 1</span> | |
| </div> | |
| <div class="tc-body"> | |
| <div class="tc-row"><span class="tc-label">Pourquoi</span><span>Leader coté en bourse, réseau de franchisés en pleine expansion</span></div> | |
| <div class="tc-row"><span class="tc-label">Angle</span><span>Franchisés sur 13 départements non couverts — besoin de volume de RDV pour accélérer le déploiement</span></div> | |
| <div class="tc-row"><span class="tc-label">Décideur</span><span>Directeur du développement réseau / Directeur commercial</span></div> | |
| <div class="tc-volume">Volume estimé : 50-100 RDV/mois</div> | |
| </div> | |
| </div> | |
| <div class="target-card" data-tier="1" onclick="toggleCard(this)"> | |
| <div class="tc-header"> | |
| <div> | |
| <div class="tc-name">Alliance des Énergies + Compass</div> | |
| <div class="tc-city">Lyon</div> | |
| <div class="tc-stat">80+ collab · CA ~20M€ · Fusion PWE</div> | |
| </div> | |
| <span class="tier-badge t1">Tier 1</span> | |
| </div> | |
| <div class="tc-body"> | |
| <div class="tc-row"><span class="tc-label">Pourquoi</span><span>Fusion récente avec Place Watt Energies — phase d’expansion agressive</span></div> | |
| <div class="tc-row"><span class="tc-label">Angle</span><span>Post-fusion, besoin de générer +30% de RDV pour justifier la croissance</span></div> | |
| <div class="tc-row"><span class="tc-label">Décideur</span><span>Directeur commercial / Co-fondateur</span></div> | |
| <div class="tc-volume">Volume estimé : 40-80 RDV/mois</div> | |
| </div> | |
| </div> | |
| <div class="target-card" data-tier="1" onclick="toggleCard(this)"> | |
| <div class="tc-header"> | |
| <div> | |
| <div class="tc-name">ATOO Énergie</div> | |
| <div class="tc-city">Morlaix + Nantes</div> | |
| <div class="tc-stat">20 ans d’expérience · Réseau indépendants</div> | |
| </div> | |
| <span class="tier-badge t1">Tier 1</span> | |
| </div> | |
| <div class="tc-body"> | |
| <div class="tc-row"><span class="tc-label">Pourquoi</span><span>Réseau d’indépendants en croissance, besoin d’onboarding rapide</span></div> | |
| <div class="tc-row"><span class="tc-label">Angle</span><span>Package onboarding : fournir des RDV qualifiés aux nouveaux indépendants dès J+1</span></div> | |
| <div class="tc-row"><span class="tc-label">Décideur</span><span>Directeur du réseau / Fondateur</span></div> | |
| <div class="tc-volume">Volume estimé : 30-60 RDV/mois</div> | |
| </div> | |
| </div> | |
| <div class="target-card" data-tier="1" onclick="toggleCard(this)"> | |
| <div class="tc-header"> | |
| <div> | |
| <div class="tc-name">Capitole Énergie (Groupe EPSA)</div> | |
| <div class="tc-city">Toulouse</div> | |
| <div class="tc-stat">7e Champion Croissance 2025 · CIF</div> | |
| </div> | |
| <span class="tier-badge t1">Tier 1</span> | |
| </div> | |
| <div class="tc-body"> | |
| <div class="tc-row"><span class="tc-label">Pourquoi</span><span>Croissance fulgurante, classé 7e Champion de la Croissance 2025</span></div> | |
| <div class="tc-row"><span class="tc-label">Angle</span><span>Certification CIF — besoin de RDV ultra-qualifiés pour maintenir la qualité de service</span></div> | |
| <div class="tc-row"><span class="tc-label">Décideur</span><span>Directeur commercial / DG</span></div> | |
| <div class="tc-volume">Volume estimé : 30-50 RDV/mois</div> | |
| </div> | |
| </div> | |
| <div class="target-card" data-tier="1" onclick="toggleCard(this)"> | |
| <div class="tc-header"> | |
| <div> | |
| <div class="tc-name">Opéra Énergie</div> | |
| <div class="tc-city">Lyon</div> | |
| <div class="tc-stat">~150 collab · CA 32.7M€ · Leader</div> | |
| </div> | |
| <span class="tier-badge t1">Tier 1</span> | |
| </div> | |
| <div class="tc-body"> | |
| <div class="tc-row"><span class="tc-label">Pourquoi</span><span>Plus gros courtier en France, CA 32.7M€, équipe commerciale massive</span></div> | |
| <div class="tc-row"><span class="tc-label">Angle</span><span>Économies d’échelle — à ce volume, externaliser la prospection devient un avantage concurrentiel</span></div> | |
| <div class="tc-row"><span class="tc-label">Décideur</span><span>VP Sales / Directeur des opérations</span></div> | |
| <div class="tc-volume">Volume estimé : 50-100 RDV/mois</div> | |
| </div> | |
| </div> | |
| <!-- TIER 2 --> | |
| <div class="target-card" data-tier="2" onclick="toggleCard(this)"> | |
| <div class="tc-header"> | |
| <div> | |
| <div class="tc-name">Collectif Énergie</div> | |
| <div class="tc-city">National (franchise)</div> | |
| <div class="tc-stat">95 territoires · Modèle franchise</div> | |
| </div> | |
| <span class="tier-badge t2">Tier 2</span> | |
| </div> | |
| <div class="tc-body"> | |
| <div class="tc-row"><span class="tc-label">Pourquoi</span><span>Réseau de franchise couvrant 95 territoires en France</span></div> | |
| <div class="tc-row"><span class="tc-label">Angle</span><span>Fournir des RDV qualifiés aux franchisés pour accélérer leur démarrage</span></div> | |
| <div class="tc-volume">Volume estimé : 20-40 RDV/mois</div> | |
| </div> | |
| </div> | |
| <div class="target-card" data-tier="2" onclick="toggleCard(this)"> | |
| <div class="tc-header"> | |
| <div> | |
| <div class="tc-name">Optima Énergie</div> | |
| <div class="tc-city">Vannes</div> | |
| <div class="tc-stat">Expansion Toulouse/Lyon</div> | |
| </div> | |
| <span class="tier-badge t2">Tier 2</span> | |
| </div> | |
| <div class="tc-body"> | |
| <div class="tc-row"><span class="tc-label">Pourquoi</span><span>En pleine expansion géographique vers le Sud</span></div> | |
| <div class="tc-row"><span class="tc-label">Angle</span><span>Accélérer l’implantation sur les nouvelles zones sans recruter</span></div> | |
| <div class="tc-volume">Volume estimé : 15-30 RDV/mois</div> | |
| </div> | |
| </div> | |
| <div class="target-card" data-tier="2" onclick="toggleCard(this)"> | |
| <div class="tc-header"> | |
| <div> | |
| <div class="tc-name">Place des Énergies</div> | |
| <div class="tc-city">Nord</div> | |
| <div class="tc-stat">Partenaire Selectra</div> | |
| </div> | |
| <span class="tier-badge t2">Tier 2</span> | |
| </div> | |
| <div class="tc-body"> | |
| <div class="tc-row"><span class="tc-label">Pourquoi</span><span>Partenariat avec Selectra, besoin de volume pour rentabiliser</span></div> | |
| <div class="tc-row"><span class="tc-label">Angle</span><span>Compléter les leads Selectra avec de la prospection sortante qualifiée</span></div> | |
| <div class="tc-volume">Volume estimé : 15-25 RDV/mois</div> | |
| </div> | |
| </div> | |
| <div class="target-card" data-tier="2" onclick="toggleCard(this)"> | |
| <div class="tc-header"> | |
| <div> | |
| <div class="tc-name">Dune Énergie</div> | |
| <div class="tc-city">Lille</div> | |
| <div class="tc-stat">8000+ clients</div> | |
| </div> | |
| <span class="tier-badge t2">Tier 2</span> | |
| </div> | |
| <div class="tc-body"> | |
| <div class="tc-row"><span class="tc-label">Pourquoi</span><span>Base client importante, opportunité d’upsell et de réactivation</span></div> | |
| <div class="tc-row"><span class="tc-label">Angle</span><span>Générer des RDV sur les clients proches de l’échéance pour le renouvellement</span></div> | |
| <div class="tc-volume">Volume estimé : 10-20 RDV/mois</div> | |
| </div> | |
| </div> | |
| <div class="target-card" data-tier="2" onclick="toggleCard(this)"> | |
| <div class="tc-header"> | |
| <div> | |
| <div class="tc-name">Le Lab’ des Énergies</div> | |
| <div class="tc-city">National</div> | |
| <div class="tc-stat">2500+ pros · Courtage gratuit</div> | |
| </div> | |
| <span class="tier-badge t2">Tier 2</span> | |
| </div> | |
| <div class="tc-body"> | |
| <div class="tc-row"><span class="tc-label">Pourquoi</span><span>Modèle gratuit pour le client, besoin de volume pour générer les commissions</span></div> | |
| <div class="tc-row"><span class="tc-label">Angle</span><span>Augmenter le pipeline de prospects qualifiés à coût maîtrisé</span></div> | |
| <div class="tc-volume">Volume estimé : 15-30 RDV/mois</div> | |
| </div> | |
| </div> | |
| <div class="target-card" data-tier="2" onclick="toggleCard(this)"> | |
| <div class="tc-header"> | |
| <div> | |
| <div class="tc-name">Energy Group</div> | |
| <div class="tc-city">France</div> | |
| <div class="tc-stat">Courtage + CEE + Fiscalité</div> | |
| </div> | |
| <span class="tier-badge t2">Tier 2</span> | |
| </div> | |
| <div class="tc-body"> | |
| <div class="tc-row"><span class="tc-label">Pourquoi</span><span>Offre diversifiée (courtage + CEE + fiscalité), chaque RDV a un potentiel multi-produit</span></div> | |
| <div class="tc-row"><span class="tc-label">Angle</span><span>RDV qualifiés multi-solutions pour maximiser le panier moyen par client</span></div> | |
| <div class="tc-volume">Volume estimé : 15-25 RDV/mois</div> | |
| </div> | |
| </div> | |
| <!-- TIER 3 --> | |
| <div class="target-card" data-tier="3" onclick="toggleCard(this)"> | |
| <div class="tc-header"> | |
| <div> | |
| <div class="tc-name">Les Courtiers Énergie</div> | |
| <div class="tc-city">Metz</div> | |
| <div class="tc-stat">Courtage régional Grand Est</div> | |
| </div> | |
| <span class="tier-badge t3">Tier 3</span> | |
| </div> | |
| <div class="tc-body"> | |
| <div class="tc-row"><span class="tc-label">Angle</span><span>Extension de zone géographique via prospection externalisée</span></div> | |
| <div class="tc-volume">Volume estimé : 5-15 RDV/mois</div> | |
| </div> | |
| </div> | |
| <div class="target-card" data-tier="3" onclick="toggleCard(this)"> | |
| <div class="tc-header"> | |
| <div> | |
| <div class="tc-name">Courtage Énergies</div> | |
| <div class="tc-city">Alsace</div> | |
| <div class="tc-stat">Spécialiste régional</div> | |
| </div> | |
| <span class="tier-badge t3">Tier 3</span> | |
| </div> | |
| <div class="tc-body"> | |
| <div class="tc-row"><span class="tc-label">Angle</span><span>Croissance via externalisation sans investissement RH</span></div> | |
| <div class="tc-volume">Volume estimé : 5-15 RDV/mois</div> | |
| </div> | |
| </div> | |
| <div class="target-card" data-tier="3" onclick="toggleCard(this)"> | |
| <div class="tc-header"> | |
| <div> | |
| <div class="tc-name">WattValue</div> | |
| <div class="tc-city">Paris</div> | |
| <div class="tc-stat">Énergie verte · Premium</div> | |
| </div> | |
| <span class="tier-badge t3">Tier 3</span> | |
| </div> | |
| <div class="tc-body"> | |
| <div class="tc-row"><span class="tc-label">Angle</span><span>RDV qualifiés auprès d’entreprises sensibles à l’énergie verte</span></div> | |
| <div class="tc-volume">Volume estimé : 5-15 RDV/mois</div> | |
| </div> | |
| </div> | |
| <div class="target-card" data-tier="3" onclick="toggleCard(this)"> | |
| <div class="tc-header"> | |
| <div> | |
| <div class="tc-name">Mon Agence Énergies</div> | |
| <div class="tc-city">France</div> | |
| <div class="tc-stat">Courtage multi-énergie</div> | |
| </div> | |
| <span class="tier-badge t3">Tier 3</span> | |
| </div> | |
| <div class="tc-body"> | |
| <div class="tc-row"><span class="tc-label">Angle</span><span>Déléguer la prospection pour se concentrer sur le closing</span></div> | |
| <div class="tc-volume">Volume estimé : 5-15 RDV/mois</div> | |
| </div> | |
| </div> | |
| <div class="target-card" data-tier="3" onclick="toggleCard(this)"> | |
| <div class="tc-header"> | |
| <div> | |
| <div class="tc-name">Ma Meilleure Énergie</div> | |
| <div class="tc-city">France</div> | |
| <div class="tc-stat">Comparateur + courtage</div> | |
| </div> | |
| <span class="tier-badge t3">Tier 3</span> | |
| </div> | |
| <div class="tc-body"> | |
| <div class="tc-row"><span class="tc-label">Angle</span><span>Compléter le flux inbound avec de la prospection sortante ciblée</span></div> | |
| <div class="tc-volume">Volume estimé : 5-15 RDV/mois</div> | |
| </div> | |
| </div> | |
| <div class="target-card" data-tier="3" onclick="toggleCard(this)"> | |
| <div class="tc-header"> | |
| <div> | |
| <div class="tc-name">SCE (Syndicat des Courtiers)</div> | |
| <div class="tc-city">France</div> | |
| <div class="tc-stat">Syndicat professionnel</div> | |
| </div> | |
| <span class="tier-badge t3">Tier 3</span> | |
| </div> | |
| <div class="tc-body"> | |
| <div class="tc-row"><span class="tc-label">Angle</span><span>Partenariat institutionnel — devenir prestataire référencé du syndicat</span></div> | |
| <div class="tc-volume">Volume estimé : Accès réseau</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══════════ SECTION 3: EMAILS ═══════════ --> | |
| <section class="section" id="s3"> | |
| <div class="section-label">Section 03</div> | |
| <h2 class="section-title">Emails Prêts à Envoyer</h2> | |
| <p class="section-desc">Trois emails de prospection optimisés. Cliquez pour ouvrir, puis copiez le contenu en un clic.</p> | |
| <div class="divider"></div> | |
| <!-- Email 1 --> | |
| <div class="email-card"> | |
| <div class="ec-header" onclick="toggleEmail(this)"> | |
| <span class="ec-num">01</span> | |
| <span class="ec-subject">Le Coût du RDV Non Qualifié</span> | |
| <button class="copy-btn" onclick="event.stopPropagation(); copyEmail(this, 'email1')">Copier</button> | |
| </div> | |
| <div class="ec-body" id="email1-body"> | |
| <div class="ec-field"><strong>Objet :</strong> [Prénom], combien vous coûte un RDV non qualifié ?</div> | |
| <div class="ec-text">Bonjour [Prénom], | |
| En tant que courtier en énergie, vous le savez : un commercial qui se déplace pour un RDV où le contrat n'arrive pas à échéance, c'est 200 à 400€ perdus. | |
| Entre le temps de déplacement, la préparation, et le coût salarial — chaque RDV non qualifié est un trou dans votre rentabilité. | |
| Chez CALL'VANTAGE, nous prenons des RDV qualifiés avec une règle simple : nous vérifions la date d'échéance du contrat avant de vous transmettre le RDV. | |
| Si le RDV n'est pas qualifié, il est remplacé. | |
| Nos tarifs : 30 à 50€ par RDV qualifié. | |
| Seriez-vous disponible pour un échange de 15 minutes cette semaine ? | |
| Cordialement, | |
| [Votre nom] | |
| CALL'VANTAGE</div> | |
| <div class="ec-ps">P.S. : Nous travaillons exclusivement avec des courtiers en énergie B2B. Ce n'est pas du mass-market — c'est de la prospection chirurgicale.</div> | |
| </div> | |
| </div> | |
| <!-- Email 2 --> | |
| <div class="email-card"> | |
| <div class="ec-header" onclick="toggleEmail(this)"> | |
| <span class="ec-num">02</span> | |
| <span class="ec-subject">L’Offre Découverte — Zéro Risque</span> | |
| <button class="copy-btn" onclick="event.stopPropagation(); copyEmail(this, 'email2')">Copier</button> | |
| </div> | |
| <div class="ec-body" id="email2-body"> | |
| <div class="ec-field"><strong>Objet :</strong> 5 RDV qualifiés, zéro risque — pour [Entreprise]</div> | |
| <div class="ec-text">Bonjour [Prénom], | |
| Suite à mon précédent message, je voulais vous présenter notre Offre Découverte, conçue spécifiquement pour les courtiers qui veulent tester sans risque : | |
| • 5 RDV qualifiés avec vérification de la date d'échéance | |
| • Facturés uniquement si qualifiés | |
| • Seuil : si moins de 4 RDV sur 5 sont qualifiés → remplacement gratuit | |
| • Pas de frais de setup, pas d'abonnement | |
| • Premiers RDV livrés sous 48h | |
| Nos clients constatent un taux de transformation de 25-35%, contre 10-15% en génération interne. | |
| La différence ? Chaque RDV est vérifié : décideur confirmé, échéance validée, créneau fixé. | |
| Quand seriez-vous disponible pour en discuter ? | |
| Cordialement, | |
| [Votre nom] | |
| CALL'VANTAGE</div> | |
| </div> | |
| </div> | |
| <!-- Email 3 --> | |
| <div class="email-card"> | |
| <div class="ec-header" onclick="toggleEmail(this)"> | |
| <span class="ec-num">03</span> | |
| <span class="ec-subject">FOMO Concurrentiel</span> | |
| <button class="copy-btn" onclick="event.stopPropagation(); copyEmail(this, 'email3')">Copier</button> | |
| </div> | |
| <div class="ec-body" id="email3-body"> | |
| <div class="ec-field"><strong>Objet :</strong> Vos concurrents externalisent déjà leur prospection</div> | |
| <div class="ec-text">Bonjour [Prénom], | |
| Faisons un calcul rapide : | |
| Un commercial terrain coûte 4 000 à 5 000€/mois chargé. | |
| Il génère en moyenne 15 à 20 RDV/mois. | |
| Coût réel par RDV : 250 à 330€. | |
| Avec CALL'VANTAGE : | |
| • 30 à 100€ par RDV qualifié | |
| • Vérification de la date d'échéance du contrat | |
| • Remplacement garanti si non qualifié | |
| • Zéro charge sociale, zéro management | |
| Vos concurrents les plus agiles ont déjà fait ce calcul. | |
| 15 minutes pour en discuter ? | |
| Cordialement, | |
| [Votre nom] | |
| CALL'VANTAGE</div> | |
| <div class="ec-ps">P.S. : Nous ne travaillons qu'avec un nombre limité de courtiers par zone géographique. L'exclusivité territoriale est notre garantie de qualité.</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══════════ SECTION 4: LINKEDIN ═══════════ --> | |
| <section class="section" id="s4"> | |
| <div class="section-label">Section 04</div> | |
| <h2 class="section-title">Messages LinkedIn</h2> | |
| <p class="section-desc">Demandes de connexion et follow-ups optimisés pour LinkedIn. Chaque message respecte la limite de 300 caractères.</p> | |
| <div class="divider"></div> | |
| <h3 style="font-size:16px; margin-bottom:16px; color:var(--electric-light);">Demandes de connexion</h3> | |
| <div class="li-card"> | |
| <div class="li-tag conn">Version A — Directe</div> | |
| <div class="li-text" id="li-conn-a">Bonjour [Prénom], je dirige CALL'VANTAGE, spécialiste de la prise de RDV qualifiés pour les courtiers en énergie B2B. Nous vérifions la date d'échéance avant chaque RDV. J'aimerais échanger avec vous sur ce sujet.</div> | |
| <div class="li-char-count"></div> | |
| <div class="li-actions"><button class="copy-btn" onclick="copyLi(this, 'li-conn-a')">Copier</button></div> | |
| </div> | |
| <div class="li-card"> | |
| <div class="li-tag conn">Version B — Valeur</div> | |
| <div class="li-text" id="li-conn-b">Bonjour [Prénom], un RDV où le contrat n'arrive pas à échéance coûte 200-400€ à un courtier. Nous avons résolu ce problème. Seriez-vous ouvert à un échange de 10 min ?</div> | |
| <div class="li-char-count"></div> | |
| <div class="li-actions"><button class="copy-btn" onclick="copyLi(this, 'li-conn-b')">Copier</button></div> | |
| </div> | |
| <div class="li-card"> | |
| <div class="li-tag conn">Version C — Réseau / Tier 1</div> | |
| <div class="li-text" id="li-conn-c">Bonjour [Prénom], votre approche du courtage énergie est intéressante. Nous accompagnons des courtiers B2B sur la génération de RDV qualifiés avec vérification d'échéance. Ravi de vous ajouter à mon réseau.</div> | |
| <div class="li-char-count"></div> | |
| <div class="li-actions"><button class="copy-btn" onclick="copyLi(this, 'li-conn-c')">Copier</button></div> | |
| </div> | |
| <h3 style="font-size:16px; margin:32px 0 16px; color:var(--gold);">Follow-ups</h3> | |
| <div class="li-card"> | |
| <div class="li-tag followup">Follow-up J+2 — Message valeur</div> | |
| <div class="li-text" id="li-fu-2">Merci pour la connexion [Prénom] ! | |
| Chez CALL'VANTAGE, nous générons des RDV qualifiés exclusivement pour les courtiers en énergie B2B. | |
| Notre différence : nous vérifions la date d'échéance du contrat AVANT de vous transmettre le RDV. Si le RDV n'est pas qualifié, il est remplacé. | |
| Tarifs : 30 à 100€ par RDV qualifié (vs 250-330€ en interne). | |
| Est-ce que 15 min cette semaine vous conviendraient pour en discuter ?</div> | |
| <div class="li-actions"><button class="copy-btn" onclick="copyLi(this, 'li-fu-2')">Copier</button></div> | |
| </div> | |
| <div class="li-card"> | |
| <div class="li-tag followup">Follow-up J+5 — Cas client</div> | |
| <div class="li-text" id="li-fu-5">[Prénom], un cas concret : | |
| Avant CALL'VANTAGE : | |
| • Coût/RDV : ~300€ | |
| • Taux de transformation : 12% | |
| • RDV exploitables : 6 sur 20 | |
| Après CALL'VANTAGE : | |
| • Coût/RDV : 35€ | |
| • Taux de transformation : 28% | |
| • RDV exploitables : 19 sur 20 | |
| La clé ? Vérification systématique de l'échéance du contrat. | |
| On en parle ?</div> | |
| <div class="li-actions"><button class="copy-btn" onclick="copyLi(this, 'li-fu-5')">Copier</button></div> | |
| </div> | |
| <div class="li-card"> | |
| <div class="li-tag followup">Follow-up J+10 — Dernière chance</div> | |
| <div class="li-text" id="li-fu-10">[Prénom], dernier message — je ne veux pas insister. | |
| Nous lancons une Offre Découverte : 5 RDV qualifiés, facturés uniquement si qualifiés. Zéro risque. | |
| Important : nous ne travaillons qu'avec un nombre limité de courtiers par zone géographique pour garantir l'exclusivité. | |
| Si la prospection B2B énergie est un sujet pour vous, c'est le moment. | |
| Bonne continuation dans tous les cas.</div> | |
| <div class="li-actions"><button class="copy-btn" onclick="copyLi(this, 'li-fu-10')">Copier</button></div> | |
| </div> | |
| <h3 style="font-size:16px; margin:32px 0 16px; color:var(--warning);">Variantes Tier 1</h3> | |
| <div class="li-card"> | |
| <div class="li-tag tier1">MCE — Angle Euronext / Franchisés</div> | |
| <div class="li-text" id="li-t1-mce">Bonjour [Prénom], félicitations pour la performance de MCE sur Euronext. Avec votre expansion sur 13 départements, vos franchisés doivent avoir un besoin énorme en RDV qualifiés. Nous générons des RDV avec vérification d'échéance, spécifiquement pour le courtage énergie. Un échange rapide ?</div> | |
| <div class="li-actions"><button class="copy-btn" onclick="copyLi(this, 'li-t1-mce')">Copier</button></div> | |
| </div> | |
| <div class="li-card"> | |
| <div class="li-tag tier1">Alliance des Énergies — Angle Fusion PWE</div> | |
| <div class="li-text" id="li-t1-alliance">Bonjour [Prénom], la fusion Alliance + PWE est un move stratégique impressionnant. Pour absorber +30% de croissance, il faut du volume de RDV qualifiés. Nous sommes spécialisés courtage énergie B2B — vérification d'échéance incluse. Échangeons ?</div> | |
| <div class="li-actions"><button class="copy-btn" onclick="copyLi(this, 'li-t1-alliance')">Copier</button></div> | |
| </div> | |
| </section> | |
| <!-- ═══════════ SECTION 5: SCRIPT APPEL ═══════════ --> | |
| <section class="section" id="s5"> | |
| <div class="section-label">Section 05</div> | |
| <h2 class="section-title">Script d’Appel Partenaire</h2> | |
| <p class="section-desc">Script structuré en 5 phases pour convertir un décideur courtier en partenaire CALL’VANTAGE.</p> | |
| <div class="divider"></div> | |
| <!-- Phase 1 --> | |
| <div class="script-phase open"> | |
| <div class="sp-header" onclick="togglePhase(this)"> | |
| <div class="sp-num">1</div> | |
| <div class="sp-title">Accroche</div> | |
| <div class="sp-time">15s</div> | |
| <div class="sp-chevron">▼</div> | |
| </div> | |
| <div class="sp-body open"> | |
| <div class="sp-content"> | |
| <div class="say-card say-good"> | |
| <div class="say-label">✓ À dire</div> | |
| « Bonjour [Prénom], [votre nom] de CALL'VANTAGE. Je vous appelle car nous travaillons avec des courtiers en énergie sur un sujet qui les concerne tous : le coût et la qualité de leurs rendez-vous commerciaux. Est-ce que je vous dérange ? » | |
| </div> | |
| <div class="say-card say-bad"> | |
| <div class="say-label">✗ Ne pas dire</div> | |
| « Bonjour, je vous appelle pour vous proposer nos services de téléprospection... »<br> | |
| <span style="font-size:11px; color:var(--grey-mid);">Trop générique, déclenche le réflexe de rejet.</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 2 --> | |
| <div class="script-phase"> | |
| <div class="sp-header" onclick="togglePhase(this)"> | |
| <div class="sp-num">2</div> | |
| <div class="sp-title">Qualification</div> | |
| <div class="sp-time">30s</div> | |
| <div class="sp-chevron">▼</div> | |
| </div> | |
| <div class="sp-body"> | |
| <div class="sp-content"> | |
| <div class="say-card say-good"> | |
| <div class="say-label">✓ Questions de qualification</div> | |
| • « Comment générez-vous vos RDV commerciaux actuellement ? »<br> | |
| • « Combien de RDV par mois génère votre équipe ? »<br> | |
| • « Quel est votre coût estimé par RDV ? »<br> | |
| • « Sur ces RDV, quel pourcentage est réellement exploitable ? » | |
| </div> | |
| <p style="font-size:12px; color:var(--grey-mid); margin-top:10px;"><em>Objectif : faire prendre conscience du coût réel et du taux de déchet.</em></p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 3 --> | |
| <div class="script-phase"> | |
| <div class="sp-header" onclick="togglePhase(this)"> | |
| <div class="sp-num">3</div> | |
| <div class="sp-title">Pitch</div> | |
| <div class="sp-time">2 min</div> | |
| <div class="sp-chevron">▼</div> | |
| </div> | |
| <div class="sp-body"> | |
| <div class="sp-content"> | |
| <div class="say-card say-good"> | |
| <div class="say-label">✓ Situation → Problème → Solution → Preuve</div> | |
| <strong style="color:var(--electric-light);">Situation</strong><br> | |
| « Vous investissez [montant] par mois en prospection commerciale. »<br><br> | |
| <strong style="color:var(--warning);">Problème</strong><br> | |
| « Mais [X]% de vos RDV ne sont pas exploitables — le contrat n'arrive pas à échéance, le décideur n'est pas le bon, le créneau tombe à l'eau. »<br><br> | |
| <strong style="color:var(--success);">Solution</strong><br> | |
| « Chez CALL'VANTAGE, nous avons une règle simple : nous vérifions la date d'échéance du contrat AVANT de vous transmettre le RDV. Si le RDV n'est pas qualifié, il est remplacé gratuitement. Nos tarifs : 30 à 100€ par RDV qualifié. »<br><br> | |
| <strong style="color:var(--gold);">Preuve</strong><br> | |
| • 50 à 80% moins cher qu'un commercial interne<br> | |
| • Taux de transformation de 25-35% (vs 10-15% en interne)<br> | |
| • Exclusivité courtage énergie B2B — c'est tout ce qu'on fait | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 4 --> | |
| <div class="script-phase"> | |
| <div class="sp-header" onclick="togglePhase(this)"> | |
| <div class="sp-num">4</div> | |
| <div class="sp-title">Traitement des Objections</div> | |
| <div class="sp-time">variable</div> | |
| <div class="sp-chevron">▼</div> | |
| </div> | |
| <div class="sp-body"> | |
| <div class="sp-content"> | |
| <div class="objection-item"> | |
| <div class="obj-trigger">« On fait déjà en interne »</div> | |
| <div class="obj-response">« Parfait, c'est que le sujet est important pour vous. La question n'est pas de remplacer votre équipe, mais de la compléter. Vos commerciaux sont excellents en closing — nous, on leur fournit des RDV déjà qualifiés pour qu'ils se concentrent sur ce qu'ils font de mieux. »</div> | |
| </div> | |
| <div class="objection-item"> | |
| <div class="obj-trigger">« C'est au Maroc ? »</div> | |
| <div class="obj-response">« Oui, basés à Marrakech. Nos agents sont formés spécifiquement au courtage énergie B2B français — terminologie, réglementation, processus. Et notre garantie le prouve : si le RDV n'est pas qualifié, il est remplacé. Le risque est de notre côté, pas du vôtre. »</div> | |
| </div> | |
| <div class="objection-item"> | |
| <div class="obj-trigger">« C'est trop cher »</div> | |
| <div class="obj-response">« Comparons : un commercial interne coûte 4 000-5 000€ chargé pour 15-20 RDV, soit 250-330€ par RDV. Nous, c'est 30 à 100€, et uniquement si le RDV est qualifié. En réalité, c'est l'option la moins chère du marché. »</div> | |
| </div> | |
| <div class="objection-item"> | |
| <div class="obj-trigger">« On a déjà un prestataire »</div> | |
| <div class="obj-response">« Est-ce qu'il vérifie la date d'échéance du contrat avant de vous transmettre le RDV ? Est-ce qu'il remplace les RDV non qualifiés ? C'est notre différence. On peut tester avec 5 RDV en parallèle — vous comparerez les résultats. »</div> | |
| </div> | |
| <div class="objection-item"> | |
| <div class="obj-trigger">« Pas le budget en ce moment »</div> | |
| <div class="obj-response">« Justement, notre Offre Découverte est faite pour ça : 5 RDV, facturés uniquement s'ils sont qualifiés. Pas de setup, pas d'abonnement. Si les RDV ne sont pas bons, ça ne vous coûte rien. Le risque est zéro. »</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 5 --> | |
| <div class="script-phase"> | |
| <div class="sp-header" onclick="togglePhase(this)"> | |
| <div class="sp-num">5</div> | |
| <div class="sp-title">Closing — CTA</div> | |
| <div class="sp-time">15s</div> | |
| <div class="sp-chevron">▼</div> | |
| </div> | |
| <div class="sp-body"> | |
| <div class="sp-content"> | |
| <div class="say-card say-good"> | |
| <div class="say-label">✓ Call to Action</div> | |
| « On démarre avec l'Offre Découverte — 5 RDV qualifiés, zéro risque. Qu'est-ce qui vous empêcherait de tester ? » | |
| </div> | |
| <div class="say-card say-bad"> | |
| <div class="say-label">✗ À éviter</div> | |
| « Alors, est-ce que ça vous intéresse ? »<br> | |
| <span style="font-size:11px; color:var(--grey-mid);">Trop passif. Toujours proposer une action concrète.</span> | |
| </div> | |
| <p style="font-size:12px; color:var(--grey-mid); margin-top:14px;"> | |
| <strong>Si hésitation :</strong> « Je vous envoie un récapitulatif par email avec les détails de l'offre. On se fixe un créneau mardi prochain pour faire le point ? » | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══════════ SECTION 6: OFFRE DECOUVERTE ═══════════ --> | |
| <section class="section" id="s6"> | |
| <div class="section-label">Section 06</div> | |
| <h2 class="section-title">Offre Découverte</h2> | |
| <p class="section-desc">La proposition zéro risque qui convertit les courtiers hésitants en partenaires.</p> | |
| <div class="divider"></div> | |
| <div class="offre-card"> | |
| <div class="offre-badge">Offre Pilote</div> | |
| <div class="offre-title">5 RDV Qualifiés — Zéro Risque</div> | |
| <ul class="offre-list"> | |
| <li><span class="offre-check">✓</span><span><strong>5 RDV qualifiés</strong> avec vérification systématique de la date d’échéance du contrat</span></li> | |
| <li><span class="offre-check">✓</span><span><strong>Paiement uniquement si qualifié</strong> — aucun frais pour un RDV non qualifié</span></li> | |
| <li><span class="offre-check">✓</span><span><strong>Seuil de qualité</strong> — si moins de 4 RDV sur 5 sont qualifiés → remplacement gratuit des RDV manquants</span></li> | |
| <li><span class="offre-check">✓</span><span><strong>Engagement post-pilote</strong> — si 4+/5 qualifiés → engagement minimum 20 RDV/mois</span></li> | |
| <li><span class="offre-check">✓</span><span><strong>Livraison express</strong> — premiers RDV sous 48 heures</span></li> | |
| <li><span class="offre-check">✓</span><span><strong>Pas de frais de setup</strong> — pas d’abonnement, pas de coûts cachés</span></li> | |
| </ul> | |
| <div class="offre-criteria"> | |
| <h4>Critères « RDV Qualifié »</h4> | |
| <div class="criteria-grid"> | |
| <div class="criteria-item"><span class="criteria-dot"></span>Décideur confirmé (dirigeant, DAF, responsable achats)</div> | |
| <div class="criteria-item"><span class="criteria-dot"></span>Échéance vérifiée (<12 mois)</div> | |
| <div class="criteria-item"><span class="criteria-dot"></span>Consommation estimée documentée</div> | |
| <div class="criteria-item"><span class="criteria-dot"></span>Créneau fixé et confirmé</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══════════ SECTION 7: CALCULATEUR ROI ═══════════ --> | |
| <section class="section" id="s7"> | |
| <div class="section-label">Section 07</div> | |
| <h2 class="section-title">Calculateur ROI</h2> | |
| <p class="section-desc">Ajustez les curseurs pour voir l’impact concret de CALL’VANTAGE sur votre prospection.</p> | |
| <div class="divider"></div> | |
| <div class="calc-container"> | |
| <div class="calc-inputs"> | |
| <div class="calc-group"> | |
| <label>Budget prospection mensuel <span class="calc-value" id="cv-budget">5 000€</span></label> | |
| <input type="range" class="calc-range" id="r-budget" min="2000" max="15000" step="500" value="5000" oninput="calcROI()"> | |
| </div> | |
| <div class="calc-group"> | |
| <label>RDVs actuels par mois <span class="calc-value" id="cv-rdvs">15</span></label> | |
| <input type="range" class="calc-range" id="r-rdvs" min="5" max="60" step="1" value="15" oninput="calcROI()"> | |
| </div> | |
| <div class="calc-group"> | |
| <label>Taux de transformation actuel <span class="calc-value" id="cv-taux">12%</span></label> | |
| <input type="range" class="calc-range" id="r-taux" min="5" max="35" step="1" value="12" oninput="calcROI()"> | |
| </div> | |
| </div> | |
| <div class="calc-results"> | |
| <div class="calc-result-item"> | |
| <div class="cr-label">Coût actuel par RDV</div> | |
| <div class="cr-value" id="cr-cout">333€</div> | |
| </div> | |
| <div class="calc-result-item"> | |
| <div class="cr-label">Coût CALL’VANTAGE par RDV</div> | |
| <div class="cr-value highlight-electric" id="cr-cout-cv">40€</div> | |
| <div class="cr-sub">Moyenne tous volumes confondus</div> | |
| </div> | |
| <div class="calc-result-item"> | |
| <div class="cr-label">RDVs possibles avec CALL’VANTAGE</div> | |
| <div class="cr-value highlight-electric" id="cr-rdvs-cv">125</div> | |
| <div class="cr-sub" id="cr-gain">+733% de volume</div> | |
| </div> | |
| <div class="calc-result-item"> | |
| <div class="cr-label">Économie mensuelle</div> | |
| <div class="cr-value" id="cr-eco-mois">4 395€</div> | |
| </div> | |
| <div class="calc-result-item"> | |
| <div class="cr-label">Économie annuelle estimée</div> | |
| <div class="cr-value" id="cr-eco">52 740€</div> | |
| </div> | |
| <div class="cr-projection" id="cr-proj"> | |
| Avec le même budget de 5 000€/mois, vous obtenez <strong>125 RDVs</strong> au lieu de <strong>15</strong>. | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══════════ SECTION 8: PIPELINE ═══════════ --> | |
| <section class="section" id="s8"> | |
| <div class="section-label">Section 08</div> | |
| <h2 class="section-title">Pipeline Tracker</h2> | |
| <p class="section-desc">Glissez-déposez les cartes entre les colonnes pour suivre votre pipeline d’acquisition.</p> | |
| <div class="divider"></div> | |
| <div class="kanban" id="kanban"> | |
| <div class="kanban-col"> | |
| <div class="kc-header" data-col="identifie">Identifié <span class="kc-count"></span></div> | |
| <div class="kc-body" data-col="identifie"></div> | |
| </div> | |
| <div class="kanban-col"> | |
| <div class="kc-header" data-col="contacte">Contacté <span class="kc-count"></span></div> | |
| <div class="kc-body" data-col="contacte"></div> | |
| </div> | |
| <div class="kanban-col"> | |
| <div class="kc-header" data-col="rdv">RDV Obtenu <span class="kc-count"></span></div> | |
| <div class="kc-body" data-col="rdv"></div> | |
| </div> | |
| <div class="kanban-col"> | |
| <div class="kc-header" data-col="pilote">Pilote <span class="kc-count"></span></div> | |
| <div class="kc-body" data-col="pilote"></div> | |
| </div> | |
| <div class="kanban-col"> | |
| <div class="kc-header" data-col="signe">Signé <span class="kc-count"></span></div> | |
| <div class="kc-body" data-col="signe"></div> | |
| </div> | |
| </div> | |
| <button class="reset-btn" onclick="resetPipeline()">Réinitialiser le pipeline</button> | |
| </section> | |
| <!-- ═══════════ FOOTER ═══════════ --> | |
| <footer class="site-footer"> | |
| <div class="footer-divider"></div> | |
| <div class="footer-brand">CALL<em>’</em>VANTAGE — Marrakech</div> | |
| <div class="footer-info">WhatsApp : +212 664 860 353</div> | |
| </footer> | |
| <!-- ═══════════ JAVASCRIPT ═══════════ --> | |
| <script> | |
| /* ── Navigation ── */ | |
| function scrollTo_s(id) { | |
| document.getElementById(id).scrollIntoView({ behavior: 'smooth', block: 'start' }); | |
| } | |
| // Active nav on scroll | |
| const sections = document.querySelectorAll('.section'); | |
| const navBtns = document.querySelectorAll('.nav-btn'); | |
| window.addEventListener('scroll', function() { | |
| let current = ''; | |
| sections.forEach(function(sec) { | |
| const top = sec.offsetTop - 120; | |
| if (window.pageYOffset >= top) current = sec.getAttribute('id'); | |
| }); | |
| navBtns.forEach(function(btn, i) { | |
| btn.classList.toggle('active', 's' + (i + 1) === current); | |
| }); | |
| }); | |
| /* ── Section 1: Timeline ── */ | |
| function showStep(n) { | |
| document.querySelectorAll('.tl-step').forEach(function(s) { s.classList.remove('active'); }); | |
| document.querySelectorAll('.tl-detail').forEach(function(d) { d.classList.remove('visible'); }); | |
| document.querySelector('.tl-step[data-step="' + n + '"]').classList.add('active'); | |
| document.getElementById('step-detail-' + n).classList.add('visible'); | |
| } | |
| /* ── Section 2: Filter targets ── */ | |
| function filterTier(tier, btn) { | |
| document.querySelectorAll('.filter-btn').forEach(function(b) { b.classList.remove('active'); }); | |
| btn.classList.add('active'); | |
| document.querySelectorAll('.target-card').forEach(function(card) { | |
| if (tier === 'all') { | |
| card.setAttribute('data-hidden', 'false'); | |
| } else { | |
| card.setAttribute('data-hidden', card.getAttribute('data-tier') !== tier ? 'true' : 'false'); | |
| } | |
| }); | |
| } | |
| function toggleCard(el) { | |
| var body = el.querySelector('.tc-body'); | |
| body.classList.toggle('open'); | |
| } | |
| /* ── Section 3: Emails ── */ | |
| function toggleEmail(header) { | |
| var body = header.nextElementSibling; | |
| body.classList.toggle('open'); | |
| } | |
| var emailTexts = { | |
| email1: "Objet : [Pr\u00e9nom], combien vous co\u00fbte un RDV non qualifi\u00e9 ?\n\nBonjour [Pr\u00e9nom],\n\nEn tant que courtier en \u00e9nergie, vous le savez : un commercial qui se d\u00e9place pour un RDV o\u00f9 le contrat n'arrive pas \u00e0 \u00e9ch\u00e9ance, c'est 200 \u00e0 400\u20ac perdus.\n\nEntre le temps de d\u00e9placement, la pr\u00e9paration, et le co\u00fbt salarial \u2014 chaque RDV non qualifi\u00e9 est un trou dans votre rentabilit\u00e9.\n\nChez CALL\u2019VANTAGE, nous prenons des RDV qualifi\u00e9s avec une r\u00e8gle simple : nous v\u00e9rifions la date d'\u00e9ch\u00e9ance du contrat avant de vous transmettre le RDV.\n\nSi le RDV n'est pas qualifi\u00e9, il est remplac\u00e9.\n\nNos tarifs : 30 \u00e0 50\u20ac par RDV qualifi\u00e9.\n\nSeriez-vous disponible pour un \u00e9change de 15 minutes cette semaine ?\n\nCordialement,\n[Votre nom]\nCALL\u2019VANTAGE\n\nP.S. : Nous travaillons exclusivement avec des courtiers en \u00e9nergie B2B. Ce n'est pas du mass-market \u2014 c'est de la prospection chirurgicale.", | |
| email2: "Objet : 5 RDV qualifi\u00e9s, z\u00e9ro risque \u2014 pour [Entreprise]\n\nBonjour [Pr\u00e9nom],\n\nSuite \u00e0 mon pr\u00e9c\u00e9dent message, je voulais vous pr\u00e9senter notre Offre D\u00e9couverte, con\u00e7ue sp\u00e9cifiquement pour les courtiers qui veulent tester sans risque :\n\n\u2022 5 RDV qualifi\u00e9s avec v\u00e9rification de la date d'\u00e9ch\u00e9ance\n\u2022 Factur\u00e9s uniquement si qualifi\u00e9s\n\u2022 Seuil : si moins de 4 RDV sur 5 sont qualifi\u00e9s \u2192 remplacement gratuit\n\u2022 Pas de frais de setup, pas d'abonnement\n\u2022 Premiers RDV livr\u00e9s sous 48h\n\nNos clients constatent un taux de transformation de 25-35%, contre 10-15% en g\u00e9n\u00e9ration interne.\n\nLa diff\u00e9rence ? Chaque RDV est v\u00e9rifi\u00e9 : d\u00e9cideur confirm\u00e9, \u00e9ch\u00e9ance valid\u00e9e, cr\u00e9neau fix\u00e9.\n\nQuand seriez-vous disponible pour en discuter ?\n\nCordialement,\n[Votre nom]\nCALL\u2019VANTAGE", | |
| email3: "Objet : Vos concurrents externalisent d\u00e9j\u00e0 leur prospection\n\nBonjour [Pr\u00e9nom],\n\nFaisons un calcul rapide :\n\nUn commercial terrain co\u00fbte 4 000 \u00e0 5 000\u20ac/mois charg\u00e9.\nIl g\u00e9n\u00e8re en moyenne 15 \u00e0 20 RDV/mois.\nCo\u00fbt r\u00e9el par RDV : 250 \u00e0 330\u20ac.\n\nAvec CALL\u2019VANTAGE :\n\u2022 30 \u00e0 100\u20ac par RDV qualifi\u00e9\n\u2022 V\u00e9rification de la date d'\u00e9ch\u00e9ance du contrat\n\u2022 Remplacement garanti si non qualifi\u00e9\n\u2022 Z\u00e9ro charge sociale, z\u00e9ro management\n\nVos concurrents les plus agiles ont d\u00e9j\u00e0 fait ce calcul.\n\n15 minutes pour en discuter ?\n\nCordialement,\n[Votre nom]\nCALL\u2019VANTAGE\n\nP.S. : Nous ne travaillons qu'avec un nombre limit\u00e9 de courtiers par zone g\u00e9ographique. L'exclusivit\u00e9 territoriale est notre garantie de qualit\u00e9." | |
| }; | |
| function copyEmail(btn, id) { | |
| var text = emailTexts[id]; | |
| function onSuccess() { | |
| btn.textContent = '\u2713 Copi\u00e9 !'; | |
| btn.classList.add('copied'); | |
| setTimeout(function() { btn.textContent = 'Copier'; btn.classList.remove('copied'); }, 2000); | |
| } | |
| if (navigator.clipboard && navigator.clipboard.writeText) { | |
| navigator.clipboard.writeText(text).then(onSuccess).catch(function() { | |
| var ta = document.createElement('textarea'); ta.value = text; | |
| ta.style.position = 'fixed'; ta.style.opacity = '0'; | |
| document.body.appendChild(ta); ta.select(); document.execCommand('copy'); | |
| document.body.removeChild(ta); onSuccess(); | |
| }); | |
| } else { | |
| var ta = document.createElement('textarea'); ta.value = text; | |
| ta.style.position = 'fixed'; ta.style.opacity = '0'; | |
| document.body.appendChild(ta); ta.select(); document.execCommand('copy'); | |
| document.body.removeChild(ta); onSuccess(); | |
| } | |
| } | |
| /* ── Section 4: LinkedIn copy ── */ | |
| function copyLi(btn, id) { | |
| var el = document.getElementById(id); | |
| var text = el.innerText || el.textContent; | |
| function onSuccess() { | |
| btn.textContent = '\u2713 Copi\u00e9 !'; | |
| btn.classList.add('copied'); | |
| setTimeout(function() { btn.textContent = 'Copier'; btn.classList.remove('copied'); }, 2000); | |
| } | |
| if (navigator.clipboard && navigator.clipboard.writeText) { | |
| navigator.clipboard.writeText(text).then(onSuccess).catch(function() { | |
| var ta = document.createElement('textarea'); ta.value = text; | |
| ta.style.position = 'fixed'; ta.style.opacity = '0'; | |
| document.body.appendChild(ta); ta.select(); document.execCommand('copy'); | |
| document.body.removeChild(ta); onSuccess(); | |
| }); | |
| } else { | |
| var ta = document.createElement('textarea'); ta.value = text; | |
| ta.style.position = 'fixed'; ta.style.opacity = '0'; | |
| document.body.appendChild(ta); ta.select(); document.execCommand('copy'); | |
| document.body.removeChild(ta); onSuccess(); | |
| } | |
| } | |
| // Char counts for connection messages | |
| document.querySelectorAll('[id^="li-conn-"]').forEach(function(el) { | |
| var count = el.textContent.trim().length; | |
| var counter = el.parentElement.querySelector('.li-char-count'); | |
| if (counter) counter.textContent = count + ' / 300 caract\u00e8res'; | |
| }); | |
| /* ── Section 5: Script accordion ── */ | |
| function togglePhase(header) { | |
| var phase = header.parentElement; | |
| var body = phase.querySelector('.sp-body'); | |
| var isOpen = phase.classList.contains('open'); | |
| phase.classList.toggle('open'); | |
| body.classList.toggle('open'); | |
| } | |
| /* ── Section 7: ROI Calculator ── */ | |
| function calcROI() { | |
| var budget = parseInt(document.getElementById('r-budget').value); | |
| var rdvs = parseInt(document.getElementById('r-rdvs').value); | |
| var taux = parseInt(document.getElementById('r-taux').value); | |
| document.getElementById('cv-budget').innerHTML = budget.toLocaleString('fr-FR') + '€'; | |
| document.getElementById('cv-rdvs').textContent = rdvs; | |
| document.getElementById('cv-taux').textContent = taux + '%'; | |
| var coutActuel = Math.round(budget / rdvs); | |
| var coutCv = 40; | |
| var rdvsCv = Math.round(budget / coutCv); | |
| var gainPct = Math.round(((rdvsCv - rdvs) / rdvs) * 100); | |
| var ecoMensuelle = (coutActuel - coutCv) * rdvs; | |
| var ecoAnnuelle = ecoMensuelle * 12; | |
| animateValue('cr-cout', coutActuel, '\u20ac', true); | |
| document.getElementById('cr-cout-cv').textContent = coutCv.toLocaleString('fr-FR') + '\u20ac'; | |
| animateValue('cr-rdvs-cv', rdvsCv, '', true); | |
| document.getElementById('cr-gain').textContent = '+' + gainPct.toLocaleString('fr-FR') + '% de volume'; | |
| animateValue('cr-eco-mois', ecoMensuelle, '\u20ac', true); | |
| animateValue('cr-eco', ecoAnnuelle, '\u20ac', true); | |
| document.getElementById('cr-proj').innerHTML = 'Avec le m\u00eame budget de <strong>' + budget.toLocaleString('fr-FR') + '\u20ac/mois</strong>, vous obtenez <strong>' + rdvsCv.toLocaleString('fr-FR') + ' RDVs</strong> au lieu de <strong>' + rdvs + '</strong>.'; | |
| } | |
| function animateValue(id, target, suffix, formatted) { | |
| var el = document.getElementById(id); | |
| var start = parseInt(el.textContent.replace(/[^\d\-]/g, '')) || 0; | |
| var diff = target - start; | |
| var duration = 400; | |
| var startTime = null; | |
| function step(ts) { | |
| if (!startTime) startTime = ts; | |
| var progress = Math.min((ts - startTime) / duration, 1); | |
| var eased = 1 - Math.pow(1 - progress, 3); | |
| var current = Math.round(start + diff * eased); | |
| el.textContent = current.toLocaleString('fr-FR') + suffix; | |
| if (progress < 1) requestAnimationFrame(step); | |
| } | |
| requestAnimationFrame(step); | |
| } | |
| calcROI(); | |
| /* ── Section 8: Kanban Pipeline ── */ | |
| var COLS = ['identifie', 'contacte', 'rdv', 'pilote', 'signe']; | |
| var DEFAULT_CARDS = [ | |
| { id: 'mce', name: 'Mon Courtier \u00c9nergie', vol: '50-100 RDV/mois', col: 'identifie' }, | |
| { id: 'alliance', name: 'Alliance des \u00c9nergies', vol: '40-80 RDV/mois', col: 'identifie' }, | |
| { id: 'atoo', name: 'ATOO \u00c9nergie', vol: '30-60 RDV/mois', col: 'identifie' }, | |
| { id: 'capitole', name: 'Capitole \u00c9nergie', vol: '30-50 RDV/mois', col: 'identifie' }, | |
| { id: 'opera', name: 'Op\u00e9ra \u00c9nergie', vol: '50-100 RDV/mois', col: 'identifie' } | |
| ]; | |
| function loadPipeline() { | |
| var saved = localStorage.getItem('cv_pipeline'); | |
| return saved ? JSON.parse(saved) : JSON.parse(JSON.stringify(DEFAULT_CARDS)); | |
| } | |
| function savePipeline(cards) { | |
| localStorage.setItem('cv_pipeline', JSON.stringify(cards)); | |
| } | |
| function renderPipeline() { | |
| var cards = loadPipeline(); | |
| COLS.forEach(function(col) { | |
| var body = document.querySelector('.kc-body[data-col="' + col + '"]'); | |
| body.innerHTML = ''; | |
| var colCards = cards.filter(function(c) { return c.col === col; }); | |
| colCards.forEach(function(c) { | |
| var div = document.createElement('div'); | |
| div.className = 'kanban-card'; | |
| div.setAttribute('draggable', 'true'); | |
| div.setAttribute('data-id', c.id); | |
| div.innerHTML = '<div class="kk-name">' + c.name + '</div><div class="kk-vol">' + c.vol + '</div>' + | |
| '<div class="kk-mobile-move"><select class="kk-mobile-select" onchange="moveCard(\'' + c.id + '\', this.value)">' + | |
| '<option value="">D\u00e9placer vers\u2026</option>' + | |
| COLS.map(function(cc) { | |
| var labels = { identifie: 'Identifi\u00e9', contacte: 'Contact\u00e9', rdv: 'RDV Obtenu', pilote: 'Pilote', signe: 'Sign\u00e9' }; | |
| return '<option value="' + cc + '"' + (cc === col ? ' disabled' : '') + '>' + labels[cc] + '</option>'; | |
| }).join('') + | |
| '</select></div>'; | |
| div.addEventListener('dragstart', function(e) { | |
| e.dataTransfer.setData('text/plain', c.id); | |
| div.classList.add('dragging'); | |
| }); | |
| div.addEventListener('dragend', function() { | |
| div.classList.remove('dragging'); | |
| document.querySelectorAll('.kc-body').forEach(function(b) { b.classList.remove('drag-over'); }); | |
| }); | |
| body.appendChild(div); | |
| }); | |
| // Update count | |
| var header = document.querySelector('.kc-header[data-col="' + col + '"]'); | |
| var countEl = header.querySelector('.kc-count'); | |
| countEl.textContent = '(' + colCards.length + ')'; | |
| }); | |
| // Drop zones | |
| document.querySelectorAll('.kc-body').forEach(function(body) { | |
| body.addEventListener('dragover', function(e) { | |
| e.preventDefault(); | |
| body.classList.add('drag-over'); | |
| }); | |
| body.addEventListener('dragleave', function() { | |
| body.classList.remove('drag-over'); | |
| }); | |
| body.addEventListener('drop', function(e) { | |
| e.preventDefault(); | |
| body.classList.remove('drag-over'); | |
| var cardId = e.dataTransfer.getData('text/plain'); | |
| var targetCol = body.getAttribute('data-col'); | |
| moveCard(cardId, targetCol); | |
| }); | |
| }); | |
| } | |
| function moveCard(cardId, targetCol) { | |
| if (!targetCol) return; | |
| var cards = loadPipeline(); | |
| cards.forEach(function(c) { | |
| if (c.id === cardId) c.col = targetCol; | |
| }); | |
| savePipeline(cards); | |
| renderPipeline(); | |
| } | |
| function resetPipeline() { | |
| localStorage.removeItem('cv_pipeline'); | |
| renderPipeline(); | |
| } | |
| renderPipeline(); | |
| </script> | |
| </body> | |
| </html> |