/* ═══════════════════════════════════════════════════════════
ACROSS INSIGHT — ONE PAGER — CSS POUR WEBFLOW
À coller dans : Project Settings > Custom Code > Head
ou dans un Embed avec
═══════════════════════════════════════════════════════════ */
:root {
--bg-dark: #08080C;
--bg-panel: #0F0F15;
--bg-elevated: #16161F;
--green: #5CD685;
--green-light: #4AE079;
--red: #FF5252;
--blue: #42A5F5;
--yellow: #FFCA28;
--purple: #B388FF;
--cyan: #66EBAA;
--orange: #FF8A50;
--pink: #FF80AB;
--text: #FFFFFF;
--text-secondary: #9999AA;
--text-muted: #666677;
--border: rgba(255, 255, 255, 0.1);
--font-head: 'Space Grotesk', sans-serif;
--font-body: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-body);
background: var(--bg-dark);
color: var(--text);
line-height: 1.6;
}
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
/* HEADER */
.header {
padding: 40px 0;
border-bottom: 1px solid var(--border);
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.logo {
font-family: var(--font-head);
font-size: 1.8rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.logo span {
color: var(--green);
}
.tagline {
font-family: var(--font-mono);
font-size: 0.85rem;
letter-spacing: 0.15em;
color: var(--green);
background: rgba(92, 214, 133, 0.1);
padding: 8px 16px;
border-radius: 4px;
border: 1px solid rgba(92, 214, 133, 0.3);
}
/* HERO */
.hero {
padding: 60px 0;
text-align: center;
border-bottom: 1px solid var(--border);
}
.hero-label {
font-family: var(--font-mono);
font-size: 0.8rem;
letter-spacing: 0.2em;
color: var(--green);
margin-bottom: 20px;
display: block;
}
.hero h1 {
font-family: var(--font-head);
font-size: clamp(2rem, 5vw, 3.2rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
margin-bottom: 24px;
}
.hero h1 .highlight {
color: var(--green);
}
.hero p {
font-size: 1.25rem;
color: var(--text-secondary);
max-width: 800px;
margin: 0 auto 40px;
}
.hero-stats {
display: flex;
justify-content: center;
gap: 60px;
flex-wrap: wrap;
}
.stat {
text-align: center;
}
.stat-value {
font-family: var(--font-head);
font-size: 2.5rem;
font-weight: 700;
color: var(--green);
}
.stat-label {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.1em;
color: var(--text-muted);
margin-top: 4px;
}
/* SECTION */
.section {
padding: 45px 0;
border-bottom: 1px solid var(--border);
}
.section-label {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.15em;
color: var(--green);
margin-bottom: 12px;
display: block;
}
.section-title {
font-family: var(--font-head);
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 30px;
}
/* PROBLEM SECTION */
.problems-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
@media (max-width: 600px) {
.problems-grid {
grid-template-columns: 1fr;
}
}
.problem-card {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
display: flex;
align-items: flex-start;
gap: 16px;
}
.problem-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.2rem;
}
.problem-content h4 {
font-family: var(--font-mono);
font-size: 0.8rem;
letter-spacing: 0.1em;
margin-bottom: 6px;
}
.problem-content p {
font-size: 1.25rem;
color: var(--text-secondary);
}
/* PILLARS */
.pillars-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
@media (max-width: 800px) {
.pillars-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 500px) {
.pillars-grid {
grid-template-columns: 1fr;
}
}
.pillar-card {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
text-align: center;
transition: all 0.3s ease;
border-top: 3px solid;
}
.pillar-card:hover {
transform: translateY(-4px);
border-color: rgba(255, 255, 255, 0.2);
}
.pillar-num {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--text-muted);
margin-bottom: 8px;
}
.pillar-name {
font-family: var(--font-head);
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 8px;
}
.pillar-desc {
font-size: 0.85rem;
color: var(--text-muted);
line-height: 1.5;
}
/* BLINDSPOTS */
.blindspot-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 700px) {
.blindspot-grid {
grid-template-columns: 1fr;
}
}
.blindspot-card {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.blindspot-top {
padding: 20px;
background: rgba(255, 255, 255, 0.02);
text-align: center;
}
.blindspot-badge {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.1em;
color: var(--text-muted);
margin-bottom: 12px;
display: block;
}
.blindspot-metric {
font-family: var(--font-head);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 6px;
}
.blindspot-perception {
font-size: 1.1rem;
color: var(--text-secondary);
font-style: italic;
}
.blindspot-bottom {
padding: 20px;
border-top: 1px solid var(--border);
}
.blindspot-alert {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.1em;
color: var(--red);
margin-bottom: 10px;
}
.blindspot-reality {
font-size: 1.1rem;
color: var(--text-secondary);
}
.blindspot-reality strong {
color: var(--red);
}
/* PROCESS */
.process-timeline {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
position: relative;
}
@media (max-width: 700px) {
.process-timeline {
flex-direction: column;
}
}
.process-step {
flex: 1;
text-align: center;
position: relative;
}
.process-num {
width: 50px;
height: 50px;
background: var(--green);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-head);
font-size: 1.5rem;
font-weight: 700;
color: var(--bg-dark);
margin: 0 auto 16px;
}
.process-title {
font-family: var(--font-head);
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 8px;
}
.process-duration {
font-family: var(--font-mono);
font-size: 0.8rem;
color: var(--green);
margin-bottom: 12px;
}
.process-desc {
font-size: 1.1rem;
color: var(--text-secondary);
}
.process-arrow {
color: var(--green);
font-size: 1.75rem;
margin-top: 20px;
}
@media (max-width: 700px) {
.process-arrow {
transform: rotate(90deg);
margin: 10px auto;
}
}
/* DELIVERABLES */
.deliverables-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.deliverables-grid-5 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 800px) {
.deliverables-grid-5 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.deliverables-grid,
.deliverables-grid-5 {
grid-template-columns: 1fr;
}
}
.deliverable-card {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 12px;
padding: 24px;
display: flex;
gap: 16px;
}
.deliverable-card-ia {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.02) 100%);
border-color: rgba(139, 92, 246, 0.3);
}
.deliverable-card-ia h4 {
color: #A78BFA;
}
.deliverable-num {
font-family: var(--font-mono);
font-size: 1.75rem;
font-weight: 700;
color: var(--green);
opacity: 0.5;
}
.deliverable-content h4 {
font-family: var(--font-head);
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 8px;
}
.deliverable-content p {
font-size: 1.1rem;
color: var(--text-secondary);
}
/* PREVIEW CARDS */
.preview-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
@media (max-width: 800px) {
.preview-grid {
grid-template-columns: 1fr;
}
}
.preview-card {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
}
.preview-card-wide {
grid-column: span 2;
}
@media (max-width: 800px) {
.preview-card-wide {
grid-column: span 1;
}
}
.preview-header {
padding: 16px 20px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 12px;
}
.preview-badge {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.1em;
color: var(--green);
background: rgba(92, 214, 133, 0.1);
padding: 4px 8px;
border-radius: 4px;
}
.preview-title {
font-family: var(--font-head);
font-size: 1.1rem;
font-weight: 600;
}
.preview-content {
padding: 24px;
}
/* Score Wheel Preview */
.score-wheel-preview {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto 20px;
}
.wheel-svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.wheel-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.wheel-score {
font-family: var(--font-head);
font-size: 3rem;
font-weight: 700;
color: var(--yellow);
line-height: 1;
}
.wheel-label {
font-family: var(--font-mono);
font-size: 0.8rem;
color: var(--text-muted);
}
.pillar-legend {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.legend-row {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 0.8rem;
color: var(--text-secondary);
}
.legend-dot {
width: 8px;
height: 8px;
border-radius: 2px;
flex-shrink: 0;
}
/* Heatmap Preview */
.heatmap-preview {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
}
.heatmap-row {
display: flex;
align-items: center;
gap: 12px;
}
.heatmap-label {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--text-muted);
width: 70px;
flex-shrink: 0;
text-align: right;
}
.heatmap-bars {
display: flex;
gap: 4px;
flex: 1;
}
.hbar {
height: 16px;
border-radius: 3px;
flex: 1;
}
.heatmap-legend {
display: flex;
justify-content: center;
gap: 20px;
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--text-muted);
}
.heatmap-legend span {
display: flex;
align-items: center;
gap: 6px;
}
/* Reco Table Preview */
.reco-table {
display: flex;
flex-direction: column;
gap: 0;
}
.reco-row {
display: grid;
grid-template-columns: 100px 1fr 60px 60px 60px;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
align-items: center;
}
@media (max-width: 700px) {
.reco-row {
grid-template-columns: 80px 1fr;
gap: 8px;
}
.reco-meta {
display: none;
}
}
.reco-row:last-child {
border-bottom: none;
}
.reco-header {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.1em;
color: var(--text-muted);
}
.reco-cell {
font-size: 0.8rem;
}
.reco-action {
color: var(--text-secondary);
}
.reco-meta {
text-align: center;
font-family: var(--font-mono);
font-size: 0.8rem;
color: var(--text-muted);
}
.reco-roi {
color: var(--green);
font-weight: 600;
}
.priority-badge {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.05em;
padding: 4px 8px;
border-radius: 4px;
font-weight: 600;
}
.priority-high {
background: rgba(255, 82, 82, 0.15);
color: var(--red);
}
.priority-medium {
background: rgba(255, 202, 40, 0.15);
color: var(--yellow);
}
/* IA Actions Preview */
.ia-actions-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 20px;
}
.ia-action-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: rgba(139, 92, 246, 0.08);
border-radius: 8px;
border-left: 3px solid #A78BFA;
}
.ia-icon {
font-size: 1.25rem;
}
.ia-content {
flex: 1;
}
.ia-title {
font-size: 0.8rem;
font-weight: 500;
margin-bottom: 2px;
}
.ia-dept {
font-family: var(--font-mono);
font-size: 0.7rem;
color: #A78BFA;
}
.ia-counter {
text-align: center;
padding: 16px;
background: rgba(139, 92, 246, 0.1);
border-radius: 8px;
}
.ia-counter-value {
font-family: var(--font-head);
font-size: 1.8rem;
font-weight: 700;
color: #A78BFA;
}
.ia-counter-label {
display: block;
font-size: 0.85rem;
color: var(--text-secondary);
margin-top: 4px;
}
/* ROADMAP PREVIEW */
.roadmap-preview {
display: flex;
flex-direction: column;
gap: 16px;
}
.roadmap-phase {
background: rgba(255, 255, 255, 0.02);
border-radius: 8px;
padding: 12px;
}
.roadmap-phase-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.roadmap-phase-label {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.05em;
color: var(--green);
background: rgba(92, 214, 133, 0.1);
padding: 3px 8px;
border-radius: 4px;
}
.roadmap-phase-title {
font-family: var(--font-head);
font-size: 1.1rem;
font-weight: 600;
}
.roadmap-items {
display: flex;
flex-direction: column;
gap: 6px;
}
.roadmap-item {
font-size: 0.85rem;
color: var(--text-secondary);
padding-left: 16px;
position: relative;
}
.roadmap-item::before {
content: '○';
position: absolute;
left: 0;
color: var(--text-muted);
font-size: 0.7rem;
}
.roadmap-item.roadmap-done::before {
content: '●';
color: var(--green);
}
/* NEW HEATMAP GRID */
.heatmap-grid {
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: 16px;
}
.heatmap-header-row {
display: grid;
grid-template-columns: 80px repeat(5, 1fr);
gap: 4px;
margin-bottom: 8px;
}
.heatmap-corner {
/* Empty corner cell */
}
.heatmap-col-header {
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.05em;
color: var(--text-muted);
text-align: center;
padding: 4px 2px;
}
.heatmap-data-row {
display: grid;
grid-template-columns: 80px repeat(5, 1fr);
gap: 4px;
margin-bottom: 4px;
}
.heatmap-row-label {
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 600;
display: flex;
align-items: center;
}
.heatmap-cell {
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 600;
text-align: center;
padding: 8px 4px;
border-radius: 4px;
color: var(--bg-dark);
}
.heatmap-cell.heatmap-green {
background: var(--green);
}
.heatmap-cell.heatmap-yellow {
background: var(--yellow);
}
.heatmap-cell.heatmap-red {
background: var(--red);
}
.heatmap-legend-new {
display: flex;
justify-content: center;
gap: 16px;
margin-top: 12px;
}
.heatmap-legend-item {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--text-muted);
}
.heatmap-legend-box {
width: 12px;
height: 12px;
border-radius: 3px;
}
.heatmap-legend-box.heatmap-green {
background: var(--green);
}
.heatmap-legend-box.heatmap-yellow {
background: var(--yellow);
}
.heatmap-legend-box.heatmap-red {
background: var(--red);
}
/* NEW ROADMAP 30/60/90 */
.roadmap-preview-new {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
@media (max-width: 600px) {
.roadmap-preview-new {
grid-template-columns: 1fr;
}
}
.roadmap-col {
background: rgba(255, 255, 255, 0.02);
border-radius: 8px;
overflow: hidden;
}
.roadmap-col-header {
padding: 12px;
text-align: center;
border-bottom: 1px solid var(--border);
}
.roadmap-col-header.roadmap-30 {
background: rgba(92, 214, 133, 0.1);
border-bottom-color: rgba(92, 214, 133, 0.3);
}
.roadmap-col-header.roadmap-60 {
background: rgba(255, 202, 40, 0.1);
border-bottom-color: rgba(255, 202, 40, 0.3);
}
.roadmap-col-header.roadmap-90 {
background: rgba(139, 92, 246, 0.1);
border-bottom-color: rgba(139, 92, 246, 0.3);
}
.roadmap-days {
display: block;
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.1em;
margin-bottom: 4px;
}
.roadmap-30 .roadmap-days {
color: var(--green);
}
.roadmap-60 .roadmap-days {
color: var(--yellow);
}
.roadmap-90 .roadmap-days {
color: #A78BFA;
}
.roadmap-phase-name {
font-family: var(--font-head);
font-size: 1.1rem;
font-weight: 600;
}
.roadmap-col-content {
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.roadmap-item-new {
font-size: 0.8rem;
color: var(--text-secondary);
padding: 6px 8px;
background: rgba(255, 255, 255, 0.03);
border-radius: 4px;
border-left: 2px solid var(--border);
}
.roadmap-30 + .roadmap-col-content .roadmap-item-new,
.roadmap-col:first-child .roadmap-item-new {
border-left-color: var(--green);
}
.roadmap-col:nth-child(2) .roadmap-item-new {
border-left-color: var(--yellow);
}
.roadmap-col:nth-child(3) .roadmap-item-new {
border-left-color: #A78BFA;
}
/* CREDENTIALS */
.credentials {
background: rgba(92, 214, 133, 0.05);
border: 1px solid rgba(92, 214, 133, 0.2);
border-radius: 16px;
padding: 30px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
text-align: center;
}
@media (max-width: 700px) {
.credentials {
grid-template-columns: repeat(2, 1fr);
}
}
.credential-value {
font-family: var(--font-head);
font-size: 2rem;
font-weight: 700;
color: var(--green);
}
.credential-label {
font-size: 0.8rem;
color: var(--text-secondary);
margin-top: 6px;
}
/* CTA */
.cta {
padding: 60px 0;
text-align: center;
}
.cta h2 {
font-family: var(--font-head);
font-size: 2rem;
font-weight: 700;
margin-bottom: 16px;
}
.cta p {
font-size: 1.1rem;
color: var(--text-secondary);
margin-bottom: 40px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.cta-buttons {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.btn {
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.05em;
padding: 16px 32px;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 10px;
}
.btn-primary {
background: var(--green);
color: var(--bg-dark);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(92, 214, 133, 0.3);
}
.btn-secondary {
background: transparent;
color: var(--text);
border: 1px solid var(--border);
}
.btn-secondary:hover {
border-color: var(--green);
color: var(--green);
}
/* FOOTER */
.footer {
padding: 40px 0;
border-top: 1px solid var(--border);
text-align: center;
}
.footer-logo {
font-family: var(--font-head);
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 8px;
}
.footer-logo span {
color: var(--green);
}
.footer-tagline {
font-family: var(--font-mono);
font-size: 0.8rem;
letter-spacing: 0.1em;
color: var(--text-muted);
margin-bottom: 20px;
}
.footer-links {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.footer-links a {
font-size: 1.1rem;
color: var(--text-secondary);
text-decoration: none;
transition: color 0.2s ease;
}
.footer-links a:hover {
color: var(--green);
}
/* QUOTE */
.quote-section {
background: var(--bg-panel);
padding: 50px;
border-radius: 16px;
margin: 40px 0;
text-align: center;
}
.quote-text {
font-family: var(--font-head);
font-size: 1.75rem;
font-weight: 500;
font-style: italic;
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto;
}
.quote-text .highlight-red {
color: var(--red);
}
.quote-text .highlight-green {
color: var(--green);
}
/* HERO RESPONSIVE */
@media (max-width: 900px) {
.hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
}
/* DASHBOARD INTERACTIF */
.dash-container { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.dash-tabs { display: flex; border-bottom: 1px solid var(--border); overflow-x: auto; }
.dash-tabs::-webkit-scrollbar { display: none; }
.dash-tab { flex: 1; min-width: max-content; padding: 14px 16px; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; color: var(--text-muted); background: transparent; border: none; border-right: 1px solid var(--border); cursor: pointer; position: relative; transition: all 0.2s; }
.dash-tab:last-child { border-right: none; }
.dash-tab:hover { color: var(--text-secondary); background: rgba(255,255,255,0.02); }
.dash-tab.active { color: var(--green); background: rgba(92, 214, 133, 0.05); }
.dash-tab::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--green); transform: scaleX(0); transition: transform 0.3s; }
.dash-tab.active::after { transform: scaleX(1); }
.dash-content { display: grid; grid-template-columns: 140px 1fr 240px; }
@media (max-width: 800px) { .dash-content { grid-template-columns: 1fr; } }
.dash-sidebar { padding: 24px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 800px) { .dash-sidebar { flex-direction: row; border-right: none; border-bottom: 1px solid var(--border); } }
.dash-kpi-label { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 6px; }
.dash-kpi-value { font-family: var(--font-head); font-size: 1.8rem; font-weight: 700; color: var(--green); }
.dash-kpi-status { font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: var(--green); }
.dash-bars { padding: 24px; border-right: 1px solid var(--border); }
@media (max-width: 800px) { .dash-bars { border-right: none; border-bottom: 1px solid var(--border); } }
.bar-group { margin-bottom: 16px; }
.bar-group:last-child { margin-bottom: 0; }
.bar-header { display: flex; justify-content: space-between; margin-bottom: 6px; }
.bar-label { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text); }
.bar-value { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; }
.bar-track { height: 8px; background: var(--bg-elevated); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1); }
.dash-actions { padding: 24px; }
.dash-actions-title { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 16px; }
.action-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; }
.action-item:last-child { margin-bottom: 0; }
.action-icon { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.action-icon.high { background: rgba(255, 82, 82, 0.15); }
.action-icon.medium { background: rgba(255, 202, 40, 0.15); }
.action-text { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.4; }
.action-tag { font-family: var(--font-mono); font-size: 0.6rem; padding: 2px 6px; border-radius: 3px; margin-top: 6px; display: inline-block; }
.action-tag.quick { background: rgba(92, 214, 133, 0.15); color: var(--green); }
.action-tag.medium { background: rgba(255, 202, 40, 0.15); color: var(--yellow); }
/* CLASSES UTILITAIRES POUR RÉDUIRE LES STYLES INLINE */
.fw-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;padding:24px;text-align:center}
.fw-card-row{background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;padding:20px 24px;display:flex;align-items:flex-start;gap:18px}
.fw-name{font-family:var(--font-head);font-size:1.1rem;font-weight:600;margin-bottom:12px}
.fw-desc{font-size:0.85rem;color:var(--text-secondary);line-height:1.5}
.fw-avatar{width:60px;height:60px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;color:var(--bg-dark);transition:transform 0.2s;cursor:pointer}
.fw-avatar:hover{transform:scale(1.1)}
.fw-avatar-l{background:linear-gradient(135deg,var(--green),var(--cyan))}
.fw-avatar-c{background:linear-gradient(135deg,var(--purple),var(--pink))}
.fw-avatar-f{background:linear-gradient(135deg,var(--yellow),var(--orange))}
.ia-title-sm{font-size:15px;font-weight:700;color:var(--text);margin-bottom:5px}
.ia-desc-sm{font-size:14px;color:var(--text-secondary);line-height:1.55}
.c-green{color:var(--green)}
.c-green-light{color:var(--green-light)}
.c-red{color:var(--red)}
.c-blue{color:var(--blue)}
.c-yellow{color:var(--yellow)}
.c-purple{color:var(--purple)}
.c-cyan{color:var(--cyan)}
.c-orange{color:var(--orange)}
.c-pink{color:var(--pink)}
.btn-full{width:100%;justify-content:center}
.no-decor{text-decoration:none}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero-cta-box{background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:40px;text-align:center}
.hero-cta-title{font-family:var(--font-head);font-size:1.5rem;font-weight:700;margin-bottom:12px}
.hero-cta-desc{color:var(--text-secondary);margin-bottom:28px;font-size:1rem}
.cta-col{flex-direction:column;gap:12px}
.founders-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-bottom:40px}
.section-intro{color:var(--text-secondary);text-align:center;max-width:700px;margin:0 auto 40px}
/* Heatmap points */
.hp{position:absolute;border-radius:50%;cursor:pointer;transition:transform 0.2s}
.hp:hover{transform:scale(1.2)}
.hp-g{background:rgba(92,214,133,0.7);border:2px solid var(--green)}
.hp-y{background:rgba(255,202,40,0.6);border:2px solid var(--yellow)}
.hp-r{background:rgba(255,82,82,0.6);border:2px solid var(--red)}
/* Classes extraites des styles inline */
.s1{background: var(--bg-panel); border: 1px solid var(--border); border-radius: 16px; padding: 40px; text-align: center;}
.s2{width: 100%; justify-content: center;}
.s3{color: var(--red);}
.s4{color: var(--green-light);}
.s5{color: var(--blue);}
.s6{color: var(--yellow);}
.s7{color: var(--purple);}
.s8{color: var(--cyan);}
.s9{color: var(--orange);}
.s10{color: var(--pink);}
.s11{background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; display: flex; align-items: flex-start; gap: 18px;}
.s12{width: 46px; height: 46px; border-radius: 12px; background: rgba(92, 214, 133, 0.12); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;}
.s13{font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 5px;}
.s14{font-size: 14px; color: var(--text-secondary); line-height: 1.55;}
.s15{color: var(--green); font-weight: 600;}
.s16{width: 46px; height: 46px; border-radius: 12px; background: rgba(66, 165, 245, 0.12); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;}
.s17{width: 46px; height: 46px; border-radius: 12px; background: rgba(179, 136, 255, 0.12); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;}
.s18{width: 46px; height: 46px; border-radius: 12px; background: rgba(255, 138, 80, 0.12); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;}
.s19{position: relative; width: 100%; height: 320px; background: var(--bg-elevated); border-radius: 8px; overflow: visible;}
.s20{position: absolute; top: 8px; left: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; color: var(--yellow); background: rgba(255, 202, 40, 0.15); padding: 4px 8px; border-radius: 4px;}
.s21{position: absolute; top: 8px; right: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; color: var(--red); background: rgba(255, 82, 82, 0.15); padding: 4px 8px; border-radius: 4px;}
.s22{position: absolute; bottom: 32px; left: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; color: var(--text-muted); background: rgba(255, 255, 255, 0.05); padding: 4px 8px; border-radius: 4px;}
.s23{position: absolute; bottom: 32px; right: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; color: var(--green); background: rgba(92, 214, 133, 0.15); padding: 4px 8px; border-radius: 4px;}
.s24{position: absolute; left: 4px; top: 10%; font-family: var(--font-mono); font-size: 9px; color: var(--text-muted);}
.s25{position: absolute; left: 4px; top: 30%; font-family: var(--font-mono); font-size: 9px; color: var(--text-muted);}
.s26{position: absolute; left: 4px; top: 50%; font-family: var(--font-mono); font-size: 9px; color: var(--text-muted);}
.s27{position: absolute; left: 4px; top: 70%; font-family: var(--font-mono); font-size: 9px; color: var(--text-muted);}
.s28{position: absolute; left: 4px; top: 90%; font-family: var(--font-mono); font-size: 9px; color: var(--text-muted);}
.s29{position: absolute; bottom: 4px; left: 15%; font-family: var(--font-mono); font-size: 9px; color: var(--text-muted);}
.s30{position: absolute; bottom: 4px; left: 30%; font-family: var(--font-mono); font-size: 9px; color: var(--text-muted);}
.s31{position: absolute; bottom: 4px; left: 45%; font-family: var(--font-mono); font-size: 9px; color: var(--text-muted);}
.s32{position: absolute; bottom: 4px; left: 60%; font-family: var(--font-mono); font-size: 9px; color: var(--text-muted);}
.s33{position: absolute; bottom: 4px; left: 75%; font-family: var(--font-mono); font-size: 9px; color: var(--text-muted);}
.s34{position: absolute; bottom: 4px; left: 90%; font-family: var(--font-mono); font-size: 9px; color: var(--text-muted);}
.s35{position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--text-muted);}
.s36{position: absolute; left: 18%; top: 25%; width: 20px; height: 20px; border-radius: 50%; background: rgba(92, 214, 133, 0.7); border: 2px solid var(--green); cursor: pointer; transition: transform 0.2s;}
.s37{position: absolute; left: 35%; top: 12%; width: 18px; height: 18px; border-radius: 50%; background: rgba(92, 214, 133, 0.7); border: 2px solid var(--green); cursor: pointer; transition: transform 0.2s;}
.s38{position: absolute; left: 42%; top: 18%; width: 22px; height: 22px; border-radius: 50%; background: rgba(92, 214, 133, 0.7); border: 2px solid var(--green); cursor: pointer; transition: transform 0.2s;}
.s39{position: absolute; left: 68%; top: 5%; width: 24px; height: 24px; border-radius: 50%; background: rgba(92, 214, 133, 0.8); border: 2px solid var(--green); cursor: pointer; transition: transform 0.2s;}
.s40{position: absolute; left: 45%; top: 8%; width: 16px; height: 16px; border-radius: 50%; background: rgba(92, 214, 133, 0.6); border: 2px solid var(--green); cursor: pointer; transition: transform 0.2s;}
.s41{position: absolute; left: 22%; top: 28%; width: 18px; height: 18px; border-radius: 50%; background: rgba(92, 214, 133, 0.6); border: 2px solid var(--green); cursor: pointer; transition: transform 0.2s;}
.s42{position: absolute; left: 40%; top: 32%; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 202, 40, 0.6); border: 2px solid var(--yellow); cursor: pointer; transition: transform 0.2s;}
.s43{position: absolute; left: 44%; top: 38%; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 202, 40, 0.6); border: 2px solid var(--yellow); cursor: pointer; transition: transform 0.2s;}
.s44{position: absolute; left: 48%; top: 42%; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 202, 40, 0.6); border: 2px solid var(--yellow); cursor: pointer; transition: transform 0.2s;}
.s45{position: absolute; left: 55%; top: 35%; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 202, 40, 0.6); border: 2px solid var(--yellow); cursor: pointer; transition: transform 0.2s;}
.s46{position: absolute; left: 58%; top: 40%; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 202, 40, 0.6); border: 2px solid var(--yellow); cursor: pointer; transition: transform 0.2s;}
.s47{position: absolute; left: 52%; top: 45%; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 202, 40, 0.6); border: 2px solid var(--yellow); cursor: pointer; transition: transform 0.2s;}
.s48{position: absolute; left: 62%; top: 42%; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 202, 40, 0.6); border: 2px solid var(--yellow); cursor: pointer; transition: transform 0.2s;}
.s49{position: absolute; left: 75%; top: 38%; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 202, 40, 0.6); border: 2px solid var(--yellow); cursor: pointer; transition: transform 0.2s;}
.s50{position: absolute; left: 82%; top: 35%; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 202, 40, 0.6); border: 2px solid var(--yellow); cursor: pointer; transition: transform 0.2s;}
.s51{position: absolute; left: 70%; top: 45%; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 202, 40, 0.6); border: 2px solid var(--yellow); cursor: pointer; transition: transform 0.2s;}
.s52{position: absolute; left: 38%; top: 44%; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 202, 40, 0.6); border: 2px solid var(--yellow); cursor: pointer; transition: transform 0.2s;}
.s53{position: absolute; left: 65%; top: 48%; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 202, 40, 0.6); border: 2px solid var(--yellow); cursor: pointer; transition: transform 0.2s;}
.s54{position: absolute; left: 46%; top: 55%; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 82, 82, 0.6); border: 2px solid var(--red); cursor: pointer; transition: transform 0.2s;}
.s55{position: absolute; left: 50%; top: 58%; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 82, 82, 0.6); border: 2px solid var(--red); cursor: pointer; transition: transform 0.2s;}
.s56{position: absolute; left: 42%; top: 60%; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 82, 82, 0.6); border: 2px solid var(--red); cursor: pointer; transition: transform 0.2s;}
.s57{position: absolute; left: 56%; top: 52%; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 82, 82, 0.6); border: 2px solid var(--red); cursor: pointer; transition: transform 0.2s;}
.s58{position: absolute; left: 60%; top: 56%; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 82, 82, 0.6); border: 2px solid var(--red); cursor: pointer; transition: transform 0.2s;}
.s59{position: absolute; left: 65%; top: 54%; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 82, 82, 0.6); border: 2px solid var(--red); cursor: pointer; transition: transform 0.2s;}
.s60{position: absolute; left: 72%; top: 62%; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 82, 82, 0.6); border: 2px solid var(--red); cursor: pointer; transition: transform 0.2s;}
.s61{position: absolute; left: 68%; top: 68%; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 82, 82, 0.6); border: 2px solid var(--red); cursor: pointer; transition: transform 0.2s;}
.s62{position: absolute; left: 78%; top: 58%; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 82, 82, 0.6); border: 2px solid var(--red); cursor: pointer; transition: transform 0.2s;}
.s63{position: absolute; left: 58%; top: 72%; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 82, 82, 0.6); border: 2px solid var(--red); cursor: pointer; transition: transform 0.2s;}
.s64{position: absolute; left: 62%; top: 70%; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 82, 82, 0.6); border: 2px solid var(--red); cursor: pointer; transition: transform 0.2s;}
.s65{position: absolute; left: 66%; top: 78%; width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 82, 82, 0.7); border: 2px solid var(--red); cursor: pointer; transition: transform 0.2s;}
.s66{position: absolute; left: 54%; top: 68%; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 82, 82, 0.6); border: 2px solid var(--red); cursor: pointer; transition: transform 0.2s;}
.s67{position: absolute; left: 80%; top: 54%; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 82, 82, 0.6); border: 2px solid var(--red); cursor: pointer; transition: transform 0.2s;}
.s68{position: absolute; left: 85%; top: 62%; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 82, 82, 0.6); border: 2px solid var(--red); cursor: pointer; transition: transform 0.2s;}
.s69{position: absolute; left: 76%; top: 56%; width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 82, 82, 0.6); border: 2px solid var(--red); cursor: pointer; transition: transform 0.2s;}
.s70{position: absolute; display: none; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; pointer-events: none; z-index: 100; min-width: 140px; box-shadow: 0 4px 20px rgba(0,0,0,0.4);}
.s71{font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px;}
.s72{background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; padding: 24px; text-align: center;}
.s73{text-decoration: none;}
.s74{width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--green), var(--cyan)); margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; color: var(--bg-dark); transition: transform 0.2s; cursor: pointer;}
.s75{font-family: var(--font-head); font-size: 1.1rem; font-weight: 600; margin-bottom: 12px;}
.s76{font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5;}
.s77{width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--pink)); margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; color: var(--bg-dark); transition: transform 0.2s; cursor: pointer;}
.s78{width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--yellow), var(--orange)); margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; color: var(--bg-dark); transition: transform 0.2s; cursor: pointer;}
ACROSS INSIGHT — Revenue Architects
LE PREMIER SCORING DE REVENUE HEALTH DU MARCHÉ
La vérité survotre revenue.
On a industrialisé ce qu'on faisait depuis 15 ans : transformer notre expérience terrain en une méthodologie reproductible et mesurable.
Prêt à révéler vos angles morts ?
Un call de 20 minutes pour voir si ça fait sens pour vous.
LES DOULEURS QU'ON CONNAÎT TROP BIEN
Vous reconnaissez-vous ?
🎯
BRANDING
"On n'arrive pas à se différencier de la concurrence."
📉
ACQUISITION
"Notre CAC explose et la qualité des leads baisse."
📞
PROSPECTION
"Nos commerciaux n'atteignent pas leurs quotas."
🤝
SALES
"Nos cycles de vente s'allongent sans raison claire."
💾
CRM
"Notre CRM est une poubelle de données."
📊
REVOPS
"Personne ne fait confiance à nos dashboards."
💔
CSM / AM
"On perd des clients sans voir venir le churn."
🏢
MANAGEMENT
"Les équipes travaillent en silos."
LA MÉTHODOLOGIE
Les 8 piliers du Revenue Health Score
01
Branding
Positionnement, messaging, pricing power
02
Acquisition
Demand gen, ICP, canaux, attribution
03
Prospection
Outbound, qualification, conversion
04
Sales
Pipeline, cycle, closing, forecast
05
CRM
Data quality, adoption, process
06
RevOps
Infra, dashboards, automatisation
07
CSM / AM
Churn, NRR, expansion, health
08
Management
Alignement, stratégie, gouvernance
COMPRENDRE LE SCORING
Une méthodologie transparente
📋
600 standards du marché
Chaque critère est évalué par une question factuelle (oui/non ou échelle 1-5). Pas de place pour l'interprétation.
🔗
Logique de dépendances
Certaines questions ne s'activent que si d'autres sont validées. Pas de hors-sujet.
🎯
Adapté à votre réalité
Les pondérations s'ajustent selon votre secteur, taille et modèle .
🚫
Non attribué ≠ pénalité
Si un critère ne s'applique pas, il est exclu du calcul.
LE PROCESS
4 étapes. 10 jours. 1 diagnostic complet.
1
Cadrage
1h
Contexte, enjeux, périmètre et accès aux outils
→
2
Interviews
3 × 45 min
CEO/Founder, CRO, CMO / Head of Sales
→
3
Scoring
5 jours
Scoring sur 600 standards du marché, benchmark sectoriel
→
4
Restitution
1h30
Score, heatmap, recommandations priorisées
APERÇU D'UN EXEMPLE DE LIVRABLE
Ce que vous recevez concrètement
Branding 68
Acquisition 42
BDR 58
Sales 55
CSM 45
CRM 48
RevOps 52
Management 46
LOW IMPACT · LOW SCORE
HIGH IMPACT · LOW SCORE
LOW IMPACT · HIGH SCORE
HIGH IMPACT · HIGH SCORE
100
80
60
40
20
3
4
5
6
7
8
BUSINESS IMPACT (WEIGHT)
DO NOW Définir ICP documenté avec critères de scoring
Quick
Easy
4.2x
DO NOW Standardiser grille de qualification MEDDIC/SPICED
Quick
Easy
3.8x
DO NOW Créer séquences outbound standardisées par persona
Quick
Medium
3.7x
PRIORITAIRE Mettre en place Health Score client multi-critères
Medium
Medium
3.5x
PRIORITAIRE Déployer dashboard RevOps temps réel unifié
Medium
Hard
3.3x
ICP documenté + scoring
Grille qualification MEDDIC
Templates séquences SDR
SLA Marketing → Sales
Clean-up pipe zombies
Health Score client
Dashboard RevOps unifié
Process handover MQL→SQL
Forecast methodology
Playbook objections
Programme ABM
Playbook expansion NRR
Automatisations IA
Revenue ops rituals
Rescoring T+90
⚡
Enrichissement leads automatique
Acquisition
⚡
Scoring prédictif des opportunités
Sales
⚡
Résumé automatique des calls
BDR / Sales
⚡
Alertes churn prédictives
CSM / AM
⚡
Personnalisation séquences 1st line
BDR
DEEP DIVE
Explorer les sous-catégories par pilier
BRANDING
ACQUISITION
BDR
SALES
CRM
REVOPS
CSM / AM
MANAGEMENT
NOTRE LÉGITIMITÉ
On vient du terrain.
15+ ans d'expérience cumulée en tant que CEO, Founders et CRO dans des scale-ups B2B. On a vécu les mêmes douleurs, construit les mêmes machines revenue.
L
Lucas
Entrepreneur qui a fondé 3 entreprises, ex-CRO et RevOps.
C
Charles
Ex-CMO et CRO, a accompagné +100 clients sur des problématiques d'acquisition et de branding.
F
Fabien
Ex-Head of Sales dans des Grands Comptes et spécialiste des ventes complexes.