/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
FuturSite — Design System & Global Styles
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
/* ── VARIABLES ── */
/* @FONT-FACE self-hosted (V5 mai 2026)
Polices telechargees depuis Google Fonts et servies en local pour :
- Eviter le blocage par les browsers anti-fingerprinting (Brave Shield, etc.)
- Eliminer le RTT externe vers fonts.gstatic.com (gain perf ~100-200 ms)
- Garantir le rendu en file:// (preview local) ET https:// (prod)
- Conformite CSP stricte (font-src 'self' suffit)
Subset latin uniquement (suffisant pour site francophone). */
@font-face {
font-family: 'Chakra Petch';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/chakra-petch-400.woff2') format('woff2');
}
@font-face {
font-family: 'Chakra Petch';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/chakra-petch-600.woff2') format('woff2');
}
@font-face {
font-family: 'Chakra Petch';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/chakra-petch-700.woff2') format('woff2');
}
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 100 1000;
font-display: swap;
src: url('../fonts/dm-sans-variable.woff2') format('woff2');
}
:root {
--black: #0a0a0a;
--white: #ffffff;
--accent: #C8F135;
--accent-dark: #a8cc1a;
--accent-glow: rgba(200, 241, 53, 0.35);
--gray-100: #f6f6f4;
--gray-200: #ebebeb;
--gray-400: #aaaaaa;
--gray-600: #666666;
--gray-800: #2a2a2a;
--radius: 14px;
--radius-sm: 8px;
--radius-lg: 20px;
--transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
--font-heading: 'Chakra Petch', sans-serif;
--font-body: 'DM Sans', sans-serif;
}
/* ── NAV TELEPORT TRANSITION (Apple-style) ── */
.nav-teleport-overlay {
position: fixed;
inset: 0;
z-index: 99999;
background: var(--black);
opacity: 0;
pointer-events: none;
will-change: opacity;
}
.nav-teleport-overlay.tp-fade-in {
pointer-events: all;
animation: tpFadeIn 0.5s cubic-bezier(0.4, 0, 1, 1) forwards;
}
.nav-teleport-overlay.tp-fade-out {
pointer-events: none;
animation: tpFadeOut 0.65s cubic-bezier(0, 0, 0.2, 1) forwards;
}
@keyframes tpFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes tpFadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
/* Désactive le scroll natif smooth pendant la téléportation */
html.tp-jumping {
scroll-behavior: auto !important;
}
/* ── RESET ── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
scroll-padding-top: 132px;
}
body {
font-family: var(--font-body);
background: var(--black);
color: var(--white);
font-size: 16px;
line-height: 1.7;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeSpeed;
}
/* ── PAGE TRANSITION ── */
body {
opacity: 1;
transition: opacity 0.4s ease;
}
body.page-leaving {
opacity: 0;
}
/* ── PERFORMANCE: Disable backdrop-filter on mobile/tablet ── */
/* ══════════════════════════════════════════════════════════
MOBILE / TABLETTE · NAVBAR IDENTIQUE A L'ANCIEN SITE
Comportement : navbar transparente, logo + hamburger pill
flottent directement sur le contenu, pas de barre visible.
Ce bloc ECRASE toute autre regle via !important.
══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
*,
*::before,
*::after {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* ── Navbar : transparente en haut, translucide au scroll ── */
.navbar {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
transform: none !important;
opacity: 1 !important;
pointer-events: auto !important;
padding: 16px 0 !important;
}
/* Au scroll : barre translucide sombre pour proteger le logo
("Futur" est blanc dans le logo → invisible sur fond clair) */
.navbar.scrolled {
background: rgba(10, 10, 10, 0.55) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border-bottom-color: rgba(255, 255, 255, 0.06) !important;
/* La navbar NE DISPARAIT JAMAIS sur mobile */
transform: none !important;
opacity: 1 !important;
pointer-events: auto !important;
}
/* ── Logo : taille originale, aucun fond, aucune pill ── */
.nav-logo {
display: inline-flex !important;
align-items: center !important;
height: 86px;
padding: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.nav-logo .logo-img,
.logo-img {
height: 86px;
}
/* ── Nav-links desktop : caches sur mobile ── */
.nav-links {
display: none !important;
}
/* ── Hamburger : pill sombre visible sur tous les fonds ── */
.nav-hamburger {
display: flex !important;
background: rgba(10, 10, 10, 0.85) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* ── Bouton flottant + Logo flottant : DESACTIVES sur mobile ── */
.nav-floating-toggle,
.nav-floating-logo {
display: none !important;
}
}
/* ── Scroll padding (Lenis gere le smooth cote JS, plus besoin de scroll-behavior) ── */
html {
scroll-padding-top: 120px;
}
/* ── GPU ACCELERATION (only on elements that animate) ── */
#problem-carousel-track,
#site-types-track,
#portfolio-track {
backface-visibility: hidden;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
text-decoration: none;
color: inherit;
transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
ul,
ol {
list-style: none;
}
button {
font-family: inherit;
cursor: pointer;
border: none;
outline: none;
}
/* ── SMOOTH HOVER TRANSITIONS ── */
.nav-link,
.footer-link {
transition: color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
border-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.service-card,
.testimonial-card,
.faq-item {
transition: background-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
border-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.btn,
.btn-primary,
.btn-outline {
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* ── UTILITY ── */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
position: relative;
z-index: 1;
}
.section-padding {
padding: 100px 0;
}
.section-padding-sm {
padding: 70px 0;
}
.accent-text {
color: var(--accent);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* BR visible uniquement sur tablette et desktop (>= 768px) */
.br-tablet-up {
display: none;
}
@media (min-width: 768px) {
.br-tablet-up {
display: inline;
}
}
/* ── SECTION GLOW (dark sections) ── */
.section-glow {
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
filter: blur(120px);
pointer-events: none;
z-index: 0;
animation: glowPulse 8s ease-in-out infinite;
}
.section-glow.glow-left {
left: -100px;
top: 30%;
background: rgba(200, 241, 53, 0.04);
}
.section-glow.glow-right {
right: -100px;
top: 20%;
background: rgba(200, 241, 53, 0.03);
animation-delay: -4s;
}
.section-glow.glow-center {
left: 50%;
bottom: 10%;
transform: translateX(-50%);
background: rgba(59, 130, 246, 0.025);
animation-delay: -2s;
}
@keyframes glowPulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(1.2);
}
}
/* ── SECTION DECOR (white sections) ── */
.section-decor {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.decor-dot {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(200, 241, 53, 0.25);
box-shadow: 0 0 12px rgba(200, 241, 53, 0.15);
}
.decor-dot.decor-top-left {
top: 60px;
left: 40px;
}
.decor-dot.decor-top-right {
top: 50px;
right: 50px;
}
.decor-dot.decor-bottom-left {
bottom: 50px;
left: 30px;
}
.decor-dot.decor-bottom-right {
bottom: 40px;
right: 40px;
}
.decor-line {
position: absolute;
width: 60px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(200, 241, 53, 0.12), transparent);
}
.decor-line.decor-bottom-right {
bottom: 80px;
right: 30px;
}
.decor-line.decor-bottom-left {
bottom: 90px;
left: 20px;
}
.decor-cross {
position: absolute;
width: 16px;
height: 16px;
}
.decor-cross::before,
.decor-cross::after {
content: '';
position: absolute;
background: rgba(10, 10, 10, 0.06);
}
.decor-cross::before {
width: 16px;
height: 1px;
top: 50%;
left: 0;
}
.decor-cross::after {
width: 1px;
height: 16px;
left: 50%;
top: 0;
}
.decor-cross.decor-top-right {
top: 70px;
right: 60px;
}
/* ── SVG DECORATIONS ── */
.section-svg-decor {
position: absolute;
pointer-events: none;
z-index: 0;
opacity: 0.6;
}
.svg-top-left {
top: 40px;
left: 40px;
}
.svg-top-right {
top: 40px;
right: 40px;
}
.svg-bottom-left {
bottom: 40px;
left: 40px;
}
.svg-bottom-right {
bottom: 40px;
right: 40px;
}
.svg-center-left {
top: 50%;
left: 20px;
transform: translateY(-50%);
}
.svg-center-right {
top: 50%;
right: 20px;
transform: translateY(-50%);
}
@media (max-width: 768px) {
.section-svg-decor {
opacity: 0.3;
/* Less visible on mobile */
transform: scale(0.7);
/* Smaller on mobile */
}
.svg-center-left,
.svg-center-right {
display: none;
/* Hide side elements on mobile to prevent overflow/clutter */
}
}
/* Ensure sections with decor/glow are positioned */
.services,
.offers,
.testimonials,
.faq,
.why-us,
.portfolio,
.about,
.footer,
.dotmatrix-band {
position: relative;
overflow: hidden;
}
/* Skip rendering of off-screen sections until near viewport · major LCP/FCP win */
.problem,
.services,
.why-us,
.site-types,
.offers,
.process,
.portfolio,
.testimonials,
.about,
.section-tech,
.faq,
.contact,
.cta-final,
.footer {
content-visibility: auto;
contain-intrinsic-size: auto 800px;
}
/* ── SECTION HEADERS ── */
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-chip {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(200, 241, 53, 0.1);
border: 1px solid rgba(200, 241, 53, 0.2);
color: var(--accent);
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
padding: 8px 18px;
border-radius: 30px;
margin-bottom: 20px;
}
.section-chip.light {
background: rgba(10, 10, 10, 0.06);
border-color: rgba(10, 10, 10, 0.1);
color: var(--gray-600);
}
.section-heading {
font-family: var(--font-heading);
font-size: clamp(28px, 5vw, 46px);
font-weight: 700;
line-height: 1.15;
margin-bottom: 16px;
}
.section-heading.dark {
color: var(--black);
}
.section-sub {
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
max-width: 560px;
margin: 0 auto;
line-height: 1.7;
}
.section-sub.dark {
color: var(--gray-600);
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
NAVBAR
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 18px 0;
background: transparent;
border-bottom: 1px solid transparent;
transition: background-color 0.45s ease,
backdrop-filter 0.45s ease,
border-color 0.45s ease,
transform 0.55s cubic-bezier(0.65, 0, 0.35, 1),
opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1);
will-change: transform, opacity, background-color;
}
/* Etat scrolled : fond visible au scroll (mobile/tablette) */
.navbar.scrolled {
background: rgba(10, 10, 10, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom-color: rgba(255, 255, 255, 0.06);
}
/* Etat collapsed : la navbar disparait au scroll, remplacee par le bouton flottant (desktop uniquement) */
.navbar.collapsed {
transform: translateY(-100%);
opacity: 0;
pointer-events: none;
}
.navbar .container {
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-links {
display: flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 50px;
padding: 5px 6px;
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
LOGOS IMAGE — PNG à fond transparent natif
Crossfade adaptatif dark ↔ light via opacity
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
/* Conteneur logo navbar (mode sombre fixe) */
.nav-logo {
display: inline-flex;
align-items: center;
flex-shrink: 0;
height: 96px;
text-decoration: none;
transform-origin: left center;
will-change: opacity, transform;
/* Transition par defaut = REAPPARITION : douce avec leger overshoot elastique */
transition: opacity 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
filter 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.logo-img {
display: block;
height: 96px;
width: auto;
object-fit: contain;
user-select: none;
-webkit-user-drag: none;
}
.nav-link {
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.55);
position: relative;
padding: 8px 16px;
border-radius: 30px;
transition: all 0.3s ease;
}
.nav-link:hover {
color: var(--white);
background: rgba(255, 255, 255, 0.06);
}
.nav-link.active {
color: var(--black);
background: var(--accent);
font-weight: 600;
}
.nav-link::after {
display: none;
}
.nav-cta {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--accent);
color: var(--black);
font-family: var(--font-heading);
font-size: 12px;
font-weight: 700;
padding: 8px 18px;
border-radius: 30px;
border: 1.5px solid rgba(200, 241, 53, 0.4);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
margin-left: 2px;
}
.nav-cta:hover {
background: var(--accent-dark);
transform: scale(1.05);
box-shadow: 0 0 0 0 rgba(200, 241, 53, 0.4);
border-color: rgba(200, 241, 53, 0.6);
animation: btnShockwave 0.6s ease-out forwards;
}
.nav-cta:active {
transform: scale(1.02);
box-shadow: none;
animation: none;
}
/* Hamburger — Modern pill style */
.nav-hamburger {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 0;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
z-index: 1001;
}
.nav-hamburger:hover {
background: rgba(200, 241, 53, 0.1);
border-color: rgba(200, 241, 53, 0.25);
}
.nav-hamburger:active {
transform: scale(0.95);
}
.nav-hamburger span {
display: block;
width: 20px;
height: 2px;
background: var(--white);
border-radius: 2px;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: absolute;
}
.nav-hamburger span:nth-child(1) {
transform: translateY(-6px);
}
.nav-hamburger span:nth-child(2) {
transform: translateY(0);
width: 14px;
}
.nav-hamburger span:nth-child(3) {
transform: translateY(6px);
}
/* Open state — smooth X animation */
.nav-hamburger.open {
background: rgba(200, 241, 53, 0.12);
border-color: rgba(200, 241, 53, 0.3);
}
.nav-hamburger.open span:nth-child(1) {
transform: rotate(45deg) translateY(0);
background: var(--accent);
}
.nav-hamburger.open span:nth-child(2) {
opacity: 0;
transform: translateX(10px);
width: 20px;
}
.nav-hamburger.open span:nth-child(3) {
transform: rotate(-45deg) translateY(0);
background: var(--accent);
}
/* ═══════════════════════════════════════════════════════════════
FLOATING NAVIGATION (apparait au scroll, sur tous supports)
═══════════════════════════════════════════════════════════════ */
/* Bouton flottant : remplace la navbar au scroll */
.nav-floating-toggle {
position: fixed;
top: 20px;
left: 24px;
z-index: 1100;
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
padding: 0;
background: rgba(10, 10, 10, 0.92);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 16px;
cursor: pointer;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35),
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
/* État caché par défaut */
opacity: 0;
transform: translateY(-12px) scale(0.85);
pointer-events: none;
transition: opacity 0.45s cubic-bezier(0.65, 0, 0.35, 1),
transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
background 0.3s ease,
border-color 0.3s ease;
}
.nav-floating-toggle.visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.nav-floating-toggle:hover {
background: rgba(20, 20, 20, 0.96);
border-color: rgba(200, 241, 53, 0.30);
}
.nav-floating-toggle:active {
transform: translateY(0) scale(0.94);
}
.nav-floating-toggle span {
display: block;
position: absolute;
width: 20px;
height: 2px;
background: var(--white);
border-radius: 2px;
transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.3s ease,
background 0.3s ease,
width 0.3s ease;
}
.nav-floating-toggle span:nth-child(1) { transform: translateY(-6px); }
.nav-floating-toggle span:nth-child(2) { transform: translateY(0); width: 14px; }
.nav-floating-toggle span:nth-child(3) { transform: translateY(6px); }
.nav-floating-toggle:hover span:nth-child(2) {
width: 20px;
}
.nav-floating-toggle.open {
background: rgba(200, 241, 53, 0.14);
border-color: rgba(200, 241, 53, 0.40);
}
.nav-floating-toggle.open span {
background: var(--accent);
}
.nav-floating-toggle.open span:nth-child(1) {
transform: rotate(45deg) translateY(0);
}
.nav-floating-toggle.open span:nth-child(2) {
opacity: 0;
transform: translateX(10px);
}
.nav-floating-toggle.open span:nth-child(3) {
transform: rotate(-45deg) translateY(0);
}
/* Logo flottant à droite (mobile/tablette uniquement) */
.nav-floating-logo {
position: fixed;
top: 20px;
right: 24px;
z-index: 1100;
display: none;
align-items: center;
height: 52px;
padding: 0 18px;
background: rgba(10, 10, 10, 0.92);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 16px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35),
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
text-decoration: none;
/* État caché par défaut */
opacity: 0;
transform: translateY(-12px) scale(0.85);
pointer-events: none;
transition: opacity 0.45s cubic-bezier(0.65, 0, 0.35, 1),
transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-floating-logo.visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.nav-floating-logo img {
display: block;
height: 36px;
width: auto;
object-fit: contain;
user-select: none;
-webkit-user-drag: none;
}
/* ═══════════════════════════════════════════════════════════════
SIDE MENU DRAWER (gauche, ouvert via bouton flottant ou hamburger)
═══════════════════════════════════════════════════════════════ */
.side-menu-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 1500;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.side-menu-backdrop.active {
opacity: 1;
pointer-events: auto;
}
.side-menu {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: min(420px, 88vw);
z-index: 1600;
background: linear-gradient(180deg, #0a0a0a 0%, #111111 100%);
border-right: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: 24px 0 80px rgba(0, 0, 0, 0.55);
transform: translateX(-100%);
transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1);
display: flex;
flex-direction: column;
overflow: hidden;
visibility: hidden;
will-change: transform;
}
.side-menu.open {
transform: translateX(0);
visibility: visible;
}
/* Glow décoratif accent */
.side-menu::before {
content: '';
position: absolute;
top: -30%;
right: -40%;
width: 420px;
height: 420px;
background: radial-gradient(circle, rgba(200, 241, 53, 0.10) 0%, transparent 65%);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.side-menu::after {
content: '';
position: absolute;
bottom: -20%;
left: -30%;
width: 360px;
height: 360px;
background: radial-gradient(circle, rgba(96, 165, 250, 0.06) 0%, transparent 65%);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.side-menu-header {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 28px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.side-menu-logo {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.side-menu-logo img {
display: block;
height: 64px;
width: auto;
object-fit: contain;
user-select: none;
-webkit-user-drag: none;
}
/* Logo side-menu +15% sur desktop */
@media (min-width: 1025px) {
.side-menu-logo img {
height: 74px;
}
}
.side-menu-close {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
color: rgba(255, 255, 255, 0.65);
cursor: pointer;
transition: background 0.3s ease,
border-color 0.3s ease,
color 0.3s ease,
transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.side-menu-close:hover {
background: rgba(200, 241, 53, 0.12);
border-color: rgba(200, 241, 53, 0.35);
color: var(--accent);
transform: rotate(90deg);
}
.side-menu-nav {
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
padding: 24px 16px;
gap: 4px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(200, 241, 53, 0.3) transparent;
}
.side-menu-nav::-webkit-scrollbar { width: 4px; }
.side-menu-nav::-webkit-scrollbar-thumb { background: rgba(200, 241, 53, 0.3); border-radius: 2px; }
.side-menu-link {
display: flex;
align-items: center;
gap: 18px;
padding: 16px 18px;
text-decoration: none;
color: rgba(255, 255, 255, 0.65);
border-radius: 14px;
border: 1px solid transparent;
font-family: var(--font-heading);
font-size: 18px;
font-weight: 600;
letter-spacing: 0.01em;
/* Etat initial pour stagger animation */
opacity: 0;
transform: translateX(-24px);
transition: opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1),
transform 0.5s cubic-bezier(0.65, 0, 0.35, 1),
color 0.3s ease,
background 0.3s ease,
border-color 0.3s ease;
}
.side-menu.open .side-menu-link {
opacity: 1;
transform: translateX(0);
}
/* Stagger des liens (apparition cascadée) */
.side-menu.open .side-menu-link:nth-child(1) { transition-delay: 0.15s, 0.15s, 0.3s, 0.3s, 0.3s; }
.side-menu.open .side-menu-link:nth-child(2) { transition-delay: 0.20s, 0.20s, 0.3s, 0.3s, 0.3s; }
.side-menu.open .side-menu-link:nth-child(3) { transition-delay: 0.25s, 0.25s, 0.3s, 0.3s, 0.3s; }
.side-menu.open .side-menu-link:nth-child(4) { transition-delay: 0.30s, 0.30s, 0.3s, 0.3s, 0.3s; }
.side-menu.open .side-menu-link:nth-child(5) { transition-delay: 0.35s, 0.35s, 0.3s, 0.3s, 0.3s; }
.side-menu.open .side-menu-link:nth-child(6) { transition-delay: 0.40s, 0.40s, 0.3s, 0.3s, 0.3s; }
.side-menu.open .side-menu-link:nth-child(7) { transition-delay: 0.45s, 0.45s, 0.3s, 0.3s, 0.3s; }
.side-menu-label {
flex: 1;
}
.side-menu-arrow {
opacity: 0;
transform: translateX(-8px);
transition: opacity 0.3s ease, transform 0.3s ease;
color: var(--accent);
flex-shrink: 0;
}
.side-menu-link:hover {
color: var(--white);
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
}
.side-menu-link:hover .side-menu-arrow {
opacity: 1;
transform: translateX(0);
}
.side-menu-link.active {
color: var(--accent);
background: rgba(200, 241, 53, 0.08);
border-color: rgba(200, 241, 53, 0.25);
max-width: 75%;
}
.side-menu-link.active .side-menu-arrow {
opacity: 1;
transform: translateX(0);
}
.side-menu-footer {
position: relative;
z-index: 1;
padding: 20px 28px 28px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
flex-direction: column;
gap: 14px;
/* Etat initial pour animation */
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.5s,
transform 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.5s;
}
.side-menu.open .side-menu-footer {
opacity: 1;
transform: translateY(0);
}
.side-menu-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 22px;
background: var(--accent);
color: var(--black);
font-family: var(--font-heading);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
text-decoration: none;
border-radius: 100px;
border: 1.5px solid rgba(200, 241, 53, 0.6);
transition: background 0.35s ease,
transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.35s ease;
box-shadow: 0 8px 28px rgba(200, 241, 53, 0.25);
}
.side-menu-cta:hover {
background: var(--accent-dark);
transform: translateY(-2px);
box-shadow: 0 12px 36px rgba(200, 241, 53, 0.35);
}
.side-menu-tagline {
text-align: center;
font-family: var(--font-heading);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.32);
margin: 0;
}
/* Side menu responsive : sur mobile, prend toute la largeur dispo */
@media (max-width: 480px) {
.side-menu {
width: 100vw;
}
.side-menu-header {
padding: 20px 22px 16px;
}
.side-menu-nav {
padding: 18px 12px;
}
.side-menu-link {
padding: 14px 16px;
font-size: 15px;
}
}
/* Reduced motion : transitions instantanées */
@media (prefers-reduced-motion: reduce) {
.navbar,
.nav-floating-toggle,
.nav-floating-logo,
.side-menu,
.side-menu-backdrop,
.side-menu-link,
.side-menu-footer {
transition-duration: 0.01ms !important;
}
.side-menu.open .side-menu-link {
transition-delay: 0s !important;
}
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
HERO
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.hero {
position: relative;
min-height: 100vh; /* fallback navigateurs sans dvh */
min-height: 100dvh; /* iOS Safari : hauteur viewport dynamique */
display: flex;
align-items: center;
overflow: hidden;
padding-top: 80px;
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
contain: layout style;
}
.hero-gradient {
position: absolute;
width: 600px;
height: 600px;
border-radius: 50%;
filter: blur(120px);
opacity: 0.2;
animation: heroFloat 10s ease-in-out infinite;
animation-delay: 1.2s;
animation-fill-mode: both;
}
.hero-gradient.g1 {
background: var(--accent);
top: -15%;
right: -10%;
animation-delay: 1.2s;
}
.hero-gradient.g2 {
background: #3b82f6;
bottom: -20%;
left: -15%;
animation-delay: 1.5s;
opacity: 0.1;
}
.hero-gradient.g3 {
background: var(--accent);
top: 50%;
left: 40%;
width: 300px;
height: 300px;
animation-delay: 1.8s;
opacity: 0.1;
}
@keyframes heroFloat {
0%,
100% {
transform: translate(0, 0) scale(1);
}
33% {
transform: translate(30px, -30px) scale(1.05);
}
66% {
transform: translate(-20px, 20px) scale(0.95);
}
}
.hero-grid-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(rgba(200, 241, 53, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(200, 241, 53, 0.06) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
animation: gridPulse 6s ease-in-out 1.5s infinite;
}
@keyframes gridPulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.hero .container {
position: relative;
z-index: 1;
}
.hero-content {
max-width: 720px;
}
.hero-centered {
max-width: 1200px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
/* ── INTERACTIVE MOUSE GLOW ── */
.hero-mouse-glow {
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
background: radial-gradient(circle, rgba(200, 241, 53, 0.2) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
opacity: 0;
transform: translate(-50%, -50%);
transition: opacity 0.5s ease;
}
.hero:hover .hero-mouse-glow {
opacity: 1;
}
.hero-subtitle.revealed {
animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-buttons.revealed {
animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes heroFadeUp {
0% {
opacity: 0;
transform: translateY(24px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* ── DARK SECTION AMBIENT BACKGROUNDS ── */
.about::before,
.portfolio::before,
.testimonials::before,
.footer::before,
.dotmatrix-band::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
z-index: 0;
}
.about::after,
.testimonials::after,
.footer::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 60%;
height: 60%;
background: radial-gradient(circle at top right, rgba(200, 241, 53, 0.04) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
.portfolio::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50%;
height: 50%;
background: radial-gradient(circle at bottom left, rgba(200, 241, 53, 0.035) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
/* Futuristic effects */
.hero-orb {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.hero-orb.orb-1 {
width: 350px;
height: 350px;
top: 15%;
right: 5%;
background: radial-gradient(circle, rgba(200, 241, 53, 0.25) 0%, transparent 70%);
animation: orbPulse 6s ease-in-out 1.5s infinite;
}
.hero-orb.orb-2 {
width: 200px;
height: 200px;
bottom: 20%;
left: 8%;
background: radial-gradient(circle, rgba(59, 130, 246, 0.16) 0%, transparent 70%);
animation: orbPulse 8s ease-in-out 1.5s infinite reverse;
}
.hero-orb.orb-3 {
width: 120px;
height: 120px;
top: 40%;
left: 30%;
background: radial-gradient(circle, rgba(200, 241, 53, 0.15) 0%, transparent 70%);
animation: orbPulse 5s ease-in-out 2s infinite;
}
.hero-ring {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(200, 241, 53, 0.12);
pointer-events: none;
}
.hero-ring.ring-1 {
width: 500px;
height: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: ringExpand 10s linear 1.5s infinite;
}
.hero-ring.ring-2 {
width: 300px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: ringExpand 10s linear 6.5s infinite;
}
@keyframes orbPulse {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.15);
opacity: 0.6;
}
}
@keyframes ringExpand {
0% {
transform: translate(-50%, -50%) scale(0.5);
opacity: 0.6;
border-color: rgba(200, 241, 53, 0.2);
}
100% {
transform: translate(-50%, -50%) scale(2.5);
opacity: 0;
border-color: rgba(200, 241, 53, 0);
}
}
.hero-particles {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.hero-chip {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(200, 241, 53, 0.1);
border: 1px solid rgba(200, 241, 53, 0.2);
color: var(--accent);
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
padding: 8px 18px;
border-radius: 30px;
margin-bottom: 28px;
opacity: 0;
transform: translateY(20px);
}
.hero-title {
font-family: var(--font-heading);
font-size: clamp(64px, 5.5vw, 78px);
font-weight: 700;
line-height: 1.15;
color: var(--white);
margin-bottom: 28px;
position: relative;
z-index: 2;
text-align: center;
letter-spacing: -0.03em;
}
.hero-title-line1 {
display: block;
}
/* ── WORD CAROUSEL WRAPPER ── */
/* overflow: visible so neon glow + shockwave are never clipped */
.hero-carousel-wrapper {
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: visible;
height: 65px;
margin-top: 12px;
}
.hero-carousel-track {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
/* ── ANIMATED CHIP (pill) — Apple-style (look d'origine restauré, taille -10% conservée) ── */
.hero-chip {
display: inline-flex;
align-items: center;
gap: 11px;
background: #C8F135;
padding: 13px 29px;
border-radius: 999px;
position: absolute;
white-space: nowrap;
/* Default hidden state: below + faded + slightly scaled down */
opacity: 0;
transform: translateY(22px) scale(0.96);
pointer-events: none;
will-change: transform, opacity;
/* Neon glow */
box-shadow:
0 0 20px rgba(200, 241, 53, 0.55),
0 0 50px rgba(200, 241, 53, 0.25),
0 0 100px rgba(200, 241, 53, 0.1);
}
/* Active chip: fully visible */
.hero-chip-active {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/* ── NEON SHOCKWAVE RING ── */
.hero-chip::after {
content: '';
position: absolute;
inset: -3px;
border-radius: 999px;
border: 1.5px solid rgba(200, 241, 53, 0.6);
opacity: 0;
pointer-events: none;
z-index: -1;
}
.hero-chip-active::after,
.hero-chip-enter::after {
animation: chipShockwave 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
@keyframes chipShockwave {
0% {
opacity: 0.8;
inset: -3px;
border-color: rgba(200, 241, 53, 0.6);
}
50% {
opacity: 0.2;
inset: -18px;
border-color: rgba(200, 241, 53, 0.3);
}
100% {
opacity: 0;
inset: -30px;
border-color: rgba(200, 241, 53, 0);
}
}
.hero-chip-icon {
width: 25px;
height: 25px;
flex-shrink: 0;
}
.hero-chip-text {
font-family: var(--font-heading);
font-weight: 700;
font-size: clamp(22px, 2.25vw, 27px);
color: #0a0a0a;
letter-spacing: -0.01em;
line-height: 1;
}
/* ── APPLE-STYLE CHIP TRANSITIONS ── */
/* Exit: fade out + slight upward drift + micro-blur */
@keyframes chipFadeOut {
0% {
opacity: 1;
transform: translateY(0) scale(1);
}
100% {
opacity: 0;
transform: translateY(-20px) scale(0.97);
}
}
/* Enter: fade in + rise from below + slight scale up */
@keyframes chipFadeIn {
0% {
opacity: 0;
transform: translateY(22px) scale(0.96);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.hero-chip-exit {
animation: chipFadeOut 0.45s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
.hero-chip-enter {
animation: chipFadeIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* ── ENTRANCE ANIMATION FOR HERO TITLE ── */
@keyframes heroTitleFadeIn {
0% {
opacity: 0;
transform: translateY(28px) scale(0.98);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.hero-title-line1 {
opacity: 0;
animation: heroTitleFadeIn 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
will-change: transform, opacity;
}
.hero-carousel-wrapper {
opacity: 0;
animation: heroTitleFadeIn 1s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards;
will-change: transform, opacity;
}
.hero-subtitle {
font-size: 20px;
color: rgba(255, 255, 255, 0.55);
max-width: 900px;
line-height: 1.5;
margin-bottom: 36px;
opacity: 0;
transform: translateY(20px);
position: relative;
z-index: 2;
letter-spacing: -0.01em;
will-change: transform, opacity;
}
/* Desktop visible, mobile hidden */
.hero-subtitle-desktop {
display: block;
}
.hero-subtitle-mobile {
display: none;
}
.hero-buttons {
display: flex;
flex-wrap: wrap;
gap: 13px;
opacity: 0;
transform: translateY(20px);
position: relative;
z-index: 2;
will-change: transform, opacity;
}
/* CTA hero -10% (ne touche pas les .btn ailleurs sur le site) */
.hero-buttons .btn {
font-size: 14px;
padding: 14px 29px;
min-height: 47px;
}
/* GIF d'illustration des cartes "Constat fréquent" · remplace les SVG décoratifs.
Source haute résolution downsamplée dans le slot .problem-card-visual. */
.constat-gif {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
image-rendering: -webkit-optimize-contrast;
}
/* ═══════════════════════════════════════════════════════════
HERO V2 · SPLIT LAYOUT (texte gauche · visuel Lottie droite)
- Mobile/Tablette (<1025px) : layout colonne unique centré (comportement actuel préservé)
- Desktop (≥1025px) : grid 2 colonnes, texte à gauche aligné start, slot Lottie à droite
═══════════════════════════════════════════════════════════ */
.hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: center;
width: 100%;
position: relative;
z-index: 1;
}
.hero-split {
max-width: 1200px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.hero-visual {
display: none;
}
/* Visuel hero (GIF Business strategy 1200×1200 source) · affiché uniquement en split (≥1025px desktop)
ou en colonne tablette (700-1024px). Mobile : .hero-visual reste display:none.
Choix : GIF raster brut sans transform: scale(). Le source est 1200×1200 px ;
downsampled à 540-700 px à l'écran = qualité maximale (pas d'upscaling flouté).
L'agrandissement visuel se fait uniquement via max-width du slot, jamais via scale.
Décoratif (aria-hidden) : pointer-events:none pour ne pas bloquer la navbar/logo. */
.hero-visual {
overflow: visible;
--hero-visual-tx: 40px;
transform: translateX(var(--hero-visual-tx));
position: relative;
opacity: 0;
animation: heroVisualFadeIn 1s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
will-change: transform, opacity;
pointer-events: none;
}
.hero-visual-img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
pointer-events: none;
/* lissage rendu pour les downsamplings (img + video se comportent identiquement) */
image-rendering: -webkit-optimize-contrast;
background: transparent;
}
/* Lottie hero : conteneur transparent qui accueille le SVG injecté par lottie-web */
.hero-lottie {
width: 100%;
height: 100%;
display: block;
pointer-events: none;
background: transparent;
}
.hero-lottie svg {
display: block;
width: 100% !important;
height: 100% !important;
}
@keyframes heroVisualFadeIn {
0% {
opacity: 0;
transform: translateX(var(--hero-visual-tx)) translateY(24px) scale(0.94);
}
100% {
opacity: 1;
transform: translateX(var(--hero-visual-tx)) translateY(0) scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.hero-visual {
opacity: 1;
animation: none;
}
}
/* Tablette (700-1024px) : pas de décalage, slot plus modeste */
@media (max-width: 1024px) and (min-width: 700px) {
.hero-visual {
--hero-visual-tx: 0px;
}
}
.hero-br-desktop {
display: none;
}
/* Mobile (<700px) : "qui" inline dans le H1, span "qui" séparé masqué, row3 en bloc, espace mobile actif.
L'espace mobile (.hero-mobile-space) corrige la faute "unécosystème" en remplaçant le saut
qui n'existe pas en mobile. */
.hero-title-qui-mobile {
display: inline;
}
.hero-mobile-space {
display: inline;
}
.hero-title-row3 {
display: block;
}
.hero-title-row3 > .hero-title-qui {
display: none;
}
/* Split layout : actif uniquement sur desktop (≥1025px).
Tablette (700-1024px) et mobile (<700px) restent en colonne unique centrée
(le Lottie tablette s'insère sous le sous-titre via le grid auto-flow et le DOM order). */
@media (min-width: 1025px) {
/* Container hero élargi pour donner plus de place au slot visuel à droite */
.hero > .container {
max-width: 1440px;
}
.hero-grid {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
grid-template-rows: auto auto;
grid-template-areas:
"content visual"
"buttons visual";
column-gap: 28px;
row-gap: 16px;
align-items: stretch;
}
/* align-self: end sur hero-content → contenu plaqué en bas de sa row,
donc le sous-titre se retrouve juste au-dessus des boutons (séparés par row-gap 24px). */
.hero-content { grid-area: content; align-self: end; }
.hero-visual { grid-area: visual; align-self: center; }
.hero-buttons { grid-area: buttons; align-self: start; }
.hero-split {
max-width: 100%;
margin: 0;
text-align: left;
align-items: flex-start;
}
/* Titre 2 lignes : "Votre business mérite un" / "écosystème digital".
impose la coupe ; white-space: nowrap empêche tout re-wrap.
clamp couvre tablette (38px @ ≈760px viewport) → desktop (78px max ≥1700px). */
.hero-split .hero-title {
text-align: left;
font-size: clamp(38px, 4.6vw, 78px);
line-height: 1.04;
letter-spacing: -0.03em;
margin-bottom: 6px;
}
.hero-split .hero-title-line1 {
white-space: nowrap;
}
/* Tablette + desktop split : "qui" inline du H1 + espace mobile cachés.
Le span "qui" séparé apparaît à côté du chip carousel sur la 3e ligne. */
.hero-split .hero-title-qui-mobile,
.hero-split .hero-mobile-space {
display: none;
}
/* 3e ligne = "qui" + chip côte à côte.
align-items: center → centres verticaux alignés (le chip est verticalement centré sur le mot « qui »).
Aucune marge sur le wrapper : le chip pill apparaît au milieu de la hauteur du « qui ». */
.hero-split .hero-title-row3 {
display: flex;
align-items: center;
gap: 20px;
margin-top: 12px;
margin-bottom: 22px;
max-width: 100%;
}
.hero-split .hero-title-row3 > .hero-title-qui {
display: inline-flex;
align-items: center;
font-family: var(--font-heading);
font-weight: 700;
font-size: clamp(38px, 4.6vw, 78px);
line-height: 1;
letter-spacing: -0.03em;
color: var(--white);
flex: 0 0 auto;
}
.hero-split .hero-title-row3 .hero-carousel-wrapper {
margin: 0;
height: auto;
min-height: 56px;
width: clamp(360px, 50vw, 540px);
flex: 0 0 auto;
}
.hero-split .hero-carousel-wrapper {
justify-content: flex-start;
}
.hero-split .hero-carousel-track {
justify-content: flex-start;
}
/* Alignement optique baseline-to-baseline « qui » ↔ chip-text :
le chip-text est typographiquement plus haut que le « qui » à cause de la différence
de font-size (78px vs 27px) et du padding du chip. On descend la track de N pixels
pour aligner les baselines visuellement. La track n'a pas d'animation transform,
donc cet override ne casse rien. */
.hero-split .hero-title-row3 .hero-carousel-track {
transform: translateY(7px);
}
.hero-split .hero-subtitle {
margin-left: 0;
margin-right: 0;
max-width: 580px;
}
.hero-split .hero-buttons {
justify-content: flex-start;
}
/* Desktop (≥1025px) : slot Lottie agrandi de 25% via width réelle (pas transform: scale).
L'agrandissement par scale causait des saccades de scroll : à chaque frame Lottie
re-peint le SVG + le browser composite la layer scaled = double charge GPU.
Avec width: 125% le SVG est rendu directement à la bonne taille = 0 surcoût GPU. */
.hero-visual {
display: block;
position: relative;
width: 125%;
aspect-ratio: 1 / 1;
max-width: 1375px;
justify-self: end;
z-index: 1;
}
.hero-br-desktop {
display: inline;
}
}
/* Desktop pur (≥1025px) : surcharges spécifiques (padding plus généreux, tailles min plus hautes,
slot Lottie plus large, gaps plus aérés).
V5 mai 2026 : align-items: flex-start + padding-top: 110px pour réduire l'espace navbar/hero.
Le min-height: 100vh + align-items: center initial annulait le padding-top — il fallait passer
en flex-start pour que le padding-top contrôle réellement l'écart. */
@media (min-width: 1025px) {
.hero {
padding-top: 82px;
align-items: flex-start;
}
.hero-grid {
gap: 32px;
}
.hero-split .hero-title {
font-size: clamp(60px, 4.6vw, 78px);
margin-bottom: 10px;
}
.hero-split .hero-title-row3 > .hero-title-qui {
font-size: clamp(60px, 4.6vw, 78px);
}
.hero-split .hero-title-row3 {
gap: 22px;
margin-top: 14px;
margin-bottom: 30px;
}
.hero-split .hero-title-row3 .hero-carousel-wrapper {
min-height: 65px;
width: clamp(380px, 36vw, 540px);
margin: 0;
}
/* Desktop : différence font-size titre (60-78) vs chip-text (22-27) plus marquée
→ décalage vertical plus important pour aligner baselines. */
.hero-split .hero-title-row3 .hero-carousel-track {
transform: translateY(14px);
}
}
/* ═══════════════════════════════════════════════════════════
TABLETTE (700-1024px) · layout colonne unique centré (comme l'ancienne version),
Lottie inséré sous le sous-titre et avant les boutons CTA via le DOM order grid.
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) and (min-width: 700px) {
/* Espacement logo/titre +25% sur tablette (80px -> 100px) */
.hero {
padding-top: 100px;
}
/* Slot Lottie tablette : aspect-ratio reduit + margin-top fortement negatif
pour eliminer la zone vide haute du viewBox Lottie. Taille +20% (750 -> 900). */
.hero-visual {
display: block;
max-width: 900px;
width: 100%;
aspect-ratio: 1 / 0.78;
margin: -120px auto -16px;
--hero-visual-tx: 0px;
transform: none;
justify-self: center;
}
/* Boutons CTA centres, remontes pour s'eloigner de la section suivante */
.hero-buttons {
justify-content: center;
margin-top: -8px;
padding-bottom: 40px;
}
/* Police +20% sur tablette (15px -> 18px) pour meilleure lisibilite */
.hero-buttons .btn {
font-size: 18px;
}
/* Bouton outline plus visible sur tablette */
.hero-buttons .btn-outline {
border-color: rgba(200, 241, 53, 0.45);
background: rgba(200, 241, 53, 0.06);
color: var(--white);
}
/* Titre tablette +50% par rapport au mobile (40-50px → 60-78px).
Override le clamp(56,7.5vw,72) du bloc max-width:1024 hérité. */
.hero-title {
font-size: clamp(60px, 8vw, 78px) !important;
}
/* Sous-titre : margin-bottom réduit pour rapprocher le Lottie qui suit */
.hero-subtitle {
margin-bottom: 6px;
}
/* Gap minimal du grid en tablette pour resserrer content / visual / buttons */
.hero-grid {
gap: 4px;
}
}
/* ──────────────────────────────────────────────
MOBILE (<700px) : visuel hero activé entre le sous-titre et les CTA
Source vidéo 2000×2000 → downsample à ≤340px → rendu pixel-perfect
────────────────────────────────────────────── */
@media (max-width: 699px) {
.hero-visual {
display: block;
position: relative;
width: 100%;
/* Taille +20% (425 -> 510) pour meilleure visibilite sur mobile */
max-width: 510px;
/* Aspect-ratio reduit (1/0.78) : slot moins haut = espace vide haut du viewBox elimine */
aspect-ratio: 1 / 0.78;
/* Margin-top fortement negatif : tire le Lottie sous le sous-titre, recouvre tout l'espace */
margin: -80px auto 0;
--hero-visual-tx: 0px;
transform: none;
opacity: 1;
animation: none;
justify-self: center;
z-index: 1;
pointer-events: none;
}
.hero-visual-img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* Pack les 3 blocs (texte, Lottie, boutons) en haut — supprime l'espace libre distribué par align-content:stretch */
.hero-grid { row-gap: 0; align-content: start; }
.hero-subtitle.hero-subtitle-mobile { margin-bottom: 0; }
/* Remonter legerement les boutons vers le Lottie */
.hero-buttons { margin-top: -16px; }
}
/* Tres petit mobile : taille +20% (350 -> 420) pour meilleure visibilite */
@media (max-width: 400px) {
.hero-visual { max-width: 420px; margin: 0 auto 4px; }
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 15px;
padding: 16px 32px;
border-radius: 12px;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
min-height: 52px;
white-space: nowrap;
border: 1.5px solid transparent;
}
.btn-primary {
background: rgba(200, 241, 53, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--black);
border-color: rgba(200, 241, 53, 0.4);
}
.btn-primary:hover {
background: var(--accent);
transform: scale(1.05);
box-shadow: 0 0 0 0 rgba(200, 241, 53, 0.4);
border-color: rgba(200, 241, 53, 0.6);
animation: btnShockwave 0.6s ease-out forwards;
}
.btn-primary:active {
transform: scale(1.02);
box-shadow: none;
}
.btn-outline {
background: rgba(10, 10, 10, 0.5);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--white);
border: 1.5px solid rgba(200, 241, 53, 0.2);
}
.btn-outline:hover {
border-color: rgba(200, 241, 53, 0.5);
background: rgba(200, 241, 53, 0.08);
color: var(--accent);
transform: scale(1.05);
box-shadow: 0 0 0 0 rgba(200, 241, 53, 0.3);
animation: btnShockwave 0.6s ease-out forwards;
}
.btn-outline:active {
transform: scale(1.02);
}
/* ── Boutons hero — même zoom + shockwave que les autres ── */
.hero-buttons .btn-primary:hover,
.hero-buttons .btn-outline:hover {
transform: scale(1.05);
animation: btnShockwave 0.6s ease-out forwards;
}
.hero-buttons .btn-primary:active,
.hero-buttons .btn-outline:active {
transform: scale(1.02);
box-shadow: none;
animation: none;
}
/* Boutons dans les sections claires */
.services .btn-primary,
.offers .btn-primary,
.faq .btn-primary,
.testimonials .btn-primary {
background: rgba(10, 10, 10, 0.9);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--accent);
border-color: rgba(10, 10, 10, 0.15);
}
.services .btn-primary:hover,
.offers .btn-primary:hover,
.faq .btn-primary:hover,
.testimonials .btn-primary:hover {
background: var(--black);
box-shadow: 0 0 0 0 rgba(10, 10, 10, 0.3);
border-color: rgba(200, 241, 53, 0.3);
transform: scale(1.05);
animation: btnShockwaveDark 0.6s ease-out forwards;
}
.services .btn-outline,
.offers .btn-outline,
.faq .btn-outline,
.testimonials .btn-outline {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--black);
border-color: rgba(10, 10, 10, 0.1);
}
.services .btn-outline:hover,
.offers .btn-outline:hover,
.faq .btn-outline:hover,
.testimonials .btn-outline:hover {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(200, 241, 53, 0.4);
color: var(--black);
box-shadow: 0 0 0 0 rgba(10, 10, 10, 0.2);
transform: scale(1.05);
animation: btnShockwaveDark 0.6s ease-out forwards;
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
STATS BAND
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.stats-band {
position: relative;
padding: 50px 0;
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.stat-item {
text-align: center;
padding: 24px 16px;
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.stat-number {
font-family: var(--font-heading);
font-size: clamp(18px, 2vw, 22px);
font-weight: 700;
color: var(--accent);
line-height: 1.2;
margin-bottom: 10px;
letter-spacing: -0.01em;
}
.stat-label {
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
line-height: 1.55;
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
PROBLEM SECTION (Storytelling)
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.problem {
background: #0c0c0c;
position: relative;
overflow: hidden;
}
.problem-title {
font-family: var(--font-heading);
font-size: clamp(36px, 4.5vw, 60px);
font-weight: 700;
color: #ffffff;
line-height: 1.2;
margin-bottom: 32px;
letter-spacing: -0.03em;
text-align: center;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.highlight-year {
color: var(--accent);
}
.problem-intro {
font-size: 23px;
color: rgba(255, 255, 255, 0.65);
line-height: 1.7;
max-width: 1050px;
margin: 0 auto 24px;
text-align: center;
}
.problem-intro-2 {
margin-bottom: 56px;
}
.problem-carousel {
position: relative;
width: 100%;
overflow: hidden;
padding: 0 0 20px;
}
.problem-carousel-track {
display: flex;
gap: 24px;
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
cursor: grab;
user-select: none;
}
.problem-carousel-track:active {
cursor: grabbing;
}
/* ═══════════════════════════════════════════════════════════
PROBLEM CARDS V7 (mai 2026) · Glassmorphism + accent service
- Base sombre translucide (cohérence avec .portfolio-card du home)
- Variables CSS pilotées par [data-accent] (green/blue/purple/orange)
- Quadrillage SVG subtil derrière le contenu (.problem-card::before)
- Halo radial accent en coin haut-droit (.problem-card::after)
- Barre verticale accent retirée V12 (rendu plus épuré)
- Texte blanc/grisé pour contraste optimal sur fond sombre
═══════════════════════════════════════════════════════════ */
.problem-card {
--card-accent: #C8F135;
--card-accent-rgb: 200, 241, 53;
--card-accent-soft: rgba(200, 241, 53, 0.31);
--card-accent-glow: rgba(200, 241, 53, 0.49);
flex: 0 0 88%;
max-width: 88%;
display: flex;
align-items: center;
gap: 48px;
background:
radial-gradient(120% 100% at 100% 0%, var(--card-accent-soft) 0%, transparent 55%),
linear-gradient(135deg, rgba(22, 22, 26, 0.92) 0%, rgba(14, 14, 16, 0.95) 100%);
border: none;
border-radius: 22px;
padding: 64px 56px 56px;
min-height: 340px;
position: relative;
overflow: hidden;
isolation: isolate;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
transition:
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Accents par service (V7.3 — soft + glow boostés +35% supplémentaires) */
.problem-card[data-accent="green"] {
--card-accent: #C8F135;
--card-accent-rgb: 200, 241, 53;
--card-accent-soft: rgba(200, 241, 53, 0.31);
--card-accent-glow: rgba(200, 241, 53, 0.49);
}
.problem-card[data-accent="blue"] {
--card-accent: #60A5FA;
--card-accent-rgb: 96, 165, 250;
--card-accent-soft: rgba(96, 165, 250, 0.35);
--card-accent-glow: rgba(96, 165, 250, 0.58);
}
.problem-card[data-accent="purple"] {
--card-accent: #A882FF;
--card-accent-rgb: 168, 130, 255;
--card-accent-soft: rgba(168, 130, 255, 0.39);
--card-accent-glow: rgba(168, 130, 255, 0.61);
}
.problem-card[data-accent="orange"] {
--card-accent: #FAB450;
--card-accent-rgb: 250, 180, 80;
--card-accent-soft: rgba(250, 180, 80, 0.35);
--card-accent-glow: rgba(250, 180, 80, 0.58);
}
/* Quadrillage SVG subtil en arrière-plan */
.problem-card::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
background-size: 44px 44px;
background-position: center;
-webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 30%, transparent 82%);
mask-image: radial-gradient(120% 100% at 50% 50%, #000 30%, transparent 82%);
pointer-events: none;
z-index: 0;
}
/* Halo radial accent (coin haut-droit) */
.problem-card::after {
content: "";
position: absolute;
top: -140px;
right: -140px;
width: 380px;
height: 380px;
background: radial-gradient(circle, var(--card-accent-glow) 0%, transparent 65%);
filter: blur(6px);
pointer-events: none;
z-index: 0;
opacity: 0.85;
transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.problem-card > * {
position: relative;
z-index: 1;
}
.problem-card:hover {
box-shadow:
0 22px 60px rgba(0, 0, 0, 0.35),
0 30px 80px rgba(var(--card-accent-rgb), 0.10);
}
.problem-card:hover::after {
opacity: 1;
transform: scale(1.05);
}
/* ─────────────────────────────────────────────────────────
Badge V7.3 — Premium SaaS multi-élément
Structure : icon + text + pulse dot
- Glass dark base + accent gradient border
- Icon SVG (alert) en accent
- Texte monospace tracked
- Dot pulsant avec double ring
───────────────────────────────────────────────────────── */
.problem-card-badge {
position: absolute;
top: 22px;
left: 28px;
display: inline-flex;
align-items: center;
gap: 9px;
background:
linear-gradient(135deg, rgba(8, 10, 8, 0.86) 0%, rgba(4, 6, 4, 0.92) 100%);
color: var(--card-accent);
font-family: var(--font-heading);
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.8px;
padding: 7px 12px 7px 10px;
border-radius: 100px;
border: 1px solid rgba(var(--card-accent-rgb), 0.35);
z-index: 3;
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 4px 14px rgba(0, 0, 0, 0.32),
0 0 0 1px rgba(var(--card-accent-rgb), 0.08);
isolation: isolate;
}
/* Halo gradient interne (sous le contenu) */
.problem-card-badge::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(120% 100% at 0% 50%, rgba(var(--card-accent-rgb), 0.12) 0%, transparent 60%);
pointer-events: none;
z-index: -1;
}
/* Icône alert-triangle */
.problem-card-badge-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
color: var(--card-accent);
flex-shrink: 0;
filter: drop-shadow(0 0 4px rgba(var(--card-accent-rgb), 0.45));
}
.problem-card-badge-icon svg {
width: 100%;
height: 100%;
}
/* Texte du badge */
.problem-card-badge-text {
line-height: 1;
white-space: nowrap;
}
/* ── Style du slot Lottie constat (.constat-lottie) ── */
.constat-lottie {
display: block;
width: 100%;
height: 100%;
pointer-events: none;
}
.constat-lottie svg {
width: 100% !important;
height: 100% !important;
display: block;
}
.problem-card-content {
flex: 1;
min-width: 0;
position: relative;
}
/* Barre verticale accent retiree (rendu plus epure, plus premium) */
.problem-card-content::before { display: none !important; }
.problem-card-title {
font-family: var(--font-heading);
font-size: clamp(24px, 3vw, 36px);
font-weight: 700;
color: #ffffff;
line-height: 1.18;
margin-bottom: 16px;
letter-spacing: -0.02em;
}
.problem-card-text {
font-size: clamp(16px, 1.6vw, 19px);
color: rgba(255, 255, 255, 0.68);
line-height: 1.65;
}
/* Slot visuel V7.1 — Lottie/vidéo posé directement sur la carte (frame retiré) */
.problem-card-visual {
flex: 0 0 304px;
width: 304px;
height: 304px;
display: flex;
align-items: center;
justify-content: center;
position: relative; /* V2 : ancre pour .constat-lottie en absolute */
background: transparent;
border: none;
border-radius: 0;
overflow: visible;
}
.problem-svg {
width: 100%;
height: 100%;
}
/* ── SVG 404 Premium Animations ── */
.svg-404-premium {
width: 100%;
height: auto;
display: block;
overflow: visible;
}
@keyframes float-complex {
0%, 100% { transform: translateY(0) rotate(0deg); }
33% { transform: translateY(-8px) rotate(0.5deg); }
66% { transform: translateY(5px) rotate(-0.5deg); }
}
@keyframes orbit-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes orbit-spin-reverse {
from { transform: rotate(360deg); }
to { transform: rotate(0deg); }
}
@keyframes laser-sweep {
0% { transform: translateX(-100px); opacity: 0; }
10% { opacity: 1; }
45% { transform: translateX(350px); opacity: 1; }
55% { transform: translateX(350px); opacity: 0; }
100% { transform: translateX(-100px); opacity: 0; }
}
@keyframes data-flow {
from { stroke-dashoffset: 40; }
to { stroke-dashoffset: 0; }
}
@keyframes tech-glitch {
0%, 96%, 100% { opacity: 1; transform: translateX(0); }
97% { opacity: 0.3; transform: translateX(-2px); }
98% { opacity: 0.8; transform: translateX(2px); }
99% { opacity: 0.5; transform: translateX(0); }
}
@keyframes drone-search {
0%, 100% { transform: translate(0, 0); }
20% { transform: translate(60px, -40px); }
40% { transform: translate(120px, 20px); }
60% { transform: translate(-30px, 50px); }
80% { transform: translate(-50px, -20px); }
}
@keyframes particle-drift {
0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
50% { transform: translateY(-20px) scale(1.2); opacity: 0.7; }
}
.prm-float { animation: float-complex 8s ease-in-out infinite; transform-origin: center; }
.prm-orbit-1 { animation: orbit-spin 20s linear infinite; transform-origin: center; }
.prm-orbit-2 { animation: orbit-spin-reverse 15s linear infinite; transform-origin: center; }
.prm-orbit-3 { animation: orbit-spin 30s linear infinite; transform-origin: center; }
.prm-laser { animation: laser-sweep 4s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.prm-data-line { animation: data-flow 1.5s linear infinite; }
.prm-glitch { animation: tech-glitch 5s infinite; }
.prm-drone-group { animation: drone-search 12s cubic-bezier(0.25, 0.1, 0.25, 1) infinite; }
.prm-drone-spin { animation: orbit-spin 4s linear infinite; transform-origin: center; }
.prm-particle-1 { animation: particle-drift 6s ease-in-out infinite; }
.prm-particle-2 { animation: particle-drift 7s ease-in-out infinite 1s; }
.prm-particle-3 { animation: particle-drift 5s ease-in-out infinite 2s; }
/* ── SVG Conversion Premium Animations (Card 2) ── */
.svg-conversion-premium {
width: 100%;
height: auto;
display: block;
overflow: visible;
}
/* Lévitation + tremblement au crash */
@keyframes prm2-story-hud {
0%, 14% { transform: translateY(0) rotate(0deg); }
15%, 17% { transform: translateY(2px) rotate(-0.5deg); }
18%, 20% { transform: translateY(-2px) rotate(0.5deg); }
21%, 100% { transform: translateY(0) rotate(0deg); }
}
/* Jauge radiale crash */
@keyframes prm2-story-gauge {
0%, 15% { stroke-dashoffset: 80; }
16%, 20% { stroke-dashoffset: 120; }
25%, 90% { stroke-dashoffset: 260; }
95%, 100% { stroke-dashoffset: 80; }
}
@keyframes prm2-story-needle {
0%, 15% { transform: rotate(-10deg); }
16%, 20% { transform: rotate(-45deg); }
25%, 90% { transform: rotate(-120deg); }
95%, 100% { transform: rotate(-10deg); }
}
/* Barres en cascade */
@keyframes prm2-story-bar1 { 0%, 15% { transform: scaleY(1); } 20%, 90% { transform: scaleY(0.05); } 95%, 100% { transform: scaleY(1); } }
@keyframes prm2-story-bar2 { 0%, 17% { transform: scaleY(1); } 22%, 90% { transform: scaleY(0.05); } 95%, 100% { transform: scaleY(1); } }
@keyframes prm2-story-bar3 { 0%, 19% { transform: scaleY(1); } 24%, 90% { transform: scaleY(0.05); } 95%, 100% { transform: scaleY(1); } }
@keyframes prm2-story-bar4 { 0%, 21% { transform: scaleY(1); } 26%, 90% { transform: scaleY(0.05); } 95%, 100% { transform: scaleY(1); } }
/* Flatline */
@keyframes prm2-story-flatline {
0%, 15% { stroke-dashoffset: 300; opacity: 1; }
30%, 85% { stroke-dashoffset: 0; opacity: 1; }
90%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
/* Curseur utilisateur */
@keyframes prm2-story-cursor {
0%, 5% { transform: translate(450px, 350px); opacity: 0; }
10% { opacity: 1; transform: translate(400px, 250px); }
15%, 25% { transform: translate(150px, 200px); }
30%, 35% { transform: translate(250px, 250px); }
45%, 50% { transform: translate(350px, 125px); }
55% { transform: translate(350px, 125px) scale(0.9); }
58% { transform: translate(350px, 125px) scale(1); }
70%, 100% { transform: translate(500px, 350px); opacity: 0; }
}
/* Bouton fuyant */
@keyframes prm2-story-button {
0%, 46% { opacity: 1; transform: translate(0, 0); }
47% { opacity: 0.3; transform: translate(-4px, 2px); }
49% { opacity: 0.8; transform: translate(4px, -2px); }
51% { opacity: 0.1; transform: translate(-2px, 1px) scale(0.95); }
52%, 92% { opacity: 0; transform: translate(0, 0) scale(0.8); }
95%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
/* Erreur 404 */
@keyframes prm2-story-error {
0%, 54% { opacity: 0; transform: scale(0.5); }
55% { opacity: 1; transform: scale(0.8); }
60% { opacity: 0.9; transform: scale(1.2); }
70%, 100% { opacity: 0; transform: scale(1.5); }
}
/* Textes dynamiques */
@keyframes prm2-status-ok { 0%, 14% { opacity: 1; } 15%, 100% { opacity: 0; } }
@keyframes prm2-status-crit {
0%, 14% { opacity: 0; }
15%, 16% { opacity: 1; } 17%, 18% { opacity: 0; }
19%, 90% { opacity: 1; }
95%, 100% { opacity: 0; }
}
@keyframes prm2-metric-drop {
0%, 14% { opacity: 0; transform: translateY(-5px); }
15%, 90% { opacity: 1; transform: translateY(0); }
95%, 100% { opacity: 0; }
}
/* Rotations arrière-plan */
@keyframes prm2-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes prm2-spin-reverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
/* Classes d'application */
.prm2-float { animation: prm2-story-hud 12s infinite; transform-origin: center; }
.prm2-orbit-1 { animation: prm2-spin 60s linear infinite; transform-origin: center; }
.prm2-orbit-2 { animation: prm2-spin-reverse 40s linear infinite; transform-origin: center; }
.prm2-orbit-3 { animation: prm2-spin 25s cubic-bezier(0.4, 0, 0.2, 1) infinite; transform-origin: center; }
.prm2-gauge-arc { stroke-dasharray: 280; animation: prm2-story-gauge 12s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.prm2-needle { animation: prm2-story-needle 12s cubic-bezier(0.4, 0, 0.2, 1) infinite; transform-origin: 150px 165px; }
.prm2-bar-1 { animation: prm2-story-bar1 12s cubic-bezier(0.8, 0, 0.2, 1) infinite; transform-origin: bottom; }
.prm2-bar-2 { animation: prm2-story-bar2 12s cubic-bezier(0.8, 0, 0.2, 1) infinite; transform-origin: bottom; }
.prm2-bar-3 { animation: prm2-story-bar3 12s cubic-bezier(0.8, 0, 0.2, 1) infinite; transform-origin: bottom; }
.prm2-bar-4 { animation: prm2-story-bar4 12s cubic-bezier(0.8, 0, 0.2, 1) infinite; transform-origin: bottom; }
.prm2-flatline { stroke-dasharray: 300; stroke-dashoffset: 300; animation: prm2-story-flatline 12s ease-out infinite; }
.prm2-cursor { animation: prm2-story-cursor 12s cubic-bezier(0.25, 1, 0.5, 1) infinite; }
.prm2-btn-contact { animation: prm2-story-button 12s infinite; }
.prm2-error-ring { animation: prm2-story-error 12s ease-out infinite; transform-origin: center; }
.prm2-txt-ok { animation: prm2-status-ok 12s infinite; }
.prm2-txt-crit { animation: prm2-status-crit 12s infinite; }
.prm2-txt-drop { animation: prm2-metric-drop 12s infinite; }
/* ── SVG Social Premium Animations (Card 3) ── */
.svg-social-premium {
width: 100%;
height: auto;
display: block;
overflow: visible;
}
@keyframes prm3-story-phone-float {
0%, 14% { transform: translateY(0) rotate(0deg); }
35%, 38% { transform: translateY(-4px) rotate(-1deg); }
40%, 85% { transform: translateY(5px) rotate(0.5deg); }
90%, 100% { transform: translateY(0) rotate(0deg); }
}
@keyframes prm3-story-heart-beat {
0%, 10% { transform: scale(1); opacity: 0; }
12%, 34% { transform: scale(1); opacity: 1; }
15%, 25% { transform: scale(1.15); }
35% { transform: scale(0.9) translateY(0); opacity: 1; }
40%, 100% { transform: scale(0.5) translateY(40px); opacity: 0; }
}
@keyframes prm3-story-algo-eye {
0%, 30% { transform: scale(1) rotate(0deg); stroke: #111111; stroke-opacity: 0.3; }
35%, 85% { transform: scale(1.2) rotate(45deg); stroke: #111111; stroke-opacity: 1; }
95%, 100% { transform: scale(1) rotate(90deg); stroke: #111111; stroke-opacity: 0.3; }
}
@keyframes prm3-story-jail-beam {
0%, 36% { stroke-dashoffset: 400; opacity: 0; }
37% { opacity: 1; }
45%, 85% { stroke-dashoffset: 0; opacity: 1; }
90%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes prm3-story-screen-glitch {
0%, 38% { opacity: 0; }
39% { opacity: 0.8; transform: translateX(-2px); }
40% { opacity: 0.4; transform: translateX(2px); }
41%, 85% { opacity: 0.95; transform: translateX(0); }
90%, 100% { opacity: 0; }
}
@keyframes prm3-story-stats-good {
0%, 35% { opacity: 1; transform: translateY(0); }
38%, 100% { opacity: 0; transform: translateY(-10px); }
}
@keyframes prm3-story-stats-bad {
0%, 37% { opacity: 0; transform: translateY(10px); }
40%, 85% { opacity: 1; transform: translateY(0); }
90%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes prm3-story-connection-lines {
0%, 36% { stroke-dasharray: 4 4; opacity: 0.6; }
37%, 85% { stroke-dasharray: 1 10; opacity: 0.1; }
90%, 100% { stroke-dasharray: 4 4; opacity: 0.6; }
}
@keyframes prm3-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes prm3-spin-reverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
.prm3-phone-grp { animation: prm3-story-phone-float 12s cubic-bezier(0.25, 1, 0.5, 1) infinite; transform-origin: center; }
.prm3-heart { animation: prm3-story-heart-beat 12s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; transform-origin: center; }
.prm3-algo-core { animation: prm3-story-algo-eye 12s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite; transform-origin: center; }
.prm3-jail { stroke-dasharray: 400; stroke-dashoffset: 400; animation: prm3-story-jail-beam 12s ease-out infinite; }
.prm3-glitch-overlay { animation: prm3-story-screen-glitch 12s infinite; }
.prm3-stat-up { animation: prm3-story-stats-good 12s infinite; }
.prm3-stat-down { animation: prm3-story-stats-bad 12s infinite; }
.prm3-connect { animation: prm3-story-connection-lines 12s infinite; }
.prm3-orbit-slow { animation: prm3-spin 50s linear infinite; transform-origin: center; }
.prm3-orbit-fast { animation: prm3-spin-reverse 35s linear infinite; transform-origin: center; }
/* ── SVG Valeur Premium · Card 4 ── */
.svg-valeur-premium { width: 100%; height: 100%; }
@keyframes prm4-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@keyframes prm4-scanner-sweep {
0% { transform: translateY(-60px); opacity: 0; }
10% { opacity: 1; }
50% { transform: translateY(60px); opacity: 1; }
60% { opacity: 0; }
100% { transform: translateY(-60px); opacity: 0; }
}
@keyframes prm4-state-bad {
0%, 40% { opacity: 1; }
50%, 100% { opacity: 0; }
}
@keyframes prm4-draw-lines {
0%, 40% { stroke-dashoffset: 600; opacity: 0; }
45% { opacity: 1; }
70% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes prm4-fill-glow {
0%, 65% { opacity: 0; filter: brightness(1); }
80% { opacity: 1; filter: brightness(1.3); }
100% { opacity: 1; filter: brightness(1); }
}
@keyframes prm4-prestige-pop {
0%, 75% { transform: scale(0); opacity: 0; }
85% { transform: scale(1.2); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes prm4-spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes prm4-spin-reverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
.prm4-grp-float { animation: prm4-float 8s ease-in-out infinite; transform-origin: center; }
.prm4-scan-line { animation: prm4-scanner-sweep 8s ease-in-out infinite; transform-origin: center; }
.prm4-diamond-bad { animation: prm4-state-bad 8s ease-in-out infinite; }
.prm4-diamond-lines { stroke-dasharray: 600; stroke-dashoffset: 600; animation: prm4-draw-lines 8s ease-in-out infinite; }
.prm4-diamond-fill { animation: prm4-fill-glow 8s ease-in-out infinite; }
.prm4-prestige { animation: prm4-prestige-pop 8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; transform-origin: center; }
.prm4-star { animation: prm4-prestige-pop 8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; transform-origin: center; }
.prm4-bg-spin-1 { animation: prm4-spin-slow 50s linear infinite; transform-origin: center; }
.prm4-bg-spin-2 { animation: prm4-spin-reverse 35s linear infinite; transform-origin: center; }
/* ── SVG ANIMATIONS (Apple-style: slow, organic, elegant) ── */
@keyframes svgBreathe {
0%,
100% {
transform: scale(1);
opacity: 0.85;
}
50% {
transform: scale(1.06);
opacity: 1;
}
}
@keyframes svgFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
}
@keyframes svgDrift {
0%,
100% {
transform: translateX(0) translateY(0);
}
25% {
transform: translateX(3px) translateY(-2px);
}
75% {
transform: translateX(-3px) translateY(2px);
}
}
@keyframes svgFadePulse {
0%,
100% {
opacity: 0.15;
}
50% {
opacity: 0.5;
}
}
@keyframes svgOrbit {
0% {
transform: rotate(0deg) translateX(4px) rotate(0deg);
}
100% {
transform: rotate(360deg) translateX(4px) rotate(-360deg);
}
}
@keyframes svgDraw {
0% {
stroke-dashoffset: 300;
opacity: 0.3;
}
40% {
opacity: 1;
}
100% {
stroke-dashoffset: 0;
opacity: 1;
}
}
@keyframes svgPulseRing {
0% {
transform: scale(0.8);
opacity: 0.6;
}
50% {
transform: scale(1.15);
opacity: 0;
}
100% {
transform: scale(0.8);
opacity: 0;
}
}
@keyframes svgGentleSpin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes svgShimmer {
0%,
100% {
opacity: 0;
transform: scale(0.5);
}
50% {
opacity: 1;
transform: scale(1);
}
}
.svg-breathe {
animation: svgBreathe 4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
transform-origin: center;
}
.svg-float {
animation: svgFloat 5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.svg-drift {
animation: svgDrift 6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.svg-fade-pulse {
animation: svgFadePulse 4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.svg-orbit {
animation: svgOrbit 20s linear infinite;
transform-origin: center;
}
.svg-draw {
stroke-dasharray: 300;
animation: svgDraw 3s cubic-bezier(0.45, 0, 0.55, 1) forwards;
}
.svg-pulse-ring {
animation: svgPulseRing 3s cubic-bezier(0.45, 0, 0.55, 1) infinite;
transform-origin: center;
}
.svg-gentle-spin {
animation: svgGentleSpin 25s linear infinite;
transform-origin: center;
}
.svg-shimmer {
animation: svgShimmer 3.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
/* Legacy class mappings */
.svg-pulse {
animation: svgBreathe 4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
transform-origin: center;
}
.svg-blink {
animation: svgShimmer 4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.svg-spin {
animation: svgGentleSpin 25s linear infinite;
transform-origin: center;
}
.svg-dash {
stroke-dasharray: 300;
animation: svgDraw 4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.svg-grow {
animation: svgBreathe 5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
transform-origin: bottom;
}
/* ── CAROUSEL CONTROLS ── */
.problem-carousel-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 32px;
}
.problem-arrow {
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.05);
color: #ffffff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
padding: 0;
backdrop-filter: blur(4px);
}
.problem-arrow:hover {
border-color: var(--accent);
background: rgba(200, 241, 53, 0.1);
color: var(--accent);
transform: scale(1.08);
}
.problem-arrow:active {
transform: scale(0.95);
}
.problem-arrow svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.problem-carousel-nav {
display: flex;
gap: 10px;
}
.problem-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.2);
cursor: pointer;
transition: all 0.35s ease;
padding: 0;
}
.problem-dot:hover {
background: rgba(200, 241, 53, 0.4);
}
.problem-dot.active {
background: var(--accent);
transform: scale(1.3);
box-shadow: 0 0 12px rgba(200, 241, 53, 0.4);
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
LED DOT-MATRIX BAND
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.dotmatrix-band {
width: 100%;
background: #000000;
margin: 40px 0;
padding: 0;
overflow: hidden;
position: relative;
}
.dotmatrix-band canvas {
display: block;
width: 100%;
height: 216px;
pointer-events: none;
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
SERVICES (Aperçu)
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.services {
background: var(--gray-100);
position: relative;
overflow: hidden;
}
.services-grid-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
z-index: 0;
animation: gridPulse 6s ease-in-out infinite;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.service-card {
background: var(--white);
border: 1.5px solid var(--gray-200);
border-radius: var(--radius-lg);
padding: 36px 30px;
transition: background 0.3s ease, border-color 0.3s ease;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.service-title,
.service-text,
.service-link,
.service-icon {
transition: background 0.3s ease, border-color 0.3s ease;
}
.service-card::before {
display: none;
}
.service-card:hover {
transform: none;
box-shadow: none;
transition: background 0.35s ease, border-color 0.35s ease,
box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.service-card:hover .service-title {
color: var(--accent);
transition: color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.05s;
}
.service-card:hover .service-text {
color: rgba(255, 255, 255, 0.65);
transition: color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.08s;
}
.service-card:hover .service-link {
color: var(--accent);
transition: color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}
.service-card:hover .service-icon {
background: rgba(200, 241, 53, 0.15);
color: var(--accent);
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.03s;
}
.service-icon {
width: 56px;
height: 56px;
background: rgba(200, 241, 53, 0.12);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
margin-bottom: 20px;
color: var(--accent-dark);
}
.service-icon svg {
flex-shrink: 0;
}
.service-title {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 700;
color: var(--black);
margin-bottom: 10px;
}
.service-text {
font-size: 14px;
color: var(--gray-600);
line-height: 1.65;
margin-bottom: 20px;
}
.service-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-heading);
font-size: 13px;
font-weight: 700;
color: var(--accent-dark);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
padding: 6px 0;
}
.service-link:hover {
gap: 10px;
transform: scale(1.05);
}
.service-link:active {
transform: scale(1.02);
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
WHY US
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.why-us {
position: relative;
overflow: hidden;
background: var(--white);
}
.why-us::before {
content: '';
position: absolute;
top: -200px;
right: -200px;
width: 500px;
height: 500px;
background: var(--accent);
opacity: 0.07;
border-radius: 50%;
filter: blur(80px);
z-index: 0;
pointer-events: none;
}
/* Quadrillage subtil (identique au traitement .services / .your-list) */
.why-us .services-grid-overlay {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
z-index: 0;
mix-blend-mode: multiply;
}
.why-us > .container {
position: relative;
z-index: 1;
}
/* ── .accent-text sur fond clair : bloc sombre (comme .faq / .your-list) ── */
.why-us .accent-text {
background: rgba(10, 10, 10, 0.85);
color: var(--accent);
padding: 3px 10px;
border-radius: 6px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* ─── Heading ─── */
.why-heading {
text-align: center;
margin-bottom: 72px;
}
.why-main-title {
font-family: 'Chakra Petch', sans-serif;
font-size: clamp(28px, 5vw, 46px);
font-weight: 700;
color: var(--black);
line-height: 1.25;
letter-spacing: -0.02em;
}
/* ─── Bloc argument (alternance image/texte) ─── */
.why-block {
display: flex;
align-items: center;
gap: 56px;
margin-bottom: 80px;
}
.why-block:last-of-type {
margin-bottom: 0;
}
/* Direction : image gauche / texte droite */
.why-block--left {
flex-direction: row;
}
/* Direction : texte gauche / image droite */
.why-block--right {
flex-direction: row;
}
/* ─── Partie visuelle (image + num) ─── */
.why-block__visual {
position: relative;
flex: 0 0 52%;
max-width: 52%;
}
.why-block__img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 20px;
display: block;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.why-block:hover .why-block__img {
transform: scale(1.02);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}
.why-block__num {
position: absolute;
top: -16px;
left: -16px;
width: 52px;
height: 52px;
border-radius: 14px;
background: var(--accent);
color: #0a0a0a;
font-family: 'Chakra Petch', sans-serif;
font-size: 20px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
box-shadow: 0 4px 16px rgba(200, 241, 53, 0.3);
}
/* ─── Partie texte ─── */
.why-block__content {
flex: 1;
}
.why-block__title {
font-family: 'Chakra Petch', sans-serif;
font-size: clamp(20px, 3vw, 26px);
font-weight: 700;
color: var(--black);
margin-bottom: 16px;
line-height: 1.3;
}
.why-block__text {
font-size: 15px;
color: var(--gray-600);
line-height: 1.75;
margin-bottom: 12px;
}
.why-block__text:last-child {
margin-bottom: 0;
}
/* ─── Responsive tablette ─── */
@media (max-width: 900px) {
.why-block {
gap: 36px;
margin-bottom: 60px;
}
.why-block__visual {
flex: 0 0 48%;
max-width: 48%;
}
.why-block__num {
width: 44px;
height: 44px;
font-size: 17px;
top: -12px;
left: -12px;
border-radius: 12px;
}
}
/* ─── Responsive mobile ─── */
@media (max-width: 768px) {
.why-heading {
margin-bottom: 48px;
}
.why-block,
.why-block--left,
.why-block--right {
flex-direction: column;
gap: 24px;
margin-bottom: 52px;
}
.why-block__visual {
flex: none;
max-width: 100%;
width: 100%;
}
/* Sur mobile : image toujours en premier */
.why-block--right .why-block__visual {
order: -1;
}
.why-block--right .why-block__content {
order: 1;
}
.why-block__img {
border-radius: 16px;
}
.why-block__num {
width: 40px;
height: 40px;
font-size: 15px;
top: -10px;
left: -6px;
border-radius: 10px;
}
.why-block__title {
font-size: 20px;
}
.why-block__text {
font-size: 14px;
}
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
OFFRES DÉTAILLÉES (Redesigned)
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.offers {
background: linear-gradient(170deg, #0E0E0E 0%, #141414 45%, #0F1209 100%);
position: relative;
overflow: hidden;
}
.offers::before {
content: '';
position: absolute;
top: -120px;
right: -80px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(200, 241, 53, 0.06) 0%, transparent 70%);
pointer-events: none;
}
.offers::after {
content: '';
position: absolute;
bottom: -100px;
left: -60px;
width: 350px;
height: 350px;
background: radial-gradient(circle, rgba(200, 241, 53, 0.04) 0%, transparent 70%);
pointer-events: none;
}
.offers-intro {
text-align: center;
margin-bottom: 50px;
}
.offers-intro-text {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 600;
color: var(--gray-600);
font-style: italic;
}
.offers-stack {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1200px;
margin: 0 auto;
align-items: start;
}
.offer-card {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1.5px solid rgba(0, 0, 0, 0.06);
border-radius: 20px;
overflow: hidden;
transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
display: flex;
flex-direction: column;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03);
}
.offer-card::before {
content: '';
position: absolute;
inset: -1px;
border-radius: 21px;
padding: 2px;
background: linear-gradient(135deg, transparent 30%, rgba(200, 241, 53, 0.3) 50%, transparent 70%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}
.offer-card:hover::before {
opacity: 1;
}
.offer-card:hover {
background: var(--black);
border-color: rgba(200, 241, 53, 0.2);
transform: translateY(-8px);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}
.offer-card:hover .offer-name {
color: var(--accent);
}
.offer-card:hover .offer-tagline {
color: rgba(255, 255, 255, 0.55);
}
.offer-card:hover .offer-price {
color: var(--accent);
}
.offer-card:hover .offer-price-note {
color: rgba(255, 255, 255, 0.35);
}
.offer-card:hover .offer-maintenance {
background: rgba(200, 241, 53, 0.15);
color: var(--accent);
}
.offer-card:hover .offer-divider {
background: rgba(255, 255, 255, 0.08);
}
.offer-card:hover .offer-col-title {
color: rgba(255, 255, 255, 0.3);
}
.offer-card:hover .offer-list li {
color: rgba(255, 255, 255, 0.7);
}
.offer-card:hover .offer-list li::before {
background: rgba(200, 241, 53, 0.2);
color: var(--accent);
}
.offer-card:hover .offer-badge {
background: rgba(200, 241, 53, 0.15);
color: var(--accent);
}
.offer-card:hover .offer-cta-btn-old-override {
/* removed - now handled in offer-cta-btn block */
}
/* ── MOBILE AUTO DARK MODE — offres visibles au scroll ── */
@media (max-width: 768px) {
.offer-card.offer-in-view {
background: var(--black);
border-color: rgba(200, 241, 53, 0.2);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.offer-card.offer-in-view .offer-name {
color: var(--accent);
}
.offer-card.offer-in-view .offer-tagline {
color: rgba(255, 255, 255, 0.55);
}
.offer-card.offer-in-view .offer-price {
color: var(--accent);
}
.offer-card.offer-in-view .offer-price-note {
color: rgba(255, 255, 255, 0.35);
}
.offer-card.offer-in-view .offer-maintenance {
background: rgba(200, 241, 53, 0.15);
color: var(--accent);
}
.offer-card.offer-in-view .offer-divider {
background: rgba(255, 255, 255, 0.08);
}
.offer-card.offer-in-view .offer-col-title {
color: rgba(255, 255, 255, 0.3);
}
.offer-card.offer-in-view .offer-list li {
color: rgba(255, 255, 255, 0.7);
}
.offer-card.offer-in-view .offer-list li::before {
background: rgba(200, 241, 53, 0.2);
color: var(--accent);
}
.offer-card.offer-in-view .offer-badge {
background: rgba(200, 241, 53, 0.15);
color: var(--accent);
}
.offer-card.offer-in-view .offer-cta-btn {
background: var(--accent);
color: var(--black);
border-color: rgba(200, 241, 53, 0.4);
box-shadow: 0 6px 20px rgba(200, 241, 53, 0.25);
}
}
/* Featured card (Offer 3) — subtle accent glow */
.offer-card.offer-featured {
border-color: rgba(200, 241, 53, 0.2);
box-shadow: 0 4px 24px rgba(200, 241, 53, 0.06);
}
.offer-card.offer-featured::before {
opacity: 0.4;
}
/* Child elements smooth transitions */
.offer-name,
.offer-tagline,
.offer-price,
.offer-price-note,
.offer-maintenance,
.offer-divider,
.offer-col-title,
.offer-list li,
.offer-list li::before,
.offer-badge,
.offer-cta-btn {
transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.offer-top {
padding: 28px 24px 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.offer-top>div:first-child {
flex: 1;
min-width: 0;
}
.offer-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 9px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 20px;
margin-bottom: 10px;
}
.offer-badge.basic {
background: #f0f0ec;
color: var(--gray-600);
}
.offer-badge.perf {
background: #eef7ff;
color: #2259c4;
}
.offer-badge.intel {
background: rgba(200, 241, 53, 0.15);
color: #5a7000;
}
.offer-name {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 700;
color: var(--black);
margin-bottom: 8px;
line-height: 1.2;
}
.offer-tagline {
font-size: 13px;
color: var(--gray-600);
line-height: 1.6;
}
.offer-price-block {
flex-shrink: 0;
padding: 0 24px 16px;
}
.offer-price {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 700;
color: var(--black);
line-height: 1.2;
}
.offer-price-note {
font-size: 11px;
color: var(--gray-400);
margin-top: 4px;
line-height: 1.4;
}
.offer-maintenance {
margin-top: 8px;
display: inline-block;
font-size: 10px;
font-weight: 600;
background: var(--gray-100);
color: var(--gray-600);
padding: 4px 10px;
border-radius: 20px;
}
.offer-divider {
height: 1px;
background: rgba(0, 0, 0, 0.06);
margin: 0 24px;
}
.offer-bottom {
padding: 18px 24px 24px;
display: flex;
flex-direction: column;
gap: 18px;
flex: 1;
}
.offer-col-title {
font-size: 9px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--gray-400);
margin-bottom: 10px;
}
.offer-list {
display: flex;
flex-direction: column;
gap: 7px;
}
.offer-list li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 12px;
color: var(--gray-800);
line-height: 1.5;
}
.offer-list li::before {
content: '\2713';
width: 17px;
height: 17px;
background: #edf9c8;
color: #5a7000;
border-radius: 5px;
font-size: 9px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
}
.offer-cible {
display: none;
}
.offer-cta-row {
padding: 0 24px 24px;
margin-top: auto;
}
.offer-cta-btn {
width: 100%;
text-align: center;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
background: rgba(10, 10, 10, 0.9);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--accent);
border: 1.5px solid rgba(10, 10, 10, 0.15);
}
.offer-cta-btn:hover {
background: var(--black);
box-shadow: 0 0 0 0 rgba(200, 241, 53, 0.3);
border-color: rgba(200, 241, 53, 0.3);
transform: scale(1.05);
animation: btnShockwave 0.6s ease-out forwards;
}
.offer-card:hover .offer-cta-btn {
background: var(--accent);
color: var(--black);
border-color: rgba(200, 241, 53, 0.4);
transform: none;
box-shadow: 0 6px 20px rgba(200, 241, 53, 0.25);
}
/* ···········································
COMPARISON TABLE
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.comparison {
max-width: 900px;
margin: 60px auto 0;
background: var(--white);
border: 1.5px solid var(--gray-200);
border-radius: var(--radius-lg);
overflow: hidden;
}
.comparison-title {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 700;
color: var(--black);
padding: 28px 32px;
border-bottom: 1px solid var(--gray-200);
}
.comparison-table {
width: 100%;
border-collapse: collapse;
}
.comparison-table th,
.comparison-table td {
padding: 16px 20px;
text-align: center;
font-size: 13.5px;
border-bottom: 1px solid var(--gray-200);
}
.comparison-table th {
font-family: var(--font-heading);
font-weight: 700;
color: var(--black);
background: var(--gray-100);
font-size: 13px;
}
.comparison-table th:first-child,
.comparison-table td:first-child {
text-align: left;
font-weight: 500;
color: var(--gray-800);
}
.comparison-table td:first-child {
font-size: 13px;
}
.check-yes {
color: #4a9900;
font-weight: 700;
font-size: 16px;
}
.check-no {
color: var(--gray-400);
font-size: 16px;
}
.comparison-scroll-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
PORTFOLIO
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.portfolio {
position: relative;
overflow: hidden;
padding-top: 120px;
background: var(--black);
}
/* ── Portfolio background: glows + animated grid ── */
.portfolio-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
/* Floating glow orbs · accent tones, different placement than hero */
.portfolio-glow {
position: absolute;
border-radius: 50%;
filter: blur(130px);
opacity: 0;
animation: portfolioGlow 14s ease-in-out infinite;
}
.portfolio-glow-1 {
width: 550px;
height: 550px;
background: var(--accent);
bottom: -8%;
right: -5%;
opacity: 0.18;
animation-delay: 0s;
}
.portfolio-glow-2 {
width: 450px;
height: 450px;
background: var(--accent);
top: 2%;
left: -8%;
opacity: 0.13;
animation-delay: -5s;
}
.portfolio-glow-3 {
width: 300px;
height: 300px;
background: var(--accent);
top: 45%;
left: 50%;
opacity: 0.10;
animation-delay: -9s;
}
@keyframes portfolioGlow {
0%, 100% {
transform: translate(0, 0) scale(1);
opacity: var(--glow-base, 0.1);
}
33% {
transform: translate(20px, -15px) scale(1.08);
opacity: calc(var(--glow-base, 0.1) * 1.4);
}
66% {
transform: translate(-15px, 10px) scale(0.95);
opacity: calc(var(--glow-base, 0.1) * 0.7);
}
}
.portfolio-glow-1 { --glow-base: 0.18; }
.portfolio-glow-2 { --glow-base: 0.13; }
.portfolio-glow-3 { --glow-base: 0.10; }
/* Hexagonal / diamond grid overlay · different pattern than hero */
.portfolio-grid-overlay {
position: absolute;
inset: 0;
background-image:
/* Primary grid lines */
linear-gradient(rgba(200, 241, 53, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(200, 241, 53, 0.08) 1px, transparent 1px),
/* Diagonal cross-hatch for depth & texture */
linear-gradient(45deg, rgba(200, 241, 53, 0.03) 1px, transparent 1px),
linear-gradient(-45deg, rgba(200, 241, 53, 0.03) 1px, transparent 1px);
background-size:
50px 50px,
50px 50px,
35px 35px,
35px 35px;
mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, black 20%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, black 20%, transparent 70%);
animation: gridPulse 8s ease-in-out infinite;
}
@keyframes gridPulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
/* Ensure portfolio content sits above the background */
.portfolio > .section-decor,
.portfolio > .container {
position: relative;
z-index: 1;
}
/* ── Mention discrète ── */
.portfolio-mention {
font-size: 13px;
color: rgba(200, 241, 53, 0.7);
line-height: 1.7;
max-width: 580px;
margin: 12px auto 0;
text-align: center;
font-style: italic;
}
/* ── Horizontal Slider ── */
.portfolio-slider {
position: relative;
width: 100%;
overflow: hidden;
padding: 24px 0 30px;
}
.portfolio-track {
display: flex;
gap: 28px;
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
cursor: grab;
user-select: none;
}
.portfolio-track:active {
cursor: grabbing;
}
/* ── Card Base ── */
.portfolio-card {
flex: 0 0 520px;
display: flex;
flex-direction: column;
border-radius: 20px;
background: rgba(255, 255, 255, 0.04);
border: 1.5px solid rgba(255, 255, 255, 0.08);
overflow: hidden;
transition:
border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.portfolio-card:hover {
border-color: rgba(200, 241, 53, 0.3);
transform: translateY(-6px);
box-shadow:
0 8px 24px rgba(200, 241, 53, 0.06),
0 20px 50px rgba(0, 0, 0, 0.35),
0 0 0 1px rgba(200, 241, 53, 0.08);
}
/* ── Card Image ── */
.portfolio-img {
width: 100%;
aspect-ratio: 16 / 9;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, rgba(200, 241, 53, 0.08), rgba(59, 130, 246, 0.05));
}
.portfolio-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.portfolio-card:hover .portfolio-img img {
transform: scale(1.05);
}
.portfolio-img-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 40%, rgba(10, 10, 10, 0.7));
pointer-events: none;
z-index: 1;
}
/* ── Card Body ── */
.portfolio-body {
padding: 28px 28px 24px;
display: flex;
flex-direction: column;
flex: 1;
}
/* ── Badges ── */
.portfolio-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.portfolio-badge {
display: inline-flex;
align-items: center;
font-family: var(--font-heading);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
padding: 5px 14px;
border-radius: 50px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid transparent;
white-space: nowrap;
}
.portfolio-badge-type {
background: rgba(200, 241, 53, 0.1);
color: var(--accent);
border-color: rgba(200, 241, 53, 0.2);
}
.portfolio-badge-delivered {
background: rgba(52, 211, 153, 0.1);
color: #34d399;
border-color: rgba(52, 211, 153, 0.2);
}
.portfolio-badge-demo {
background: rgba(96, 165, 250, 0.1);
color: #60a5fa;
border-color: rgba(96, 165, 250, 0.2);
}
/* ── Card Content ── */
.portfolio-name {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 700;
color: var(--white);
margin-bottom: 10px;
letter-spacing: -0.01em;
}
.portfolio-desc {
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
line-height: 1.7;
margin-bottom: 20px;
flex: 1;
}
/* ── Premium Link Button ── */
.portfolio-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-heading);
font-size: 13px;
font-weight: 700;
color: var(--accent);
text-decoration: none;
padding: 10px 20px;
border-radius: 50px;
background: rgba(200, 241, 53, 0.08);
border: 1px solid rgba(200, 241, 53, 0.18);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
align-self: flex-start;
}
.portfolio-link:hover {
background: rgba(200, 241, 53, 0.15);
border-color: rgba(200, 241, 53, 0.35);
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(200, 241, 53, 0.12);
}
.portfolio-link:active {
transform: translateY(0) scale(0.98);
}
.portfolio-link svg {
transition: transform 0.3s ease;
}
.portfolio-link:hover svg {
transform: translate(3px, -3px);
}
/* ── Navigation Controls ── */
.portfolio-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 32px;
}
.portfolio-arrow {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
backdrop-filter: blur(4px);
padding: 0;
}
.portfolio-arrow:hover {
border-color: rgba(200, 241, 53, 0.4);
background: rgba(200, 241, 53, 0.08);
color: var(--accent);
transform: scale(1.08);
}
.portfolio-arrow:active {
transform: scale(0.95);
}
.portfolio-arrow svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.portfolio-dots-nav {
display: flex;
gap: 10px;
}
.portfolio-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
border: none;
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
}
.portfolio-dot:hover {
background: rgba(255, 255, 255, 0.4);
}
.portfolio-dot.active {
background: #C8F135;
transform: scale(1.3);
box-shadow: 0 0 12px rgba(200, 241, 53, 0.5);
}
/* ── CTA Button ── */
.portfolio-cta {
text-align: center;
margin-top: 40px;
}
.portfolio-cta-btn {
display: inline-flex;
align-items: center;
gap: 16px;
padding: 18px 36px;
font-size: 15px;
font-weight: 500;
border-radius: 50px;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.85);
border: 1.5px solid rgba(200, 241, 53, 0.25);
text-decoration: none;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.2),
0 8px 24px rgba(0, 0, 0, 0.1);
}
.portfolio-cta-label {
font-weight: 400;
opacity: 0.7;
font-size: 14px;
}
.portfolio-cta-action {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
color: #C8F135;
font-size: 15px;
padding-left: 16px;
border-left: 1px solid rgba(200, 241, 53, 0.25);
}
/* Variante "solo" : usage sans label gauche (ex : CTA "En savoir plus" section a-propos home) */
.portfolio-cta-action--solo {
padding-left: 0;
border-left: none;
}
.portfolio-cta-action svg {
transition: transform 0.3s ease;
}
.portfolio-cta-btn:hover {
background: #C8F135;
color: #0A0A0A;
border-color: #C8F135;
transform: translateY(-3px);
box-shadow:
0 4px 12px rgba(200, 241, 53, 0.2),
0 12px 32px rgba(200, 241, 53, 0.15);
}
.portfolio-cta-btn:hover .portfolio-cta-label {
opacity: 1;
color: #0A0A0A;
}
.portfolio-cta-btn:hover .portfolio-cta-action {
color: #0A0A0A;
border-left-color: rgba(10, 10, 10, 0.2);
}
.portfolio-cta-btn:hover .portfolio-cta-action svg {
transform: translate(3px, -3px);
}
/* ── Portfolio Responsive ── */
/* Tablet & below · shared mobile rules */
@media (max-width: 768px) {
.portfolio {
padding-top: 80px;
}
/* Hide decorative dots/lines · they overlap card content on mobile */
.portfolio .section-decor {
display: none;
}
/* Full-bleed carousel */
.portfolio .container {
padding-left: 0;
padding-right: 0;
}
.portfolio .section-header {
padding-left: 24px;
padding-right: 24px;
}
/* Card takes nearly full width, 16px margin each side */
.portfolio-card {
flex: 0 0 calc(100vw - 32px);
border-radius: 16px;
}
.portfolio-track {
gap: 20px;
padding-left: 16px;
}
.portfolio-slider {
padding: 20px 0 28px;
}
.portfolio-body {
padding: 22px 22px 20px;
}
.portfolio-name {
font-size: 1.15rem;
}
.portfolio-desc {
font-size: 0.88rem;
line-height: 1.6;
}
.portfolio-controls {
padding: 0 24px;
}
.portfolio-cta {
padding: 0 24px;
}
.portfolio-glow-1 {
width: 350px;
height: 350px;
}
.portfolio-glow-2 {
width: 280px;
height: 280px;
}
.portfolio-glow-3 {
width: 180px;
height: 180px;
}
}
/* Smartphone · tighter spacing */
@media (max-width: 480px) {
.portfolio {
padding-top: 60px;
}
.portfolio .section-header {
padding-left: 16px;
padding-right: 16px;
}
.portfolio-card {
flex: 0 0 calc(100vw - 32px);
border-radius: 14px;
}
.portfolio-track {
gap: 14px;
padding-left: 16px;
}
.portfolio-slider {
padding: 16px 0 20px;
}
.portfolio-body {
padding: 16px 16px 14px;
}
.portfolio-badges {
gap: 6px;
margin-bottom: 10px;
}
.portfolio-badge {
font-size: 0.7rem;
padding: 5px 12px;
}
.portfolio-name {
font-size: 1.08rem;
margin-bottom: 6px;
}
.portfolio-desc {
font-size: 0.84rem;
line-height: 1.55;
}
.portfolio-link {
margin-top: auto;
padding-top: 10px;
}
.portfolio-controls {
margin-top: 14px;
padding: 0 16px;
}
.portfolio-cta {
padding: 0 16px;
margin-top: 24px;
}
.portfolio-cta-btn {
padding: 14px 20px;
gap: 10px;
font-size: 13px;
}
.portfolio-cta-label {
font-size: 12px;
}
.portfolio-cta-action {
font-size: 13px;
padding-left: 10px;
}
.portfolio-grid-overlay {
background-size:
40px 40px,
40px 40px,
28px 28px,
28px 28px;
}
.portfolio-glow-1 {
width: 250px;
height: 250px;
filter: blur(100px);
}
.portfolio-glow-2 {
width: 200px;
height: 200px;
filter: blur(100px);
}
.portfolio-glow-3 {
display: none;
}
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
TESTIMONIALS
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.testimonials {
background: var(--gray-100);
position: relative;
overflow: hidden;
}
.testimonials-grid-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
z-index: 0;
animation: gridPulse 6s ease-in-out infinite;
}
.testimonials .accent-text {
background: rgba(10, 10, 10, 0.85);
color: #C8F135;
padding: 2px 8px;
margin-left: 6px;
border-radius: 6px;
font-size: 0.92em;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.testimonial-card {
background: var(--white);
border: 2px solid rgba(200, 241, 53, 0.6);
border-radius: var(--radius-lg);
padding: 32px 28px;
position: relative;
box-shadow: 0 0 12px rgba(200, 241, 53, 0.1), 0 0 4px rgba(200, 241, 53, 0.08);
transition: background 0.7s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.7s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ── HOVER (PC) — animation premium fade ── */
@media (min-width: 769px) {
.testimonial-card:hover {
background: var(--black);
border-color: rgba(200, 241, 53, 0.8);
transform: translateY(-6px) scale(1.015);
box-shadow:
0 25px 60px rgba(0, 0, 0, 0.3),
0 0 20px rgba(200, 241, 53, 0.15),
0 0 40px rgba(200, 241, 53, 0.06);
}
.testimonial-card:hover .testimonial-quote {
color: var(--accent);
}
.testimonial-card:hover .testimonial-text {
color: rgba(255, 255, 255, 0.7);
}
.testimonial-card:hover .testimonial-avatar {
background: var(--accent);
color: var(--black);
box-shadow: 0 0 25px rgba(200, 241, 53, 0.3);
transform: scale(1.05);
}
.testimonial-card:hover .testimonial-name {
color: var(--white);
}
.testimonial-card:hover .testimonial-role {
color: rgba(255, 255, 255, 0.45);
}
/* Les cartes non-survolées reculent subtilement */
.testimonials-grid:hover .testimonial-card:not(:hover) {
opacity: 0.65;
transform: scale(0.98);
}
}
/* Transitions fluides et synchronisées · enfants */
.testimonial-quote,
.testimonial-text,
.testimonial-name,
.testimonial-role {
transition: color 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.testimonial-avatar {
transition: background 0.7s cubic-bezier(0.4, 0, 0.2, 1),
color 0.7s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.7s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Opacité smooth pour l'effet focus sur la grille */
.testimonials-grid .testimonial-card {
transition: background 0.7s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.7s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.7s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ── MOBILE — auto dark au scroll (IntersectionObserver) ── */
@media (max-width: 768px) {
.testimonial-card.testimonial-in-view {
background: var(--black);
border-color: rgba(200, 241, 53, 0.8);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(200, 241, 53, 0.15);
}
.testimonial-card.testimonial-in-view .testimonial-quote {
color: var(--accent);
}
.testimonial-card.testimonial-in-view .testimonial-text {
color: rgba(255, 255, 255, 0.6);
}
.testimonial-card.testimonial-in-view .testimonial-avatar {
background: var(--accent);
color: var(--black);
box-shadow: 0 0 20px rgba(200, 241, 53, 0.25);
}
.testimonial-card.testimonial-in-view .testimonial-name {
color: var(--white);
}
.testimonial-card.testimonial-in-view .testimonial-role {
color: rgba(255, 255, 255, 0.4);
}
}
.testimonial-quote {
font-size: 48px;
color: var(--accent);
line-height: 1;
margin-bottom: 12px;
font-family: Georgia, serif;
}
.testimonial-text {
font-size: 14px;
color: var(--gray-600);
line-height: 1.7;
margin-bottom: 24px;
font-style: italic;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 14px;
}
.testimonial-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--accent);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-size: 16px;
font-weight: 700;
color: var(--black);
flex-shrink: 0;
}
.testimonial-name {
font-family: var(--font-heading);
font-size: 14px;
font-weight: 700;
color: var(--black);
}
.testimonial-role {
font-size: 12px;
color: var(--gray-400);
}
/* ═══════════════════════════════════════════
TEMOIGNAGES : Flouter les avis fictifs
(en attendant les vrais temoignages clients)
═══════════════════════════════════════════ */
.testimonial-text,
.testimonial-name,
.testimonial-role,
.testimonial-avatar {
filter: blur(5px);
-webkit-filter: blur(5px);
user-select: none;
pointer-events: none;
transition: filter 0.4s ease;
}
/* Badge "Avis réels a venir" visible sur chaque card */
.testimonial-card {
position: relative;
}
.testimonial-card::after {
content: 'Avis réels à venir';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--font-heading);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #5d7500;
background: rgba(200, 241, 53, 0.95);
padding: 8px 18px;
border-radius: 100px;
border: 1.5px solid rgba(168, 204, 26, 0.55);
box-shadow: 0 4px 14px rgba(200, 241, 53, 0.28),
0 1px 2px rgba(0, 0, 0, 0.08);
white-space: nowrap;
z-index: 2;
pointer-events: none;
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
ABOUT
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.about {
position: relative;
overflow: hidden;
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.about-photo {
width: 100%;
aspect-ratio: 4/5;
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.08);
position: relative;
overflow: hidden;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.about-photo-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
transition: transform 0.6s ease;
}
.about-photo:hover .about-photo-img {
transform: scale(1.03);
}
/* Subtle gradient overlay at bottom for blend */
.about-photo::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 30%;
background: linear-gradient(to top, rgba(10, 10, 10, 0.35) 0%, transparent 100%);
pointer-events: none;
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.about-content .section-chip {
margin-bottom: 20px;
}
.about-name {
font-family: var(--font-heading);
font-size: clamp(28px, 5vw, 46px);
font-weight: 700;
color: var(--white);
margin-bottom: 2px;
text-align: left;
}
/* Tablette : l'image passe sous le titre, donc la taille doit
correspondre exactement a celle de .section-heading. */
@media (max-width: 768px) {
.about-name {
font-size: clamp(28px, 6vw, 40px);
}
}
.about-role {
font-size: 14px;
color: var(--accent);
font-weight: 500;
margin-bottom: 24px;
}
.about-text {
font-size: 15px;
color: rgba(255, 255, 255, 0.5);
line-height: 1.75;
margin-bottom: 16px;
}
.about-values {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 32px;
}
.about-value {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 18px 16px;
}
.about-value-icon {
font-size: 18px;
margin-bottom: 8px;
}
.about-value-name {
font-family: var(--font-heading);
font-size: 13px;
font-weight: 700;
color: var(--white);
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
FAQ
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.faq {
position: relative;
background: var(--gray-100);
overflow: hidden;
}
.faq .accent-text {
background: rgba(10, 10, 10, 0.85);
color: #C8F135;
padding: 3px 10px;
border-radius: 6px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.faq > .container {
position: relative;
z-index: 1;
}
.faq-list {
max-width: 760px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
background: var(--black);
border: 1.5px solid rgba(200, 241, 53, 0.1);
border-radius: var(--radius);
overflow: hidden;
transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.faq-item:hover {
border-color: rgba(200, 241, 53, 0.25);
box-shadow: 0 4px 24px rgba(200, 241, 53, 0.06);
}
.faq-item.active {
border-color: var(--accent);
box-shadow: 0 4px 30px rgba(200, 241, 53, 0.1);
}
.faq-question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 22px 26px;
background: none;
font-family: var(--font-heading);
font-size: 15px;
font-weight: 700;
color: var(--accent);
text-align: left;
cursor: pointer;
transition: color 0.3s ease;
min-height: 60px;
}
.faq-item.active .faq-question {
color: var(--accent);
}
.faq-icon {
width: 30px;
height: 30px;
background: rgba(200, 241, 53, 0.1);
border: 1px solid rgba(200, 241, 53, 0.2);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.3s ease;
color: var(--accent);
}
.faq-item.active .faq-icon {
background: var(--accent);
color: var(--black);
border-color: var(--accent);
transform: rotate(180deg);
}
.faq-icon svg {
width: 14px;
height: 14px;
}
.faq-answer {
max-height: 0;
overflow: hidden;
position: relative;
transition: max-height 0.4s ease, padding 0.3s ease;
}
.faq-answer-inner {
padding: 0 26px 24px;
font-size: 14.5px;
color: rgba(255, 255, 255, 0.85);
line-height: 1.8;
border-top: 1px solid rgba(200, 241, 53, 0.1);
padding-top: 18px;
margin: 0 26px;
padding-left: 0;
padding-right: 0;
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
CONTACT
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.contact {
position: relative;
overflow: hidden;
}
.contact::before {
content: '';
position: absolute;
bottom: -200px;
left: -200px;
width: 500px;
height: 500px;
background: var(--accent);
opacity: 0.04;
border-radius: 50%;
filter: blur(80px);
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: flex-start;
}
.contact-info {
padding-top: 20px;
}
.contact-info .section-chip {
margin-bottom: 20px;
}
.contact-heading {
font-family: var(--font-heading);
font-size: clamp(28px, 5vw, 46px);
font-weight: 700;
color: var(--white);
line-height: 1.15;
margin-bottom: 16px;
}
.contact-sub {
font-size: 16px;
color: rgba(255, 255, 255, 0.45);
line-height: 1.7;
margin-bottom: 40px;
}
.contact-methods {
display: flex;
flex-direction: column;
gap: 16px;
}
.contact-method {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 20px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.contact-method:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(200, 241, 53, 0.2);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.contact-method:active {
transform: translateY(0);
}
.contact-method-icon {
width: 44px;
height: 44px;
border-radius: 10px;
background: rgba(200, 241, 53, 0.12);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.contact-method-label {
font-size: 12px;
color: rgba(255, 255, 255, 0.35);
text-transform: uppercase;
letter-spacing: 1px;
}
.contact-method-value {
font-family: var(--font-heading);
font-size: 15px;
font-weight: 600;
color: var(--white);
margin-top: 2px;
}
.contact-reassurance {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.contact-reassurance-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: rgba(255, 255, 255, 0.4);
}
.contact-reassurance-item::before {
content: '✓';
color: var(--accent);
font-weight: 700;
}
/* Form */
.contact-form-wrap {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-lg);
padding: 36px;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.form-group {
margin-bottom: 18px;
}
.form-label {
display: block;
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 8px;
}
.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-sm);
color: var(--white);
font-family: var(--font-body);
/* 16px requis sur mobile pour eviter le zoom auto iOS Safari (focus trigger) */
font-size: 16px;
transition: all 0.3s ease;
min-height: 48px;
}
.form-input::placeholder,
.form-textarea::placeholder {
color: rgba(255, 255, 255, 0.25);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: var(--accent);
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 0 3px rgba(200, 241, 53, 0.1);
}
.form-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
}
.form-select option {
background: var(--black);
color: var(--white);
}
.form-textarea {
resize: vertical;
min-height: 100px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.form-submit {
width: 100%;
margin-top: 8px;
}
.form-note {
text-align: center;
font-size: 12px;
color: rgba(255, 255, 255, 0.3);
margin-top: 14px;
}
/* Honeypot anti-bot : invisible to humans */
.hp-field {
position: absolute;
left: -9999px;
top: -9999px;
width: 0;
height: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
}
/* Hidden native select */
.form-select-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Custom Select */
.custom-select {
position: relative;
}
.custom-select-trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-sm);
color: rgba(255, 255, 255, 0.4);
font-family: var(--font-body);
font-size: 15px;
cursor: pointer;
transition: all 0.3s ease;
min-height: 48px;
text-align: left;
}
.custom-select-trigger:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.18);
}
.custom-select.open .custom-select-trigger {
border-color: var(--accent);
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 0 3px rgba(200, 241, 53, 0.1);
}
.custom-select.has-value .custom-select-trigger {
color: var(--white);
}
.custom-select-value {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.custom-select-arrow {
flex-shrink: 0;
color: rgba(255, 255, 255, 0.3);
transition: transform 0.3s ease, color 0.3s ease;
}
.custom-select.open .custom-select-arrow {
transform: rotate(180deg);
color: var(--accent);
}
.custom-select-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 50;
background: rgba(18, 18, 18, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius);
padding: 6px;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(200, 241, 53, 0.05);
max-height: 250px;
overflow-y: auto;
}
.custom-select.open .custom-select-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.custom-select-option {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
}
.custom-select-option:hover {
background: rgba(200, 241, 53, 0.08);
color: var(--white);
}
.custom-select-option.selected {
background: rgba(200, 241, 53, 0.12);
color: var(--accent);
font-weight: 600;
}
.custom-select-option svg {
flex-shrink: 0;
color: rgba(255, 255, 255, 0.3);
transition: color 0.2s ease;
}
.custom-select-option:hover svg,
.custom-select-option.selected svg {
color: var(--accent);
}
/* Success message */
.form-success {
display: none;
text-align: center;
padding: 40px 20px;
}
.form-success.visible {
display: block;
}
.form-success-icon {
font-size: 48px;
margin-bottom: 16px;
}
.form-success-title {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 700;
color: var(--white);
margin-bottom: 10px;
}
.form-success-text {
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
line-height: 1.7;
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
CTA FINAL
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.cta-final {
position: relative;
padding: 100px 0;
text-align: center;
overflow: hidden;
}
.cta-final::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(200, 241, 53, 0.06), transparent 60%);
pointer-events: none;
}
.cta-final-content {
position: relative;
z-index: 1;
}
.cta-final-title {
font-family: var(--font-heading);
font-size: clamp(28px, 5vw, 46px);
font-weight: 700;
color: var(--white);
line-height: 1.15;
margin-bottom: 16px;
}
.cta-final-sub {
font-size: 16px;
color: rgba(255, 255, 255, 0.45);
margin-bottom: 36px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
line-height: 1.7;
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
FOOTER — Modern modular layout
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.footer {
background: #050505;
border-top: 1px solid rgba(200, 241, 53, 0.08);
padding: 80px 0 32px;
position: relative;
overflow: hidden;
}
/* ── Footer hero-style background gradients (very subtle) ── */
.footer-bg-gradients {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.footer-gradient {
position: absolute;
border-radius: 50%;
filter: blur(140px);
animation: heroFloat 10s ease-in-out infinite;
}
.footer-gradient.fg1 {
width: 600px;
height: 600px;
background: var(--accent);
top: -15%;
right: -10%;
opacity: 0.15;
animation-delay: 0s;
}
.footer-gradient.fg2 {
width: 500px;
height: 500px;
background: #3b82f6;
bottom: -20%;
left: -12%;
opacity: 0.08;
animation-delay: -5s;
}
.footer-gradient.fg3 {
width: 350px;
height: 350px;
background: var(--accent);
top: 40%;
left: 30%;
opacity: 0.07;
animation-delay: -3s;
}
/* Glow ambiant haut du footer */
.footer-glow {
position: absolute;
top: -200px;
left: 50%;
transform: translateX(-50%);
width: 700px;
height: 400px;
background: radial-gradient(ellipse, rgba(200, 241, 53, 0.06) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
/* ── ZONE 1 : Hero footer (marque + CTA) ── */
.footer-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding-bottom: 48px;
margin-bottom: 48px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
position: relative;
z-index: 1;
}
.footer-hero-brand {
flex: 1;
min-width: 0;
}
.footer-brand-logo {
display: inline-block;
margin-bottom: 16px;
cursor: pointer;
transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
text-decoration: none;
}
.footer-brand-logo:hover {
opacity: 0.78;
}
.logo-footer {
height: 154px;
width: auto;
object-fit: contain;
display: block;
user-select: none;
-webkit-user-drag: none;
}
.footer-brand-text {
font-size: 14px;
color: rgba(255, 255, 255, 0.4);
line-height: 1.7;
max-width: 360px;
}
.footer-hero-cta {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
}
.footer-cta-btn {
font-size: 14px;
padding: 14px 28px;
}
.footer-cta-note {
font-size: 11px;
color: rgba(255, 255, 255, 0.25);
letter-spacing: 0.3px;
}
/* ── ZONE 2 : Grille de navigation ── */
.footer-nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
padding-bottom: 48px;
margin-bottom: 40px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
position: relative;
z-index: 1;
}
.footer-col-title {
font-family: var(--font-heading);
font-size: 11px;
font-weight: 700;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 20px;
position: relative;
padding-bottom: 12px;
}
.footer-col-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 24px;
height: 2px;
background: var(--accent);
border-radius: 1px;
opacity: 0.4;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-link {
font-size: 14px;
color: rgba(255, 255, 255, 0.4);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
padding: 2px 0;
}
.footer-link:hover {
color: var(--accent);
transform: translateX(6px);
}
.footer-link-icon {
display: inline-flex;
align-items: center;
gap: 10px;
}
.footer-link-icon svg {
flex-shrink: 0;
opacity: 0.4;
transition: opacity 0.4s ease;
}
.footer-link-icon:hover svg {
opacity: 1;
color: var(--accent);
}
/* ── ZONE 3 : Barre basse ── */
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 1;
}
.footer-bottom-right {
display: flex;
align-items: center;
gap: 8px;
}
.footer-legal-link {
font-size: 13.5px;
color: rgba(255, 255, 255, 0.4);
text-decoration: none;
transition: color 0.35s ease;
}
.footer-legal-link:hover {
color: var(--accent);
}
.footer-legal-sep {
font-size: 13.5px;
color: rgba(255, 255, 255, 0.2);
}
.footer-bottom-left {
display: flex;
align-items: center;
gap: 24px;
}
.footer-copy {
font-size: 13px;
color: rgba(255, 255, 255, 0.2);
}
.footer-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 600;
color: var(--accent);
background: rgba(200, 241, 53, 0.08);
border: 1px solid rgba(200, 241, 53, 0.15);
padding: 6px 14px;
border-radius: 30px;
letter-spacing: 0.3px;
}
.footer-badge-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
animation: footerDotPulse 2s ease-in-out infinite;
}
@keyframes footerDotPulse {
0%,
100% {
opacity: 1;
box-shadow: 0 0 0 0 rgba(200, 241, 53, 0.4);
}
50% {
opacity: 0.6;
box-shadow: 0 0 0 4px rgba(200, 241, 53, 0);
}
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
SCROLL REVEAL ANIMATIONS
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.reveal {
opacity: 0;
transform: translate3d(0, 28px, 0) scale(0.97);
transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform, opacity;
}
.reveal.visible {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
.reveal-delay-1 {
transition-delay: 0.08s;
}
.reveal-delay-2 {
transition-delay: 0.16s;
}
.reveal-delay-3 {
transition-delay: 0.24s;
}
.reveal-delay-4 {
transition-delay: 0.32s;
}
.reveal-delay-5 {
transition-delay: 0.40s;
}
.reveal-delay-6 {
transition-delay: 0.48s;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ── UNIFIED BUTTON BEHAVIOR — hover/touch identique partout ── */
/* Tous les éléments interactifs partagent le même comportement */
.nav-cta,
.offer-cta-btn,
.service-link,
.portfolio-link,
.footer-social {
position: relative;
overflow: hidden;
}
/* Touch active state — mobile/tablet : léger zoom au touché */
.btn-touch-active {
transform: scale(1.04) !important;
transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
box-shadow: none !important;
}
/* Ripple container sur les boutons */
.btn {
overflow: hidden;
position: relative;
}
.btn-ripple {
position: absolute;
border-radius: 50%;
background: rgba(200, 241, 53, 0.15);
transform: scale(0);
animation: rippleExpand 0.7s ease-out forwards;
pointer-events: none;
}
@keyframes rippleExpand {
to {
transform: scale(3);
opacity: 0;
}
}
/* Onde de choc légère — sections sombres (vert citron) */
@keyframes btnShockwave {
0% {
box-shadow: 0 0 0 0 rgba(200, 241, 53, 0.35);
}
40% {
box-shadow: 0 0 0 8px rgba(200, 241, 53, 0.12);
}
100% {
box-shadow: 0 0 0 14px rgba(200, 241, 53, 0);
}
}
/* Onde de choc légère — sections claires (noir) */
@keyframes btnShockwaveDark {
0% {
box-shadow: 0 0 0 0 rgba(10, 10, 10, 0.25);
}
40% {
box-shadow: 0 0 0 8px rgba(10, 10, 10, 0.08);
}
100% {
box-shadow: 0 0 0 14px rgba(10, 10, 10, 0);
}
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
SERVICES — Glassmorphism Cards (Premium)
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
/* ── Grid Layout ── */
.services .accent-text {
background: rgba(10, 10, 10, 0.85);
color: #C8F135;
padding: 3px 10px;
border-radius: 6px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}
/* ── Base Card — Premium feature card ── */
.service-card {
position: relative;
border-radius: 20px;
padding: 44px 40px 40px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 2px solid rgba(200, 241, 53, 0.35);
transition: background 0.3s ease, border-color 0.3s ease;
overflow: visible;
display: flex;
flex-direction: column;
box-shadow: none;
}
/* ── Card color variants ── */
.service-card-1 {
background: rgba(200, 241, 53, 0.14);
border-color: rgba(200, 241, 53, 0.50);
}
.service-card-2 {
background: rgba(96, 165, 250, 0.12);
border-color: rgba(96, 165, 250, 0.45);
}
.service-card-3 {
background: rgba(168, 130, 255, 0.12);
border-color: rgba(168, 130, 255, 0.45);
}
.service-card-4 {
background: rgba(250, 180, 80, 0.12);
border-color: rgba(250, 180, 80, 0.45);
}
/* Card text colors stay default (dark on light bg) */
/* ── Hover — stronger bg + visible border, NO shadow ── */
.service-card-1:hover {
background: rgba(200, 241, 53, 0.26);
border-color: rgba(200, 241, 53, 0.60);
box-shadow: none;
}
.service-card-2:hover {
background: rgba(96, 165, 250, 0.24);
border-color: rgba(96, 165, 250, 0.58);
box-shadow: none;
}
.service-card-3:hover {
background: rgba(168, 130, 255, 0.24);
border-color: rgba(168, 130, 255, 0.58);
box-shadow: none;
}
.service-card-4:hover {
background: rgba(250, 180, 80, 0.24);
border-color: rgba(250, 180, 80, 0.58);
box-shadow: none;
}
/* ── Hover → descriptive text turns BLACK ── */
.service-card:hover .service-text {
color: rgba(10, 10, 10, 0.88);
}
/* ──/* ── Hover → title gets BLACK BAND background ── */
.service-card:hover .service-title {
background: rgba(10, 10, 10, 0.75);
color: #C8F135;
padding: 8px 16px;
margin: -8px -16px;
border-radius: 8px;
transition: background 0.3s ease, color 0.3s ease, padding 0.3s ease;
}
/* Remove hover title effect on expanded cards */
.service-card.expanded:hover .service-title,
.service-card.expanded .service-title {
background: none;
color: var(--black);
padding: 0;
margin: 0;
}
/* ── Card Header ── */
.service-card-header {
margin-bottom: 18px;
}
.service-title {
font-family: var(--font-heading);
font-size: clamp(22px, 2.5vw, 28px);
font-weight: 700;
color: var(--black);
line-height: 1.3;
letter-spacing: -0.02em;
transition: all 0.3s ease;
padding: 0;
margin: 0;
border-radius: 8px;
display: inline;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* ── Card Text — optimized readability ── */
.service-text {
font-family: var(--font-body);
font-size: 15.5px;
line-height: 1.8;
color: rgba(10, 10, 10, 0.75);
flex-grow: 0;
transition: color 0.35s ease;
letter-spacing: 0.01em;
}
.service-text-secondary {
margin-top: 8px;
color: rgba(10, 10, 10, 0.62);
font-size: 14.5px;
}
/* ──/* ── Expand Button (+) : Modern dark glass with subtle glow ── */
.service-expand-btn {
position: relative;
align-self: flex-start;
margin-top: auto;
padding: 12px 24px;
border-radius: 10px;
border: none;
background: #111;
color: var(--accent);
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 10;
}
.service-expand-btn:hover {
background: #1a1a1a;
}
.service-expand-btn:hover .expand-arrow {
transform: translateX(4px);
}
.service-expand-btn:active {
transform: scale(0.97);
}
.expand-label {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.3px;
white-space: nowrap;
}
.expand-arrow {
transition: transform 0.3s ease;
}
/* Hide expand btn when card is expanded */
.service-card.expanded .service-expand-btn {
opacity: 0;
pointer-events: none;
transform: scale(0.5) rotate(45deg);
}
/* ── Detail Content (hidden by default) ── */
.service-detail {
max-height: 0;
overflow: hidden;
position: relative;
opacity: 0;
margin-top: 0;
transition: max-height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
margin-top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.service-card.expanded .service-detail {
max-height: none;
overflow: visible;
opacity: 1;
margin-top: 24px;
}
/* ──/* (Duplicate removed : see expanded override block below with !important) */
/* -- Overlay backdrop -- */
.service-overlay-backdrop {
position: fixed;
inset: 0;
background: rgba(10, 10, 10, 0.60);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 999;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
}
.service-overlay-backdrop.active {
opacity: 1;
pointer-events: auto;
}
/* -- Expanded card: centered overlay (desktop/tablet) -- */
.service-card.expanded {
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: 1000 !important;
width: 94vw !important;
max-width: 780px !important;
max-height: 94vh !important;
overflow-y: scroll !important;
overflow-x: hidden !important;
padding: 40px 40px 36px !important;
border-radius: 24px !important;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3) !important;
/* Background inherited from card variant */
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
/* No transition on position change */
transition: none !important;
opacity: 0;
animation: serviceModalIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
/* Custom scrollbar */
scrollbar-width: thin;
scrollbar-color: rgba(200, 241, 53, 0.5) rgba(0, 0, 0, 0.05);
}
/* Webkit custom scrollbar */
.service-card.expanded::-webkit-scrollbar {
width: 8px;
}
.service-card.expanded::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.04);
border-radius: 10px;
margin: 12px 0;
}
.service-card.expanded::-webkit-scrollbar-thumb {
background: rgba(200, 241, 53, 0.5);
border-radius: 10px;
}
.service-card.expanded::-webkit-scrollbar-thumb:hover {
background: rgba(200, 241, 53, 0.75);
}
.service-card.expanded .service-text {
color: rgba(10, 10, 10, 0.90) !important;
}
.service-card.expanded .service-text-secondary {
color: rgba(10, 10, 10, 0.78) !important;
}
@keyframes serviceModalIn {
0% {
opacity: 0;
transform: translate(-50%, -46%) scale(0.92);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
/* -- Closing animation class -- */
.service-card.closing {
animation: serviceModalOut 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}
@keyframes serviceModalOut {
0% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
100% {
opacity: 0;
transform: translate(-50%, -46%) scale(0.92);
}
}
.service-card-1.expanded {
border-color: rgba(200, 241, 53, 0.50) !important;
background: #f4fade !important;
}
.service-card-2.expanded {
border-color: rgba(96, 165, 250, 0.50) !important;
background: #edf4fe !important;
}
.service-card-3.expanded {
border-color: rgba(168, 130, 255, 0.50) !important;
background: #f1ecfe !important;
}
.service-card-4.expanded {
border-color: rgba(250, 180, 80, 0.50) !important;
background: #fef3e2 !important;
}
/* ── Detail inner styles — optimized readability ── */
.service-detail-title {
font-family: var(--font-heading);
font-size: 13px;
font-weight: 700;
color: #0A0A0A;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 18px;
padding: 12px 16px;
background: rgba(200, 241, 53, 0.15);
border-left: 4px solid #C8F135;
border-radius: 0 8px 8px 0;
}
.service-detail-list {
list-style: none;
padding: 0;
margin: 0 0 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.service-detail-list li {
font-size: 14.5px;
line-height: 1.7;
color: rgba(10, 10, 10, 0.82);
padding-left: 32px;
position: relative;
transition: transform 0.2s ease, color 0.2s ease;
}
.service-detail-list li:hover {
transform: translateX(4px);
color: rgba(10, 10, 10, 0.95);
}
.service-detail-list li::before {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 18px;
height: 18px;
border-radius: 6px;
background: linear-gradient(135deg, rgba(200, 241, 53, 0.25), rgba(200, 241, 53, 0.10));
border: 1px solid rgba(200, 241, 53, 0.35);
}
.service-detail-list li::after {
content: '';
position: absolute;
left: 5px;
top: 10px;
width: 8px;
height: 5px;
border-left: 2px solid #0A0A0A;
border-bottom: 2px solid #0A0A0A;
transform: rotate(-45deg);
}
.service-detail-list li strong {
color: rgba(10, 10, 10, 0.92);
font-weight: 700;
}
/* ── Rich list (title + description per item) ── */
.service-detail-list--rich li {
display: flex;
flex-direction: column;
gap: 6px;
padding-left: 32px;
padding-bottom: 18px;
margin-bottom: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.service-detail-list--rich li:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.service-detail-list--rich li strong {
font-size: 15px;
font-weight: 700;
color: rgba(10, 10, 10, 0.95);
line-height: 1.4;
}
.service-detail-list--rich li span {
font-size: 13.5px;
line-height: 1.65;
color: rgba(10, 10, 10, 0.68);
font-weight: 400;
}
.service-detail-list--rich li:hover strong {
color: #0A0A0A;
}
.service-detail-list--rich li:hover span {
color: rgba(10, 10, 10, 0.82);
}
.service-detail-note {
font-size: 13.5px;
line-height: 1.7;
color: rgba(10, 10, 10, 0.68);
font-style: italic;
padding: 16px 18px;
background: rgba(200, 241, 53, 0.08);
border-left: 4px solid rgba(200, 241, 53, 0.50);
border-radius: 0 8px 8px 0;
margin-top: 6px;
}
/* ── Card-specific detail colors ── */
/* Card 2 – Blue */
.service-card-2 .service-detail-title {
background: rgba(96, 165, 250, 0.15);
border-left-color: #60A5FA;
}
.service-card-2 .service-detail-list li::before {
background: linear-gradient(135deg, rgba(96, 165, 250, 0.25), rgba(96, 165, 250, 0.10));
border-color: rgba(96, 165, 250, 0.35);
}
.service-card-2 .service-detail-note {
background: rgba(96, 165, 250, 0.08);
border-left-color: rgba(96, 165, 250, 0.50);
}
/* Card 3 – Purple */
.service-card-3 .service-detail-title {
background: rgba(168, 130, 255, 0.15);
border-left-color: #A882FF;
}
.service-card-3 .service-detail-list li::before {
background: linear-gradient(135deg, rgba(168, 130, 255, 0.25), rgba(168, 130, 255, 0.10));
border-color: rgba(168, 130, 255, 0.35);
}
.service-card-3 .service-detail-note {
background: rgba(168, 130, 255, 0.08);
border-left-color: rgba(168, 130, 255, 0.50);
}
/* Card 4 – Orange */
.service-card-4 .service-detail-title {
background: rgba(250, 180, 80, 0.15);
border-left-color: #FAB450;
}
.service-card-4 .service-detail-list li::before {
background: linear-gradient(135deg, rgba(250, 180, 80, 0.25), rgba(250, 180, 80, 0.10));
border-color: rgba(250, 180, 80, 0.35);
}
.service-card-4 .service-detail-note {
background: rgba(250, 180, 80, 0.08);
border-left-color: rgba(250, 180, 80, 0.50);
}
/* ──/* ── Close Button (X) : on CARD level, visible when expanded ── */
.service-close-btn {
position: absolute;
top: 14px;
right: 14px;
width: 38px;
height: 38px;
border-radius: 50%;
border: 1.5px solid rgba(200, 241, 53, 0.30);
background: rgba(20, 20, 20, 0.80);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: rgba(255, 255, 255, 0.9);
font-size: 16px;
font-weight: 400;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
z-index: 20;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.service-card.expanded .service-close-btn {
display: flex;
position: absolute;
top: 12px;
right: 12px;
z-index: 1001;
}
.service-close-btn:hover {
background: rgba(200, 241, 53, 0.85);
color: #0A0A0A;
border-color: rgba(200, 241, 53, 0.60);
transform: rotate(90deg) scale(1.1);
}
/* ═══════════════════════════════════════════════════════════════
SERVICES · Alternating Layout (Refonte 2026)
Layout type Linear/Vercel/Stripe : texte + SVG animés
═══════════════════════════════════════════════════════════════ */
/* ── Local variables (préfixe --svc-* pour éviter collisions) ── */
.services {
--svc-gap: 96px;
--svc-gap-md: 64px;
--svc-radius: 22px;
--svc-border: rgba(0, 0, 0, 0.08);
--svc-border-soft: rgba(0, 0, 0, 0.05);
--svc-card-bg: var(--white);
--svc-text-dim: var(--gray-600);
--svc-text-feature: var(--gray-800);
--svc-accent-1: #C8F135;
--svc-accent-2: #60A5FA;
--svc-accent-3: #A882FF;
--svc-accent-4: #FAB450;
background: var(--white);
position: relative;
overflow: hidden;
/* Scroll Color Ambiance · fallback CSS de lissage */
transition: background-color 0.12s ease;
will-change: background-color;
}
/* Couleurs d'ambiance · fallback si JS désactivé */
.services[data-svc-active="1"] { background-color: #f6fcd9; } /* vert-jaune doux (S1 Sites web) */
.services[data-svc-active="2"] { background-color: #eaf3ff; } /* bleu ciel doux (S2 Tunnels) */
.services[data-svc-active="3"] { background-color: #f3edff; } /* violet doux (S3 Automatisations) */
.services[data-svc-active="4"] { background-color: #fff5e0; } /* orange clair doux (S4 Branding) */
/* Quadrillage subtil en fond (comme la section FAQ) */
.services .services-grid-overlay {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
z-index: 0;
/* Le quadrillage reste visible sur toutes les couleurs d'ambiance */
mix-blend-mode: multiply;
}
.services > .container {
position: relative;
z-index: 1;
}
/* ── Section text : couleurs sombres pour fond blanc ── */
.services .section-heading.dark {
color: var(--black);
}
.services .section-sub.dark {
color: var(--gray-600);
}
.services .accent-text {
color: var(--accent);
}
/* ── Stack container ── */
.svc-stack {
display: flex;
flex-direction: column;
gap: 0;
margin-top: 72px;
position: relative;
}
/* ── Séparateur décoratif vertical entre blocs ── */
.svc-block:not(:last-child)::after {
content: '';
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 100px;
background: linear-gradient(to bottom,
transparent 0%,
rgba(0, 0, 0, 0.08) 50%,
transparent 100%);
pointer-events: none;
z-index: 0;
}
/* ── Bloc de service ── */
.svc-block {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: 80px;
align-items: center;
padding: 80px 0;
position: relative;
}
/* Reverse : SVG à gauche, texte à droite */
.svc-block--reverse .svc-text {
order: 2;
}
.svc-block--reverse .svc-visual {
order: 1;
}
/* ─────── COLONNE TEXTE ─────── */
.svc-text {
position: relative;
z-index: 2;
}
/* Eyebrow numerote · effet 3D subtil avec gradient + inset highlights (S1 accent vert) */
.svc-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-heading);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #5d7500;
margin-bottom: 20px;
padding: 7px 16px;
background: linear-gradient(180deg,
rgba(200, 241, 53, 0.55) 0%,
rgba(200, 241, 53, 0.28) 100%);
border: 1.5px solid rgba(168, 204, 26, 0.55);
border-radius: 100px;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.08),
0 2px 10px rgba(200, 241, 53, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.6),
inset 0 -1px 0 rgba(168, 204, 26, 0.12);
}
/* S2 · Bleu */
.svc-block--2 .svc-eyebrow {
color: #1e5298;
background: linear-gradient(180deg,
rgba(96, 165, 250, 0.45) 0%,
rgba(96, 165, 250, 0.20) 100%);
border-color: rgba(37, 99, 235, 0.55);
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.08),
0 2px 10px rgba(96, 165, 250, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.6),
inset 0 -1px 0 rgba(37, 99, 235, 0.12);
}
/* S3 · Violet */
.svc-block--3 .svc-eyebrow {
color: #5a3cb8;
background: linear-gradient(180deg,
rgba(168, 130, 255, 0.45) 0%,
rgba(168, 130, 255, 0.20) 100%);
border-color: rgba(124, 58, 237, 0.55);
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.08),
0 2px 10px rgba(168, 130, 255, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.6),
inset 0 -1px 0 rgba(124, 58, 237, 0.12);
}
/* S4 · Orange */
.svc-block--4 .svc-eyebrow {
color: #8a5a0a;
background: linear-gradient(180deg,
rgba(250, 180, 80, 0.50) 0%,
rgba(250, 180, 80, 0.22) 100%);
border-color: rgba(217, 119, 6, 0.55);
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.08),
0 2px 10px rgba(250, 180, 80, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.6),
inset 0 -1px 0 rgba(217, 119, 6, 0.12);
}
/* Titre du service */
.svc-name {
font-family: var(--font-heading);
font-size: clamp(26px, 2.8vw, 36px);
font-weight: 700;
color: var(--black);
line-height: 1.15;
letter-spacing: -0.02em;
margin-bottom: 22px;
}
/* Descriptions (paragraphes verbatim de l'existant) */
.svc-desc {
font-size: 15.5px;
color: var(--gray-600);
line-height: 1.78;
margin-bottom: 16px;
}
.svc-desc--secondary {
margin-bottom: 28px;
}
.svc-desc + .svc-desc {
margin-top: -4px;
}
/* Liste de fonctionnalités condensées */
.svc-features {
list-style: none;
display: flex;
flex-direction: column;
gap: 14px;
margin: 30px 0 36px;
padding: 0;
}
.svc-features li {
display: flex;
align-items: flex-start;
gap: 14px;
font-size: 14.5px;
color: var(--gray-800);
line-height: 1.6;
}
/* Check circle · effet 3D subtil (S1 accent vert par defaut) */
.svc-check {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: linear-gradient(180deg,
rgba(200, 241, 53, 0.55) 0%,
rgba(200, 241, 53, 0.28) 100%);
border: 1.5px solid rgba(168, 204, 26, 0.55);
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 1px;
position: relative;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 2px 6px rgba(200, 241, 53, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.55),
inset 0 -1px 0 rgba(168, 204, 26, 0.12);
}
.svc-check::after {
content: '';
width: 9px;
height: 5px;
border-left: 2px solid #5d7500;
border-bottom: 2px solid #5d7500;
transform: rotate(-45deg) translate(1px, -1px);
}
/* S2 · Bleu */
.svc-block--2 .svc-check {
background: linear-gradient(180deg,
rgba(96, 165, 250, 0.45) 0%,
rgba(96, 165, 250, 0.20) 100%);
border-color: rgba(37, 99, 235, 0.55);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 2px 6px rgba(96, 165, 250, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.55),
inset 0 -1px 0 rgba(37, 99, 235, 0.12);
}
.svc-block--2 .svc-check::after {
border-left-color: #1e5298;
border-bottom-color: #1e5298;
}
/* S3 · Violet */
.svc-block--3 .svc-check {
background: linear-gradient(180deg,
rgba(168, 130, 255, 0.45) 0%,
rgba(168, 130, 255, 0.20) 100%);
border-color: rgba(124, 58, 237, 0.55);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 2px 6px rgba(168, 130, 255, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.55),
inset 0 -1px 0 rgba(124, 58, 237, 0.12);
}
.svc-block--3 .svc-check::after {
border-left-color: #5a3cb8;
border-bottom-color: #5a3cb8;
}
/* S4 · Orange */
.svc-block--4 .svc-check {
background: linear-gradient(180deg,
rgba(250, 180, 80, 0.50) 0%,
rgba(250, 180, 80, 0.22) 100%);
border-color: rgba(217, 119, 6, 0.55);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 2px 6px rgba(250, 180, 80, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.55),
inset 0 -1px 0 rgba(217, 119, 6, 0.12);
}
.svc-block--4 .svc-check::after {
border-left-color: #8a5a0a;
border-bottom-color: #8a5a0a;
}
/* ── Détail expand/collapse in-place ── */
.svc-detail {
max-height: 0;
opacity: 0;
overflow: hidden;
margin: 0;
padding: 0;
transition: max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.35s ease,
margin 0.35s ease,
padding 0.35s ease;
border-left: 2px solid rgba(200, 241, 53, 0.45);
}
.svc-block.expanded .svc-detail {
max-height: 4000px;
opacity: 1;
margin: 0 0 32px;
padding: 4px 0 4px 22px;
}
.svc-block--2.expanded .svc-detail {
border-left-color: rgba(96, 165, 250, 0.55);
}
.svc-block--3.expanded .svc-detail {
border-left-color: rgba(168, 130, 255, 0.55);
}
.svc-block--4.expanded .svc-detail {
border-left-color: rgba(250, 180, 80, 0.55);
}
/* Styles internes du détail (h4 + ul + li + notes) */
.svc-detail-title {
display: block;
font-family: var(--font-heading);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 1px dashed rgba(200, 241, 53, 0.18);
}
.svc-block--2 .svc-detail-title {
color: var(--svc-accent-2);
border-bottom-color: rgba(96, 165, 250, 0.22);
}
.svc-block--3 .svc-detail-title {
color: var(--svc-accent-3);
border-bottom-color: rgba(168, 130, 255, 0.22);
}
.svc-block--4 .svc-detail-title {
color: var(--svc-accent-4);
border-bottom-color: rgba(250, 180, 80, 0.22);
}
.svc-detail-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
padding: 0;
margin: 0 0 18px;
}
.svc-detail-list li {
position: relative;
padding-left: 22px;
font-size: 14px;
color: var(--gray-600);
line-height: 1.6;
}
.svc-detail-list li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
}
.svc-block--2 .svc-detail-list li::before {
background: var(--svc-accent-2);
}
.svc-block--3 .svc-detail-list li::before {
background: var(--svc-accent-3);
}
.svc-block--4 .svc-detail-list li::before {
background: var(--svc-accent-4);
}
/* Liste rich (S3) avec strong + span */
.svc-detail-list--rich li {
display: flex;
flex-direction: column;
gap: 4px;
padding-left: 22px;
}
.svc-detail-list--rich li strong {
font-family: var(--font-heading);
font-size: 13.5px;
font-weight: 700;
color: var(--black);
letter-spacing: 0.01em;
}
.svc-detail-list--rich li span {
font-size: 13px;
color: var(--gray-600);
line-height: 1.55;
}
.svc-detail-note {
font-size: 13px;
color: var(--gray-600);
line-height: 1.6;
font-style: italic;
padding: 12px 14px;
background: var(--gray-100);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 10px;
margin-top: 6px;
}
.svc-detail-note strong {
color: var(--black);
font-style: normal;
}
/* ── Actions : CTA + bouton expand ── */
.svc-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
align-items: center;
margin-top: 4px;
}
.svc-cta {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-heading);
font-size: 13px;
font-weight: 600;
color: #0a0a0a;
text-decoration: none;
letter-spacing: 0.04em;
padding: 13px 22px;
background: var(--accent);
border: 1px solid var(--accent);
border-radius: 100px;
transition: gap 0.35s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.35s ease;
box-shadow: 0 4px 24px rgba(200, 241, 53, 0.20);
}
.svc-cta:hover {
gap: 14px;
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(200, 241, 53, 0.32);
}
.svc-cta svg {
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.svc-cta:hover svg {
transform: translateX(3px);
}
.svc-block--2 .svc-cta {
background: var(--svc-accent-2);
border-color: var(--svc-accent-2);
box-shadow: 0 4px 24px rgba(96, 165, 250, 0.22);
}
.svc-block--2 .svc-cta:hover {
box-shadow: 0 8px 32px rgba(96, 165, 250, 0.34);
}
.svc-block--3 .svc-cta {
background: var(--svc-accent-3);
border-color: var(--svc-accent-3);
box-shadow: 0 4px 24px rgba(168, 130, 255, 0.22);
}
.svc-block--3 .svc-cta:hover {
box-shadow: 0 8px 32px rgba(168, 130, 255, 0.34);
}
.svc-block--4 .svc-cta {
background: var(--svc-accent-4);
border-color: var(--svc-accent-4);
box-shadow: 0 4px 24px rgba(250, 180, 80, 0.22);
}
.svc-block--4 .svc-cta:hover {
box-shadow: 0 8px 32px rgba(250, 180, 80, 0.34);
}
.svc-expand-btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-heading);
font-size: 13px;
font-weight: 700;
color: var(--gray-800);
background: rgba(10, 10, 10, 0.04);
border: 1.5px solid rgba(10, 10, 10, 0.15);
border-radius: 100px;
padding: 13px 24px;
cursor: pointer;
letter-spacing: 0.04em;
transition: color 0.35s ease,
border-color 0.35s ease,
background 0.35s ease,
box-shadow 0.35s ease,
transform 0.35s ease;
}
.svc-expand-btn:hover {
color: var(--black);
border-color: var(--accent);
background: rgba(200, 241, 53, 0.10);
box-shadow: 0 0 0 3px rgba(200, 241, 53, 0.12);
transform: translateY(-1px);
}
.svc-expand-btn:active {
transform: translateY(0);
box-shadow: none;
}
.svc-expand-arrow {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.svc-block.expanded .svc-expand-arrow {
transform: rotate(180deg);
}
/* ─────── COLONNE VISUELLE ─────── */
.svc-visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 360px;
}
.svc-visual-glow {
display: none;
}
/* Browser card · fond sombre uniforme pour les 4 SVG (chrome bar + SVG animes) */
.svc-visual-card {
width: 100%;
max-width: 540px;
background: rgba(10, 10, 10, 0.96);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--svc-radius);
overflow: hidden;
position: relative;
z-index: 1;
transition: border-color 0.5s ease,
transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.5s ease;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25),
0 4px 16px rgba(0, 0, 0, 0.12),
0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}
.svc-visual-card:hover {
border-color: rgba(200, 241, 53, 0.45);
transform: translateY(-4px);
box-shadow: 0 28px 72px rgba(0, 0, 0, 0.32),
0 6px 20px rgba(0, 0, 0, 0.16),
0 0 40px rgba(200, 241, 53, 0.08),
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.svc-block--2 .svc-visual-card:hover {
border-color: rgba(96, 165, 250, 0.5);
box-shadow: 0 28px 72px rgba(0, 0, 0, 0.32),
0 6px 20px rgba(0, 0, 0, 0.16),
0 0 40px rgba(96, 165, 250, 0.10),
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.svc-block--3 .svc-visual-card:hover {
border-color: rgba(168, 130, 255, 0.5);
box-shadow: 0 28px 72px rgba(0, 0, 0, 0.32),
0 6px 20px rgba(0, 0, 0, 0.16),
0 0 40px rgba(168, 130, 255, 0.10),
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.svc-block--4 .svc-visual-card:hover {
border-color: rgba(250, 180, 80, 0.5);
box-shadow: 0 28px 72px rgba(0, 0, 0, 0.32),
0 6px 20px rgba(0, 0, 0, 0.16),
0 0 40px rgba(250, 180, 80, 0.10),
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
/* Chrome bar · dark theme (dimensions identiques pour les 4 cards) */
.svc-chrome {
background: rgba(255, 255, 255, 0.025);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
padding: 14px 18px;
display: flex;
align-items: center;
gap: 8px;
height: 48px;
box-sizing: border-box;
}
.chrome-dot {
width: 11px;
height: 11px;
border-radius: 50%;
flex-shrink: 0;
}
.cd-r { background: #FF5F57; }
.cd-y { background: #FEBC2E; }
.cd-g { background: #28C840; }
.chrome-url {
flex: 1;
margin-left: 16px;
font-family: ui-monospace, 'Menlo', 'Courier New', monospace;
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.01em;
text-align: center;
padding: 5px 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 100px;
user-select: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chrome-url em {
color: var(--accent);
font-style: normal;
}
/* SVG container · fond sombre continu avec le chrome bar.
Pas de max-height : la hauteur est calculee automatiquement
a partir du viewBox (420x260), ce qui garantit que le SVG
remplit parfaitement toute la largeur disponible sans bandes vides. */
.svc-svg-wrap {
padding: 32px 28px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(10, 10, 10, 0.96);
}
.svc-svg-wrap > svg {
width: 100%;
height: auto;
display: block;
}
/* ═══════════════════════════════════════════════════════════════
ANIMATIONS GATING · animations désactivées tant que .svc-animate
n'est pas appliquée par le JS (déclenché par IntersectionObserver
sur le .svc-block parent à threshold 0.35).
═══════════════════════════════════════════════════════════════ */
.svg-svc-1:not(.svc-animate) *,
.svg-svc-2:not(.svc-animate) *,
.svg-svc-3:not(.svc-animate) *,
.svg-svc-4:not(.svc-animate) * {
animation-name: none !important;
}
/* ═══════════════════════════════════════════════════════════════
KEYFRAMES · uniquement transform + opacity
═══════════════════════════════════════════════════════════════ */
@keyframes svcFadeIn {
from { opacity: 0; transform: translateX(-8px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes svcFadeUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes svcPopIn {
from { opacity: 0; transform: scale(0.82); }
to { opacity: 1; transform: scale(1); }
}
@keyframes svcFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
@keyframes svcParticleFlow {
0% { opacity: 0; transform: translateY(-30px) scale(0.6); }
15% { opacity: 1; }
85% { opacity: 0.8; }
100% { opacity: 0; transform: translateY(140px) scale(1); }
}
@keyframes svcPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.7); }
}
@keyframes svcBlink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
@keyframes svcClockTick {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes svcArrowPulse {
0%, 100% { opacity: 0.35; transform: translateX(0); }
50% { opacity: 1; transform: translateX(3px); }
}
/* Pulse verticale pour les fleches du funnel (SVG 2) */
@keyframes svcFunnelPulse {
0%, 100% { opacity: 0.4; transform: translateY(0); }
50% { opacity: 1; transform: translateY(3px); }
}
@keyframes svcDrawLogo {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(97px); opacity: 0; }
}
/* ─── Aurora gradient animé · cercle conteneur logo SVG 4 ─── */
.s4-aurora-layer-a,
.s4-aurora-layer-b {
transform-origin: 210px 90px;
}
.svg-svc-4.svc-animate .s4-aurora-layer-a {
animation: s4AuroraSpinA 6s linear infinite;
}
.svg-svc-4.svc-animate .s4-aurora-layer-b {
animation: s4AuroraSpinB 8s linear infinite;
}
/* Rotation des stops via animation des couleurs (uniquement opacity + transform) */
@keyframes s4AuroraSpinA {
0% { transform: rotate(0deg) scale(1); }
25% { transform: rotate(90deg) scale(1.12); }
50% { transform: rotate(180deg) scale(1); }
75% { transform: rotate(270deg) scale(1.08); }
100% { transform: rotate(360deg) scale(1); }
}
@keyframes s4AuroraSpinB {
0% { transform: rotate(0deg) scale(1.1); }
33% { transform: rotate(-120deg) scale(1); }
66% { transform: rotate(-240deg) scale(1.15); }
100% { transform: rotate(-360deg) scale(1.1); }
}
/* Pulsation d'opacité sur la couche B pour varier le mélange */
.svg-svc-4.svc-animate .s4-aurora-layer-b {
animation: s4AuroraSpinB 8s linear infinite, s4AuroraPulse 4s ease-in-out infinite;
}
@keyframes s4AuroraPulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 0.8; }
}
/* ─── Keyframes additionnels pour SVG 4 (halo, ring ripple, orbit dots) ─── */
@keyframes svcOpacityFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes svcHaloPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.13); }
}
@keyframes svcRingRipple {
0% { transform: scale(1); opacity: 0; }
15% { opacity: 0.7; }
100% { transform: scale(1.95); opacity: 0; }
}
@keyframes svcOrbitDot {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.22); }
}
@keyframes svcTypingBounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
30% { transform: translateY(-4px); opacity: 1; }
}
@keyframes svcLineGrow {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes svcDashFlow {
from { transform: translateX(0); }
to { transform: translateX(-12px); }
}
/* ═══════════════════════════════════════════════════════════════
SVG 1, 2, 3 · Animations fournies par le client (fichier futursite-exact-svgs.html)
Classes préfixées par .svg-svc-1/2/3 pour ne pas entrer en conflit
avec celles utilisées par SVG 4 (qui utilise aussi .site-comp, .sc*, .particle).
═══════════════════════════════════════════════════════════════ */
/* ─── Keyframes globaux (pas de conflit avec les svc* existants) ─── */
@keyframes codeLine {
from { opacity: 0; transform: translateX(-6px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes popIn {
from { opacity: 0; transform: scale(.85); }
to { opacity: 1; transform: scale(1); }
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
@keyframes floatIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes floatBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
@keyframes pFlow {
0% { opacity: 0; transform: translateY(-80px) scale(.6); }
10% { opacity: 1; }
80% { opacity: .8; }
100% { opacity: 0; transform: translateY(140px) scale(1); }
}
@keyframes stageRev {
from { opacity: 0; transform: translateX(-10px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes cntUp {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes aPulse {
0%, 100% { opacity: .4; transform: translateY(0); }
50% { opacity: 1; transform: translateY(3px); }
}
@keyframes mPop {
from { opacity: 0; transform: scale(.8) translateY(4px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes tdBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
@keyframes clkTick {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ─────────────────────────────────
SVG 1 · Sites web (editeur + preview)
───────────────────────────────── */
.svg-svc-1 .code-line {
opacity: 0;
animation: codeLine .4s ease forwards;
}
.svg-svc-1 .cl1 { animation-delay: .2s; }
.svg-svc-1 .cl2 { animation-delay: .5s; }
.svg-svc-1 .cl3 { animation-delay: .8s; }
.svg-svc-1 .cl4 { animation-delay: 1.1s; }
.svg-svc-1 .cl5 { animation-delay: 1.4s; }
.svg-svc-1 .cl6 { animation-delay: 1.7s; }
.svg-svc-1 .cl7 { animation-delay: 2s; }
.svg-svc-1 .cl8 { animation-delay: 2.3s; }
.svg-svc-1 .site-comp {
opacity: 0;
transform-origin: center;
transform-box: fill-box;
animation: popIn .5s cubic-bezier(.175,.885,.32,1.275) forwards;
}
.svg-svc-1 .sc1 { animation-delay: .8s; }
.svg-svc-1 .sc2 { animation-delay: 1.3s; }
.svg-svc-1 .sc3 { animation-delay: 1.8s; }
.svg-svc-1 .sc4 { animation-delay: 2.3s; }
.svg-svc-1 .cursor {
animation: blink 1s step-end infinite;
}
.svg-svc-1 .float-b {
opacity: 0;
transform-origin: center;
transform-box: fill-box;
animation: floatIn .6s ease forwards,
floatBob 3s ease-in-out infinite;
}
.svg-svc-1 .fb1 { animation-delay: 2.8s, 3.2s; }
.svg-svc-1 .fb2 { animation-delay: 3.2s, 3.6s; }
/* ─────────────────────────────────
SVG 2 · Tunnels (funnel + particules)
───────────────────────────────── */
.svg-svc-2 .stage-lbl {
opacity: 0;
animation: stageRev .6s ease forwards;
}
.svg-svc-2 .sl1 { animation-delay: .3s; }
.svg-svc-2 .sl2 { animation-delay: .7s; }
.svg-svc-2 .sl3 { animation-delay: 1.1s; }
.svg-svc-2 .arr-pulse {
transform-origin: center;
transform-box: fill-box;
animation: aPulse 1.5s ease-in-out infinite;
}
.svg-svc-2 .particle {
opacity: 0;
transform-origin: center;
transform-box: fill-box;
animation: pFlow linear infinite;
}
.svg-svc-2 .pp1 { animation-duration: 3s; animation-delay: 0s; }
.svg-svc-2 .pp2 { animation-duration: 3s; animation-delay: .6s; }
.svg-svc-2 .pp3 { animation-duration: 3s; animation-delay: 1.2s; }
.svg-svc-2 .pp4 { animation-duration: 3.5s; animation-delay: .3s; }
.svg-svc-2 .pp5 { animation-duration: 3.5s; animation-delay: .9s; }
.svg-svc-2 .pp6 { animation-duration: 4s; animation-delay: 1.5s; }
.svg-svc-2 .cnt-num {
opacity: 0;
animation: cntUp 2s ease forwards;
animation-delay: 1.5s;
}
.svg-svc-2 .s2-channel {
opacity: 0;
transform-origin: center;
transform-box: fill-box;
animation: s2ChannelSlide 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes s2ChannelSlide {
from { opacity: 0; transform: translateX(12px) scale(0.9); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
/* ─────────────────────────────────
SVG 3 · Automatisations (WhatsApp + flux n8n)
───────────────────────────────── */
.svg-svc-3 .msg-bbl {
opacity: 0;
transform-origin: center;
transform-box: fill-box;
animation: mPop .4s cubic-bezier(.175,.885,.32,1.275) forwards;
}
.svg-svc-3 .mb1 { animation-delay: .3s; }
.svg-svc-3 .mb2 { animation-delay: .9s; }
.svg-svc-3 .mb3 { animation-delay: 1.5s; }
.svg-svc-3 .mb4 { animation-delay: 2.1s; }
.svg-svc-3 .mb5 { animation-delay: 2.7s; }
.svg-svc-3 .mb6 { animation-delay: 3.3s; }
.svg-svc-3 .td {
transform-origin: center;
transform-box: fill-box;
animation: tdBounce 1s ease-in-out infinite;
}
.svg-svc-3 .td1 { animation-delay: 0s; }
.svg-svc-3 .td2 { animation-delay: .2s; }
.svg-svc-3 .td3 { animation-delay: .4s; }
.svg-svc-3 .clock-h {
transform-origin: 256px 235px;
animation: clkTick 4s linear infinite;
}
/* ═══════════════════════════════════════════════════════════════
SVG 4 · Branding creation (classes fournies : .site-comp, .sc1-4, .float-b)
═══════════════════════════════════════════════════════════════ */
/* Tous les elements .site-comp sont caches par defaut et revelent en svcPopIn */
.svg-svc-4 .site-comp {
opacity: 0;
transform-origin: center;
transform-box: fill-box;
animation: svcPopIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* Phase 1 : logo central (cercle + F + masque) · delay 0.3s */
.svg-svc-4 .sc1 {
animation-delay: 0.3s;
}
/* Phase 2 (inutilisee depuis la refonte avec orbit-dots, conservee au cas ou) */
.svg-svc-4 .sc2 {
animation-delay: 1.3s;
}
/* Phase 3 : blocs typographiques · premier delay 2.2s (le 2e via inline style) */
.svg-svc-4 .sc3 {
animation-delay: 2.2s;
}
/* Phase 4 : mini-formats (carte visite, doc, icone app) · premier delay 2.75s */
.svg-svc-4 .sc4 {
animation-delay: 2.75s;
}
/* ─── Halo lumineux derrière le logo (pulse continu après fade-in) ─── */
.svg-svc-4 .halo {
opacity: 0;
transform-origin: center;
transform-box: fill-box;
animation: svcOpacityFadeIn 0.7s ease-out forwards,
svcHaloPulse 3.8s ease-in-out infinite;
animation-delay: 0.3s, 1.0s;
}
/* ─── Rings ripple (effet sonar en boucle, 2 anneaux offset) ─── */
.svg-svc-4 .ring {
opacity: 0;
transform-origin: center;
transform-box: fill-box;
animation: svcRingRipple 3.6s ease-out infinite;
}
.svg-svc-4 .ring-1 { animation-delay: 1.0s; }
.svg-svc-4 .ring-2 { animation-delay: 2.8s; }
/* ─── Lignes de connexion : apparition subtile ─── */
.svg-svc-4 .s4-conn {
opacity: 0;
animation: s4ConnFade 1.2s ease-out 0.6s forwards;
}
.svg-svc-4 .s4-conn-r,
.svg-svc-4 .s4-conn-br { animation-delay: 0.8s; }
@keyframes s4ConnFade {
from { opacity: 0; }
to { opacity: 1; }
}
/* ─── Swatches palette (gauche) ─── */
.svg-svc-4 .s4-swatch {
opacity: 0;
transform-origin: center;
transform-box: fill-box;
animation: s4SlideInLeft 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards,
s4SwatchFloat 5s ease-in-out infinite;
}
@keyframes s4SlideInLeft {
from { opacity: 0; transform: translateX(-14px) scale(0.9); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes s4SwatchFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
/* ─── Typographie specimens (droite) ─── */
.svg-svc-4 .s4-type-specimen {
opacity: 0;
transform-origin: center;
transform-box: fill-box;
animation: s4SlideInRight 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes s4SlideInRight {
from { opacity: 0; transform: translateX(14px) scale(0.9); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
/* ─── Board cards (bas) ─── */
.svg-svc-4 .s4-board-card {
opacity: 0;
transform-origin: center;
transform-box: fill-box;
animation: s4CardRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes s4CardRise {
from { opacity: 0; transform: translateY(16px) scale(0.92); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ─── Badge complétion ─── */
.svg-svc-4 .s4-badge {
opacity: 0;
transform-origin: center;
transform-box: fill-box;
animation: s4BadgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
s4BadgeGlow 3s ease-in-out 3.5s infinite;
}
@keyframes s4BadgePop {
from { opacity: 0; transform: scale(0.7); }
to { opacity: 1; transform: scale(1); }
}
@keyframes s4BadgeGlow {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
.svc-block {
gap: 56px;
padding: 64px 0;
}
.svc-visual-card {
max-width: 480px;
}
}
@media (max-width: 900px) {
.svc-block {
grid-template-columns: minmax(0, 1fr);
gap: 0;
padding: 56px 0;
}
/* display:contents aplatit les enfants de svc-text dans le grid parent
pour pouvoir intercaler la carte visuelle apres le titre */
.svc-block .svc-text,
.svc-block--reverse .svc-text {
display: contents;
}
/* min-width: 0 crucial pour empecher les enfants de pousser le grid */
.svc-block .svc-text > *,
.svc-block .svc-visual,
.svc-block--reverse .svc-text > *,
.svc-block--reverse .svc-visual {
min-width: 0;
max-width: 100%;
}
/* Ordre : eyebrow(1) → titre(2) → VISUEL(3) → desc/features/actions(4+) */
.svc-block .svc-eyebrow { order: 1; margin-bottom: 14px; justify-self: start; }
.svc-block .svc-name { order: 2; margin-bottom: 24px; }
.svc-block .svc-visual,
.svc-block--reverse .svc-visual {
order: 3;
margin-bottom: 28px;
}
.svc-block .svc-desc { order: 4; margin-bottom: 12px; }
.svc-block .svc-desc--secondary { order: 5; margin-bottom: 16px; }
.svc-block .svc-features { order: 6; margin-bottom: 16px; }
.svc-block .svc-detail { order: 7; }
.svc-block .svc-actions { order: 8; margin-top: 8px; }
.svc-visual-card {
max-width: 100%;
width: 100%;
}
.svc-visual {
min-height: 280px;
}
/* Wrap des mots longs (ex: "one-page", "e-commerce") */
.svc-name,
.svc-desc,
.svc-features li,
.svc-features li span {
overflow-wrap: break-word;
word-wrap: break-word;
min-width: 0;
}
.svc-features li {
max-width: 100%;
}
/* Carousel ne doit jamais deborder */
.svc-svg-wrap,
.svc-carousel,
.svc-carousel-track,
.svc-slide {
max-width: 100%;
}
.svc-block:not(:last-child)::after {
height: 60px;
bottom: -30px;
}
.svc-stack {
margin-top: 56px;
}
}
@media (max-width: 768px) {
.svc-name {
font-size: 24px;
}
.svc-eyebrow {
font-size: 10px;
padding: 5px 12px;
}
.svc-desc {
font-size: 14.5px;
}
.svc-features {
gap: 12px;
margin: 24px 0 28px;
}
.svc-features li {
font-size: 14px;
}
.svc-actions {
gap: 10px;
}
.svc-cta {
padding: 12px 18px;
font-size: 12.5px;
}
.svc-expand-btn {
padding: 11px 16px;
font-size: 12px;
}
.svc-svg-wrap {
padding: 20px 18px;
min-height: 260px;
}
.svc-chrome {
padding: 10px 14px;
}
.chrome-url {
font-size: 10px;
margin-left: 12px;
}
}
@media (max-width: 480px) {
.svc-svg-wrap {
padding: 14px 10px;
}
.svc-block {
padding: 48px 0;
gap: 32px;
}
.svc-name {
font-size: 22px;
}
.svc-visual-card {
border-radius: 16px;
}
.svc-detail-list--rich li strong {
font-size: 13px;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.svc-block *,
.svg-svc-1 *, .svg-svc-2 *, .svg-svc-3 *, .svg-svc-4 * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
animation-delay: 0s !important;
transition-duration: 0.01ms !important;
}
.svg-svc-1 .code-line,
.svg-svc-1 .site-comp,
.svg-svc-1 .float-b,
.svg-svc-2 .stage-lbl,
.svg-svc-2 .particle,
.svg-svc-2 .cnt-num,
.svg-svc-2 .s2-channel,
.svg-svc-3 .msg-bbl,
.svg-svc-4 .site-comp {
opacity: 1 !important;
}
.svg-svc-4 .ring {
opacity: 0 !important;
}
.svg-svc-4 .s4-mask {
transform: translateX(97px) !important;
opacity: 0 !important;
}
}
/* ═══════════════════════════════════════
NEW OFFERS : Mini Cards Grid (Dark Theme)
═══════════════════════════════════════ */
/* Override section text for dark bg */
.offers .section-heading.dark {
color: #fff;
}
.offers .section-sub.dark {
color: rgba(255, 255, 255, 0.50);
}
.offers .accent-text {
color: #C8F135;
}
.offers-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 32px;
}
/* ── Mini Card Base ── */
.offer-mini-card {
background: rgba(255, 255, 255, 0.04);
border: 1.5px solid rgba(255, 255, 255, 0.08);
border-radius: 18px;
padding: 28px 24px;
display: flex;
flex-direction: column;
gap: 16px;
transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
position: relative;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.offer-mini-card:hover {
border-color: rgba(200, 241, 53, 0.3);
box-shadow: 0 8px 40px rgba(200, 241, 53, 0.06), 0 2px 16px rgba(0, 0, 0, 0.2);
transform: translateY(-4px);
}
/* ── Sur Devis Card ── */
.offer-mini-devis {
border-color: rgba(200, 241, 53, 0.2);
background: linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, rgba(200, 241, 53, 0.06) 100%);
}
/* ── Header ── */
.offer-mini-header {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.offer-mini-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(200, 241, 53, 0.1);
border: 1px solid rgba(200, 241, 53, 0.15);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.offer-mini-icon svg {
width: 22px;
height: 22px;
}
.offer-mini-title {
font-family: var(--font-heading);
font-size: 17px;
font-weight: 700;
color: #fff;
line-height: 1.2;
}
.offer-mini-badge {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
padding: 3px 10px;
border-radius: 20px;
background: #C8F135;
color: #0A0A0A;
}
.offer-mini-badge.devis {
background: rgba(200, 241, 53, 0.12);
border: 1px solid rgba(200, 241, 53, 0.25);
color: #C8F135;
}
/* ── Description ── */
.offer-mini-desc {
font-family: var(--font-body);
font-size: 13.5px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.50);
flex: 1;
}
/* ── Pricing ── */
.offer-mini-pricing {
padding: 14px 0;
border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.offer-mini-price {
font-family: var(--font-heading);
font-size: 16px;
font-weight: 700;
color: #fff;
margin-bottom: 4px;
}
.offer-asterisk {
color: #C8F135;
font-size: 18px;
vertical-align: super;
line-height: 0;
margin-left: 2px;
}
.offer-mini-maintenance {
font-size: 12px;
color: rgba(255, 255, 255, 0.40);
font-weight: 500;
}
.devis-pricing .offer-mini-price {
color: #C8F135;
background: rgba(10, 10, 10, 0.85);
padding: 6px 14px;
border-radius: 8px;
display: inline-block;
font-size: 14px;
}
.devis-pricing .offer-mini-maintenance {
margin-top: 8px;
font-style: italic;
}
/* ── CTA Button ── */
.offer-mini-cta {
text-align: center;
font-size: 13px;
padding: 11px 16px;
border-radius: 10px;
width: 100%;
justify-content: center;
}
/* ── Asterisk Disclaimer ── */
.offer-disclaimer {
font-family: var(--font-body);
font-size: 12.5px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.40);
text-align: center;
max-width: 700px;
margin: 0 auto 48px;
}
.offer-asterisk-label {
color: #C8F135;
font-size: 18px;
font-weight: 700;
vertical-align: middle;
margin-right: 4px;
background: rgba(10, 10, 10, 0.85);
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
line-height: 1;
}
/* ── Devis Explainer ── */
.offer-devis-explainer {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 20px;
padding: 40px 36px;
margin-bottom: 40px;
}
.offer-explainer-title {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 700;
color: #fff;
text-align: center;
margin-bottom: 28px;
}
.offer-explainer-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
max-width: 700px;
margin: 0 auto;
}
.offer-explainer-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
}
.offer-explainer-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(200, 241, 53, 0.1);
border: 1px solid rgba(200, 241, 53, 0.15);
display: flex;
align-items: center;
justify-content: center;
}
.offer-explainer-icon svg {
width: 22px;
height: 22px;
}
.offer-explainer-item p {
font-family: var(--font-body);
font-size: 13.5px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.55);
text-align: center;
text-wrap: pretty;
max-width: 320px;
margin: 0 auto;
}
.offer-explainer-item p strong {
color: #C8F135;
font-weight: 600;
}
/* ── Dual CTA ── */
.offer-cta-section {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.offer-cta-main {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 15px;
padding: 15px 30px;
}
.offer-cta-email {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
padding: 14px 26px;
color: rgba(255, 255, 255, 0.75);
border-color: rgba(255, 255, 255, 0.15);
}
.offer-cta-email:hover {
border-color: rgba(200, 241, 53, 0.4);
color: #fff;
background: rgba(200, 241, 53, 0.08);
}
/* ── Tablet ── */
@media (max-width: 1024px) {
.offers-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.offer-explainer-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
max-width: 600px;
}
.offer-devis-explainer {
padding: 32px 24px;
}
}
/* ── Mobile ── */
@media (max-width: 768px) {
.offers-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.offer-mini-card {
padding: 24px 20px;
}
.offer-mini-title {
font-size: 16px;
}
.offer-mini-price {
font-size: 15px;
}
.offer-devis-explainer {
padding: 28px 20px;
}
.offer-explainer-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 560px;
}
.offer-explainer-title {
font-size: 19px;
}
.offer-cta-section {
flex-direction: column;
}
.offer-cta-main,
.offer-cta-email {
width: 100%;
justify-content: center;
}
}
@media (max-width: 500px) {
.offer-explainer-grid {
grid-template-columns: 1fr;
gap: 18px;
max-width: 100%;
}
}
/* ═══════════════════════════════════════
SECTION: TYPES DE SITES : Panoramic Cards
═══════════════════════════════════════ */
.site-types {
background: linear-gradient(180deg, #FAFAFA 0%, #F2F2F0 100%);
position: relative;
overflow: hidden;
}
.site-types > .container {
position: relative;
z-index: 1;
}
.site-types .section-sub.dark {
color: rgba(10, 10, 10, 0.55);
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.site-types .accent-text {
background: rgba(10, 10, 10, 0.85);
color: #C8F135;
padding: 3px 10px;
border-radius: 6px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* ── Horizontal Slider ── */
.site-types-slider {
position: relative;
width: 100%;
overflow: hidden;
padding: 24px 0 30px;
}
.site-types-track {
display: flex;
gap: 28px;
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
cursor: grab;
user-select: none;
}
.site-types-track:active {
cursor: grabbing;
}
/* ── Card Base ── */
.site-type-card {
flex: 0 0 380px;
min-height: 240px;
display: flex;
align-items: flex-start;
padding: 40px 36px;
border-radius: 24px;
background: linear-gradient(145deg, #ffffff 0%, #fafaf8 100%);
border: 1.5px solid rgba(10, 10, 10, 0.06);
position: relative;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.04),
0 4px 12px rgba(0, 0, 0, 0.03),
0 12px 32px rgba(0, 0, 0, 0.02);
transition:
border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ── Accent Line (top bar) ── */
.site-type-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
border-radius: 24px 24px 0 0;
background: linear-gradient(90deg,
rgba(200, 241, 53, 0.0) 0%,
rgba(200, 241, 53, 0.6) 50%,
rgba(200, 241, 53, 0.0) 100%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
}
.site-type-card:hover::before {
opacity: 1;
}
.site-type-card:hover {
border-color: rgba(200, 241, 53, 0.35);
transform: translateY(-4px);
box-shadow:
0 4px 12px rgba(200, 241, 53, 0.08),
0 12px 32px rgba(0, 0, 0, 0.06),
0 24px 48px rgba(0, 0, 0, 0.04);
}
/* ── Featured Card (Site One-Page) ── */
.site-type-featured {
background: linear-gradient(145deg,
rgba(200, 241, 53, 0.08) 0%,
#ffffff 40%,
#fafaf8 100%);
border-color: rgba(200, 241, 53, 0.50);
box-shadow:
0 0 0 1px rgba(200, 241, 53, 0.08),
0 1px 3px rgba(0, 0, 0, 0.04),
0 4px 16px rgba(200, 241, 53, 0.06),
0 12px 32px rgba(0, 0, 0, 0.03);
}
.site-type-featured::before {
opacity: 1;
background: linear-gradient(90deg,
rgba(200, 241, 53, 0.1) 0%,
rgba(200, 241, 53, 0.9) 50%,
rgba(200, 241, 53, 0.1) 100%);
}
.site-type-featured:hover {
border-color: rgba(200, 241, 53, 0.70);
transform: translateY(-6px);
box-shadow:
0 0 0 1px rgba(200, 241, 53, 0.12),
0 8px 24px rgba(200, 241, 53, 0.12),
0 20px 48px rgba(0, 0, 0, 0.06);
}
/* ── Pastel Card Colors ── */
/* Card 2: Site Vitrine : soft blue */
.site-type-card:nth-child(2) {
background: linear-gradient(145deg, rgba(59, 130, 246, 0.07) 0%, #ffffff 45%, #fafaf8 100%);
border-color: rgba(59, 130, 246, 0.12);
}
.site-type-card:nth-child(2)::before {
background: linear-gradient(90deg, rgba(59, 130, 246, 0) 0%, rgba(59, 130, 246, 0.5) 50%, rgba(59, 130, 246, 0) 100%);
}
.site-type-card:nth-child(2):hover {
border-color: rgba(59, 130, 246, 0.3);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08), 0 12px 32px rgba(0, 0, 0, 0.05), 0 24px 48px rgba(0, 0, 0, 0.03);
}
/* Card 3: Landing Page : soft coral */
.site-type-card:nth-child(3) {
background: linear-gradient(145deg, rgba(251, 113, 133, 0.07) 0%, #ffffff 45%, #fafaf8 100%);
border-color: rgba(251, 113, 133, 0.12);
}
.site-type-card:nth-child(3)::before {
background: linear-gradient(90deg, rgba(251, 113, 133, 0) 0%, rgba(251, 113, 133, 0.5) 50%, rgba(251, 113, 133, 0) 100%);
}
.site-type-card:nth-child(3):hover {
border-color: rgba(251, 113, 133, 0.3);
box-shadow: 0 4px 12px rgba(251, 113, 133, 0.08), 0 12px 32px rgba(0, 0, 0, 0.05), 0 24px 48px rgba(0, 0, 0, 0.03);
}
/* Card 4: Site E-commerce : soft purple */
.site-type-card:nth-child(4) {
background: linear-gradient(145deg, rgba(168, 85, 247, 0.07) 0%, #ffffff 45%, #fafaf8 100%);
border-color: rgba(168, 85, 247, 0.12);
}
.site-type-card:nth-child(4)::before {
background: linear-gradient(90deg, rgba(168, 85, 247, 0) 0%, rgba(168, 85, 247, 0.5) 50%, rgba(168, 85, 247, 0) 100%);
}
.site-type-card:nth-child(4):hover {
border-color: rgba(168, 85, 247, 0.3);
box-shadow: 0 4px 12px rgba(168, 85, 247, 0.08), 0 12px 32px rgba(0, 0, 0, 0.05), 0 24px 48px rgba(0, 0, 0, 0.03);
}
/* Card 5: Site de Réservation : soft teal */
.site-type-card:nth-child(5) {
background: linear-gradient(145deg, rgba(20, 184, 166, 0.07) 0%, #ffffff 45%, #fafaf8 100%);
border-color: rgba(20, 184, 166, 0.12);
}
.site-type-card:nth-child(5)::before {
background: linear-gradient(90deg, rgba(20, 184, 166, 0) 0%, rgba(20, 184, 166, 0.5) 50%, rgba(20, 184, 166, 0) 100%);
}
.site-type-card:nth-child(5):hover {
border-color: rgba(20, 184, 166, 0.3);
box-shadow: 0 4px 12px rgba(20, 184, 166, 0.08), 0 12px 32px rgba(0, 0, 0, 0.05), 0 24px 48px rgba(0, 0, 0, 0.03);
}
/* Card 6: Site Corporate : soft amber */
.site-type-card:nth-child(6) {
background: linear-gradient(145deg, rgba(245, 158, 11, 0.07) 0%, #ffffff 45%, #fafaf8 100%);
border-color: rgba(245, 158, 11, 0.12);
}
.site-type-card:nth-child(6)::before {
background: linear-gradient(90deg, rgba(245, 158, 11, 0) 0%, rgba(245, 158, 11, 0.5) 50%, rgba(245, 158, 11, 0) 100%);
}
.site-type-card:nth-child(6):hover {
border-color: rgba(245, 158, 11, 0.3);
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.08), 0 12px 32px rgba(0, 0, 0, 0.05), 0 24px 48px rgba(0, 0, 0, 0.03);
}
/* ── Badge ── */
.site-type-badge {
position: absolute;
top: -15px;
left: 32px;
background: #C8F135;
color: #0A0A0A;
font-family: var(--font-heading);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.8px;
padding: 7px 20px;
border-radius: 24px;
box-shadow:
0 2px 8px rgba(200, 241, 53, 0.35),
0 6px 20px rgba(200, 241, 53, 0.2),
0 12px 32px rgba(200, 241, 53, 0.1);
animation: badge-pulse 2.5s ease-in-out infinite;
z-index: 2;
}
.site-type-badge::before {
content: '✦ ';
font-size: 10px;
}
@keyframes badge-pulse {
0%,
100% {
box-shadow:
0 2px 8px rgba(200, 241, 53, 0.35),
0 6px 20px rgba(200, 241, 53, 0.2),
0 12px 32px rgba(200, 241, 53, 0.1);
}
50% {
box-shadow:
0 2px 12px rgba(200, 241, 53, 0.5),
0 8px 28px rgba(200, 241, 53, 0.3),
0 16px 40px rgba(200, 241, 53, 0.15);
}
}
/* ── Card Content ── */
.site-type-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
}
.site-type-title {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 700;
color: #0A0A0A;
line-height: 1.2;
letter-spacing: -0.01em;
}
.site-type-desc {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.8;
color: rgba(10, 10, 10, 0.6);
}
/* (site-type-for and site-type-visual removed, cards are text-only now) */
/* ── CTA ── */
.site-types-cta {
text-align: center;
margin-top: 40px;
}
.site-types-cta-btn {
display: inline-flex;
align-items: center;
gap: 16px;
padding: 18px 36px;
font-size: 15px;
font-weight: 500;
border-radius: 50px;
background: #0A0A0A;
color: rgba(255, 255, 255, 0.85);
border: 1.5px solid rgba(200, 241, 53, 0.25);
text-decoration: none;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.1),
0 8px 24px rgba(0, 0, 0, 0.06);
}
.cta-btn-label {
font-weight: 400;
opacity: 0.7;
font-size: 14px;
}
.cta-btn-action {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
color: #C8F135;
font-size: 15px;
padding-left: 16px;
border-left: 1px solid rgba(200, 241, 53, 0.25);
}
.cta-btn-action svg {
transition: transform 0.3s ease;
}
.site-types-cta-btn:hover {
background: #C8F135;
color: #0A0A0A;
border-color: #C8F135;
transform: translateY(-3px);
box-shadow:
0 4px 12px rgba(200, 241, 53, 0.2),
0 12px 32px rgba(200, 241, 53, 0.15);
}
.site-types-cta-btn:hover .cta-btn-label {
opacity: 1;
color: #0A0A0A;
}
.site-types-cta-btn:hover .cta-btn-action {
color: #0A0A0A;
border-left-color: rgba(10, 10, 10, 0.2);
}
.site-types-cta-btn:hover .cta-btn-action svg {
transform: translateX(4px);
}
/* ── Navigation Controls ── */
.site-types-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 32px;
}
.site-types-arrow {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1.5px solid rgba(10, 10, 10, 0.15);
background: rgba(10, 10, 10, 0.06);
color: rgba(10, 10, 10, 0.6);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
backdrop-filter: blur(4px);
padding: 0;
}
.site-types-arrow:hover {
border-color: rgba(10, 10, 10, 0.3);
background: rgba(10, 10, 10, 0.1);
color: var(--black);
transform: scale(1.08);
}
.site-types-arrow:active {
transform: scale(0.95);
}
.site-types-arrow svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.site-types-dots-nav {
display: flex;
gap: 10px;
}
.site-types-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(10, 10, 10, 0.15);
border: none;
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
}
.site-types-dot:hover {
background: rgba(10, 10, 10, 0.3);
}
.site-types-dot.active {
background: #C8F135;
transform: scale(1.3);
box-shadow: 0 0 12px rgba(200, 241, 53, 0.5);
}
/* ── Tablet ── */
@media (max-width: 1024px) {
.site-type-card {
flex: 0 0 340px;
min-height: 220px;
padding: 32px 28px;
}
.site-type-title {
font-size: 20px;
}
.site-type-desc {
font-size: 14.5px;
}
}
/* ── Mobile ── */
@media (max-width: 768px) {
.site-type-card {
flex: 0 0 88%;
max-width: 88%;
min-height: auto;
padding: 28px 24px;
}
.site-types-track {
gap: 16px;
}
.site-type-title {
font-size: 19px;
}
.site-type-desc {
font-size: 14px;
line-height: 1.7;
}
.site-type-card:hover {
transform: none;
}
.site-type-badge {
font-size: 11px;
padding: 5px 14px;
top: -12px;
left: 20px;
letter-spacing: 1.5px;
}
.site-type-badge::before {
font-size: 9px;
}
.site-types-cta-btn {
width: 100%;
flex-direction: column;
gap: 8px;
padding: 16px 28px;
border-radius: 16px;
text-align: center;
}
.cta-btn-label {
font-size: 13px;
}
.cta-btn-action {
padding-left: 0;
border-left: none;
padding-top: 8px;
border-top: 1px solid rgba(200, 241, 53, 0.2);
font-size: 14px;
justify-content: center;
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
html {
scroll-behavior: auto;
}
.reveal {
opacity: 1;
transform: none;
}
.hero-title-line1 {
opacity: 1;
animation: none;
transform: none;
}
.hero-carousel-wrapper {
opacity: 1;
animation: none;
}
.hero-chip-exit,
.hero-chip-enter {
animation: none;
}
.hero-gradient {
animation: none;
}
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
TILT 3D + SHINE — cartes interactives
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
/* Perspective sur les wrappers parents des cartes */
.services-grid,
.offers-stack,
.portfolio-slider,
.testimonials-grid {
perspective: 1000px;
}
/* Toutes les cartes ciblées */
.service-card,
.portfolio-item {
transform-style: preserve-3d;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Élément shine injecté dynamiquement par JS */
.card-shine {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 2;
opacity: 0;
transition: opacity 0.4s ease;
background: radial-gradient(circle at 50% 50%,
rgba(200, 241, 53, 0.08) 0%,
transparent 70%);
mix-blend-mode: screen;
}
.service-card:hover .card-shine,
.portfolio-item:hover .card-shine {
opacity: 1;
}
/* No shadow on hover */
.service-card:hover {
box-shadow: none !important;
}
/* Neutralisation totale du tilt sur les cartes pricing */
.offer-card {
transform-style: flat !important;
transform: none !important;
transition: box-shadow 0.4s ease,
border-color 0.4s ease !important;
will-change: auto !important;
}
/* Supprimer le shine injecté visuellement sur offer-card */
.offer-card .card-shine {
display: none !important;
}
/* Conserver uniquement le glow de bordure au hover — sans transform */
.offer-card:hover {
transform: none !important;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35),
0 0 0 1px rgba(200, 241, 53, 0.1);
}
.offer-card.featured:hover {
transform: none !important;
box-shadow: 0 12px 50px rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(200, 241, 53, 0.22),
0 0 40px rgba(200, 241, 53, 0.06);
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
RESPONSIVE — TABLET
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
@media (max-width: 1024px) {
.section-heading {
font-size: clamp(32px, 5vw, 46px);
}
.hero-3d-globe {
width: 350px;
height: 350px;
}
/* Carousel tablet */
.hero-title {
font-size: clamp(56px, 7.5vw, 72px);
}
.hero-centered {
max-width: 95%;
}
.hero-carousel-wrapper {
height: 54px;
margin-top: 22px;
}
.hero-chip {
padding: 11px 22px;
box-shadow:
0 0 14px rgba(200, 241, 53, 0.45),
0 0 40px rgba(200, 241, 53, 0.2),
0 0 70px rgba(200, 241, 53, 0.08);
}
.hero-chip-icon {
width: 22px;
height: 22px;
}
.hero-chip-text {
font-size: clamp(18px, 2.7vw, 22px);
}
.hero-subtitle {
font-size: 21px;
max-width: 700px;
line-height: 1.55;
}
.dotmatrix-band {
margin: 30px 0;
}
.dotmatrix-band canvas {
height: 162px;
}
/* Service cards tablet : thinner black bands */
.services .accent-text {
padding: 2px 8px;
line-height: 1.4;
}
.site-types .accent-text {
padding: 2px 8px;
line-height: 1.4;
}
.service-card:hover .service-title {
padding: 4px 11px;
margin: -4px -11px;
}
/* Problem section tablet */
.problem-card {
flex: 0 0 92%;
max-width: 92%;
padding: 48px 36px 36px;
gap: 28px;
min-height: 260px;
border-radius: 20px;
}
.problem-card-badge {
top: 16px;
left: 20px;
font-size: 9.5px;
padding: 6px 11px 6px 9px;
letter-spacing: 1.6px;
gap: 7px;
}
.problem-card-badge-icon {
width: 14px;
height: 14px;
}
/* .problem-card-content::before retiree globalement (cf. ligne ~2619) */
.problem-card::after {
top: -100px;
right: -100px;
width: 280px;
height: 280px;
}
.problem-card-visual {
flex: 0 0 202px;
width: 202px;
height: 202px;
}
.problem-intro {
font-size: 18px;
}
.services-grid,
.testimonials-grid {
grid-template-columns: repeat(2, 1fr);
}
.offers-stack {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.offers-stack .offer-card:last-child {
grid-column: 1 / -1;
max-width: 480px;
margin: 0 auto;
width: 100%;
}
.nav-links {
gap: 4px;
padding: 4px 5px;
}
.nav-link {
font-size: 12px;
padding: 7px 12px;
}
.nav-cta {
font-size: 11px;
padding: 7px 14px;
}
.footer-hero {
flex-direction: column;
align-items: flex-start;
gap: 32px;
}
.footer-hero-cta {
align-items: flex-start;
}
.footer-nav {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.about-grid {
gap: 40px;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
/* ── Boutons statiques sur tablette — léger zoom au touché uniquement ── */
.btn-primary:hover,
.btn-outline:hover,
.offer-cta-btn:hover,
.service-link:hover,
.portfolio-link:hover,
.hero-buttons .btn:hover,
.services .btn-primary:hover,
.offers .btn-primary:hover,
.faq .btn-primary:hover,
.testimonials .btn-primary:hover,
.services .btn-outline:hover,
.offers .btn-outline:hover,
.faq .btn-outline:hover,
.testimonials .btn-outline:hover,
.offer-card:hover .offer-cta-btn {
transform: none !important;
box-shadow: none !important;
animation: none !important;
}
.btn-primary:active,
.btn-outline:active,
.offer-cta-btn:active,
.service-link:active,
.portfolio-link:active,
.hero-buttons .btn:active,
.offer-card:active .offer-cta-btn {
transform: scale(1.04) !important;
transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
animation: none !important;
}
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
RESPONSIVE — MOBILE
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
/* ── Tablet small: switch to hamburger ── */
/* (Logo, hamburger et navbar mobile sont forces dans le bloc
@media (max-width: 1024px) en haut du fichier avec !important) */
@media (max-width: 768px) {
.container {
padding: 0 20px;
}
.section-padding {
padding: 70px 0;
}
.logo-img {
height: 80px;
}
.nav-logo {
height: 80px;
}
.logo-footer {
height: 95px;
}
.hero-3d-globe {
width: 260px;
height: 260px;
opacity: 0.7;
}
.dotmatrix-band {
margin: 24px 0;
}
.dotmatrix-band canvas {
height: 122px;
}
.hero {
min-height: 100svh;
padding-top: 125px;
}
.hero-title {
font-size: clamp(26px, 7vw, 40px);
letter-spacing: -0.02em;
margin-bottom: 10px;
line-height: 1.08;
}
/* V10 : harmonisation taille H1 hero sur mobile pour toutes les autres pages
(services, a-propos, portfolio, contact, mentions, auteur, article, 404).
Utilise exactement la meme echelle clamp que le H1 du hero principal. */
.svc-page-title,
.tun-hero-title,
.sw-hero-title,
.ia-hero-title,
.brd-hero-title,
.dash-hero-title,
.abt-hero-title,
.auth-hero-text h1,
.art-title,
.nf-title {
font-size: clamp(26px, 7vw, 40px) !important;
letter-spacing: -0.02em !important;
line-height: 1.08 !important;
}
br.hero-br-desktop {
display: none;
}
.hero-carousel-wrapper {
height: 45px;
margin-top: 18px;
}
.hero-chip {
padding: 9px 18px;
gap: 9px;
box-shadow:
0 0 14px rgba(200, 241, 53, 0.45),
0 0 35px rgba(200, 241, 53, 0.2),
0 0 60px rgba(200, 241, 53, 0.08);
}
.hero-chip-icon {
width: 18px;
height: 18px;
}
.hero-chip-text {
font-size: clamp(14px, 3.6vw, 16px);
white-space: nowrap;
}
.hero .container {
padding: 0 16px;
}
.hero-subtitle {
font-size: 17px;
max-width: 100%;
line-height: 1.6;
margin-bottom: 28px;
}
.hero-subtitle-desktop {
display: none;
}
.hero-subtitle-mobile {
display: block;
}
/* Problem section mobile */
.problem-card {
flex: 0 0 92%;
max-width: 92%;
flex-direction: column;
padding: 44px 24px 28px;
gap: 16px;
min-height: auto;
border-radius: 18px;
}
.problem-card-badge {
top: 14px;
left: 16px;
font-size: 9px;
padding: 5px 10px 5px 8px;
letter-spacing: 1.4px;
gap: 6px;
}
.problem-card-badge-icon {
width: 13px;
height: 13px;
}
/* Masquer la barre verticale accent (layout colonne sur mobile) */
.problem-card-content::before {
display: none;
}
.problem-card::after {
top: -80px;
right: -80px;
width: 220px;
height: 220px;
}
.problem-card-visual {
flex: 0 0 177px;
width: 177px;
height: 177px;
order: -1;
}
.problem-card-title {
font-size: 22px;
}
.problem-card-text {
font-size: 14px;
}
.problem-intro {
font-size: 15px;
line-height: 1.6;
}
.problem-intro-2 {
margin-bottom: 36px;
}
.problem-carousel-track {
gap: 16px;
}
.hero-buttons {
flex-direction: column;
width: 100%;
align-items: center;
margin-top: -4px;
padding-bottom: 36px;
gap: 10px;
}
.hero-buttons .btn {
width: 90%;
/* +20% sur la police mobile (12px -> 14.4px ~ 14px) pour meilleure lisibilite */
font-size: 14px;
}
/* Bouton outline mobile plus visible (border + fond plus marques) */
.hero-buttons .btn-outline {
border-color: rgba(200, 241, 53, 0.45);
background: rgba(200, 241, 53, 0.06);
color: var(--white);
}
.hero-buttons .btn:hover {
transform: none !important;
box-shadow: none !important;
}
.hero-buttons .btn:active {
transform: scale(1.03) !important;
transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
/* Boutons mobile : taille reduite -20% (correction V8 mai 2026) */
.btn {
font-size: 11px;
padding: 10px 13px;
min-height: 31px;
gap: 5px;
border-radius: 8px;
}
/* ── Boutons statiques sur mobile — léger zoom au touché uniquement ── */
.btn-primary:hover,
.btn-outline:hover,
.offer-cta-btn:hover,
.service-link:hover,
.portfolio-link:hover,
.hero-buttons .btn:hover,
.services .btn-primary:hover,
.offers .btn-primary:hover,
.faq .btn-primary:hover,
.testimonials .btn-primary:hover,
.services .btn-outline:hover,
.offers .btn-outline:hover,
.faq .btn-outline:hover,
.testimonials .btn-outline:hover,
.offer-card:hover .offer-cta-btn {
transform: none !important;
box-shadow: none !important;
animation: none !important;
}
.btn-primary:active,
.btn-outline:active,
.offer-cta-btn:active,
.service-link:active,
.portfolio-link:active,
.hero-buttons .btn:active,
.offer-card:active .offer-cta-btn {
transform: scale(1.04) !important;
transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
animation: none !important;
}
.hero-orb.orb-1 {
width: 200px;
height: 200px;
}
.hero-orb.orb-2 {
width: 120px;
height: 120px;
}
.hero-orb.orb-3 {
display: none;
}
.hero-ring {
display: none;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.services-grid,
.testimonials-grid {
grid-template-columns: 1fr;
}
/* Mobile accent text : thinner black band */
.services .accent-text {
padding: 2px 7px;
line-height: 1.4;
}
.site-types .accent-text {
padding: 2px 7px;
line-height: 1.4;
}
/* ── SERVICE CARDS MOBILE ── */
.service-card {
padding: 28px 22px 28px;
border-radius: 16px;
transform: none !important;
transform-style: flat !important;
/* NO animations · cards are static and always visible */
opacity: 1 !important;
}
.service-title {
font-size: 19px;
/* Titre vert citron sur bloc noir · TOUJOURS sur mobile */
background: rgba(10, 10, 10, 0.85) !important;
color: #C8F135 !important;
padding: 6px 14px !important;
margin: -6px -14px !important;
border-radius: 8px !important;
display: inline !important;
-webkit-box-decoration-break: clone !important;
box-decoration-break: clone !important;
}
.service-card:hover .service-title {
padding: 6px 14px !important;
margin: -6px -14px !important;
}
/* Titre vert citron même quand la card est ouverte */
.service-card.expanded .service-title,
.service-card.expanded:hover .service-title {
background: rgba(10, 10, 10, 0.85) !important;
color: #C8F135 !important;
padding: 6px 14px !important;
margin: -6px -14px !important;
}
.service-text {
font-size: 14px;
line-height: 1.7;
}
.service-expand-btn {
padding: 12px 20px;
}
.expand-label {
font-size: 13px;
}
.service-detail-title {
font-size: 11px;
padding: 10px 14px;
}
.service-detail-list li {
font-size: 13px;
padding-left: 26px;
}
.service-detail-list li::before {
width: 14px;
height: 14px;
border-radius: 4px;
top: 5px;
}
.service-detail-list li::after {
left: 4px;
top: 8px;
width: 6px;
height: 4px;
}
.service-detail-note {
font-size: 12px;
padding: 12px 14px;
}
/* Croix de fermeture : positionnée en haut à droite, ne chevauche plus le titre */
.service-close-btn {
width: 34px;
height: 34px;
font-size: 14px;
top: 10px;
right: 10px;
background: rgba(10, 10, 10, 0.90) !important;
border: 1.5px solid rgba(200, 241, 53, 0.40) !important;
z-index: 30 !important;
}
.service-card.expanded {
position: relative !important;
top: auto !important;
left: auto !important;
transform: none !important;
width: auto !important;
max-width: none !important;
max-height: none !important;
overflow-y: visible !important;
animation: none !important;
padding: 44px 22px 28px !important;
z-index: 10 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
opacity: 1 !important;
}
.service-card.expanded .service-detail {
max-height: 5000px !important;
opacity: 1 !important;
margin-top: 20px !important;
transition: max-height 0.4s ease, opacity 0.3s ease;
}
.service-card.closing {
animation: none !important;
}
.service-overlay-backdrop {
display: none !important;
}
.about-grid,
.contact-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.about-photo {
max-width: 420px;
margin: 0 auto;
}
/* ── OFFERS MOBILE FIX ── */
.offers-stack {
grid-template-columns: 1fr;
max-width: 100%;
gap: 16px;
}
.offers-stack .offer-card:last-child {
grid-column: auto;
max-width: 100%;
margin: 0;
}
.offer-card {
border-radius: 16px;
overflow: hidden;
}
.offer-top {
flex-direction: column;
padding: 20px 18px;
gap: 12px;
}
.offer-top>div:first-child {
min-width: 0;
}
.offer-badge {
font-size: 8px;
padding: 5px 10px;
letter-spacing: 1px;
}
.offer-name {
font-size: 19px;
word-wrap: break-word;
overflow-wrap: break-word;
}
.offer-tagline {
font-size: 12.5px;
line-height: 1.55;
max-width: 100%;
}
.offer-price-block {
text-align: left;
padding: 0 18px 14px;
}
.offer-price {
font-size: 17px;
word-wrap: break-word;
overflow-wrap: break-word;
}
.offer-price-note {
font-size: 10.5px;
}
.offer-maintenance {
font-size: 10px;
padding: 4px 10px;
}
.offer-divider {
margin: 0 18px;
}
.offer-bottom {
flex-direction: column;
padding: 16px 18px 20px;
gap: 16px;
}
.offer-col-title {
font-size: 9px;
margin-bottom: 10px;
}
.offer-list li {
font-size: 12px;
gap: 8px;
}
.offer-list li::before {
width: 16px;
height: 16px;
font-size: 9px;
}
.offer-cta-row {
padding: 0 18px 20px;
}
.offer-cta-btn {
font-size: 13px;
padding: 11px 12px;
}
/* Hide offer-cible if any remain */
.offer-cible {
display: none !important;
}
/* .about-values : 2x2 sur tablette (grid 1fr 1fr par defaut), 1fr sur smartphone (voir plus bas) */
.form-row {
grid-template-columns: 1fr;
}
.contact-form-wrap {
padding: 28px 20px;
}
/* ── FOOTER MOBILE — Layout redesigné ── */
.footer {
padding: 60px 0 28px;
}
.footer-glow {
width: 400px;
height: 250px;
top: -120px;
}
.footer-hero {
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 28px;
padding-bottom: 36px;
margin-bottom: 36px;
}
.footer-hero-brand {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.footer-brand-text {
max-width: 320px;
text-align: left;
}
.footer-hero-cta {
align-items: center;
width: 100%;
}
.footer-cta-btn {
width: 100%;
justify-content: center;
font-size: 13px;
padding: 11px 14px;
}
.footer-cta-note {
text-align: center;
}
.footer-nav {
grid-template-columns: 1fr 1fr;
gap: 32px 20px;
padding-bottom: 36px;
margin-bottom: 32px;
}
/* La 3e colonne (Contact) prend toute la largeur */
.footer-nav-col:last-child {
grid-column: 1 / -1;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.footer-col-title {
font-size: 10px;
margin-bottom: 16px;
}
.footer-bottom {
flex-direction: column;
gap: 20px;
text-align: center;
}
.footer-bottom-left {
flex-direction: column;
gap: 12px;
}
.footer-bottom-right {
justify-content: center;
}
.footer-socials {
justify-content: center;
}
.comparison-table th,
.comparison-table td {
padding: 12px 10px;
font-size: 12px;
}
.comparison-title {
font-size: 15px;
padding: 20px 16px;
}
.section-heading {
font-size: clamp(28px, 6vw, 40px);
}
}
@media (max-width: 375px) {
.container {
padding: 0 14px;
}
.logo-img {
height: 68px;
}
.nav-logo {
height: 68px;
}
.logo-footer {
height: 76px;
}
.stat-number {
font-size: 16px;
}
.stat-label {
font-size: 12px;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.stat-item {
padding: 16px 12px;
}
.offer-top {
padding: 16px 14px;
}
.offer-bottom {
padding: 14px 14px 20px;
}
.offer-name {
font-size: 18px;
}
.offer-price {
font-size: 16px;
}
.offer-divider {
margin: 0 14px;
}
.offer-cta-row {
padding: 0 14px 20px;
}
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
CUSTOM CURSOR — desktop pointer:fine uniquement
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
/* -- Footer: tablette + desktop (+20% tout le contenu + logo agrandi) -- */
@media (min-width: 768px) {
.footer {
padding: 96px 0 38px;
}
.logo-footer {
height: 154px;
}
.footer-brand-text {
font-size: 17px;
max-width: 430px;
}
.footer-hero {
gap: 48px;
padding-bottom: 58px;
margin-bottom: 58px;
}
.footer-nav {
gap: 48px;
padding-bottom: 58px;
margin-bottom: 48px;
}
.footer-col-title {
font-size: 13px;
letter-spacing: 2.4px;
margin-bottom: 24px;
}
.footer-col-title::after {
width: 29px;
}
.footer-links {
gap: 14px;
}
.footer-link {
font-size: 17px;
}
.footer-link-icon {
gap: 12px;
}
.footer-link-icon svg {
width: 24px;
height: 24px;
}
.footer-badge {
font-size: 13px;
padding: 7px 17px;
}
.footer-copy {
font-size: 16px;
}
}
/* =================================================================
SECTION TECHNOLOGIES : Double flux défilant
================================================================= */
.section-tech {
position: relative;
background: #f5f5f0;
padding: 100px 0;
overflow: hidden;
}
/* Quadrillage moderne subtil · tech + FAQ + site-types + process */
.section-tech::before,
.faq::before,
.site-types::before,
.process::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
background-size: 48px 48px;
pointer-events: none;
z-index: 0;
}
/* Vignette désactivée sur fond blanc */
.section-tech::after {
display: none;
}
.tech-header {
text-align: center;
margin-bottom: 70px;
position: relative;
z-index: 1;
padding: 0 24px;
}
.tech-eyebrow {
display: inline-block;
font-family: 'Chakra Petch', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.45);
margin-bottom: 10px;
}
.tech-title {
font-family: var(--font-heading);
font-size: clamp(28px, 5vw, 46px);
font-weight: 700;
color: #0a0a0a;
line-height: 1.25;
letter-spacing: -0.02em;
}
.tech-accent {
display: inline;
background: rgba(10, 10, 10, 0.85);
color: #C8F135;
padding: 3px 10px;
border-radius: 6px;
font-style: normal;
font-size: clamp(28px, 5vw, 46px);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
line-height: 1.6;
}
.tech-subtitle {
font-family: 'Inter', sans-serif;
font-size: 16px;
color: rgba(0, 0, 0, 0.55);
text-align: center;
margin-top: 16px;
line-height: 1.6;
}
.tech-bands-wrapper {
position: relative;
display: flex;
flex-direction: column;
gap: 20px;
}
.tech-fade {
position: absolute;
top: 0;
bottom: 0;
width: 140px;
z-index: 10;
pointer-events: none;
}
.tech-fade-left {
left: 0;
background: linear-gradient(to right, #f5f5f0 0%, transparent 100%);
}
.tech-fade-right {
right: 0;
background: linear-gradient(to left, #f5f5f0 0%, transparent 100%);
}
.tech-band {
overflow: hidden;
width: 100%;
}
.tech-track {
display: flex;
gap: 18px;
width: max-content;
padding: 10px 0;
will-change: transform;
}
.tech-band--forward .tech-track {
animation: techScrollForward 35s linear infinite;
}
.tech-band--reverse .tech-track {
animation: techScrollReverse 42s linear infinite;
}
@keyframes techScrollForward {
from {
transform: translateX(0);
}
to {
transform: translateX(-33.333%);
}
}
@keyframes techScrollReverse {
from {
transform: translateX(-33.333%);
}
to {
transform: translateX(0);
}
}
.tech-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
min-width: 228px;
height: 192px;
padding: 26px 36px;
background: #C8F135;
border: 1.5px solid rgba(10, 10, 10, 0.25);
border-radius: 22px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease;
cursor: default;
flex-shrink: 0;
}
.tech-card:hover {
transform: translateY(-5px) scale(1.05);
background: #b8e020;
border-color: rgba(10, 10, 10, 0.4);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}
.tech-logo {
width: 75px;
height: 75px;
object-fit: contain;
display: block;
user-select: none;
-webkit-user-drag: none;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12));
}
.tech-name {
font-family: 'Chakra Petch', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.6);
white-space: nowrap;
}
@media (max-width: 768px) {
.section-tech {
padding: 60px 0;
}
.tech-header {
margin-bottom: 36px;
padding: 0 16px;
}
.tech-accent {
padding: 2px 8px;
border-radius: 6px;
}
.tech-bands-wrapper {
gap: 10px;
}
.tech-fade {
width: 40px;
}
.tech-card {
min-width: 138px;
height: 115px;
gap: 8px;
padding: 13px 15px;
border-radius: 16px;
}
.tech-logo {
width: 45px;
height: 45px;
}
.tech-name {
font-size: 10px;
}
.tech-band--forward .tech-track {
animation-duration: 28s;
}
.tech-band--reverse .tech-track {
animation-duration: 34s;
}
}
/* ─── Mobile + Tablette : photo placee juste apres le titre ─── */
@media (max-width: 900px) {
.about-grid {
display: flex;
flex-direction: column;
gap: 30px;
}
/* display: contents aplatit les enfants dans le flex parent */
.about-content {
display: contents;
}
/* Ordre : titre -> photo -> paragraphes -> valeurs */
.about-name {
order: 1;
align-self: flex-start;
}
.about-photo {
order: 2;
}
.about-content .about-text:nth-of-type(1) {
order: 3;
}
.about-content .about-text:nth-of-type(2) {
order: 4;
}
.about-values {
order: 5;
}
}
/* ─── Smartphone : about-values repasse en 1 colonne ─── */
@media (max-width: 576px) {
.about-values {
grid-template-columns: 1fr;
}
}
/* ─── Contact section mobile fix ─── */
@media (max-width: 576px) {
.contact-sub {
word-break: break-word;
overflow-wrap: break-word;
}
.contact-method-value {
font-size: 13px;
word-break: break-all;
overflow-wrap: break-word;
}
.contact-method {
padding: 14px 16px;
gap: 12px;
}
.contact-method-icon {
width: 40px;
height: 40px;
}
}
@media (max-width: 480px) {
.section-tech {
padding: 50px 0;
}
.tech-header {
margin-bottom: 28px;
}
.tech-accent {
padding: 2px 8px;
}
.tech-card {
min-width: 114px;
height: 96px;
gap: 6px;
padding: 10px 12px;
border-radius: 14px;
}
.tech-logo {
width: 36px;
height: 36px;
}
.tech-name {
font-size: 9px;
letter-spacing: 0.04em;
}
.tech-fade {
width: 25px;
}
.tech-track {
gap: 10px;
}
}
@media (prefers-reduced-motion: reduce) {
.tech-band--forward .tech-track,
.tech-band--reverse .tech-track {
animation: none;
}
.tech-track {
flex-wrap: wrap;
justify-content: center;
width: 100%;
padding: 0 20px;
}
}
/* =================================================================
SECTION PROCESSUS DE TRAVAIL
================================================================= */
.process {
background: #f9faf5;
position: relative;
overflow: hidden;
}
.process > .container {
position: relative;
z-index: 1;
}
/* ─── Heading processus ─── */
.process-heading {
text-align: center;
margin-bottom: 60px;
}
.process-title {
font-family: 'Chakra Petch', sans-serif;
font-size: clamp(28px, 5vw, 46px);
font-weight: 700;
color: #0a0a0a;
line-height: 1.25;
letter-spacing: -0.02em;
margin-bottom: 18px;
}
.process-accent {
display: inline-block;
background: #0a0a0a;
color: var(--accent);
padding: 2px 18px 6px;
border-radius: 8px;
font-style: normal;
}
.process-subtitle {
font-family: 'Inter', sans-serif;
font-size: 16px;
line-height: 1.7;
color: rgba(0, 0, 0, 0.55);
max-width: 620px;
margin: 0 auto;
text-align: center;
}
.process-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px 60px;
max-width: 1100px;
margin: 0 auto;
}
.process-column {
display: flex;
flex-direction: column;
gap: 0;
}
/* ─── Étape individuelle ─── */
.process-step {
position: relative;
display: flex;
align-items: flex-start;
gap: 0;
flex-direction: column;
padding-left: 56px;
padding-bottom: 12px;
}
/* Numéro en cercle */
.step-number {
position: absolute;
left: 0;
top: 0;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--accent);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
box-shadow: 0 4px 14px rgba(200, 241, 53, 0.35);
}
.step-number span {
font-family: 'Chakra Petch', sans-serif;
font-size: 18px;
font-weight: 700;
color: #0a0a0a;
line-height: 1;
}
/* Ligne de connexion verticale */
.step-connector {
position: absolute;
left: 21px;
top: 44px;
width: 2px;
bottom: 0;
background: linear-gradient(to bottom, var(--accent), rgba(200, 241, 53, 0.15));
z-index: 1;
}
/* ─── Carte d'étape ─── */
.step-card {
width: 100%;
padding: 28px 26px;
border-radius: 18px;
border: 1px solid rgba(0, 0, 0, 0.06);
display: flex;
align-items: flex-start;
gap: 18px;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.step-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
/* ─── Couleurs pastels harmonisées ─── */
.step-pastel-1 {
background: #f0fdd4;
}
.step-pastel-2 {
background: #e8f5e9;
}
.step-pastel-3 {
background: #fff8e1;
}
.step-pastel-4 {
background: #e3f2fd;
}
.step-pastel-5 {
background: #fce4ec;
}
.step-pastel-6 {
background: #ede7f6;
}
.step-pastel-7 {
background: #e0f7fa;
}
.step-pastel-8 {
background: #e8f5e9;
}
/* ─── Icône SVG ─── */
.step-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(0, 0, 0, 0.06);
display: flex;
align-items: center;
justify-content: center;
color: #0a0a0a;
}
.step-icon svg {
width: 22px;
height: 22px;
}
/* ─── Contenu texte ─── */
.step-title {
font-family: 'Chakra Petch', sans-serif;
font-size: 17px;
font-weight: 700;
color: #0a0a0a;
margin-bottom: 6px;
line-height: 1.3;
}
.step-desc {
font-size: 14px;
line-height: 1.6;
color: rgba(0, 0, 0, 0.6);
}
/* ─── CTA Final ─── */
.process-cta {
text-align: center;
margin-top: 60px;
}
.process-cta-btn {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 18px 38px;
background: #0a0a0a;
color: #fff;
font-family: 'Chakra Petch', sans-serif;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.02em;
text-decoration: none;
border-radius: 60px;
border: 1px solid rgba(200, 241, 53, 0.15);
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(200, 241, 53, 0.08);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
}
.process-cta-btn::before {
content: '';
position: absolute;
inset: 0;
border-radius: 60px;
background: linear-gradient(135deg, rgba(200, 241, 53, 0.12) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.4s ease;
}
.process-cta-btn:hover {
transform: translateY(-3px);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.2),
0 0 30px rgba(200, 241, 53, 0.15),
0 0 0 1px rgba(200, 241, 53, 0.25);
border-color: rgba(200, 241, 53, 0.35);
color: #fff;
}
.process-cta-btn:hover::before {
opacity: 1;
}
.cta-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(200, 241, 53, 0.15);
color: var(--accent);
flex-shrink: 0;
transition: background 0.3s ease, transform 0.3s ease;
}
.cta-icon svg {
width: 18px;
height: 18px;
}
.process-cta-btn:hover .cta-icon {
background: rgba(200, 241, 53, 0.25);
transform: scale(1.1);
}
.cta-label {
position: relative;
z-index: 1;
}
.cta-arrow {
display: flex;
align-items: center;
color: var(--accent);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-arrow svg {
width: 18px;
height: 18px;
}
.process-cta-btn:hover .cta-arrow {
transform: translateX(5px);
}
/* ─── Stagger animation delays ─── */
.process-step[data-step="1"] {
transition-delay: 0s;
}
.process-step[data-step="2"] {
transition-delay: 0.1s;
}
.process-step[data-step="3"] {
transition-delay: 0.2s;
}
.process-step[data-step="4"] {
transition-delay: 0.3s;
}
.process-step[data-step="5"] {
transition-delay: 0s;
}
.process-step[data-step="6"] {
transition-delay: 0.1s;
}
.process-step[data-step="7"] {
transition-delay: 0.2s;
}
.process-step[data-step="8"] {
transition-delay: 0.3s;
}
/* ─── Responsive ─── */
@media (max-width: 768px) {
.process-heading {
margin-bottom: 40px;
}
.process-accent {
padding: 2px 14px 4px;
border-radius: 6px;
}
.process-subtitle {
font-size: 14px;
max-width: 90%;
}
.process-grid {
grid-template-columns: 1fr;
gap: 0;
}
.process-step {
padding-left: 48px;
}
.step-number {
width: 38px;
height: 38px;
}
.step-number span {
font-size: 16px;
}
.step-connector {
left: 18px;
top: 38px;
}
.step-card {
padding: 22px 20px;
border-radius: 14px;
gap: 14px;
}
.step-icon {
width: 38px;
height: 38px;
border-radius: 10px;
}
.step-icon svg {
width: 18px;
height: 18px;
}
.step-title {
font-size: 15px;
}
.step-desc {
font-size: 13px;
}
.process-cta {
margin-top: 40px;
}
.process-cta-btn {
padding: 14px 28px;
font-size: 14px;
gap: 10px;
}
.cta-icon {
width: 32px;
height: 32px;
}
.cta-icon svg {
width: 16px;
height: 16px;
}
}
/* ══════════════════════════════════════════════════════════
SVC CAROUSEL · Bloc S1 (remplace l'ancien SVG 1)
══════════════════════════════════════════════════════════ */
.svc-carousel {
width: 100%;
position: relative;
overflow: hidden;
padding-bottom: 20px;
touch-action: pan-y;
}
.svc-carousel-track {
display: flex;
transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.svc-slide {
flex: 0 0 100%;
width: 100%;
display: flex;
flex-direction: column;
gap: 0;
}
/* Zone preview (mockup schématique) */
.svc-slide-preview {
background: rgba(0, 0, 0, 0.55);
border-radius: 10px 10px 0 0;
padding: 16px;
min-height: 200px;
border: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: none;
}
/* Zone label (titre + description) */
.svc-slide-label {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
border-top: 2px solid var(--accent);
border-radius: 0 0 10px 10px;
padding: 16px 18px;
display: flex;
align-items: flex-start;
gap: 14px;
}
.svc-slide-tag {
font-family: var(--font-heading);
font-size: 11px;
font-weight: 700;
color: var(--accent);
background: rgba(200, 241, 53, 0.1);
border: 1px solid rgba(200, 241, 53, 0.2);
padding: 4px 10px;
border-radius: 20px;
flex-shrink: 0;
margin-top: 2px;
letter-spacing: 0.05em;
}
.svc-slide-info {
flex: 1;
min-width: 0;
}
.svc-slide-name {
font-family: var(--font-heading);
font-size: 14px;
font-weight: 700;
color: var(--white);
margin-bottom: 4px;
}
.svc-slide-desc {
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
line-height: 1.55;
}
/* Dots navigation */
.svc-carousel-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 16px;
}
.svc-dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.18);
cursor: pointer;
padding: 0;
transition: background 0.3s ease, transform 0.3s ease;
}
.svc-dot.active {
background: var(--accent);
transform: scale(1.25);
}
.svc-dot:hover:not(.active) {
background: rgba(255, 255, 255, 0.35);
}
/* ── Éléments mockup génériques ── */
.svc-preview-navbar {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.svc-preview-logo {
width: 32px;
height: 8px;
border-radius: 3px;
background: var(--accent);
opacity: 0.7;
flex-shrink: 0;
}
.svc-preview-navlinks {
display: flex;
gap: 6px;
flex: 1;
}
.svc-preview-navlinks span {
display: block;
height: 6px;
width: 24px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.1);
}
.svc-preview-cta {
width: 44px;
height: 16px;
border-radius: 8px;
background: rgba(200, 241, 53, 0.6);
flex-shrink: 0;
}
.svc-preview-hero {
display: flex;
gap: 12px;
align-items: center;
margin-bottom: 10px;
background: rgba(200, 241, 53, 0.03);
border-radius: 6px;
padding: 12px;
}
.svc-preview-hero--alt {
background: rgba(96, 165, 250, 0.04);
}
.svc-preview-hero-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.svc-preview-h1 {
height: 10px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.45);
width: 80%;
}
.svc-preview-h1.wide { width: 95%; }
.svc-preview-h1.short { width: 55%; }
.svc-preview-h2 {
height: 7px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.18);
width: 100%;
}
.svc-preview-h2.short { width: 65%; }
.svc-preview-h2.wide { width: 90%; }
.svc-preview-btn {
height: 18px;
width: 60px;
border-radius: 9px;
background: var(--accent);
opacity: 0.8;
margin-top: 4px;
}
.svc-preview-hero-visual {
width: 60px;
height: 60px;
border-radius: 8px;
background: rgba(200, 241, 53, 0.08);
border: 1px solid rgba(200, 241, 53, 0.15);
flex-shrink: 0;
}
.svc-preview-section-mini {
display: flex;
gap: 6px;
}
.svc-preview-mini-card {
flex: 1;
height: 36px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.07);
}
/* Slide 2 : pages strip */
.svc-preview-pages-strip {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-top: 8px;
}
.svc-preview-pages-strip span {
font-size: 9px;
color: rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 3px 8px;
border-radius: 4px;
font-family: var(--font-heading);
letter-spacing: 0.05em;
}
/* Slide 3 : landing */
.svc-preview-landing-hero {
padding: 12px;
background: rgba(96, 165, 250, 0.04);
border-radius: 6px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
.svc-preview-landing-badge {
width: 48px;
height: 10px;
border-radius: 10px;
background: rgba(200, 241, 53, 0.25);
}
.svc-preview-landing-form {
display: flex;
gap: 6px;
margin-top: 4px;
}
.svc-preview-input {
flex: 1;
height: 18px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.svc-preview-submit {
width: 44px;
height: 18px;
border-radius: 4px;
background: var(--accent);
opacity: 0.8;
}
.svc-preview-trust {
display: flex;
gap: 6px;
justify-content: center;
}
.svc-preview-trust span {
width: 32px;
height: 12px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.07);
}
/* Slide 4 : e-commerce */
.svc-preview-shop-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.svc-preview-cart {
font-size: 14px;
opacity: 0.5;
}
.svc-preview-shop-grid {
display: flex;
gap: 6px;
margin-bottom: 10px;
}
.svc-preview-product {
flex: 1;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 6px;
padding: 8px;
display: flex;
flex-direction: column;
gap: 4px;
}
.svc-preview-product.featured {
border-color: rgba(200, 241, 53, 0.2);
background: rgba(200, 241, 53, 0.03);
}
.svc-preview-product-img {
height: 36px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.07);
}
.svc-preview-product-name {
height: 5px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.2);
width: 80%;
}
.svc-preview-product-price {
height: 6px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.12);
width: 50%;
}
.svc-preview-product-price.accent {
background: rgba(200, 241, 53, 0.4);
}
.svc-preview-payment-strip {
display: flex;
gap: 6px;
justify-content: center;
}
.svc-preview-payment-strip span {
font-size: 9px;
color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 3px 8px;
border-radius: 4px;
font-family: var(--font-heading);
}
/* Slide 5 : réservation */
.svc-preview-booking-header {
margin-bottom: 10px;
display: flex;
flex-direction: column;
gap: 5px;
}
.svc-preview-calendar {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 8px;
padding: 10px;
margin-bottom: 10px;
}
.svc-preview-cal-header {
height: 8px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.15);
width: 60%;
margin-bottom: 8px;
}
.svc-preview-cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.cal-day {
height: 16px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.04);
}
.cal-day.available {
background: rgba(200, 241, 53, 0.1);
border: 1px solid rgba(200, 241, 53, 0.15);
}
.cal-day.selected {
background: var(--accent);
opacity: 0.8;
}
.svc-preview-booking-btn {
height: 22px;
border-radius: 6px;
background: var(--accent);
opacity: 0.7;
width: 100%;
}
/* Responsive */
@media (max-width: 768px) {
.svc-slide-preview { min-height: 160px; padding: 12px; }
.svc-slide-label { padding: 12px 14px; }
}
/* ══════════════════════════════════════════════════════════
SVC CAROUSEL · MOCKUPS ENRICHIS PAR TYPE DE SITE
Chaque slide a son propre layout pour être identifiable
au premier coup d'œil.
══════════════════════════════════════════════════════════ */
/* Augmentation de la hauteur minimum pour laisser de la place */
.svc-slide-preview {
min-height: 240px;
display: flex;
flex-direction: column;
}
@media (max-width: 768px) {
.svc-slide-preview { min-height: 210px; }
}
/* ═══════════════════════════════════════
SLIDE 1 · ONE-PAGE ACQUISITION
Hero gradient + 2 CTAs + stats row
═══════════════════════════════════════ */
.svc-preview--onepage .op-hero {
background: linear-gradient(135deg,
rgba(200, 241, 53, 0.14) 0%,
rgba(200, 241, 53, 0.04) 100%);
border: 1px solid rgba(200, 241, 53, 0.18);
border-radius: 8px;
padding: 14px 14px 16px;
margin-bottom: 12px;
display: flex;
flex-direction: column;
gap: 5px;
}
.op-hero-title {
height: 11px;
width: 85%;
border-radius: 3px;
background: rgba(255, 255, 255, 0.6);
}
.op-hero-sub {
height: 6px;
width: 100%;
border-radius: 2px;
background: rgba(255, 255, 255, 0.18);
margin-top: 2px;
}
.op-hero-sub.short { width: 65%; }
.op-hero-btns {
display: flex;
gap: 8px;
margin-top: 8px;
}
.op-btn {
height: 20px;
border-radius: 10px;
flex: 0 0 auto;
}
.op-btn.primary {
width: 68px;
background: var(--accent);
box-shadow: 0 2px 8px rgba(200, 241, 53, 0.3);
}
.op-btn.ghost {
width: 54px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.25);
}
.op-stats {
display: flex;
gap: 8px;
margin-top: auto;
}
.op-stat {
flex: 1;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
padding: 8px 6px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.op-stat-num {
font-family: var(--font-heading);
font-size: 14px;
font-weight: 700;
color: var(--accent);
letter-spacing: 0.02em;
}
.op-stat-lbl {
display: block;
width: 70%;
height: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.15);
}
/* ═══════════════════════════════════════
SLIDE 2 · VITRINE MULTI-PAGES
Navbar + tabs + breadcrumb + sidebar + content
═══════════════════════════════════════ */
.svc-preview--vitrine .vt-navbar {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(96, 165, 250, 0.15);
margin-bottom: 10px;
}
.vt-logo {
width: 26px;
height: 8px;
border-radius: 2px;
background: rgba(96, 165, 250, 0.7);
flex-shrink: 0;
}
.vt-links {
display: flex;
gap: 10px;
flex: 1;
min-width: 0;
}
.vt-links span {
font-family: var(--font-heading);
font-size: 8px;
color: rgba(255, 255, 255, 0.45);
font-weight: 500;
letter-spacing: 0.02em;
white-space: nowrap;
position: relative;
padding-bottom: 2px;
}
.vt-links span.active {
color: rgba(96, 165, 250, 1);
}
.vt-links span.active::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 1.5px;
background: rgba(96, 165, 250, 0.9);
border-radius: 1px;
}
.vt-breadcrumb {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 10px;
font-family: var(--font-body);
font-size: 8px;
color: rgba(255, 255, 255, 0.35);
}
.vt-crumb-sep {
color: rgba(255, 255, 255, 0.25);
}
.vt-breadcrumb span.active {
color: rgba(96, 165, 250, 0.85);
font-weight: 600;
}
.vt-body {
display: flex;
gap: 10px;
flex: 1;
}
.vt-sidebar {
width: 66px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 5px;
padding: 7px 6px;
display: flex;
flex-direction: column;
gap: 5px;
flex-shrink: 0;
}
.vt-side-item {
height: 6px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.08);
}
.vt-side-item.active {
background: rgba(96, 165, 250, 0.55);
box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.2);
}
.vt-content {
flex: 1;
background: rgba(96, 165, 250, 0.03);
border: 1px solid rgba(96, 165, 250, 0.08);
border-radius: 5px;
padding: 10px;
display: flex;
flex-direction: column;
gap: 5px;
}
.vt-page-title {
height: 9px;
width: 70%;
border-radius: 3px;
background: rgba(255, 255, 255, 0.5);
margin-bottom: 3px;
}
.vt-para {
height: 4px;
width: 100%;
border-radius: 2px;
background: rgba(255, 255, 255, 0.14);
}
.vt-para.short { width: 60%; }
/* ═══════════════════════════════════════
SLIDE 3 · LANDING PAGE
Bannière urgence + hero + form + social proof
═══════════════════════════════════════ */
.svc-preview--landing .lp-urgency {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: rgba(251, 113, 133, 0.12);
border: 1px solid rgba(251, 113, 133, 0.28);
border-radius: 20px;
align-self: flex-start;
margin-bottom: 12px;
}
.lp-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(251, 113, 133, 0.9);
box-shadow: 0 0 0 2px rgba(251, 113, 133, 0.2);
flex-shrink: 0;
}
.lp-urgency-txt {
font-family: var(--font-heading);
font-size: 8px;
color: rgba(251, 113, 133, 0.95);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.lp-hero {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
margin-bottom: 12px;
}
.lp-title {
height: 12px;
width: 85%;
border-radius: 3px;
background: rgba(255, 255, 255, 0.6);
}
.lp-sub {
height: 6px;
width: 70%;
border-radius: 2px;
background: rgba(255, 255, 255, 0.22);
}
.lp-form {
display: flex;
gap: 6px;
padding: 6px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
margin-bottom: 12px;
}
.lp-input {
flex: 1;
height: 22px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.lp-cta {
width: 70px;
height: 22px;
border-radius: 5px;
background: var(--accent);
box-shadow: 0 3px 12px rgba(200, 241, 53, 0.35);
flex-shrink: 0;
}
.lp-proof {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: auto;
}
.lp-stars {
display: flex;
gap: 2px;
}
.lp-stars span {
font-size: 11px;
color: #fbbf24;
line-height: 1;
}
.lp-proof-txt {
font-family: var(--font-heading);
font-size: 9px;
color: rgba(255, 255, 255, 0.55);
font-weight: 600;
letter-spacing: 0.03em;
}
/* ═══════════════════════════════════════
SLIDE 4 · E-COMMERCE
Header shop + grid produits + paiements
═══════════════════════════════════════ */
.svc-preview--shop .sh-header {
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sh-logo {
width: 28px;
height: 8px;
border-radius: 2px;
background: var(--accent);
opacity: 0.8;
flex-shrink: 0;
}
.sh-search {
flex: 1;
height: 16px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.sh-cart {
position: relative;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 5px;
flex-shrink: 0;
}
.sh-cart-ico {
font-size: 11px;
opacity: 0.7;
}
.sh-cart-badge {
position: absolute;
top: -5px;
right: -5px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--accent);
color: #0a0a0a;
font-family: var(--font-heading);
font-size: 9px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55);
}
.sh-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 7px;
margin-bottom: 10px;
flex: 1;
}
.sh-card {
position: relative;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
padding: 7px;
display: flex;
flex-direction: column;
gap: 6px;
}
.sh-card--featured {
border-color: rgba(200, 241, 53, 0.35);
background: rgba(200, 241, 53, 0.05);
box-shadow: 0 0 0 1px rgba(200, 241, 53, 0.15);
}
.sh-badge {
position: absolute;
top: -5px;
right: 5px;
font-family: var(--font-heading);
font-size: 7px;
font-weight: 700;
padding: 2px 6px;
border-radius: 20px;
background: var(--accent);
color: #0a0a0a;
letter-spacing: 0.05em;
box-shadow: 0 2px 6px rgba(200, 241, 53, 0.35);
}
.sh-img {
height: 38px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.07);
}
.sh-img--1 { background: linear-gradient(135deg, rgba(96, 165, 250, 0.3), rgba(96, 165, 250, 0.1)); }
.sh-img--2 { background: linear-gradient(135deg, rgba(200, 241, 53, 0.35), rgba(200, 241, 53, 0.1)); }
.sh-img--3 { background: linear-gradient(135deg, rgba(250, 180, 80, 0.3), rgba(250, 180, 80, 0.08)); }
.sh-price {
font-family: var(--font-heading);
font-size: 9px;
font-weight: 700;
color: rgba(255, 255, 255, 0.7);
letter-spacing: 0.02em;
text-align: center;
}
.sh-price--accent {
color: var(--accent);
}
.sh-pay {
display: flex;
justify-content: center;
gap: 6px;
margin-top: auto;
}
.sh-pay-pill {
font-family: var(--font-heading);
font-size: 8px;
font-weight: 700;
padding: 4px 8px;
border-radius: 12px;
letter-spacing: 0.04em;
}
.sh-pay--wave {
background: rgba(26, 209, 240, 0.15);
border: 1px solid rgba(26, 209, 240, 0.35);
color: rgba(26, 209, 240, 0.95);
}
.sh-pay--om {
background: rgba(255, 121, 0, 0.12);
border: 1px solid rgba(255, 121, 0, 0.3);
color: rgba(255, 150, 50, 0.95);
}
.sh-pay--cb {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.7);
}
/* ═══════════════════════════════════════
SLIDE 5 · RÉSERVATION
Header + dates + time slots + confirmation
═══════════════════════════════════════ */
.svc-preview--booking .bk-header {
margin-bottom: 10px;
display: flex;
flex-direction: column;
gap: 4px;
}
.bk-title {
font-family: var(--font-heading);
font-size: 11px;
font-weight: 700;
color: rgba(255, 255, 255, 0.85);
letter-spacing: 0.01em;
}
.bk-sub {
height: 5px;
width: 55%;
border-radius: 2px;
background: rgba(255, 255, 255, 0.15);
}
.bk-dates {
display: flex;
gap: 5px;
margin-bottom: 10px;
}
.bk-date {
flex: 1;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 5px;
padding: 6px 2px;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.bk-date--sel {
background: rgba(6, 182, 212, 0.14);
border-color: rgba(6, 182, 212, 0.45);
box-shadow: 0 2px 8px rgba(6, 182, 212, 0.2);
}
.bk-d-day {
font-family: var(--font-heading);
font-size: 7px;
color: rgba(255, 255, 255, 0.45);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.bk-d-num {
font-family: var(--font-heading);
font-size: 11px;
font-weight: 700;
color: rgba(255, 255, 255, 0.85);
}
.bk-date--sel .bk-d-day,
.bk-date--sel .bk-d-num {
color: rgba(103, 232, 249, 1);
}
.bk-slots {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
margin-bottom: 10px;
}
.bk-slot {
font-family: var(--font-heading);
font-size: 8px;
font-weight: 700;
padding: 5px 2px;
text-align: center;
border-radius: 4px;
letter-spacing: 0.02em;
}
.bk-slot--ok {
background: rgba(6, 182, 212, 0.08);
border: 1px solid rgba(6, 182, 212, 0.22);
color: rgba(103, 232, 249, 0.9);
}
.bk-slot--no {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.2);
text-decoration: line-through;
}
.bk-slot--sel {
background: var(--accent);
border: 1px solid var(--accent);
color: #0a0a0a;
box-shadow: 0 2px 8px rgba(200, 241, 53, 0.35);
}
.bk-confirm {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
background: rgba(200, 241, 53, 0.08);
border: 1px solid rgba(200, 241, 53, 0.3);
border-radius: 6px;
margin-top: auto;
}
.bk-check {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--accent);
color: #0a0a0a;
font-size: 9px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bk-confirm-txt {
font-family: var(--font-heading);
font-size: 9px;
font-weight: 600;
color: rgba(200, 241, 53, 0.9);
letter-spacing: 0.02em;
}
/* ═══════════════════════════════════════
SLIDE 6 · CORPORATE
Navbar étoffée + hero + stats institutionnelles
═══════════════════════════════════════ */
.svc-preview--corporate .cp-navbar {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 8px;
margin-bottom: 12px;
border-bottom: 1px solid rgba(226, 197, 111, 0.18);
}
.cp-logo {
width: 30px;
height: 9px;
border-radius: 2px;
background: linear-gradient(90deg, #e2c56f, #f4dd90);
flex-shrink: 0;
}
.cp-links {
display: flex;
gap: 7px;
flex: 1;
min-width: 0;
}
.cp-links span {
display: block;
height: 5px;
width: 20px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.12);
}
.cp-lang {
font-family: var(--font-heading);
font-size: 8px;
font-weight: 700;
padding: 3px 7px;
border: 1px solid rgba(226, 197, 111, 0.4);
border-radius: 3px;
color: rgba(226, 197, 111, 0.85);
letter-spacing: 0.05em;
flex-shrink: 0;
}
.cp-hero {
display: flex;
gap: 12px;
align-items: center;
padding: 12px;
background: linear-gradient(135deg,
rgba(226, 197, 111, 0.06) 0%,
rgba(226, 197, 111, 0.01) 100%);
border: 1px solid rgba(226, 197, 111, 0.14);
border-radius: 6px;
margin-bottom: 12px;
}
.cp-hero-left {
flex: 1;
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.cp-eyebrow {
font-family: var(--font-heading);
font-size: 7px;
font-weight: 700;
color: rgba(226, 197, 111, 0.85);
letter-spacing: 0.12em;
}
.cp-title {
height: 10px;
width: 90%;
border-radius: 3px;
background: rgba(255, 255, 255, 0.55);
}
.cp-subtitle {
height: 5px;
width: 70%;
border-radius: 2px;
background: rgba(255, 255, 255, 0.2);
}
.cp-hero-visual {
width: 52px;
height: 52px;
border-radius: 6px;
background:
radial-gradient(circle at 30% 30%, rgba(226, 197, 111, 0.35), rgba(226, 197, 111, 0.08)),
rgba(226, 197, 111, 0.03);
border: 1px solid rgba(226, 197, 111, 0.2);
flex-shrink: 0;
}
.cp-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
margin-top: auto;
}
.cp-stat {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(226, 197, 111, 0.15);
border-radius: 5px;
padding: 7px 4px;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.cp-stat-num {
font-family: var(--font-heading);
font-size: 12px;
font-weight: 700;
color: rgba(226, 197, 111, 0.95);
letter-spacing: 0.02em;
}
.cp-stat-lbl {
font-family: var(--font-heading);
font-size: 7px;
color: rgba(255, 255, 255, 0.45);
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* ═══════════════════════════════════════
RESPONSIVE · Mockups enrichis
═══════════════════════════════════════ */
@media (max-width: 768px) {
/* Slide 1 */
.svc-preview--onepage .op-hero { padding: 10px 10px 12px; }
.op-btn.primary { width: 56px; }
.op-btn.ghost { width: 44px; }
.op-stat-num { font-size: 12px; }
/* Slide 2 */
.vt-links { gap: 6px; }
.vt-links span { font-size: 7px; }
.vt-sidebar { width: 52px; padding: 6px 5px; }
/* Slide 3 */
.lp-stars span { font-size: 10px; }
.lp-proof-txt { font-size: 8px; }
/* Slide 4 */
.sh-price { font-size: 8px; }
.sh-img { height: 32px; }
.sh-pay-pill { font-size: 7px; padding: 3px 6px; }
/* Slide 5 */
.bk-title { font-size: 10px; }
.bk-d-num { font-size: 10px; }
.bk-slot { font-size: 7px; }
.bk-confirm-txt { font-size: 8px; }
/* Slide 6 */
.cp-hero { padding: 10px; gap: 10px; }
.cp-hero-visual { width: 44px; height: 44px; }
.cp-stat-num { font-size: 10px; }
.cp-stat-lbl { font-size: 6px; }
}
@media (max-width: 480px) {
/* Slide 4 : passer à 3 colonnes compactes */
.sh-grid { gap: 5px; }
.sh-card { padding: 5px; }
.sh-badge { font-size: 6px; padding: 1px 4px; }
/* Slide 5 : pills compactes */
.bk-dates { gap: 3px; }
.bk-date { padding: 5px 1px; }
.bk-slots { gap: 3px; }
/* Slide 6 : 2 colonnes de stats */
.cp-stats { grid-template-columns: repeat(2, 1fr); gap: 4px; }
.cp-links span { width: 14px; }
}
/* ══════════════════════════════════════════════════════════
SVC CAROUSEL · ANIMATIONS D'ENTRÉE PAR SLIDE
Déclenchées via .svc-slide.is-active (toggle JS).
Règle perf : transform + opacity uniquement.
animation-fill-mode: backwards → masque l'élément
pendant le delay, sans le cacher après l'animation
(donc pas de flash quand .is-active est retiré).
══════════════════════════════════════════════════════════ */
@keyframes scaCarFadeUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes scaCarFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes scaCarPopIn {
from { opacity: 0; transform: scale(0.85); }
to { opacity: 1; transform: scale(1); }
}
@keyframes scaCarSlideR {
from { opacity: 0; transform: translateX(-12px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes scaCarSlideL {
from { opacity: 0; transform: translateX(12px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes scaCarPulseDot {
0%, 100% { transform: scale(1); opacity: 0.9; }
50% { transform: scale(1.45); opacity: 1; }
}
/* ─── SLIDE 1 · One-Page (mini-browser) ─── */
.svc-slide.is-active .svc-preview--onepage .op-window {
animation: scaCarFadeUp 0.5s 0s backwards;
}
.svc-slide.is-active .svc-preview--onepage .op-topbar {
animation: scaCarFadeIn 0.35s 0.1s backwards;
}
.svc-slide.is-active .svc-preview--onepage .op-sec--hero {
animation: scaCarSlideR 0.45s 0.2s backwards;
}
.svc-slide.is-active .svc-preview--onepage .op-sec--services {
animation: scaCarSlideR 0.45s 0.35s backwards;
}
.svc-slide.is-active .svc-preview--onepage .op-sec--stats {
animation: scaCarSlideR 0.45s 0.5s backwards;
}
.svc-slide.is-active .svc-preview--onepage .op-sec--cta {
animation: scaCarSlideR 0.45s 0.65s backwards;
}
.svc-slide.is-active .svc-preview--onepage .op-scrollbar-thumb {
animation: scaCarFadeIn 0.5s 0.85s backwards;
}
/* ─── SLIDE 2 · Vitrine multi-pages (cascade) ─── */
.svc-slide.is-active .svc-preview--vitrine .vt-layer--3 {
animation: scaCarFadeUp 0.5s 0s backwards;
}
.svc-slide.is-active .svc-preview--vitrine .vt-layer--2 {
animation: scaCarFadeUp 0.5s 0.1s backwards;
}
.svc-slide.is-active .svc-preview--vitrine .vt-layer--1 {
animation: scaCarFadeUp 0.5s 0.2s backwards;
}
.svc-slide.is-active .svc-preview--vitrine .vt-nav-link:nth-child(1) {
animation: scaCarFadeUp 0.35s 0.35s backwards;
}
.svc-slide.is-active .svc-preview--vitrine .vt-nav-link:nth-child(2) {
animation: scaCarFadeUp 0.35s 0.41s backwards;
}
.svc-slide.is-active .svc-preview--vitrine .vt-nav-link:nth-child(3) {
animation: scaCarFadeUp 0.35s 0.47s backwards;
}
.svc-slide.is-active .svc-preview--vitrine .vt-nav-link:nth-child(4) {
animation: scaCarFadeUp 0.35s 0.53s backwards;
}
.svc-slide.is-active .svc-preview--vitrine .vt-nav-link:nth-child(5) {
animation: scaCarFadeUp 0.35s 0.59s backwards;
}
.svc-slide.is-active .svc-preview--vitrine .vt-hero {
animation: scaCarFadeUp 0.45s 0.6s backwards;
}
.svc-slide.is-active .svc-preview--vitrine .vt-ql-card:nth-child(1) {
animation: scaCarPopIn 0.4s 0.78s backwards;
}
.svc-slide.is-active .svc-preview--vitrine .vt-ql-card:nth-child(2) {
animation: scaCarPopIn 0.4s 0.85s backwards;
}
.svc-slide.is-active .svc-preview--vitrine .vt-ql-card:nth-child(3) {
animation: scaCarPopIn 0.4s 0.92s backwards;
}
.svc-slide.is-active .svc-preview--vitrine .vt-ql-card:nth-child(4) {
animation: scaCarPopIn 0.4s 0.99s backwards;
}
/* ─── SLIDE 3 · Landing Page (focus conversion) ─── */
.svc-slide.is-active .svc-preview--landing .lp-urgency-bar {
animation: scaCarFadeUp 0.45s 0s backwards;
}
.svc-slide.is-active .svc-preview--landing .lp-pulse-dot {
animation: scaCarPulseDot 1.5s 0.5s infinite;
}
.svc-slide.is-active .svc-preview--landing .lp-pre-badge {
animation: scaCarPopIn 0.4s 0.2s backwards;
}
.svc-slide.is-active .svc-preview--landing .lp-title-big {
animation: scaCarFadeUp 0.5s 0.3s backwards;
}
.svc-slide.is-active .svc-preview--landing .lp-sub-big {
animation: scaCarFadeUp 0.5s 0.4s backwards;
}
.svc-slide.is-active .svc-preview--landing .lp-form-box {
animation: scaCarFadeUp 0.5s 0.5s backwards;
}
.svc-slide.is-active .svc-preview--landing .lp-avatar:nth-child(1) {
animation: scaCarPopIn 0.35s 0.7s backwards;
}
.svc-slide.is-active .svc-preview--landing .lp-avatar:nth-child(2) {
animation: scaCarPopIn 0.35s 0.76s backwards;
}
.svc-slide.is-active .svc-preview--landing .lp-avatar:nth-child(3) {
animation: scaCarPopIn 0.35s 0.82s backwards;
}
.svc-slide.is-active .svc-preview--landing .lp-avatar:nth-child(4) {
animation: scaCarPopIn 0.35s 0.88s backwards;
}
.svc-slide.is-active .svc-preview--landing .lp-avatar:nth-child(5) {
animation: scaCarPopIn 0.35s 0.94s backwards;
}
.svc-slide.is-active .svc-preview--landing .lp-social-text {
animation: scaCarFadeIn 0.4s 1.0s backwards;
}
/* ─── SLIDE 4 · E-commerce ─── */
.svc-slide.is-active .svc-preview--shop .sh-header {
animation: scaCarFadeIn 0.4s 0s backwards;
}
.svc-slide.is-active .svc-preview--shop .sh-card:nth-child(1) {
animation: scaCarPopIn 0.5s 0.12s backwards;
}
.svc-slide.is-active .svc-preview--shop .sh-card:nth-child(2) {
animation: scaCarPopIn 0.5s 0.22s backwards;
}
.svc-slide.is-active .svc-preview--shop .sh-card:nth-child(3) {
animation: scaCarPopIn 0.5s 0.32s backwards;
}
.svc-slide.is-active .svc-preview--shop .sh-pay-pill:nth-child(1) {
animation: scaCarFadeUp 0.4s 0.5s backwards;
}
.svc-slide.is-active .svc-preview--shop .sh-pay-pill:nth-child(2) {
animation: scaCarFadeUp 0.4s 0.58s backwards;
}
.svc-slide.is-active .svc-preview--shop .sh-pay-pill:nth-child(3) {
animation: scaCarFadeUp 0.4s 0.66s backwards;
}
.svc-slide.is-active .svc-preview--shop .sh-cart-badge {
animation: scaCarPopIn 0.45s 0.7s backwards;
}
/* ─── SLIDE 5 · Réservation ─── */
.svc-slide.is-active .svc-preview--booking .bk-header {
animation: scaCarFadeUp 0.4s 0s backwards;
}
.svc-slide.is-active .svc-preview--booking .bk-date:nth-child(1) {
animation: scaCarPopIn 0.4s 0.1s backwards;
}
.svc-slide.is-active .svc-preview--booking .bk-date:nth-child(2) {
animation: scaCarPopIn 0.4s 0.16s backwards;
}
.svc-slide.is-active .svc-preview--booking .bk-date:nth-child(3) {
animation: scaCarPopIn 0.4s 0.22s backwards;
}
.svc-slide.is-active .svc-preview--booking .bk-date:nth-child(4) {
animation: scaCarPopIn 0.4s 0.28s backwards;
}
.svc-slide.is-active .svc-preview--booking .bk-date:nth-child(5) {
animation: scaCarPopIn 0.4s 0.34s backwards;
}
.svc-slide.is-active .svc-preview--booking .bk-slot:nth-child(1) {
animation: scaCarFadeUp 0.35s 0.42s backwards;
}
.svc-slide.is-active .svc-preview--booking .bk-slot:nth-child(2) {
animation: scaCarFadeUp 0.35s 0.48s backwards;
}
.svc-slide.is-active .svc-preview--booking .bk-slot:nth-child(3) {
animation: scaCarFadeUp 0.35s 0.54s backwards;
}
.svc-slide.is-active .svc-preview--booking .bk-slot:nth-child(4) {
animation: scaCarFadeUp 0.35s 0.6s backwards;
}
.svc-slide.is-active .svc-preview--booking .bk-slot:nth-child(5) {
animation: scaCarFadeUp 0.35s 0.66s backwards;
}
.svc-slide.is-active .svc-preview--booking .bk-slot:nth-child(6) {
animation: scaCarFadeUp 0.35s 0.72s backwards;
}
.svc-slide.is-active .svc-preview--booking .bk-confirm {
animation: scaCarFadeUp 0.5s 0.85s backwards;
}
/* ─── SLIDE 6 · Corporate ─── */
.svc-slide.is-active .svc-preview--corporate .cp-navbar {
animation: scaCarFadeIn 0.4s 0s backwards;
}
.svc-slide.is-active .svc-preview--corporate .cp-hero {
animation: scaCarFadeUp 0.55s 0.12s backwards;
}
.svc-slide.is-active .svc-preview--corporate .cp-stat:nth-child(1) {
animation: scaCarPopIn 0.45s 0.4s backwards;
}
.svc-slide.is-active .svc-preview--corporate .cp-stat:nth-child(2) {
animation: scaCarPopIn 0.45s 0.5s backwards;
}
.svc-slide.is-active .svc-preview--corporate .cp-stat:nth-child(3) {
animation: scaCarPopIn 0.45s 0.6s backwards;
}
.svc-slide.is-active .svc-preview--corporate .cp-stat:nth-child(4) {
animation: scaCarPopIn 0.45s 0.7s backwards;
}
/* ─── Reduced motion : désactivation des animations carousel ─── */
@media (prefers-reduced-motion: reduce) {
.svc-slide.is-active .svc-preview--onepage *,
.svc-slide.is-active .svc-preview--vitrine *,
.svc-slide.is-active .svc-preview--landing *,
.svc-slide.is-active .svc-preview--shop *,
.svc-slide.is-active .svc-preview--booking *,
.svc-slide.is-active .svc-preview--corporate * {
animation: none !important;
}
}
/* ══════════════════════════════════════════════════════════
SVC CAROUSEL · REFONTE SLIDES 1, 2, 3
Mockups enrichis et distinctifs par type de site.
══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════
SLIDE 1 · ONE-PAGE (mini-browser vertical)
Fenêtre navigateur avec 4 sections visibles
empilées + scrollbar latérale.
═══════════════════════════════════════ */
.svc-preview--onepage .op-window {
flex: 1;
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
overflow: hidden;
position: relative;
}
.svc-preview--onepage .op-topbar {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
background: rgba(0, 0, 0, 0.35);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
flex-shrink: 0;
}
.op-logo-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 1.5px rgba(200, 241, 53, 0.25);
flex-shrink: 0;
}
.op-url {
flex: 1;
font-family: var(--font-heading);
font-size: 8px;
color: rgba(255, 255, 255, 0.45);
letter-spacing: 0.03em;
text-align: center;
padding: 3px 8px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
}
.op-top-cta {
width: 38px;
height: 12px;
border-radius: 6px;
background: var(--accent);
box-shadow: 0 2px 6px rgba(200, 241, 53, 0.3);
flex-shrink: 0;
}
.op-content {
flex: 1;
padding: 8px 16px 8px 10px;
display: flex;
flex-direction: column;
gap: 6px;
overflow: hidden;
}
.op-sec {
position: relative;
padding: 6px 8px 6px 32px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.op-sec-eyebrow {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 26px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-size: 6px;
font-weight: 700;
color: rgba(200, 241, 53, 0.75);
letter-spacing: 0.08em;
writing-mode: vertical-rl;
transform: rotate(180deg);
background: rgba(200, 241, 53, 0.06);
border-right: 1px solid rgba(200, 241, 53, 0.18);
border-radius: 4px 0 0 4px;
white-space: nowrap;
}
.op-sec-body {
display: flex;
flex-direction: column;
gap: 3px;
width: 100%;
}
/* Section 1 - Hero */
.op-sec--hero {
background: linear-gradient(135deg,
rgba(200, 241, 53, 0.1) 0%,
rgba(200, 241, 53, 0.02) 100%);
border-color: rgba(200, 241, 53, 0.18);
}
.op-h-title {
height: 7px;
width: 80%;
border-radius: 2px;
background: rgba(255, 255, 255, 0.55);
}
.op-h-sub {
height: 4px;
width: 60%;
border-radius: 2px;
background: rgba(255, 255, 255, 0.22);
}
.op-h-btn-row {
display: flex;
gap: 5px;
margin-top: 2px;
}
.op-h-btn {
height: 10px;
border-radius: 5px;
}
.op-h-btn.primary {
width: 30px;
background: var(--accent);
box-shadow: 0 1px 3px rgba(200, 241, 53, 0.3);
}
.op-h-btn.ghost {
width: 22px;
border: 1px solid rgba(255, 255, 255, 0.25);
}
/* Section 2 - Services */
.op-svc-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
width: 100%;
}
.op-svc-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 3px;
padding: 4px 3px;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
}
.op-svc-ico {
width: 10px;
height: 10px;
border-radius: 2px;
}
.op-svc-ico--1 { background: rgba(96, 165, 250, 0.6); }
.op-svc-ico--2 { background: rgba(200, 241, 53, 0.6); }
.op-svc-ico--3 { background: rgba(168, 130, 255, 0.6); }
.op-svc-line {
height: 2px;
width: 80%;
border-radius: 1px;
background: rgba(255, 255, 255, 0.2);
}
/* Section 3 - Stats */
.op-sec--stats {
background: rgba(255, 255, 255, 0.03);
}
.op-stats-row {
display: flex;
gap: 5px;
justify-content: space-around;
width: 100%;
}
.op-stat-blk {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
flex: 1;
}
.op-stat-n {
font-family: var(--font-heading);
font-size: 11px;
font-weight: 700;
color: var(--accent);
line-height: 1;
letter-spacing: 0.01em;
}
.op-stat-l {
font-family: var(--font-heading);
font-size: 5px;
color: rgba(255, 255, 255, 0.4);
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* Section 4 - CTA */
.op-sec--cta {
background: linear-gradient(135deg,
rgba(200, 241, 53, 0.12) 0%,
rgba(200, 241, 53, 0.04) 100%);
border-color: rgba(200, 241, 53, 0.22);
}
.op-final-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 5px 10px;
background: var(--accent);
border-radius: 5px;
box-shadow: 0 2px 10px rgba(200, 241, 53, 0.4);
}
.op-final-cta-label {
display: block;
height: 4px;
width: 50px;
border-radius: 2px;
background: rgba(10, 10, 10, 0.55);
}
.op-final-cta-arrow {
font-size: 9px;
color: #0a0a0a;
font-weight: 900;
line-height: 1;
}
/* Scrollbar latérale */
.svc-preview--onepage .op-scrollbar {
position: absolute;
top: 32px;
bottom: 6px;
right: 4px;
width: 3px;
background: rgba(255, 255, 255, 0.04);
border-radius: 2px;
overflow: hidden;
}
.svc-preview--onepage .op-scrollbar-thumb {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 30%;
background: rgba(200, 241, 53, 0.7);
border-radius: 2px;
box-shadow: 0 0 6px rgba(200, 241, 53, 0.4);
}
/* ═══════════════════════════════════════
SLIDE 2 · VITRINE MULTI-PAGES (cascade)
3 pages superposées en perspective.
═══════════════════════════════════════ */
.svc-preview--vitrine .vt-stack {
position: relative;
flex: 1;
min-height: 220px;
}
.svc-preview--vitrine .vt-layer {
position: absolute;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(96, 165, 250, 0.18);
border-radius: 7px;
box-shadow:
0 4px 18px rgba(0, 0, 0, 0.35),
0 0 0 1px rgba(255, 255, 255, 0.03);
backdrop-filter: blur(6px);
}
.vt-layer--1 {
top: 16px;
left: 0;
right: 24px;
bottom: 0;
background: rgba(10, 10, 10, 0.88);
border-color: rgba(96, 165, 250, 0.3);
box-shadow:
0 6px 24px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(96, 165, 250, 0.15);
padding: 10px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 3;
}
.vt-layer--2 {
top: 8px;
left: 14px;
right: 10px;
bottom: 14px;
z-index: 2;
opacity: 0.65;
}
.vt-layer--3 {
top: 0;
left: 28px;
right: 0;
bottom: 28px;
z-index: 1;
opacity: 0.35;
}
.vt-layer-tab {
position: absolute;
top: -8px;
left: 10px;
font-family: var(--font-heading);
font-size: 7px;
font-weight: 700;
letter-spacing: 0.08em;
padding: 3px 8px;
border-radius: 3px 3px 0 0;
background: rgba(96, 165, 250, 0.18);
border: 1px solid rgba(96, 165, 250, 0.3);
border-bottom: none;
color: rgba(96, 165, 250, 0.8);
white-space: nowrap;
}
.vt-layer-tab--active {
background: rgba(96, 165, 250, 0.35);
color: rgba(147, 197, 253, 1);
box-shadow: 0 -2px 8px rgba(96, 165, 250, 0.25);
}
/* Front layer content */
.vt-nav {
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(96, 165, 250, 0.15);
}
.vt-nav-logo {
width: 22px;
height: 7px;
border-radius: 2px;
background: rgba(96, 165, 250, 0.7);
flex-shrink: 0;
}
.vt-nav-links {
display: flex;
gap: 7px;
flex: 1;
}
.vt-nav-link {
font-family: var(--font-heading);
font-size: 7px;
font-weight: 500;
color: rgba(255, 255, 255, 0.38);
padding-bottom: 2px;
position: relative;
white-space: nowrap;
letter-spacing: 0.02em;
}
.vt-nav-link--active {
color: rgba(147, 197, 253, 1);
font-weight: 700;
}
.vt-nav-link--active::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -6px;
height: 1.5px;
background: rgba(96, 165, 250, 0.95);
border-radius: 1px;
box-shadow: 0 0 6px rgba(96, 165, 250, 0.4);
}
.vt-hero {
padding: 8px 10px;
background: linear-gradient(135deg,
rgba(96, 165, 250, 0.08) 0%,
rgba(96, 165, 250, 0.01) 100%);
border: 1px solid rgba(96, 165, 250, 0.15);
border-radius: 5px;
display: flex;
flex-direction: column;
gap: 4px;
}
.vt-hero-title {
height: 8px;
width: 85%;
border-radius: 3px;
background: rgba(255, 255, 255, 0.55);
}
.vt-hero-sub {
height: 4px;
width: 100%;
border-radius: 2px;
background: rgba(255, 255, 255, 0.2);
}
.vt-hero-sub.short { width: 65%; }
.vt-ql {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
margin-top: auto;
}
.vt-ql-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(96, 165, 250, 0.12);
border-radius: 4px;
padding: 6px 3px;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
}
.vt-ql-ico {
width: 14px;
height: 14px;
border-radius: 3px;
}
.vt-ql-ico--svc { background: rgba(96, 165, 250, 0.4); }
.vt-ql-ico--pf { background: rgba(200, 241, 53, 0.4); }
.vt-ql-ico--bl { background: rgba(168, 130, 255, 0.4); }
.vt-ql-ico--ct { background: rgba(250, 180, 80, 0.4); }
.vt-ql-lbl {
font-family: var(--font-heading);
font-size: 6px;
font-weight: 600;
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.03em;
text-transform: uppercase;
}
/* ═══════════════════════════════════════
SLIDE 3 · LANDING PAGE (ultra focus)
Urgence bar + hero focus + form + social proof
═══════════════════════════════════════ */
.svc-preview--landing .lp-urgency-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: linear-gradient(90deg,
rgba(251, 113, 133, 0.18) 0%,
rgba(251, 113, 133, 0.08) 100%);
border: 1px solid rgba(251, 113, 133, 0.4);
border-radius: 6px;
margin-bottom: 10px;
}
.lp-pulse-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(251, 113, 133, 1);
box-shadow:
0 0 0 2px rgba(251, 113, 133, 0.25),
0 0 8px rgba(251, 113, 133, 0.5);
flex-shrink: 0;
}
.lp-urgency-text {
flex: 1;
font-family: var(--font-heading);
font-size: 8px;
font-weight: 700;
color: rgba(251, 113, 133, 0.95);
letter-spacing: 0.1em;
}
.lp-countdown {
display: inline-flex;
align-items: center;
gap: 2px;
font-family: var(--font-heading);
font-size: 9px;
font-weight: 700;
color: rgba(255, 255, 255, 0.95);
background: rgba(0, 0, 0, 0.4);
padding: 3px 6px;
border-radius: 3px;
border: 1px solid rgba(251, 113, 133, 0.3);
letter-spacing: 0.04em;
}
.lp-cd-num {
color: rgba(255, 200, 200, 1);
}
.lp-cd-sep {
color: rgba(251, 113, 133, 0.6);
padding: 0 1px;
}
.svc-preview--landing .lp-hero-focus {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
margin-bottom: 10px;
}
.lp-pre-badge {
display: inline-block;
font-family: var(--font-heading);
font-size: 7px;
font-weight: 700;
padding: 3px 8px;
background: rgba(200, 241, 53, 0.12);
border: 1px solid rgba(200, 241, 53, 0.35);
color: var(--accent);
border-radius: 10px;
letter-spacing: 0.15em;
}
.lp-title-big {
height: 11px;
width: 82%;
border-radius: 3px;
background: linear-gradient(90deg,
rgba(255, 255, 255, 0.75) 0%,
rgba(255, 255, 255, 0.55) 100%);
}
.lp-sub-big {
height: 6px;
width: 62%;
border-radius: 2px;
background: rgba(255, 255, 255, 0.22);
}
.svc-preview--landing .lp-form-box {
display: flex;
gap: 6px;
padding: 6px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
margin-bottom: 10px;
}
.lp-input-lg {
flex: 1;
height: 24px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
gap: 6px;
padding: 0 8px;
}
.lp-input-ico {
width: 10px;
height: 10px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.25);
flex-shrink: 0;
}
.lp-input-line {
flex: 1;
height: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.14);
}
.lp-cta-lg {
display: flex;
align-items: center;
gap: 5px;
padding: 0 10px;
height: 24px;
border-radius: 5px;
background: linear-gradient(135deg, var(--accent) 0%, #a8cc1a 100%);
box-shadow:
0 3px 14px rgba(200, 241, 53, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
flex-shrink: 0;
}
.lp-cta-lg-text {
font-family: var(--font-heading);
font-size: 8px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: 0.06em;
}
.lp-cta-lg-arrow {
font-size: 10px;
color: #0a0a0a;
font-weight: 900;
line-height: 1;
}
.svc-preview--landing .lp-social {
display: flex;
align-items: center;
gap: 10px;
margin-top: auto;
padding-top: 4px;
}
.lp-avatars {
display: flex;
flex-shrink: 0;
}
.lp-avatar {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid rgba(10, 10, 10, 0.9);
margin-left: -6px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.lp-avatar:first-child { margin-left: 0; }
.lp-av--1 { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
.lp-av--2 { background: linear-gradient(135deg, #fb7185, #f43f5e); }
.lp-av--3 { background: linear-gradient(135deg, #c8f135, #a8cc1a); }
.lp-av--4 { background: linear-gradient(135deg, #a882ff, #8b5cf6); }
.lp-av--5 { background: linear-gradient(135deg, #fab450, #f59e0b); }
.lp-social-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 1px;
}
.lp-stars-row {
display: flex;
align-items: center;
gap: 2px;
}
.lp-stars-row span {
font-size: 10px;
color: #fbbf24;
line-height: 1;
}
.lp-score {
font-family: var(--font-heading);
font-size: 9px;
font-weight: 700;
color: rgba(255, 255, 255, 0.95);
margin-left: 4px;
}
.lp-count-txt {
font-family: var(--font-heading);
font-size: 7px;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.04em;
}
/* ═══════════════════════════════════════
RESPONSIVE · Slides 1, 2, 3 refondues
═══════════════════════════════════════ */
@media (max-width: 768px) {
.op-url { font-size: 7px; }
.op-top-cta { width: 32px; }
.op-stat-n { font-size: 10px; }
.op-stat-l { font-size: 4px; }
.op-sec { padding-left: 28px; }
.op-sec-eyebrow { width: 22px; font-size: 5px; }
.vt-layer--1 { padding: 8px; }
.vt-nav-link { font-size: 6px; }
.vt-ql-ico { width: 12px; height: 12px; }
.vt-ql-lbl { font-size: 5px; }
.lp-urgency-text { font-size: 7px; }
.lp-countdown { font-size: 8px; padding: 2px 5px; }
.lp-pre-badge { font-size: 6px; padding: 2px 6px; }
.lp-avatar { width: 16px; height: 16px; }
.lp-cta-lg-text { font-size: 7px; }
}
@media (max-width: 480px) {
.op-svc-grid { gap: 3px; }
.op-svc-card { padding: 3px 2px; }
.op-svc-ico { width: 8px; height: 8px; }
.vt-ql { gap: 3px; }
.vt-ql-card { padding: 4px 2px; }
.lp-avatar { width: 14px; height: 14px; margin-left: -5px; }
.lp-input-lg { height: 20px; }
.lp-cta-lg { height: 20px; padding: 0 8px; }
}
/* ══════════════════════════════════════════════════════════
SECTION EYEBROW · classe utilitaire partagée
══════════════════════════════════════════════════════════ */
.section-eyebrow {
display: inline-block;
font-family: var(--font-heading);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 14px;
}
/* ══════════════════════════════════════════════════════════
SECTION · LE BON SITE POUR LE BON BUSINESS (.right-fit)
Fond sombre + 4 cartes glass 2×2.
══════════════════════════════════════════════════════════ */
.right-fit {
background: var(--black);
position: relative;
overflow: hidden;
}
.right-fit .container {
position: relative;
z-index: 1;
}
.right-fit-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: 60px;
}
.rf-card {
position: relative;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius);
padding: 36px 32px 32px;
transition: border-color var(--transition), transform var(--transition), background var(--transition);
display: flex;
flex-direction: column;
gap: 16px;
}
.rf-card:hover {
border-color: var(--accent);
background: rgba(255, 255, 255, 0.055);
transform: translateY(-3px);
}
.rf-card__icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(200, 241, 53, 0.08);
border: 1px solid rgba(200, 241, 53, 0.22);
border-radius: 14px;
color: var(--accent);
flex-shrink: 0;
transition: background var(--transition), border-color var(--transition);
}
.rf-card:hover .rf-card__icon {
background: rgba(200, 241, 53, 0.14);
border-color: rgba(200, 241, 53, 0.4);
}
.rf-card__title {
font-family: var(--font-heading);
font-size: 19px;
font-weight: 700;
line-height: 1.3;
color: var(--white);
margin: 0;
}
.rf-card__text {
font-size: 15px;
line-height: 1.65;
color: var(--gray-400);
margin: 0;
}
@media (max-width: 768px) {
.right-fit-grid {
grid-template-columns: 1fr;
gap: 18px;
margin-top: 40px;
}
.rf-card {
padding: 28px 24px 26px;
}
.rf-card__title {
font-size: 17px;
}
.rf-card__text {
font-size: 14px;
}
}
/* ══════════════════════════════════════════════════════════
SECTION · VOTRE LISTE DE CONTACTS (.your-list)
Fond blanc avec quadrillage. Comparaison 2 colonnes + stats
══════════════════════════════════════════════════════════ */
.your-list {
background: var(--gray-200);
position: relative;
overflow: hidden;
}
.your-list .services-grid-overlay {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
z-index: 0;
mix-blend-mode: multiply;
}
.your-list .container {
position: relative;
z-index: 1;
}
.your-list .section-eyebrow,
.your-list .yl-eyebrow {
color: var(--gray-600);
}
/* .accent-text sur fond blanc : même traitement que dans la section FAQ */
.your-list .accent-text {
background: rgba(10, 10, 10, 0.85);
color: var(--accent);
padding: 3px 10px;
border-radius: 6px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* Tous supports (PC, mobile, tablette) : pills noires reduites de ~15%
(padding + radius), police inchangee. Applique a tous les titres
avec fond noir sur section claire, partout dans le site. */
.your-list .accent-text,
.why-us .accent-text,
.faq .accent-text,
.services .accent-text,
.site-types .accent-text,
.tech-accent {
padding: 1px 6px !important;
border-radius: 4px !important;
}
/* Testimonials : pill plus petite a la base (font 0.92em), scale proportionnel */
.testimonials .accent-text {
padding: 1px 5px !important;
border-radius: 4px !important;
}
/* ── Comparaison 2 colonnes ── */
.yl-compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 60px;
margin-bottom: 56px;
}
.yl-col {
position: relative;
background: var(--white);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 18px;
padding: 34px 30px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
0 8px 32px rgba(0, 0, 0, 0.05);
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
overflow: hidden;
}
/* Accent bar top supprime (demande utilisateur) */
.yl-col--with {
border-color: rgba(200, 241, 53, 0.35);
background: linear-gradient(180deg, #ffffff 0%, #fcfff0 100%);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
0 12px 40px rgba(200, 241, 53, 0.12);
}
.yl-col--without {
background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}
@media (hover: hover) and (pointer: fine) {
.yl-col:hover {
transform: translateY(-3px);
}
.yl-col--with:hover {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
0 16px 48px rgba(200, 241, 53, 0.2);
}
.yl-col--without:hover {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
0 12px 40px rgba(248, 113, 113, 0.12);
}
}
/* Titre : badge-style avec dot indicator */
.yl-col__title {
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--font-heading);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
margin: 0 0 26px;
padding: 7px 14px;
border-radius: 100px;
position: relative;
}
.yl-col__title::before {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 0 3px rgba(0,0,0,0.03);
}
.yl-col__title--bad {
color: #b91c1c;
background: rgba(248, 113, 113, 0.08);
border: 1px solid rgba(248, 113, 113, 0.22);
}
.yl-col__title--bad::before {
background: #ef4444;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15),
0 0 10px rgba(239, 68, 68, 0.45);
}
.yl-col__title--good {
color: #5d7500;
background: rgba(200, 241, 53, 0.14);
border: 1px solid rgba(200, 241, 53, 0.4);
}
.yl-col__title--good::before {
background: #84cc16;
box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.18),
0 0 10px rgba(200, 241, 53, 0.6);
animation: ylPulse 2.2s ease-in-out infinite;
}
@keyframes ylPulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.18),
0 0 10px rgba(200, 241, 53, 0.6);
}
50% {
transform: scale(1.1);
box-shadow: 0 0 0 4px rgba(132, 204, 22, 0.12),
0 0 14px rgba(200, 241, 53, 0.85);
}
}
.yl-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.yl-item {
display: flex;
align-items: flex-start;
gap: 14px;
font-size: 15px;
line-height: 1.55;
color: #3f3f3f;
transition: transform 0.3s ease;
}
.yl-item--bad {
color: #58585b;
}
.yl-item--good {
color: #2a2a2a;
font-weight: 500;
}
.yl-mark {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 1px;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.yl-item--bad .yl-mark {
background: linear-gradient(135deg,
rgba(248, 113, 113, 0.12) 0%,
rgba(248, 113, 113, 0.05) 100%);
color: #ef4444;
border: 1px solid rgba(248, 113, 113, 0.28);
box-shadow: 0 1px 2px rgba(248, 113, 113, 0.08);
}
.yl-item--good .yl-mark {
background: linear-gradient(135deg,
rgba(200, 241, 53, 0.25) 0%,
rgba(200, 241, 53, 0.1) 100%);
color: #3f6212;
border: 1px solid rgba(132, 204, 22, 0.5);
box-shadow: 0 1px 2px rgba(132, 204, 22, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
@media (hover: hover) and (pointer: fine) {
.yl-item:hover .yl-mark {
transform: scale(1.08) rotate(-4deg);
}
.yl-item--good:hover .yl-mark {
transform: scale(1.08) rotate(4deg);
}
}
/* ── Bande de 3 chiffres (fond sombre qui tranche sur le blanc) ── */
.yl-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
background: var(--black);
border: 1px solid rgba(200, 241, 53, 0.15);
border-radius: var(--radius-lg);
padding: 40px;
margin-bottom: 48px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}
.yl-stat {
text-align: center;
display: flex;
flex-direction: column;
gap: 10px;
}
.yl-stat__value {
font-family: var(--font-heading);
color: var(--accent);
font-size: clamp(32px, 5vw, 52px);
font-weight: 700;
line-height: 1;
letter-spacing: -0.01em;
}
.yl-stat__label {
color: var(--gray-400);
font-size: 13px;
line-height: 1.5;
max-width: 260px;
margin: 0 auto;
}
/* ── CTA centré ── */
.yl-cta-wrap {
text-align: center;
}
.yl-cta {
display: inline-flex;
align-items: center;
gap: 10px;
}
.yl-cta svg {
transition: transform var(--transition);
}
.yl-cta:hover svg {
transform: translateX(4px);
}
/* ── Responsive ── */
@media (max-width: 900px) {
.yl-compare {
grid-template-columns: 1fr;
gap: 18px;
margin-top: 44px;
margin-bottom: 44px;
}
.yl-col {
padding: 26px 24px;
min-width: 0;
}
.yl-item {
min-width: 0;
}
.yl-item span {
min-width: 0;
overflow-wrap: break-word;
}
.yl-stats {
grid-template-columns: 1fr;
gap: 32px;
padding: 32px 28px;
}
.yl-stat {
padding: 0 12px;
min-width: 0;
}
}
/* ── Filet de securite overflow mobile · grids divers ── */
@media (max-width: 768px) {
.testimonial-card,
.about-value,
.about-content,
.rf-card,
.offer-card,
.process-step {
min-width: 0;
max-width: 100%;
}
/* Photo fondateur : constrainte pour garder un format portrait propre */
.about-photo {
min-width: 0;
max-width: 420px;
margin: 0 auto;
}
}
@media (max-width: 480px) {
.yl-col {
padding: 22px 20px;
}
.yl-item {
font-size: 14px;
gap: 12px;
}
.yl-mark {
width: 22px;
height: 22px;
}
.yl-stats {
padding: 28px 22px;
gap: 28px;
}
}
/* ══════════════════════════════════════════════════════════════════════
NAVIGATION · Mega menu Services (Phase 5 / avril 2026)
══════════════════════════════════════════════════════════════════════ */
/* Mega menu wrapper */
.nav-item-megamenu {
position: relative;
display: inline-flex;
}
.nav-link-has-mega {
display: inline-flex;
align-items: center;
gap: 4px;
}
.nav-mega-caret {
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-item-megamenu:hover .nav-mega-caret,
.nav-item-megamenu:focus-within .nav-mega-caret {
transform: rotate(180deg);
}
/* ═══════════════════════════════════════════════════════════
Mega menu V9 — Premium SaaS dropdown épuré (mai 2026)
- Structure 4 cartes 2×2 (sans topbar, sans numéros, sans flèches)
- Container icône en gradient accent (radius 12px) — accent +20%
- Hover : lift + accent border + icône rotation subtile
- Animations d'ouverture fluides (cubic-bezier 0.22,1,0.36,1 sur 0.5s)
═══════════════════════════════════════════════════════════ */
.nav-megamenu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(16px) scale(0.97);
transform-origin: top center;
min-width: 680px;
padding-top: 14px;
opacity: 0;
pointer-events: none;
filter: blur(2px);
transition:
opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.45s cubic-bezier(0.22, 1, 0.36, 1);
z-index: 1000;
}
.nav-item-megamenu:hover .nav-megamenu,
.nav-item-megamenu:focus-within .nav-megamenu {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0) scale(1);
filter: blur(0);
}
.nav-megamenu-inner {
position: relative;
background:
radial-gradient(120% 80% at 100% 0%, rgba(200, 241, 53, 0.04) 0%, transparent 55%),
linear-gradient(180deg, rgba(15, 15, 17, 0.98) 0%, rgba(10, 10, 12, 0.98) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
padding: 14px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 30px 80px -20px rgba(0, 0, 0, 0.7),
0 0 0 1px rgba(200, 241, 53, 0.04);
backdrop-filter: blur(24px) saturate(140%);
-webkit-backdrop-filter: blur(24px) saturate(140%);
overflow: hidden;
}
/* Grid 2x2 */
.nav-mega-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
margin-bottom: 10px;
}
/* Carte service — pattern premium épuré (icône + nom uniquement) */
.nav-mega-item {
--mi-accent: 200, 241, 53;
--mi-accent-color: #C8F135;
display: grid;
grid-template-columns: 44px 1fr;
align-items: center;
column-gap: 14px;
padding: 14px 16px;
border-radius: 14px;
text-decoration: none;
position: relative;
overflow: hidden;
background: rgba(255, 255, 255, 0.015);
border: 1px solid rgba(255, 255, 255, 0.05);
transition:
background 0.5s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-mega-item[data-color="blue"] { --mi-accent: 96, 165, 250; --mi-accent-color: #60A5FA; }
.nav-mega-item[data-color="purple"] { --mi-accent: 168, 130, 255; --mi-accent-color: #A882FF; }
.nav-mega-item[data-color="orange"] { --mi-accent: 250, 180, 80; --mi-accent-color: #FAB450; }
/* Halo accent en coin gauche au hover (accent +20%) */
.nav-mega-item::before {
content: "";
position: absolute;
top: 0;
left: -40px;
width: 140px;
height: 100%;
background: radial-gradient(circle at left, rgba(var(--mi-accent), 0.22) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
.nav-mega-item:hover,
.nav-mega-item:focus-visible {
background: rgba(var(--mi-accent), 0.06);
border-color: rgba(var(--mi-accent), 0.36);
transform: translateY(-1px);
}
.nav-mega-item:hover::before {
opacity: 1;
}
/* Container icône — gradient accent (intensités +20%) */
.nav-mega-icon {
width: 44px;
height: 44px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background:
linear-gradient(135deg, rgba(var(--mi-accent), 0.24) 0%, rgba(var(--mi-accent), 0.10) 100%);
border: 1px solid rgba(var(--mi-accent), 0.36);
color: var(--mi-accent-color);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 4px 12px rgba(var(--mi-accent), 0.12);
transition:
background 0.5s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
flex-shrink: 0;
}
.nav-mega-icon svg {
width: 20px;
height: 20px;
transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-mega-item:hover .nav-mega-icon {
background:
linear-gradient(135deg, rgba(var(--mi-accent), 0.38) 0%, rgba(var(--mi-accent), 0.17) 100%);
border-color: rgba(var(--mi-accent), 0.66);
transform: scale(1.06) rotate(-2deg);
}
.nav-mega-item:hover .nav-mega-icon svg {
transform: rotate(2deg);
}
/* Nom du service */
.nav-mega-name {
font-family: var(--font-heading);
font-size: 14px;
font-weight: 700;
color: rgba(255, 255, 255, 0.95);
letter-spacing: -0.005em;
line-height: 1.3;
transition: color 0.3s ease;
}
.nav-mega-item:hover .nav-mega-name {
color: #fff;
}
/* Footer CTA "Voir tous nos services" */
.nav-megamenu-overview {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 16px;
border-radius: 12px;
text-decoration: none;
background:
linear-gradient(135deg, rgba(200, 241, 53, 0.10) 0%, rgba(200, 241, 53, 0.04) 100%);
border: 1px solid rgba(200, 241, 53, 0.22);
transition:
background 0.35s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-megamenu-overview:hover,
.nav-megamenu-overview:focus-visible {
background:
linear-gradient(135deg, rgba(200, 241, 53, 0.18) 0%, rgba(200, 241, 53, 0.08) 100%);
border-color: rgba(200, 241, 53, 0.45);
}
.nav-megamenu-overview-label {
font-family: var(--font-heading);
font-size: 12.5px;
font-weight: 700;
color: var(--accent);
letter-spacing: 0.02em;
}
.nav-megamenu-overview-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--accent);
color: #0a0a0a;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-megamenu-overview-icon svg {
width: 12px;
height: 12px;
}
.nav-megamenu-overview:hover .nav-megamenu-overview-icon {
transform: translateX(3px);
}
/* Cacher le mega menu sur mobile/tablette : géré par le side-menu */
@media (max-width: 1024px) {
.nav-megamenu { display: none !important; }
.nav-mega-caret { display: none; }
}
/* ══════════════════════════════════════════════════════════════════════
SIDE MENU · Groupe Services avec sous-liens (collapsible-like, always open)
══════════════════════════════════════════════════════════════════════ */
/* Details accordion pour le groupe Services */
.side-menu-group {
display: flex;
flex-direction: column;
gap: 2px;
}
.side-menu-group > summary {
list-style: none;
cursor: pointer;
user-select: none;
}
.side-menu-group > summary::-webkit-details-marker { display: none; }
.side-menu-group > summary::marker { display: none; content: ''; }
.side-menu-link-group {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.side-menu-group-meta {
display: inline-flex;
align-items: center;
gap: 10px;
}
.side-menu-group-caret {
color: var(--accent);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.side-menu-group[open] .side-menu-group-caret {
transform: rotate(180deg);
}
/* Animation d'ouverture simple */
.side-menu-group .side-menu-sublinks {
animation: sideMenuSlideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes sideMenuSlideDown {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.side-menu-group-caret,
.side-menu-group .side-menu-sublinks { transition: none; animation: none; }
}
.side-menu-group-badge {
font-family: var(--font-heading);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--black);
background: var(--accent);
padding: 3px 9px;
border-radius: 50px;
min-width: 24px;
text-align: center;
}
.side-menu-sublinks {
display: flex;
flex-direction: column;
gap: 2px;
margin-left: 0;
padding: 6px 0 10px 0;
}
.side-menu-sublink {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
font-family: var(--font-heading);
font-size: 14px;
font-weight: 500;
line-height: 1.3;
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
border-radius: 10px;
transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease;
min-height: 48px;
}
.side-menu-sublink:hover {
color: var(--white);
background: rgba(255, 255, 255, 0.04);
transform: translateX(3px);
}
.side-menu-sub-icon {
width: 30px;
height: 30px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(200, 241, 53, 0.12);
border: 1px solid rgba(200, 241, 53, 0.22);
color: var(--accent);
flex-shrink: 0;
transition: background 0.3s ease, border-color 0.3s ease;
}
.side-menu-sub-icon svg { width: 16px; height: 16px; }
.side-menu-sublink:hover .side-menu-sub-icon {
background: rgba(200, 241, 53, 0.2);
border-color: rgba(200, 241, 53, 0.4);
}
.side-menu-sublink[data-color="blue"] .side-menu-sub-icon { background: rgba(96, 165, 250, 0.12); border-color: rgba(96, 165, 250, 0.22); color: #60A5FA; }
.side-menu-sublink[data-color="blue"]:hover .side-menu-sub-icon { background: rgba(96, 165, 250, 0.2); border-color: rgba(96, 165, 250, 0.4); }
.side-menu-sublink[data-color="purple"] .side-menu-sub-icon { background: rgba(168, 130, 255, 0.12); border-color: rgba(168, 130, 255, 0.22); color: #A882FF; }
.side-menu-sublink[data-color="purple"]:hover .side-menu-sub-icon { background: rgba(168, 130, 255, 0.2); border-color: rgba(168, 130, 255, 0.4); }
.side-menu-sublink[data-color="orange"] .side-menu-sub-icon { background: rgba(250, 180, 80, 0.12); border-color: rgba(250, 180, 80, 0.22); color: #FAB450; }
.side-menu-sublink[data-color="orange"]:hover .side-menu-sub-icon { background: rgba(250, 180, 80, 0.2); border-color: rgba(250, 180, 80, 0.4); }
@media (prefers-reduced-motion: reduce) {
.nav-megamenu,
.nav-mega-caret,
.nav-mega-item,
.side-menu-sublink { transition: none; }
}
/* ═══════════════════════════════════════════════════════════════════
V2 · LOTTIE LOADER .constat-lottie
Overlay au-dessus du SVG fallback. Le SVG reste visible par défaut ;
se masque dès que .lottie-active est appliquée sur le parent
.problem-card-visual (signal posé par le loader JS à la fin du chargement).
═══════════════════════════════════════════════════════════════════ */
.constat-lottie {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.constat-lottie svg,
.constat-lottie canvas {
width: 100% !important;
height: 100% !important;
display: block;
}
.problem-card-visual.lottie-active .constat-lottie {
opacity: 1;
}
.problem-card-visual.lottie-active .constat-svg-fallback {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* ═══════════════════════════════════════════════════════════════════
V2 · CURSEUR CUSTOM DESKTOP (.fs-cursor + .fs-cursor-dot)
Actif via .fs-cursor-active sur posé par JS si conditions OK.
mix-blend-mode difference pour visibilité sur fonds clairs ET foncés.
Inputs gardent le curseur natif texte.
═══════════════════════════════════════════════════════════════════ */
html.fs-cursor-active,
html.fs-cursor-active * {
cursor: none !important;
}
html.fs-cursor-active input,
html.fs-cursor-active textarea,
html.fs-cursor-active select,
html.fs-cursor-active [contenteditable="true"] {
cursor: text !important;
}
.fs-cursor,
.fs-cursor-dot {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
border-radius: 50%;
background: #ffffff;
mix-blend-mode: difference;
transform: translate3d(-50%, -50%, 0);
will-change: transform;
}
.fs-cursor {
width: 24px;
height: 24px;
z-index: 99999;
transition:
width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
height 0.25s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.3s ease;
}
.fs-cursor-dot {
width: 4px;
height: 4px;
z-index: 100000;
transition: opacity 0.2s ease;
}
.fs-cursor.is-hover {
width: 48px;
height: 48px;
}
.fs-cursor-dot.is-hover {
opacity: 0;
}
.fs-cursor.is-clicking {
width: 18px;
height: 18px;
transition: width 0.1s ease, height 0.1s ease;
}
.fs-cursor.is-hidden,
.fs-cursor-dot.is-hidden {
opacity: 0;
}
/* ═══════════════════════════════════════════════════════════════════
V2 · SPLITTYPE HELPERS
Lignes block (pour slide-up), chars inline-block (pour flow texte).
GSAP applique transform/opacity via translate3d (GPU).
═══════════════════════════════════════════════════════════════════ */
.fs-split-line {
display: block;
position: relative;
}
.fs-split-char {
display: inline-block;
position: relative;
}
/* Anti-FOUC : titres splittables masqués jusqu'à ce que GSAP prenne la main.
Si les libs ne chargent pas, fallback visible via media query reduced-motion. */
.section-heading .fs-split-line,
.yl-stat__value .fs-split-char {
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.section-heading .fs-split-line,
.yl-stat__value .fs-split-char {
opacity: 1;
}
}
/* ═══════════════════════════════════════════════════════════════
FRAME UPGRADE V4 · device-aware mockups (Sites web / Tunnels = Safari Pro,
Auto IA = iPhone, Dashboard = MacBook)
Bloc isolé : suppression possible sans casser le rendu legacy.
═══════════════════════════════════════════════════════════════ */
/* ─────── SAFARI PRO · chrome enrichi (Sites web + Tunnels) ─────── */
.svc-visual-card[data-frame="safari"] .svc-chrome {
background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
height: 52px;
padding: 0 14px;
display: grid;
grid-template-columns: auto auto 1fr auto;
align-items: center;
gap: 10px;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.svc-visual-card[data-frame="safari"] .chrome-traffic {
display: inline-flex;
align-items: center;
gap: 7px;
}
.svc-visual-card[data-frame="safari"] .chrome-dot {
width: 11px;
height: 11px;
box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.18);
transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), filter 0.25s ease;
}
.svc-visual-card[data-frame="safari"]:hover .chrome-dot { filter: brightness(1.08); }
.svc-visual-card[data-frame="safari"]:hover .cd-r { transform: scale(1.1); }
.svc-visual-card[data-frame="safari"]:hover .cd-y { transform: scale(1.1); transition-delay: 0.04s; }
.svc-visual-card[data-frame="safari"]:hover .cd-g { transform: scale(1.1); transition-delay: 0.08s; }
.svc-visual-card[data-frame="safari"] .chrome-nav {
display: inline-flex;
align-items: center;
gap: 5px;
}
.svc-visual-card[data-frame="safari"] .chrome-navbtn {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
color: rgba(255,255,255,0.5);
transition: background 0.2s ease, color 0.2s ease;
flex-shrink: 0;
}
.svc-visual-card[data-frame="safari"] .chrome-navbtn svg { width: 12px; height: 12px; }
.svc-visual-card[data-frame="safari"] .chrome-navbtn:hover {
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.85);
}
.svc-visual-card[data-frame="safari"] .chrome-navbtn--disabled {
opacity: 0.45;
pointer-events: none;
}
.svc-visual-card[data-frame="safari"] .chrome-url {
margin-left: 0;
height: 28px;
line-height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.07);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.svc-visual-card[data-frame="safari"] .chrome-favicon {
width: 11px;
height: 11px;
color: rgba(255,255,255,0.45);
flex-shrink: 0;
}
/* ─────── Mobile : iPhone reste vertical, MacBook réduit le bezel ─────── */
@media (max-width: 720px) {
}
@media (prefers-reduced-motion: reduce) {
.svc-visual-card[data-frame="safari"]:hover .chrome-dot { transform: none; transition: none; }
}
/* ═══════════════════════════════════════════════════════════════
FORMATS V2 — éditorial brutaliste sur fond blanc
(page services/sites-web → section #types-sites)
Hairline grid, numéros outline 01-06, badges featured,
accent vert FuturSite #C8F135 sur 2 cartes phares (one-page + e-commerce).
Bloc isolé : suppression possible sans casser le rendu legacy .sw-format.
═══════════════════════════════════════════════════════════════ */
.sw-formats--editorial {
--fmt-ink: #0a0a0a;
--fmt-ink-soft: rgba(10,10,10,0.62);
--fmt-ink-muted: rgba(10,10,10,0.38);
--fmt-hairline: rgba(10,10,10,0.10);
--fmt-hairline-strong: rgba(10,10,10,0.22);
--fmt-bg: #ffffff;
--fmt-bg-tint: #faf9f4;
--fmt-accent: #C8F135;
--fmt-accent-deep: #9bc217;
--fmt-ease: cubic-bezier(0.22, 1, 0.36, 1);
--fmt-ease-snap: cubic-bezier(0.5, 0, 0.1, 1);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
border: 1px solid var(--fmt-hairline-strong);
background: var(--fmt-bg);
background-image: radial-gradient(circle at 1px 1px, rgba(10,10,10,0.045) 1px, transparent 0);
background-size: 28px 28px;
background-position: 0 0;
border-radius: 2px;
margin-top: 56px;
overflow: hidden;
isolation: isolate;
}
.sw-format--v2 {
position: relative;
padding: 36px 32px 32px;
/* V12 : fond ivoire uniforme sur les 6 cartes (avant : var(--fmt-bg) #fff) */
background: var(--fmt-bg-tint);
border-right: 1px solid var(--fmt-hairline);
border-bottom: 1px solid var(--fmt-hairline);
display: flex;
flex-direction: column;
min-height: 380px;
transition:
background 380ms var(--fmt-ease),
transform 480ms var(--fmt-ease);
overflow: hidden;
isolation: isolate;
}
/* Retire les bordures redondantes en bord de grille */
.sw-format--v2:nth-child(3n) { border-right: none; }
.sw-format--v2:nth-last-child(-n+3) { border-bottom: none; }
/* Grand chiffre outline 01-06 — ancre visuelle top-right */
.sw-format-num {
position: absolute;
top: 18px;
right: 24px;
font-family: 'Chakra Petch', 'DM Sans', sans-serif;
font-size: clamp(3.6rem, 5.2vw, 4.8rem);
font-weight: 700;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1.5px var(--fmt-hairline-strong);
text-stroke: 1.5px var(--fmt-hairline-strong);
letter-spacing: -0.02em;
user-select: none;
z-index: 0;
transition:
color 360ms var(--fmt-ease),
-webkit-text-stroke-color 360ms var(--fmt-ease),
transform 480ms var(--fmt-ease);
}
/* V12 : data-featured retire (fond ivoire applique a toutes les cartes uniformement) */
/* Badge "Le plus demandé" / "Plus rentable" */
.sw-format-badge {
position: relative;
display: inline-flex;
align-items: center;
align-self: flex-start;
padding: 5px 10px 5px 9px;
background: var(--fmt-ink);
color: var(--fmt-accent);
font-family: 'DM Sans', sans-serif;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
border-radius: 3px;
margin-bottom: 14px;
z-index: 2;
line-height: 1;
}
.sw-format-badge::before {
content: '';
width: 6px;
height: 6px;
background: var(--fmt-accent);
border-radius: 50%;
margin-right: 7px;
box-shadow: 0 0 0 0 rgba(200, 241, 53, 0.5);
animation: fmtBadgePulse 2.4s var(--fmt-ease) infinite;
}
@keyframes fmtBadgePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(200, 241, 53, 0.5); }
50% { box-shadow: 0 0 0 6px rgba(200, 241, 53, 0); }
}
/* V12 : icone uniformisee sur les 6 cartes (carre noir + icone verte, ancien style featured) */
.sw-format--v2 .sw-format-icon {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--fmt-ink);
border: 1px solid var(--fmt-ink);
color: var(--fmt-accent);
border-radius: 8px;
margin-bottom: 22px;
transition:
border-color 280ms var(--fmt-ease),
background 280ms var(--fmt-ease),
color 280ms var(--fmt-ease);
z-index: 2;
position: relative;
flex-shrink: 0;
}
.sw-format--v2 .sw-format-icon svg {
width: 22px;
height: 22px;
}
/* Titre — typo forte */
.sw-format--v2 .sw-format-name {
font-family: 'Chakra Petch', 'DM Sans', sans-serif;
font-size: clamp(1.32rem, 1.6vw, 1.55rem);
font-weight: 700;
line-height: 1.15;
color: var(--fmt-ink);
letter-spacing: -0.015em;
margin: 0 0 14px;
z-index: 2;
position: relative;
}
/* Pitch — corps refined */
.sw-format--v2 .sw-format-pitch {
font-family: 'DM Sans', sans-serif;
font-size: 0.93rem;
line-height: 1.62;
color: var(--fmt-ink-soft);
margin: 0 0 20px;
z-index: 2;
position: relative;
flex-grow: 1;
}
/* CTA explore — toujours visible, en bas de carte, séparé par hairline,
typographique premium (ghost button + flèche underline qui s'étend au hover) */
.sw-format-explore {
margin-top: auto;
padding-top: 18px;
border-top: 1px solid var(--fmt-hairline);
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
font-family: 'DM Sans', sans-serif;
font-size: 0.82rem;
font-weight: 600;
color: var(--fmt-ink);
text-decoration: none;
letter-spacing: 0.01em;
background: transparent;
border-radius: 0;
z-index: 3;
position: relative;
transition: color 220ms var(--fmt-ease);
}
.sw-format-explore svg {
width: 16px;
height: 16px;
flex-shrink: 0;
transition: transform 360ms var(--fmt-ease-snap);
}
/* Underline animée qui s'étend au hover, à la place du soulignement HTML par défaut */
.sw-format-explore::before {
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: 0;
height: 2px;
background: var(--fmt-ink);
transition: width 480ms var(--fmt-ease);
}
.sw-format-explore:hover::before,
.sw-format-explore:focus-visible::before {
width: 100%;
}
.sw-format-explore:hover svg,
.sw-format-explore:focus-visible svg {
transform: translateX(5px);
}
.sw-format-explore:focus-visible {
outline: 2px solid var(--fmt-ink);
outline-offset: 4px;
}
/* Hover state V12 — fond uniforme ivoire qui s'assombrit legerement au survol */
.sw-format--v2:hover {
background: #f6f4ec;
transform: translateY(-2px);
z-index: 2;
}
.sw-format--v2:hover .sw-format-num {
color: var(--fmt-ink);
-webkit-text-stroke-color: var(--fmt-ink);
transform: translate(-3px, 3px);
}
/* V12 : hover icone inverse (vert plein + icone noire) pour effet visuel sympa */
.sw-format--v2:hover .sw-format-icon {
background: var(--fmt-accent);
border-color: var(--fmt-accent);
color: var(--fmt-ink);
}
/* Responsive : 2 cols tablette, 1 col mobile */
@media (max-width: 1024px) {
.sw-formats--editorial {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sw-format--v2 { border-right: 1px solid var(--fmt-hairline) !important; }
.sw-format--v2:nth-child(2n) { border-right: none !important; }
.sw-format--v2:nth-last-child(-n+3) { border-bottom: 1px solid var(--fmt-hairline) !important; }
.sw-format--v2:nth-last-child(-n+2) { border-bottom: none !important; }
}
@media (max-width: 640px) {
.sw-formats--editorial {
grid-template-columns: 1fr;
margin-top: 36px;
}
.sw-format--v2 {
padding: 28px 22px 24px;
border-right: none !important;
border-bottom: 1px solid var(--fmt-hairline) !important;
min-height: auto;
}
.sw-format--v2:last-child { border-bottom: none !important; }
.sw-format-num {
top: 14px;
right: 18px;
font-size: 3.2rem;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.sw-format--v2,
.sw-format--v2 .sw-format-num,
.sw-format--v2 .sw-format-icon,
.sw-format-explore,
.sw-format-explore svg,
.sw-format-explore::before {
transition: none !important;
}
.sw-format-badge::before { animation: none !important; }
.sw-format--v2:hover { transform: none !important; }
.sw-format--v2:hover .sw-format-num { transform: none !important; }
.sw-format-explore:hover svg { transform: none !important; }
}
/* ════════════════════════════════════════════════════════════════
HERO EYEBROW — pill éditorial monospace tracked + accent dot
Affiché juste au-dessus du H1 hero, signature géolocalisée.
════════════════════════════════════════════════════════════════ */
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
align-self: flex-start;
padding: 7px 14px 7px 12px;
margin-bottom: 22px;
font-family: 'Chakra Petch', 'DM Sans', monospace;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.16em;
color: rgba(255, 255, 255, 0.72);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 100px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
z-index: 2;
}
@media (max-width: 700px) {
.hero-eyebrow {
font-size: 0.62rem;
letter-spacing: 0.14em;
padding: 5px 11px 5px 10px;
gap: 7px;
margin-bottom: 16px;
}
}