APP - Votre business, un seul tableau de bord
:root {
--bg: #060606;
--bg-card: #0c0c0e;
--orange: #f97316;
--amber: #fbbf24;
--white: #f8f8f8;
--off-white: #e4e4e7;
--gray: #71717a;
--gray-mid: #a1a1aa;
--border: rgba(255,255,255,0.06);
--border-hover: rgba(249,115,22,0.2);
--glow: rgba(249,115,22,0.08);
--green: #22c55e;
--blue: #60a5fa;
--purple: #a78bfa;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'Space Grotesk', sans-serif;
background: var(--bg); color: var(--white);
overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--orange); color: #000; }
/* Grain */
body::before {
content: ''; position: fixed; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.02; pointer-events: none; z-index: 9999;
}
/* ═══ CURSOR GLOW ═══ */
.cursor-glow {
position: fixed; width: 300px; height: 300px;
border-radius: 50%; pointer-events: none; z-index: 9998;
background: radial-gradient(circle, rgba(249,115,22,0.04) 0%, transparent 70%);
transform: translate(-50%, -50%);
transition: opacity 0.3s;
opacity: 0;
}
body:hover .cursor-glow { opacity: 1; }
/* ═══ SCROLL ANIMATIONS ═══ */
.reveal {
opacity: 0; transform: translateY(40px);
transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible {
opacity: 1; transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
/* Scale reveal variant */
.reveal-scale {
opacity: 0; transform: scale(0.92);
transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }
/* ═══ FLOATING NAV ═══ */
.nav {
position: fixed; top: 20px; left: 50%;
transform: translateX(-50%); z-index: 1000;
display: flex; align-items: center; gap: 32px;
background: rgba(6,6,6,0.75);
backdrop-filter: blur(24px);
border: 1px solid var(--border);
padding: 10px 18px 10px 22px;
border-radius: 100px;
transition: all 0.5s cubic-bezier(0.16,1,0.3,1);
}
.nav.scrolled {
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
border-color: rgba(255,255,255,0.08);
padding: 8px 16px 8px 20px;
}
.nav-logo {
display: flex; align-items: center; gap: 9px;
text-decoration: none; color: var(--white);
transition: transform 0.3s;
}
.nav-logo:hover { transform: scale(1.06); }
.nav-logo svg { height: 22px; width: 22px; color: var(--orange); transition: filter 0.3s; }
.nav-logo:hover svg { filter: drop-shadow(0 0 8px rgba(249,115,22,0.5)); }
.nav-logo b {
font-family: 'Syne', sans-serif;
font-weight: 800; font-size: 1rem;
}
.nav-links { display: flex; gap: 28px; }
.nav-links a {
color: var(--gray); text-decoration: none;
font-size: 0.82rem; font-weight: 500;
transition: color 0.3s, transform 0.3s;
}
.nav-links a:hover { color: var(--white); transform: translateY(-1px); }
.nav-cta {
background: var(--orange); color: #fff;
padding: 9px 24px; border-radius: 100px;
text-decoration: none; font-weight: 700;
font-size: 0.82rem; transition: all 0.3s;
position: relative; overflow: hidden;
}
.nav-cta::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transform: translateX(-100%);
transition: transform 0.6s;
}
.nav-cta:hover::before { transform: translateX(100%); }
.nav-cta:hover {
transform: scale(1.04);
box-shadow: 0 0 24px rgba(249,115,22,0.4);
}
/* ═══ HERO ═══ */
.hero {
min-height: 100vh; display: flex; flex-direction: column;
justify-content: center; align-items: center;
text-align: center; padding: 140px 40px 100px;
position: relative; overflow: hidden;
}
.hero-mesh {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(249,115,22,0.1) 0%, transparent 55%),
radial-gradient(ellipse 50% 40% at 85% 75%, rgba(249,115,22,0.04) 0%, transparent 50%);
pointer-events: none;
}
.hero-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 20%, transparent 65%);
-webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 20%, transparent 65%);
pointer-events: none;
animation: gridFloat 20s ease-in-out infinite;
}
@keyframes gridFloat {
0%,100% { transform: translate(0,0); }
50% { transform: translate(-8px, -8px); }
}
/* Floating particles */
.hero-particles {
position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.particle {
position: absolute; width: 2px; height: 2px;
background: var(--orange); border-radius: 50%;
opacity: 0; animation: particleFloat linear infinite;
}
@keyframes particleFloat {
0% { opacity: 0; transform: translateY(100vh) scale(0); }
10% { opacity: 0.6; }
90% { opacity: 0.6; }
100% { opacity: 0; transform: translateY(-20vh) scale(1); }
}
.hero-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 18px; border: 1px solid var(--border);
border-radius: 100px; font-size: 0.72rem; font-weight: 600;
color: var(--gray-mid); background: rgba(255,255,255,0.02);
margin-bottom: 28px; position: relative; z-index: 2;
cursor: pointer; transition: all 0.3s;
}
.hero-badge:hover { border-color: var(--green); background: rgba(34,197,94,0.05); }
.hero-badge .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--green);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:.3;transform:scale(.9)} 50%{opacity:1;transform:scale(1.1)} }
.hero-pills {
display: flex; gap: 10px; flex-wrap: wrap;
justify-content: center; margin-bottom: 32px;
position: relative; z-index: 2;
}
.hero-pill {
padding: 7px 20px; border: 1px solid var(--border);
border-radius: 100px; font-family: 'Syne', sans-serif;
font-weight: 600; font-size: 0.85rem;
background: rgba(255,255,255,0.02); transition: all 0.4s;
}
.hero-pill b { color: var(--orange); }
.hero-pill:hover {
border-color: var(--border-hover);
background: rgba(249,115,22,0.03);
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(249,115,22,0.1);
}
.hero-title { position: relative; z-index: 2; margin-bottom: 24px; }
.hero-title .pre {
font-family: 'Syne', sans-serif; font-size: clamp(1rem, 2vw, 1.6rem);
font-weight: 600; text-transform: uppercase;
letter-spacing: 0.08em; color: rgba(255,255,255,0.2); line-height: 1.3;
}
.hero-title .main {
font-family: 'Syne', sans-serif;
font-size: clamp(5rem, 14vw, 11rem);
font-weight: 800; line-height: 0.85;
letter-spacing: -0.04em;
background: linear-gradient(135deg, var(--orange) 0%, var(--amber) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 60px rgba(249,115,22,0.15));
position: relative;
}
/* Shimmer on title */
.hero-title .main::after {
content: 'APP'; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text; background-size: 200% 100%;
animation: shimmer 4s ease-in-out infinite;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.hero-title .post {
font-family: 'Syne', sans-serif;
font-size: clamp(1.2rem, 3vw, 2.4rem);
font-weight: 700; color: var(--off-white);
line-height: 1.3; margin-top: 10px;
}
.hero-sub {
font-size: 1.1rem; color: var(--gray-mid);
max-width: 560px; line-height: 1.75;
margin: 0 auto 40px; position: relative; z-index: 2;
}
.hero-sub strong { color: var(--white); font-weight: 600; }
.hero-actions {
display: flex; gap: 14px; position: relative; z-index: 2;
flex-wrap: wrap; justify-content: center;
}
/* Magnetic button */
.btn {
padding: 15px 36px; border-radius: 10px;
font-weight: 700; font-size: 0.92rem;
text-decoration: none; transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
display: inline-flex; align-items: center; gap: 8px;
position: relative; overflow: hidden;
}
.btn-orange {
background: var(--orange); color: #fff;
}
.btn-orange::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
transform: translateX(-100%); transition: transform 0.5s;
}
.btn-orange:hover::before { transform: translateX(100%); }
.btn-orange:hover {
box-shadow: 0 12px 40px rgba(249,115,22,0.35);
transform: translateY(-3px) scale(1.02);
}
.btn-ghost {
border: 1px solid var(--border); color: var(--gray-mid); background: transparent;
}
.btn-ghost:hover {
border-color: rgba(255,255,255,0.15); color: var(--white);
background: rgba(255,255,255,0.02); transform: translateY(-2px);
}
.hero-note {
margin-top: 18px; font-size: 0.75rem; color: var(--gray);
position: relative; z-index: 2;
}
.hero-note span { color: var(--orange); font-weight: 600; }
/* ═══ STATS ═══ */
.stats {
display: grid; grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.stat {
padding: 48px 28px; text-align: center;
border-right: 1px solid var(--border);
transition: all 0.4s;
}
.stat:last-child { border-right: none; }
.stat:hover { background: rgba(255,255,255,0.012); }
.stat:hover .stat-num { transform: scale(1.08); }
.stat-num {
font-family: 'Syne', sans-serif; font-size: 2.6rem;
font-weight: 800; line-height: 1;
background: linear-gradient(135deg, var(--orange), var(--amber));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text; transition: transform 0.4s;
}
.stat-label {
font-size: 0.76rem; color: var(--gray); margin-top: 10px;
text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500;
}
/* ═══ FEATURE BLOCKS ═══ */
.section-wrap {
max-width: 1200px; margin: 0 auto; padding: 100px 40px;
}
.s-eyebrow {
font-family: 'Syne', sans-serif; font-size: 0.72rem;
text-transform: uppercase; letter-spacing: 0.18em;
color: var(--orange); font-weight: 700; margin-bottom: 14px;
}
.s-title {
font-family: 'Syne', sans-serif;
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 800; line-height: 1.1;
letter-spacing: -0.03em; margin-bottom: 16px;
}
.s-desc {
color: var(--gray-mid); font-size: 1.05rem;
max-width: 580px; line-height: 1.7; margin-bottom: 56px;
}
.feat-block {
display: grid; grid-template-columns: 1fr 1fr;
gap: 56px; align-items: center;
padding: 80px 0; border-bottom: 1px solid var(--border);
}
.feat-block:last-child { border-bottom: none; }
.feat-block.rev .feat-visual { order: -1; }
.feat-content { max-width: 480px; }
.feat-tag {
display: inline-flex; padding: 5px 14px;
background: rgba(249,115,22,0.07); border: 1px solid rgba(249,115,22,0.12);
border-radius: 100px; font-size: 0.68rem; font-weight: 700;
color: var(--orange); text-transform: uppercase;
letter-spacing: 0.08em; margin-bottom: 20px;
}
.feat-content h3 {
font-family: 'Syne', sans-serif; font-size: 1.65rem;
font-weight: 800; margin-bottom: 16px; line-height: 1.15;
}
.feat-content p {
color: var(--gray-mid); font-size: 0.95rem;
line-height: 1.75; margin-bottom: 24px;
}
.feat-list {
list-style: none; display: flex;
flex-direction: column; gap: 11px;
}
.feat-list li {
display: flex; align-items: flex-start; gap: 11px;
font-size: 0.88rem; color: var(--off-white); line-height: 1.5;
opacity: 0; transform: translateX(-16px);
transition: all 0.5s cubic-bezier(0.16,1,0.3,1);
}
.feat-list.animated li { opacity: 1; transform: translateX(0); }
.feat-list li::before {
content: '\2713'; color: var(--orange);
font-weight: 700; font-size: 0.82rem;
flex-shrink: 0; margin-top: 2px;
}
.feat-visual {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: 16px; padding: 32px; min-height: 340px;
display: flex; flex-direction: column; justify-content: center;
position: relative; overflow: hidden;
transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.feat-visual:hover { border-color: var(--border-hover); }
.feat-visual::after {
content: ''; position: absolute;
top: -40%; right: -40%; width: 80%; height: 80%;
background: radial-gradient(circle, var(--glow), transparent 70%);
pointer-events: none; transition: opacity 0.4s;
}
.feat-visual:hover::after { opacity: 1.5; }
.fv-header {
font-family: 'Syne', sans-serif; font-weight: 700;
font-size: 0.78rem; text-transform: uppercase;
letter-spacing: 0.1em; color: var(--gray);
margin-bottom: 18px; position: relative; z-index: 2;
}
.fv-rows {
display: flex; flex-direction: column; gap: 9px;
position: relative; z-index: 2;
}
.fv-row {
display: flex; align-items: center; gap: 12px;
padding: 13px 16px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.04);
border-radius: 10px; font-size: 0.8rem;
transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
}
.fv-row:hover {
border-color: var(--border-hover);
background: rgba(255,255,255,0.04);
transform: translateX(4px);
}
.fv-dot {
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.fv-name { flex: 1; color: var(--off-white); }
.fv-tag {
padding: 3px 10px; border-radius: 100px;
font-size: 0.63rem; font-weight: 600;
}
/* ═══ TABS ENGINE ═══ */
.engine-tabs {
display: flex; gap: 0; margin-bottom: 48px;
border: 1px solid var(--border); border-radius: 12px;
overflow: hidden; width: fit-content;
}
.engine-tab {
padding: 13px 34px; font-family: 'Syne', sans-serif;
font-weight: 700; font-size: 0.88rem; cursor: pointer;
background: transparent; color: var(--gray);
transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
border: none; outline: none;
border-right: 1px solid var(--border);
position: relative;
}
.engine-tab:last-child { border-right: none; }
.engine-tab.active { background: var(--orange); color: #fff; }
.engine-tab:hover:not(.active) { background: rgba(255,255,255,0.03); color: var(--gray-mid); }
.engine-panel {
display: none; grid-template-columns: 1fr 1fr;
gap: 48px; align-items: start;
opacity: 0; transform: translateY(12px);
animation: panelIn 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
}
.engine-panel.active { display: grid; }
@keyframes panelIn { to { opacity: 1; transform: translateY(0); } }
.ep-content h3 {
font-family: 'Syne', sans-serif; font-size: 1.5rem;
font-weight: 800; margin-bottom: 14px; line-height: 1.2;
}
.ep-content > p {
color: var(--gray-mid); font-size: 0.95rem;
line-height: 1.7; margin-bottom: 24px;
}
.ep-feats { display: flex; flex-direction: column; gap: 18px; }
.ep-feat { display: flex; gap: 14px; align-items: flex-start; }
.ep-icon {
width: 38px; height: 38px; border-radius: 10px;
background: var(--glow); border: 1px solid rgba(249,115,22,0.1);
display: flex; align-items: center; justify-content: center;
font-size: 1rem; flex-shrink: 0;
transition: all 0.3s;
}
.ep-feat:hover .ep-icon {
transform: scale(1.1) rotate(-4deg);
box-shadow: 0 4px 16px rgba(249,115,22,0.15);
}
.ep-feat h4 {
font-family: 'Syne', sans-serif; font-weight: 700;
font-size: 0.92rem; margin-bottom: 3px;
}
.ep-feat p { color: var(--gray); font-size: 0.8rem; line-height: 1.5; }
/* ═══ MARQUEE ═══ */
.marquee-wrap {
padding: 30px 0; overflow: hidden;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.marquee-track {
display: flex; animation: mScroll 40s linear infinite;
width: max-content;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-item {
padding: 9px 24px; margin: 0 5px;
border: 1px solid var(--border); border-radius: 8px;
font-size: 0.78rem; font-weight: 500;
white-space: nowrap; color: var(--gray);
background: rgba(255,255,255,0.015);
transition: all 0.3s;
}
.marquee-item:hover {
color: var(--orange); border-color: var(--border-hover);
transform: scale(1.06);
}
@keyframes mScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
/* ═══ BENTO MODULES ═══ */
.bento {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.bento-card {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: 14px; padding: 26px; transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
position: relative; overflow: hidden;
}
.bento-card::before {
content: ''; position: absolute;
top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--orange), transparent);
opacity: 0; transition: opacity 0.3s;
}
.bento-card:hover::before { opacity: 1; }
.bento-card:hover {
border-color: var(--border-hover);
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}
.bento-card.wide { grid-column: span 2; }
.bento-top {
display: flex; justify-content: space-between;
align-items: flex-start; margin-bottom: 14px;
}
.bento-icon {
font-size: 1.5rem;
transition: transform 0.3s;
}
.bento-card:hover .bento-icon { transform: scale(1.15) rotate(-6deg); }
.bento-badge {
padding: 3px 10px; border-radius: 100px; font-size: 0.6rem;
font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
background: rgba(34,197,94,0.1); color: var(--green);
}
.bento-card h4 {
font-family: 'Syne', sans-serif; font-weight: 700;
font-size: 0.95rem; margin-bottom: 6px;
}
.bento-card p {
color: var(--gray); font-size: 0.8rem; line-height: 1.55;
}
/* ═══ PRICING ═══ */
.pricing-section {
padding: 100px 40px; text-align: center;
}
.pr-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 20px; max-width: 780px; margin: 48px auto 0;
}
.pr-card {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: 16px; padding: 40px 30px;
text-align: left; transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
position: relative;
}
.pr-card.pop { border-color: rgba(249,115,22,0.25); }
.pr-card.pop::before {
content: ''; position: absolute;
top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--orange), var(--amber));
}
.pr-card.pop::after {
content: 'Populaire'; position: absolute;
top: 14px; right: 16px;
background: var(--orange); color: #fff;
padding: 4px 12px; border-radius: 100px;
font-size: 0.62rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.04em;
animation: badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse {
0%,100% { box-shadow: 0 0 0 0 rgba(249,115,22,0); }
50% { box-shadow: 0 0 12px 4px rgba(249,115,22,0.2); }
}
.pr-card:hover { transform: translateY(-5px); box-shadow: 0 24px 60px rgba(0,0,0,0.4); }
.pr-type {
font-family: 'Syne', sans-serif; font-size: 0.68rem;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--orange); font-weight: 700; margin-bottom: 6px;
}
.pr-name {
font-family: 'Syne', sans-serif; font-size: 1.2rem;
font-weight: 800; margin-bottom: 18px;
}
.pr-amount {
display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px;
}
.pr-big {
font-family: 'Syne', sans-serif; font-size: 3.2rem;
font-weight: 800; line-height: 1;
background: linear-gradient(135deg, var(--orange), var(--amber));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.pr-freq { font-size: 0.88rem; color: var(--gray); }
.pr-note {
font-size: 0.78rem; color: var(--gray); line-height: 1.5;
margin-bottom: 22px;
}
.pr-list {
list-style: none; display: flex;
flex-direction: column; gap: 9px;
}
.pr-list li {
display: flex; align-items: center; gap: 10px;
font-size: 0.82rem; color: var(--off-white);
}
.pr-list li::before {
content: '\2713'; color: var(--orange);
font-weight: 700; font-size: 0.78rem; flex-shrink: 0;
}
/* ═══ FINAL CTA ═══ */
.final {
text-align: center; padding: 120px 40px; position: relative;
}
.final-glow {
position: absolute; inset: 0;
background: radial-gradient(ellipse 50% 50% at 50% 60%, rgba(249,115,22,0.06), transparent);
pointer-events: none;
}
.final h2 {
font-family: 'Syne', sans-serif;
font-size: clamp(2rem, 5vw, 3.2rem);
font-weight: 800; margin-bottom: 16px;
position: relative; z-index: 2; line-height: 1.1;
}
.final p {
color: var(--gray-mid); font-size: 1rem;
margin-bottom: 36px; position: relative; z-index: 2;
}
.final .btn { position: relative; z-index: 2; }
/* ═══ FOOTER ═══ */
.footer {
border-top: 1px solid var(--border); padding: 32px 48px;
display: flex; justify-content: space-between;
align-items: center; color: var(--gray); font-size: 0.72rem;
}
.footer-left {
display: flex; align-items: center; gap: 8px; cursor: pointer;
}
.footer-left svg { height: 16px; width: 16px; color: var(--orange); }
.footer-left b {
font-family: 'Syne', sans-serif; font-weight: 800;
color: var(--gray-mid); font-size: 0.8rem;
}
/* ═══ CONFETTI ═══ */
.confetti {
position: fixed; pointer-events: none; z-index: 99999;
width: 8px; height: 8px; border-radius: 2px;
animation: confettiFall 1.5s ease-out forwards;
}
@keyframes confettiFall {
0% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
100% { opacity: 0; transform: translateY(200px) rotate(720deg) scale(0); }
}
/* ═══ MATRIX RAIN ═══ */
#matrix-canvas {
position: fixed; inset: 0; z-index: 99998;
pointer-events: none; opacity: 0;
transition: opacity 0.5s;
}
#matrix-canvas.active { opacity: 1; pointer-events: all; }
/* ═══ SECRET MESSAGE ═══ */
.secret-msg {
position: fixed; top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0.8);
background: rgba(6,6,6,0.95); border: 1px solid var(--orange);
border-radius: 16px; padding: 40px; text-align: center;
z-index: 99999; opacity: 0; pointer-events: none;
transition: all 0.5s cubic-bezier(0.16,1,0.3,1);
max-width: 400px;
}
.secret-msg.show {
opacity: 1; transform: translate(-50%, -50%) scale(1);
pointer-events: all;
}
.secret-msg h3 {
font-family: 'Syne', sans-serif; color: var(--orange);
margin-bottom: 8px;
}
.secret-msg p { color: var(--gray-mid); font-size: 0.88rem; line-height: 1.6; }
.secret-close {
margin-top: 16px; background: var(--orange); color: #fff;
border: none; padding: 8px 24px; border-radius: 100px;
font-weight: 700; cursor: pointer; font-size: 0.8rem;
}
/* ═══ RESPONSIVE ═══ */
@media (max-width: 900px) {
.nav { padding: 8px 14px; gap: 12px; }
.nav-links { display: none; }
.hero { padding: 120px 20px 80px; }
.stats { grid-template-columns: repeat(2, 1fr); }
.stat { border-bottom: 1px solid var(--border); }
.section-wrap { padding: 60px 20px; }
.feat-block { grid-template-columns: 1fr; gap: 32px; }
.feat-block.rev .feat-visual { order: 0; }
.engine-panel.active { grid-template-columns: 1fr; }
.engine-tabs { flex-wrap: wrap; }
.bento { grid-template-columns: 1fr; }
.bento-card.wide { grid-column: span 1; }
.pr-grid { grid-template-columns: 1fr; }
.footer { flex-direction: column; gap: 10px; text-align: center; }
}
P.A.M. vous observe 👀
Propulsé par l'IA la plus coquine du marché. Vous pensiez vraiment qu'on n'allait pas mettre d'easter egg? Bienvenue dans l'univers Solutions M.
J'ai rien vu 😏
APP
Se connecter →
A utomatisation
P rogrammation
& P ublication
Votre business
APP
Un seul tableau de bord. 12 modules.
Vos leads , vos conversations , vos pipelines , vos automatisations et votre contenu social : tout est centralisé dans une seule plateforme conçue pour faire croître votre entreprise.
500$ de configuration · puis 50$ /mois · annulez quand vous voulez
24/7
Automatisations actives
Module principal
Un CRM complet. Pas un carnet d'adresses.
Chaque lead, chaque client, chaque interaction vit dans une fiche unique. Quand quelqu'un vous appelle, vous voyez l'historique complet avant même de décrocher. Fini les fichiers Excel, les Post-it et les "je pensais que t'avais rappelé".
Contacts illimités avec profil comportemental
Pipelines de vente drag & drop avec valeurs de deals
Tags, listes intelligentes et segmentation automatique
Historique unifié : appels, emails, SMS, rendez-vous
Champs personnalisés pour votre industrie
Sophie Bergeron Proposition envoyée
Restaurant L'Atelier En négociation
Clinique Sainte-Anne Nouveau lead
Plomberie Lavoie Client actif
Marie-Ève Côté Rendez-vous pris
Messagerie unifiée
Toutes vos conversations. Une seule boîte de réception.
Un client texte par SMS. Un autre écrit sur Instagram. Un troisième envoie un email. Normalement, ça veut dire 3 apps et des messages qui tombent entre les craques. Avec APP, tout arrive au même endroit.
SMS / MMS bidirectionnels
Email avec tracking d'ouverture et de clics
DMs Instagram et Facebook Messenger
Google Business Chat et WhatsApp
Réponses automatisées et templates
Historique complet rattaché à chaque contact
📱 SMS — Bonjour, je veux un rendez-vous
📸 Instagram — C'est quoi vos tarifs?
📧 Email — Suite à notre rencontre...
💚 WhatsApp — Merci pour le devis!
💬 Messenger — Êtes-vous ouverts samedi?
Le moteur de croissance
Capturez. Convertissez. Fermez.
Le cycle complet de vente, automatisé dans une seule plateforme.
Capturer
Convertir
Fermer
Capturez chaque lead. Automatiquement.
Que ce soit via vos réseaux sociaux, un formulaire web, une pub Facebook ou un appel entrant, chaque prospect atterrit dans votre CRM avec un profil complet.
📄
Formulaires & sondages Capturez des leads avec des formulaires intégrés à vos pages.
📅
Booking en ligne Vos prospects réservent eux-mêmes. Rappels automatiques.
🌐
Landing pages & funnels Builder drag & drop pour des pages à haute conversion.
Sophie Bergeron Formulaire
Restaurant L'Atelier Facebook Ad
Dr. Marc Pelletier Rendez-vous
Transformez vos prospects en clients. Sans effort.
APP envoie les bons messages, sur le bon canal, au bon moment. Votre prospect reçoit un SMS 30 secondes après avoir rempli un formulaire. Même à 23h un vendredi.
💬
Multi-canal SMS, email, Instagram, Messenger, WhatsApp. Une seule inbox.
🤖
Séquences automatisées Email jour 1, SMS jour 3, relance jour 7. Automatique.
📱
Bidirectionnel Vos prospects répondent directement. Tout dans APP.
SMS auto — Bonjour Sophie! Merci pour votre intérêt...
Sophie — Parfait, je réserve pour jeudi!
Email auto — Confirmation de votre rendez-vous...
Rappel SMS — N'oubliez pas, demain à 14h!
Fermez plus de deals. Gardez le contrôle.
Votre pipeline visuel montre exactement où en est chaque opportunité. Combien en négociation, combien prêts à closer, combien en jeu.
📊
Pipeline drag & drop Déplacez vos deals entre les étapes visuellement.
💳
Paiements intégrés Collectez via Stripe sur vos pages et bookings.
📈
Analytics Leads par source, revenus par phase, conversion par étape.
Proposition envoyée 8 deals
En négociation 5 deals · 24 500$
CRM & Contacts Pipelines Conversations Social Planner Email Marketing Automatisations Booking Funnels & Pages Téléphonie IP Réputation Reporting Paiements
CRM & Contacts Pipelines Conversations Social Planner Email Marketing Automatisations Booking Funnels & Pages Téléphonie IP Réputation Reporting Paiements
Écosystème complet
12 modules. Tous actifs. Zéro intégration.
Tout est inclus dans votre abonnement. Pas de modules à débloquer, pas de frais cachés.
CRM & Contacts Base illimitée avec profil comportemental complet. Chaque interaction trackée automatiquement. Tags, listes intelligentes et segmentation avancée.
Conversations Boîte de réception unifiée : SMS, email, Instagram, Messenger, WhatsApp, Google Chat.
Pipelines de vente Suivez chaque deal visuellement. Valeurs, probabilités, étapes personnalisables.
Social Planner Calendrier drag & drop pour Facebook, Instagram, LinkedIn, Google Business et TikTok.
Email Marketing Builder drag & drop, templates, séquences automatisées et analytics.
Automatisations Workflows visuels multi-canal. Triggers, conditions et actions sans code.
Calendrier & Booking Prise de rendez-vous en ligne avec rappels SMS/email et sync Google Calendar.
Funnels & Landing Pages Builder drag & drop pour créer des funnels de vente et landing pages optimisées. Templates par industrie, formulaires intégrés, A/B testing et analytics.
Téléphonie IP Appels entrants/sortants, call tracking, enregistrement et voicemail drops.
Réputation Demandes d'avis automatisées, monitoring Google Reviews et alertes.
Reporting Tableaux de bord marketing, attribution par canal et rapports exportables.
Paiements Intégration Stripe pour collecter paiements sur pages, funnels et bookings.
Tarification
Simple. Transparent. Complet.
12 modules actifs à une fraction du coût de 7 outils séparés.
Unique
Configuration
500$
On configure tout pour vous. CRM, pipelines, canaux, automatisations de base et formation.
CRM personnalisé à votre industrie
Pipelines de vente sur mesure
Connexion de vos canaux
Automatisations de base configurées
Formation de démarrage
Mensuel
Plateforme APP
50$
/mois
Accès complet aux 12 modules. Contacts illimités. Sans engagement.
12 modules actifs
Contacts illimités
Conversations multi-canal
Pipelines & CRM
Email & Social Planner
Automatisations
Booking, Funnels, Téléphonie
Réputation, Reporting, Paiements
Support Solutions M
Prêt à centraliser
12 modules. 50$/mois. Zéro intégration à maintenir.
// ═══════════ SCROLL ANIMATIONS (Intersection Observer) ═══════════
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
// Stagger feat-list items
const list = entry.target.querySelector('.feat-list');
if (list) {
list.classList.add('animated');
list.querySelectorAll('li').forEach((li, i) => {
li.style.transitionDelay = `${0.15 * i}s`;
});
}
}
});
}, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.reveal, .reveal-scale').forEach(el => observer.observe(el));
// ═══════════ ANIMATED STAT COUNTERS ═══════════
const counterObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const el = entry.target;
const target = parseInt(el.dataset.count);
const suffix = el.dataset.suffix || '';
if (!target) return;
let current = 0;
const step = Math.ceil(target / 30);
const interval = setInterval(() => {
current += step;
if (current >= target) { current = target; clearInterval(interval); }
el.textContent = current + suffix;
}, 40);
counterObserver.unobserve(el);
}
});
}, { threshold: 0.5 });
document.querySelectorAll('.stat-num[data-count]').forEach(el => counterObserver.observe(el));
// ═══════════ NAV SCROLL ═══════════
window.addEventListener('scroll', () => {
document.getElementById('mainNav').classList.toggle('scrolled', window.scrollY > 60);
});
// ═══════════ CURSOR GLOW ═══════════
const glow = document.getElementById('cursorGlow');
document.addEventListener('mousemove', e => {
glow.style.left = e.clientX + 'px';
glow.style.top = e.clientY + 'px';
});
// ═══════════ HERO PARTICLES ═══════════
const particleContainer = document.getElementById('particles');
for (let i = 0; i {
p.classList.remove('active');
p.style.animation = 'none';
});
document.querySelectorAll('.engine-tab').forEach(t => t.classList.remove('active'));
const panel = document.getElementById('tab-' + id);
panel.classList.add('active');
panel.style.animation = 'none';
panel.offsetHeight; // trigger reflow
panel.style.animation = 'panelIn 0.5s cubic-bezier(0.16,1,0.3,1) forwards';
event.target.classList.add('active');
}
// ═══════════════════════════════════════
// EASTER EGGS
// ═══════════════════════════════════════
// 1. CONFETTI on green dot click
document.getElementById('heroBadge').addEventListener('click', (e) => {
const colors = ['#f97316', '#fbbf24', '#22c55e', '#60a5fa', '#a78bfa', '#f43f5e'];
for (let i = 0; i c.remove(), 2000);
}
});
// 2. TRIPLE-CLICK logo footer -> secret P.A.M. message
let footerClicks = 0;
let footerTimer;
document.getElementById('footerLogo').addEventListener('click', () => {
footerClicks++;
clearTimeout(footerTimer);
footerTimer = setTimeout(() => footerClicks = 0, 600);
if (footerClicks >= 3) {
document.getElementById('secretMsg').classList.add('show');
footerClicks = 0;
}
});
// 3. KONAMI CODE -> Matrix rain
const konamiCode = [38,38,40,40,37,39,37,39,66,65];
let konamiIndex = 0;
let matrixActive = false;
document.addEventListener('keydown', (e) => {
if (e.keyCode === konamiCode[konamiIndex]) {
konamiIndex++;
if (konamiIndex === konamiCode.length) {
konamiIndex = 0;
toggleMatrix();
}
} else {
konamiIndex = 0;
}
});
function toggleMatrix() {
const canvas = document.getElementById('matrix-canvas');
matrixActive = !matrixActive;
canvas.classList.toggle('active', matrixActive);
if (matrixActive) startMatrix(canvas);
else setTimeout(() => { canvas.classList.remove('active'); }, 500);
}
function startMatrix(canvas) {
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const chars = 'APPSOLUTIONSMHUBLEE01'.split('');
const fontSize = 14;
const columns = Math.floor(canvas.width / fontSize);
const drops = Array(columns).fill(1);
function draw() {
if (!matrixActive) return;
ctx.fillStyle = 'rgba(6,6,6,0.06)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#f97316';
ctx.font = fontSize + 'px Syne';
drops.forEach((y, i) => {
const text = chars[Math.floor(Math.random() * chars.length)];
ctx.fillText(text, i * fontSize, y * fontSize);
if (y * fontSize > canvas.height && Math.random() > 0.975) drops[i] = 0;
drops[i]++;
});
requestAnimationFrame(draw);
}
draw();
// Auto-stop after 6 seconds
setTimeout(() => { matrixActive = false; canvas.classList.remove('active'); }, 6000);
}
// Click matrix to dismiss
document.getElementById('matrix-canvas').addEventListener('click', () => {
matrixActive = false;
document.getElementById('matrix-canvas').classList.remove('active');
});
// 4. CONSOLE easter egg
console.log('%c🔥 APP by Solutions M', 'font-size: 24px; font-weight: bold; color: #f97316;');
console.log('%cP.A.M. dit: "Si tu lis ça, tu es probablement un dev curieux. Respect. 😏"', 'font-size: 12px; color: #a1a1aa;');
console.log('%cTry the Konami code: ↑↑↓↓←→←→BA', 'font-size: 11px; color: #71717a;');
// 5. LOGO NAV double-click -> quick spin
document.getElementById('navLogo').addEventListener('dblclick', (e) => {
e.preventDefault();
const svg = e.currentTarget.querySelector('svg');
svg.style.transition = 'transform 0.6s cubic-bezier(0.16,1,0.3,1)';
svg.style.transform = 'rotate(360deg)';
setTimeout(() => { svg.style.transform = ''; }, 700);
});