*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #f8f9ff; font-family: ‘Montserrat’, -apple-system, sans-serif; color: #334155; line-height: 1.7; -webkit-font-smoothing: antialiased; }
.em-container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
/* ── HERO ── */
.em-hero {
background: linear-gradient(135deg, #1a1a2e 0%, #2d1b4e 55%, #6F327E 100%);
color: #fff; position: relative; overflow: hidden; padding: 4rem 0 3.5rem;
}
.em-hero::before {
content: ”; position: absolute; inset: 0;
background-image: url(“data:image/svg+xml,”);
pointer-events: none;
}
.em-hero::after {
content: ”; position: absolute; top: -80px; right: -60px;
width: 420px; height: 420px;
background: radial-gradient(circle, rgba(231,38,122,0.12) 0%, transparent 65%);
border-radius: 50%; pointer-events: none;
}
.em-hero-inner {
position: relative; z-index: 1;
display: grid; grid-template-columns: 58% 42%; gap: 3rem; align-items: center;
}
.em-badge {
display: inline-block; background: rgba(255,255,255,0.12); color: #fff;
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
padding: 0.375rem 1rem; border-radius: 2rem; margin-bottom: 1.25rem;
border: 1px solid rgba(255,255,255,0.2);
}
.em-hero h1 { font-size: 2.5rem; font-weight: 800; line-height: 1.2; margin: 0 0 1.125rem; color: #fff; }
.em-hero h1 span { color: #E7267A; }
.em-hero-desc { font-size: 1.05rem; opacity: 0.85; line-height: 1.7; margin: 0 0 2rem; max-width: 560px; }
.em-hero-kpis {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 1rem; max-width: 520px; margin-bottom: 2rem;
}
.em-kpi {
text-align: center; padding: 1rem 0.875rem;
background: rgba(255,255,255,0.07); border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);
}
.em-kpi-num { font-size: 1.6rem; font-weight: 800; color: #fff; display: block; line-height: 1.2; }
.em-kpi-num span { color: #E7267A; }
.em-kpi-label { font-size: 0.68rem; opacity: 0.72; margin-top: 0.2rem; display: block; line-height: 1.3; }
.em-hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
.em-btn-primary {
display: inline-block; background: #fff; color: #E7267A;
font-size: 0.9rem; font-weight: 800; padding: 0.875rem 1.875rem;
border-radius: 8px; text-decoration: none;
box-shadow: 0 4px 15px rgba(0,0,0,0.2); transition: transform 0.15s, box-shadow 0.2s;
}
.em-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.25); }
.em-btn-outline {
display: inline-block; background: transparent; color: #fff;
font-size: 0.9rem; font-weight: 600; padding: 0.875rem 1.875rem;
border-radius: 8px; text-decoration: none;
border: 2px solid rgba(255,255,255,0.4); transition: all 0.2s;
}
.em-btn-outline:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
/* Hero right */
.hero-client-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.hero-client-pill {
background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
border-radius: 10px; padding: 0.875rem 1rem;
display: flex; align-items: center; gap: 0.625rem; transition: background 0.2s;
}
.hero-client-pill:hover { background: rgba(255,255,255,0.14); }
.hero-client-initial {
width: 2.125rem; height: 2.125rem; border-radius: 7px;
display: flex; align-items: center; justify-content: center;
font-size: 0.72rem; font-weight: 900; color: #fff; flex-shrink: 0; letter-spacing: 0.04em;
}
.hci-a { background: linear-gradient(135deg, #E7267A, #6F327E); }
.hci-b { background: linear-gradient(135deg, #1a1a2e, #4a3060); }
.hci-c { background: linear-gradient(135deg, #6F327E, #8a3d9e); }
.hci-d { background: linear-gradient(135deg, #c71e6a, #E7267A); }
.hci-e { background: linear-gradient(135deg, #2d6a4f, #52b788); }
.hci-f { background: linear-gradient(135deg, #0077b6, #0096c7); }
.hci-g { background: linear-gradient(135deg, #e85d04, #f48c06); }
.hci-h { background: linear-gradient(135deg, #3a0ca3, #7209b7); }
.hero-client-name { font-size: 0.82rem; font-weight: 800; color: #fff; display: block; }
.hero-client-sector { font-size: 0.65rem; color: rgba(255,255,255,0.55); }
/* ── STATS ── */
.stats-strip { padding: 0 0 3.5rem; background: #f8f9ff; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; padding-top: 3rem; }
.stat-card {
background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
padding: 1.5rem; text-align: center;
box-shadow: 0 1px 3px rgba(0,0,0,0.05); position: relative; overflow: hidden;
}
.stat-card::before {
content: ”; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, #E7267A, #6F327E);
}
.stat-num { font-size: 2rem; font-weight: 900; color: #E7267A; display: block; line-height: 1.1; }
.stat-label { font-size: 0.8rem; color: #64748b; margin-top: 0.375rem; font-weight: 600; }
/* ── SECTION HEADER ── */
.em-sh { text-align: center; margin-bottom: 2.5rem; }
.em-sh-badge {
display: inline-block; background: rgba(231,38,122,0.1); color: #E7267A;
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
padding: 0.375rem 1rem; border-radius: 2rem; margin-bottom: 1rem;
}
.em-sh h2 {
font-size: 2.25rem; font-weight: 800; color: #1a1a2e;
margin: 0 0 0.5rem; letter-spacing: -0.3px; line-height: 1.2;
}
.em-sh h2::after {
content: ”; display: block; width: 3.5rem; height: 3px;
background: #E7267A; border-radius: 2px; margin: 1.25rem auto 0;
}
.em-sh h2 span { color: #E7267A; }
.em-sh p { font-size: 1rem; color: #64748b; max-width: 47.5rem; margin: 1.25rem auto 0; line-height: 1.7; }
/* ── FILTERS ── */
.filter-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 2.25rem; }
.filter-btn {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.5rem 1.125rem; border-radius: 2rem;
border: 1.5px solid #e2e8f0; background: #fff;
font-family: ‘Montserrat’, sans-serif; font-size: 0.8rem; font-weight: 600; color: #64748b;
cursor: pointer; transition: 0.2s;
}
.filter-btn:hover { border-color: #E7267A; color: #E7267A; }
.filter-btn.active { background: linear-gradient(135deg, #E7267A, #6F327E); border-color: transparent; color: #fff; }
/* ── CARDS ── */
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.cas-card {
background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
padding: 1.75rem 1.5rem; position: relative; overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
display: flex; flex-direction: column;
text-decoration: none; color: inherit;
}
.cas-card::before {
content: ”; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, #E7267A, #6F327E);
}
/* Lift uniquement sur les 4 premières cartes */
.cas-card:nth-child(-n+9):hover {
transform: translateY(-6px);
box-shadow: 0 14px 36px rgba(231,38,122,0.16);
}
.cas-card-top {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 0.75rem; margin-bottom: 0.875rem;
}
.cas-sector-badge {
display: inline-block; font-size: 0.65rem; font-weight: 700;
letter-spacing: 0.07em; text-transform: uppercase;
padding: 0.2rem 0.625rem; border-radius: 2rem; line-height: 1.5; white-space: nowrap;
}
.badge-logistique { background: rgba(26,26,46,0.08); color: #1a1a2e; }
.badge-sport { background: rgba(34,197,94,0.1); color: #16a34a; }
.badge-restauration { background: rgba(231,38,122,0.1); color: #E7267A; }
.badge-automobile { background: rgba(0,119,182,0.1); color: #0077b6; }
.badge-corporate { background: rgba(111,50,126,0.1); color: #6F327E; }
.badge-coworking { background: rgba(234,88,12,0.1); color: #ea580c; }
.cas-icon {
width: 2.75rem; height: 2.75rem; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem; flex-shrink: 0;
}
.cas-card h3 { font-size: 1.1rem; font-weight: 800; color: #1a1a2e; margin: 0 0 0.5rem; line-height: 1.3; }
.cas-card p { font-size: 0.875rem; color: #64748b; line-height: 1.65; margin: 0; flex: 1; }
.cas-card-footer {
display: flex; align-items: center; justify-content: space-between;
margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #f1f5f9;
}
.cas-read-more {
font-size: 0.82rem; font-weight: 700; color: #E7267A;
text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; transition: gap 0.2s;
}
.cas-read-more::after { content: ‘→’; }
.cas-read-more:hover { gap: 0.6rem; }
.cas-card-arrow {
width: 1.75rem; height: 1.75rem; border-radius: 50%;
background: rgba(231,38,122,0.08);
display: flex; align-items: center; justify-content: center;
color: #E7267A; font-size: 0.85rem; transition: background 0.2s;
}
.cas-card:nth-child(-n+9):hover .cas-card-arrow { background: #E7267A; color: #fff; }
/* ── FONCTIONNEMENT ── */
.section-gray { background: #fff; }
.section-light { background: #f8f9ff; }
.em-section { padding: 5rem 0; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.step-card {
background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
padding: 1.75rem 1.5rem; position: relative; overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: transform 0.25s, box-shadow 0.25s;
}
.step-card::before {
content: ”; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, #E7267A, #6F327E);
}
.step-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(231,38,122,0.1); }
.step-num {
font-size: 0.7rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;
color: #E7267A; margin-bottom: 0.875rem; display: block;
}
.step-icon {
width: 2.875rem; height: 2.875rem; border-radius: 50%;
background: linear-gradient(135deg, #E7267A, #6F327E);
display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
}
.step-icon svg { width: 1.25rem; height: 1.25rem; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.step-card h3 { font-size: 1rem; font-weight: 800; color: #1a1a2e; margin: 0 0 0.5rem; }
.step-card p { font-size: 0.875rem; color: #64748b; margin: 0; line-height: 1.65; }
/* ── FINAL CTA ── */
.final-cta {
background: linear-gradient(135deg, #1a1a2e 0%, #6F327E 60%, #E7267A 100%);
color: #fff; text-align: center; position: relative; overflow: hidden; padding: 5rem 0;
}
.final-cta::before {
content: ”; position: absolute; top: -80px; right: -60px; width: 320px; height: 320px;
background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
border-radius: 50%; pointer-events: none;
}
.final-cta::after {
content: ”; position: absolute; bottom: -50px; left: -30px; width: 200px; height: 200px;
background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
border-radius: 50%; pointer-events: none;
}
.final-cta-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.final-cta h2 { color: #fff; font-size: 2.25rem; font-weight: 800; margin: 0 0 1rem; line-height: 1.2; }
.final-cta p { color: rgba(255,255,255,0.82); font-size: 1rem; margin: 0 0 2rem; line-height: 1.7; }
.final-cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.cta-btn-yellow {
display: inline-block; background: #FFDD00; color: #020202;
font-size: 0.95rem; font-weight: 800; padding: 0.9rem 2rem;
border-radius: 8px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.3px;
transition: all 0.2s; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.cta-btn-yellow:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.25); }
.cta-btn-white-outline {
display: inline-block; background: transparent; color: #fff;
font-size: 0.95rem; font-weight: 700; padding: 0.9rem 2rem;
border-radius: 8px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.3px;
border: 2px solid rgba(255,255,255,0.45); transition: all 0.2s;
}
.cta-btn-white-outline:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
/* ── RESPONSIVE ── */
@media (max-width: 900px) {
.em-hero-inner { grid-template-columns: 1fr; }
.hero-client-grid { display: none; }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.cards-grid { grid-template-columns: repeat(2, 1fr); }
.steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.em-hero h1 { font-size: 1.75rem; }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.cards-grid { grid-template-columns: 1fr; }
.steps-grid { grid-template-columns: 1fr; }
.em-sh h2 { font-size: 1.6rem; }
.final-cta h2 { font-size: 1.6rem; }
}
Digital signage for all sectors
Discover how our customers are transforming their daily communication with EMITY solutions: digital signage, interactive displays, scoring, queue management and much more.
Active customers
Business sectors
Of signage expertise
They trust EMITY
Companies from all sectors trust us to transform their communication. Discover their real-world uses and the results achieved.
GLS France
GLS France manages its next-generation logistics hub using EMITY solutions. Real-time operational communication on sorting docks and dispatch areas.
MHSC
Real-world, comprehensive use of EMITY’s live scoring solution at Montpellier Hérault Sport Club to manage real-time score displays.
Atelier Banette
The leading French bakery and patisserie adopts digital signage to showcase its products, animate its windows and enhance the in-store experience.
Europcar
Global vehicle rental specialist for over 60 years, Europcar chooses EMITY to modernize its in-branch communication, for both professionals and individuals.
Sushi Daily
European brand for high-quality home-made sushi, present in supermarkets, railway stations and airports. EMITY digital signage animates kiosks and boosts sales.
Schindler
International leader in elevators and escalators, Schindler deploys digital signage as an internal and corporate communication tool on a global scale.
Colissimo
Delivery service of La Poste française since 1989, Colissimo adopts EMITY to streamline its internal communication, improve team coordination and boost productivity.
Bureaux & Co
Designer of collaborative and flexible spaces, Bureaux & Co enriches its work environments with digital signage to create a calm, warm and creative atmosphere.
How does it work?
EMITY is the intelligent, turnkey digital signage solution. In just a few steps, your screens become a powerful, autonomous communication tool.
Connection
An Internet connection without intrusion into your network. The EMITY player connects securely without modifying your existing configuration.
E-MANAGER
Simple, intuitive software platform for creating, scheduling and broadcasting your content. Accessible from any browser, no installation required.
E-BOX
The EMITY player that synchronizes and broadcasts your content to your displays. Compatible with Android TV, TV SOC and most screens on the market.
E-TEMPLATE
A library of visual designs adapted to your business. Hundreds of ready-to-use templates, customizable to your brand colors in just a few clicks.
Flexible & Scalable
Compatible with Android TV, TV SOC and leading screen brands. Our solution adapts to your existing equipment, without hardware constraints.
Security
Your data is hosted in France and secured with double authentication, encrypted streams and regular backups. GDPR compliance guaranteed.
function filterCards(btn, sector) {
document.querySelectorAll(‘.filter-btn’).forEach(b => b.classList.remove(‘active’));
btn.classList.add(‘active’);
document.querySelectorAll(‘#casGrid .cas-card’).forEach(card => {
card.style.display = (sector === ‘all’ || card.dataset.sector === sector) ? ‘flex’ : ‘none’;
});
}
